Tienes una idea.

O … tienes un proyecto. Un portafolio. Algo genial.

Quieres que la gente lo vea, por lo que Internet es el lugar obvio para iniciarlo. Pero antes de que pueda ser publicado, quiere que sea tan bueno como puede ser. Tiene que ser profesional, y atractivo, y limpio.

Entonces … ¿Que es lo primero en lo que tiene que trabajar?

Contenido

El diseño existe por una razón: para que el contenido que se aplica se vea bien. Y esto puede parecer una declaración obvia, pero como el contenido es la atracción principal de un sitio web, no debe ser lanzado en el último minuto sin prestar atención a ella.

(Internet es un noventa por ciento compuesto de contenido escrito. Hacer que tu lectura sea de valor será un gran activo.)

Así que, tiene sus palabras impresionantes, todo pulido y brillante. Crea un archivo style.css vacío. ¿Ahora que?

Interfaz y centro

No quieres largas líneas de texto. Son un dolor para analizar, y a veces difícil de leer. Al establecer un límite de caracteres por línea, mejorará en gran medida el atractivo -y la capacidad de su audiencia para leer- un muro de texto.

body {

  margin: 0 auto;

  max-width: 50em;

}

Ahora has diseñado los bloques de texto. ¿Que sigue ahora?

 

Fuente

Normalmente, las fuentes del navegador usan como predeterminado “Times”. Esto no siempre se ve mejor, porque es una fuente sin tiras. ¡Pero! Es bastante fácil cambiar a algo que te guste más. Cambiar a un sans-serif, como Helvetica o Arial puede hacer que las cosas se vean mucho mejor.

body {

  font-family: “Helvetica”, “Arial”, sans-serif;

}

De acuerdo, así que esto hace que el texto se vea mucho mejor, pero también podemos hacer que sea más fácil de leer.

 

Necesitamos espacio

Cada vez que una página se ve mal, es a menudo el espaciado. Si coloca espacio alrededor de su contenido, y también dentro de él, da todo ese espacio para respirar y es mucho más fácil de observar para el ojo.

body {

  line-height: 1.5;

  padding: 4em 1em;

}

h2 {

  margin-top: 1em;

  padding-top: 1em;

}

De acuerdo, bien. Estamos mejorando. Vamos a añadir algo de sutileza.

 

Color / Contraste

¿Sabes qué más no es fácil para el ojo? Texto negro sobre un fondo blanco. No todo el tiempo, de todos modos. Podemos suavizar el negro para el texto principal, porque será mucho más cómodo de leer.

body {

  color: #555;

}

Y porque necesitamos contraste para resaltar palabras que son importantes:

h1,

h2,

strong {

  color: #333;

}

Esto es mucho más bonito y facil de ver.

 

Color Primario

La mayoría de las marcas tendrán un color primario. Actúa como un punto culminante visual, y dibuja el producto de la marca en la mente cuando usted lo ve. En un sitio web, esto se puede utilizar para llamar la atención sobre los lugares que desea que sus consumidores hagan clic, como los enlaces.

a {

  color: #e81c4f;

}

 

Color Secundario

No desea que los colores primarios y secundarios se opongan o se cancelen mutuamente cierto. Es mejor tener el primario como el destacado, y el uso de colores secundarios para complementarlo. Los colores secundarios son buenos para el uso en los bordes, y en el fondo, o quizás en el texto.

body {

  color: #566b78;

}

 code,

pre {

  background: #f5f7f9;

  border-bottom: 1px solid #d8dee9;

  color: #a7adba;

} 

pre {

  border-left: 2px solid #69c;

}

 

Fuentes Personalizadas

¿Recuerda lo que dijimos en la parte superior, sobre cómo el texto es el contenido principal de una página? Bueno, si usas una fuente especial, personalizada, entonces las palabras se destacarán aún más. Puede integrar su propia webfont en un sitio o utilizar un servicio en línea. (Typekit es bueno.) Por ahora, usaremos ‘Roboto’ del servicio Google Fonts (es gratis).

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

body {

  font-family: “Roboto”, “Helvetica”, “Arial”, sans-serif;

}

Imagenes

Los gráficos pueden estar allí como algo para mostrar o apoyar su contenido, o pueden ser una parte activa del mensaje o la estética que está intentando transmitir. Puede mejorar la cabecera como desee – las imágenes de fondo son agradables.

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;

}

Y un logo será un gran toque. Siempre es bueno para la marca. Logos.

header img {

  display: inline-block;

  height: 120px;

  vertical-align: top;

  width: 120px;

}

Y mientras estamos aqui, el estilo del texto podria ser limpiado un poco. Hagamoslo un poco mas brillante.

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 ahi esta! Un diseño decente en cuatro minutos. Todo utilizando los principios basicos del diseño web