Siempre hay un momento al principio de un proyecto de diseño de sitio web en el que piensa: ¿por dónde empiezo? Combatirás el deseo de crear algo totalmente diferente y nuevo frente a algo probado y confiable.
De manera realista, hay algunos diseños que nunca pasan de moda. Estos patrones son generalmente aceptados por los usuarios, fáciles de entender y proporcionan un marco sólido para casi cualquier tipo de diseño y contenido. Aquí, vamos a ver estos cinco? Atemporales? Diseños de sitios web y cómo aprovecharlos al máximo para su próximo proyecto.
1. Imagen de héroe apilada en cuadrícula simple
No importa el tamaño de la pantalla, este formato le da al usuario algo que ver, desplazarse y digerir. Si bien las especificaciones reales para esta forma pueden cambiar según el tipo de dispositivo o si prefiere una imagen de ancho completo o poco profunda, el boceto es aproximadamente el mismo.
- Navegación
- Imagen de héroe con superposición de texto.
- 2 a 4 columnas con pequeños elementos de información con o sin iconos
- Área del cuerpo principal
- Pie de página
El diseño es limpio, proporciona una fuerte presencia visual y tiende a funcionar bien con marcos sensibles, independientemente del punto de interrupción. Algunas aplicaciones alternativas de este formato son cambiar un encabezado de héroe estático por un control deslizante o encabezado de video.
Por qué funciona: Cada elemento tiene un lugar y hay un flujo lógico para seguir el contenido. La imagen principal es la primera impresión que debe atraer a los usuarios al diseño y los elementos secundarios deben hacer que los usuarios quieran hacer clic alrededor.
Incorporar una tendencia: Agregue iconos o cuadros de colores brillantes a los elementos informativos basados en columnas, o use un estilo plano para los elementos de la interfaz de usuario en todo el diseño.
2. Una página, una columna
Los diseños de una página son una de las mejores soluciones para sitios web con un contenido mínimo y un solo foco o mensaje. Cuando el mensaje es simple, tampoco es necesario volverse loco con la forma del diseño. Un diseño de una columna puede ser la solución perfecta.
- Navegación
- Área del cuerpo principal con imágenes y texto.
- Pie de página
Cuando se utiliza este patrón de diseño, el espacio es un elemento de diseño vital. Asegúrese de que los elementos tengan suficiente espacio entre ellos y considere la posibilidad de utilizar espacios exagerados en los bordes exteriores del diseño. El riesgo con un sitio web de una página es que puede sentirse abarrotado o desorganizado si el espacio está fuera de control.
Por qué funciona: La fórmula de una página es la más adecuada para sitios web pequeños. Puede hacer que la falta de contenido en una página de introducción o en una cartera simple se sienta más importante de lo que es. El formato también funciona bien para blogs simples o planes de contenido que se adhieren a un formato único.
Incorporar una tendencia: Agregue el desplazamiento de paralaje para que la página se sienta más atractiva a medida que los usuarios se desplazan. Estos efectos simples pueden hacer que un diseño simple de una página se sienta más profundo y robusto (y como si tuviera múltiples páginas con cada movimiento del mouse).
3. Cuadrícula definida
Las filas y columnas de contenido cuidadosamente apiladas nunca pasan de moda. Ya sea que la cuadrícula esté construida con un montón de piezas pequeñas o solo una disposición de cuatro por cuatro, una cuadrícula limpia le dice a su usuario algo sobre usted desde el principio. Este contenido está organizado, gestionado bien y ordenado para usted.
Las cuadrículas son increíblemente populares entre los diseñadores para sus propios sitios web de cartera. Lo bueno de una cuadrícula de imágenes es que puede mostrar una gran cantidad de contenido visual sin tener que mirar como basura. Este efecto de galería puede ser bastante impactante.
Las cuadrículas también pueden venir en forma de cajas de colores o contenedores para organizar el texto. Las líneas de cuadrícula pueden ser visibles o invisibles. Hay muchas opciones para escoger. Solo recuerde tener especial cuidado con el ancho y la profundidad de las columnas y filas y el espacio entre cada una. Estos pequeños detalles pueden hacer o deshacer todo el diseño.
Por qué funciona: La organización que crea una grilla es difícil de superar. Una buena cuadrícula facilita que los usuarios encuentren e interactúen con el contenido mientras crean armonía visual.
Incorporar una tendencia: Use bits simples de animación para una cuadrícula en mosaico, de modo que al pasar el mouse por encima de un clic, Un bloque de cuadrícula para mostrar información adicional. ¿Quieres otra opción? Considere convertir la cuadrícula en una baraja de cartas, con un estilo de diseño de materiales.
4. El patrón F clásico
La investigación sobre la forma en que las personas miran los sitios web descubrió un flujo particular conocido como F-Pattern. El patrón de lectura mostró que los usuarios comienzan en la parte superior de un sitio web y leen de izquierda a derecha en la pantalla. Luego bajan y leen de nuevo. Finalmente, simplemente se deslizan hacia la parte inferior de la página en línea recta.
Diseñar contenido en este F-Pattern es una forma de ayudar a colocar el contenido que más importa en el lugar donde los usuarios buscan. Este concepto se traduce en un esquema de diseño común.
- Encabezado y navegación
- Amplia columna de la izquierda como el área de contenido principal.
- Columna delgada derecha (barra lateral) para enlaces e información relacionada que no se encuentra en la parte inferior de la página
- Pie de página
Por qué funciona: Las personas son criaturas de hábito, y este es un patrón probado que muestra la forma en que las personas piensan, miran y leen los sitios web. Es cómodo y común, lo que facilita que los usuarios entiendan e interactúen con ellos.
Incorporar una tendencia: Gire la ubicación de la barra lateral o gire la barra lateral al área de navegación, o use una imagen de héroe sobre el patrón en forma de F.
5. Capas mínimas
Hay algo sobre un gran diseño minimalista. El espacio abierto permite al usuario sentirse cómodo con un enfoque dirigido. Luego está la yuxtaposición de capas en ese espacio, que son más complejas y detalladas.
Es esa combinación de simple e interés lo que hace que este estilo de diseño sea viable y moldeable para varios tipos de proyectos. También es algo a lo que los usuarios están acostumbrados gracias al uso común de Apple en su sitio web.
Por qué funciona: Las capas pueden atraer la atención hacia la ubicación exacta donde más importa el diseño. Particularmente en concierto con un diseño general simple, este es el elemento que pide a los usuarios que tomen nota. La colocación de capas en un contorno mínimo es una excelente manera de mostrar o resaltar una parte particular del contenido o llamar a la acción.
Incorporar una tendencia: Use degradados sutiles o sombras para definir elementos en diferentes capas. Si bien estas técnicas de diseño pasaron de moda por un tiempo, crear una diferenciación casi inexistente está haciendo una reaparición importante, gracias al Diseño de materiales y un reenfoque en crear algo táctil en el espacio bidimensional.
Conclusión
Cuando tenga dudas con cualquier tipo de diseño, lo mejor que puede hacer es regresar a las raíces de la teoría del diseño. Utilice ideas y principios clásicos para guiar su toma de decisiones.
En la mayoría de los casos, esto resultará en algo limpio, fácil de leer y que sigue un estilo convencional. Una vez que haya completado el marco básico, puede agregar un elemento moderno para mantener el diseño como nuevo. El uso de esta filosofía de diseño lo ayudará a crear un sitio web que resistirá mejor la prueba del tiempo sin verse desfasado. (Ahora que lo está pensando, es probable que comience a notar cuántos sitios web utilizan uno de estos conceptos).