Tips para maquetar una página web
A veces a los desarrolladores frontend nos a tocar diseñar y maquetar páginas web con menos del tiempo que tenemos disponible, tal vez porque la empresa no cuenta con un diseñador web o porque eres la única persona que sabe de estos temas y lo tienes que hacer. Pero no te preocupes aquí te presento unos tips para puedas causar una buena impresión al momento de maquetar una página web.
Realizar bocetos (Wireframe)
Se recomienda elaborar los bocetos antes de comenzar a maquetar, para que tengas una idea clara sobre la distribución de elementos como: la cabecera, el menú de navegación, los titulares, párrafos, imágenes,banners de publicidad,etc
Además así te ahorras malos entendidos con el clientes, porque en el boceto está la estructura del diseño.
Emplear Paleta de colores
Como todo diseño que debe ser bonito, atractivo y que cause una buena impresión, para eso los colores deben contrastar, pero no te preocupes si nunca has visto este tema, aquí te presento algunas paletas de colores que te ayudarán con la combinación de los colores para tu sitio web.
Emplear las etiquetas de HTML5
Aún existen proyectos que solamente usan la etiqueta <div> para la agrupación de elementos, y eso perjudica el posicionamiento en los motores de búsqueda, ya que según GOOGLE, los proyectos web deben usar las etiquetas de HTML5 para mejorar el nivel de indexación. HTML5 nos muestra una alta variedad de etiquetas tales como:<header>, <nav>, <figure>, >figcaption>, >aside>, <main>, <footer>, etc.
Usar los prefijos para las propiedades de CSS3
Es importante colocar prefijos cuando estés usando las nuevas propiedades que trae CSS3, para no tener problemas de incompatibilidades entre navegadores y así los usuarios no sientan diseños diferentes al usar navegadores web diferente versión.
Comprobar tecnologías HTML5, CSS, SVG
Si bien es cierto que los prefijos nos ayuda para la compatibilidad de las propiedades de CSS3 con los navegadores; CSS, HTML5, SVG tiene una infinidad de propiedades que los navegadores no soportan, pero tranquilo aquí te presento a Can I use, una página web donde puedes comprobar qué propiedades funcionan en un navegador y cuáles no.
Utilizar tipografía para los iconos
Empieza a dejar de usar imágenes para los iconos, esto lo puedes reemplazar usando la regla @Font-face, que nos permite manejar cualquier tipografía para los iconos, para esto te presento esta plataforma IcoMoon.
Documentar el código
A veces por el apuro olvidamos dejar documentado todo lo que estemos haciendo, y es necesario hacerlo para tener un seguimiento de lo que se está realizando para cuando otra persona comience a trabajar bajo al proyecto, no le tome mucho tiempo entender el trabajo realizado.
Si quieres recibir más tips, no olvides registrarte a nuestro newsletter!
