Una guía para desarrolladores de diseño web para no diseñadores

Creé mi primer sitio web como proyecto escolar cuando tenía 14 años. La tarea era simple: crear un sitio muy básico que incluye texto, imágenes y una tabla. Mi actitud habitual hacia los proyectos escolares era olvidarme por completo de ellos y luego encontrar una solución de última hora. Pero, esta vez, me volví loco.

Desde mi primer sitio web, siempre he priorizado que las cosas se vean bien. Admítelo o no, la gente juzga las cosas según la apariencia. Si lo que haces se ve bien, como si supieras lo que estás haciendo, la gente va a confiar más en ello. Así son las cosas.

Durante años de hacer proyectos paralelos, cambié mi enfoque cada vez más en desarrollar mis habilidades de diseño en lugar de simplemente perfeccionar mi programación. Verás, ser un algoritmo que escribe monstruos te lleva tan lejos. Mientras persigue el sueño de iniciar un proyecto paralelo rentable, tendrá que hacer muchos trabajos diferentes. Ser diseñador es uno de ellos. Al igual que los atletas de Cross-Fit, los fundadores en solitario deben estar bien preparados para desempeñarse bien.

Un diseño excelente no es necesariamente el que tiene más votos a favor de Dribbble. Es el que no notarás en primer lugar. Es un equilibrio perfecto de "tu abuela podría hacer eso" y "wow, eso es muy bueno". El diseño puede ser su ventaja competitiva o el clavo en el ataúd.

No se trata de talento

Cuando era más joven, jugaba mucho a Minecraft. Vi todos estos increíbles edificios que la gente hizo. Pero cuando hice algo, parecía una caja. Feo y sin estilo. ¿Cómo se hace algo agradable en Minecraft, verdad?

Entonces, encontré a un tipo en YouTube y construí una copia exacta de lo que construyó. Unas semanas más tarde, había desarrollado mi propio estilo y podía construir por mi cuenta. De repente, mis creaciones no parecían una mierda. Diablos, incluso gané un concurso de construcción.

El diseño es una habilidad y, como cualquier otra habilidad, se puede aprender.

Elegir la herramienta adecuada para el trabajo

En programación, puede usar el Bloc de notas y escribir una aplicación que sea tan buena como si estuviera escrita en un IDE completo ... aunque su vida podría ser bastante miserable al hacerlo y probablemente le llevará mucho más tiempo. En el mundo del diseño web, MS Paint tomaría el papel de Bloc de notas y, al igual que el Bloc de notas, pocas personas optan por diseñar con él… espero.

Las herramientas de diseño más populares para la web son:

  • Sketch, una herramienta exclusiva de MacOS que, similar a React, parece estar codificada en todas las listas de trabajos. $ 99 / año.
  • Adobe XD, una herramienta multiplataforma de uso gratuito que asume el papel de Vue. Tiene una comunidad más pequeña, pero es muy fácil comenzar.
  • Adobe Photoshop, el cuchillo suizo para cualquier tarea de diseño conocida por todos. Ha tomado el lugar de ... lo adivinaste, jQuery. $ 9.99 / mes

Casi no hay diferencia si usa código Sublime o VS para escribir aplicaciones. O si usa React o Vue para la interfaz. Es solo una cuestión de preferencia. Lo mismo ocurre con las herramientas de diseño, ya que cada una tiene sus pros y sus contras.

Yo uso Adobe XD. La razón principal para mí es que es multiplataforma, por lo que no soy rehén del ecosistema de Apple. También está respaldado por Adobe, por lo que estará aquí por un tiempo. Lo mejor para los recién llegados es que, desde mayo de 2018, Adobe XD es de uso gratuito con solo algunas limitaciones (con las que es poco probable que se encuentre de todos modos).

Ajustar tu forma de pensar

El mayor desafío que se me presentó en el mundo del diseño web fue ajustar mi forma de pensar. Estaba acostumbrado a idear el diseño mientras codificaba el sitio web. Todo tenía un orden. El flujo fue de izquierda a derecha y de arriba a abajo. El hecho es que este enfoque te convierte en un peor diseñador.

Las herramientas de diseño son caóticas porque te obligan a diseñar como si cada elemento estuviera posicionado de manera absoluta. Acepta este cambio. Le dará la libertad de cambiar las cosas rápidamente y facilitará la experimentación. Y eso es fundamental, porque el diseño es un proceso continuo. Se espera que cambie mucho las cosas antes de obtener un gran resultado.

