Ruta del desarrollador al diseñador: cómo

Siendo un desarrollador que quiere ser diseñador, estoy realmente interesado en aprender cómo crear una interfaz de usuario de primer nivel para sitios web, aplicaciones móviles, etc. Sin embargo, no sé nada sobre Photoshop ni nada relacionado con el diseño, mis principales habilidades son HTML y CSS .

¿Donde debería empezar? ¿Cómo aprendo cómo crear hermosos sitios web e interfaces?

Como ex desarrollador que se ha convertido en diseñador, hay algunas cosas que sugeriría. En primer lugar, ¡comienza a trabajar en diseños! Si tiene la habilidad, busque un mentor que ya sea diseñador de UI / UX y comience a trabajar con ellos en proyectos. Descubrí que aprendí más trabajando realmente en proyectos y absorbiendo el conocimiento de las personas que han estado haciendo esto durante años que nunca al leer un libro.

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

Por último, con respecto a herramientas como Photoshop, Illustrator, etc ... ¡no te preocupes por eso! En última instancia, encontrará las herramientas que funcionan mejor para usted. Personalmente, empiezo con maquetas de lápiz y papel, luego, dependiendo del proyecto, me moveré a algo en Balsamiq o Axure , o a veces HTML y CSS directo; 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, lo único que importa es que comuniques claramente tu visión para tu diseño, no la herramienta que utilizaste para hacerlo.

He estado mezclando diseño y desarrollo durante mucho tiempo. 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 que se pueden encontrar para aprender a usar Photoshop, Illustrator, Fireworks, etc. Pero es bueno tener sentido y dirección de diseño. Esto es algo en lo que todavía quiero mejorar.

Una de mis inspiraciones es un tipo llamado Robby Ingebretsen, porque desarrolla y diseña muy bien. Su sitio web está en nerdplusart.com .

Hay algunas cosas que miraría de él ...

• Mi (muy) breve lista de libros que debe leer para diseñadores
• Fundamentos de diseño para desarrolladores
• 10 maneras de atacar un problema de diseño y salir ganando

Mientras habla en todas sus presentaciones, creo que es fundamental encontrar inspiración para sus diseños. Incluso los mejores diseñadores no simplemente inventan estas cosas de la nada. Uno de mis marcadores es una colección de "Nuevo diseño gráfico" , visto principalmente en trabajos impresos. La mayoría de ellos son muy simples, a menudo utilizan la tipografía en sí como los principales elementos gráficos. Tan simple como parece, solo navegar por 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, tampoco aprender a Photoshop 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 de la biblioteca serían lugares para buscar.

Informalmente, ¡ponte a trabajar! ;) La mejor manera de aprender es simplemente hacerlo.

Soy un diseñador gráfico formalmente capacitado que ha adquirido habilidades de desarrollo de software en el trabajo. Empecé por pura necesidad.

Personalmente, creo que los mejores miembros del equipo 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 sencillo, fácil de digerir y lo guía a través de todo lo que un diseñador debe tener en cuenta. No es un estudio en profundidad, pero le ayuda a comenzar a saber qué preguntas debe responder a continuación. Cubre navegación, organización, diseño, escritura, color y accesibilidad.

Además, antes de saltar a Photoshop, Adobe Illustrator o lo que sea, cree un diseño de alambre para asegurarse de que todo esté en el lugar correcto antes de dedicar el tiempo extra para que se vea bonito. Puede dibujarlo en papel o pizarra, o puede usar una herramienta. Una herramienta que encontré que realmente ayuda 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 UX Designer a UI Developer, sin embargo, al retomar el diseño, recomendaría un par de áreas para comenzar:

Echaría un vistazo al libro "Don't Make Me Think!" por Steve Krug , que creo que es un gran libro sobre diseño para diseñar en la web.

Hay toneladas de excelentes recursos web, incluidos SmashingMagazine.com y PSDTuts.com, que ofrecen excelentes artículos actuales en el mundo del diseño y la tecnología web.

También me gustaría entender los principios de HCI si está buscando específicamente convertirse en un diseñador de experiencia de usuario.

¡Buena suerte y feliz diseño!

Estoy realmente interesado en aprender cómo 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 aspecto 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 de un hermoso diseño visual es la armonía .

La falta de armonía es lo que hace que sus diseños se vean aficionados.

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. Intente aplicar los principios de diseño que conoce en lugar de utilizar 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 puedes hacer ahora.

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

El beneficio de usar una báscula modular es que puede tomar decisiones de dimensionamiento tan fáciles como elegir un número de la báscula.

Por ejemplo, dimensionemos 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 19px que elegí (19px porque se veía mejor con la fuente que estaba usando, pero puede omitir este paso e ir con el tamaño predeterminado de 16px) y la relación 1.412 (No necesito entrar en detalles por qué elegí esta relación. Cualquier relación funcionará mejor que ninguna relación para sus proyectos):

Mirándolo, elegiría el H1 para ser 2.815em, el H2 para 1.994em y el H3 para 1.412em. Los primeros 3 números son más grandes que el tamaño de fuente del cuerpo. Fácil, ¿verdad? El texto del cuerpo 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 texto del cuerpo.

Entonces, intente esto ahora:

1. Genera tu propia escala modular
2. Obtenga un documento HTML simple (contenido real, por favor no Lorem Ipsum)
3. Use la escala para dimensionar los encabezados.
4. Luego intente usar la escala para otras decisiones de dimensionamiento (márgenes, rellenos, etc.)

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

Si lo encuentra útil, puede leer mi otra lista de 7 consejos para diseñadores web principiantes que conocen HTML y CSS

PD: Realmente tienes mucha lectura que hacer

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 por Steve Krug

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