Gracias a Internet, el diseño gráfico y la programación se están convirtiendo en campos cada vez más superpuestos.

Como programador, me encuentro constantemente necesitando conocimientos básicos de diseño gráfico, pero tengo problemas para encontrar recursos de aprendizaje de diseño gráfico exhaustivos pero concisos, y en su lugar generalmente encuentro fragmentos de conocimiento aplicables a la tarea en cuestión.

¿Pueden ofrecer algunos consejos o recomendar algunos buenos libros, tutoriales, blogs y sitios web que proporcionen una descripción general del diseño web para principiantes que han sido, según su experiencia, materiales de aprendizaje efectivos y de alta calidad. No busco consejos sobre cómo usar las herramientas de edición de imágenes, pero suponiendo que los comprenda, ¿qué recursos y consejos ayudarán mejor a un nuevo diseñador a crear diseños de aspecto profesional?

• Manténgase simple : no intente hacer nada demasiado elegante o aventurero al principio. Obtenga los conceptos básicos primero, luego puede comenzar a experimentar. No intentes emular la interfaz de computadora de Star Trek.
• Sea consistente : un diseño consistente es parte de la base de un buen diseño. Realice un seguimiento de sus márgenes, tamaños y ubicación y manténgalos durante todo el diseño.
• Eliminar el desorden : solo incluya los elementos necesarios para el diseño. Eliminar todo lo demás.
• Priorizar : ¿Cuál es el propósito principal del diseño? Enfatice ese propósito. Hazlo obvio.
• Utilice espacios en blanco : permita márgenes adecuados. Los bloques grandes de texto con poco o ningún margen no son muy legibles. Lo mismo ocurre con otros elementos de diseño.
• Use una paleta de colores : no debe usar más de 4-5 colores en total.
• Fuentes consistentes : se adhieren a una o dos fuentes. Úselos consistentemente, generalmente uno para los títulos, uno para el texto del párrafo. Calcule y mantenga tamaños de fuente, alturas de línea y espaciado de línea consistentes. No uses Comic Sans a menos que puedas defenderte de los zombis velociraptor rabiosos.
• Diseño primero : el diseño no debe ser una idea de último momento; debería ser un miembro de primera clase de la etapa de planificación. El diseño será la forma en que sus usuarios interactúen con su programación y formarán sus opiniones primero y en gran medida en función de su diseño. Darle al diseño la importancia adecuada.

En cuanto a los recursos, consulte cualquiera de los siguientes sitios web:

• Revista sensacional
• PSD Tuts
• Abuzeedo
• Cabina UX
• Me encanta la tipografia
• Jason Santa Maria

El índice básico de diseño de Jim Krause me dio un muy buen resumen de los conceptos básicos de composición, color y tipo. No era un gran admirador de la mayoría de sus propios ejemplos, pero ilustran muy bien sus puntos y toca algunas cosas valiosas que no he visto mucho en otras partes. Y quizás lo más importante, leerlo me emocionó mucho salir y experimentar con las ideas que estaba presentando.

A veces hay una ligera superposición entre el desarrollo web y el diseño web, pero no creo que los desarrolladores web deberían tratar de ser diseñadores a tiempo completo a menos que estén dispuestos a poner tanto esfuerzo como aprendieron a programar. No es algo en lo que puedas incursionar los fines de semana y ser bueno.

Si esto es así, puede aprender a ser su propio diseñador web (es decir, hacer su propio diseño web para todos los sitios en los que trabaja), entonces realmente le recomiendo que reciba capacitación formal (incluso si solo toma unos pocos cursos de diseño universitario) para aprender los fundamentos del diseño visual y la composición. Un libro de diseño al estilo de un libro de texto como el que Damon publicó podría ayudar, pero en realidad tendrá que hacer todos los ejercicios del libro y asegurarse de comprender el material. Pero lo más importante, debe pasar mucho tiempo mirando (navegar por galerías de diseño en línea, hojear revistas y anuncios de revistas, etc.) y crear diseños (descargar algunos resúmenes de diseño de práctica en línea o participar en concursos de diseño en línea).

Si es para ayudarlo a comunicarse con los diseñadores web / gráficos con los que trabaja, simplemente obtener un libro que le enseñe el vocabulario (por ejemplo, conceptos de tipografía) y centrarse en la usabilidad , la accesibilidad y el diseño UX es probablemente el mejor uso de su tiempo. De esta manera, puede involucrarse en la dirección creativa del proyecto y ayudar a diseñar las interfaces, pero el diseñador es el que crea el "aspecto" o la estética del sitio.

