¿Cómo puedo aprender el diseño gráfico suficiente para simular una aplicación de Internet?

Answer 1

Hasta ahora, la mayoría de las preguntas se han centrado en las herramientas, pero creo que falta un punto clave.

Parte del problema con la pregunta es el uso del término “simular”. Una interfaz simulada puede ser tan áspera como un boceto o tan perfecta como una captura de pantalla. La resolución implícita es ambigua.

Además, no necesita ninguna habilidad de diseño gráfico para dibujar un diseño para una aplicación web. Use un papel para gráficos y un lápiz, y comience a dibujar cuadros para representar bloques de contenido. Si desea obtener un poco más sofisticado, puede representar bloques de texto con líneas, encabezados con líneas más gruesas / dobles: hay un mundo entero de posibilidades al dibujar. Nada está mal.

Un buen lugar para buscar inspiración en esta etapa es http://wireframes.tumblr.com; simplemente no te sientas presionado para hacer que tus bocetos se vean tan bien. Mis bocetos todavía parecen caca de perro. El objetivo no es descubrir cómo hacer que su sitio se vea bien, sino más bien presentar la información que va a presentar y tener una idea de cómo interactúan los diferentes bloques.

Otro buen recurso para el tema es “Sketching User Interfaces” por Bill Buxton. Hay muchas cosas conceptuales sobre el propósito de dibujar en el proceso de diseño, pero creo que se traduce bien en casi cualquier campo creativo.

En el libro anterior, hay un diagrama que describe el proceso de diseño como un ciclo de retroalimentación constante de bocetos e ideas, que se afina lentamente en un producto terminado. A medida que se acerca al producto final, sus bocetos crecen en resolución. Se han decidido más ideas de productos y, por lo tanto, es más seguro tomar decisiones de diseño de mayor resolución como “¿cómo debería verse la navegación” y “si el contenido que se presenta aquí chocará con nuestro logotipo?”.

Solo en estas últimas etapas debe recurrir a las herramientas basadas en píxeles para realizar cualquier tipo de diseño, ya que solo en este punto ha descubierto lo suficiente sobre su producto como para producir un prototipo significativo de alta resolución.

Si tiene una estructura sólida en su lugar y una buena comprensión de la relación entre los diferentes tipos de datos, entonces puede implementar un diseño minimalista sólido utilizando solo CSS. Puede que no llame la atención, pero tampoco impedirá que los usuarios hagan algo. Cumpla con los colores sólidos, sea generoso con los espacios en blanco, use una buena tipografía para crear cierto contraste y use juiciosamente las líneas de un solo píxel aquí y allá para enfatizar la estructura.

De lo contrario, tu pregunta tiene las mismas respuestas que las demás “¿Cómo aprendo X?” preguntas: ir a la escuela, o recoger algunos libros y comenzar a enseñarte los conceptos básicos, luego comenzar a hacerlo. Pequeños proyectos, proyectos divertidos, lo que sea, solo hazlo una y otra vez hasta que un día, ya no sientas que apestas.

Answer 2

Utilicé el siguiente enfoque:

1. Comienza por tener en cuenta los sitios web con el diseño que más te guste. Servirán como ejemplos e inspiración.
2. Comience a esbozar sus ideas en papel. Guardo una resma de papel de impresora en un cajón junto a mi escritorio. Descubrí que cuando intento iniciar un diseño en una aplicación, me pongo al día con los detalles de la herramienta.
3. Una vez que tenga un diseño / diseño básico esbozado, le recomiendo que trate de imitarlo en Balsamiq ( http://balsamiq.com/ ), Mockingbird ( https://gomockingbird.com/ ), Google Docs (hay un Tipo de archivo “Dibujo”), o PowerPoint simple. Prefiero Balsamiq y he creado miles de maquetas interactivas en él. También hago pruebas de usabilidad con Balsamiq.
4. Pase a las grandes armas: Adobe Photoshop o Fireworks (y cada vez más Flash Catalyst). Fireworks es específicamente para el diseño de interfaces de usuario y prototipos. Es una herramienta increíble con muchas opciones. Los tutoriales en Adobe TV ( http://tv.adobe.com/ ) son un excelente lugar para aprender algunos conceptos básicos, y Lynda.com tiene excelentes tutoriales basados ​​en tarifas sobre varios temas.

Los pasos 1-3 pueden ser relativamente rápidos, aunque el verdadero dominio de los entresijos de Balsamiq llevará tiempo. Sin embargo, podrás juntar algo áspero en un corto período de tiempo.

El paso 4 es más desafiante, pero es posible que no necesite tener diseños de píxeles perfectos. Sin embargo, si te interesa el diseño gráfico, son excelentes herramientas para aprender.

Recuerde, no hay nada de malo en imitar los diseños y estilos que le gustan: los diseñadores web se consultan entre sí todo el tiempo . La imitación es una excelente manera de aprender sobre lo que te gusta y desarrollar tu propio estilo a lo largo del tiempo.

Answer 3

No necesitas aprender diseño gráfico para hacer maquetas, eso te ayudará. Lo que es más importante son los patrones de diseño web disponibles para su lectura. Obtenga uno o dos libros sobre patrones de diseño web o visite http://developer.yahoo.com/ypatt … devórelos a todos. Entonces está listo para ir, siempre que tenga la herramienta adecuada. Mi enfoque es hacer un boceto rápido con lápices y papel y detallarlos en Axure con las bibliotecas de widgets ( http://www.axure.com/widgetLibra …)