Du pixel au layout
Télécharger en tant que PPTX, PDF•0 j'aime•429 vues
Le document traite de l'évolution du design, passant du pixel à un agencement fluide adapté à divers contextes et supports. Il souligne l'importance d'adapter les tailles de typographie et d'images, ainsi que d'utiliser des grilles flexibles et des media queries pour une conception optimale. Des ressources et frameworks sont également mentionnés pour aider à la gestion du design adaptatif.
Du pixel au layout
- 1. Donnez votre avis ! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays http://notes.mstechdays.fr
- 2. Du pixel au layout Aude Mousset Designer Interactif i-Breed & Associés Design www.i-breed.com
- 3. AU COMMENCEMENT… Du pixel au layout Design
- 5. … était le pixel…
- 6. …coloré…
- 7. … et toujours très entouré
- 8. L’ÈRE DU PIXEL Du pixel au layout Design
- 11. 11% 56% 25% 8% Peu de résolutions d’écran 640 x 480 800 x 600 1024 x 768 Autres
- 12. L’ÈRE DE L’ADAPTATIF : SOYONS FLUIDES ! Du pixel au layout Design
- 15. Multitude de navigateurs 10 versions 18 versions 22 versions 5 versions 12 versions
- 16. Multitude de résolutions 640x480 : VGA 800x600 : SVGA 1024x768 : XGA 1280x1024 : SXGA 1600x1200 : UXGA Formats 4/3, 5/4, 16/9, 16/10 16/9 (1280x720 , 1600x900) 16/10 (1280x800 , 1920x1200)
- 17. « Quelle démarche adopter pour permettre à tous les utilisateurs d’accéder à votre interface de manière optimale ? » Problématique
- 18. HTML / CSS Du pixel au layout Design
- 19. • Une grille flexible – Évitez d’utiliser des tailles en pixel – Exprimez les tailles de typo en em – Et les zones de contenu en pourcentage. • Des images adaptables – En dimension (ex : max-width:100%) – En résolution, selon le nombre de dpi du support ciblé. Un agencement fluide c’est…
- 20. Cibler le support de manière optimale en utilisant les media queries. – un type de média : screen, handheld, print… – une taille minimale et/ou maximale – une orientation – un ratio d’écran 16/9 etc… @media screen and (min-width: 1024px) { body { font-size: 100%; } } …Un agencement fluide c’est :
- 21. • Quelques frameworks d’agencement fluides : – 960 grid system – CSSgrid – Columnal – The 1140px CSS Grid System • Quelques pistes pour gérer Les images adaptatives – www.adaptative-images.com – www.monoliitti.com – Avec JQuery Des solutions existent…
- 22. Identifier les tailles références de votre projet 1ère génération de SmartPhone en mode portrait < 480 px SmartPhones actuels, tablettes en mode portrait < 768 px Ecrans de bureau > 1024 px
- 23. Prototyper les écrans ciblés
- 24. Prototyper les écrans ciblés
- 25. Prototyper les écrans ciblés
- 27. WINDOWS 8, RESPONSIVE ? Du pixel au layout Design
- 28. • XAML • HTML Applications W8
- 29. Structure type d’une application W8
- 30. Structure type d’une application W8
- 31. Structure type d’une application W8
- 32. Form factors
- 33. Form factors
- 36. • Structure Projet • Composants (LongListSelector vs GridView) • Ergonomie • Code non portable directement Vers une transversalité W8/WP8 ?
- 37. MERCI !
Notes de l'éditeur
- #2: Notation
- #20: Tailles relatives au niveau des typos (em) et des zones de contenu (%)
- #33: Une application Windows 8 est destinée à s’afficher sur PC ou sur une tablette. Sur un PC elle peut s’afficher en mode plein écran ou en mode snappé, sur une tablette également, avec l’orientation portrait ou paysage en plus. Ce qui nous amène à 6 formfactors différents. L’ergonomie Modern UI permet une adaptation simple et cohérente (Listview)
- #34: Une application Windows 8 est destinée à s’afficher sur PC ou sur une tablette. Sur un PC elle peut s’afficher en mode plein écran ou en mode snappé, sur une tablette également, avec l’orientation portrait ou paysage en plus. Ce qui nous amène à 6 formfactors différents. L’ergonomie Modern UI permet une adaptation simple et cohérente (Listview)