1 / 24

LCC Eduardo Tapia Sandoval, MMT

¿ C ómo diseñar para los dispositivos móviles ? O “ Cuando los días de diseñar sólo para la Web se acabaron …”. LCC Eduardo Tapia Sandoval, MMT. Erase una vez ….

aden
Télécharger la présentation

LCC Eduardo Tapia Sandoval, MMT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ¿Cómodiseñarpara los dispositivosmóviles? O “Cuando los días de diseñarsólopara la Web se acabaron…” LCC Eduardo Tapia Sandoval, MMT

  2. Erase unavez… • En un país en desarrollo, cuando el internet era exclusivo de trasnacionales y ciertosgrupos de usuarios con un poderadquisitivoporencima de la media nacional. • Los diseñadoressólo se preocupabanpormanejar un mínimo de resoluciónparaproyectosdigitales…. ¿cuálesestemínimo? • Teníamos un standar en los monitores y unaprofundidadde bits bastante general….

  3. Los ajustesprevios a cualquierdocumento de trabajo se limitaban a elegir entre CMYK y RGB, y algunasvariaciones en tamañopara Web y mediosimpresos. • Los celulares se ocupabansóloparahablarporteléfono, y algunosafortunadospodíanversucorreoelectrónico en ellos.

  4. En esostiempos de limitadoacceso a internet a través de un sólo canal (computadoras de escritorio)… • Los diseñadores no tenían de quépreocuparse.

  5. Bienvenidos al tiempo del diseñoenfocado en segmentos de usuariosespecíficos. Yasean smartphones, tablets, laptops o computadoras de escritorio, cadauno de estoscanalespuedellegar a tener variables a considerar de bastantecomplejidad.

  6. ¡NO ME HAGAS PENSAR! Reglas de usabilidad de Stve Krug

  7. 1. No me hagaspensar Cuandopensemos en el diseño, tomemos en cuenta la fatigamediática del usuario, sufácildistracción y la simbología universal.

  8. 2. Cómousamosrealmente la Web. No leemos los sitios Web… los escaneamos. Tampocohacemosdecisionesópticas, hacemosdecisionesprácticas. No descubrimoscómolascosasfuncionan, simplementelashacemos de forma intuitiva.

  9. 3. Diseñacomosifueranespectaculares. • Diseñapáginasparaque el usuariolaspuedaescanear, no leer. • Jerarquizainformaciónvisualmente. • MUY IMPORTANTE • Un pocomenosimportante • Nada cercano a serimportante.

  10. 4. Animal vegetal o mineral? • Los usuariostomamosdecisionesinconcientes. • Un usuariopuededarclic a algoque se parezca a un botón… perosi no lo es, lo intentará un par de muchasveces…. Si sigue sin serlo se frustrará: • Primer clic: Mmm… no carga la página • Segundo clic: @#¢@/ internet lento • Tercerclic: ·$”%& página de mi·$%#&

  11. 5. Omite la palabrería. El arte de des-ecribirpara la Web • Redacta un párrafo. • Vuélvelo a redactar con la mitad de laspalabrasqueusaste. • Vuelve a redactarlo con la mitad de laspalabrasqueusasteanteriormente, de nuevo. Reduce el ruido visual de tupágina. Hacemásútil el contenido. Permitirámejordistribución de elementos.

  12. 6. Señalización y jerarquización • Diseña la navegación de lo general a lo particular. • Imaginatu Website/App como un súpermercado.

  13. 7. El primer pasoesque hay queaceptarque la Home page estámásallá de tu control

  14. 8. Todosdebenser amigos.

  15. 9. Realizapruebas de usablidad10. La usabilidaddebe de serunacortersía. ¡MUY MUY IMPORTANTE!

  16. 11. Da accesibilidad • Usabilidad y accesibilidad no son lo mismo. • El “508”. Se refiere a la sección 508 de la Acta Amendments to the Rehabilitation, en la que se especifican los estándares de accesibilidad en las TIC’s paraproveedoresquequierenvenderle al gobierno de los EE.UU.

  17. 12. ¡Ayuda! Mijefequiereque______.

  18. Empezar a manopuedeserunabuena idea…

  19. Empezar a manopuedeserunabuena idea…

  20. Referenciaspararealizarretículas y mockups en línea y en impresos. • http://www.jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets • appsketchbook.com/ • http://method.ac/

  21. Recapitulemos: • Unabuenaselección de color es indispensable en cualquierproyecto de diseño digital o impreso. ¿Porqué? • Los mock-ups o dibujos a mano son útilesporque… • Conocer a nuestrousuario, sucomportamiento digital y susposiblesdiscapacidades…

  22. Links: • Plataformaparamejorar mi sentido de diseño: • http://method.ac/ • Plataformasparaconsultarrequerimientos de diseñomóvil: • https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html • http://developer.android.com/guide/practices/ui_guidelines/index.html • http://docs.blackberry.com/en/developers/deliverables/17965/index.jsp?name=UI+Guidelines+-+BlackBerry+Smartphones6.0&language=English&userType=21&category=Java+Development+Guidelines&subCategory= • http://www.developer.nokia.com/Design/

More Related