Aprendiendo las herramientas

Al codificar, usa elementos HTML como divs, spans y entradas y deja que el navegador los represente en algo visual. Con las herramientas de diseño, tiene el poder de omitir al intermediario y utilizar elementos visuales como formas y texto directamente.

Elegí las 4 herramientas de diseño más utilizadas para que puedas pasar menos tiempo aprendiendo y más tiempo diseñando. De esa manera, puede comenzar a practicar lo antes posible. A continuación, te mostraré cómo funcionan y cómo usarlos.

Herramienta rectangular

Los rectángulos son la forma más universal. Te encontrarás usándolos todo el tiempo. Piense en ello como un div. Es útil para todo tipo de cosas, desde crear entradas de texto hasta contenedores.

Herramienta de texto (etiqueta)

La herramienta de texto, como sugiere el título, le permite crear texto. Sin embargo, no es tan simple, porque la herramienta de texto tiene dos estados: uno para texto de una sola línea y otro para varios párrafos. Afortunadamente, son extremadamente fáciles de aprender a usar correctamente.

El primer estado es un contenedor de texto de una sola línea que ajusta su tamaño según el tamaño del texto. Es similar a a con la excepción de que no se ajustará a menos que haga un salto de línea. El beneficio de este estado es que ajustará automáticamente el tamaño del cuadro de texto según la altura de la línea y el tamaño de la fuente.

Para crearlo, simplemente haga clic con la herramienta Texto seleccionada y escriba. Como regla general, use este estado para cualquier cosa que no necesite un ancho específico y sea una sola línea. Por ejemplo, títulos y etiquetas de una sola línea.

Herramienta de texto (párrafo)

El segundo estado es un contenedor de texto con un tamaño específico que se comporta como un

con un ancho específico o

dentro de una columna de cuadrícula. El beneficio de este estado es que puede controlar el tamaño del cuadro de texto. Para crear un párrafo, haz clic con la herramienta de texto seleccionada y mantén presionada para crear una selección. Como regla general, use este estado para párrafos y titulares en más de una línea.

Herramienta de selección

Mover, redimensionar, duplicar. Esta es la herramienta para eso. Esas líneas rosadas te muestran la distancia de los elementos circundantes. Las líneas azules te ayudan a que los elementos se alineen correctamente.

Herramienta de línea

A veces, una línea es útil para separar partes del diseño. Es por eso que la herramienta de línea está aquí. Técnicamente, podría usar herramientas rectangulares en su lugar, pero bueno, entonces el div podría usarse para cualquier cosa.

Consejos y técnicas de diseño

Diseño

En el desarrollo web, un diseño se describe más comúnmente como encabezado, menú, contenido y pie de página. Eso es parte de eso, pero un diseño es más que eso. Es literalmente la forma en que se distribuyen todos los elementos.

Por ejemplo, cuando estaba diseñando la información del proyecto para Sidemail, distribuí los elementos dentro de una tarjeta de manera uniforme, lo que la hace sentir más completa y más limpia.

Colores

Para ayudarlo a encontrar el color perfecto para su próximo proyecto, considere tener en cuenta la psicología de los colores (colorpsychology.org). Una herramienta útil para encontrar la combinación de colores perfecta según su color primario es Paletton.

Utilice tonos de colores primarios y colores de texto para crear una jerarquía visual. Pruebe con tonos más oscuros o más claros para su texto cuando utilice un fondo de color.

Tipografía

La tipografía afecta en gran medida la marca de su proyecto, así que elija sabiamente. Los tipos de letra premium tienden a verse mejor que los de Google Fonts, pero cuando recién está comenzando, no compre uno. Incluso en Google Fonts, hay algunas gemas ocultas.

Un truco que utilizo con mucha frecuencia para dividir visualmente el texto es poner las etiquetas en mayúsculas con un mayor espaciado entre letras. El texto en mayúsculas es simétrico y se ve bien desde un punto de vista visual, pero no lo uses en exceso porque es mucho más difícil de leer.

Diseñar una página de inicio (o una página de destino)

Siempre trato de evitar la tentación de diseñar elementos de moda y luego meter mi mensaje en ellos. Más bien, propongo beneficios (no características), los incluyo en una historia y cuento esa historia en una página visualmente atractiva.

