03/14 Interfaces (architecture et wireframes)
===
###### tags: `Penninghen` `numérique` `design` `digital` `architecture` `wireframe` `cours 03/14`
[TOC]

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**

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

op=>operation: SCOPE:Périmètre du projet
op1=>operation: ARCHITECTURE: Structure du site et chemin proposé
op2=>operation: WIREFRAMES: schéma définisant les zones et composants
op3=>operation: FRONT-END

op->op1->op2->op3->op4

### 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.

:::warning
:zap: **Pour la semaine prochaine, finaliser vos projets entamés en cours et mettre ces rendus dans le drive avant le prochain cours.**
:::

## Notes et questions

:::info
**N'hésitez pas à poser vos questions** ou à enrichir ce document.
:::

https://hackmd.io/6eCViDnBQ2G8rdqINpK7mA?both

https://labs.jensimmons.com/2017/01-011.html