Desarrollo WebDiseño Web

Utiliza la geometría para construir una página web

Por 28 octubre, 2014 Sin comentarios

En la actualidad, difícilmente podrías ser exitoso online si tu página web no es única, moderna e interesante. Año tras año, nuevas modas aparecen, los diseñadores descubren nuevos elementos para usar con el objetivo de convertir cosas comunes en sorprendentes piezas de arte. Ahora, se está hablando del uso de la geometría en el campo de diseño web contemporáneo.

 

Geometry in web design 16

Las páginas web están construidas de cuadros y columnas, ¿no son estos elementos de la geometría? Sí, las formas geométricas yacen en el núcleo de es estos diseños gráficos: aquí nos referimos principalmente a rectángulos y cuadrados. ¿Qué hay de los círculos, hexágonos, triángulos, diamantes y rombos? Estas son las formas originales que definitivamente debes incluir en tu proyecto de diseño web.

 

Este artículo responderá las preguntas como dónde y cómo debes hacer esto y lo más importante: para qué.

 

Geometría: usos y funciones

Los diseñadores web muestran su verdadero talento y sus habilidades cuando logran simplicidad original para sus páginas web. Las interfaces de usuario simples pueden lucir hermosas y las formas geométricas están ayudando a ello. La geometría tiene un gran poder en el diseño de páginas web y en cómo los usuarios perciben lo que ven. Cuando construyes una página web con círculos o diamantes o con cualquier otra forma, inmediatamente te enfocas en ciertos detalles, resaltas el contenido, haces tu diseño atractivo y memorable. Entonces, ¿dónde puede aplicar formas geométricas en tu diseño?

 

1. Usa la geometría para diseñar un logotipo genial y para hacer una página web reconocible

El logotipo es uno de los elementos más difíciles de diseñar porque es tu marca distintiva, es como una firma o, incluso, más. Los usuarios te recuerdan por tu logotipo. Muchos diseñadores usan círculos para representar su marca, así como otras formas geométricas se utilizan bastante. Antes de crear tu logo único, aprende de otros pero no robes ni tomes prestado.

 

Geometry in web design 01

Geometry in web design 02

Geometry in web design 03

BobHunts diseño geometrico

 

2. Usa la geometría en tu diseño de navegación para tener una página simple y original

 

La navegación es un elemento crucial de una página web, en especial porque tiene la influencia más grande en experiencia del usuario. Los métodos de navegación varían bastante, desde los menús horizontales regulares hasta la navegación, el desplazamiento y el deslizamiento orientado de forma vertical. Los principios de simplicidad y de usabilidad debe dirigir tu elección, a pesar que cualquier menú de navegación puede hacerse de forma creativa – incluso la barra horizontal más simple. Si usas la geometría y haces pestañas circulares, cuadradas o triangulares, entonces llevarás a los usuarios a un diseño de navegación.

 

Estructura Geometry in web design

Hay tres rectángulos unidos por líneas y este es el menú de navegación de este sitio. El principio es que hagas click en cualquier de estas formas y aparecerán más de ellos. Cada uno representa una sección de contenido de esta página web.

 

 

Geometry in web design 06

Iconos circulares giratorios forman parte de la navegación de esta página web interactiva. Atrae a los usuarios y los deja jugar un poco.

 

Geometry in web design 07

Se presentan figuras geométricas dimensionales en el menú de navegación actual: el diamante, las flechas, el círculo, el cuadrado y el rombo. Además, son interactivas.

 

Geometry in web design 01

 

Hay líneas azules y rojas en esta página web. Se mueven juntas y, mientras lo hacen, puedes colocarte encima y hacer click en cualquier texto (que es parte del menú) del fondo. Así, se abrirá cada página que incluya este sitio.

 

3. Diseña el fondo de tu página web con formas geométricas para darle una mejor apariencia

Aunque los diseño de fondo de imagen la dominan la web de hoy, los patrones geométricos y las formas separadas correctas pueden hacer la mejor apariencia de primer plano para tu sitio web Antes que nada, esto puede diferenciarte de otros que toman acciones más fáciles y escogen una de sus imágenes de portafolio para que esté en el fondo. El diseño de fondo monocromático también es muy simple (aunque puede lucir muy bien) y, finalmente, una textura o patrón original es una solución maravillosa para crear tu propio estilo y hacer que tu página web sea más fácil de reconocer por los usuarios. usa la geometría para crear mejores diseños y patrones de fondo.

 

