Conceptos básicos sobre Flat Design

1. Flat Design

2. Skewmorfismo
Conocido también como "Realism"
Del griego skeuos (herramienta) y
morphe (forma)
Mantiene detalles del diseño del
objeto original con el objetivo de
hacerlo más familiar para el usuario

3. SKEWMORFISMO
LO “OUT”

4. Flat design
Orígenes
• Yuxtaposición con Skewmorfismo

5. Flat design
Orígenes
• Windows 8
• Window Mobile
• iOS

6. WINDOWS 8
FLAT DESIGN

7. WINDOWS PHONE
FLAT DESIGN

8. IOS 7
FLAT DESIGN

9. IOS 6 VS. IOS 7
FLAT DESIGN

10. IOS 7, IOS 8
FLAT DESIGN

11. YOSEMITE
FLAT DESIGN

12. Flat design
Características
• Sombras largas, contrastantes y cortantes
• Paleta de color limitada con tonos brillantes y
contrastantes
• Tipografía sencilla
• "Ghost button"
• Minimalismo

13. ALTO CONTRASTE, PLASTAS SÓLIDAS DE COLOR
FLAT DESIGN

14. FLAT DESIGN

15. Flat design icons

16. PALETA LIMITADA DE COLOR

17. PALETA LIMITADA DE COLOR

20. PALETA LIMITADA DE COLOR

21. FLAT DESIGN

22. PALETA LIMITADA DE COLOR

23. FLAT DESIGN

24. FLAT DESIGN

25. FLAT DESIGN

26. FLAT DESIGN

27. FLAT DESIGN

28. FLAT VS. REALISM
HTTP://WWW.FLATVSREALISM.COM

29. Flat design
Ventajas
• Fácil de usar
• Carga rápida
• Integración con responsive web design
• Tipografía legible

30. Flat design
Desventajas
• Riesgo de parecer aburrido
• Diseños similares