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


Hazlo tú mismo! Agrega formas a tu página web

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


Ventana de elegir forma


  • 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



Una forma insertada al editor


  • 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



Cuadro de estilos


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



Ventana Advanced Styles

Haz clic en Aceptar para guardar los cambios


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



Juega con todas las formas en el editor


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!



Sitio de Column Five Media

Column Five Media



Sitio de vlog.it

vlog.it (Marco Rosella)



Sitio de Headlamp Creative

Headlamp Creative


Sitio de Mickaël Larchevêqu Interactive Designer

Mickaël Larchevêque | Interactive Designer




#ConsejosdeDiseñoWeb

es03.png