10 elementos de diseño web que no debes pasar por alto
Cuando se trata de diseñar y construir sitios web, nunca parece suceder lo suficientemente rápido.
Dado este ritmo acelerado, muchos pequeños detalles que finalmente se requieren para construir el sitio web a menudo se quedan fuera del proceso de diseño. Si bien estos detalles pueden ser menores, son lo que hace que un sitio web sea agradable o verdaderamente impresionante.
Estos detalles a menudo son fáciles de perder porque no manejan la apariencia general del sitio web. El problema es que a medida que su equipo de desarrollo trabaja a través del diseño, se verá obligado a diseñar y crear estos elementos para usted de todos modos.
Puede ajustar el ciclo de producción para que los desarrolladores tengan tiempo de devolverle estos activos, pero ¿por qué no hacerlo todo por adelantado para que el proceso sea mucho más limpio?
Peor aún, el equipo de desarrollo podría decidir seguir adelante y simplemente crear los activos a medida que avanzan.
Si bien muchos desarrolladores tienen un buen ojo para el diseño, la creatividad que se encarga de diseñar el sitio web debe ser quien planee estos elementos. La planificación anticipada de los matices más sutiles puede tener un profundo impacto en la calidad del producto final.
Cada elemento cubierto en este artículo surge de una pregunta que un desarrollador le haría al diseñador si faltara un elemento en el diseño.
Analicemos los 10 elementos clave a tener en cuenta a medida que pule su sitio web.
1. Enlaces
Si bien el diseño de los distintos estados de un enlace es bastante básico, es posible que se sorprenda de la frecuencia con la que se pasan por alto todos los detalles adicionales. Incluya los siguientes estados para todos los enlaces en la página:
- Normal
Este es el estado predeterminado de un enlace; es decir, uno que no se está sobrevalorando o haciendo clic o apuntando a una URL que el usuario ya ha visitado. Este es el formato de enlace que la mayoría de los diseñadores siempre cubre. - Visitó
Este es un enlace que no se desplaza ni se hace clic sobre él, pero cuyo objetivo ha sido visitado por el usuario. - Activo
Un enlace activo es aquel en el que el usuario hace clic actualmente. La mayoría de los desarrolladores replicarán el estado de desplazamiento aquí si no se les proporciona un estilo. - Flotar
Finalmente, el estado de desplazamiento es el aspecto del enlace cuando el usuario pasa sobre él. Este y los estados normales son para lo que la mayoría de los diseñadores se preparan.
Un detalle que con frecuencia se pasa por alto es que estos diversos estados deben planificarse para todas las regiones de un sitio web. Por ejemplo, muchos sitios web tienen una copia oscura del cuerpo sobre un fondo claro, pero el contraste se invierte en el pie de página. Debe planear para todos los diversos contextos de enlaces encontrados a lo largo de la página.
En Full Moon BBQ , por ejemplo, vemos enlaces rojos básicos dentro de la región de contenido y enlaces blancos básicos en el pie de página a continuación. De nuevo, un pequeño detalle pero importante, no obstante.
2. Formularios
Para muchos diseñadores, la configuración de formularios es crítica e imposible de pasar por alto. Sin embargo, para muchos otros, parece venir como una idea de último momento.
El problema con esta última actitud es que las formas a menudo representan la única manera real de convertir visitantes en clientes. Y sin una planificación y un diseño adecuados, la usabilidad de estos formularios podría fallar, y paralizaría el único punto de conversión del sitio web. Prepararse para estos elementos es esencial, incluso si parecen mucho menos apremiantes para los clientes que el color, la marca y las imágenes.
Dos de las consideraciones más importantes al diseñar un formulario son:
- Etiqueta de forma
Los formularios generalmente recopilan datos personales que los usuarios son reacios a divulgar. Como tal, informar adecuadamente a los usuarios sobre el propósito exacto del formulario es prudente. - Campos de entrada y etiquetas
En segundo lugar, planifique cómo se presentarán los campos de entrada del formulario en la página y cómo se diseñarán y orientarán las etiquetas para esos campos en relación con los campos.
Cuando se les deja a sus valores predeterminados, las formas pueden parecer incómodas. Pero con la preparación adecuada, el sitio web se verá perfecto y será mucho más efectivo. Veamos un gran ejemplo que debe haber comenzado con una buena planificación:
Esta forma crítica de negocio en Increíble estaba claramente bien pensado. Toda la misión y el propósito de la página han sido cuidadosamente considerados. Desde el título y la introducción al diseño de cada conjunto de campos, con sus etiquetas y estilos de control, este formulario es un modelo de planificación.
La planificación de formularios en realidad nos lleva a varias otras consideraciones ...
3. Comportamiento del botón
Los botones se pueden utilizar en un sitio web para diversos fines, pero también parecen descuidarse, al igual que los distintos estados de un botón. Los cuatro estados de un botón son:
- Defecto
Este es el estado predeterminado de un botón, a la espera de hacer clic. La mayoría de los diseñadores lo cubren pero extrañan a los demás. - Flotar
El estado de desplazamiento se ve cuando el usuario pasa sobre el botón. Este estado es útil para indicar al usuario que el botón es un elemento accionable. - Hacer clic
Una vez que el usuario hace clic en el botón, este estado indica visualmente que lo han hecho clic. Proporcionar esta entrada visual puede ayudar a minimizar la frustración de los usuarios. - Discapacitado
El estado desactivado de un botón es quizás el menos utilizado, pero puede ser muy útil para los desarrolladores. Raramente se planifica este estado a menos que el diseñador haya preparado un proceso de validación para el formulario (consulte la siguiente sección).
Al igual que los diversos estados de los enlaces, asegúrese de tener en cuenta los diferentes estados de los botones utilizados en su sitio web. Desde los formularios de inicio de sesión emergentes hasta los campos de búsqueda y los formularios de suscripción al boletín, todos estos botones necesitarán los estilos correspondientes.
4. Validación de formulario
Un detalle relacionado importante es la validación de formulario. Este es el punto crítico donde el sitio web comunica los requisitos del usuario y los errores en un formulario. Hay tres cosas centrales a considerar:
- Campos requeridos
Todos los campos requeridos deben ser indicados. Muy a menudo, esto se hace con un asterisco, como se ve en Por favor comience desde el principio :
- Validación en tiempo real
Se puede realizar cierta validación en tiempo real a medida que el usuario completa el formulario. Este tipo de validación informa al usuario lo más rápido posible de cualquier problema con los datos que han ingresado. Esto se puede lograr muy bien con esto plug-in de validación de jQuery :
- Validación posterior a la devolución
Este tipo de validación ocurre después de que el usuario haya enviado el formulario. El estilo usado para la validación en tiempo real a menudo se repite aquí, pero otra opción es agrupar todos los errores en un solo mensaje, como se ve en Mugir :
5. Mensajes de estado: errores, advertencias, confirmaciones, etc.
Los usuarios generalmente necesitarán algún tipo de comentario después de realizar una acción en su sitio web. El escenario más probable es después de enviar un formulario, pero también podrían ocurrir muchos otros eventos. Considere cuidadosamente su sitio web y las acciones que los usuarios podrían tomar, y planifique los mensajes que el sitio web necesitará para comunicarse.
En La vida de hoy , vemos un mensaje de validación que podría servir fácilmente como un estilo global para los mensajes de error. Y con un ligero cambio en los colores y los iconos, también podría usarse para advertencias más sutiles o incluso mensajes de confirmación:
6. Extendiendo el fondo en pantallas más grandes
Dependiendo del estilo del sitio web, los elementos de fondo podrían ser un problema para sus desarrolladores. La mayoría de los fondos son simples y no requieren mucha preparación, pero algunos se complican por gradientes, patrones e imágenes.
Teniendo en cuenta que los monitores grandes se están volviendo cada vez más comunes y que la mayoría de los diseños están planeados para una línea base de 960 píxeles de ancho, queda mucho espacio libre en pantalla. Si su fondo incluye algo remotamente complicado, le corresponde planificar cómo se extenderá para llenar pantallas más grandes.
En el ejemplo que construí a continuación, tuve que adaptarme a una textura de madera que se extendía en todas las direcciones. No es el tipo de cosa que quieres que aborde un desarrollador de mano dura.
7. Elementos básicos de HTML
Para sitios web con muchas copias, el diseño y el estilo de los elementos básicos de HTML son fundamentales y no deben pasarse por alto. Pero en muchos sitios web orientados al marketing que tienen una disposición ocupada y un estilo visual distinto, los elementos básicos se olvidan. Y, por supuesto, el desarrollador nunca llega demasiado lejos en la creación de un sitio web antes de tener que producir una plantilla de página estándar de todos modos.
Estos son los elementos de base para planificar siempre: párrafos, encabezados 1 a 6, listas ordenadas y no ordenadas, datos tabulares, campos de formulario, imágenes y texto en negrita y en cursiva.
En muchos sitios web en los que trabajo, armé una guía de estilo para ayudar a los desarrolladores, algo como esto:
8. Correo electrónico del sitio web
Una cosa para la que no veo ningún plan de diseñador son los correos electrónicos generados en el sitio web. Tal elemento básico es fácil pasar por alto porque, por lo general, no es el foco principal del sitio web. Sin embargo, el correo electrónico es una herramienta poderosa que puede promocionar y extender un servicio.
Mi sugerencia es revisar cuidadosamente los contenidos del sitio web en la etapa de planificación para buscar los correos electrónicos que puedan enviarse. Algunos de los más comunes son:
- Confirmación de suscripción a la lista de correo,
- Confirmación de registro,
- Confirmación de finalización del formulario (como para un formulario de contacto),
- Verificación del pedido después de una compra.
Si realmente quiere impresionar a sus clientes y desarrolladores, prepare también una plantilla de marketing por correo electrónico para el sitio web. Proporcionará a los usuarios una transición fluida del sitio web a la bandeja de entrada, y mantendrá un control cuidadoso sobre la marca en sus diversas formas.
9. Página que se extiende
La cuestión de cómo un diseño se ampliará para dar cabida a los cambios en el contenido también rara vez se trata, pero podría ser crítico, dependiendo del estilo del sitio web. Veamos un ejemplo donde esto podría haber sido mal:
Full Moon BBQ tiene una página de inicio apretada Este diseño no permite mucho movimiento o cambio en el contenido. Todo tiene un tamaño y ubicación específicos. Entonces, ¿qué sucede si los propietarios deciden realmente alargar el mensaje de bienvenida o agregar una imagen? Afortunadamente, han planeado esto. Como puede ver en esta maqueta, he editado la página para incluir el doble del texto. La página se extiende perfectamente y se adapta a ella:
Preparar versiones alternativas de un diseño con mucho más contenido puede ser extremadamente útil para demostrar cómo planear tal escenario.
10. Animaciones: pop-ups, información sobre herramientas, transiciones, etc.
En un sitio web estándar de HTML y CSS (es decir, sin Flash), las animaciones y las transiciones son tan fáciles de pasar por alto. Y cuando se pasan por alto, a menudo ni siquiera se les acomodará. Por lo tanto, si las animaciones son críticas, la mejor opción es proporcionarles a los desarrolladores una muestra de cómo deberían funcionar para que el producto funcione como debería.
Algunas de las animaciones de lugares más comunes aparecen en:
- Información sobre herramientas
Esas pequeñas ventanas emergentes cuando los usuarios pasan el mouse sobre los elementos. - Rotadores de imagen
Las presentaciones de diapositivas de la página de inicio son furor, y hay disponible una amplia gama de opciones para transiciones y estilos. - Caja ligera
Puede diseñar no solo la caja de luz en sí, sino también la transición a ella.
Cada uno de estos elementos animados tiene un estilo visual distinto que debe acomodarse por sí solo.
¿Por qué debería importarme?
Muchos de los elementos presentados aquí parecen ser más útiles para los desarrolladores que para los diseñadores. Para ser justos, esto es parcialmente cierto: si preparas todos estos elementos antes de tiempo, los desarrolladores te amarán. Este es el tipo de cosas que los desarrolladores se cansan de pedir o de tener que resolver por su cuenta.
Aún así, al hacer todo este trabajo con anticipación, evita que los desarrolladores adivinen y, por lo tanto, mantiene el control del diseño. Y manteniendo el control del diseño, tiene muchas más posibilidades de poder agregar el tipo de pulido que convierte un sitio web ordinario en uno excelente. Algunos diseñadores se refieren a esto como la salsa secreta que hace cantar a sus diseños.
Y si eso no es motivación suficiente, considere esto. Los diseñadores que planean esto bien y entregan un paquete así de completo son fundamentalmente más valiosos. No solo crean un producto de mayor calidad, sino que también reducen el costo de producción. Esto significa que hay más espacio para obtener ganancias, lo que por supuesto hace felices a todos.
Por lo tanto, tenga todos estos detalles más finos en mente y diviértase planificando su sitio web. Francamente, estos detalles son la mitad de divertidos de diseñar para la web, ese medio en constante cambio que se adapta a la interacción del usuario y cambia el contenido.
Patrick McNeil es escritor, desarrollador y diseñador independiente. En particular, le encanta escribir sobre diseño web, capacitar a las personas en el desarrollo web y crear sitios web. El último proyecto del libro de Patrick es El manual de la web del diseñador ; incluye muchos temas adicionales a lo largo de las líneas de este artículo. Puede obtener más información al respecto en TheWebDesignersIdeaBook.com . Sigue a Patrick en Twitter @designmeltdown .
¿Qué diseño para que todos los demás parecen olvidar? ¿Alguna vez ha presentado extras como estos a sus clientes? ¿Qué tipo de cosas encuentra que los desarrolladores siempre le piden que agregue a un diseño?