Geometry in web design 09

Hexágonos multicolores hacen de este sitio web un sitio con estilo y captura. Una de las secciones colocadas un poco más abajo en esta página ha sido diseñada con otro estilo de diseño hexagonal.

Geometry in web design

Tres formas dimensionales de un color gris neutro se colocan en esta página de fondo para añadir dinamismo, ambiente modernismo y originalidad .

Showpo diseño web simetrico

Este diseño de sitio web de color blanco se ve muy especial debido a los triángulos brillantes en el primer plano. Algunos de estos triángulos forman diamantes cuando se ponen cerca unos de otros.

4. Crear vistas previas de imágenes impresionantes para tu sitio web de portafolio

Las vistas previas de imágenes en un círculo o una forma cuadrada son las más comunes para los sitios web de portafolioa. Allí, en lugar de convertir una página web en portafolio, los diseñadores utilizan pequeñas vistas previas de imágenes en sus páginas principales. Las vistas previas también aparecen en la sección de portafolio dentro de un control deslizante o cualquier otra galería que no quiera decir que muestre todas las imágenes en un tamaño grande. Este enfoque de portafolio es muy fácil de usar, además de que mantiene el equilibrio del diseño de una página web.

Geometry in web design 14

Las vistas previas de imágenes están diseñadas como círculos en este fondo de color oscuro. Ellos toman menos espacio que las imágenes de gran tamaño, se ven precisas y armónicas.

Geometry in web design 06

La geometría toma una parte más grande de este diseño. Además de que cuenta con un menú de navegación muy bien hecho con pequeños cuadrados de color negro, que incluyen vistas previas llamativas de imágenes.

Geometry in web design 14

En lugar de vistas previas de imágenes como en los ejemplos mencionados anteriormente, este sitio web contiene bonitos rectángulos de vista previa para vídeos. La característica distintiva de este diseño de vista previa es la organización de las imágenes: están dispersos en el diseño.

Geometry in web design 15

Este sitio web hace uso de la geometría para el fondo y pre-visualización del portafolio. Las vistas previas de imágenes encajan los pequeños cuadrados de fondo basados en la geometría.

5. Haz que tu producto / Catálogo de Servicios sea utilizable y agradable con el uso de Formas

Un catálogo de productos es una característica de sitio web de comercio electrónico, donde los usuarios buscn una página con una lista de  ofertas disponibles. Podría ser un catálogo de ropa, una tienda de aplicaciones o cualquier proveedor de servicios. Los cuadrados son formas regulares a utilizar por este motivo, y aún se puede ir por más y hacer que tu página de productos luzca de la forma más inusual: el diseño con hexágonos, cometas o diamantes.

Geometry in web design 16

Geometry in web design 17

Haz que tu producto de Servicios sea utilizable

Geometry in web design 12

6. Organiza el Contenido Web de forma creativa en Formas y Bloques

La presentación del contenido tan vital como su escritura. El encuadre sería más interesante para los usuarios, ya que le daría calidad,pero aparecería con horribles arreglos. Usar la creatividad para gobernar este punto es importante, porque cualquier forma se puede utilizar para una mejor exposición de contenido.

Geometry in web design 20

Círculo, semicírculo, triángulo, hexágono, paralelogramo, diamantes están todos aquí en nuestra web para presentar el contenido a los lectores.

Geometry in web design 21

Se usa rectángulos con líneas laterales y espacios para el texto en este sitio, mientras que los iconos en forma de círculo se utilizan demasiado.

Geometry in web design 22

Las secciones de Pop up en el contenido en forma de círculos embellecen este diseño.

Geometry in web design 23

Los círculos desiguales con texto son soluciones creativas geométricas de este equipo creativo de desarrolladores, vendedores y anunciantes. Sin embargo, las imágenes de los empleadores se ponen en círculos perfectos.

