Tips HTML5: Cómo agregar formas a tu página web

• Tweet

Si vives en el planeta Tierra y, ocasionalmente, navegas por internet, es posible que recientemente te hayas preguntado: ¿Qué están haciendo todos estos círculos por aquí? La respuesta es simple: En estos días las formas son una tendencia de moda en el diseño web.

Puede que esto te sorprenda ya que los cuadrados, círculos y triángulos generalmente no se consideran muy cool. Entonces, ¿qué hace que las formas sean tan atractivas, de repente?

Una respuesta es que las formas han sido siempre una parte integral del diseño web. Se utilizan para marcar fronteras claras y crear una jerarquía visual que es crucial para una experiencia de usuario positiva.

Recientemente, sin embargo, las formas han pasado a ser elementos funcionales en las páginas en lugar de meros dispositivos estéticos. Una posible explicación podría ser que los diseñadores web y usuarios de Internet están buscando nueva simplicidad. Las formas tratan de volver a lo básico. Entre las animaciones, gráficos ricos y explosivos y los colores llamativos que se encuentran en el diseño web hoy en día, las formas ofrecen un estilo de corte limpio. Sencillo pero elegante.

Si tu encuentras irresistibles a las formas y quieres usarlas en tu página web HTML5, basta con seguir estos sencillos pasos:

Cómo agregar formas a tu página web en HTML5

• En el editor de HTML 5, haz clic en Add y elige Shapes & Lines

• Haz clic en Box, y observa la forma que se introdujo a tu editor (la forma predeterminada es un cuadrado)
• Para elegir otra forma, haz clic en Change Style en la ventana de Box Settings

• En el nuevo campo que se abrió, verás cuatro estilos que puedes implementar a la forma. Cada estilo puede ser más personalizado, haz clic en Edit Style

• La ventana Advanced Styles te permite escoger entre diferentes formas (círculo, cuadrado en ángulo suave, banner, etc.) En este caso, también puedes personalizar los bordes y el color de la forma.

• Haz clic en Aceptar para guardar todos los cambios.

• En el mismo editor, puedes mover la forma alrededor de la página hasta que encuentras la posición que te gusta, así como jugar con el tamaño de acuerdo a tus necesidades.

Formas que inspiran

Aquí hay algunos ejemplos de cómo el uso creativo de las formas puede contribuir al diseño de tu web. ¡No seas cuadrado!

Column Five Media

vlog.it (Marco Rosella)

Headlamp Creative

Mickaël Larchevêque | Interactive Designer