Virtuosi Media enumera muchos buenos recursos (la red Tutsplus es excelente en general, y Smashing Magazine es una lectura obligada para cualquier desarrollador / diseñador web), a lo que agregaría:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - alberga las carteras de muchos diseñadores de clase mundial para inspirarse

Yo mismo soy programador y para mí los siguientes libros fueron muy útiles para mí:

• El libro de diseño para no diseñadores de Robin Williams: este libro cubre los conceptos básicos del diseño gráfico.
• Dibujando en el lado derecho del cerebro por Betty Edwards: el libro para desarrollar tus habilidades de dibujo.
• La interfaz humana de Jef Raskin: este libro provoca algunas reflexiones sobre el diseño de la interfaz de usuario.

Tal vez no sea relevante para todos los casos, pero para los programadores web, una de las cosas más importantes que me destaca, que tal vez cierra un poco la brecha, es aprender CSS por dentro y por fuera, ya que poder diseñar bien no significa nada si no puede integrarlo en su proyecto que está creando.

En 2004 me encontré a medio camino entre ambos mundos, como lo había estado durante la mayor parte de mi vida: había estado haciendo web desde HTML 3.2 en los días de las puntocom; criado con una Apple // e por padres (un coreógrafo y un educador) que me permitieron y me animaron a pasar mucho tiempo con el arte. El diseño no es arte, y de hecho algunos de sus patrones más algorítmicos se alinean muy bien con la programación, ya sea que esté haciendo web o de otra manera.

• Histograma de estantería : una impresión que hice en la escuela de posgrado que es tanto de diseño como de desarrollo.

Pero sí, 2004: dividí la diferencia cuando fui a la escuela de posgrado, donde primero obtuve una educación tipográfica de primera clase, y luego la latitud para explorar, tiempo durante el cual mis propensiones más geek fueron útiles.

Entonces, tal vez considere la educación superior, o lo que sea que sea igualmente atractivo para usted. Buena suerte con eso de cualquier manera.

Aprende mucho sobre tipografía.

De los clásicos ...

^{Jan Tschichold}

No los payasos ...

^{David Carson}

La tipografía estratégica y efectiva es una de las cualidades más ausentes en este campo (y siempre lo ha sido).

Por lo general, puedo reclutar un diseñador basado completamente en su manejo de tipos. Alrededor del 80% de la historia está en la configuración del currículum.

Un buen comienzo (gratuito) es esta adaptación detallada del recurso esencial de Robert Bringhurst para su aplicación en la web.

^{Los elementos del estilo tipográfico, Bringhurst}

Esta es una consideración más amplia que se ocupa de la interacción de tipo y diseño.

^{Sistemas de cuadrícula en diseño gráfico, Brockmann}

1. Piensa críticamente sobre los objetos diseñados a tu alrededor

   Casi todo en el entorno artificial tiene algún tipo de diseño detrás, ya sea un gráfico, un sitio web o un accesorio de moda.

   Observe qué tan bien funciona el diseño para su propósito previsto, así como su aspecto.

2. Piense en el diseño como una forma de satisfacer una necesidad o resolver un problema

   Si bien se esfuerza por hacer que las cosas se vean bien, el diseño difiere de otros tipos de arte en que tiene una aplicación práctica.

   Un logotipo, por ejemplo, es un tipo de diseño gráfico que ayuda a que una marca o empresa sea rápidamente reconocible.

   Una prenda de vestir sirve para cubrir el cuerpo, además de hacer que el usuario se vea más atractivo.

3. Practica la comunicación visual.

   Los diseñadores deben poder hacer dibujos u otras representaciones de sus diseños para refinarlos y explicarlos a otras personas, como colegas de diseño y fabricantes.

   El dibujo es una herramienta poderosa para los diseñadores, pero no se preocupe si no puede dibujar de manera fotorrealista. Los dibujos de los diseñadores no tienen que ser obras maestras, solo una forma de capturar rápidamente ideas que conduzcan al producto terminado. El rastreo también es totalmente aceptable.

   Además de los dibujos, los diseñadores también usan cosas como maquetas, prototipos e imágenes por computadora para visualizar sus diseños.

4. Explora cómo se hacen las cosas

   Cuando trabajas como diseñador, no solo tienes que considerar lo que es agradable a la vista, sino que también debes considerar cómo se implementará tu diseño.

   Para un objeto como una carcasa de teléfono celular, los diseñadores industriales deben pensar qué tipo de procesos de plástico y moldeo se utilizarán, y cómo cada parte se unirá.

