Web Design in 4 minutes

Supongamos que tienes un producto, un portfolio, o simplemente una idea que quieres compartir con cualquiera en tu propio sitio web. Antes de publicarlo en internet, quieres hacerlo atractivo, profesional, o al menos algo decente a lo que mirar.

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

Contenido

El propósito del diseño es mejorar la presentación del contenido al cual se aplica. Puede sonar obvio, pero siendo el contenido el elemento primordial en una página web, no debe pensarse en el último momento.

El contenido escrito, como el párrafo que estás leyendo ahora mismo, es en sí mismo más del 90% de la Web. Estilizar este contenido nos llevará un largo camino.

Asumamos que ya has finalizado el contenido que quieres publicar y has creado un archivo vacio style.css, ¿cuál es la primera regla que puedes escribir?

Centrado

Lineas largas 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 en gran medida la legibilidad y el atractivo de un muro de texto.

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

Tras estilizar los bloques de texto, ¿qué tal si estilizamos el propio texto?

Font family (Familia tipográfica)

La fuente por defecto del buscador es "Times", que puede parecer poco atractivo (sobre todo porque es la fuente "sin estilo"). Cambiando a una fuente sans-serif como "Helvetica" o "Arial" podemos mejorar enormemente la apariencia de la página.

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

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

Mientras que esto hace que el texto sea más atractivo, hagámoslo también más legible.

Espaciado

Cuando una página se muestra "rota" a un usuario, normalmente es un problema de espaciado. Proporcionar un espacio tanto alrededor como dentro del contenido puede aumentar el atractivo de la página.

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

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

Mientras que la disposición ha mejorado en gran medida hasta el momento, apliquemos ahora cambios más sutiles.

Color y contraste

El texto negro sobre un fondo blanco puede ser muy duro en los ojos. Optar por un tono más suave del negro para el texto del cuerpo hace que la página sea más confortable para leer.

body {
  color: #555;
}

Y con el fin de mantener un buen nivel de contraste, vamos a elegir un tono más oscuro para palabras importantes

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

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

Balance

Sólo toma unos toques adicionales para corregir el balance 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 quieras hacer que tu página destaque y darle una identidad.

Colores primarios

La mayoría de las marcas tiene un color primario que actúa como acento visual. En una página web, este acento se puede utilizar para proporcionar énfasis en elementos interactivos, como enlaces.

a {
  color: #e81c4f;
}

Pero para mantener el balance, necesitaremos unos colores secundarios.

Colores secundarios

El color acentuado puede ser complementado con más sombras sutiles, para ser usadas 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;
}

Una vez cambiadas las sombras, ¿por qué no cambiar las formas...?

Fuente personalizada

Dado que el texto es el contenido principal de una página web, usar una fuente personalizada da la página incluso una identidad más notable.

Si bien se puede incrustar su propia fuente web o utilizar un servicio en línea como Typekit, vamos a usar "Roboto" desde el 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 la mejora de la identidad a través del texto, ¿y si le añadimos mil palabras...?

Los gráficos y los iconos se pueden utilizar ya sea como adornos para apoyar a su contenido, o tomar parte activa en el mensaje que quiere transmitir.

Mejoremos nuestra cabecera con una bonita imagen de fondo de Unsplash

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

Sumemos también un logo

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

Tomemos 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 web decente en tan sólo unos minutos, siguiendo los principios básicos de diseño web. Hay sólo una, una última cosa que falta por hacer...