cours5 design d'interaction_csv

Design d’intéraction Cours #5 jeudi 6 octobre 2011

Upload: celinecelines-semaan-vernon

Post on 07-Nov-2014




2 download


Voici les slides du cours donné au Collège Salette en date du 6 Oct. 2011


Page 1: Cours5 design d'interaction_csv

Design d’intéractionCours #5 6 octobre 2011

Page 2: Cours5 design d'interaction_csv

C’est quoi un wireframe?

jeudi 6 octobre 2011

Page 3: Cours5 design d'interaction_csv

Guide fonctionel et visuel illustrant l’organisation et la mise en page du contenu d’un site par page ou par action.

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.[1] The wireframe depicts the page layout or arrangement of the websiteʼs content, including interface elements and navigational systems, and how they work together.[2] The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.[3] In other words, it focuses on “what a screen does, not what it looks like.”[4]

jeudi 6 octobre 2011

Page 4: Cours5 design d'interaction_csv

À quoi sert un wireframe?

jeudi 6 octobre 2011

Page 5: Cours5 design d'interaction_csv

Wireframes focus on■ The kinds of information displayed■ The range of functions available■ The relative priorities of the information and functions■ The rules for displaying certain kinds of information■ The effect of different scenarios on the display

Brown, Dan M. Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders, 2011, p. 169.The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.[2] Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.”[3] Within the process of building a website, wireframing is where thinking becomes tangible.[5]

Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction.[6] Future technologies and media will force wireframes to adapt and evolve.

★ Disposer l’information sur la page (priorisation et fonctionnalité)

★ Illustrer et prototyper les différentes fonctionnalités

★ Présenter les règles selon chaque fonctionnalité

★ Représenter les différents type de scénarios

Un wireframe sert à :

jeudi 6 octobre 2011

Page 6: Cours5 design d'interaction_csv


jeudi 6 octobre 2011

Page 8: Cours5 design d'interaction_csv


jeudi 6 octobre 2011

Page 9: Cours5 design d'interaction_csv

PatternsLes patrons sont des solutions aux problèmes communs.

jeudi 6 octobre 2011

Page 10: Cours5 design d'interaction_csv

Patterns Folder name


Sorry. Y elds marked below before continuing.

Error message goes here. Error message goes here.

Success! Message goes here. Message goes here.

Message goes here.Message goes here.Message goes here.

Message goes here.

Success! Message goes here. Message goes here.





U  x  7  4  3 Can't read this?

Done or Cancel

Label Label

__ / __ / ____

Select a date range

/ /Select a date range




text Browse

text Search





iB u 123

A abFormat Font Size

enter text

jeudi 6 octobre 2011

Page 11: Cours5 design d'interaction_csv

Gabarits. (Templates)

jeudi 6 octobre 2011

Page 12: Cours5 design d'interaction_csv

Créer un compte

jeudi 6 octobre 2011

Page 13: Cours5 design d'interaction_csv

Un article

jeudi 6 octobre 2011

Page 14: Cours5 design d'interaction_csv


jeudi 6 octobre 2011

Page 15: Cours5 design d'interaction_csv

Mosaïc (Thumbnails)

jeudi 6 octobre 2011

Page 16: Cours5 design d'interaction_csv

Produit et détail

jeudi 6 octobre 2011

Page 17: Cours5 design d'interaction_csv

CMS. (Content Management System)

jeudi 6 octobre 2011

Page 18: Cours5 design d'interaction_csv

Un CMS est un système facilitant la gestion du contenu dans un environement collaboratif.

A content management system (CMS) is a system providing a collection of procedures used to manage work flow in a collaborative environment. These procedures can be manual or computer-based. The procedures are designed to do the following:

■ Allow for a large number of people to contribute to and share stored data■ Control access to data, based on user roles (defining which information users or user groups can view, edit, publish, etc.)■ Aid in easy storage and retrieval of data■ Reduce repetitive duplicate input■ Improve the ease of report writing■ Improve communication between users

In a CMS, data can be defined as nearly anything: documents, movies, pictures, phone numbers, scientific data, and so forth. CMSs are frequently used for storing, controlling, revising, semantically enriching, and publishing documentation. Serving as a central repository, the CMS increases the version level of new updates to an already existing file. Version control is one of the primary advantages of a CMS.

jeudi 6 octobre 2011

Page 19: Cours5 design d'interaction_csv

★ Permet un grand nombre de personnes de contribuer à l’ajout et à la modification de contenu en ligne

★ Permet le contrôle de l’accessibilité de l’information en définissant les rôles de chacun (qui peut modifier, publier, etc...)

★ Archive l’information de façon efficace permettant de communiquer avec d’autres systèmes

★ Améliore la communication entre les membre d’une équipe


jeudi 6 octobre 2011