Share
Bienvenido a la octava lección de nuestra serie Diseño web para niños, "conceptos básicos de diseño"!
A lo largo de esta serie, nos hemos centrado en darle vida a un diseño, pero aún no hemos hablado de las decisiones que tomaron ese diseño. En este tutorial vamos a caminar a través de algunos de los básicos conceptos de diseño Eso es parte de hacer un buen sitio web..
No olvide hacer cualquier pregunta en la sección de comentarios al final de esta página.!
Algo de lo que hemos hablado mucho hasta ahora es el usuario (o visitante). Todas las decisiones que tomamos en diseño web y cada concepto de diseño del que hablamos en este tutorial tienen el mismo objetivo: hacer que el sitio web sea tan fácil de usar y entender como sea posible.
Es este usuario feliz?El diseño se trata de resolver problemas. Si a nuestros usuarios les resulta difícil utilizar nuestro sitio web, simplemente se irán. Nuestro trabajo es deshacernos de cualquier dificultad para ellos, hacer que sea fácil de leer y brindarles una experiencia super agradable en general. Nuestras decisiones involucran cosas como contenido, organización, diseño, espacio vacío, gráficos, color y tipografía.
Contenido Es la parte más importante del diseño web. Realmente no importará lo bonito que se vea nuestro sitio si no tenemos contenido que los usuarios quieran leer. Una cosa que podemos preguntarnos a nosotros mismos cuando deseamos construir un sitio es “¿Necesita esto la gente?” Y si es así, “¿Qué información es? esencial?”.
Puede ser tentador incluir tanto contenido como sea posible en un sitio web. Limpiar y reducir el contenido en realidad ayudará al usuario a obtener más información al final, porque lo importante no se perderá en la página..
Una vez que tengamos nuestro contenido listo, debemos organizarlo en categorías o grupos relevantes, para que el usuario pueda encontrar todo sin problemas..
El mejor sitio web fluirá de forma muy natural y se asegurará de que el usuario no tenga que pensar demasiado en dónde podría estar algo.
El sitio web de Tuts + Town no tiene mucho contenido, por lo que pudimos centrarlo todo y resaltar nuestras hermosas imágenes. Sin embargo, si tuviéramos más texto en el sitio, este diseño en particular podría no funcionar tan bien..
Para asegurarnos de que nuestro sitio sea fácil de navegar y agradable para el usuario, debemos pensar en su mira y siente. Aquí es donde aparecen las imágenes, la jerarquía (lo que deja en claro la importancia de todo, en comparación con todo lo demás), la tipografía y el color..
En este punto, sabemos todo acerca del uso de imágenes en un sitio web. Incluimos cuatro imágenes en nuestro sitio de Tuts + Town y recorrimos los diferentes tipos de imágenes para usar en la web en un tutorial anterior.
Cuando y dónde usar estas imágenes y gráficos también es importante pensar. Todas las imágenes incluidas en nuestro sitio de Tuts + Town tenían sentido al lado del contenido con el que fueron colocadas. Por ejemplo, nuestro sitio web trata sobre Tuts + Town, por lo que tenemos una buena imagen en la parte superior de un edificio importante en nuestra ciudad. Las tres imágenes que siguen a continuación están relacionadas con los grupos de empresas que se encuentran a su lado: hoteles, restaurantes y tiendas en general..
Utilizamos estas imágenes para dar al usuario un mejor sentido de la sensación de la ciudad, así como las compras en nuestros hermosos edificios. Es importante que no llamemos la atención de un usuario con una imagen que no tiene nada que ver con el contenido real con el que está.
Los iconos son pequeños gráficos que se utilizan para representar alguna cosa.
Un buen ícono se comprende bien y puede hacer que la búsqueda de partes importantes de información en un sitio web sea mucho más rápida.
Aquí hay algunos ejemplos de iconos especialmente útiles:
¿Sabes lo que probablemente significan estos iconos??Hay tanto que podemos comunicarnos sin usar texto en absoluto y usar íconos en lugar de texto en la situación correcta nos dará un sitio más limpio y fácil de usar..
La jerarquía visual consiste en elegir lo que se destaca y en mostrar la relación entre la información. La jerarquía de las partes de un sitio web se puede mostrar a través de una serie de diferentes opciones de estilo, tales como: color, tamaño, uso del espacio vacío y posicionamiento. Todas estas opciones ayudarán a decirle al usuario lo que es super importante, lo que no es tan importante y la información relacionada..
La jerarquía no solo se muestra por el tamaño de nuestro texto e imágenes, sino también por la distancia entre ellas. El contenido similar se debe agrupar juntos y distanciarse del contenido no relacionado.
Esta imagen de Tuts + Town sky ha sido diseñada para asegurarse de que el globo atraiga primero la atención del espectador, seguido de las nubes. Todo lo demás en las imágenes se ha aclarado para garantizar que el globo y las nubes se destaquen más..
La imagen de arriba muestra un cambio en lo que nos enfocamos primero. ¿Encuentras que ves las nubes primero esta vez, luego el globo?
Hay mucho en esta imagen y no estamos seguros de dónde mirar primero. No hay cambio de color, ni organización, ni espacio para decirnos qué es lo importante, por lo que es un poco difícil de seguir.
El espacio en blanco es el espacio vacío en un sitio; no lo hace tener ¡Aunque sea blanco! Son aquellos puntos donde no hay texto ni imágenes. El lugar donde elegimos tener este espacio vacío es realmente importante porque determina qué partes de un sitio se destacan y qué tan bien podemos leer el contenido..
La imagen de arriba es un ejemplo de un sitio que no usa bien los espacios en blanco. Hay mucho contenido e imágenes y no hay suficiente espacio entre ellos para mostrarnos qué es lo más importante..
Entonces, veamos si podemos limpiar esto!
Mucho mejor. Tiramos un poco de contenido no esencial y creamos un jerarquía Con mucho más espacio en blanco y mejor organización, facilitando la lectura..
El espacio en blanco que utilizamos en nuestro sitio de Tuts + Town es en realidad amarillo claro.
Tenemos grandes espacios de espacio vacío a la derecha e izquierda de la página, así como entre las imágenes. Este espacio ayuda a resaltar nuestro contenido mientras nos aseguramos de que nada esté demasiado desordenado.
Recuerda! Es tan importante pensar en lo que es no en el sitio tal y como es, y ahí es donde el espacio en blanco entra en juego.
La tipografía y el color son tan importantes para el diseño web que tendrán sus propios tutoriales para seguir este, por lo que los tocaremos rápidamente aquí..
La tipografía es el arte de seleccionar y organizar el tipo de una manera que lo hace tan atractivo y legible como sea posible. Si bien nuestro sitio Tuts + Town no tiene mucho texto, en realidad se pensó mucho en la elección de la fuente y su disposición..
Elegir colores también es una parte muy poderosa del diseño. Los colores tienen sentido y puede ayudar a dar a los usuarios ciertos sentimientos sobre una marca o sitio. Los colores Tuts + Town ayudan a crear un ambiente divertido y acogedor para nuestra ciudad..
Pero una vez más, vamos a hablar de esto mucho más pronto!
En este tutorial abordamos algunos conceptos de diseño realmente importantes. Una vez que tengamos el contenido listo, debemos presentar este contenido a nuestro usuario de la manera más fácil y ordenada posible..
El diseño se trata de hacer las cosas fáciles y agradables para las personas. Lo logramos con nuestro sitio web Tuts + Town a través del diseño, las imágenes, el color y el espacio en blanco..
A continuación vamos a discutir tipografía, el arte de seleccionar y organizar el tipo; Una de las partes más interesantes y divertidas del diseño..
Te veo por la ciudad!
Accentsconagua