Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Menos es más: Fundamentos mínimos de diseño web

by
Length:MediumLanguages:
This post is part of a series called Web Design Theory.
Errors: Bad Decisions or Bad Design?
Understanding the F-Layout in Web Design

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

Luchando contra del desorden es algo con lo que cada diseñador se compromete, ya sea en su propio sitio o cuando esta diseñando para un cliente. El diseño de su sitio web debería mejorar el propósito de su sitio enfocándose en el contenido y siendo útil para todos. Tómese un momento extra para asegurarse de que ningún detalle se pasó por alto, esto producirá un sitio web atractivo y efectivo.

Definir el Propósito del Sitio

“Tu sitio necesita una clara definición de su propósito para eliminar cualquier confusión desde el inicio…”

Lo primero es lo primero. Antes de la apertura de sus aplicaciones gráficas favoritas para diseñar su nuevo sitio web, como mínimo necesitarás establecer: “¿para qué será usado el sitio? Tu sitio necesita una clara definición de su propósito para eliminar cualquier confusión desde el inicio para tener un solo y único punto focal fuerte. Puede ser tan sencillo cómo mostrar las fotografías de un premio a tus clientes potenciales, compartir noticas tecnológicas o se utiliza para vender tus juguetes para mascotas hechos a mano. Empiece por hacer una simple declaración:

Mi sitio tiene que: ______________________________________.

  • Educar a los adolescentes sobre los peligros de enviar mensajes de texto y conducir.
  • Presentación de fotos de premiación a clientes potenciales.
  • Presentación de fotos de premiación a clientes potenciales.

Al definir claramente un propósito desde el principio, usted será capaz de utilizarlo para ayudar a mantener su diseño por el buen camino. A medida que trabaja a través de los elementos de diseño, continúe preguntándose usted mismo preguntas tales como:

  • ¿Esto complementará y reforzará el propósito de mi sitio?
  • ¿Es esto realmente necesario o solamente estoy usando espacio?
  • ¿Será esto una distracción del propósito de mi sitio?

Todo lo que agregues al sitio que no refuerce el propósito del sitio puede ser una distracción, debilitando el mensaje general del sitio. Así, los elementos adicionales deben complementar el enfoque del sitio.

Su sitio de venta de fotos de alto rendimiento no necesita incluir un enlace a su portafolio de fotografías, y no importa cuán asombroso sea.

No es el momento para las cosas que quieres en tu sitio, sino lo que necesita estar en el sitio es lo realmente importante. Jamás olvides que tienes tan sólo unos pocos segundos para convencer a tus visitantes para quedarse y leer los mensajes de tu sitio.

El Sudor detrás de los pequeños detalles

“Cada detalle tiene un significado, así qué lo que sea que quites del diseño de tu sitio es igual o tan importante como lo que agregues”.

Los fundamentos son solamente eso, fundamentos. Todos tus principios de diseño se vuelven mucho más importantes al entender e implementarlos cuando elementos que no sean necesarios y el desorden se eliminan, empujando su mensaje hacia el frente.

Los errores se amplían con la limpieza y sencillez de diseños mínimos. Asegurarse de haber estudiado los fundamentos principales de diseño es vital cuando se trata de colocar los artículos sobre la página y sobre todo relacionarlos unos con otros. Todo lo que se necesita es una planificación y un propósito claro. Es decir que; sólo porque hay lugar para “una cosa más”, no significa necesariamente que necesita haber algo ahí.

Muchos, por no decir todos los principios de diseño se aplican para limpiar, simplificar, aplicar estilos de diseño, pero asegúrate de conseguir esto desde el principio:

Unidad

La crea los elementos de la página que se llevan y encajan bien en conjunto para mejorar el diseño general. Los elementos que se destacan para captar la atención en la página necesitan resaltarse porque usted así los quiere, y no porque no encajan con los otros elementos de la página.

Sencillas salpicaduras de color agregan interés al esquema de color blanco y negro y lo que es aún más importante, guía su ojo desde el logo que esta a la derecha hasta la parte creativa, ingeniosa y divertida.

Espacio en blanco

Los elementos en la página necesitan espacio para respirar. Parece algo lógico para ti y de hecho puedes estarlo haciéndolo, incluso, sin haberlo pensado antes pero las peticiones más comunes de los clientes parecen ser:

  • “Agreguemos una cosa más, porque parece haber mucho espacio extra aquí…”
  • “Hay un espacio en blanco debajo del menú, súbelo para que podamos agregar…”
  • “Hay mucho espacio en ambos lados del sitio, creo que también podríamos aprovecharlo para incluir…”

