Esta web está disponible solo para computadoras.
Antes de empezar a crear el primer elemento de una web y que el resultado sea un header "clásico" y "básico": Comienza por entender el producto, ¿Por qué el usuario lo utiliza? ¿Qué está buscando?. Responder estas 2 preguntas te ayudará a asegurar que tu producto cumpla su función en lugar de tener contenido irrelevante.
En las primeras etapas de diseño, es importante que no te obsesiones con tomar decisiones de bajo nivel sobre aspectos como tipo de letra, sombras, iconos, colores y tipografías, de hacerlo perderías más tiempo en detalles de poca relevancia para esta primera etapa.
Cada diseño tiene algún tipo de personalidad. Para encontrar la personalidad que queremos podríamos utilizar diferentes aspectos, comenzando por la tipografía. Al trabajar con fuentes tenemos:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos possimus unde deserunt.
ExampleLorem ipsum dolor, sit amet consectetur adipisicing elit. Quos possimus unde deserunt.
ExampleEl color es otro de los factores que con su correcta aplicación crearán la personalidad de nuestro producto. Existe mucha teoría sobre cómo aplicar color a un producto pero simplificándolo y llevándolo a la realidad, solo debes pensar qué te transmite.
El redondeado suele pasar más desapercibido para algunos desarrolladores pero es igual de importante que los otros factores mencionados. Un redondeado innexistente dará una apariencia seria y/o sofisticada, mientras que un redondeado completo parecerá más divertido o amigable.
border-radius: 0px;
Example Buttonborder-radius: 32px;
Example ButtonCuando hablamos de "sistematizar", nos referimos a crear un conjunto de opciones a modo de "variables" para utilizar en tamaños, colores, espaciados, margenes, bordes, entre otras características que nos ayuden a elegir con facilidad y rápidez cómo debería de quedar nuestra UI. La idea es dejar de pensar en "¿Este icono debería ser de 15px o 16px?" y seleccionar directamente el que más nos guste de las opciones que tengamos creadas.
Al diseñar cualquier producto hay un tema crucial que tener en cuenta. La jerarquía. Esta debe establecer la importancia de los elementos en pantalla gracias a su representación visual sin necesidad de que el usuario lea el contenido para así saber si algo es o no relevante.
Confiar demasiado en el tamaño de fuente para manejar la jerarquía de tus componentes es un error, ten en cuenta que existen otras variables que pueden mejorar nuestras interfaces sin crear textos enormes cuando no sean necesarios. En su lugar, podemos utilizar el peso tipográfico y el color.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas porro aut incidunt esse et ut dolores.
$256Example text
Example text
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas porro aut incidunt esse et ut dolores.
$256Example text
Example text
Si quieres asegurar que se genere un buen contraste y legibilidad en los elementos de tu diseño, no utilices texto gris sobre fondos de color y tampoco textos blancos con poca opacidad. Utiliza textos en colores similares al color de fondo pero más claros o más oscuros según el caso.
color: rgba(0, 0, 0, 0.65);
Subtitle for the example.
color: rgba(68, 23, 0, 1);
Subtitle for the example.
En muchas situaciones necesitarás resaltar un elemento pero antes de agregar contenido innecesario piensa en si es posible resaltar ese elemento, quitándole importancia al resto. De este modo evitas la sobrecarga de contenido y colores en tus diseños.
No siempre es necesario una etiqueta que explique de qué se trata cada elemento, por la propia presentación podemos dar a entenderlo y evitar contenido innecesario.
Name: Alex Fib
Job: Fullstack Developer
Mail: alex.fib@example.com
Phone: +54123456789
Alex Fib
Fullstack Developer
alex.fib@example.com
+54123456789
Otra forma de evitar las etiquetas es unificarlas con el valor, la forma de hacerlo solo consta de modificar cómo lo decimos para mejorar la lectura y legibilidad del contenido para nuestros usuarios.
$1.250.000
Av. Luro 1476Habitaciones: 3
Baños: 1
$1.250.000
Av. Luro 14763 Habitaciones
1 Baño
Cada acción (elemento cliqueable) de una página es parte de la jerarquía de tu contenido. La gran mayoría de las páginas deben tener una sola acción principal. Las acciones secundarias se pueden presentar con menor importancia y las opciones terciarias sin fondo, por lo general.
Lorem, ipsum dolor sit amet
$99
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, officia voluptatum.
Lorem, ipsum dolor sit amet
$99
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, officia voluptatum.
Algunas webs, algunas secciones y algunos diseños, no necesitan un espacio gigante para resaltar, en muchas ocasiones obtenemos mejores resultados limitando el tamaño de los elementos a solo el espacio de su contenido según cómo será utilizado. De este modo mejoramos usabilidad del producto e interpretación del contenido para los usuarios.
Categoría
$999.99
Subtotal
$999.99
IVA 21%
$99.99
Total
$1099.99
Categoría
$999.99
Subtotal
$999.99
IVA 21%
$99.99
Total
$1099.99
