Hay muchos factores que contribuyen a crear un sitio web maravilloso. En este artículo, he seleccionado los cuatro principios de diseño web más importantes que contribuyen en gran medida a crear un sitio web hermoso y exitoso. Para cada principio, voy a entrar en detalles sobre lo que significan y proporcionar algunos ejemplos diferentes para ayudar a entender cada uno.

No creo que ninguno de los principios sea más importante que el otro. Al seguir los cuatro, demuestran ser útiles y exitosos para el diseño web.

Principio # 1 – Utilidad

Todo sitio web debería ser útil para sus usuarios y visitantes. Por ejemplo, a todo el mundo no le gusta el clickbait porque es inútil. Cuando un sitio web demuestra ser útil, también resulta valioso. Un sitio web bien diseñado satisfará las necesidades del usuario y tendrá un propósito sólido más allá de verse bien. Además, un sitio web útil proporcionará información relevante para el usuario. Puede satisfacer las necesidades de un usuario o visitante proporcionando información relevante. Ese es el gran círculo de la vida.

Ejemplo # 1 – Infermedica

Echemos un vistazo al sitio web de Infermedica. Lo primero que ve en su página de inicio es un gran encabezado que dice «Inteligencia artificial para empresas de atención médica». Es un poco vago, pero afortunadamente, pero el producto se explica con más detalles más adelante en la página.

El enfoque principal del sitio web es doble. Primero, compartir lo que Infermedica puede hacer por la industria médica. En segundo lugar, tiene como objetivo que la gente programe una demostración. Todo el sitio web explica la facilidad y la mejora del flujo de trabajo médico con la ayuda del producto de inteligencia artificial de Infermedica.

Además, la llamada a la acción para programar una llamada es bastante repetitiva. Esto es genial porque no hay llamadas a la acción contradictorias en este sitio web, como instar a los visitantes a registrarse para recibir un boletín informativo o una prueba gratuita. El propósito del sitio web de Infermedica es claro como el día.

Infermedica proporciona una explicación de cómo funciona su producto y casos de uso específicos como parte de su información relevante.

Ejemplo n. ° 2 – Multiplicidad Leeds 2016

Otro ejemplo de un sitio web útil es la página de inicio de Multiplicity Leads 2016. Es una página de inicio para un evento de una sola noche organizado por la empresa de láminas de estampado Foilco. El evento está dirigido a artistas gráficos en Leeds. La página de destino está llena de información útil, como dónde se lleva a cabo el evento y cuándo.

Detallan los tres diferentes ponentes que aparecen en el evento y por qué fueron elegidos. Además, la página web también explica un poco sobre el anfitrión y por qué les resulta importante organizar el evento en primer lugar. En este punto, la página ha terminado. Sin embargo, antes de que ese fuera el caso, también podía reservar boletos.

Aunque no hay mucho texto en este sitio web, hay una gran cantidad de información. La copia es muy concisa y al grano. Eso hace que aprender sobre el evento como un potencial sea emocionante, pero también útil. Ninguna información parece fuera de lugar o irrelevante.

Principio # 2 – Comunicación

Todo en un sitio web es comunicación. Desde la copia de los botones hasta la forma en que un usuario interactúa con el flujo de pago. Es importante que un sitio web tenga instrucciones claras sobre cómo completar un formulario y brindar comentarios al usuario cuando algo sale mal o necesita su atención.

Una explicación de por qué un formulario solicita algo extraño, como su apellido de soltera, mientras intenta comprar un libro, ayuda a mejorar la comunicación entre el sitio web y el usuario. El lenguaje claro es la clave. Además, la jerarquía juega un papel importante. Cuando la jerarquía es extraña, confusa o simplemente mala, el usuario quedará confundido. Eso es mala comunicación.

Ejemplo n. ° 1: marco icónico

Para tener una idea de lo que una buena jerarquía puede hacer por la comunicación, revisaré la página de inicio de Iconic Framework. De arriba a abajo, la información se vuelve cada vez más detallada.

Comienza con una descripción breve y clara del producto: es un marco de código abierto para crear aplicaciones móviles. Si lo encuentra interesante, comenzará a desplazarse. Digamos, un visitante sigue desplazándose. La siguiente sección habla sobre el producto con un poco de detalle e incluso más detalles en la siguiente sección y aún más en la siguiente.

Todas esas cosas, toda la información permitirá al visitante juzgar si este producto es útil para ellos o no. Solo después de intentar vender el producto con el mejor pie adelante, la página web detalla cosas menores como las integraciones.

Las características principales, como las capacidades multiplataforma, no importan tanto como la función de creación de aplicaciones. Además, la prueba social tampoco es tan importante. Solo ayuda a convencer a los usuarios que están más seriamente interesados ​​en el producto y que será alguien que se haya molestado en desplazarse hasta el final. Es una forma de comunicar información en momentos relevantes.

Ejemplo # 2 – Banco

Otro ejemplo que debemos observar si queremos juzgar la comunicación efectiva es la interacción dentro de un sitio web. Esta vez, quiero mostrarles la incorporación de Bench, una aplicación financiera para empresas más pequeñas. El proceso tiene cuatro pasos. La primera te presenta a Lars y Brittany; ahora son parte de tu equipo.

Hay hermosas fotos y algunos fragmentos de información sobre ellas e incluso sus firmas únicas dentro del mensaje de bienvenida. Eso comunica cuidado. Comunica que, de hecho, hay humanos detrás de la aplicación. A medida que avanza en el proceso de incorporación, Lars está allí para ayudarlo, un buen toque.

