Web DesignWeb Design

Support par

Web Design ?

• Web Design = Conception d’interfaces web :–Architecture (squelette) & Interactions–Organisation des pages & Arborescence– Ergonomie–Accessibilité et facilité d’utilisation– Esthétique

Des compétences ?

• Le Web Design réclame avant tout :– Sens de l’ergonomie– Application des techniques de Design au Web– Bonne connaissance des contraintes techniques– Bases en programmation web & connaissance des

standards (W3C, WAI, Mobilité, etc.)– De la créativité– …. Du temps, de la persévérance et un certain

sens de l’abnégation !!

Le processus créatif

Le processus créatif

• Le briefing créatif• Les couleurs• La charte graphique• Les mood board• Le zoning template• Les wireframes• Les “rough”• Les maquettes graphiques

Le processus créatif

Créatif ? Design organisé

Le processus créatif : Briéfing Créatif

1 : Définir 2 : Affiner 3 : Cerner

Le processus créatif : Les couleurs

• Pas plus de 3 couleurs en général

• Roue chromatique :– Complémentarité (opposée

sur la roue) => Effet “Choc”– Couleurs analogiques

(proches)– Triade et Tétrade => Bonne

base de départ

Le processus créatif : Charte graphique

Codes couleurs & Principales Typographies

Le processus créatif : Les mood board

Mood Board (ou planches d’inspiration) = Compilation de différentes sources d’inspiration pour faire ressortir l’ambiance créative du projet.

2 types de mood boards :• Les collages• Les “templates”

Le processus créatif : Collage Mood Board

Exemple : Futur site e-commerce d’articles pour bébés

Le processus créatif : Template Mood Board

Exemple : Futur site e-commerce d’articles pour bébés

Le processus creatif : Zoning Template

Zoning Template = Définir les principales zones d’interface et leurs impacts visuels ou importance

Le processus creatif : Les wireframes

• … ou mockups• Maquettes de zones plus détaillées avec

l’inclusion d’informations contextuelles, d’éléments d’interface et d’interactions utilisateur

Le processus créatif : Les wireframes

Le processus créatif : Les bruts (“ROUGH”)

• Pas réellement une technique mais une pratique que l’on peut rencontrer

• Travail manuel ou papier (éventuellement scanné) pouvant servir de base pour les échanges initiaux

Le processus créatif : Exemple de “Rough”

Le processus créatif : Les maquettes

Ultime étape avant le développement

Le processus creatif : Les maquettes

La charte web

Composition d’une charte web

• Qu’est-ce qu’une charte web ? :• Charte graphique• Régles d’écriture et typographiques (Web font

stack, Titres, etc.)• Iconographie, Sets de boutons à états et design

des principaux éléments d’interface (Menus, Onglets, Blocs, etc.)

Charte web : iconographie

• Le set iconographique d’un site ou d’une charte web définit l’identité symbolique

• Se compose de jeux d’icônes et de leurs déclinaisons

Du très simple :Au très détaillé :

Charte web : favicon

• La favicon est l’icône présente dans les onglets des navigateurs web :

• Il s’agit en réalité d’un simple fichier “.ico” au format 64x64 maximum. Par exemple :

Charte web : sets de contrôles

• Sets de boutons avec états + éléments d’interface (menus, onglets, blocs, etc.) avec variations contextuelles évent (exemple : univers)

Techniques de web design

Principales techniques de web design

• Les grid system• Golden ratio• Roue chromatique• Symétrie• Typographie• Responsive Web Design• Des fonds photographiques• … du style !

“La compétence technique, c’est l’art de maîtriser la complexité alors que la créativité est l’art de maîtriser la simplicité.”Christopher Zeeman (traduction)

Web design : golden ratio

• Golden ratio = 1.62 (arrondi)• Utilisé depuis des siècles (parthenon, joconde,

etc.)• Appliqué au web design : “Page Layout” • … mais pas que : Toutes les “proportions d’or”

sont bonnes à prendre

Web Design : Golden ratio

Exemples théoriques :

Web Design : Golden ratio

• Exemple concret :

Web design : symétrie et asymétrie

• Exemples de sites basés sur des design symétriques

Web design : Typographie

• Les sites focalisant sur les techniques / jeux typographiques sont très à la mode.

• Il s’agit clairement d’une tendance actuelle très en vogue en ce moment

Web design : Typographie

• Exemples de sites basés sur la typographie

Web design : couleurs

• Blanc / noir : Couleurs intemporelles• Couleurs “à la mode” en fonction des périodes

(attention aux effets de mode)• Exemple, couleurs à la mode été 2011 :

Web design : couleurs

• Exemples de design bâti autour de la colorimétrie

Web design : La profondeur

• Donner de la profondeur = Mode de la “3D”

Web design : Larges fonds photo

• Grâce aux nouvelles technologies (CSS3) ce type de design prend aujourd’hui de l’ampleur et peut créer des effets saisissants :

Web Design : Grid Design

• Les “Grid Design” sont des représentations statiques d’espacements “idéaux” en fonction d’une largeur définie.

• Il en existe de très nombreux dont certains “standards” tels que le 960 ou le 920.

• Le Grid Design sont très souvent “golden ratio compatibles”

Web design : Grid design

• Exemple : 960 Grid design

Web design : Grid design

• Exemple de réalisations basées sur des grilles

Web design : Creative Layout

• Creative Layout = Design originaux• Design originaux = Pas de norme particulière

Sortir du lot !

Creative Layout : Exemples

Design mobiles

Responsive Web Design

• Une grille flexible• Des images flexibles (ou plus exactement des

images qui s’adaptent dans un contexte flexible)

• Les Media Queries

Responsive design ?

Non : Juste un Design “Switchy”

Exemple de Design Flexible

Conclusion

Temps – Budget - Qualité

Outils pratiques

Roue chromatique interactive :http://colorschemedesigner.com/

960 HTML Grid Systemhttp://960.gs/demo.html

DaFont (typo)http://www.dafont.com/fr/

Web Font Stackhttp://www.codestyle.org/servlets/FontStack