Design          d’intéraction          Cours #5 http://wireframes.tumblr.com/jeudi 6 octobre 2011
C’est quoi un      wireframe?jeudi 6 octobre 2011
Guide fonctionel et visuel illustrant      l’organisation et la mise en page du      contenu d’un site par page ou par    ...
À quoi sert      un      wireframe?jeudi 6 octobre 2011
Un wireframe sert à :                                          ★      Disposer l’information sur la page                  ...
Design      Flexible.jeudi 6 octobre 2011
Responsive Design http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/?utm_source=feedburner&utm_medium=emai...
Patterns.jeudi 6 octobre 2011
Patterns     Les patrons sont des solutions aux problèmes     communs.jeudi 6 octobre 2011
Patterns                                                                                                                 F...
Gabarits.      (Templates)jeudi 6 octobre 2011
Créer un compte http://ui-patterns.com/collectionsjeudi 6 octobre 2011
Un articlejeudi 6 octobre 2011
Commentairesjeudi 6 octobre 2011
Mosaïc (Thumbnails)jeudi 6 octobre 2011
Produit et détailjeudi 6 octobre 2011
CMS.      (Content Management System)jeudi 6 octobre 2011
Un CMS est un système facilitant la      gestion du contenu dans un      environement collaboratif.A content management sy...
CMS                       ★   Permet un grand nombre de personnes de                           contribuer à l’ajout et à l...
Upcoming SlideShare
Loading in...5
×

Cours5 design d'interaction_csv

1,860

Published on

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

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,860
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cours5 design d'interaction_csv

  1. 1. Design d’intéraction Cours #5 http://wireframes.tumblr.com/jeudi 6 octobre 2011
  2. 2. C’est quoi un wireframe?jeudi 6 octobre 2011
  3. 3. 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 thepage layout or arrangement of the websiteʼs content, including interface elements and navigational systems, and how they work together.[2] The wireframe usually lackstypographic 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 itlooks like.”[4]http://en.wikipedia.org/wiki/Website_wireframejeudi 6 octobre 2011
  4. 4. À quoi sert un wireframe?jeudi 6 octobre 2011
  5. 5. Un wireframe sert à : ★ 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énariosWireframes 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 displayBrown, 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 establishfunctionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes ofpages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screendesigns.”[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.jeudi 6 octobre 2011
  6. 6. Design Flexible.jeudi 6 octobre 2011
  7. 7. Responsive Design http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+wireframesmag+%28Wireframes +Magazine%29jeudi 6 octobre 2011
  8. 8. Patterns.jeudi 6 octobre 2011
  9. 9. Patterns Les patrons sont des solutions aux problèmes communs.jeudi 6 octobre 2011
  10. 10. Patterns Format B i u Font 1 2 3 Size A ab Folder name enter text 888 text Done or Cancel text Browse Error message goes here. Message goes here. Error message goes here. Message goes Message goes here. here. text Search Message goes here. text dogs cats Sorry. Y elds marked below before label sh continuing. label snakes Success! Message goes here. Message goes here. Label Label Label Label Success! Message goes here. Message goes here. Label Label U  x  7  4  3 Cant read this? __ / __ / ____ / / Select a date range Select a date range http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/jeudi 6 octobre 2011
  11. 11. Gabarits. (Templates)jeudi 6 octobre 2011
  12. 12. Créer un compte http://ui-patterns.com/collectionsjeudi 6 octobre 2011
  13. 13. Un articlejeudi 6 octobre 2011
  14. 14. Commentairesjeudi 6 octobre 2011
  15. 15. Mosaïc (Thumbnails)jeudi 6 octobre 2011
  16. 16. Produit et détailjeudi 6 octobre 2011
  17. 17. CMS. (Content Management System)jeudi 6 octobre 2011
  18. 18. 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 bemanual 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 usersIn 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.http://en.wikipedia.org/wiki/Content_management_systemjeudi 6 octobre 2011
  19. 19. CMS ★ 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 équipejeudi 6 octobre 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×