Las pequeñas colas en el diseño también recorren un largo camino. Por ejemplo, al completar la información de la tarjeta de crédito, aparece una imagen de la tarjeta de crédito que completa la información tal como la vería en su tarjeta. Incluso se voltea hacia atrás al completar el código de seguridad, como lo hace con una tarjeta real.

Cuando ingresa información, el formulario le indica cómo formatear la información. Pero, si hace algo mal, proporciona información clara sobre cómo corregirlo. Bench se ha preocupado claramente por prestar atención a cada detalle para asegurarse de que no confundan a los usuarios, sino que brinden una comunicación clara durante todo el proceso de incorporación.

Principio # 3 – Sencillez

Cuando las cosas son simples, significa que toda la jerga, el contenido y la información innecesarios se eliminan. Eso es algo fantástico de lograr con cualquier sitio web. Cuando se simplifica un diseño, significa que conserva solo el contenido necesario y relevante.

Eso, nuevamente, significa que el sitio web también es útil. Si aún no lo ha notado, los cuatro principios del diseño web son diferentes pero funcionan juntos. Lograr uno ayuda a lograr el otro. Los diseños simples usan espacios en blanco para hacer que los diferentes elementos de la página sean legibles, legibles y digeribles. Pero los diseños simples también están libres de desorden. Además, el diseño simple requiere solo las interacciones necesarias y el esfuerzo de los usuarios. Todo eso hace que un diseño sea mucho más evidente.

Ejemplo n. ° 1: aplicación Surge

El ejemplo perfecto de un sitio web de diseño simple debe ser Surge App. Eche un vistazo a la captura de pantalla anterior. Es una sección un poco más abajo de la página de inicio. Tiene tan poco que hacer, pero sigue siendo útil. Tiene una hermosa foto de una pareja gay; es lo principal que ves.

Luego, se le presenta un título y un subtítulo cortos que explican, muy rápidamente, que esta es una aplicación de citas para hombres homosexuales. Lo asombroso es que no hay nada más allí. Esta sección es un ejemplo de hermoso diseño web.

¿Qué más podemos decir sobre esta sección? Si desea obtener más información sobre la aplicación, debe hacer clic en el enlace. La sección no contiene nada que sea necesario para hacer clic. Sin embargo, permite al visitante obtener la información necesaria si la desea.

¿Notaste también la navegación? Es el ícono del menú de hamburguesas en el lado izquierdo. Nuevamente, la navegación no se interpone. No hay innumerables enlaces que intenten llevarte a otro lado.

Cada sección tiene un propósito y hay muy poco que lo distraiga, como visitante. Este ejemplo solo cubre todos los conceptos básicos del diseño simple: uso de espacios en blanco, libre de desorden, evidente por sí mismo, que contiene solo la información necesaria. A su vez, el diseño es útil y útil tanto como puede ser.

Principio # 4 – Coherencia

Cuando hablo de coherencia me refiero a dos cosas distintas. Primero, está la consistencia de las páginas web y la presencia general en línea. El mismo sitio web, aplicación web o producto debe tener el mismo estilo visual en cada página y en varias plataformas o dispositivos.

Todos hemos estado allí donde compramos en un sitio web de comercio electrónico, decidimos comprar un producto y llegamos a la página de pago que no se parece en nada al resto. Es confuso y, francamente, desagradable. No es nada tranquilizador saber que estamos en el lugar correcto, haciendo lo correcto.

El segundo tipo de coherencia se trata de seguir convenciones, como hacer que se pueda hacer clic en el logotipo, colocar enlaces de inicio de sesión y registro en el lado derecho de la navegación superior o colocar enlaces de redes sociales en el pie de página.

Ejemplo # 1 – Vero

Usaré Vero como un gran ejemplo de estilo visual consistente. A medida que navega por las diferentes páginas, todo el aspecto del sitio web es el mismo, también conocido como coherente. Desde la página de inicio hasta las funciones, los precios o la página de carrera, el estilo visual es el mismo.

Esto mejora la experiencia del visitante y hace que la empresa se vea mucho más profesional también. Lo he comprobado y sus páginas de registro e inicio de sesión también siguen el mismo estilo. Parece un poco tonto, pero como dije, todos hemos visto un sitio web donde su estilo visual está por todas partes.

Además, Vero sigue las convenciones típicas de diseño web. Por ejemplo, el logotipo tanto en el encabezado como en el pie de página lo lleva a la página de inicio. Los botones de inicio de sesión y registro se encuentran en la esquina derecha de su navegación. El pie de página es la puerta de entrada a todo tipo de información adicional que puede ser irrelevante para un usuario nuevo. Cuando ingresa información en los campos de entrada, el marcador de posición se convierte en una etiqueta. Y así.

Ejemplo # 2 – MailChimp

MailChimp es otro ejemplo asombroso de un estilo visual consistente en muchos canales. Son meticulosos en mantener su diseño detallado. Desde la página de inicio hasta la página de registro y la aplicación web, todo parece coherente porque sigue el mismo estilo.

Sus páginas de soporte y recursos adicionales también son fantásticos. La empresa también sigue las convenciones web típicas que ayudan a que su sitio web y su producto sean altamente utilizables.

La comunidad de diseño celebra enormemente a MailChimp por sus esfuerzos para preocuparse por la calidad de los diseños de su empresa que brillan en cada detalle. Es por eso que a tantas personas les encanta usar su producto y les encanta estar asociados con la empresa.

Conclusión

Hay muchas cosas diferentes que contribuyen a la creación de un sitio web exitoso. Estos cuatro principios de diseño web son los más importantes. Como mencioné en la publicación, se ayudan mutuamente. Cuando tiene un diseño simple, es más probable que solo proporcione la información más relevante, lo que a su vez hace que el sitio web sea utilizable, etc.