Recientemente, en Design Shack presentamos un artículo titulado 10 ejemplos de diseño de sitios web de Rock Solid, que desglosó algunos diseños comunes en simples tramas de silueta para que pueda aplicarlos fácilmente en su trabajo.
Hoy he elegido tres de estos diseños y los he convertido en páginas web en vivo y con algunos HTML y CSS. Todos son súper simples y lo suficientemente fáciles para muchos principiantes, además de que usaremos un marco impresionante para hacer el trabajo pesado.
Skeleton: una plantilla para el diseño web sensible
En otro artículo más reciente, repasé cómo utilizar el Marco de esqueleto para crear páginas web que sean "responsivas", lo que significa que responden bien a casi cualquier ventana del navegador. Las páginas web receptivas se ven geniales en los monitores de pantallas planas grandes, las pantallas diminutas de teléfonos inteligentes y todo lo que se encuentra en el medio.
Desde que disfruté usarlo, usaremos Skeleton una vez más hoy para convertir estos diseños simples en páginas web totalmente sensibles. Será tan fácil que podamos cubrir tres en una sola publicación, ¡comencemos!
Si lo sigues, ¡asegúrate de descargar el Skeleton Boilerplate primero!
Tres cajas
La primera es una forma increíblemente sencilla pero efectiva de convertir las imágenes en el verdadero héroe de tu página de inicio. La mayoría de la página está ocupada por tres fotos grandes que pueden ser imágenes estáticas o presentaciones dinámicas.
El HTML
La imagen de arriba tiene cinco elementos obvios que necesitaremos crear: el logotipo (arriba a la izquierda), la navegación (arriba a la derecha), la imagen grande y dos imágenes más pequeñas. Lo primero que debemos hacer es crear un div para cada uno y decidir algunos anchos.
El Skeleton Boilerplate usa un sistema de dieciséis columnas para dividir el área en dos secciones, ¿usamos las clases? ¿Ocho? y? columnas? Del mismo modo, si queremos que el contenido se extienda hasta el final solo usamos? Dieciséis? en lugar.
Ahora tenemos que poblar nuestros divs con contenido. Solo usaremos texto para el área del logotipo y lanzaremos en una lista desordenada para la navegación que podemos hacer flotar a la izquierda para forzar a los elementos en un diseño horizontal. Finalmente, para los demás solo necesitamos algunas imágenes de marcador de posición.
Como puede ver, aquí hay una bola curva en forma de un envoltorio adicional, esto nos permitirá poner esa barra oscura detrás del contenido en la parte superior de la página. Después de eso, todo es agradable y simple y solo necesitamos dos divs de ancho completo.
El contenido aquí es todo lo que hemos visto antes, una etiqueta de encabezado para el logotipo, ul para la navegación, un par de etiquetas de párrafo y una imagen. ¡Eso es todo lo que se necesita, un poco de estilo y estaremos terminando esta publicación!