Maquetado Práctico
Existe una enorme variedad de herramientas para maquetar páginas web y trabajar de una forma totalmente sencilla y funcional sin entrar o tocar código. Son innumerables, propuestas por aplicaciones (Adobe Dreamweaver es un ejemplo) o directamente por plataformas online como Wix. Sin embargo, para un diseñador web, conocer los procedimientos manuales es fundamental. HTML5 y CSS son los pilares fundamentales para la maquetación de webs y landing pages.
Sin embargo, más a menudo de lo que quizá podrías esperar, tendrás que recurrir a aplicaciones como Indesign o Adobe Photoshop para complementar tus labores de maquetación y darles un acabado perfecto. Veremos cómo podemos maquetar una página web utilizando Adobe Photoshop. En esta primera parte nos quedaremos en el trabajo a desarrollar desde Photoshop, mas adelante pasaremos a ver cómo podemos aplicar este trabajo ya directamente en código HTML para hacerlo funcional.
Para comenzar con la maquetación y el diseño de una página web es tremendamente importante que empecemos definiendo cuáles serán los elementos básicos, esto es el esqueleto. Esta estructura servirá como soporte para sostener todos los contenidos (ya sean textuales o multimedia). Al definir cada una de la secciones que componen a nuestra página podremos trabajar sobre ellas con total exactitud y proporcionar un diseño visual lo más acertado posible.
Es muy importante que tengamos en cuenta las dimensiones que tendrá nuestra web, si tendrá un formato boxed o Full-width. Una página web de tipo boxed estará dentro de un pequeño contenedor y por lo tanto aparecerá un espacio alrededor de la misma. Por el contrario, una web full witdth ocupará la totalidad de la pantalla del dispositivo que reproduzca la página. Escoger entre una modalidad u otra responde a cuestiones meramente estilísticas y dependerá también de las necesidades que tenga el proyecto sobre el que estemos trabajando. Nosotros trabajaremos en este ejemplo con la modalidad boxed por lo que no ocupará la totalidad del espacio que proporcione el navegador.
Fuente https://www.wikipedia.org/
No hay comentarios:
Publicar un comentario