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** ![](https://i.imgur.com/xKrHf4y.png) 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 ```flow 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 --- :::warning :zap: **Pour la semaine prochaine, finaliser vos projets entamés en cours et mettre ces pré-rendus dans le drive avant le prochain cours.** ::: ## Notes et questions :::info **N'hésitez pas à poser vos questions** ou à enrichir ce document. ::: https://labs.jensimmons.com/2017/01-011.html
Last changed by  
 
tombucher
427

Read more

01/12 Présentation générale

``

4/27/2024
L3.DA3 Digital Design

Location: Salle G

12/19/2023
La sobriété numérique

:::info Pré rendu: 20 décembre Rendu: 17 janvier Format: libre ::: Sujet Le numérique est un domaine qui offre de nombreuses opportunités, mais qui pose aussi des défis majeurs. Pour ce sujet vous allez choisir d’explorer une des deux faces du numérique :

12/17/2023
02/12 Les Interfaces

Les portraits :::warning :book: Si quelqu'un a pris des notes, merci de les reporter ici! (vous pouvez si vous le souhaitez mettre des images) ::: Muriel Cooper Ada Lovelace elle est la pionniere de l'informatique moderne, en créant les premieres machines "programmables" elle est sous estimée par de nombreux nombreux homologuues masculins, dénigrée par le fait qu'elle soit une femme, sont ébauche de programme "ada" est encore utilisée dans de nombreux domaines aux etats unis. Wim Crouwel

9/18/2023
Read more from tombucher
Published on HackMD