El diseño puede ser una de las facetas más fáciles y una de las más complicadas del diseño web. A veces, un diseñador puede romper un diseño increíble en minutos y, a veces, ese mismo diseñador puede luchar la mayor parte del día con la misma tarea.
Cada proyecto es único y requiere una solución única, pero me ha resultado útil tener en cuenta algunas alineaciones sólidas e increíblemente versátiles que puedo eliminar cuando me atasco. Los diez diseños a continuación deben ser suficientes para superar los peores casos de bloqueo del diseñador cuando no puede descubrir la mejor manera de organizar el contenido en su página.
Manteniéndolo simple
El diseño de la página es partes iguales del arte y la ciencia. Crear algo que sea visualmente atractivo y único requiere la mirada de un artista. Sin embargo, hay varias pautas muy fáciles de seguir que puede utilizar para crear diseños sólidos que funcionan para cualquier número de casos. Estos principios incluyen elegir y seguir una alineación, estructurar adecuadamente sus espacios en blanco y resaltar elementos importantes a través del tamaño, posicionamiento, etc.
Los diseñadores a menudo se estresan demasiado sobre el proceso de diseño. Tenemos la tendencia de abordar un proyecto mientras pensamos que debe ser completamente único en todos los aspectos para que valga la pena nuestro tiempo y el dinero del cliente. Sin embargo, si echa un vistazo a la web, verá que este no es necesariamente el caso. Los sitios web de gran apariencia a menudo utilizan diseños que son bastante simples y no son en absoluto únicos. Es cierto que las páginas que más nos maravillaban los diseñadores a menudo provienen de los sitios peculiares que rompen el molde, pero su cliente promedio solo quiere algo útil, limpio y profesional.
En este artículo, veremos diez diseños muy comunes que puedes encontrar en innumerables sitios en la web. Observe que la forma en que se diseñan estos sitios, es decir, los colores, los gráficos y las fuentes, es única, pero la estructura básica de los sitios se basa en métodos probados y verdaderos para diseñar una página web. Enfatizaremos esto mostrándole primero una silueta simple del diseño para que pueda proyectar sus propios pensamientos y diseños en él, luego lo seguiremos con uno o dos ejemplos de sitios reales que usan el diseño.
Si es un diseñador web, marque esta página como favorito y regrese la próxima vez que se quede atascado en el diseño de una página. Tenga en cuenta que cada uno de los siguientes diseños representa una sugerencia básica para que los moldee y modifique. Le animo a que no los use como está, sino que les dé su propio giro en función de las necesidades de su proyecto.
Tres cajas
Este es probablemente el diseño más simple de la lista. De hecho, se sentirá tentado a pensar que es demasiado simple para satisfacer sus propias necesidades. Si este es el caso, se sorprenderá si realmente piensa en lo versátil que es realmente el arreglo.
El diseño de las tres cajas cuenta con un área gráfica principal seguida de dos cajas más pequeñas debajo. Cada uno de estos puede rellenarse con un gráfico, un bloque de texto o una mezcla de ambos. El cuadro principal en este diseño es a menudo un control deslizante jQuery, capaz de mostrar todo el contenido que desee.
Las formas silueteadas a lo largo de la parte superior son áreas que se pueden usar para logotipos, nombres de empresas, navegación, barras de búsqueda y cualquier otro contenido informativo y funcional que normalmente se encuentra en un sitio web.
Este diseño es ideal para una página de portafolio o cualquier cosa que necesite mostrar algunos gráficos de muestra. Cada una de las imágenes podría ser un enlace que conduce a una página de galería más grande y compleja. Más adelante en el artículo veremos cómo mezclar esta idea aún más.
En la naturaleza
A continuación vemos una hermosa implementación del diseño de tres cuadros en la cartera de Peter Verkuilen. Como se sugirió anteriormente, el gráfico principal gira y muestra una serie de proyectos recientes de Peter. Al hacer clic en una de las casillas, irá a la página dedicada de ese proyecto, donde podrá encontrar más información.
Sencillo, eficaz y atractivo. ¡Probablemente pueda sacar una página web completa en vivo con este diseño en menos de una hora!
Tomar una plantilla
Una forma rápida de comenzar con este tipo de diseño es con una plantilla HTML. Genius es una plantilla de negocios mínima y totalmente sensible para empresas, agencias, autónomos e individuos. Es muy fácil de personalizar y está bien documentado, y es fácil de organizar en cualquier tipo de cuadrícula que desee.
Capturas de pantalla 3D
A medida que los desarrolladores continúan creando una colección interminable de aplicaciones web, el diseño de las capturas de pantalla en 3D que se ve a continuación, o alguna variante, se está volviendo cada vez más popular. La idea básica es encabezar su página con un título y luego agregar algunas vistas previas estilizadas de su aplicación. Estos a menudo vienen con reflejos, sombras pesadas, grandes gráficos de fondo o incluso adornos complejos como enredaderas que se arrastran por todas las capturas de pantalla, pero la idea central siempre es realmente simple.
Otro lugar en el que veo que se usa mucho este truco es en temas preconstruidos. En estos casos, un diseñador está vendiendo un diseño de inventario y realmente necesita los gráficos de sus marcadores de posición para brillar, ¡y nada dice fresco y moderno como algunos efectos 3D de fantasía!
En la naturaleza
Pixelworkshop utiliza esta técnica, no como un tema de stock, sino para mostrar temas de stock. Aquí, las capturas de pantalla en 3D se intercambian en una presentación de diapositivas y aparecen en una serie de diferentes arreglos. Pase y eche un vistazo para ver las diversas formas en que el diseñador presenta las imágenes.
Cuadrícula avanzada
Muchos de los diseños que verá en este artículo se adhieren a una alineación de cuadrícula bastante estricta. Sin embargo, en su mayor parte, no sugieren simplemente una página llena de miniaturas uniformes. Por ejemplo, el siguiente diseño mezcla el tamaño de las imágenes para evitar la redundancia.
Al igual que con el ejemplo de las tres casillas, hay un gráfico principal en la página. A esto le sigue un simple giro en la idea de una cuadrícula uniforme de miniaturas.El espacio permitiría un espacio de cuatro cuadrados horizontalmente, pero en su lugar, hemos combinado las dos primeras áreas para que la mitad izquierda de la página difiera de la derecha.
Como mencionamos con el primer diseño, los bloques no tienen que ser imágenes. Por ejemplo, puedes imaginar esto como bloques de texto en el lado izquierdo que flanquea las imágenes cuadradas a la derecha.
En la naturaleza
En el magnífico ejemplo a continuación, este diseño se utiliza para un sitio web de ropa para niños. Observe que cerca de la parte inferior de la alineación, cambiaron las cosas aún más para que el lado izquierdo muestre una imagen de tamaño casi extraño seguido de un párrafo, ninguno de los cuales se alinea perfectamente con el contenido del lado derecho.
Nuevamente, una vez que tenga en mente su diseño básico, puede hacer cambios sutiles como este mientras mantiene la integridad de la estructura subyacente. Otro truco interesante que utilizaron fue dividir el gráfico principal en dos áreas. En realidad, se trata de un solo JPG, pero se ha dividido en dos imágenes para mostrar aún más contenido.
Tomar una plantilla
Una forma rápida de comenzar con este tipo de diseño es con una plantilla HTML. GoodFood es una plantilla que se adapta perfectamente a este tema: el ejemplo utilizado es para un sitio web de comidas y bebidas, ¡pero sería genial para cualquier tipo de tema de sitios web!
Gráfico destacado
A veces no tienes suficiente contenido para una página llena de imágenes. Entonces, ¿qué haces si quieres mostrar un ícono, una foto o incluso un símbolo como un símbolo comercial? El diseño a continuación es una solución súper fácil que es bastante popular y se lee muy bien debido a la falta de distracciones.
El resultado es una página en negrita, pero minimalista y limpia. La declaración que hace es fuerte e imposible de perder, ¡solo asegúrese de que su gráfico sea lo suficientemente bueno como para que se muestre de manera tan prominente!
En la naturaleza
¿Qué tan común es este diseño? ¡Mucho más de lo que piensas! Con el mínimo esfuerzo, inmediatamente pude encontrar dos sitios que usan alguna variante cercana de esta técnica. Tenga en cuenta que tiene opciones sobre cómo desea formatear el texto e incluso dónde desea colocar la navegación. El segundo sitio reorganiza bastante los elementos secundarios, pero se reconoce al instante como el mismo diseño básico.
Tomar una plantilla
Una forma rápida de comenzar con este tipo de diseño es con una plantilla HTML. Motive es una plantilla HTML minimalista de portafolio perfecta para agencias o sitios web personales. Esta plantilla presenta una sección completa de la cartera con el filtro y la página de detalles de la cartera. También se incluyen con la plantilla una página acerca de y secciones de blog que permiten que la plantilla se use para un blog en lugar de una cartera. Se incluye mucha personalización junto con documentación completa para ayudar.
Cinco cajas
El diseño de cinco cuadros es simplemente una evolución del diseño de tres cuadros. Se aplica la misma lógica, solo se ha modificado para contener aún más contenido. También podría ser fácilmente cuatro cajas, solo depende de lo que quieras mostrar. ¡También hace que parezca que pones un poco más de esfuerzo en el diseño!
Obviamente, a medida que se agrega al diseño, los elementos secundarios se vuelven cada vez más pequeños, por lo que, para la mayoría de los usos, es probable que cinco cuadros se acerquen al límite.
Al igual que con el diseño de tres casillas, este es tan versátil que puede usarse literalmente en casi cualquier tipo de sitio. Las ideas para cambiarlo incluyen agregar un gran gráfico de fondo, redondear las esquinas, agregar sombras y / o reflejos, o incluso agregar un elemento interactivo a las miniaturas más pequeñas. Fácilmente podría agregar botones que hacen que se desplacen horizontalmente.
En la naturaleza
Aquí nuevamente tenemos dos ejemplos de este diseño que se está utilizando de maneras ligeramente diferentes. Lo importante que hay que notar aquí es que, a pesar de tener diseños similares, estos dos sitios casi no podrían parecer más diferentes entre sí si lo intentaran. Uno utiliza un estilo de ilustración dibujado a mano, el otro fotografías y gradientes. El primero utiliza colores apagados y fuentes de script, los segundos colores brillantes y fuentes modernas.
Esto impulsa el argumento de que usar uno de los diseños de este artículo no matará su creatividad. Una vez que haya organizado el contenido, todavía hay mucho por hacer en el área de la estética. Esto es lo que realmente definirá la personalidad del sitio y con frecuencia hará o deshará una propuesta del cliente.
Tomar una plantilla
Una forma rápida de comenzar con este tipo de diseño es con una plantilla HTML. Phoebe es una plantilla limpia y mínima de Blogger con muchas funciones, como un control deslizante de publicaciones destacadas y un área de promoción (ambas son opcionales). 4 estilos de página de inicio para elegir (control deslizante + área de promoción, solo control deslizante, solo área de promoción o diseño clásico).
Barra lateral fija
Hasta ahora, todos los sitios que hemos visto han tenido una navegación horizontal superior. La otra opción popular es, por supuesto, una navegación vertical, que se presta para crear una columna vertical fuerte en el lado izquierdo de la página. A menudo, este es un elemento fijo que permanece donde está mientras el resto de la página se desplaza. La razón de esto es que la navegación puede ser fácilmente accesible desde cualquier punto del sitio.
El resto del contenido puede tomarse prestado de uno de los otros diseños en esta lista. Tenga en cuenta que he modificado nuevamente el diseño de tres cuadros, esta vez en un arreglo de cuatro cuadros. Una vez que haya terminado de leer este artículo, vuelva a mirar todos los diseños y piense cómo puede mezclar y unir las ideas para crear nuevos diseños.
En la naturaleza
Al igual que en el ejemplo anterior, los dos sitios a continuación se ven muy diferentes, incluso desde un punto de vista de diseño. Sin embargo, si vuelve a mirar, notará que ambos usan una barra lateral vertical izquierda y el diseño de cuatro casillas.¡El segundo ejemplo simplemente ha movido los cuadros más pequeños a la parte superior de la página! Otra idea interesante que debe tener en cuenta al crear un sitio basado en estos ejemplos.
Tomar una plantilla
Una forma rápida de comenzar con este tipo de diseño es con una plantilla HTML. Pebbles es una plantilla de blogger de cartera única, centrada en el minimalismo, la elegancia y la simplicidad. Se crea en torno a un concepto modular y una increíble red de cartera de mampostería. Con una gran cantidad de características sorprendentes, esta plantilla ofrece la mejor solución para cualquier nicho.
Titular y Galería
Todo el mundo ama una buena página de la galería. Desde una perspectiva de diseño, ¿qué podría ser más simple? Todo lo que necesita es una cuadrícula de imágenes sólida y uniforme y espacio para un titular con un subtítulo opcional. La clave aquí es hacer que su titular sea grande y audaz. Siéntase libre de usar esto como un punto de creatividad e incluya un script o algún tipo de letra loco.
Este ejemplo utiliza rectángulos aplastados para reflejar el sitio real a continuación, pero esto puede y debe modificarse para que se ajuste a lo que sea que esté mostrando. El punto aquí es hacer que pienses fuera de la caja y que no uses un cuadrado por defecto, ¡quizás puedas usar rectángulos verticales o incluso círculos en tu propia galería!
En la naturaleza
El desarrollador a continuación utilizó este diseño para crear una galería de los logotipos para los clientes con los que ha trabajado. Tenga en cuenta que no está sugiriendo que haya creado los logotipos, sino que simplemente está mostrando su base de clientes de una manera muy visual. Esto demuestra que incluso si no eres un diseñador, una galería de miniaturas puede ser una excelente manera de mostrar una lista de elementos que de otra manera sería simple y aburrida.
Tomar una plantilla
Una forma rápida de comenzar con este tipo de diseño es con una plantilla HTML. Proton es un tema creativo de alta calidad con un estilo único y un código limpio. Proton se puede usar para muchos propósitos, desde carteras mínimas, agencias, profesionales independientes y mucho más. La plantilla se crea y se prueba en todos los dispositivos y funciona perfectamente sin un solo problema.
Foto destacada
El diseño a continuación es extremadamente común, especialmente entre la comunidad fotográfica. La idea básica aquí es tener una imagen grande que muestre su diseño o fotografía (cualquier cosa realmente), acompañada de una navegación vertical del lado izquierdo.
La navegación puede ser la más fuerte en una alineación a la izquierda, pero siéntase libre de experimentar con una alineación en el centro o incluso a la derecha para complementar el borde recto de la foto.
En la naturaleza
El sitio a continuación realmente aprovecha al máximo este diseño al convertir la imagen que se muestra en un control deslizante horizontal. Se muestra una imagen a la vez, pero puede ver la siguiente en el lado derecho de la página. Cuando pasas el cursor sobre esto, aparece una flecha que te permite deslizarte por las fotos.
Como alternativa, ¿por qué no intentar crear un sitio que utilice este mismo diseño pero con una galería de imágenes verticalmente deslizante? El espacio casi parece más adecuado para esto ya que no tendrá que incluir un área de corte incómoda para proteger la navegación.
Red eléctrica
La red eléctrica es el diseño más complejo de este artículo, pero es uno de los diseños más efectivos que he visto para las páginas que deben contener todo tipo de contenido relacionado. Desde imágenes y reproductores de música hasta texto y videos, puede incluir casi cualquier cosa en este diseño y se mantiene fuerte.
La clave se encuentra en la mitad inferior de la vista previa anterior. Observe que en realidad hay un contenedor grande que contiene una serie de rectángulos. Este contenedor le proporciona los límites para su espacio, y todo el contenido que coloque debe formatearse en una cuadrícula fuerte pero variada, no a diferencia del diseño de cuadrícula avanzado cerca del comienzo de este artículo.
En la naturaleza
Este puede ser realmente difícil de comprender hasta que vea algunos ejemplos en vivo. El primero es un escaparate de arte y cultura. Esa sola descripción nos dice que el contenido estará en todo el tablero, y de hecho vemos que la página está llena de feeds de Twitter, fotos, listas, imágenes y más.
Sin embargo, todo encaja perfectamente dentro de la cuadrícula que el diseñador ha establecido. Este diseño es fácilmente extensible, por lo que no importa cuánto lo arroje, el aspecto general debe ser bastante lógico y ordenado siempre que formatee y organice su contenido correctamente.
Este diseño anterior me recordó en gran medida un tutorial que escribí hace un tiempo sobre el diseño de un sitio web para una banda de rock. Aquí tenemos una página de aspecto muy diferente, pero una disposición de contenido casi idéntica, especialmente en la mitad inferior. El verdadero truco para sacar este diseño correctamente es comenzar con unas pocas cajas realmente grandes, que luego se dividen en áreas más pequeñas de contenido según sea necesario.
Si aún te sientes perdido, consulta el tutorial completo, que te guiará en cada paso del proceso.
Tomar una plantilla
Una forma rápida de comenzar con este tipo de diseño es con una plantilla HTML. PunicPress es una plantilla de HTML5 y CSS3 totalmente sensible que es realmente adecuada para la planificación para comenzar un sitio web de noticias o una revista en línea.
Foto de pantalla completa
El diseño final en la lista es otro que es ideal para fotógrafos, pero funcionará en cualquier sitio con un gráfico de fondo grande y atractivo para mostrar y una cantidad limitada de contenido.
Puede ser muy difícil leer el contenido cuando se coloca sobre una imagen de fondo, por lo que la idea básica aquí es crear una barra horizontal opaca (o casi opaca) que se ubique en la parte superior de la imagen y sirva como contenedor para enlaces, copiar , logos y otros contenidos.
En lugar de usar la barra como un área de contenido realmente amplia, intente dividirla en algunas secciones diferentes. Esto se puede hacer variando el color de fondo, agregando algunas líneas verticales sutiles como divisores o incluso rompiendo la caja grande en cajas desconectadas más pequeñas como lo he hecho anteriormente.
En la naturaleza
Este diseño puede parecer increíblemente restrictivo, pero a continuación podemos echar un vistazo a lo que puede contener. Este sitio de fotografía llena la barra con la navegación, ¿y? ¡Bloque de texto, algunas fotos recientes con descripciones y un gran logotipo! No está mal para un espacio tan pequeño, y esto lo logra de una manera muy limpia y ordenada.
Tomar una plantilla
Una forma rápida de comenzar con este tipo de diseño es con una plantilla HTML. Esta plantilla de una página es excelente para portales o sitios web basados en fotografías. Las secciones incluidas en la plantilla incluyen sobre nosotros, los servicios ofrecidos, el trabajo más reciente, los testimonios, un formulario de contacto de jax, un solo portafolio, diferentes estilos de páginas de noticias y mucho más.
Conclusión
Hubo algunos puntos clave mencionados anteriormente que deseo reiterar al cierre. En primer lugar, a pesar de que el diseño de la página definitivamente no es necesariamente un tamaño para todos? En la práctica, existe una ciencia que se puede aplicar rápida y fácilmente en un número increíblemente amplio de circunstancias.
A continuación, las ideas de diseño presentadas anteriormente no deben dar como resultado sitios web de corte de galletas que tengan el mismo aspecto, sino que simplemente le brinden un lienzo básico en el que construir un diseño acabado notablemente único.
Finalmente, la clave para implementar con éxito estas ideas es recordar que no están escritas en piedra. ¡Cada uno debe cambiarse para adaptarse a su proyecto específico e incluso se puede mezclar y combinar para crear nuevas ideas!
Deje un comentario a continuación y háganos saber lo que piensa de los diseños anteriores. ¿Hay alguna no mencionada anteriormente a la que por defecto está teniendo problemas? Deja un enlace a un ejemplo.