10 mandamientos de diseño web para cada proyecto

¿Tiene un libro de reglas cuando se trata de diseño de sitios web? Hay 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 sigues estas pautas básicas y las conviertes en parte de tu pensamiento para cada proyecto que comiences, ¡evitarás muchos de los escollos en los que los diseñadores pueden tropezar!

1. Serás coherente

Haga que el diseño sea lo más fácil posible para que los usuarios interactúen

El diseño consistente es fácil de usar y comprender el diseño. Los compromisos y las 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 encabezados son del mismo tamaño y usan el mismo tipo de letra en todo el diseño, y elementos como los colores siguen una paleta identificable y 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 utilice 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. Deberás utilizar espacios en blanco

El espacio adicional alrededor de los elementos puede ayudar a crear separación y hacerlos más fáciles de leer.

No hay necesidad de meter cada elemento en el espacio sobre el pergamino. Use espacios en blanco para establecer el ritmo y el flujo, crear una jerarquía visual y ayudar a los usuarios a moverse por el diseño.

Si el contenido es bueno, se desplazarán.

Y el espacio en blanco en realidad puede ayudar a alentar esa acción del usuario tirando el ojo hacia abajo en 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 separación y hacerlos más fáciles de leer. (Piense en lo beneficioso que puede ser un poco de espacio extra cuando se trata de tocar botones con facilidad).

¿No está 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 los elementos, de modo que las cosas están orientadas hacia el este, como envolver fotos incrustadas en bloques de texto.
• En campos de formulario para que sean fáciles de tocar en pantallas móviles
• Alrededor de cualquier elemento en el que desee que los usuarios se centren

3. Usarás una cuadrícula

Una cuadrícula es la base de la experiencia del usuario. Cuando diseña con una cuadrícula, el sitio web final es más preciso, consistente 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 ve en el proceso de diseño y si tiene problemas para encontrar ubicaciones para elementos o crear un esquema organizado, una cuadrícula puede ser un salvavidas total.

4. No olvidarás los patrones de usuario

Los usuarios hacen las cosas de cierta manera y esperan cosas específicas de su diseño. Para tener el mayor éxito posible, el diseño debe usar 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 información en formularios, comenzando con un nombre o correo electrónico y terminando con "enviar"
• Colocación de menús de navegación.
• Ubicación y naturaleza en la que se puede hacer clic en el icono del carrito de compras para el comercio electrónico
• Cómo funcionan las notificaciones
• Iconos para búsqueda y chat, entre otras cosas.

UI Design Patterns tiene una larga lista de patrones de usuario para todo tipo de situaciones de diseño.

5. Utilizarás similitud en las acciones de la interfaz de usuario

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 es imprescindible cumplir con el principio de similitud de Gestalt. La agrupación de elementos visuales y acciones para que sean identificables visualmente ayudará a crear una mejor experiencia general para los usuarios.

6. Deberás usar bien la tipografía

Aléjese del diseño y vea si las letras son fáciles de leer a distancia.

No tiene que ser un maestro de la tipología, 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 de tipo de letra 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 de un vistazo.

Intente utilizar la escritura en un entorno de alto contraste, como el tipo claro sobre un fondo oscuro o el tipo oscuro sobre un fondo claro, para que cada palabra sea fácil de leer.

7. No olvidarás las pantallas de retina

Incluso las pantallas más pequeñas pueden representar elementos e imágenes con una perfección casi de píxeles.

Debe considerar cómo manejará las imágenes, los iconos y otros elementos para que todo se vea bien independientemente del tamaño de la pantalla. Cuando sea posible, usar un formato vectorial puede ser la solución ideal, razón por la cual 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 robes un diseño o una imagen, no llenes palabras clave falsas para generar tráfico y sé fiel a quién y de qué se trata tu contenido.

Con tanto desorden web, los usuarios desean interactuar con diseños auténticos. Engañar a los usuarios para que hagan algo o suscribirse a un producto o servicio o simplemente engañarlos sobre un tema o información debería estar en contra de su código de ética personal. No asumas proyectos que esperan esto del diseño.

9. No ignorarás la accesibilidad

La web debe ser utilizable por tantas personas como sea posible. Y aunque 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í:

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, literalmente, por cualquier persona. Como desarrolladores, es fácil suponer 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 usted. Esto puede conducir a una experiencia que funciona bien para algunas personas, pero crea problemas que van desde simples molestias hasta obstáculos para otros.

La accesibilidad, entonces, se refiere a la experiencia de los usuarios que pueden estar fuera del rango estrecho del usuario 'típico', que pueden acceder o interactuar con cosas de manera diferente a lo que usted espera. Específicamente, se trata de usuarios que están experimentando algún tipo de discapacidad o discapacidad, y tengan 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 receptivo

Debería ser evidente en 2018, pero su sitio web debe ser receptivo. Eso incluye todos los elementos, desde el texto hasta las imágenes, desde los botones hasta el marco general.

Cada diseño debe funcionar en cada dispositivo. 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; Se basan 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 cuáles son en las redes sociales. ¡Solo asegúrate de etiquetar Design Shack!