4 minutos para aprender el estilo de página [traducción]

Digamos que usted desea compartir un producto en su sitio, o una cartera, o simplemente una inspiración. Antes de publicar en la web, que quiere que se vea atractivo, profesional, o por lo menos tiene que parecer otra cosa.

Así que ahora qué?

texto

El objetivo es mejorar el diseño de las formas de contenido al que se aplica. Parece ser obvio, pero el contenido es el elemento principal de un sitio web, no se debe esperar ser ajustado después de la liberación.
Contenido de la escritura, tal como lo está leyendo el artículo, representan más del 90% de la página web. Añadir a este estilo de texto tendrá un largo camino por recorrer.
Supongamos que usted ha hecho lo que desea publicar, y ha creado un vacío style.cssde archivos, lo que es la primera regla que se puede escribir?

centro

Los textos largos difíciles de resolver, y por lo tanto difícil de leer. Establecer el carácter por la línea límite, puede mejorar en gran medida la legibilidad y el atractivo de grandes cantidades de texto.

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

Después de agregar un estilo a un contenedor de texto, añadir el estilo de estos días es el texto mismo?

Fuentes

fuente por defecto del navegador Times, puede parecer poco atractivo (sobre todo porque es la fuente "sin estilo"). El cambio a un tipo de letra serif sans, por ejemplo Helvetica, o Arialpuede mejorar en gran medida la legibilidad de sus páginas web.

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

Si usted insiste en el uso de trazo de pie, se puede tratar Georgia.
Cuando hacemos el texto más atractivo, pero también es necesario para que sea más legible.

intervalo

Cuando los usuarios a encontrar una página 崩坏de tiempo, por lo general para ambos 间距problemas. Al proveer el espacio apropiado en el texto que lo rodea y el texto puede aumentar el atractivo de la página.

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

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

Aunque por el momento el diseño se ha mejorado mucho, pero vamos a añadir algunos detalles del acuerdo.

Color y contraste

El texto negro sobre un fondo blanco aspecto más llamativo. La selección de texto es un poco más suave que negro, hacer la página más fácil de leer cómodamente.

body {
  color: #555;
}

Con el fin de mantener una buena 对比度, vamos a 重要elegir un texto más oscuro sombra.

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

Aunque la mayoría de las páginas de la visión ha mejorado, pero algunos elementos todavía parecían fuera de lugar, como el segmento de código.

equilibrio

Sólo necesita algunos ajustes adicionales para equilibrar la página:

code,
pre {
  background: #eee;
}

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

pre {
  padding: 1em;
}

En este punto, es posible que desee que su página se destacan, para hacerlo más personal.

Los colores principales

La mayoría tienen una marca 主色调, como un tono visual. En una página Web, los principales colores se pueden utilizar para enfatizar los elementos interactivos, tales como 链接.

a {
  color: #e81c4f;
}

Sin embargo, con el fin de mantener el equilibrio / coordinación, también necesitamos un poco de color adicional.

color secundario

Los colores principales se pueden utilizar para complementar las más sutiles tonos de bordes, fondos, y el cuerpo aún.

body {
  color: #566b78;
}

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

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

El tono ha cambiado, ¿por qué no cambia la forma en conjunto / font ...

Fuentes personalizadas

Dado que el texto es el contenido principal de la página, su uso 自定义字体puede hacer que la página sea más convincente.
Cuando se puede integrar su propia página o utilice fuentes similares Typekit servicio en línea, que nos permitieron usar la libre Google FuenteRoboto :

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

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

Tras poner de relieve su personalidad mediante la personalización de fuentes, que desea que las páginas más coloridos y cómo lo hace?

Imágenes e iconos se pueden utilizar como decoración para apoyar a su contenido, también puede jugar un papel activo en la información que desea transmitir.

Deje Unsplash recoger una imagen de fondo agradable para embellecer header.

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;
}

añadirlogo

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

Tomemos esta oportunidad para mejorar el estilo 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;
}

Mira!

De acuerdo con los principios básicos de diseño web, diseñamos una página decente en cuestión de minutos. Sólo la última cosa que ...

Compartir el amor!

GitHub enlace de descarga

Facebook Compartir enlaces

Twitter compartir enlaces

Si desea obtener más información a través del diseño web, ver MarkSheet , mi libre HTML y CSS directrices.
O puede que desee para iniciar de inmediato tratando diseño web, trate de Bulma , esta es mi marco basado en CSS de Flexbox.

Resumen - Diseño Web en 4 minutos

Este artículo describe los principios básicos del diseño y el proceso de diseño de páginas web, paso a paso el proceso de descomposición, por lo que las personas que acaban de empezar con el diseño web, también se pueden encontrar rápidamente la sensación, espero que este artículo va a saber qué hacer en su nueva para diseñar páginas web cuando, para darle un poco de ayuda.

Gracias por leer!

En este artículo se tradujo 2016 "Diseño Web en 4 minutos" - Jeremy Thomas , la primera traducción del texto original, al mismo tiempo hay comprensión de los cambios que se limita, agradece los comentarios.
Este artículo se reproduce a partir de: pública para traducir
Traductor: Shery
enlace: http://www.zcfy.cc/article/1237
original: http://jgthms.com/web-design-in-4-minutes/?utm_source=tuicool&utm_medium = # cuota de referencia