Diseño web en 5 pasos.

Crear una pagina web requiere creatividad, ya que podemos ofrecer  buen contenido, pero si no lo presentamos de una manera que le guste  al usuario, podemos perder su atención. El proceso para diseñar una  pagina web puede ser tan extenso o tan corto como queramos. Los 5  pasos para el diseño web que presentamos solo son una guía, de manera que te puedes  brincar, agregar, quitar o modificar pasos a tu conveniencia.  

1.- Inspiración 

Al igual que con cualquier otro proyecto creativo, ya sea un  libro, canción o pintura, al principio podemos bloquearnos y no  saber por donde empezar. Ver la pantalla en blanco significa  que hay una infinidad de posibilidades, y tanta libertad puede  presentarse como problemas para decidir. Recomendamos empezar  haciendo un tablero, contenedor, o cualquier cosa donde puedas  ir almacenando fuentes de inspiración (ya sea en Pinterest, Word, una libreta, o donde prefieras), y segmentarlo en cosas  que te vayan gustando. Estas secciones no tienen que estar  todas definidas desde el principio, puedes empezar con las que  quieras, por ejemplo: Paletas de Colores, “Layouts”,  Tipografías y Funcionalidades. Busca páginas relacionadas al  concepto principal de la página que estés intentando crear y ve  guardando lo que te guste de ellas (o hasta la pagina  completa). Puedes complementar con páginas que recolecten  recursos creativos, por ejemplo: 

• https://www.awwwards.com/ 
• https://tympanus.net/codrops/collective/ 
• https://thefwa.com/ 
• https://www.cssdesignawards.com/ 

2.- Selección 

Una vez que tengas una cantidad decente de recursos en tu  tablero/contenedor, es hora de empezar a seleccionar los que  tengan mas sentido para tu página.  

Hay que tener cuidado con cuantos recursos agregamos. No porque  algo nos guste, significa que hace sentido para el proyecto y  viceversa. 

Ahora que el numero de recursos en todo tu contenedor se ha  reducido, probablemente habrás adquirido una noción de que no  será tu página, ya que lo descartado te indica que eso esta  fuera del concepto de tu página y la idea no va por ahí. Con  los recursos que te hayan quedado, puedes intentar hacer  combinaciones, o dejarlo para después.

3.- Maquetado 

En este punto ya tenemos una buena idea de como queremos que se  vea nuestra página, por lo que ya podemos empezar a hacer  pruebas para ver de manera mas concreta nuestra pagina hace  sentido. Para ir armando nuestra página, podemos irla  implementando con nuestro creador de contenido, código, o con  algún programa para maquetado de páginas, como Adobe XD o  Figma. Si ya estamos muy seguros del rumbo que tomará nuestra  página, podemos empezar con nuestro CMS o código, pero si aun  estamos probando cosas, seria mas conveniente empezar con  programas de maquetado, ya que corregir y cambiar cosas será más fácil y rápido. Si estamos indecisos sobre alguna sección en particular, podemos poner la sección duplicada (una con cada  estilo diferente) para ver cual se siente mejor. 

4.- Refinamiento 

Cuando nuestra página ya esta como queremos, ahora hay que  arreglar cualquier detalle que no hayamos considerado en las etapas anteriores. Cosas como optimizar cuando se carguen  fotos, vista de celular, accesibilidad, responsividad o cosas  similares (cambiar el codigo, cambiar plugins, reacomodar,  etc.). Podemos concluir esta etapa, hasta que tengamos  confianza de ningún usuario va a tener problemas con nuestra  página (o al menos muy pocos). 

5.- Pruebas 

Revisar que todo funcione, que nada se quiebre y que todo sea  entendible. Sería bueno ver como interactúan distintos usuarios  con el diseño de tu página, ya que a veces creemos que hay  cosas que son obvias, cuando en realidad no lo son. Puedes  hacer las pruebas de manera física y ver como reaccionan los  usuarios, o con software de analítica para este tipo de cosas,  como: 

• Google Analytics 
• Yandex Metrica 

Durante todo este proceso simplificado de diseño web en 5 pasos, hay que tomar en consideración cuales son  nuestros intereses, ya que si estamos haciendo la página para alguien  más, es vital que estemos rebotando ideas en cada etapa con los  interesados, ya que al final la página será de ellos.

Comparte si te gustó el artículo