Al dar un valioso espacio en blanco entre los elementos, el sitio se vuelve estrecho y los elementos comienzan a juntarse, no dando a sus ojos un descanso necesario que ayude a definir las áreas separadas.

Web Creme tiene un número limitado de anuncios pero colocados en un área con gran impacto.

Alineación

Hay muchas formas de alinear los objetos en la página, pero con un diseño simple, limpio y mínimo, sí hay algo que es incluso un pixel o dos fuera del diseño, será mucho más fácil de destacar.

Usa una guía para mantener todo lo que necesitas alineado, cuadrado y perfecto. Las guías son excelentes desde el momento que empiezas a bocetear un diseño, y durante todo el camino hasta el desarrollo, y cuentas con muchos plantillas para elegir.

¿La sutileza no es lo tuyo? Crea un impacto inmediato seleccionando un color audaz para complementar tu diseño.

Jerarquía

Con muchos sitios en la web, solamente tienes pocos segundos para transmitir tu mensaje o ayudar a conducir a un usuario dónde quieres que vayan.

La forma cómo uses diferentes tamaños y anchos de elementos creará un trazo, conduciendo a los usuarios a través de la página, terminando, típicamente, en lo qué llamamos “un llamado a la acción”. Cuando los usuarios se sienten cómodos, entonces van en la dirección correcta y continuarán así, pero si les confunde lo que esta pasando a su alrededor ellos pueden resultar frustrados.

Pandaweb usa el espacio en blanco para mantener la atención de los visitantes en el área de promoción.

Quitar lo innecesario

¿Cuál es la mejor manera de encontrar y eliminar lo innecesario? ¡Al no agregar en primer lugar! ¿Qué significa eso de “no agregar en primer lugar”? Significa, pasar más tiempo planeando el sitio y la definición de su propósito desde el principio para eliminar esos elementos extras qué solamente rellenan el espacio.

Durante el proceso de diseño, pase el tiempo suficiente a través de cada elemento de su sitio preguntándose “¿realmente necesito esto?”, aunque su propósito o enfoque pueden cambiar ligeramente a lo largo del camino, así qué es una muy buena idea de continuar preguntándose esto a medida que avanza.

De hecho, si tienes acceso a un grupo de prueba, trata usando un programa de rastreo de clicks en un sitio de prueba para localizar elementos que nunca se utilizarán. Mira lo elementos no utilizados y decide; sí los eliminarás o los colocaras en una ubicación diferente.

Recuerda qué creando un diseño mínimamente; limpio y sencillo, permite llevar a la mente a lo más básico, pero ¿cómo? Muéstrales a los visitantes de tu sitio lo qué tienes para ofrecerles y consigue que tu mensaje llegue en la forma más eficientemente posible.

¡La Eficiencia NO es Opcional!

No hay ninguna buena razón para elegir el diseño por encima de la eficiencia, es más, funcionan perfectamente bien juntos si se ejecutan apropiadamente. Un sitio web bien diseñado y fácil de usar mantendrá a los visitantes por más tiempo y cumplirá con el propósito final del sitio de mostrar su contenido y entregar su mensaje con eficacia.

Un sitio web que es fácil y cómodo de usar casi se siente cómo si estuviera leyendo la mente del usuario y la navegación es más fácil y divertida.

Que no te provoque ningún temor ser creativo con nuevas técnicas y estilos pero sea consiente de la funcionalidad común y la colocación de los elementos que se pueden tomar por sentados:

  • Los enlaces deben ser fáciles de identificar para hacer clicks sobre ellos.
  • Siempre, siempre proporciona una forma de regresar al inicio de tu sitio.
  • Jamás desactives el botón de regreso.
  • Añade botones de cierre a contenidos en ventanas pop-up(emergentes).
  • Indicar la página en la qué se encuentra el usuario actualmente.

Algunas personas relacionan un diseño mínimamente; limpio y sencillo con texto en miniatura y elementos casi sin utilizar en páginas que están vacías. Algunas de las formas más básicas son comúnmente pasadas por alto cuando se está diseñando sitios nuevos:

  • La navegación deberá ser consistente y de uso intuitivo.
  • El contenido debe ser legible con títulos claramente definidos.
  • El código deber ser limpio y cumplir con los últimos estándares de la calidad web.
  • Asegúrese de que su sitio web se visualiza y funciona apropiadamente en todos los navegadores.

Localizando los puntos conflictivos.

