• Manténgase simple : no intente hacer nada demasiado elegante o aventurero al principio. Aprende lo básico primero, luego puedes comenzar a experimentar. No intente emular la interfaz de computadora de Star Trek.
• Sea consistente : un diseño consistente es parte de la base de un buen diseño. Lleve un registro de sus márgenes, tamaños y ubicación y manténgalos durante todo el diseño.
• Eliminar desorden : solo incluye los elementos que son necesarios para el diseño. Elimina todo lo demás.
• Priorizar - ¿Cuál es el propósito principal del diseño? Enfatice ese propósito. Hazlo obvio.
• Usar espacios en blanco : permita márgenes adecuados. Grandes bloques 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 : apéguese a una o dos fuentes. Úselos consistentemente, generalmente uno para encabezados, uno para texto de párrafo. Calcule y mantenga tamaños de fuente, alturas de línea y espacios entre líneas consistentes. No uses Comic Sans a menos que puedas defenderte de zombis velociraptores rabiosos.
• El diseño es lo primero : el diseño no debe ser una ocurrencia tardía; debe 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. Dale al diseño la importancia que le corresponde.

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

• Revista aplastante
• PSD Tuts
• abuzeedo
• Stand de experiencia de usuario
• amo la tipografía
• Jasón Santa María

El índice de conceptos básicos 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 mencionadas mucho en otros lugares. Y quizás lo más importante, leerlo me entusiasmó mucho para salir y experimentar con las ideas que estaba introduciendo.

A veces hay una ligera superposición entre el desarrollo web y el diseño web, pero no creo que los desarrolladores web deban tratar de ser diseñadores de tiempo completo a menos que estén dispuestos a esforzarse tanto como lo hicieron aprendiendo 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 obtenga una capacitación formal (incluso si solo se trata de tomar algunos 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 publicó Damon podría ayudar, pero tendrás que hacer todos los ejercicios del libro y asegurarte de que entiendes el material. Pero lo más importante es que debe dedicar mucho tiempo a mirar (explorar 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 de UX es probablemente el mejor uso de su tiempo. De esta manera, puedes involucrarte en la dirección creativa del proyecto y ayudar a diseñar las interfaces, pero el diseñador es quien crea el "look" o la estética del sitio.

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

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net : alberga los portafolios 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.
• Drawing on the Right Side of the Brain de Betty Edwards: El libro para desarrollar tus habilidades de dibujo.
• The Humane Interface 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 llama la atención, y que tal vez cierra un poco la brecha, es aprender CSS por dentro y por fuera, ya que ser capaz de diseñar bien no significa nada. si no puede integrarlo en su proyecto que está creando.

En 2004 me encontré a mitad de camino entre ambos mundos, como había sido 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 unos 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 desarrollador.

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, durante la cual mis inclinaciones más geek fueron útiles.

Entonces, tal vez considere la educación superior, o lo que sea, que también sea 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 comúnmente ausentes en este campo (y siempre lo ha sido).

Por lo general, puedo contratar a 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 del tipo y el 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 creado por el hombre 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 también cómo se ve.

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 se diferencia 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 tiene el propósito de 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 explicárselos a otras personas, como colegas de diseño y fabricantes.

   Dibujar 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 conducirán 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 de 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, siempre debes considerar cómo se implementará tu diseño.

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

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.

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

   Aprender sobre diseño va más allá de leer revistas de moda y decoración, aunque estas 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á tu diseño al siguiente nivel es la experiencia del mundo real.

7. Cometer errores rápidamente

   Cometerá muchos errores, y cuanto más rápido pueda superarlos, mejor.

8. Esté siempre 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 aplastante

PSD Tuts

abuzeedo

Stand de experiencia de usuario

Algunos puntos a tener en cuenta:

1. Todo diseño resuelve un problema.

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

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

Un sitio web existe para realizar 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 al negocio asegurándose de que tantos usuarios como sea posible cumplan con 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 se dedica a resolver el problema, crear 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 tome debe estar dictada 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, el emparejamiento de fuentes. Las fuentes se combinan en función de rasgos similares, en la repetición de detalles.

Aquí hay una coincidencia: Farnham y Benton Sans.

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

[...] las caras son similares en la forma achaparrada de sus letras minúsculas, que tienen ascendentes y descendentes claramente cortas. [...] Las minúsculas de ambos son anchas.

La repetición de ciertos rasgos hace que estas 2 fuentes funcionen bien juntas. Puede 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 sus 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 sea el elemento, más debe contrastar con su entorno.

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

Usa el contraste cuando realmente necesites diferenciar un elemento del resto.

Es bueno saber todo eso, 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 paso 1 para mejorar en 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 gusten, analízalos y empezarás a encontrar 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 necesitas crear algo "único".

Resumen: la próxima vez que empieces a diseñar para tu proyecto paralelo

Explore 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. Definir el proyecto. Sumérgete en el proyecto y conoce más sobre:

   1.Su propósito, resultados esperados

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

3. Dar forma al contenido

   1. Elija un tipo de letra en el que escribir el contenido (elija uno que se ajuste al estado de ánimo y al mensaje del sitio)
   2. Elija el tamaño de fuente para el cuerpo del texto
   3. Genere una escala modular (una tabla de dimensiones armónicas proporcionales) a partir del tamaño de fuente del cuerpo del texto (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, alto de línea, tamaños de encabezado, márgenes inferiores, columnas (si es necesario)
   6. Aplicar el color según las directrices de la marca.

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

Un poco mas:

1. Eche un vistazo a las colecciones de sitios web inspiradores 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 desorden' de Virtuosi Media es un ideal definido, 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 deficientes, distrayendo con el contenido. El sitio comercial típico tiene demasiado desorden, al igual que casi todas las plantillas, pero aún tiene un aspecto 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 un sitio eficiente y verdaderamente bien diseñado 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 una experiencia en programación interesadas en el diseño de la interfaz de usuario.

• Diseño para hackers (libro impreso)
• Principios del diseño de la interfaz de usuario (sitio)
• Diseño de interfaz de usuario paso a paso (ebook)
• La forma del diseño (versión en línea gratuita)

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

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

Deseando todo lo mejor!!!

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 para respirar" y realmente pueden determinar si su diseño se verá ensamblado o no. Al igual que con las fuentes, desea ceñirse a ciertos márgenes/espacios en blanco establecidos 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.

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

Su pregunta es como "Como diseñador, constantemente necesito conocimientos básicos de programación de aplicaciones". Ambos son áreas extensas, con regiones superpuestas que se necesitan mutuamente. La buena noticia: estás interesado y entiendes la importancia de ellos. Las malas noticias: 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 a construir de forma segura sistemas visuales que tengan sentido.

Libro de diseño para no diseñadores