¿Tienes un libro de reglas cuando se trata de diseño de sitios web? Existen algunas reglas que se aplican a casi todos los proyectos de diseño web, llamémoslos "mandamientos de diseño web".
No importa cuán grande o pequeño sea el sitio web, estas reglas son la base para un buen diseño. Si sigue estas pautas básicas y las convierte en parte de su pensamiento para cada proyecto que comience, evitará muchas de las trampas en las que los diseñadores pueden tropezar.
1. Serás consistente
Haga que el diseño sea lo más fácil posible para que los usuarios interactúen con El diseño consistente es fácil de usar y entender el diseño. Los compromisos y acciones de los usuarios, así como las imágenes, deben ser similares en apariencia y uso a lo largo de un solo diseño.
Esto significa que los botones son del mismo color y usan los mismos estados de desplazamiento para ayudar a los usuarios a saber cómo interactuar, los titulares tienen el mismo tamaño y el mismo tipo de letra en todo el diseño, y los elementos como los colores siguen una paleta que es identificable y está asociada con la marca.
Otros elementos visuales también deben seguir un estilo coherente, así como un estilo y un plan de uso para elementos como iconos o fotografías, videos o ilustraciones. El diseño debe tener una voz que se use para copiar bloques que coincida con la estética general.
Todos estos elementos de consistencia contribuyen a la usabilidad general, haciendo que el diseño sea lo más fácil posible para que los usuarios interactúen.
2. Usarás el espacio en blanco
El espacio adicional alrededor de los elementos puede ayudar a crear una separación y facilitar su lectura. No hay necesidad de meter cada elemento en el espacio sobre el rollo. Use los espacios en blanco para establecer el ritmo y el flujo, cree una jerarquía visual y ayude a los usuarios a moverse a través del diseño.
Si el contenido es bueno, se desplazarán.
Y el espacio en blanco en realidad puede ayudar a alentar la acción del usuario al bajar la vista de la pantalla.
El espacio en blanco es aún más importante a medida que los tamaños de pantalla se hacen más pequeños. El espacio adicional alrededor de los elementos puede ayudar a crear una separación y facilitar su lectura. (Piense en lo beneficioso que puede ser un poco de espacio adicional cuando se trata de tocar los botones con facilidad).
¿No estás seguro de dónde incluir espacios en blanco en el diseño? Empieza aqui:
- Alrededor de botones u otros elementos interactivos.
- Como espaciado entre líneas de tipo para facilitar la lectura.
- Entre elementos, los elementos se pueden distinguir, como envolver fotos incrustadas en bloques de texto
- En los campos de formulario para que sean fáciles de tocar en pantallas móviles.
- Alrededor de cualquier elemento que desee que los usuarios se centren en
3. Usarás una cuadrícula
Una grilla es la base de la experiencia del usuario. Cuando diseñas con una cuadrícula, el sitio web final es más preciso, coherente y los elementos se colocan en un orden que tiene sentido visual.
Las cuadrículas son horizontales y verticales, aunque la cuadrícula de diseño web más conocida podría ser la cuadrícula vertical de columnas de 12 columnas para alinear elementos.
La cuadrícula es algo que solo se ve en el proceso de diseño y, si tiene problemas para encontrar ubicaciones para elementos o para crear un esquema organizado, una cuadrícula puede ser un salvavidas total.
4. No debes olvidar los patrones de usuario
Los usuarios hacen cosas de cierta manera y esperan cosas específicas de su diseño. Para tener tanto éxito como sea posible, el diseño debe utilizar patrones de usuario comúnmente aceptados (soluciones recurrentes para problemas de diseño) para que las personas sepan exactamente cómo funciona el diseño.
Los patrones de usuario comunes incluyen:
- Orden de la información en formularios, comenzando con un nombre o correo electrónico y terminando con? Enviar?
- Colocación de los menús de navegación.
- Ubicación y naturaleza seleccionable del ícono del carrito de compras para el comercio electrónico
- Cómo funcionan las notificaciones
- Iconos para buscar y chatear, entre otras cosas.
Los patrones de diseño de IU tienen una larga lista de patrones de usuario para todo tipo de situaciones de diseño.
5. Usarás la similitud en las acciones de UI
Cada elemento en el diseño de un sitio web debería funcionar como cualquier otro elemento del mismo tipo. Estos elementos también deben tener una identidad visual para que los usuarios sepan qué son y qué hacen de un vistazo.
Hay tantas acciones de interfaz de usuario que pueden integrarse en un diseño que cumplir con el principio de similitud de Gestalt es una necesidad. La agrupación de elementos visuales y acciones para que sean identificables visualmente ayudará a crear una mejor experiencia general para los usuarios.
6. Usarás bien la tipografía
Aléjese del diseño y vea si las letras son fáciles de leer a distancia. No tienes que ser un tipógrafo maestro, pero definitivamente ayuda.
Gran parte de lo que constituye un buen diseño se basa en la legibilidad y legibilidad. Y esos conceptos dependen de cómo elija y use los tipos de letra.
En caso de duda, opte por pares tipográficos simples como serif y sans serif. Aléjese del diseño y vea si las letras son fáciles de leer a distancia. Luego mire las letras en un lienzo pequeño, como la pantalla de un teléfono para asegurarse de que también sea fácil de leer.
Intente utilizar el tipo en un entorno de alto contraste, como el tipo de luz sobre un fondo oscuro o el tipo oscuro sobre un fondo claro, de modo que cada palabra sea fácil de leer.
7. No olvides las pantallas de retina
Incluso las pantallas más pequeñas pueden representar elementos e imágenes con casi la perfección de píxeles.
Debe considerar cómo manejará las imágenes, los íconos y otros elementos para que todo se vea a la perfección independientemente del tamaño de la pantalla. Cuando sea posible, usar un formato vectorial puede ser la solución ideal, que es una de las razones por las cuales SVG está creciendo en popularidad todo el tiempo.
Si no tiene una imagen que tenga la resolución para adaptarse a tamaños de pantalla comunes, no la use. Ninguna imagen es mejor que una imagen mala o pixelada.
8. Serás Honesto
Su diseño debe ser fiel a su pequeña empresa, información o marca y transparente en lo que hace.No robe un diseño o imagen, no rellene con palabras clave falsas para dirigir el tráfico y sea fiel a quién y de qué trata su contenido.
Con tanto desorden en la web, los usuarios quieren interactuar con diseños que son auténticos. Engañar a los usuarios para que hagan algo o registrarse para un producto o servicio o simplemente engañarlos sobre un tema o información debe ir en contra de su código de ética personal. No asuma proyectos que esperan esto del diseño.
9. No debes ignorar la accesibilidad
La web debe ser utilizable por la mayor cantidad de personas posible. Y si bien puede parecer difícil garantizar que el diseño sea accesible, no es tan complicado como podría pensar.
Google tiene una gran guía para la accesibilidad del sitio web, que define así:
Hablando en términos generales, cuando decimos que un sitio es accesible, queremos decir que el contenido del sitio está disponible y que su funcionalidad puede ser operada por cualquiera. Como desarrolladores, es fácil asumir que todos los usuarios pueden ver y usar un teclado, un mouse o una pantalla táctil, y pueden interactuar con el contenido de su página de la misma manera que lo hacen. Esto puede llevar a una experiencia que funciona bien para algunas personas, pero crea problemas que van desde molestias simples hasta tapones para otros.
La accesibilidad, entonces, se refiere a la experiencia de los usuarios que podrían estar fuera del rango limitado del usuario "típico", que podrían acceder o interactuar con cosas de manera diferente a lo que usted espera. Específicamente, se refiere a los usuarios que experimentan algún tipo de discapacidad o discapacidad, y tenga en cuenta que esa experiencia puede ser no física o temporal.
Muchos de los principios del buen diseño, como el tamaño, el contraste y el espacio, contribuyen a la accesibilidad general.
WebAIM tiene una lista de verificación, así como otras herramientas, para ayudarlo a determinar si su diseño es accesible. La lista de verificación cubre cuatro áreas relacionadas con la accesibilidad: ¿Es el diseño perceptible, operable, comprensible y robusto?
10. Serás sensible
Debería dejar de decirlo en 2018, pero su sitio web debe ser receptivo. Eso incluye todos los elementos, desde texto a imágenes y botones hasta el marco general.
Cada diseño debe funcionar en todos los dispositivos. Período.
Conclusión
Un conjunto sólido de reglas puede ayudarlo a entrar en un proyecto de diseño más rápido y trabajar de manera más consistente. Tenga en cuenta que ninguno de estos mandamientos le dice cómo debe verse un proyecto; tienen sus raíces en la teoría de cómo delinear y crear cada sitio web.
¿Tiene reglas de diseño web adicionales para agregar a estos mandamientos? Háganos saber qué son en las redes sociales. ¡Sólo asegúrate de etiquetar Design Shack!