5. Encuentra buenas fuentes de información

   Además de las revistas de diseño, busque libros sobre el proceso, los principios y los métodos de diseño.

   Intente mirar libros de texto y videos técnicos para la construcción de prendas de vestir, métodos de fabricación y diversas técnicas artesanales.

   Aprender sobre diseño va más allá de leer moda y decorar revistas, aunque estos son un buen recurso para las tendencias actuales.

6. Desarrollando tus habilidades de diseño

   Estudiar y practicar es bueno, pero lo que realmente llevará su diseño al siguiente nivel es la experiencia del mundo real.

7. Cometer errores rápidamente

   cometerás muchos errores, y cuanto más rápido puedas superarlos, mejor.

8. Siempre esté listo para captar ideas.

   Busca inspiración en todas partes. La inspiración no tiene que provenir de otros diseños o tendencias de diseño, a menudo puede provenir de la naturaleza o de cosas que suceden por accidente.

Libros y materiales

http://www.alistapart.com

http://webdesignledger.com

Revista sensacional

PSD Tuts

Abuzeedo

Cabina UX

Algunos puntos a tener en cuenta:

1. Cada diseño resuelve un problema

Deja de pensar en el diseño en términos de "¿Cómo hago para que esto sea bonito?" y empiece a pensarlo en términos "¿Cómo hago que esto sea tan fácil de usar como sea humanamente posible?"

Cuando crea sitios web, esto significa que, en el sentido más amplio, está resolviendo un problema comercial .

Existe un sitio web para alcanzar un objetivo comercial .

Los usuarios de un sitio web también vienen con su propio objetivo en mente: pueden querer comprar algo, comparar productos, leer sobre un tema, etc.

Es su trabajo como diseñador ayudar a la empresa asegurándose de que tantos usuarios como sea posible cumplan el objetivo comercial y ayudar a los usuarios a navegar por el sitio web para que puedan cumplir su propio objetivo.

Por ejemplo, está diseñando una tienda de comercio electrónico: el objetivo comercial aquí sería vender los productos. Y el objetivo de los usuarios es encontrar exactamente lo que quieren comprar, lo más rápido posible y pagar, lo más rápido posible.

Una gran parte del proceso de diseño consiste en resolver el problema, construir un perfil del usuario, pensar cómo alcanzar el objetivo comercial, etc.

Los colores, las fuentes, el diseño, cada decisión de diseño que tomes deben ser dictados por el objetivo del sitio web .

2. Es la repetición lo que hace que las cosas se vean bonitas .

De eso se trata la consistencia.

Por ejemplo, emparejamiento de fuentes. Las fuentes se combinan en función de rasgos similares, en la repetición de detalles.

Aquí hay un partido: Farnham y Benton Sans.

De acuerdo con esta publicación aquí 2, estas dos fuentes coinciden porque:

[...] las caras son parecidas en la cuclillas de sus letras minúsculas, que tienen ascendentes y descendientes claramente cortos. [...] Las letras minúsculas de ambos son anchas.

La repetición de ciertos rasgos hace que estas 2 fuentes funcionen bien juntas. Puedes verlos en una página web aquí 3 .

La repetición trae armonía en un diseño. Y la armonía hace que el diseño se vea hermoso.

Pero, como puede ver, Farnham y Benton Sans también contrastan: Farnham es una fuente serif y Benton es sans serif.

¿Por qué hay necesidad de contraste? Estamos buscando introducir similitudes en un diseño, ¿verdad?

Bueno, sí, pero demasiada repetición hace que tus diseños sean aburridos y difíciles de usar .

La cura es el contraste.

3. El contraste ayuda al usuario a encontrar su camino

Les ayuda a distinguir diferentes elementos entre sí. Les ayuda a encontrar los elementos clave como encabezados, navegación, botones.

Cuanto más importante es el elemento, más debe contrastar con su entorno.

Use la repetición para hacer que sus diseños sean consistentes. Como otros han dicho: 2 fuentes, una paleta de colores limitada, etc.

Utilice el contraste cuando realmente necesite diferenciar un elemento del resto.

Todo lo que es bueno saber, pero ... todavía no te ayuda a diseñar tu próximo sitio web, ¿verdad?

Bueno, también tengo una solución para eso .

El primer paso para mejorar el diseño web es observar y absorber el trabajo de los demás. Mucho de eso. De ahí viene la "inspiración".

Mira cien diseños que te gustan, analízalos y comenzarás a detectar patrones. Tu cerebro te ayudará a combinar estos patrones en tu propio diseño, que será una variación de todos los diseños similares que viste. No necesita crear algo "único".

Resumen: la próxima vez que comience a diseñar para su proyecto paralelo

