Cómo aprender diseño web (en 9 pasos)
Comprender los conceptos clave del diseño visual
Línea
Cada letra, borde y división en un diseño se compone de líneas que conforman su mayor estructura. Aprender diseño web significa comprender las aplicaciones de las líneas para crear orden y equilibrio en un diseño.
Formas
Las tres formas básicas en el diseño visual son cuadrados, círculos y triángulos. Los cuadrados y rectángulos funcionan para bloques de contenido, los círculos funcionan para botones y los triángulos se usan a menudo para iconos que acompañan un mensaje importante o una llamada a la acción. Las formas también tienen un sentido de emoción, con cuadrados asociados con la fuerza, círculos con armonía y comodidad, y triángulos con importancia y acción.
Textura
La textura replica algo en el mundo real. A través de la textura, tenemos una idea de si algo es áspero o liso. Las texturas se pueden ver en todo el diseño web. Desde fondos similares al papel hasta los coloridos destellos de un desenfoque gaussiano, tenga en cuenta los diferentes tipos de texturas que pueden hacer que sus diseños sean más interesantes y les puedan dar una sensación de fisicalidad.
Color
Para crear diseños que no sean una fatiga visual, debe educarse en la teoría del color. Comprender la rueda de colores, los colores complementarios, los colores contrastantes y las emociones a las que están vinculados los diferentes colores lo convertirá en un mejor diseñador web.
Rejillas
Las rejillas tienen sus raíces en los primeros días del diseño gráfico. Funcionan muy bien para poner orden en imágenes, textos y otros elementos en un diseño web. Aprende a estructurar tus diseños web usando cuadrículas.
Conozca los conceptos básicos de HTML
El lenguaje de marcado de hipertexto (HTML) proporciona instrucciones sobre cómo se muestran el contenido, las imágenes, la navegación y otros elementos de un sitio web en el navegador web de alguien. Aunque no es necesario ser un experto en HTML, sigue siendo útil tener cierta familiaridad con cómo funciona, incluso si está utilizando una plataforma de diseño visual como Webflow.
Las etiquetas HTML son las instrucciones que utiliza un navegador para generar un sitio web. Los encabezados, párrafos, enlaces e imágenes están controlados por estas etiquetas. En especial, querrás saber cómo se usan las etiquetas de encabezado H1, H2 y H3 para la jerarquía de contenido. Además de afectar la estructura del diseño, las etiquetas de encabezado son importantes en la forma en que los rastreadores web clasifican un diseño y afectan la forma en que aparecen en los rankings de búsqueda orgánica.
Para obtener más información sobre los conceptos básicos de HTML (también hay una sección sobre CSS), echa un vistazo a esta lección que hemos recopilado en Webflow University.
Entender CSS
CSS (o hojas de estilo en cascada) proporciona estilo e instrucciones adicionales sobre cómo aparecerá un elemento HTML. Hacer cosas como aplicar fuentes, agregar relleno, configurar alineación, elegir colores e incluso crear cuadrículas es posible a través de CSS.
Saber cómo funciona CSS le dará las habilidades para crear sitios web de aspecto único y personalizar las plantillas existentes. Repasemos algunos conceptos clave de CSS.
Clases CSS
Una clase CSS es una lista de atributos que se unen en el estilo de un elemento individual. Algo como el texto del cuerpo podría tener la fuente, el tamaño y el color como parte de una sola clase CSS.
Clases combinadas CSS
Una clase combinada se construye sobre una clase base existente. Hereda todos los atributos como el tamaño, el color y la alineación que ya pueden estar en su lugar. Los atributos se pueden cambiar. Las clases combinadas le ahorran tiempo y le permiten configurar variaciones de una clase que puede aplicar en cualquier lugar que necesite en un diseño web.
Saber cómo funciona CSS es esencial a la hora de aprender diseño web. Como se mencionó en la sección sobre HTML, le recomendamos que se dirija a Webflow University para ver más información sobre cómo funciona CSS.
Conozca los fundamentos de la experiencia de usuario
UX es la magia que da vida a un sitio web, transformándolo de una disposición estática de elementos en algo que interactúa con las emociones de alguien que se desplaza a través de él.
La combinación de colores, el contenido, la tipografía, el diseño y los elementos visuales se unen para servir a su audiencia. El diseño de la experiencia del usuario se basa en la precisión y en evocar sentimientos. Ofrece a alguien no solo un viaje sin problemas, sino una experiencia que los conecta con la entidad o marca detrás del diseño web.
Estos son algunos principios de experiencia de usuario que debe conocer.
Personas de usuario
El diseño web significa comprender a los usuarios finales. Deberías aprender a investigar a los usuarios y a crear personajes de usuario. Además, necesitará saber cómo utilizar esta información para crear un diseño optimizado para sus necesidades.
Arquitectura de la información
Sin una organización clara, las personas se confundirán y rebotarán. La arquitectura de la información y el mapeo de contenido proporcionan un modelo de cómo el sitio web y cada sección trabajarán juntos para proporcionar un recorrido claro para el cliente.
Flujos de usuario
La construcción de flujos de usuario puede entrar en juego cuando se abre paso a proyectos de diseño más extensos, pero estará mejor en el futuro si comienza a pensar en ellos y a construirlos para sus primeros diseños. Los flujos de usuario comunican cómo se moverán las personas a través de un diseño. Te ayudan a priorizar las secciones más importantes y a asegurarte de que las personas puedan acceder a ellas.
Wireframes
Los Wireframes muestran dónde se colocarán los encabezados, el texto, los elementos visuales, los formularios y otros elementos de una página web. Incluso si está construyendo un diseño web simple de una página, trazar un marco de alambre le dará una guía sólida para trabajar. A medida que avanza a sitios web más complicados, los marcos de alambre son esenciales para crear una experiencia consistente, estructurar diseños y no perder nada que deba incluirse.
Creación de prototipos
Los prototipos pueden tener diferentes niveles de fidelidad, pero actúan como una representación de un diseño funcional. Imágenes, interacciones, contenido y otros elementos importantes están en su lugar y replican el diseño del mundo real. Los prototipos se utilizan para obtener retroalimentación y ajustar un diseño a lo largo del proceso.
Familiarícese con la interfaz de usuario
Una interfaz de usuario es un mecanismo que pone en acción una pieza de tecnología. Un pomo de puerta es una interfaz de usuario. El control de volumen de la radio de su automóvil con el que su pareja no dejará de jugar es una interfaz de usuario. Y el teclado en el que ingresa su PIN en un cajero automático es una interfaz de usuario. Al igual que los botones y otros mecanismos en el mundo real permiten a alguien interactuar con las máquinas, los elementos de la interfaz de usuario en un sitio web permiten a alguien poner en movimiento acciones.
Repasemos dos principios clave de la interfaz de usuario: diseño intuitivo y simplicidad.
Cómo crear interfaces intuitivas
Interactuar e interactuar con un sitio web debe ser consistente y seguir patrones repetibles. Las personas que aterrizan en un sitio web deben comprender inmediatamente los sistemas que están en su lugar para navegar a través de él.
Simplifique la interfaz de usuario
La interfaz de usuario existe para optimizar la usabilidad. Esto significa que los controles son fáciles de usar, así como obvios en su funcionalidad. Ya sea que esté minimizando el número de opciones de navegación, acelerando el proceso de pago o integrando otros elementos interactivos que aumentan la accesibilidad, comprender la interfaz de usuario lo ayudará a optimizar la experiencia de alguien al interactuar con un sitio web.
Por supuesto, la interfaz de usuario es un tema vasto que no se puede capturar en solo unos pocos párrafos. Te sugerimos que eches un vistazo a la publicación del blog «10 consejos de diseño de interfaz de usuario esenciales» como introducción a la interfaz de usuario.
Lecturas relacionadas: UX vs UI: diferencias clave que todo diseñador debe conocer
Comprender los conceptos básicos de la creación de diseños
Nuestros ojos se aferran a ciertos patrones de diseño automáticamente, lo que facilita la ruta a través de un diseño web. Intuitivamente sabemos dónde buscar porque hemos visto estos mismos patrones una y otra vez a medida que hemos consumido medios a lo largo de nuestras vidas. Conocer los patrones de diseño te ayudará a crear sitios web que tengan un flujo fluido hacia el contenido y las imágenes. Dos patrones de diseño web comunes que necesita conocer son los patrones Z y los patrones F.
Patrón Z
Para diseños con una economía de palabras e imágenes y generosas cantidades de espacio negativo, el patrón Z es una forma eficiente de navegar por un sitio web. Cuando empiezas a prestar atención a dónde están pasando tus ojos por un diseño, reconocerás de inmediato cuando un patrón Z esté en su lugar.
Patrón en F
Los diseños con mucho texto, como para una publicación en línea o un blog, a menudo siguen un patrón en F distinto. En el lado izquierdo de la pantalla, verás una lista de artículos o publicaciones, y en el cuerpo principal de la página, verás filas de información relacionada. Este patrón está optimizado para proporcionar a las personas toda la información que necesitan, incluso si lo revisan rápidamente.
Lecturas relacionadas: Diseño de página web: anatomía del sitio web todo diseñador necesita aprender
Aprender sobre tipografía
Las fuentes pueden transmitir diferentes tonos o emociones, así como afectar la legibilidad. Si estás aprendiendo sobre diseño web, saber cómo usar la tipografía es esencial.
La tipografía sirve para varios propósitos en el diseño web. En primer lugar, sirve al propósito utilitario de hacer que el contenido sea legible. Pero también puede servir como decoración, y el uso de buen gusto de la tipografía estilizada puede agregar a la estética general.
Aquí hay tres conceptos tipográficos básicos que debe conocer.
Serif
Los tipos de letra Serif tienen líneas minúsculas conocidas como serifs que adornan cada letra. Este estilo tipográfico se remonta a la impresión.
Sans serif
Como su nombre indica, los tipos de letra sans serif carecen de las líneas de identificación de los tipos de letra serif. Estas tipografías se encuentran en el ámbito digital de los sitios web y las aplicaciones.
Pantalla
Los tipos de letra de pantalla se utilizan a menudo para los titulares y pueden ser grandes e impactantes o estar hechos de líneas finas y nítidas. Por lo general, tienen formas de letras sofisticadas y están destinadas a captar la atención de alguien.
Lecturas relacionadas: Diseño tipográfico: estilos de fuente y recursos para diseñadores
Ponga su conocimiento en acción y cree algo
Puedes ver tutoriales, leer publicaciones de blog, inscribirte en cursos en línea y absorber toda la teoría e información que puedas sobre el diseño web, pero la única manera de convertirte en diseñador web es comenzar a diseñar web.
Comience con un proyecto simple. Tal vez alguien que conoces necesita ayuda para crear una cartera o tiene un ajetreo lateral que carece de cualquier tipo de presencia en la web. Ofrézcales diseñarles algo gratis.
Un blog es también otro gran proyecto para principiantes. Esto le dará experiencia práctica de diseño para aprender a usar cosas como un CMS, además de proporcionar un escaparate para sus habilidades de escritura.
Crear un sitio web para una empresa o negocio falso es otro ejercicio creativo divertido para desarrollar tus habilidades de diseño. Además, puede agregarlo a su cartera.
Consigue un mentor
Los mentores son valiosos porque han estado donde estás, desde el principio — y tienen el deseo de ayudarte a superar las lecciones que han aprendido con tanto esfuerzo. Tienen un pozo profundo de experiencia y conocimiento. Son un gran recurso para obtener comentarios sobre su trabajo y encontrar lo que está haciendo bien y lo que necesita mejorar.
En la búsqueda del mentor adecuado, asegúrese de encontrar a alguien que haga el tipo de diseño que admira y se especialice en lo que desea aprender. Los mentores pueden darte un camino claro a partir de los años pasados en el campo para que no tengas que tropezar a través del aprendizaje del diseño web.
Sin código proporciona una entrada fácil en el diseño web
Hubo un tiempo, no hace mucho tiempo, en el que tenías que tener un profundo conocimiento de HTML y CSS para escribir manualmente el código detrás de un diseño web. Hoy en día, sin herramientas de código como Webflow, es posible armar un sitio web y lanzarlo en poco tiempo. Lo que tomó días o semanas ahora puede suceder en horas.
Por supuesto, hay mucho que hacer para crear un buen diseño web. Aprender los fundamentos del diseño visual, los conceptos básicos de la interfaz de usuario y la experiencia de usuario, y saber cómo la función front-end y back-end te convertirán en un diseñador más completo.
Ya sea que esté empezando o sea un experto, Webflow ofrece una plataforma intuitiva basada en imágenes para que pueda realizar su creatividad. Además de una forma fácil de usar de lanzar sitios web, Webflow tiene toda una comunidad para darte consejos y ayudarte a mejorar tus habilidades. Esperamos verle trabajar en nuestro Escaparate.