PDA

Ver la Versión Completa : [ DEBATE ] Android designs


mikelgg93
08/12/13, 18:13:19
Hola Htcmaniac@s!

Hoy vengo a hablar de diseño en android, de diseño a nivel básico que se dice, el 14 de noviembre de 2011 aparece Ice Cream (la versión 4.0 de android para los menos enterados) y con ella aparece la interfaz que conocemos (o no...) como Holo, esta ha ido evolucionando, y mejorando y a día de hoy pues es útil.
Porque usar Holo y no hacer port de vuestras aplicaciones IOs:
1. Da la sensación de que programamos para IOs y a android (plataforma mayoritaria en España) la dejamos de lado, vamos, que parece que pasas del usuario.
2. Porque lo que queda bien en IOs, no tiene porque quedar bien en Android
3. Porque si la haces siguiendo Android Guidelines, parecerá una aplicación del sistema, no, que hemos salido del móvil.
4…..etc etc hay miles de razones, para mi la principal es que queda mejor.

¿Cómo empezar? Haz un mock-up

Bien ahora os enseñaré la parte sencilla, no requiere dotes de programación, solo aprender a usar un programa de edición fotográfica. (Además luego puedes poner en el currículum que sabes informática nivel usuario y tienes conocimientos de herramientas de edición y retoque fotográfico, a engordar el C.V.!!!)
Si sois de los que os sobra la pasta, ya lo tenías descargado o piratillas de esos del caribe, podeis usar Photoshop y sino descargar algo que se llama GIMP y es gratis y open source.
Ahora que tenemos el programa descargado, es hora dejar el ordenador un momento sacar papel y lápiz.
Usando algo como este boceto,
Boceto1 (http://androiduiux.com/2012/06/30/printable-a4-gui-sketching-kit-nexus-s-galaxy-nexus-and-nexus-7/)
Boceto 2 (http://androiduiux.com/2013/01/01/wireframe-screen-flow-template-free-download/)
Boceto 3
(http://androiduiux.com/2013/01/06/printable-a4-screen-flow-sketch-template-free-download/)
(aunque no es obligatorio) os resultará más fácil, para empezar, dibujamos esa idea de la app que tenemos en la cabeza, no hace falta ser Gaudi pero cuanto mejor lo dibujeís mejor os aclarareís.
Una vez terminado esto, volvemos al ordenador, y usaremos el programa de edición anteriormente citado, como seguramente lo domineís pichi pacha, Taylor Ling, vuelve a salvarnos el culo, y esta vez nos ofrece un set con los elementos, así solo tendremos que jugar a los Lego y montar cada cosa encima de la otra:

1. Versión para Gimp y PS (http://androiduiux.com/2013/10/04/android-ui-design-kit-for-photoshop-and-gimp-4-3-free-download/)

2. Versión PPTX (http://androiduiux.com/2013/04/15/android-ui-design-kit-pptx-1-0-free-download/)

3.Versión Slides (http://androiduiux.com/2013/05/26/android-ui-design-kit-for-google-slides-1-0-free-template/)

Pulsa en la versión para descargar

Bien, tras horas y pruebas, seguramente os salgan cosas muy decentes. Espero ver todos vuestros diseños aquí
Continuará...

Links útiles
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Para iconos, action bars, o poner la screenshot en el telefonito para promocionarla.
http://www.holoeverywhere.com/
El propio nombre lo indica
https://plus.google.com/u/0/communities/112110996671697454680
Comunidad en android con miles de apps con estilo Holo, a disfrutar
https://plus.google.com/u/0/communities/116667001535376136065
En esta otra, se debate sobre diseño, herramientas usadas, se pide feedback, se ayuda… si necesitas ayuda, aquí te la darán

mikelgg93
08/12/13, 18:18:51
Algunos de mis rediseños

App UCM (inexistente a ver si hacen algo)

Boceto
http://i.imgur.com/BIOkTMw.jpg
Imágenes
http://i.imgur.com/gG9gX17.jpghttp://imgur.com/QUzlg7lhttp://imgur.com/ldBP3WJhttp://imgur.com/bprcibfhttp://imgur.com/KdIkcHyhttp://i.imgur.com/12Uk0vQ.jpghttp://i.imgur.com/lUDU61j.pnghttp://i.imgur.com/epymd0f.jpghttp://i.imgur.com/fvRsu7W.jpghttp://i.imgur.com/d4plmkM.jpghttp://i.imgur.com/M97MXjY.jpghttp://i.imgur.com/o1A7kRT.jpg

Google Calendar

http://i.imgur.com/wIypEo7.jpghttp://i.imgur.com/15cp5QL.pnghttp://i.imgur.com/mvzEijY.pnghttp://i.imgur.com/XSWUBBw.pnghttp://i.imgur.com/CblWxW7.pnghttp://i.imgur.com/S27BZ2M.pnghttp://i.imgur.com/UvYArj3.pnghttp://i.imgur.com/wvm1rVg.pnghttp://i.imgur.com/FDwzrny.pnghttp://i.imgur.com/noALYn2.png


Any.Do

http://i.imgur.com/X3yn77N.pnghttp://i.imgur.com/RKtgOJ3.pnghttp://i.imgur.com/Qlt49JP.pnghttp://i.imgur.com/4OXina9.pnghttp://i.imgur.com/RgVVgLt.png

mikelgg93
08/12/13, 18:31:34
Reservado para otros rediseños