Aquí puedes ver el listado completo con los 5 artículos escritos sobre sobre Diseño web en ARCHTKT.
¿En qué consiste el diseño web?
El diseño web es la tarea de proyectar, jerarquizar, prototipar, diseñar, implementar y mantener un sitio web. Esta tarea de diseño abarca varias disciplinas, no sólo el diseño gráfico, sino también el diseño de interfaz, usabilidad, experiencia del usuario, arquitectura de la información y optimización del rendimiento.
En empresas especializadas, la tarea de diseño web normalmente se divide en pequeños equipos de profesionales especializados cada uno en una disciplina de las antes mencionadas.
El diseño web bien hecho tiene consecuencias positivas en los objetivos fundamentales de la página web. Jerarquizar correctamente los contenidos, proyectar y prototipar con antelación el conjunto de la web, estudiar bien el diseño a implementar y finalmente testear la usabilidad con usuarios reales son algunas de las medidas que los diseñadores web toman para hacer bien su trabajo.
Los principios del diseño web
El diseño no es sólo cómo se percibe ni cómo se siente. El diseño es cómo funciona.
Steve Jobs.
Finalidad
La finalidad del diseño web es siempre atender a las necesidades del usuario. Cada una de las páginas de tu sitio web debe tener un propósito claro, y para satisfacer una necesidad específica de los usuarios de su sitio web de la manera más eficaz posible.
Comunicación
Los usuarios de internet quieren tener acceso a la información rápidamente, por lo que es importante comunicarse con claridad y hacer que el contenido sea fácil de leer y digerir. Algunas estrategias eficaces para conseguir esto son: organizar la información utilizando titulares y subtítulos, utilizar listas para agrupar información e ir lo más rápido posible al grano.
Tipografías
En general, las fuentes sin serifa (Sans-Serif – fuentes sin decoraciones) como Arial y Helvetica son más fáciles de leer y digerir cuando se está leyendo en una pantalla. El tamaño ideal para el texto de una web es de 16px y altura de línea entre 1.4 y 1.7. Es imprescindible en el diseño web evitar la saturación de tipografías no utilizando más de tres diferentes para un mismo sitio web.
Colores
Una paleta de colores bien pensada es el comienzo para mejorar la experiencia del usuario. Por ello es uno de los primero pasos del diseño web. Los colores complementarios crean equilibrio y armonía. Es imprescindible el uso de colores bien contrastados entre el texto y el fondo para hacer más fácil la lectura.
Por otro lado, los colores vivos evocan emociones y acciones, y deben utilizarse con moderación. Un ejemplo de donde usar colores vivos es en botones y llamadas a la acción. Y por último, el espacio en blanco – espacio negativo ayuda a separar el contenido, delimitando grupos y haciendo que el texto sea más fácil de digerir.
Imágenes
Una imagen vale más que mil palabras, y la elección de las imágenes para tu sitio web puede mejorar el posicionamiento de marca y la conectar con tu público objetivo. Todas las imágenes utilizadas en el diseño de una web deben seguir una misma estética para crear una buena experiencia para los visitantes.
Es muy importante conseguir imágenes únicas, huir de las fotos de stock. Utilizar imágenes que nadie más ha usado mejora el posicionamiento en buscadores. Para mejorar la calidad de las fotos usadas es muy probable que sea necesario contratar un fotógrafo o un diseñador gráfico que hagan las imágenes para la web.
Navegabilidad
Una buena navegabilidad en tu sitio web permite a los usuarios moverse entre páginas, completar tareas y encontrar lo que buscan de la forma más simple y fácil posible. Algunas técnicas para mejorar la navegación es utilizar una jerarquía lógica de páginas, usar breadcrums (migas de pan), diseñar botones que parezcan seleccionables y cumplir la regla de tres clicks de distancia. La regla de los tres clicks consiste en que cualquier visitante puede acceder a la información que busca pulsando en sólo tres enlaces.
Estructura de la web
Colocar el contenido al azar en una página web puede terminar con una apariencia desordenada y caótica. El diseño web basado en una cuadrícula organiza el contenido en secciones y columnas que se alinean y dan una sensación de orden estructurado y proporciona un mejor aspecto. Es imprescindible, que si se toma un criterio de ordenación del contenido, este se repita y se reutilice para acostumbrar al lector a través del sitio web.
A diferencia de lo que ocurre con los medios impresos, las personas exploran las pantallas de los ordenadores siguiendo un patrón “F”. Empiezan por la parte superior izquierda de la pantalla, desplazándose de izquierda a derecha sin llegar al final, después vuelven al principio y luego hacia abajo. Esto provoca que el lado derecho de la pantalla rara vez se vea. Lugar donde normalmente se sitúa la barra lateral o Sidebar.
En vez de tratar de forzar el flujo visual del usuario, el diseño web eficaz trabaja con el comportamiento natural del visitante, mostrando la información en orden de importancia (de izquierda a derecha y de arriba a abajo) y evitando poner contenido importante en la Sidebar de la derecha.
Tiempos de carga
A nadie le gusta un sitio web que tarda mucho tiempo en cargar. Es más, en el móvil, el 40% de los usuarios abandonará una web que tarda más de 3 segundos en cargar.
Para mejorar los tiempos de carga hay que optimizar el rendimiento de la web. Para ello, es necesario reducir el tamaño de los recursos, mejorar el servidor en el que la web está alojado, reducir tiempos de redirección, combinar y minificar archivos CSS, JS, comprimir imágenes, etc.
Multi-dispositivo
Hoy en día es muy común acceder a los sitios web desde varios dispositivos diferentes. Estos dispositivos tienen distintos tamaños de pantalla, con resoluciones diferentes, por lo que es importante tener en cuenta que una web se tiene que poder ver bien desde distintos tamaños de pantalla y resoluciones.
Así que, a la hora de desarrollar una web, deberás construirla con un diseño adaptativo, responsive, mobile friendly, llámalo como quieras. Básicamente estos términos quieren decir que la web reducirá tamaños de fuentes, reescalará las imágenes y reordenará el contenido en función de la resolución de la pantalla desde la que vea, para que el contenido se pueda ver bien sin quedar fuera de los límites.
¿Diseño web? Primero para móviles
La aproximación al diseño “Mobile First” (Diseño primero para móviles) fue sugerida por Luke Wroblewski, director de producto en Google, en 2009. Este concepto sugiere que primero se diseñe para las pantallas más pequeñas con la intención de añadir experiencias más detalladas según aumenta el tamaño de la pantalla.
El modus operandi contrario al Mobile First es diseñar primero para pantallas grandes, y luego reescalar y reducir el contenido según se va reduciendo el tamaño de la pantalla. Llegando incluso al caso en el que es necesario ocultar por CSS contenido para que no se muestre.
El problema de esta aproximación al diseño y posterior desarrollo es que en el móvil sigues cargando la web completa para escritorio, empeorando drásticamente los tiempos de carga y aumentando la cantidad de megas descargados.
A nivel de desarrollo también aumenta el tiempo de trabajo. Por defecto, el HTML sin estilos, se muestra en una sola columna, como normalmente se desearía en el móvil. Si no se sigue la metodología Mobile First, se deberán hacer más Media Queries para ocultar o cambiar la anchura de las columnas que aparecen en tamaños más grandes para recuperar las columnas de 100% de ancho.
Una vez cogido el hábito de diseñar siguiendo una metodología Mobile First, todo el desarrollo se hace más rápido, mejorando también el rendimiento de la web en móviles, al no tener que cargar exceso de código, CSS e imágenes.
Importancia de seguir un método de diseño web organizado
A la hora de enfrentarse a un proceso de diseño web es imprescindible ser organizado, ir de lo general a lo particular, de lo abstracto a lo concreto. Cuando estás empezando a diseñar una web, si no tienes una planificación, te pones a meter contenido de manera aleatoria, posiblemente copiando otra web.
Es muy importante dejar temas zanjados mucho antes de ponerse delante del ordenador. Primero hay que establecer objetivos, seleccionar el Cliente Objetivo, contestar preguntas claves, hacer bocetos de la estructura y de la navegación, por poner señalar algunas tareas previas.
En el artículo sobre el proceso de diseño de un producto digital te comento más en profundidad los pasos a seguir. Es importante seguir el orden para asegurar la efectividad del diseño. Si los sigues rigurosamente, tu producto digital será de lo mejorcito que encontrarás ahí fuera. Salvo las grandes empresas, pocas son tan estrictas en el proceso, dan prioridad al hacer que al pensar.
Usabilidad, Experiencia de Usuario e Interfaz de usuario
No entraré en profundidad en este tema aquí, para eso están los artículos y la categoría de usabilidad. Pero sí que haré una distinción entre estos tres términos, ya que muchas veces se usan indebidamente.
Usabilidad vs Experiencia de usuario
Usabilidad es la eficacia, la eficiencia, la facilidad con la que un usuario se mueve por una web o aplicación para alcanzar un objetivo concreto. Puedes encontrar una definición mucho más explayada en la página de usabilidad.
La experiencia de usuario (User Experience – UX) es el conjunto de aspectos de la interacción del usuario con una web o aplicación que generan una percepción positiva o negativa de dicha web o aplicación, tanto antes, como durante como después de haberla usado. Y como bien adivinarás, una buena experiencia se convierte en visitas recurrentes, genera confianza y seguridad, mejorando la conversión.
Interfaz de usuario vs Diseño de interacción
La interfaz de usuario (User Interface – UI) es el diseño de la capa de la web o aplicación que ve o percibe el usuario. Se trata de la selección y ordenación de los elementos que deben mostrarse y la posterior homogeneidad en todo el sitio web o aplicación. No confundir con el diseño gráfico, ya que la interfaz se diseña desde la estructura alámbrica, el diseño gráfico es simplemente dar una estética a esa estructura.
Por el contrario, el Diseño de Interacción (Interaction Design – IxD) es el punto intermedio entre la interfaz y el usuario. Consiste en las formas con las que el usuario utiliza la interfaz. Esto es, por ejemplo, el teclado, el ratón, el dedo en el caso de pantallas táctiles, la voz, etc. El IxD se centra en los flujos de uso y las respuestas que debe dar el sistema para hacer evidente la interacción.
Conocimientos y Lenguajes necesarios para el diseño web
Por último me gustaría hacer un recopilatorio de conocimientos previos que tener para ser diseñador web. Quitando los conocimientos teóricos de color, forma, tipografía, estructura y composición que bien se aprenden en cualquier carrera de diseño, y que tienes a mano en cientos de libros y cursos online, nos queda el conocimiento y dominio de las herramientas.
¿Qué lenguajes debería conocer para ser Diseñador Web?
Imprescindible tener conocimientos de HTML y CSS. En este tema no hay tu tía, no te puedes permitir el lujo de diseñar en Photoshop sin tener ni idea de cómo construir eso después en HTML. En cuanto a CSS deberás de estar al corriente de las nuevas incorporaciones, de las incompatibilidades entre funciones CSS, navegadores y versiones.
Me gustaría incluir JavaScript (JS) en este pack. El JavaScript se utiliza principalmente en la web en el lado del cliente (Front-end), lo que se ve en la ventana del navegador. EL JS mejora la interfaz de usuario, permitiendo crear webs dinámicas, con interacciones sin tener que recargar la web.
Si bien es verdad que no es indispensable, el futuro de la web y del Front-end van dirigidos a frameworks que utilizan JS como lenguaje de programación. Además si quieres dar un paso más y mejorar tu cartera de conocimientos como diseñador web, este es tu lenguaje.
Qué tipo de programas se usan
Para diseñar necesitarás un programa de diseño como bien habrás adivinado. El más común entre diseñadores es Adobe Photoshop. Personalmente prefiero programas especializados para el diseño web como es Sketch App, aplicación especializada en el diseño de interfaces tanto para aplicaciones como para sitios web.
A la hora de maquetar en HTML, CSS o desarrollar JS cualquier editor de textos sirve. Pero lo recomendable es utilizar un editor que cambie el color de los elementos para identificarlos mejor, que te ayude con las inserciones de código, incluso que autocomplete las funciones y te cierre las etiquetas. Yo personalmente he usado Notepad++ y Sublime Text en el pasado. Pero en la actualidad me quedo con Atom, es Open Source y a mí me hacen mi trabajo muchísimo más sencillo.
