Wireframes are low-fidelity visual guides that represent the skeletal framework of a website or application, focusing on functionality and content hierarchy rather than visual design. They aid in interface design, rapid prototyping, and establishing relationships between pages. Common uses of wireframes include illustrating information architecture, prototyping interactions and scenarios, and ensuring usability.

1. Design
d’intéraction
Cours #5
http://wireframes.tumblr.com/
jeudi 6 octobre 2011

2. C’est quoi un
wireframe?
jeudi 6 octobre 2011

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 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]
http://en.wikipedia.org/wiki/Website_wireframe
jeudi 6 octobre 2011

4. À quoi sert
un
wireframe?
jeudi 6 octobre 2011

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énarios
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.
jeudi 6 octobre 2011

6. Design
Flexible.
jeudi 6 octobre 2011

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%29
jeudi 6 octobre 2011

8. Patterns.
jeudi 6 octobre 2011

9. Patterns
Les patrons sont des solutions aux problèmes
communs.
jeudi 6 octobre 2011

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 Can't 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. Gabarits.
(Templates)
jeudi 6 octobre 2011

12. Créer un compte
http://ui-patterns.com/collections
jeudi 6 octobre 2011

13. Un article
jeudi 6 octobre 2011

14. Commentaires
jeudi 6 octobre 2011

15. Mosaïc (Thumbnails)
jeudi 6 octobre 2011

16. Produit et détail
jeudi 6 octobre 2011

17. CMS.
(Content Management System)
jeudi 6 octobre 2011

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 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.
http://en.wikipedia.org/wiki/Content_management_system
jeudi 6 octobre 2011

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 équipe
jeudi 6 octobre 2011