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

¿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?" y "¿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, necesitarás responder a estas preguntas:

  1. ¿De qué tratará tu sitio web? ¿Te gustan los perros, tu ciudad o los videojuegos?
  2. ¿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.
  3. ¿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 Van Gogh!

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 tus párrafos y título desde antes. Tenlos a mano.

Color de tema

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 (por ejemplo Google Images) y busca algo apropiado.

  1. Cuando encuentres la imagen que quieres, pulsa sobre ella.
  2. Haz clic con el botón secundario del ratón en la imagen (Ctrl + clic en un Mac), selecciona Guardar imagen como... y guárdala en un lugar seguro. También puedes copiar la dirección web de la imagen de la barra de direcciones de tu navegador para usarla más adelante.

    Procedemiento de buscar y guardar una imagen para utilizar en un proyecto web

    Ten en cuenta que la mayoría de las imágenes de la web, incluyendo las de Google Images, tienen 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 puedes utilizar el filtro de licencia de Google o algunos otros buscadores.

  3. En el caso del buscador de Google haz clic en el botón Herramientas.
  4. Y a continuación, en la opción de Derechos de uso resultante que aparece. Debes elegir una opción como por ejemplo Marcada para volver a utilizar.
  5. Uso de la herramienta filtro para mostrar imágenes sin licencia

Fuente

Para escoger la fuente:

  1. Ve a Google Fonts y navega por la lista de fuentes disponibles hasta que encuentres una que te guste.
  2. Para reducir el número de fuentes en la lista puedes utilizar los controles de la parte superior para filtrar aún más los resultados.
  3. Pulsa sobre la fuente de tu interés.

    Acciones para escoger un tipo de letra para utilizar en un proyecto web

  4. En la nueva pestaña que se abre pulsa sobre el icono View/Hide your selected families (Ver/Ocultar las familias seleccionadas). Se abrirá el panel Selected Family (Familia seleccionada), por ahora vacío.
  5. Selecciona el estilo de tu interés dentro de la familia de fuentes pulsando en Select this style (Seleccionar este estilo). Ahora el panel Selected family mostrará nueva información.
  6. Da clic en la pestaña Embed (Incrustar) del panel. Ya puedes ver y copiar en tu editor de texto las líneas de código que Google fonts te da. Guárdalas para más tarde.

    Visualización de la información del tipo de letra que se utilizará en un proyecto web