Advertisement
  1. Web Design
  2. Kids

Diseño Web para Niños: Bases del Diseño

Scroll to top
Read Time: 7 min
This post is part of a series called Web Design for Kids.
Web Design for Kids: Images
Web Design for Kids: Typography

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Bienvenidos a la octava lección de nuestra serie Diseño Web para Niños, ¡"las bases del diseño!

A través de ésta serie nos hemos enfocado en dar vida al diseño, pero no hemos hablado todavía sobre las decisiones que se hicieron para comenzar con ese diseño. En éste tutorial veremos algunos de los conceptos de diseño básicos que son parte de la creación de un buen sitio web.

No olvides formular cualquier pregunta en la sección de comentarios en la parte inferior de la página.

El usuario

Algo más de lo que hemos hablado mucho hasta ahora es el usuario (o visitante). Cada decisión que tomamos en el diseño web y cada concepto de diseño del que hablamos en éste tutorial tienen la misma meta: elaborar el sitio web tan fácil de usar y de entender como sea posible.

¿Está éste usuario feliz?

El diseño se trata de resolver problemas. Si tus usuarios encuentran difícil usar tu sitio web, simplemente se irán. Es nuestro trabajo eliminar cualquier dificultad para ellos, hacerlo fácil de leer y proporcionarles una experiencia general placentera. Nuestras decisiones toman en cuenta cosas como contenido, organización, maquetado, espacio vacío, gráficas, color y tipografía.

Contenido

El contenido es lo más importante del diseño web. Realmente no importará que bonito se vea nuestro sitio si no tenemos contenido que nuestros usuarios quieran leer. Una cosa que podemos preguntarnos cuando queremos crear un sitio es "¿La gente necesita esto?" y si es así, "¿Qué información es esencial?"

Puede ser tentador incluir tanto contenido como sea posible en un sitio web. Al final depurando y reduciendo contenido realmente ayudará al usuario a obtener más información, porque es importante no perderse en la página.

Organización y Maquetado del Contenido

Una vez que tenemos listo nuestro contenido necesitamos organizarlo en categorías, o grupos relevantes, para que el usuario puede encontrar todo sin problema.

El mejor sitio web fluirá muy naturalmente y asegurará que el usuario no tenga que pensar mucho sobre donde podría estar determinada cosa.

El sitio Tuts+ Town no tiene mucho contenido, así que pudimos alinear al centro todo y resaltar nuestras imágenes de manera bonita. Si tuviéramos más texto en el sitio, sin embargo, éste particular maquetado podría no funcionar bien.

Lo visual

Para asegurar que nuestro sitio sea fácil de navegar y de disfrutar para el usuario necesitamos pensar en su apariencia y sensación. Aquí es donde entran en juego las imágenes, jerarquía (dejando claro que tan importante es, comparado con todo lo demás), tipografía, y color.

Gráficas e Imágenes

En éste punto sabemos todo sobre el uso de imágenes en un sitio web. Incluímos cuatro imágenes en nuestro sitio Tuts+ Town y vimos los diferentes tipos de imágenes para usar en la web en un tutorial previo.

Cuándo y dónde usar éstas imágenes y gráficas también es importante para considerar. Todas las imágenes incluídas en nuestro sitio Tuts+ Town tenían sentido junto al contenido con el que fueron colocadas. Por ejemplo, nuestro sitio web es sobre Tuts+ Town, así que tenemos una imagen prolija en la parte superior de un importante edificio de nuestra ciudad. Las tres imágenes que siguen están relacionadas con los grupos de negocios junto a ellas: hoteles, restaurantes, y comercio en general.

Usamos éstas imágenes para dar al usuario una mejor sensación de la ciudad, al igual que como será el realizar compras en nuestros bellos edificios. Es importante que no captemos la atención del usuario con una imagen que no tiene nada que ver con el contenido adyacente.

Íconos

Iconos son pequeñas gráficas que se usan para representar algo.

Un buen ícono se entiende bien y puede hacer que se encuentren mucho más fácil importantes fragmentos de información en un sitio web.

