¿Ha notado algo diferente en el sitio web promedio hoy en día? Algo ha cambiado en la forma en que se diseñaron los sitios web, incluso hace unos pocos años. Y muchos llaman a este cambio la llegada de la Web 3.0 - una nueva era de diseño web.
En el panorama general, la Web 3.0 tiene que ver con los datos y su administración. Vivimos en una era de información y, a medida que aumenta el volumen de datos, también lo hace la necesidad de administrarlos.
Has escuchado sobre Servicios antes, y la frase Web descentralizada.
Y también habrá oído hablar de personas que quieren quitarle poder a empresas como Googlee incluso Facebook, que ha tenido una buena cantidad de problemas relacionados con la privacidad en los últimos años.
¿Qué pasa con la Inteligencia Artificial (IA) y Aprendizaje automático (ML)?
Todas estas son tecnologías reales, que se incorporan a la web moderna de una forma u otra. Y el objetivo es simple, personalizar las experiencias de los usuarios y hacer que la Web sea más accesible.
Y todavía…
This post is about none of those technologies
Si bien entiendo que todas las tecnologías mencionadas anteriormente son excepcionalmente relevantes para esta época, mi enfoque para esta publicación es Diseño Web 3.0.
En otras palabras, ¿cómo han cambiado los sitios web en los últimos cinco años y cómo está cambiando el aspecto del diseño de sitios web con la Web 3.0?
Así es como se veía la Web:
Y a mediados de la década de 2000, comenzamos a ver la aparición de la Web 2.0, que se parecía a esto:
Pero, esto no es nada en comparación con lo que vemos en los diseños de la Web 3.0:
La nueva era del diseño web enfatiza una precisión inmaculada, esquemas de color impactantes y una adición de nuevos elementos de diseño que son complementarios al diseño general.
Entonces, ¿cómo llegamos aquí y qué necesitas saber?
What is Web Design 3.0: Your questions answered
Para esta sección, me centraré en las siguientes preguntas:
- ¿En qué se diferencian los sitios web de la Web 3.0 de años anteriores?
- ¿Por qué los diseñadores utilizan tantas formas y otros elementos de diseño?
- ¿Los creadores de páginas se mantienen al día con las tendencias?
Una vez que se hayan respondido estas preguntas, veremos las herramientas de diseño de vanguardia y un par de plataformas donde puede encontrar inspiración para el diseño.
Entonces, sigamos con la primera pregunta.
# 1: ¿En qué se diferencian los sitios web de la Web 3.0 de años anteriores?
Yo diría que el cambio más significativo de los últimos años es la incorporación de elementos creativos.
Los diseñadores se sienten mucho más cómodos con el uso de elementos de fondo como formas y curvas para imponer una ruta de navegación de diseño específica.
Cuando se usa correctamente, formas y manchas puede ayudar a resaltar contenido valioso al mismo tiempo que proporciona una interfaz de usuario (interfaz de usuario) agradable.
Además de esto, los diseños Web 3.0 están utilizando bastante más ilustraciones y contenido visual en conjunto. No solo para enriquecer páginas, sino a menudo para ilustrar un producto o una causa específicos.
Tan pronto como vea un diseño como este, sabrá que la empresa específica se ha esforzado mucho para que la experiencia del usuario sea agradable.
A finales de 2018, MailChimp cambió el nombre de todo su sitio web, y una de las cosas que eligieron introducir fue el uso de ilustraciones.
Estas son las 3 razones principales por las que debe considerar el uso de ilustraciones:
En primer lugar, las ilustraciones captan la atención de los visitantes como ninguna otra cosa, pero eso no viene al caso.
- Convierta lo complejo en simple. Tradicionalmente, los diseñadores web confiaban en los titulares para explicar su producto. En estos días, las ilustraciones pueden hacer la mayor parte del trabajo duro por usted. Puede diseñar una ilustración completa en torno a sus productos y sus características. Después de todo, ¡el aprendizaje visual es una cosa!
- Imagen de marca. El estilo de las ilustraciones que está utilizando puede ayudar a promover una imagen de marca positiva. Las ilustraciones pueden mostrar diferentes valores, fortalezas y cualidades de la marca. No es algo que puedas retratar solo con la redacción publicitaria.
- Carácter visual. Cada marca es diferente. Y con imágenes, puede representar una identidad que lo distingue del resto.
Esto también se aplica a cosas como iconos y animaciones. Ambos requieren un trabajo un poco más individual, preferiblemente de un diseñador gráfico, ¡pero las recompensas están ahí!
Y el tercer cambio más significativo es tipografía.
La tipografía siempre ha sido una gran parte de cualquier diseño. Y si no está convencido, lo desafié a cambiar las fuentes de su sitio web a algo completamente aleatorio.
La diferencia que buena tipografía hace es enorme. Y desde que los sitios web de la Web 3.0 se han convertido en la corriente principal, también lo ha hecho la variedad de tipos de letra.
Podría salirse con la suya con un diseño web simple únicamente para el tipo de fuentes que está utilizando. Recomiendo marcar Typewolf.
Este sitio es una mina de oro para todo lo relacionado con la tipografía y los tipos de letra. Jeremiah Shoaf lo dirige. Ha mantenido su sitio web durante muchos años y tiene miles de listados diferentes en su sitio.
Además, escribe guías y mantiene regularmente su directorio "Sitio del día". Siempre que estoy trabajando en un nuevo proyecto, Typewolf es uno de los primeros sitios que visito.
Al aprender la tipografía y su efecto en el diseño web, se ahorrará mucho tiempo a la hora de hacer que el diseño se sienta profesional.
# 2: ¿Por qué los diseñadores utilizan tantas formas y otros elementos de diseño?
No son solo los sitios web diseñados por profesionales los que utilizan esta nueva tendencia. Más temas y frameworks modernos de WordPress también están diseñados para implementar estas tendencias.
Pero, ¿por qué las formas y cómo benefician al diseño de un sitio web? Los dos factores principales son estética y minimalismo. Las formas y otros elementos geométricos ayudan a unir todo el diseño, asegurando flujo fluido y experiencia de usuario constante.
Tradicionalmente, las secciones se dividían solo con colores individuales y, a veces, sin ningún color.
En este ejemplo, puede ver cómo el uso de ilustraciones simples enriquece este diseño minimalista y los patrones de fondo de apoyo. Esto, a su vez, ayuda a acentuar la legibilidad de los principales elementos de navegación.
También puede utilizar elementos de fondo de apoyo para resaltar contenido importante, así:
Con todo, es una mezcla de coherencia y pensamiento creativo. Una forma de fondo, como se muestra arriba, puede ayudar implementar la psicología del color para mejorar aún más la experiencia del usuario.
Más adelante en la publicación, veremos los sitios de inspiración para el diseño web más populares. Ahí es donde verá diferentes técnicas para implementar formas geométricas en el diseño web.
# 3: ¿Los creadores de páginas se mantienen al día con las tendencias?
No son solo los creadores de páginas como Visual Composer y Elementor que le ayudan a crear mejores páginas de destino. Marcas como Squarespace, Webflow y Weblium también están logrando avances significativos en el espacio de creación de sitios web. Y, efectivamente, todas estas herramientas de diseño siguen las últimas tendencias en diseño web.
Elementor, que ha visto más de 25 millones de descargas, está en constante evolución su biblioteca de componentes para incluir elementos que componen la web moderna. Y Weblium utiliza IA para ayudar a los webmasters sin experiencia a crear sitios web visualmente impresionantes.
La mejor parte es que nunca tienes que escribir una sola línea de código. Los creadores de páginas modernos proporcionan Diseños basados en cuadrículas sin todos los tecnicismos.
Puede crear nuevas filas, secciones y cambiar el tamaño de componentes individuales usando herramientas de arrastrar y soltar. O puede evitarlo por completo y utilizar plantillas prediseñadas.
No hace falta decir, aprender HTML y CSS todavía es muy recomendable como es aprender arte vectorial y diseño gráfico general. Los creadores de páginas son propensos a las ineficiencias que solo pueden resolverse si se ensucian con el código.
Web 3.0 Design Tools: The current trends
En los primeros días, los sitios web se creaban a partir de esquemas y bocetos que tenía que diseñar en una hoja de papel. Photoshop ayudó a aliviar esto un poco, pero ciertamente no hasta el punto de las herramientas que tenemos hoy en día.
Las herramientas de diseño modernas se centran específicamente en la idea de diseñar sitios web y aplicaciones móviles. Esto abre la puerta al diseño de píxeles perfectos con la capacidad de exportar algunos de sus diseños como sitios web listos para usar.
Una vez que tenga un diseño personalizado, puede concentrarse en codificarlo usted mismo o usar creadores de páginas para lograr una copia casi perfecta de ese diseño.
Aquí están las herramientas que marcarán la diferencia.
# 1: Bosquejo
Bosquejo es una herramienta de diseño única para Mac OS y posiblemente una de las mejores herramientas de diseño digital del mercado. Aunque está limitado a un sistema operativo específico.
Una de las cosas que hace que Sketch sea tan popular y tan buscado es el hecho de que proporciona prácticamente todo lo que necesita para el diseño digital, que incluye el diseño de sitios web, aplicaciones móviles, gráficos vectoriales, también cosas como la creación de prototipos y complementos externos para mayor funcionalidad. .
Personalmente, una de las cosas que realmente amo de Sketch es que es un software realmente robusto. Es en términos de buscar otras opciones en el mercado. Sketch ejemplifica el estándar de un software creado profesionalmente.
Y en lo que respecta al diseño web, quiero decir, una de las características interesantes de Sketch es que está diseñado para admitir el diseño de sitios web. Para que pueda crear cuadrículas, puede crear múltiples capas y mucho más.
En muchos sentidos, es como Photoshop, pero para el diseño web. No incluye sus funciones promedio para editar fotos, pero proporciona todo lo que necesita para editar sus gráficos vectoriales, insertar imágenes, administrar fuentes, administrar tamaños de página, crear cuadrículas adicionales, todo.
Si miras los sitios web modernos, hoy en día, especialmente de algunas de las grandes marcas, entonces el 99% del tiempo el sitio web se diseñó con Sketch, por lo que es muy conocido entre los diseñadores profesionales.
Y, si eres un novato y buscas aprender, mira esto curso en línea.
# 2: Locura
Como se mencionó, Sketch está diseñado exclusivamente para MacOS. Afortunadamente, Icons8 se ha encargado de crear una alternativa para los usuarios de Windows. Y la mejor parte es que es completamente gratis.
Locura es una herramienta de edición de vectores basada en Windows que se ha inspirado mucho en Sketch. Es completamente funcional como software de edición de vectores individual, pero también es compatible con archivos Sketch.
Por lo tanto, si descarga algún proyecto creado con Sketch, podrá usarlo con Lunacy. Por último, pero no menos importante, Lunacy cuenta con el apoyo de la comunidad. Es decir, puede solicitar y votar las características que han enviado otros.
Todo en nombre de facilitar y simplificar el proceso de diseño de sitios web.
# 3: Figma
La última gran herramienta de diseño web es Figma. Da la casualidad de que Figma también es un competidor cercano con Sketch. Y es de uso totalmente gratuito. Está diseñado para el navegador, pero también tiene una aplicación de escritorio disponible.
Dado que es gratis y tiene un gran conjunto de funciones, Figma también es una aplicación que yo mismo uso con más frecuencia. La interfaz de usuario se siente natural, sin gastos generales. Todos los botones y funciones están hechos para que puedas crear diseños personalizados sin problemas.
Como nota al margen, también me gusta usar Figma para cualquier tipo de trabajo vectorial general. Ya sea creando citas, nuevos estilos de botones y casi cualquier otra cosa.
Web 3.0 Design Inspiration: Learn from the best
No es necesario inscribirse en un Curso UX para aprender grandes principios de diseño. Todo lo que necesita es acceder a unos pocos sitios de inspiración selectos y comprenderá rápidamente qué es lo que está de moda.
La siguiente sección está dedicada a ayudarlo a encontrar la mejor inspiración de diseño para los próximos proyectos Web 3.0 que tenga.
El uso de sitios que enumeran diseños profesionales puede ayudarlo a tomar mejores decisiones de diseño en el futuro.
# 1: lapa ninja
Ninja lapa tiene que ser uno de mis sitios web de inspiración favoritos para usar. Me encanta en términos del tipo de sitios web que enumera y también cómo se mantiene al día con las últimas novedades en diseño web.
Y, francamente, no hay otro sitio web que lo haga de la misma manera. Además de eso, ya tiene más de 2000 listados en su base de datos. Por lo tanto, no necesariamente tiene que esperar a que se agreguen nuevos diseños. Y una de las otras cosas que realmente me gustan de esta plataforma específica es que puedes navegar por un sitio web o sitios web individuales y sus diseños por categoría.
Y no se trata solo de lo que sabe, blog o negocio, sino que en realidad puede elegir entre categorías específicas como cartera, salud y diferentes tipos de industrias. De modo que realmente puede limitar su búsqueda.
Además de eso, es muy fácil de navegar e incluye la mayor parte de lo que hemos estado hablando en este artículo específico.
Mirando listados individuales, es muy fácil ver los cambios que estamos viendo en el diseño web en este momento.
Por lo tanto, es un recurso invaluable para visitar de vez en cuando o visitarlo cada vez que esté atrapado en un diseño o esté planeando diseñar algo nuevo.
# 2: Amor de una página
Un sitio web de una página es esencialmente un sitio web sin páginas adicionales. Algunos lo llaman páginas de destino, pero la mayoría de la gente lo llama sitios web de una página. Son mucho más comunes de lo que crees. Y OnePageLove es probablemente el mejor sitio para hacer una exposición adecuada para dichos sitios.
De manera similar a Lapa Ninja, puede limitar su búsqueda a categorías específicas. Cada listado incluye una captura de pantalla de página completa y algunos detalles sobre el autor.
Aparte de eso, puede navegar a su gusto y visitar cualquier sitio web que capte su atención. No puedo recordar cuántas veces me he inspirado en los sitios enumerados por Amor de una página. ¡Es tan bueno!
# 3: Awwwards
Por último, pero no menos importante, tenemos Awwwards. Posiblemente el sitio de inspiración de sitios web en ejecución más antiguo del mundo. Y, sin embargo, logra mantener la coherencia año tras año.
La idea detrás de Awwwards es que las personas envíen diseños de sitios web y los miembros voten por sus favoritos. Posteriormente, el comité Awwwards hace un voto individual y decide sobre unos pocos ganadores seleccionados para un período de tiempo específico.
Al convertirse en un ganador, puede agregar una insignia especial a su sitio web que resalta su excelencia en la comprensión del diseño.
Y en lo que respecta a la inspiración, muchos de los diseños enumerados en este sitio son extremadamente exclusivos. Es un patio de recreo para diseñadores verdaderamente creativos y ambiciosos.
Vale la pena marcarlo como favorito y revisarlo una vez a la semana.
Conclusión: hacia dónde ir desde aquí
El diseño web es una industria competitiva. Y no porque la gente quiera hacer mejores sitios web que otros. Es más competitivo en términos de UI y UX.
Descubrir una nueva forma de captar la atención de la gente puede significar mejores resultados de ventas. Además, al proporcionar una experiencia de usuario sólida, encontrará que las personas regresan a su sitio web con más frecuencia.
Desde 2018 ha habido una enorme afluencia de diseños que favorecen el aspecto visual del diseño. Y como tal, espere ver muchos más cambios y adiciones en esta área.
