Manual de diseño web

Inicio » Manual de diseño web

Tutorial de diseño web

La creación de sitios web es cada vez más compleja y no suele ser un trabajo de una sola persona. Es importante garantizar que el diseño sea coherente y esté optimizado para cumplir los objetivos empresariales y crear experiencias agradables para los usuarios.

Es beneficioso tener una guía de estilo para crear una experiencia cohesiva entre las diferentes páginas. También ayuda a garantizar que el desarrollo futuro o la producción de terceros sigan las directrices de la marca y se perciban como parte de la marca general.

Luke Clum ha tocado la superficie de la utilización de guías de estilo como su primer paso en el diseño web el año pasado y me gustaría echar un vistazo más a fondo sobre cómo crear una guía de estilo de diseño web utilizable para sus proyectos.

Una guía de estilo es una colección de elementos prediseñados, gráficos y reglas que los diseñadores o desarrolladores deben seguir para asegurar que las piezas separadas del sitio web serán consistentes y crearán una experiencia cohesiva al final.

Es muy importante cuando varios diseñadores trabajan en un gran sitio o aplicación web para asegurarse de que no interpretan demasiado y no alteran o ajustan los estilos en función de sus preferencias personales. En el desarrollo, tener definidos los elementos del sitio web facilita a los desarrolladores la reutilización de estos elementos. Además, puede facilitarles la tarea porque tendrán los elementos que tienen que codificar y verán exactamente cómo tienen que ser desde el principio.

Plantilla de directrices de marca

Esta pregunta, aparentemente inocua, puede suscitar un intenso debate y es poco probable que se resuelva. La propia naturaleza del código web, que es libre, abierto y compartible, también lo hace susceptible de interpretación. Y aunque tenemos estándares web para especificar qué etiquetas, atributos, declaraciones y elementos pueden usarse y cómo funcionan, no hay reglas ni siquiera directrices sobre cómo deben ordenarse e implementarse exactamente estos componentes del código de forma estructurada. Esto deja a cada diseñador y desarrollador con sus propias reglas y mejores prácticas, lo que a su vez conduce a una miríada de preferencias individuales en un espacio donde la estructura y el orden deberían ser el objetivo absoluto.

En respuesta a esta falta de estructura, a menudo caótica, esa misma tendencia hacia el código libre, abierto y compartible ha provocado un nuevo movimiento entre los creativos de la web: Crear y compartir guías de estilo o “bibliotecas de patrones” para el diseño, el código y el proceso. Aunque originalmente se pensó como una forma de garantizar la coherencia entre proyectos y equipos, la creación y el intercambio de guías de estilo para el diseño y el desarrollo web se está convirtiendo rápidamente en una forma de enseñar las mejores prácticas, introducir nuevos conceptos e incluso mostrar los mejores activos a la comunidad.

Cómo diseñar una web

Cuando se trata de diseñar o rediseñar un sitio web, es fácil obsesionarse con la estética. ¿Queda bien ese tono de azul? ¿Debería estar el logotipo a la derecha de la pantalla o a la izquierda? ¿Y si ponemos un GIF animado gigante en medio de la página?

Sin embargo, en un mundo en el que la gente tiene más de 1.800 millones de sitios web en los que potencialmente puede aterrizar, hay que asegurarse de que el suyo no es sólo una cara bonita. Debe diseñarse en función de la usabilidad, es decir, la facilidad de uso de su sitio web, y la experiencia del usuario (UX), es decir, lo agradable que resulta interactuar con su sitio web.

Ahora bien, podría pasar años estudiando los entresijos de estas disciplinas, pero para darle un punto de partida, hemos reunido una lista de las directrices fundamentales y las mejores prácticas que puede aplicar a su próximo rediseño o lanzamiento de un sitio web. A continuación, revisaremos 10 características que necesitará en su sitio para poner en práctica estas recomendaciones. Entremos en materia.

Si bien la apariencia de su sitio web es ciertamente importante, la mayoría de las personas no llegan a su sitio para evaluar lo elegante que es el diseño. Lo que quieren es realizar una acción o encontrar una información específica.

Directrices de diseño

Aunque muchas de estas directrices pueden aplicarse al diseño web en general, son especialmente importantes a la hora de diseñar la página de inicio, porque es mucho lo que está en juego. Su página de inicio es a menudo la primera -y posiblemente la última- oportunidad de atraer y retener a cada cliente, algo así como la portada de un periódico. Uno de los mayores valores de la portada de un periódico es la prioridad que se da a las noticias más importantes. Todas las páginas de inicio se beneficiarían de ser tratadas como la portada de un periódico importante, con editores que determinen el contenido prioritario y garanticen la continuidad y la coherencia de estilo.

Incluso pequeños cambios en las páginas de inicio pueden tener efectos drásticos. Pensemos en la página de inicio de The New York Times. Si se mantuviera todo el diseño y la redacción exactamente igual en este sitio, pero se decidiera mostrar sólo el contenido local de Nueva York en la página de inicio y enlazar con todas las noticias nacionales e internacionales, se alteraría inexorablemente todo el sitio. Examinando más de cerca, este cambio no parece pequeño en absoluto.

Aunque le animamos a que utilice estas directrices como lista de comprobación cuando diseñe su página de inicio, reconozca que están escritas de forma abreviada aquí. Tendrá que ver los ejemplos de sitios individuales para ver estas directrices utilizadas correctamente o, más a menudo, pasadas por alto. Este es un libro ampliamente ilustrado, y sólo en el contexto de un ejemplo visual se puede apreciar plenamente el impacto negativo de ignorar estas directrices.

Ir arriba