Ruta de desarrollador a diseñador: cómo

Como antiguo desarrollador que se ha convertido en diseñador, sugeriría algunas cosas. En primer lugar, ¡empieza a trabajar en los diseños! Si tiene la capacidad, busque un mentor que ya sea diseñador de UI/UX y comience a trabajar con él en proyectos. Descubrí que aprendí más trabajando en proyectos y absorbiendo el conocimiento de personas que han estado haciendo esto durante años que leyendo un libro.

Dicho esto, si desea leer sobre UI/UX/etc., echaría un vistazo a este excelente hilo: ¿Libro de interfaz de usuario de lectura obligada? Creo que mi favorito personal es "Don't Make Me Think" de Steve Krug, pero estoy seguro de que eventualmente encontrarás tu favorito.

Por último, con respecto a herramientas como Photoshop, Illustrator, etc... ¡no te preocupes! En última instancia, encontrará las herramientas que mejor se adapten a sus necesidades. Personalmente, empiezo con maquetas de lápiz y papel, luego, dependiendo del proyecto, me muevo a algo en Balsamiq o Axure , o a veces directamente HTML y CSS; realmente depende del tamaño del proyecto, el alcance, etc. Use lo que sea más cómodo para ti. Al final del día, todo lo que importa es que comuniques claramente tu visión para tu diseño, no qué herramienta usaste para hacerlo.

Llevo mucho tiempo mezclando diseño y desarrollo. Pero en los primeros días pasé más tiempo aprendiendo las herramientas de edición que lo que hace un buen diseño. Hay muchos tutoriales para aprender a usar Photoshop, Illustrator, Fireworks, etc. Pero es bueno tener algo de dirección y sentido del diseño. Esto es algo en lo que todavía quiero mejorar.

Una de mis inspiraciones es un tipo llamado Robby Ingebretsen, porque hace muy bien tanto el desarrollo como el diseño. Su sitio web está en nerdplusart.com .

Hay algunas cosas que le echaría un vistazo...

• Mi (muy) breve lista de libros imprescindibles para diseñadores
• Fundamentos de diseño para desarrolladores
• 10 formas de atacar un problema de diseño y salir ganando

Como habla en todas sus presentaciones, creo que es fundamental encontrar inspiración para tus diseños. Incluso los mejores diseñadores no inventan estas cosas de la nada. Uno de mis marcadores es una colección de "Nuevo diseño gráfico" , que se ve principalmente en trabajos impresos. La mayoría de ellos son muy sencillos, utilizando a menudo la propia tipografía como elemento gráfico principal. Tan simple como parece, solo navegar a través de cosas como esta puede ayudarlo a dar forma a su diseño.

Al igual que aprender Visual Studio no lo convierte a uno en un buen desarrollador de software, aprender Photoshop tampoco lo convierte en un buen diseñador de interfaz de usuario.

Si desea seguir la ruta formal, una educación en Arte/Diseño Gráfico, Factores Humanos, Psicología, Arquitectura de la Información/ciencias bibliotecarias serían lugares para buscar.

De manera informal, ¡manos a la obra! ;) La mejor manera de aprender es simplemente hacerlo.

Soy un diseñador gráfico con formación formal que ha adquirido habilidades de desarrollo de software en el trabajo. Empecé por pura necesidad.

Personalmente, creo que los mejores miembros del equipo de UX son aquellos que tienen una combinación de ambas habilidades. Entonces, creo que estás en el camino correcto.