Entre tanto algunas cosas lucen bien en la fase de diseño, una vez que consigues ver tu sitio en un navegador puedes descubrir algunos problemas de eficiencia que nunca antes habías notado mientras los estabas diseñando en Photoshop.

Una buena manera de encontrar realmente cómo funciona el sitio es agarrando un voluntario y mirando por encima de su hombro o (con su permiso) usando una herramienta de intercambio de escritorio, pero solamente sí no te encuentras en la misma ubicación física.

Denle una lista de tareas y vea de cerca si son tan fáciles de realizar:

  • Compra un libro desde mi tienda.
  • Ponte en contacto conmigo para concertar una cita.
  • Encuentra lo relacionado con mi experiencia.

La realidad es que simplemente te sorprenderá la forma cómo diferentes personas pueden interpretar diferentes áreas del sitio o de las rutas que pueden tomar los visitantes. Míralos muy de cerca pero no les des ninguna ayuda ni consejo mientras lo hacen

  • ¿Saben dónde hacer click?
  • ¿Se perdieron en algún área en específico?
  • ¿Están haciendo click sobre un elemento de diseño pensando que los llevará a una página nueva?
  • ¿Pasaron un mal rato haciendo click sobre un ícono pequeño?

Toma notas sobre las áreas dónde pueden tener problemas y encuentra la manera de mejorarlas. Y no se ponga a la defensiva o enojado si se encuentran problemas con el sitio. Es más, use ese nuevo conocimiento para mejorar su trabajo y lleve ese conocimiento en futuros proyectos.

Pero… ¡Me Gusta el Color!

Al crear un diseño mínimamente; limpio y sencillo no significa que necesitas estar pegado a un diseño en blanco & negro o con un sitio monótono y sin interés, entonces ¿qué significa? Significa que solamente tienes que aprender a simplificar las opciones de color. Incluso, hay dos rutas principales a tomar en cuenta cuando se trata de color:

Dispersión de Color

Con pequeños chasquidos de color, los ojos de los visitantes de tu sitio inmediatamente reconocerán qué área con color es importante. Use esto para tomar ventaja usándolo para pintar una ruta que el ojo pueda seguir.

Marcos CSS tales como el sistema de guías 960 provee una manera para conservar todo alineado perfectamente.

Simple pero Audaz

Una opción más atrevida puede ser la de hacer su elección de color de fondo con un color solido fuerte. Las negrillas pueden ser una distracción, por lo tanto, asegúrate de que no te estas alejando del mensaje de tu sitio, haciéndolo difícil de leer o inútil, sin embargo, esto sin duda hará que su sitio sea notado.

Los elementos del sitio Finch hacen sentir cómo si todos pertenecen a la página y funciona bien junto.

No es para todos

Casi nadie se beneficiará con un sitio con un fuerte enfoque, pero un estilo mínimamente; limpio y sencillo, no es para todos.

Los temas de autores de sitios web. - Muchas veces solamente tienes unos segundos antes de que un comprador decida si pasarán tiempo buscando en el sitio que creaste. Viendo un diseño súper mínimo como sólo la opción puede registrarse como “básico” y considerarse inmediatamente como carente de características. Es posible que solamente necesites mostrar varios niveles de lo que es posible en algunas áreas y dejarlos decidir si usar esa característica si o no.

Anunciar sitios pesados - Un estilo mínimamente sencillo y limpio probablemente no es el mejor ajuste para sitios que dependen en gran medida de la publicidad a menos, por supuesto, que tengas unos propietarios de anuncios muy comprensivos que se adaptan a su estilo. Aunque una mejor opción será colocar pocos anuncios, pero localizarlos en un área que la mayoría de las veces será dónde hacen click con más frecuencia.

Sofa usa una pirámide invertida de información guiándote hacia abajo desde el título en grande al centro de la página, hacia la visión general de la compañía y finalmente a los servicios que proporciona.

Encontrando un equilibrio

Al darse cuenta que no conseguiremos un completo control creativo de cada proyecto de diseño, al menos trata y encuentra un equilibrio con tus clientes.

Cuando les expliques por qué has diseñado el sitio de cierta manera, entonces has referencia a otros sitios que hacen las cosas de forma correcta y explícales porqué funciona y porqué su sitio es un éxito.

Explícales como se han beneficiado y cómo usted también podría. Muéstrales los resultados positivos y las respuesta que el otro sitio ha recibido, porque lo bueno de diseñar es seleccionar y tomar un tiempo extra para asegurarte que los visitantes tienen sitio web útil y eficaz.

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

Advertisement
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.