Normalmente envían un archivo para representar la visualización en un ordenador, y otro diseño para representarla en un dispositivo móvil.

Como existen infinidad de tamaños de pantalla, estos bocetos sirven como punto de partida para empezar a programar la estructura de la página. A partir de ellos, tendremos que programar un diseño que sea elástico y que permite visualizar los contenidos en muchos tipos de pantalla.

En el ejemplo presentado aquí, vemos que el cliente quiere una página tipo “landing page“ que presenta pocas complicaciones. Lo que salta a la vista directamente es que el diseño utiliza un tamaño de letra bastante pequeño en algunas zonas, que resultará imposible de leer en pantalla.

Lo primero que hay que hacer es pensar en cómo separar los varios elementos del diseño. Cogemos el diseño en Photoshop, y empezamos a dividirlo en secciones. Cuando hagamos esto, tenemos que tener en cuenta el diseño móvil. Si pensamos ahora cómo irán organizadas esas mismas secciones en el formato móvil, nos ayudará en el momento de adaptar el diseño. Lo más típico suele ser columnas que se convierten en filas, o encabezados que se cambian de tamaño. 

El siguiente paso es empezar a trasladar las secciones que hemos pintado sobre el diseño de Photoshop a código HTML y elementos CSS. Empezamos de fuera hacia dentro. Creamos cada sección, y luego la rellenamos con sus sub-secciones hasta llegar a los elementos de contenido. Luego añadimos el texto, y posteriormente aplicamos la tipografía especificada en el diseño.

Una vez que esté todo el texto, ajustamos el tamaño y colores de la tipografía para que se aproxime al diseño. No buscamos utilizar el tamaño exacto; lo importante es mantener las proporciones entre encabezadas y párrafos. 

El próximo paso es añadir los elementos gráficos al diseño. Estos pueden ser vectores, fotografías, iconos, etc. Los integramos en el código en bruto, y luego programamos sus características de acuerdo con el diseño entregado. 

Finalmente, y si así lo desea el cliente, aplicamos elementos de animación e interactividad.