11 recursos para ayudarte a crear un sitio adaptable de diseño plano

El eslogan del diseño web de 2014 bien podría ser «Flat is Where It’s At».

En toda la web, encontrará docenas de tutoriales, elementos y ejemplos que le muestran cómo crear su propio diseño web de estilo plano.

Pero, ¿qué es exactamente un diseño plano y por qué debería importarte?

Resulta que el diseño web plano se trata tanto de marcar tendencias como de mejorar la experiencia del usuario. Vamos a hablar acerca de por qué y cómoy luego compartiré 11 recursos para ayudarlo a crear su propio sitio receptivo de estilo plano.

¿Por qué diseño plano?

El diseño plano ha existido por un tiempo, pero realmente despegó cuando Windows 8 y su interfaz «Metro» llegaron al escenario, cambiando las tendencias de diseño de texturas voluminosas y degradados a colores vibrantes, formas simples y elementos «planos», de ahí el nombre. .

También hay un cambio considerable hacia más espacios en blanco y tipografía grande, lo que facilita la navegación por el diseño en una variedad de dispositivos.

ejemplo

Un ejemplo de un diseño web plano

El diseño plano es también la antítesis de esquemorfismo, un término de diseño que simplemente significa un gráfico digital que se inspira en un objeto de la vida real.

Los diseños anteriores de Apple se centraron en gran medida en el ángulo de escepticismo: puede ver las manecillas del reloj analógico o hacer clic en los botones de la calculadora digital. Excepto que cuando está sentado frente a una computadora, el reloj analógico en su pantalla es difícil de leer, y los botones de la calculadora son difíciles de hacer clic individualmente cuando simplemente puede escribirlos.

interfaz de manzana

El reloj analógico y la calculadora de Apple son engorrosos de usar en un entorno de teclado/ratón

Aquí hay otro ejemplo. Observe los íconos realistas convertidos en formas simples:

skeumorfico 02 comparación plana

Skeumorphism vs. Flat Design – Fuente: Principios básicos del diseño plano

En estos casos, los botones grandes, planos y fácilmente pulsables y las interfaces digitales serían mucho más atractivos. Y esta idea finalmente se ha extendido también a la web.

¿Qué significa para los usuarios del sitio web?

Los sitios web se adaptan naturalmente a los bloques de contenido, un tipo de diseño donde el diseño plano es totalmente cómodo.

Y, aunque no recomiendo deshacerse de su diseño actual solo para adoptar una tendencia que no tiene sentido, existe una marcada diferencia en las tasas de conversión de los sitios más simples y claramente ilustrados en comparación con sus contrapartes abarrotadas.

Además, los diseños planos son infinitamente adaptables y encajan perfectamente en entornos móviles, así como en tabletas y computadoras normales, lo que los hace ideales para diseños adaptables.

¿Cómo puedo crear uno?

¡Me alegra que hayas preguntado! Hay toneladas de recursos de diseño para ayudar a cualquiera que quiera crear un diseño de sitio web plano, pero a continuación se enumeran algunos de mis favoritos personales que abarcan una variedad de categorías.

Estructura alámbrica (GIF y PSD)

estructuras alámbricas

Este diseño de estructura alámbrica (también disponible como PSD) lo ayudará a diseñar su nuevo sitio web plano de acuerdo con las mejores prácticas de diseño.

Conjunto de interfaz gráfica de usuario plana

psds

esta colección contiene 7 PSD, un PSD vectorial, más de 500 elementos individuales, así como iconos vectoriales. 30 colores diferentes disponibles. Todo, desde listas de reproducción de música hasta detalles de contacto y mensajes de error, se incluye aquí en un estilo plano. Versiones gratuitas y comerciales disponibles.

Marcos receptivos

Furato

furatoFuratto es un marco receptivo de código abierto hecho con elementos de diseño plano

Furato incluye elementos para páginas de destino, presentaciones de diapositivas en carrusel, plantillas básicas y un tablero, entre muchas otras cosas. Su flexibilidad y facilidad de uso le permiten crear diseños elegantes sobre la marcha.

CSS web receptivo

sensible

Diseñe diseños receptivos en minutos con Responsive Web CSS

Responsive Web CSS es una forma rápida de crear un prototipo de cómo se verá su diseño en una variedad de dispositivos. Este método ahorra horas de tiempo y lo ayuda a obtener el diseño perfecto sin complicaciones ni conjeturas.

Oreja

oreja

de twitter marco de arranque es una de las opciones más populares para crear rápidamente diseños adaptables.

ejemplos de arranqueEjemplos de sitios construido con Bootstrap

Iconos y Elementos

¿De qué serviría un diseño plano sin los iconos, botones y otros elementos correspondientes que lo hacen destacar? Estas son algunas de las mejores selecciones gratuitas:

Simple y audaz

SimpleBoldUIElementsElementos de interfaz de usuario simples y audaces

Dribble le brinda una variedad de elementos de interfaz de usuario en tres esquemas de color distintosincluidos íconos, mapas, calendario, cuadro de búsqueda y más.

Kit de interfaz de usuario plana PSD

flatui tanone

Aquí hay un hermoso kit de interfaz de usuario de Riki Tanone. Una versión de blog también está disponible desde ese enlace.

Iconos sociales planos

social2

Pixedon ofrece 16 estilos planos iconos de redes socialesdisponible como PSD.

Más iconos sociales planos

iconos sociales

Si su red social favorita no se incluyó en los 16 diseños de íconos planos anteriores, seguramente estará en esta colección de 40 iconos sociales.

Más de 3000 iconos planosplano

Obtener Más de 3000 iconos planos de IconShock, disponible como variedades gratuitas (personales) y comerciales.

Colores planos de interfaz de usuario

colores

Colores planos de la interfaz de usuario le brinda colores con píxeles perfectos para su diseño web plano. ¡Solo haz clic y pega!

¿Cuáles son algunos de sus recursos favoritos de diseño web plano?

Esos son mis favoritos. ¡Comparte el tuyo en los comentarios a continuación!

Lea otros artículos de Webinpixels de Sherice Jacob