Comenzaría leyendo el libro "Head First Web Design" de Watrall & Siarto (publicado por O'Reilly). Es bastante sensato, fácil de digerir y lo guía a través de todo lo que un diseñador debe considerar. No es un estudio en profundidad, pero lo ayuda a comenzar a saber qué preguntas debe responder a continuación. Cubre la navegación, la organización, el diseño, la escritura, el color y la accesibilidad.

Además, antes de saltar a Photoshop, Adobe Illustrator o lo que sea, realice una estructura metálica de su diseño para asegurarse de que todo esté en el lugar correcto antes de dedicar el tiempo adicional para que se vea bonito. Puede esbozarlo en papel o pizarra, o puede usar una herramienta. Una herramienta que encontré realmente útil en este paso es Balsamiq Mockups . Le permite pensar primero en la organización y el diseño del sitio.

De hecho, tomé el enfoque opuesto de diseñador de UX a desarrollador de UI, sin embargo, al retomar el diseño, recomendaría un par de áreas para comenzar:

Echaría un vistazo al libro "¡No me hagas pensar!" por Steve Krug , que creo que es un gran libro sobre diseño para diseñar en la web.

Hay un montón de excelentes recursos web, incluidos SmashingMagazine.com y PSDTuts.com, que brindan excelentes artículos actuales en el mundo del diseño y la tecnología web.

También echaría un vistazo a la comprensión de los principios de HCI si está buscando específicamente convertirse en un diseñador de UX.

¡Buena suerte y feliz diseño!

Estoy realmente interesado en aprender a crear una interfaz de usuario de primer nivel para sitios web, aplicaciones móviles, etc.

Bien, ese es un tema amplio. Desea crear sitios web "hermosos", "de primera categoría" y de apariencia profesional. Por lo tanto, necesita saber qué hace que las personas perciban algo como "hermoso", ¿verdad? Afortunadamente para usted, la belleza no es realmente subjetiva.

Una de las claves para un hermoso diseño visual es la armonía .

La falta de armonía es lo que hace que tus diseños parezcan amateurs.

Y lo mejor es que la armonía visual se reduce a las matemáticas. No se trata de tener un presentimiento.

Como otros han señalado, recomendaría diseñar sitios web por su cuenta. Trate de aplicar los principios de diseño que aprendió en lugar de usar un marco listo. Puede ser difícil al principio, pero te ayudará a mejorar.

Cómo incrustar armonía en el diseño de un sitio web

El siguiente es un ejemplo práctico y un pequeño ejercicio divertido que puede hacer ahora.

Una forma que personalmente prefiero es usar una escala modular para dimensionar los elementos del sitio web en proporciones armoniosas. Un sitio web que puede ayudarte a generar una escala modular es este: modularscale.com

El beneficio de usar una báscula modular es que puede hacer que las decisiones de tamaño sean tan fáciles como elegir un número de la báscula.

Por ejemplo, cambiemos el tamaño de los encabezados de un sitio web (para comunicar la jerarquía visual).

Digamos que tenemos esta escala modular basada en el tamaño de fuente del cuerpo de 19 px que elegí (19 px porque se veía mejor con la fuente que estaba usando, pero puede omitir este paso e ir con el tamaño predeterminado de 16 px) y la proporción 1.412 (No necesito entrar en detalles por qué elegí esta proporción. Cualquier proporción funcionará mejor que ninguna proporción para sus proyectos):

Mirándolo, elegiría que el H1 sea 2.815em, el H2 sea 1.994em y el H3 sea 1.412em. Primeros 3 números más grandes que el tamaño de fuente del cuerpo. Fácil, ¿verdad? El cuerpo del texto sería 1em (en mi caso 19px). Luego, dimensionaría el H4-H6 a 1em y usaría contraste (diferente peso o estilo de fuente) para diferenciarlos del cuerpo del texto.

Entonces, prueba esto ahora:

1. Genera tu propia báscula modular
2. Obtenga un documento HTML simple (contenido real, no Lorem Ipsum)
3. Utilice la escala para dimensionar los encabezados.
4. Luego intente usar la escala para otras decisiones de tamaño (márgenes, rellenos, etc.)

Eso es solo un pequeño paso hacia mejores diseños, pero espero que te ayude.

Si esto te resultó útil, puedes leer mi otra lista de 7 consejos para diseñadores web principiantes que conocen HTML y CSS.

PD: Realmente tienes mucho que leer

Como otros han dicho, lee:

• Los elementos del diseño gráfico de Alexander White
• Los elementos del estilo tipográfico de Robert Bringhurst
• No me hagas pensar de Steve Krug

Además, aquí hay una gran lista de recursos en línea como blogs y comunidades para estar atento: enboard.co/webdesign/