Design, Évolutivité et Garantie Groupe EUN PRÉSENTATION DU GROUPE.
Présentation web design
-
Upload
fabien-pelissier -
Category
Design
-
view
2.445 -
download
0
description
Transcript of Présentation web design
![Page 1: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/1.jpg)
Web DesignWeb Design
Support par
![Page 2: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/2.jpg)
Web Design ?
• Web Design = Conception d’interfaces web :–Architecture (squelette) & Interactions–Organisation des pages & Arborescence– Ergonomie–Accessibilité et facilité d’utilisation– Esthétique
![Page 3: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/3.jpg)
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 !!
![Page 4: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/4.jpg)
Le processus créatif
![Page 5: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/5.jpg)
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
![Page 6: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/6.jpg)
Le processus créatif
Créatif ? Design organisé
![Page 7: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/7.jpg)
Le processus créatif : Briéfing Créatif
1 : Définir 2 : Affiner 3 : Cerner
![Page 8: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/8.jpg)
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
![Page 9: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/9.jpg)
Le processus créatif : Charte graphique
Codes couleurs & Principales Typographies
![Page 10: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/10.jpg)
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”
![Page 11: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/11.jpg)
Le processus créatif : Collage Mood Board
Exemple : Futur site e-commerce d’articles pour bébés
![Page 12: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/12.jpg)
Le processus créatif : Template Mood Board
Exemple : Futur site e-commerce d’articles pour bébés
![Page 13: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/13.jpg)
Le processus creatif : Zoning Template
Zoning Template = Définir les principales zones d’interface et leurs impacts visuels ou importance
![Page 14: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/14.jpg)
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
![Page 15: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/15.jpg)
Le processus créatif : Les wireframes
![Page 16: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/16.jpg)
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
![Page 17: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/17.jpg)
Le processus créatif : Exemple de “Rough”
![Page 18: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/18.jpg)
Le processus créatif : Les maquettes
Ultime étape avant le développement
![Page 19: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/19.jpg)
Le processus creatif : Les maquettes
![Page 20: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/20.jpg)
La charte web
![Page 21: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/21.jpg)
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.)
![Page 22: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/22.jpg)
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é :
![Page 23: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/23.jpg)
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 :
![Page 24: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/24.jpg)
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)
![Page 25: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/25.jpg)
Techniques de web design
![Page 26: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/26.jpg)
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)
![Page 27: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/27.jpg)
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
![Page 28: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/28.jpg)
Web Design : Golden ratio
Exemples théoriques :
![Page 29: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/29.jpg)
Web Design : Golden ratio
• Exemple concret :
![Page 30: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/30.jpg)
Web design : symétrie et asymétrie
• Exemples de sites basés sur des design symétriques
![Page 31: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/31.jpg)
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
![Page 32: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/32.jpg)
Web design : Typographie
• Exemples de sites basés sur la typographie
![Page 33: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/33.jpg)
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 :
![Page 34: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/34.jpg)
Web design : couleurs
• Exemples de design bâti autour de la colorimétrie
![Page 35: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/35.jpg)
Web design : La profondeur
• Donner de la profondeur = Mode de la “3D”
![Page 36: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/36.jpg)
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 :
![Page 37: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/37.jpg)
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”
![Page 38: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/38.jpg)
Web design : Grid design
• Exemple : 960 Grid design
![Page 39: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/39.jpg)
Web design : Grid design
• Exemple de réalisations basées sur des grilles
![Page 40: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/40.jpg)
Web design : Creative Layout
• Creative Layout = Design originaux• Design originaux = Pas de norme particulière
Sortir du lot !
![Page 41: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/41.jpg)
Creative Layout : Exemples
![Page 42: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/42.jpg)
Design mobiles
![Page 43: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/43.jpg)
Responsive Web Design
• Une grille flexible• Des images flexibles (ou plus exactement des
images qui s’adaptent dans un contexte flexible)
• Les Media Queries
![Page 44: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/44.jpg)
Responsive design ?
![Page 45: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/45.jpg)
Non : Juste un Design “Switchy”
![Page 46: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/46.jpg)
Exemple de Design Flexible
![Page 47: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/47.jpg)
Conclusion
![Page 48: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/48.jpg)
Temps – Budget - Qualité
![Page 49: Présentation web design](https://reader035.fdocument.pub/reader035/viewer/2022062704/5560b503d8b42a033c8b496f/html5/thumbnails/49.jpg)
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