Después de establecer lo que quiero decir, generalmente busco inspiración. Un gran recurso para eso es land-book.com, un vasto directorio de páginas de destino de gran apariencia en las que la gente puede votar. Otra gran página inspirada en el diseño es interfaces.pro, donde puede filtrar por categorías como precios, 404 o sobre nosotros. Solo navego hasta encontrar suficientes sitios que me gustan y combinan con el estilo deseado.

La parte difícil es ponerlo todo junto. Desafortunadamente, no hay atajos. Solo tienes que iterar mucho hasta que obtengas un resultado con el que estés satisfecho.

Es posible que se pregunte si es normal que un diseño con el que estaba completamente satisfecho hace una semana de repente no se sienta lo suficientemente bueno o incluso feo hoy. La respuesta es que es perfectamente normal y, de hecho, algo bueno. Esencialmente se debe a que crece, aprende y mejora. El desafío de ayer no es tan desafiante hoy. Tenga esto en cuenta para no quedarse atrapado en una carrera de ratas.

Conclusiones:

  • El tipo de letra único hace una gran diferencia
  • Los gráficos son muy importantes, intente utilizar al menos alguna ilustración o imágenes
  • Obtenga la importancia visual correcta utilizando múltiples tonos de colores. El texto y los colores primarios no son suficientes.
  • No utilice contenedores que sean demasiado anchos: alrededor de 1100 px es lo suficientemente ancho
  • Abraza el espacio negativo
  • Habla de beneficios, no de características
  • Mira a tu alrededor en busca de inspiración si te quedas atascado

Diseñar una aplicación web (o un tablero)

Al igual que con el diseño de una página de destino, no se lance directamente al diseño. Esta vez, no estás tratando de contar una historia. En cambio, el objetivo es la facilidad de uso. Tome un lápiz y papel y haga un plan de cómo debería funcionar su aplicación, qué debería depender de qué y cómo navegar fácilmente.

Haga algunos bocetos o marcos de alambre si es necesario. Realice una inspección adecuada del diseño de la competencia para ver por sí mismo qué es lo que falta y qué se puede hacer mejor, o posiblemente incluso convertirse en una ventaja competitiva. A veces, es mejor tomarse un descanso antes de hacer planes en papel y diseñar.

El mejor consejo que puedo dar que no sea un caso de uso específico es elegir un diseño de página adecuado. Generalmente, todas las aplicaciones web usan dos diseños de página diferentes según el propósito de la aplicación: contenedor de ancho fijo o contenedor de fluido que llena toda la pantalla.

Contenedor fijo

Prefiero el contenedor fijo, porque es mucho más fácil enfocarse en un área estrecha, ya que evita el movimiento innecesario de los ojos. Las aplicaciones de contenedor fijo también tienden a ser más limpias y menos abrumadoras para los nuevos usuarios. Sin embargo, debido al menor ancho, las aplicaciones de contenedor fijo son más difíciles de diseñar.

Ejemplos: Twitter, Buffer, DigitalOcean, Netlify, GitHub

Recipiente de fluido

Las aplicaciones de contenedor fluido son ideales para aplicaciones de chat, aplicaciones de hojas de cálculo y otras aplicaciones donde es esencial tener más cosas en la pantalla. Pero tenga en cuenta que muchos datos en una pantalla pueden resultar abrumadores.

Ejemplos: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

Es importante elegir el contenedor correcto, porque todo el diseño de la página dependerá de él y cambiarlo más tarde es mucho trabajo. Cada proyecto es único y requiere soluciones únicas, ¡así que no tema experimentar!

Conclusiones:

  • Mantenlo simple
  • Usar tipografía legible
  • Use la jerarquía visual al mostrar muchos datos
  • Aproveche las malas elecciones de diseño de la competencia

Terminando

Recuerde, el diseño puede ser su ventaja competitiva, así que úselo y cree algo increíble.

Comience su viaje de diseño al obtener una plantilla de Adobe XD que hice para la página de inicio de mi proyecto más reciente. Simplemente suscríbase a mi nueva lista de correo electrónico y llegará a su buzón.

Además, serás el primero en recibir una notificación sobre mi próxima publicación, donde compartiré el progreso de 69 días que hice en Sidemail, un proyecto SaaS en el que trabajo. Incluirá cosas como recuentos de suscriptores, visitas al sitio, gastos y borradores de diseño. No hace falta decirlo, pero garantizo absolutamente ningún spam. Ni siquiera tengo tiempo para esa mierda.

Mis DM de Twitter están abiertos, así que si te quedas atascado haciendo tus diseños o tienes más preguntas, no dudes en contactarme.