Featured

7 consejos para maquetar páginas web

By Ana Ramirez - Ilana Milkes | 7 de marzo de 2018
  • #HTML
  • #maquetación
  • #páginas 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.

1. 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.


2. 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.

COLOURlovers

Adobe Color

Coolors


3. 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.


4. 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.

5. 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.



caniuse.com

6. 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.

icomoon.io

7. 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.

Default author

Ana Ramirez - Ilana Milkes

VP