Web Design in 4 minutes

Digamos que tienes un producto, un portafolio, o simplemente una idea que quieres compartir con todo el mundo en tu propia web. Antes de publicarlo en Internet, quieres que se vea atractivo, profesional, o al menos decente.

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

Contenido

El propósito del diseño es mejorar la presentación del contenido al que se le aplica. Puede sonar obvio, pero el contenido es el elemento base de una web, no debería establecerse a posteriori.

El contenido escrito, como el párrafo que estás leyendo ahora, constituye el 90% de la Web. Darle estilo a este contenido de texto vale de mucho.

Asumamos 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 líneas largas pueden ser difíciles de digerir, y por lo tanto de leer. Establecer un límite de caracteres por línea mejora enormemente la legibilidad y la apariencia de una tira de texto.

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

Tras darle estilo a los bloques de texto, ¿qué tal si damos estilo al texto en sí?

Familia de fuente

El navegador establece por defecto la fuente a "Times", la cual puede no parecer muy vistosa (principalmente porque es una fuente "sin estilo"). Un cambio a una fuente sans-serif como "Helvetica" o "Arial" puede mejorar en gran medida la apariencia de tu página.

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

Si prefieres una fuente con serifa, prueba "Georgia".

Mientras esto hace el texto más vistoso, vamos a hacerlo más legible.

Espaciado

Cuando una página tiene apariencia de "rota" para un usuario, normalmente es dado a un problema de espaciado. Dar espacio tanto alrededor como entre tu contenido puede mejorar el aspecto de tu página.

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

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

Aunque el aspecto general ha mejorado mucho por ahora, vamos a aplicar cambios más sutiles.

Color y contraste

Texto negro en un fondo blanco puede ser un poco duro para los ojos. Decantarse por un tono más suave de negro para el texto del cuerpo hace que la página sea más cómoda de leer.

body {
  color: #555;
}

Y para mantener un nivel de contraste decente, vamos a darle un tono más oscuro a las palabras importantes

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

Mientras que la mayoría de la página ha mejorado visualmente, algunos elementos (como los pedazos de código) aún parecen fuera de lugar.

Balance

Solo son necesarios un par de toques para corregir el balance de la página:

code,
pre {
  background: #eee;
}

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

pre {
  padding: 1em;
}

Ahora quizá quieras hacer que tu página destaque dándole una identidad.

Color primario

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

a {
  color: #e81c4f;
}

Pero para mantener el balance, necesitaremos algunos colores adicionales.

Colores secundarios

El color de acento puede ser complementado con cambios más sutiles, para usarlos en bordes, fondos o incluso en el texto del cuerpo.

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...

Fuentes personalizadas

Ya que el texto es el principal contenido de una web, usar fuentes personalizadas le da a la página una identidad más perceptible.

Aunque puedes embeber tu propia fuente web o usar un servicio online como Typekit, vamos a usar "Roboto" del servicio gratuito Google Fonts:

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

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

Tras mejorar tu identidad a través del texto, qué tal si añadimos mil palabras...

Los gráficos e iconos pueden ser usados como ornamentos para complementar el contendio, o para tomar parte activa en el mensaje que quieres expresar.

Vamos a mejorar nuestra cabecera con una buena 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;
}

Vamos a añadir también un logo

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

Vamos a aprovechar para mejorar el estilo del 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 solo unos minutos, siguiendo principios básicos del diseño web. Solo queda una cosa por hacer...