Estudio diseño gráfico y en junio presento mi proyecto final de carrera. Estoy realizando el diseño visual de una web app y me piden que tengo que entregar un CD/DVD con el material tal como lo pediría un desarrollador web. He diseñado todo en Sketch, es parecido a Adobe Illustrator per destinado para el diseño de interfaces que permite exportar los artboard en png a escala 2x.
- Todas las pantallas en png
- Esquema completo con el sitemap para entender la navegación
- Tipografías
- Botones con sus diferentes estados
¿Con esto es suficiente? ¿A qué tamaño se piden las pantallas?
Muchas gracias. Sí con el esquema completo me refería a los wireframes. Me refería también al materíal gráfico físico. Buscando he encontrado que también se usan las Style Guides donde de manera gráfica se resume todo el tema gráfico a seguir. Colores, tipografías, tamaños según H1, H2... estilos de los botones, checkboxes...
En definitiva mi pregunta iba por ¿Cómo preferís que os envíe el diseñador todo este material y si me dejo algo?
Yo prefiero un mockup o wireframe pero me es mucho mas util tener aparte un style guide donde se indiquen las medidas de los elementos en la pagina.
El mejor escenario es cuando se puede trabajar en conjunto con un desarrollador para armar un living style guide ya que siempre habrán escenarios que suelen no estar en los mockups (p.e. falta de datos en algún campo) y que se vuelven evidentes al trabajar con una version en "vivo".
Si quieres, mira esta presentación explicando los beneficios de usar un living style guide https://www.youtube.com/watch?v=Z1lL_Zo62h0
Muchas gracias por las sugerencias camonz. Ya tengo el wireframe y mockups del 99%. Luego siempre salen casuísticas que no se han pensado pero realmente lo tengo todo.
Me falta el style guide que no se como lo preferís. Si con un simple pdf marcando estilos y acotaciones en píxeles ya os basta. Había pensado hacer un pdf largo de una sóla página para no tener que ir pasando páginas, pero no se si será mejor por páginas: la 1 colores, la 2 tipografia y cuerpos de texto, la 3 botones...
Desconocía la metodología del living style pero claro yo como diseñador no voy a preparar todo eso, entiendo que eso sería tarea de un maquetador CSS.
Entonces como imágen sólo harían falta las imágenes, en diferentes resoluciones, por tema móvil, desktop y pantallas Retina, cierto? Todo lo demás sería con CSS. Es que al principio había pensado exportar todos los elementos en png pero es una tontería porque no sirve para nada si hay que maquetarlo en CSS.
David, con respecto al PDF con la guía de estilos, échale un ojo a los ejemplos en http://styleguides.io/. Mi sugerencia con respecto a los tamaños de las cosas seria pensar en em y rem en lugar de px como unidad base, para que los elementos visuales puedan escalar con respecto a la tipografía.
Sobre las imagenes, si tienes la oportunidad de vectorizarlas es mucho mejor ya que es mas sencillo trabajar con SVG por su independencia de la resolución de la pantalla de cada dispositivo. Sino si necesitarías preparar las 2x y regulars para dispositivos retina y no retina.
Ya a mas largo plazo, considera aprender a utilizar html y css así como su integración con algunos frameworks de frontend como ember o react para maquetar los diseños, eso te va a dar muchisimo mas valor como profesional y te va dar muchisimas ventajas a la hora de conseguir contratos. Mira este canal Devtips for Designers https://www.youtube.com/user/DevTipsForDesigners
Guau camonz agradezco enormemente tus palabras. Queda anotado y lo tendré todo en cuenta. Ahora primero, focalizarme en acabar la carrera de diseño gráfico.
Respecto las imágenes e iconos del UI, lo he realizado todo en vectorial y Sketch permite exportar a SVG así que es lo que haré.
- Todas las pantallas en png
- Esquema completo con el sitemap para entender la navegación
- Tipografías
- Botones con sus diferentes estados
¿Con esto es suficiente? ¿A qué tamaño se piden las pantallas?
Muchas gracias por todo
24/05/2017 18:02
25/05/2017 06:35
25/05/2017 08:09
En definitiva mi pregunta iba por ¿Cómo preferís que os envíe el diseñador todo este material y si me dejo algo?
Muchas gracias de nuevo
28/05/2017 20:22
El mejor escenario es cuando se puede trabajar en conjunto con un desarrollador para armar un living style guide ya que siempre habrán escenarios que suelen no estar en los mockups (p.e. falta de datos en algún campo) y que se vuelven evidentes al trabajar con una version en "vivo".
Si quieres, mira esta presentación explicando los beneficios de usar un living style guide https://www.youtube.com/watch?v=Z1lL_Zo62h0
29/05/2017 16:23
Me falta el style guide que no se como lo preferís. Si con un simple pdf marcando estilos y acotaciones en píxeles ya os basta. Había pensado hacer un pdf largo de una sóla página para no tener que ir pasando páginas, pero no se si será mejor por páginas: la 1 colores, la 2 tipografia y cuerpos de texto, la 3 botones...
Desconocía la metodología del living style pero claro yo como diseñador no voy a preparar todo eso, entiendo que eso sería tarea de un maquetador CSS.
Entonces como imágen sólo harían falta las imágenes, en diferentes resoluciones, por tema móvil, desktop y pantallas Retina, cierto? Todo lo demás sería con CSS. Es que al principio había pensado exportar todos los elementos en png pero es una tontería porque no sirve para nada si hay que maquetarlo en CSS.
29/05/2017 16:46
Sobre las imagenes, si tienes la oportunidad de vectorizarlas es mucho mejor ya que es mas sencillo trabajar con SVG por su independencia de la resolución de la pantalla de cada dispositivo. Sino si necesitarías preparar las 2x y regulars para dispositivos retina y no retina.
Ya a mas largo plazo, considera aprender a utilizar html y css así como su integración con algunos frameworks de frontend como ember o react para maquetar los diseños, eso te va a dar muchisimo mas valor como profesional y te va dar muchisimas ventajas a la hora de conseguir contratos. Mira este canal Devtips for Designers https://www.youtube.com/user/DevTipsForDesigners
29/05/2017 16:50
Respecto las imágenes e iconos del UI, lo he realizado todo en vectorial y Sketch permite exportar a SVG así que es lo que haré.
Mil gracias por todo!