Ejemplo de guía de diseño para sitio web
Hacer desde una página sencilla hasta un sitio web implica tomar muchas decisiones de diseño y son conversaciones necesarias para que todo el proyecto fluya de forma que nos guste y que dé la imagen que deseamos a nuestros clientes.
A veces no sabemos cómo queremos las cosas hasta que vemos opciones y definirlas desde un inicio nos ahorrará cambios constantes que hagan más lento el avance del proyecto.
1. Revisar Header: tamaño de textos del menú, colores a simple vista, al pasar el mouse y tipografías.
Las decisiones de diseño empiezan con el encabezado, con la combinación de colores, el acomodo de los elementos, tamaños del menú, mayúsculas, minúsculas, etcétera...
La plantilla de Optimize Press viene con tamaños fijos pero hay maneras de hacer un formato personalizado y así tendremos opciones a escoger:
2. Línea divisoria: escoger una (o si quieren usar más de una al fin que son muy delgaditas)
Ejemplo de texto antes de la línea
Ejemplo de texto después de la línea
3. Combinación de tipografías: ¿cuál para titulares y cuál para textos? ¿Títulos en mayúsculas o en combinación de mayúsculas y minúsculas?
TÍTULO EN MAYÚSCULAS (tipografía 1)
Título en mayúsculas y minúsculas (tipografía 1)
TÍTULO EN MAYÚSCULAS (tipografía 2)
Título en mayúsculas y minúsculas (tipografía 2)
TÍTULO EN MAYÚSCULAS (tipografía 3)
Título en mayúsculas y minúsculas (tipografía 3)
TÍTULO EN MAYÚSCULAS (tipografía 4)
Título en mayúsculas y minúsculas (tipografía 4)
TÍTULO EN MAYÚSCULAS (tipografía 1)
Con texto de relleno en tipografía 2 - Proin urna consectetur erat, imperdiet bibendum.
TÍTULO EN MAYÚSCULAS (tipografía 2)
Con texto de relleno en tipografía 1 - Proin urna consectetur erat, imperdiet bibendum.
4. Textos VS Fondos: escoger qué combinaciones les gustan más que otras escoger qué combinaciones les gustan más que otras
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
5. Espaciado en el texto: escoger qué tanto espacio les gusta más
1
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
1.2
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
1.5
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
6. Anchos de texto: escoger qué tanto espacio dejar a los lados
100% Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
85% Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
70% Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
7. Definir alineación en desktop, en teléfonos móviles
Texto a la izquierda
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin.
Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
Texto Centrado
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat.
Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
Texto justificado
Potenti etiam cursus? Facilisis dictumst velit class, senectus scelerisque! Fames class habitasse magna accumsan cubilia, vivamus feugiat. Tortor id ac proin. Dolor gravida ullamcorper posuere lorem nibh tincidunt tristique lectus potenti ac?
8. Colores de botón: escoger cuál usaremos siempre
9. Viñetas: escoger cuál usaremos siempre
Opciones de viñetas: pueden ser del mismo color del texto:
Como regla puede haber un color de resaltado para usar las viñetas
10. Pie del sitio web: escoger el color del fondo
Tomamos muy en serio la privacidad de las personas.
© Derechos Reservados
Tomamos muy en serio la privacidad de las personas.
© Derechos Reservados
Tomamos muy en serio la privacidad de las personas.
© Derechos Reservados
Tomamos muy en serio la privacidad de las personas.
© Derechos Reservados
Tomamos muy en serio la privacidad de las personas.
© Derechos Reservados
Tomamos muy en serio la privacidad de las personas.
© Derechos Reservados
Tomamos muy en serio la privacidad de las personas.
© Derechos Reservados
Tomamos muy en serio la privacidad de las personas.
© Derechos Reservados