Cómo se convierte un boceto de photoshop en una página web
Proyectos
Cómo se convierte un boceto de photoshop en una página web

Cómo se convierte un boceto de photoshop en una página web

Muchas veces un cliente envía un diseño previamente dibujado en Photoshop u otro software para mostrar cómo quiere que se vea su página web en pantalla. 


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. 

http://cdwweb.com/news.php?n=Como-se-convierte-un-boceto-de-photoshop-en-una-pagina-web_2020-04-25
800 500
Michael Corrigan
Desarrollo aplicaciones de internet El Puerto de Santa María
11500, Cadiz (ES)

Tel: +34 615 18 73 74 | info@cdwweb.com


Volver a lista de proyectos