Diseño web en 4 minutos

Digamos que tienes un producto, un catálogo, o simplemente una idea que deseas compartir con todos en tu propio sitio web. Antes de publicarlo en Internet, quieres que se vea atractivo, profesional, o al menos decente a la vista.

¿Qué es lo primero en lo que necesitas trabajar?

Contenido

El proposito del diseño es mejorar la presentación del contenido al que es aplicado. Puede parecer obvio, pero el contenido es el primer elemento de un sitio web, y no debería ser establecido en último lugar.

El contenido escrito, como el párrafo que estás leyendo ahora, representa más del 90% de la Web. Estilizando este contenido textual recorrerás un buen trecho.

Supongamos que ya has finalizado el contenido que quieres publicar y acabas de crear un archivo style.css vacío, ¿Cuál es la primera regla que puedes escribir?

Centrado

Las largas líneas de texto pueden ser difíciles de analizar y, por lo tanto, difíciles de leer. Establecer un límite de caracteres por línea mejora mucho la legibilidad y el atractivo de un bloque de texto.

body {
  margin: 0 auto;
  max-width: 50em;
}

Después de diseñar los bloques de texto, ¿qué hay del estilo del texto en sí mismo?

Familia tipográfica

El tipo de letra predeterminado del navegador es "Times", que puede parecer poco atractivo (sobre todo porque es la fuente "unstyled"). Cambiar a una fuente sans-serif como "Helvetica" o "Arial" puede mejorar enormemente el aspecto de tu página.

body {
  font-family: "Helvetica", "Arial", sans-serif;
}

Si quieres quedarte con una fuente serif, prueba "Georgia".

Aunque esto hace el texto más atractivo, hagamos que sea más legible.

Espaciado

Cuando una página le parece "estropeada" a un usuario, esto se debe frecuentemente a un problema de espaciado. Proporcionar espacio tanto alrededor como dentro de tu contenido puede aumentar el atractivo de tu página.

body {
  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

Aunque el diseño ha mejorado mucho hasta ahora, vamos a aplicar cambios más sutiles.

Color y contraste

El texto negro sobre un fondo blanco puede ser molesto a la vista. Optar por un tono más suave de negro para el cuerpo de texto hace que la página sea más cómoda de leer.

body {
  color: #555;
}

Y con objeto de obtener un nivel de contraste apropiado, vamos a escoger un tono más oscuro para las palabras importantes.

h1,
h2,
strong {
  color: #333;
}

Aunque la mayoría de la página ha mejorado visualmente, algunos elementos (como los fragmentos de código) todavía parecen fuera de lugar.

Equilibrio

Solo se necesitan algunos toques adicionales para corregir el equilibrio de la página:

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

En este punto, es posible que desees hacer que tu página destaque y darle identidad.

Color primario

La mayoría de las marcas tienen un color primario que actúa como un acento visual. En un sitio web, este acento puede usarse para dar énfasis a elementos interactivos, como los enlaces.

a {
  color: #e81c4f;
}

Pero para mantener el equilibrio, necesitaremos algunos colores adicionales.

Colores secundarios

El color acentuado puede ser complementado con tonos más sutiles, para ser utilizados en bordes, fondos, o incluso el cuerpo del texto.

body {
  color: #566b78;
}

code,
pre {
  background: #f5f7f9;
  border-bottom: 1px solid #d8dee9;
  color: #a7adba;
}

pre {
  border-left: 2px solid #69c;
}

Habiendo cambiado los tonos, ¿por qué no cambiar las formas...?

Fuente personalizada

Dado que el texto es el contenido principal de una página web, el uso de una fuente personalizada da a la página una identidad aún más notable.

Aunque puedes añadir tu propia webfont o utilizar un servicio en línea como Typekit, vamos a utilizar "Roboto" del servicio gratuito de Google Fonts:

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

Después de mejorar tu identidad a través del texto, ¿qué te parece si agregas mil palabras...?

Los gráficos y los iconos se pueden utilizar como accesorios para confirmar el contenido, o activamente siendo parte del mensaje que deseas transmitir.

Vamos a mejorar nuestro encabezado con una bonita imagen de fondo de Unsplash.

header {
  background-color: #263d36;
  background-image: url("header.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.2;
  padding: 10vw 2em;
  text-align: center;
}

También vamos a añadir un logotipo.

header img {
  display: inline-block;
  height: 120px;
  vertical-align: top;
  width: 120px;
}

Aprovechemos esta oportunidad para mejorar los estilos de texto.

header h1 {
  color: white;
  font-size: 2.5em;
  font-weight: 300;
}

header a {
  border: 1px solid #e81c4f;
  border-radius: 290486px;
  color: white;
  font-size: 0.6em;
  letter-spacing: 0.2em;
  padding: 1em 2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: none 200ms ease-out;
  transition-property: color, background;
}

header a:hover {
  background:  #e81c4f;
  color: white;
}

Y voilà!

Hemos diseñado una página decente en a penas unos minutos, siguiendo los principios básicos del diseño web. Sólo queda una última cosa que hacer...