Visite una docena de sitios web / aplicaciones web similares y haga bocetos rápidos de sus diseños. Tenga en cuenta qué flujo de trabajo utilizaron. ¿Por qué lo usaron? Tenga en cuenta qué formas, colores y fuentes utilizaron.

Luego, siga este proceso para crear su propio diseño:

1. Define el proyecto. Sumérgete en el proyecto y conoce más sobre:

   1. Su propósito, resultados previstos

   2. Sus (futuros) usuarios
   3. La experiencia prevista para sus usuarios / visitantes
   4. La marca detrás del proyecto.
2. Adquirir los recursos necesarios. Obtenga contenido (de muestra) (pida prestado de sitios similares)

3. Dar forma al contenido

   1. Elija un tipo de letra para componer el contenido (elija uno que se ajuste al estado de ánimo y al mensaje del sitio)
   2. Elija el tamaño de fuente para la copia del cuerpo
   3. Genere una escala modular (una tabla de dimensiones armónicas proporcionales) a partir del tamaño de fuente de la copia del cuerpo (usando Type Scale - A Visual Calculator)
   4. Dibuje diferentes diseños según los requisitos del proyecto
   5. Cree el diseño (en HTML y CSS) con la ayuda de la escala modular: ancho de columna, altura de línea, tamaños de encabezado, márgenes inferiores, columnas (si es necesario)
   6. Aplicar color de acuerdo con la directriz de la marca.

Puede leer más sobre cada paso de este proceso aquí .

Un poco mas:

1. Eche un vistazo a través de colecciones inspiradoras de sitios web para obtener ideas. Una colección Motherload of Inspirational Website Collections enumera bastantes colecciones. Otros dos buenos sitios son siiimple.com y minimalsites.com .

2. La sugerencia de 'Eliminar clutter' de Virtuosi Media es un ideal definitivo, pero un sitio con desorden hecho por un principiante se ve mejor que un sitio minimalista hecho por un principiante. El desorden de alguna manera camufla los otros elementos de diseño pobres, lo que distrae con el contenido. El sitio de negocios típico tiene demasiado desorden, al igual que casi todas las plantillas, pero sigue siendo lo suficientemente profesional.
   
   Se necesita una conexión íntima con las fuentes, el contraste, el espacio negativo, el color, la densidad, el flujo, ... para crear el sitio verdaderamente bien diseñado y eficiente que respire bien.

3. Si todo se vuelve un poco abrumador, considere comprar una plantilla.

Solo para agregar un par de enlaces más para las personas que provienen de un entorno de programación interesado en el diseño de la interfaz de usuario.

• Design For Hackers (libro impreso)
• Principios del diseño de la interfaz de usuario (sitio)
• Diseño de interfaz de usuario paso a paso (ebook)
• The Shape Of Design (versión gratuita en línea)

Al principio enfrentarás problemas ya que algunas cosas no se interpondrán en tu camino. Pero tendrá que ser paciente y practicar mucho. Cuando comencé a diseñar y miro hacia atrás mi trabajo de hace 4 años, no puedo creer que hice ese trabajo.

Realmente necesitas buscar otros grandes diseñadores de trabajo. Para eso debes seguir a grandes diseñadores en Dribbble . También otra cosa muy muy importante es ver regularmente los últimos diseños en sitios de la galería CSS como www.minimalistgallery.com u otros.

Deseando todo lo mejor !!!

Suscríbase a http://sidebar.io/ para recibir boletines diarios. Cada artículo será útil de una forma u otra. Otra gran manera de aprender sobre los diseños es dribbble .

Este podría ser un consejo bastante general, pero para mí es algo que realmente dice si alguien es un buen diseñador o no:

Espacios en blanco, márgenes y alineación.

Son la clave para crear diseños elegantes y de aspecto profesional. Crean una especie de "espacio de respiración" y realmente pueden determinar si su diseño se verá bien o no. Al igual que con las fuentes, desea mantener ciertos márgenes / espacios en blanco determinados para mantener un diseño limpio.

Para realizar un seguimiento de cosas como esta, puede ser muy útil usar una cuadrícula o guías para diseñar.

Su pregunta es como "Como diseñador, constantemente necesito conocimientos básicos de programación de aplicaciones". Ambas son áreas vastas, con supor regiones superpuestas que se necesitan mutuamente. La buena noticia: estás interesado y entiendes la importancia de ellos. La mala noticia: no hay una manera fácil de comprender completamente lo que se necesita para hacer un buen diseño, sin un curso o metodología adecuados. PERO para los primeros pasos, este libro es de alguna manera bueno para comenzar de manera segura a construir sistemas visuales que tengan sentido.

Libro de diseño para no diseñadores