Hablar de Diseño web no solo es hablar de un diseño bonito, hablar de Diseño Web es hablar de todo un proceso creativo y de planificación el cual nos permite elaborar un sitio web que transmite los valores y la esencia de nuestra marca o empresa.
En el Diseño Web como en otras disciplinas, no existe una receta mágica o un algoritmo que nos diga al pie de la letra que debemos hacer. Pero si hay algunas pautas o puntos que nos permitirán desarrollar Sitios Web Profesionales que al final del día cumplan con los objetivos online de nuestro cliente o nuestros.
¿Quieres saber cuales son? Pues prepárate que a continuación te los digo…
1 Define los objetivos
Ya que estamos de acuerdo que los objetivos de un ecommerce no son los mismos que los de una página web de un cerrajero. Por una parte un ecommerce busca vender y por otra la web del cerrajero busca motivar a la gente a llamarle.
Para definir los objetivos de nuestro sitio web podemos utilizar las siguientes preguntas:
¿Porqué y para qué necesita una página web?
¿Hacía quién va dirigido el contenido?
¿Qué espera conseguir con su página web?
2 Define los contenidos
Y no me dejarán mentir todas las personas que hayan utilizado una plantilla ya hecha por ejemplo de WordPress, que por más que intentes que tu página se parezca a la de la Demo no lo consigues, ¿Esto por qué? Porque el contenido no es el mismo.
Así que diseñadores, atentos con este punto.
Algunos consejos para definir correctamente los contenidos son los siguientes:
Hay que definir el qué: ¿Qué es lo que vamos a decir?
El cómo: ¿De qué manera lo vamos a plasmar dentro de la página web?
El dónde: ¿En que puntos de la web lo vamos a decir?
Y el porqué: ¿Porqué en estos puntos y porque no en otros?
3 Dibuja uno o varios prototipos
En este punto es importante que orientemos al cliente, ya que como muchos dicen por ahí «El cliente no siempre tiene la razón» ¿Porqué? Porque no siempre va a saber qué es lo mejor.
Muchas veces el cliente ve la página de la competencia y quiere imitarla, pero no es consciente que ese tipo de diseño no lo va a llevar a los resultados que quiere obtener. Por eso dibujar el prototipo nos va a ahorrar mucho trabajo, la razón es que cambiar un prototipo es tan fácil como romper la hoja de papel y tomar una nueva y volver a dibujarlo.
4 Utiliza Wireframes
Wireframe
Una etapa posterior a la elaboración de un sketch es la esquematización del dibujo de una forma más visual y detallada, a este proceso comúnmente se le conoce como Wireframing ¿Pero que es un Wireframe?
Un Wireframe es una forma de representar un diseño web de manera estructural analizando las necesidades del usuario, es de decir, de nuevo vamos a ver donde van a ir los elementos de la interfaz de usuario (botones, menús, bloques de contenido, etc) pero de una forma más esquemática.
Es importante mencionar que en esta etapa no se toca nada relacionado a colores, tipografías, medidas, etc.
5 Diseña tu página en un software como Photoshop
Así podremos visualizar como se vera el producto final, definiendo colores, tipografías, medidas, imágenes, etc. Para que cuando empecemos a Maquetar en HTML y CSS ya tengamos una idea clara de que como se verá la página y no estarnos inventando medidas y colores a la hora de la maquetación.
Un consejo que te doy de cara al cliente, es que cuando le pases los diseños que haz elaborado en Photoshop lo hagas con imágenes de baja calidad y a ser posible que no se las envíes, es mejor presentárselas en vivo, ¿Esto por qué? Por una sencilla razón que le ha pasado a más de una persona.
Tú te pasas las horas haciendo toda la maquetación en Photoshop, entonces el cliente tiene un amigo que lo sabe pasar a código, te dice que no le interesa seguir trabajando contigo y aprovecha tu diseño para que se lo haga otra persona.
Aquí siempre es muy importante que vigiles la información que facilitas al cliente para evitar que te pasen este tipo de situaciones, lo ideal es que quedes con él y se lo presentes.
6 Mantén un diseño limpio y fácil de usar
Estos elementos si se utilizan de manera excesiva y descontrolada pueden generar lo que comúnmente conocemos como ruido visual.
Hoy en día la gente se siente más cómoda navegando en sitios web con un diseño limpio en donde puedan encontrar de manera fácil la información que llegaron buscando.
Aquí es importante recalcar que el termino diseño limpio no es lo mismo que minimalista, aunque es verdad que tienen ciertas similitudes pero hay algo que los divide, y es que un diseño minimalista siempre es limpio pero un diseño limpio no siempre es minimalista.
Un diseño limpio se centra principalmente en reducir el número de elementos posibles para ofrecer una buena navegación y experiencia de usuario, centrándose principalmente en el contenido.
7 Utiliza la jerarquía visual
Por lo general el modo normal de leer el contenido de una página web es de izquierda a derecha y de arriba hacía abajo. Por eso es muy importante colocar el contenido más relevante en la parte superior, para que sea lo primero que vea el visitante.
Evita colocar contenido que distraiga al usuario final del contenido principal. Los contenidos que podemos considerar como distractores son: Banners, ventanas de alerta, audios de fondo, entre otros.
8 Mantente al tanto de las últimas tendencias
Mantenerse al tanto de los últimos cambios en el ecosistema de los diseñadores y desarrolladores web es sumamente importante para poder ofrecer a tus clientes Diseños frescos e innovadores.
Ahí encontraras el portafolio de miles de Diseñadores Gráficos y podrás ver que tendencias son las que están utilizando actualmente.
9 Prioriza la velocidad de carga
Muchos Diseñadores Web no se preocupan de esta parte y al final maquetan una web muy chula a nivel de Diseño pero muy lenta a la hora de cargarla.
Mi recomendación es que busques un equilibrio entre diseño y velocidad, analiza si los elementos que estas colocando son realmente necesarios o si se puede prescindir de ellos sin afectar el mensaje que se desea transmitir.
10 No te olvides de los dispositivos móviles
Hay que tomar en cuenta que hoy en día la mayoría de búsquedas se realizan desde un dispositivo móvil como un celular o una tablet. Si nuestra página no esta preparada para mostrarse adecuadamente en estos dispositivos estaremos perdiendo visitas y clientes.
De hecho hay una tendencia de desarrollo que se ha popularizado bastante y es el Mobile First la cual consiste en empezar a diseñar el sitio a partir de un Diseño para móvil y a partir de ahí irlo adaptando hasta llegar a un diseño web de escritorio.
Espero que con estos 10 puntos clave ahora tengas un poco más claro como desarrollar un sitio web profesional y sorprendas a tus clientes.
Como mencione, el diseño web no solo son gráficos bonitos, sino que es todo un proceso que nos llevan a obtener un producto de calidad.