El diseño web se alejó de la sobrecarga de información a una estética que gira alrededor de un espacio vacío y la simplicidad . Siguiendo el ejemplo de revistas , páginas web están utilizando las grandes fotografías de alta definición y la tipografía para atraer a los lectores con los abrelatas del ojo -agradable antes de revelar más contenido.
Este diseño está influenciado por un nuevo llamamiento a la simplicidad y por la necesidad de atender al tráfico web móvil , que va en aumento cada año. Frente a este empuje para cortar el exceso , aquí son 14 las tendencias de diseño que han criado a sus jefes lo que va del año .
1. Minimalismo
Desde logotipos simplificadoras y tipos de letra ( aquí le está mirando , Google ) a la limpieza de las páginas web enteras , el minimalismo es la tendencia que influyen en todos los demás. Sitios web se están centrando más en su contenido real y la reducción de todo el desorden a su alrededor. Pies de página, barras laterales y bordes están desapareciendo , e incluso paletas de colores se están simplificando ya que las empresas hacen hincapié en un color dominante en su diseño visual . Logo cambio de StubHub es un perfecto ejemplo de esta tendencia.
2. Menús preparados para apps
Diseño con el mercado móvil en mente cambia más que la estética. Se ha impactado la forma ilustradores web piensan acerca de la organización de su contenido y la forma en que dejar que los lectores accedan a él . Sticky menús y barras laterales están cayendo en desgracia para hacer espacio para el contenido que los lectores realmente quieren ver. En estos días , los menús están en la parte superior de la pantalla y son en su mayoría ocultos , señalado por un solo icono (a menudo una pila de tres líneas llama una ” hamburguesa ” ) que cuando se selecciona cae o se desliza hacia un menú más robusto. Empresa de análisis de medios de comunicación social Unmetric tiene un maravillosamente simple ejemplo de este estilo de menú.
3. Botones fantasma
Los sitios web se están alejando de los botones fuertes, llamativos , y están adoptando botones transparentes . Debido a que son menos molestas , sitios botones fantasma ayudar a resaltar más el contenido que desean audiencias para ver realmente en lugar de llamada a las acciones que de otra manera obligar a los usuarios a hacer clic. Botones fantasma incluyen sólo el contorno de un botón (sin relleno ), junto con una o dos palabras en tipografía sencilla en el centro. BigDrop , una empresa de diseño web, cuenta con un botón fantasma prominente en su página de destino.
4. El reinado de la imagen
Ya tendencia , la imagen de héroe no ha ido a ninguna parte de este año, pero ha evolucionado. El año pasado , los sitios de toda la web incluyen la imagen de héroe estándar : una imagen de alta definición ( HD) un lugar destacado en la parte superior de una página web que se extendía todo el ancho de la ventana del navegador de un usuario con sólo unas pocas palabras de texto superpuestos ella.
Este año la imagen del héroe ha cambiado en algunas maneras notables . Algunos sitios han tomado la foto HD un paso más y embebido de vídeo HD en su página de destino. Otros siguieron el camino opuesto : borrando la foto de la bandera o eliminar por completo a favor de un fondo simple de color para llamar la atención sobre el texto . El sitio de Spotify muestra una mezcla de estas tendencias , ofreciendo una imagen en la mitad de la página, pero dejando mucho espacio en blanco para su encabezamiento y un botón en colores pastel y el fantasma de arrancar.
5. Tipografía Interesante
Cuando la imagen del héroe se hizo popular , los diseñadores comenzaron a prestar más atención a la tipografía . Recogiendo una fuente atractiva es crucial para atraer la atención del visitante , cuando gran parte de los contenidos del sitio se simplifica y reduce como efecto del minimalismo . Agencia de publicidad RSQ utiliza la tipografía personalizada en su sitio web y cuenta con una declaración de gran alcance sin otras distracciones para poner de relieve su mensaje a las audiencias.
6. Fotos de stock que no se parecen a fotografías de stock
Los días de la genérica de la foto son más ( gracias a los dioses la fotografía ) ; asombrosos efectos visuales son . Con comunidades como 500px y Unsplash , la búsqueda de alta calidad hacer – lo – que-quieras – con – que la fotografía es más fácil que nunca . Como resultado , los sitios web ya no se ven como el resultado de una falta de coordinación foto de juerga de compras . Ahora , lo que realmente sienten genuina.
7. Diseño de una sola página
Nadie quiere hacer clic a través de varias páginas más. En su lugar , los usuarios prefieren desplazarse por el contenido de una página. Esta tendencia también tiene sus raíces en la navegación por Internet móvil, ya que es mucho más fácil para desplazarse hacia abajo con su dedo pulgar de lo que es hacer clic a través de múltiples páginas y esperar a que cada uno para cargar . Este año ha reforzado ese concepto , y mientras unos pocos sitios web son sólo una sola página, más se reduce el número de páginas que tienen y alargando el contenido de cada uno para ser más móvil fácil . La página web de Smartwater utiliza desplazándose con gran efecto , haciendo que el visitante desplazarse hacia arriba en vez de hacia abajo para ilustrar que su agua se destila de vapor.
8. Parallax scroll
Una manera de hacer que los sitios web más atractiva , scroll parallax crea una ilusión tridimensional que atrae al público en el contenido de un sitio. Muchas marcas utilizan ahora scroll parallax para crear un efecto más inmersiva para los visitantes. Peligros de Fracking utiliza esta forma brillante a medida que siga una gota de lluvia de las nubes en las profundidades de la tierra.
9. Diseño modular
Llámalo una cuadrícula, azulejos o tarjetas , cada uno de estos diseños crea el mismo efecto : organizar el contenido de una manera eficiente y estéticamente agradable . Una sola columna de contenido es ineficiente y menos fácil de usar en comparación. El diseño modular permite una página para mostrar más contenido a los usuarios más rápido, de una manera que tenga sentido más intuitivo y crea un diseño más visualmente atractiva al mismo tiempo. En su página web , The Next Web ofrece un ejemplo de libros de texto perfecto de buen diseño modular.
10. La evolución del diseño plano
Diseño plano hizo un gran impacto en los gráficos del año pasado , hasta el punto de que Google lanzó su propia versión de diseño plano llamado diseño de materiales . Diseño de materiales emplea el mismo diseño tan plano estético, centrándose en la simplicidad y la presentación limpia , pero el diseño de Google cuenta con más sutileza. Considerando diseño plano incluye ilustraciones simples para crear el contenido de dos dimensiones reconocible pero minimalista , diseño de materiales utiliza gradientes, ligera animación y sombras para añadir profundidad a la imagen. Con la mayoría de los diseñadores de páginas web en una mentalidad minimalista , diseño de materiales no se va a ninguna parte pronto. A continuación se muestra la página de destino del material Diseño de Blog , que es un gran ejemplo de cómo el material de diseño que funciona para logotipos.
11. Iconos online
Junto con el diseño de materiales , iconos de la línea es el otro movimiento de finalizar el declive de skeuomorphism . En lugar de un icono se ve exactamente como el objeto que representa ( un estilo de diseño que Apple popularizó con sus iconos iOS ) , los iconos se crean con líneas simples y formas que transmiten una acción, objeto o pensaban que todos estamos muy familiarizados. Muchos iconos de línea se han convertido en universal en el diseño web , como el contorno de una lupa de señalización de la función de búsqueda o la hamburguesa ( tres líneas apiladas ) para un menú . A continuación se presentan ejemplos de iconos de línea de OtherIcons .
12. La integración de Google Maps
Google Maps es de todos ir al mapa de servicios, y que sólo es cada vez mejor . Con opciones personalizables , más marcas están integrando el servicio en sus sitios web – un movimiento que es desde hace mucho tiempo . Las empresas pueden añadir mapas a su sitio y personalizar sus colores para complementar su esquema de color preferido. Por ejemplo , Airbnb utiliza Google Maps y marcadores personalizados para ayudar a los usuarios averiguar donde las habitaciones disponibles son y cuánto cuestan , para que puedan preparar una escapada que se ajuste a su presupuesto y estilo.
13. Gráficos vectoriales escalables (SVG)
Cuando Apple lanzó pantalla Retina , diseñadores estaban en pie de guerra . Malestar que , los diseñadores se vieron obligados sus gráficos e imágenes repente parecía pixelados con mayor resolución de Retina para adoptar nuevos métodos que permitan a sus ilustraciones para lucir bien en y ser compatibles con cualquier dispositivo. Afortunadamente , Scalable Vector Graphics ( SVG ) aceptó el reto . SVG presenta gráficos como vectores , lo que les permite a escala con diferentes resoluciones. Con SVG , las imágenes mantienen su claridad y nitidez en todos los dispositivos . Snap.svg , una biblioteca Javascript SVG, tiene muchos ejemplos disponibles , como éste a continuación.
14. Divisiones verticales
Diseños de pantalla de Split están apareciendo por toda la web de este año. Con un diseño de división vertical , los diseñadores son capaces de presentar el doble de contenido a los usuarios en un formato limpio y simple . Los sitios web son divididos en lo ancho y medio , con dos mensajes separados . La pantalla dividida es una gran manera de mostrar la igualdad entre las dos cosas, porque los diseños de Web estándar dictan las cosas más importantes son lo primero. Fabricante de automóviles Peugeot utiliza un diseño de división vertical en su página web para mezclar el elemento humano del coche con el coche en sí , lo que sugiere la relación entre el conductor y el vehículo.