Nuestra última Slash Friday estuvo dedicada íntegramente al diseño. Aprendimos buenas prácticas a seguir cuando trabajamos con programas como Photoshop o Illustrator.

1. Pixel Perfect
Diseñar para pantallas
Georgina Armisen

2. En esencia, es esta “tontería”
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente

3. ¿El proyector nos deja apreciar la diferencia?
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente
http://medialoot.com/blog/3-valuable-pixel-perfect-illustrator-techniques/

4. Un ejemplo más
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente
http://dcurt.is

5. ¿Y por qué
es importante?

6. No todas las pantallas “leen” según que niveles
de transparencia (efectos anti-aliasing)
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?
Y esto nos pasó a nosotros (A mí, confieso CONFIESO)

7. Suma calidad
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?
www.abckit.es

8. Suma calidad (y premiable)
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?
www.abckit.es
• Laus de Oro a la mejor app
en la categoría de móviles
y tablets en el 2012.
• Top 1 en la categoría
de Educación para iPad.
• 3ª mejor app para iPad
en el Rewind del 2011
en España.
• 5ª mejor app para iPhone
en la categoría de
Educación en el Rewind
del 2011 en España.

9. Las cosas bien hechas suelen ser invisibles,
pero SOBRETODO
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?
www.ustwo.com
If your designs aren’t done properly
it can leave them (users) with
a poor impression of the product,
and potentially, of your brand
“
”

10. No sólo evitaremos esto
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?

11. ¿De dónde surge?

12. Single fixed resolution de dispositivos tipo LCD
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Y este invento?
1600 x 1200
800 x 600

13. Pixel Art
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Y este invento?
Susan Kare

14. Tratar el color
para dispositivos

15. 1
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
Preferencias del sistema > iMac (nativo)

16. 2
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
Edit > Color Settings

17. 3
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
Guardar para web: No sRGB

18. 4
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
Apps accesibles

19. 5
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
RESULTADOS
CON PERFIL SIN PERFIL
CÓDIGO CÓDIGO

20. 6
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
HSB vs RGB

21. Precisión

22. 2
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Preferences > Units

23. 3
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Preferences > Guides…

24. 1
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Preferences > General

25. 5
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
View > Snap to pixel

26. 5
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
View > Pixel preview

27. Formas

28. 1
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Capas de forma

29. 2
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Formas complejas

30. 3
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Bordes
Borde interior Borde centrado Borde exterior

31. 4
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Un objeto, varios rellenos y bordes

32. Efectos

33. 1
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Evita los efectos de capa

34. 2
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Úsalos solo cuando es la mejor opción

35. 3
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Incluso de manera individualísima

36. Pero lo más importante,
siempre será…

37. Entender el color y la forma
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://youtu.be/MuGj6gcVjx0

38. Jugar con el color y la forma
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://youtu.be/Ur-EG0_hN3o

39. Entender la tipografía y el texto
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://vimeo.com/26757692

40. Jugar con la tipografía y el texto
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://youtu.be/HF4Q4DfaSeM

41. www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://vimeo.com/39260302Cultivar conocimiento

42. www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
www.codecademy.comTener curiosidad por el entorno

43. ¡Muchas gracias!
georgina.armisen@slashmobility.com