Aquí están algunos ejemplos de íconos especialmente útiles:

¿Sabes lo que significan éstos íconos?

Hay mucho que podemos comunicar sin usar texto en absoluto y usar íconos en lugar de texto en la situación apropiada nos dará un sitio más claro y fácil de usar.

Jerarquía Visual

La jerarquía visual se trata de elegir lo que destaca y mostrar la relación entre la información. La jerarquía de las partes de un sitio web pueden mostrarse a través de un número de diferentes elecciones de estilo, tales como: color, tamaño, uso de espacio vacío y posicionamiento. Todas éstas elecciones ayudarán a decir al usuario lo que es super importante, lo que no es importante, y qué información está relacionada.

La jerarquía no sólo es mostrada por el tamaño de nuestro texto e imágenes sino también por la distancia entre ellos. Contenido similar debe ser agrupado y distanciado del contenido no relacionado.

Ésta imagen del cielo de Tuts+ Town ha sido diseñada para asegurar que el globo llame la atención del usuario primero, seguido por las nubes. Todo lo demás en la imágenes ha sido hecho menos llamativo para asegurar que el globo y las nubes destaquen más.

La imagen de arriba muestra un cambio en lo que no enfocamos primero. ¿Te diste cuenta que ves las nubes por primera vez, y luego el globo?

Hay mucho ocurriendo en ésta imagen y no estamos seguros donde mirar primero. No hay cambio de color, no hay organización, y no hay espacio que nos diga que es importante, haciéndolo más difícil de seguir.

Espacio en blanco

El espacio en blanco es el espacio vacío en un sitio; ¡aunque no tiene que ser blanco! Son esos lugares donde no hay texto ni imágenes. Donde elegimos tener éste espacio vacío es realmente importante porque determina que partes de un sitio destacan y que tan bien podemos leer el contenido.

La imagen de arriba es un ejemplo de un sitio que no usa bien el espacio en blanco. Hay mucho contenido e imágenes y no suficiente espacio entre ellos, para mostrarnos que es más importante.

Así que ¡veamos si podemos limpiar esto!

Mucho mejor. Quitamos algo de contenido no esencial y creamos una jerarquía con mucho más espacio en blanco y mejor organización haciéndolo más fácil de leer.

El espacio en blanco de Tuts+ Town

El espacio en blanco que usamos en nuestro sitio de Tuts+ Town es en realidad color amarillo claro.

Tenemos mucho espacio vacío a la derecha y a la izquierda en la página, así como entre las imágenes. Éste espacio ayuda a resaltar nuestro contenido mientras asegura que nada está demasiado amontonado.

¡Recuerda! Es tan importante pensar sobre lo que no está en el sitio como lo que si está, y es aquí donde entra en juego el espacio en blanco.

Tipografía & Color

Tipografía y color son tan importantes para el diseño web que tendrán sus propios tutoriales después de éste, así que solo los abordaremos superficialmente aquí.

La tipografía es el arte de seleccionar y arreglar el texto en una forma que lo haga tan atractivo y legible como sea posible. Mientras nuestro sitio Tuts+ Town no tiene mucho texto, se pensó mucho la elección de la fuente y el arreglo de ella.

La elección de colores también es una parte realmente poderosa del diseño. Los colores tienen significado y pueden ayudar a proporcionar a los usuarios ciertos sentimientos sobre una marca o sitio. Los colores de Tuts+ Town ayudan a crear una sensación de diversión y bienvenida a nuestra ciudad.

Pero de nuevo, ¡hablaremos sobre ésto muy pronto!

Concluyendo

En éste tutorial abordamos algunos conceptos de diseño realmente importantes. Después de que tenemos listo el contenido necesitamos presentar éste 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 placenteras para las personas. Logramos ésto con nuestro sitio web Tuts+ Town a través del maquetado, imágenes, color y espacio en blanco.

Posteriormente discutiremos sobre tipografía, el arte de seleccionar y arreglar el texto, una de las partes más interesantes y divertidas del diseño.

¡Nos vemos por la ciudad!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.