¿Cuál será la apariencia de tu sitio Web?

« Anterior Siguiente »

¿Cuál será la apariencia de tu sitio web? trata sobre el trabajo de diseño y planificación que debes hacer antes de escribir el código, incluyendo "¿Qué información ofrece mi sitio web?" "¿Qué fuentes y colores quiero?" "¿Qué hace mi sitio?".

Lo primero es lo primero: planificar

Antes de hacer nada, necesitas algunas ideas. ¿Qué debe hacer tu sitio web realmente? Una web puede hacer básicamente cualquier cosa, pero para tu primer intento deberías mantener las cosas simples . Empezaremos creando una página web simple con un título, una imagen y unos pocos párrafos.

Para empezar, tendrás que responder a estas preguntas:

¿De qué tratará tu sitio web? ¿Te gustan los perros, Tu ciudad o los videojuegos?
¿Qué información presentarás sobre ese tema? Escribe un título, algunos párrafos y piensa en una imagen que quieras mostrar en tu página.
¿Cuál es la apariencia de tu sitio web?, en términos simples. ¿Cuál es el color de fondo? ¿Qué tipo de fuente es apropiada: formal, caricaturesca, gruesa y chillona, sutil?

Nota: Los proyectos complejos necesitan directrices detalladas que intervienen en todos los detalles de los colores, fuentes, espaciado entre elementos de una página, estilo de escritura apropiada, y así. Esto a veces se llama guía de diseño o manual de identidad corporativa, y puedes ver un ejemplo en Firefox OS Guidelines.

Esbozar tu diseño

A continuación, consigue papel y lapiz y esboza más o menos cómo quieres que parezca tu sitio. Para tu primera página web simple, no hay mucho que esbozar, pero debes crear el hábito de hacer esto siempre. Es realmente útil ¡y además no tienes que ser un Velázquez!

Nota: Incluso en sitios web reales y más complejos, los equipos de diseño generalmente siempre comienzan creando bocetos en papel, y luego maquetas digitales usando un editor de gráficos o tecnologías web.

Los equipos Web a menudo incluyen tanto un diseñador gráfico como a un diseñador UX (especialista en experiencia de usuario). Los diseñadores gráficos, obviamente, ponen juntos los elementos visuales de la web. Los diseñadores UX tienen un papel algo más abstracto: abordar cómo los usuarios podrán experimentar e interactuar con el sitio web.

Eligiendo tus recursos

En este punto, es bueno comenzar a reunir todo el contenido que eventualmente aparecerá en tu página web.

Texto

Deberías tener todavía tus párrafos y título de antes. Tenlos a mano.

Color

Para escoger un color, ve al Selector de Color y selecciona el color que te guste. Al pulsar en un color, verás un extraño código de seis caracteres como #660066. Eso se llama código hex(adecimal), y representa tu color. Copia el código en un lugar seguro, de momento.

Imágenes

Para escoger una imagen, ve a un buscador de Internet y busca algo apropiado.

Cuando encuentres la imagen que quieres, pulsa sobre ella.
Pulsa el botón Ver imagen.
En la siguiente página, haz clic derecho en la imagen (Ctrl + clic en Mac), selecciona Guardar imagen como..., y escoge un lugar seguro para guardar tu imagen. También puedes copiar la dirección web de la imagen desde la barra de direcciones de tu navegador para su uso posterior.

Nota: La mayoría de las imágenes en Internet, incluso en Google Images, están protegidas por derechos de autor. Para reducir el riesgo de violar estos derechos, puedes buscar en alguno de los muchos bancos de imágenes libres que hay en Internet o usar el filtro de licencia de Google. Sólo 1) haz clic en Herramientas de búsqueda y a continuación, en 2) Derechos de uso:

Fuente

Para escoger la fuente:

Ve a Google Fonts y baja por la lista hasta que encuentres una que te guste. También puedes utilizar los controles de la izquierda para filtrar aún más los resultados.
Pulsa el botón Agregar a la colección junto a la fuente que quieras.
Pulsa el botón Usar en el panel abajo en la página.
En la página siguiente, baja por las secciones 3 y 4, y copia las líneas de código que te da Google en un editor para usarlas luego.