7. El contenido se ve mejor con iconos y botones bien diseñados

Los usuarios comienzan a leer una página web desde que la encuentran visualmente agradable. Así es como funcionan los iconos: atraen a los usuarios con el contenido del texto, debido a que un sitio web creado como una pared de texto nunca sería emocionante para los lectores. Un ejemplo muy simple de cómo diversificar su texto es a través del icono de lista. La lista de servicios, o cualquier otro, se puede ilustrar con los iconos del tema en lugar de lo que es una lista de viñetas, como de costumbre, con pequeños círculos. Los iconos de colores de diferentes formas geométricas pueden convertirse en una magnífica colección para acentuar su contenido.

Otra de las funciones de los iconos es la asociación y fuerte construcción de visualización. Un icono eficiente puede sustituir una frase o un texto conjunto. ¿Qué notarías más rápido: un icono de carrito de compras, o un texto que diga ‘carrito’? Claro que sí, el icono sería una mejor opción.

Los iconos pueden ser entendidos de manera diferente si se colocan de manera diferente. Digamos, tienes un conjunto de botones de redes sociales al pie de página y cerca de cada artículo / imagen / producto. Cuando se ve al pie de página se entiende como un botón de Siguiente, pero se pone cerca de la sección de contenido se quiere decir que es un botón de Compartir.

Los iconos apoyan al contenido, son elementos muy vitales en la construcción de tu sitio web y le dan credibilidad.

Geometry in web design 24

Estamos acostumbrados a los iconos circulares de Twitter y Facebook, mientras que este sitio web utiliza paralelogramos en su lugar.

Geometry in web design 25

Los acentos anaranjados en este diseño de sitio web neutro son iconos de un carrito de compras original y botones de diferentes formas.

Geometry in web design-10

Los iconos complejos de círculos y cuadrados son muy creativos, pues realmente hacen un trabajo que llama perfectamente la atención.

Diseño web basado en geometría

Este sitio web utiliza dos diferentes iconos con forma de diamante: uno para el título de la sección de contenido y otro para Twitter. Además, hay muchas imágenes y botones de una forma geométrica circular.

Geometry in web design 28

El logotipo en este diseño es un círculo, y además hay un modelo de globo circular. La parte más interesante es el icono, ya que cuatro iconos en esta página web son interactivos.

Geometry in web design 29

Los iconos de este sitio ayudan a los usuarios a aprender servicios de la compañía de forma más rápida y mejor. Cada servicio en la lista se ilustra con un icono muy bien diseñado.

Geometry in web design 30

Este diseño incluye círculos y rectángulos para compensar iconos creativos que añaden personalidad a este sitio web.

8. Asegúrese de que su CTA es llamativa

La CTA llamativa significa un gran éxito y que duplicará tus posibilidades de obtener una respuesta rápida de los usuarios. Significa todo-en-uno: colorido, bien escrito, y por supuesto, diseñado en una forma agradable.

Haciendo un botón circular CTA, lo haces agradable para los usuarios de móviles. El círculo se asemeja a la huella dactilar y es muy cómodo de usar en las pequeñas pantallas táctiles. Además, el círculo es una forma creativa que tiene muchas variaciones.

El botón cuadrado o rectangular es una cosa muy común en el diseño web. Aunque, se puede especificar con el tamaño más grande, de color más brillante o no.

Las otras formas geométricas, como trapecio, diamante o pentágono se utilizan poco, pero nunca es demasiado tarde para establecer una nueva tendencia.

Geometry in web design 31

Construir con Geometría una web

Geometry in web design 11

Geometry in web design 34

Conclusión

El diseño es una cuestión de gusto, y aquí quisimos mostrar modelos que puedes utilizar para tus diseños de páginas web. Como puedes ver, hay muchas aplicaciones de distintas formas geométricas y a partir de las cuales tu imaginación te mostrará a aún más ideas. ¡Los comentarios y sugerencias son siempre bienvenidos!

Fuente: Instantshift, traducido por Staff Digital.

Mariana Barreto

Mariana Barreto

Directora de Planning en Staff Digital. Más de 5 años de experiencia en Marketing Online y Gestión de Contenidos.

Deja una respuesta