• 0k
  • 0
Diseño Web \ 18 Junio 2012

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

Tips HTML5: 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

 


Bienvenido al

Únete al Blog de Wix ¡Para estar al tanto de novedades!

Hmmm, that's not a valid email address.

¡Suscríbete al Blog! \ 

Diseño web, tendencias, consejos para
emprendedores ¡y todas las novedades sobre Wix!

Hmmm, that's not a valid email address.