HackMD
03/14 Interfaces (architecture et wireframes)
tags: Penninghen numérique design digital architecture wireframe cours 03/14
Les FUI (fantasy user interface)
Une interface?
Une interface est la limite commune à deux systèmes,
permettant des échanges entre ceux-ci.
Les différents types d'interface
| CLI Command Line Interface | Graphic user interface | Natural User Interface? |
|---|---|---|
| Ligne de commande | Point & clic | Voice control |
| Swipe | ||
| Gesture | ||
| Eye tracking |
Les interfaces au cinema
Première "ordinateur"
Metropolis, Fritz Lang, 1927
CLI
Matrix, les Wachowski, 1999
GUI
– Point & Clic
En 1963 la première souris est développé par Douglas Engelbart, elle est présenté au public en 1968 ce qui a conduit à ce qu’on appelle le point & clic et le développement des Graphic User Interface.
En 1981: Xerox Star 8010 : première GUI avec un des premier logiciel de traitement de Wysiwyg = What you see is What you get
Jurassic Park, Steven Spielberg, 1993
– Swipe
Knowledge Navigator, clip concept d'Apple, 1987
Star Trek, 1966
Interface fictive LCARS (Library Computer Access and Retrieval System = « Système d'Accès et de Récupérations Informatisés des Données ») de Micheal Okuda
skeuomorphique ≠ flat design
skeuomorphique = imiter l’apparence d’un objet physique (pour rassurer l'utilisateur)
Oblivion, Joseph Kosinski, 2013
– Gesture
Minority Report, Steven Spielberg, 2002
Iron Man, Jon Favreau, 2008
– Eye tracking
Terminator, James Cameron, 1984
Robocop, Paul Verhoeven, 1987
Sight, Eran May-Raz et Daniel Lazo, 2013
Google glass, Hololens, Meta, Magic Leap
NUI
– Voice Control
Her, Spike Jonze, 2014
2001 l’odyssée de l’espace, Stanley Kubrick, 1968
Alphaville, Jean-Luc Godard, 1965
En conclusion
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Méthodologie de conceptions, User experience user interface.
L'interface
Une interface est la limite commune à deux systèmes, permettant des échanges entre ceux-ci.
Scope, Architecture, Wireframes, Front
UX feat. UI
Méthodologie de conceptions, Architecture et Wireframes
Arborescence / Architecture SEO
Tout a d’abord l’architecture est un livrable, il s’agit d’un document de travail sans lequel vous ne pourrez pas passer à l’étape d’après.
L’architecture va vous permettre de comprendre comment est structuré votre site internet.
Il vaut mieux éviter qu’il y ait plus de 3 niveaux autrement l’accès à certaines pages se fera plus difficilement. Autrement dit pour accéder à un contenu il ne faut pas faire plus de 3 clics.
Les différents types de maillage interne
Dans les métiers du design graphique on va plutôt concevoir des arborescences, cela dit il y a une version plus complexe de ce document qui est l’architecture SEO (qui signifie search engine optimization soit optimisation pour les moteurs de recherche).
Les spécialistes du référencement vont analyser les différents mots-clés du site pour créer un maillage interne efficace et donc favoriser le référencement. Il existe trois types de maillage:
– le maillage interne aléatoire
– le maillage interne en arbre généalogique
– et le maillage interne en silo
La notion de templates
Un template contient l’ensemble des éléments graphiques d’une page web.
Un template fait donc office de gabarit de page où certains éléments sont modifiables.
Un template = de nombreuses pages
On détermine le nombre de templates grâce au document d'architecture.
Les wireframes
Un wireframe ou maquette fonctionnelle est un schéma qui définit les zones et composants que la page doit contenir pour répondre aux différents besoins de ce template.
Responsive, adaptative design
L’adaptive design est conduit en parallèle sur plusieurs devices, dans le but d’apporter une expérience adaptée à chacun. Pour faire simple, un site desktop, un site mobile, un site tablette.
Le responsive design est apparu plus tard quand les devices ont commencé à se multiplier, rendant rapidement complexe la conception d’une version pour chaque résolution (sans compter celles n’étant pas encore apparues) ainsi que la maintenance des différentes versions.
Avec le responsive design, le contenu du site reste le même qu’importe le device et se réorganise dès qu’il atteint son seuil prédéfini (ou point de rupture).
Quant au fluide design, il permet de s’adapter dans la limite de résolution d’un seul device (exemple : d’un écran mobile de 640px à 720px).
Le fluide design est utilisé à la fois avec l’adaptive et le responsive, pour accentuer la flexibilité et la comptabilité entre toutes les tailles en lissant les écarts entre deux points de rupture.
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Notes et questions
N'hésitez pas à poser vos questions ou à enrichir ce document.
