Al pensar en el futuro próximo del diseño de páginas web, debemos tener en cuenta todo el amplio espectro de posibilidades que Internet presenta y nos ofrece de nuevo cada día.
Trabajando con innovación y valentía, los diseñadores web pueden empujar, inventar y avanzar hacia los límites de la interacción humana y la imaginación a escala global como se ve a menudo en las agencias de diseño web más punteras, como resultado que marca tendencia con los sitios web productos de las agencias más creativas…
Contenidos interesantes de este artículo:
Tendencias del diseño web para 2015
En este artículo vamos a definir algunas de las tendencias más importantes del diseño web emergente en el año 2015 y gran parte del 2016. Es aquí donde podemos encontrar la verdadera innovación y las nuevas oportunidades de Internet, algunos de los cuales pueden cambiar por completo nuestra concepción de una «página web moderna».
Cada año, el diseño Web crece y aparecen innumerables innovaciones impresionantes que se publican diariamente. Sólo puedo imaginar que lo mejor está aún por venir en el próximo año, incluyendo muchas de las tendencias que previsto para el año siguiente. Si bien muchas de esas tendencias todavía habrá que esperar alrededor del año 2015 (y, probablemente en el año 2016), es el momento de ver nuevas tendencias es probablemente que surjan los próximos meses.
Mientras todo el mundo está reflexionando sobre el año en que fue y de cara a la campaña que será, vamos a echar un vistazo a algunas de las tendencias de diseño web probablemente veremos…
Los puntos básicos más importantes del diseño web son:
1º Las páginas webs desaparecen para dispositivos móviles
Esto se debe a que los diseños actualmente son adaptables, por lo que no se hace necesario que sean exclusivamente para móviles. La implementación de las webs responsives, deja de lado las estructuras móviles.
2º Prevalecen los efectos multimedia
Se eliminan las web en flash que han sido tan utilizadas en el pasado, dando paso a la revolución HTML5. La mayoría de las webs habían perdido su dinámica, por lo cual los textos animados, imágenes en dimensiones full-screen y las transiciones son protagonistas. Creatividad, magia en la apuesta de los diseñadores, dejando aparcado el minimalismo.
3º Posicionamiento SEO fundamentado en el contenido de calidad
Las pautas de Google se basan en la eficiencia que ofrece la web, por lo cual se exige que el contenido mantenga un estilo y forma adecuado a la temática de la plataforma. Debido a que las técnicas SEO han logrado que webs sin bases sólidas alcances los primeros lugares, la exigencia reside en que la información sea de calidad y que se actualice con cierta periodicidad, a través de noticias o blogs. Marketing online en pleno desarrollo.
4º Formatos SVG para las imágenes
Un diseño cien por cien visual se impone, iconos que funcionan en dispositivos móviles con imágenes adaptables, como los son las plataformas.
Un formato que tiene la posibilidad de aumentar o disminuir de tamaño toda clase de imágenes, con la misma calidad para que no se pixelen al cambiar de versión.
5º Eliminación del Hover
Debido al aumento del uso de dispositivos móviles, la función hover antes empleada para crear diferentes efectos al mover el cursor, se dejará de utilizar. La creación de las nuevas webs eliminará esta característica, por el avance acelerado de los smartphones y tablets.
Las actuales tendencias están claramente orientadas, a cumplir las expectativas de los millones de usuarios, por ello se recomienda actualizar las webs en función de los móviles. Una plataforma orientada al usuario con formato, diseño pero con contenido.
6º Un diseño web que debe ser grande.
«Que sea grande»
Parece ser el principio más importante del diseño web hoy en día. Sin embargo, para muchas personas, es difícilmente aceptable que la página de inicio – en concreto con un tamaño del boble – consta de sólo unas pocas palabras superpuestas sobre una imagen o un vídeo. A veces, incluso la navegación se retira o (al menos) se oculta con un pequeño icono predominando la sensación de elementos con grandeza.
Se intenta de ofrecer a los usuarios el máximo impacto ya en la página de inicio utilizando un código sencillo, por lo que funciona bien en los móviles y monitores de ordenador de escritorio (la misma disposición se mantiene sin cambios a pesar del tamaño del dispositivo de visualización).
Las «imágenes de pantalla completa» se pusieron de moda el año pasado, pero con el creciente acceso a las imágenes de alta calidad y utilizando a favor una tecnología más rápida estamos observando cada vez más sitios web que toman este diseño tipo»Cubierta del libro» evolucionando a un siguiente nivel.
La tendencia «Cinematica» se basa en pantalla completa (bueno, pantalla completa o casi) con vídeo incluyendo algunas palabras y elementos superpuestos en la parte superior de la misma.
Ahora la tendencia se está acelerando rápidamente. Sólo el año pasado PayPal actualizó su página de inicio con un fondo de vídeo a pantalla completa – un movimiento catalogado en el sector de histórico que ha contribuido a este concepto en la corriente de innovaciones de diseño web.
7º Diseño web con experiencia multimedia
A mod de ejemplo, la empresa Jack Daniels ofrece un impresionante ejemplo de la moderna «experiencia multimedia»
El concepto de multimedia está bastante anticuado. La palabra en sí ha sido tan usada y se ha abusado tanto que está a punto de perder su significado. Sin embargo, los ejércitos de diseñadores y programadores están constantemente luchando para crear experiencias multimedia cada vez más atractivas en cualquier soporte.
Hace un tiempo, Flash fue la plataforma para estos experimentos. Actualmente es el HTML5 <canvas> elemento que eventualmente permitirá crear casi cualquier efecto visual en el sitio web.
Otro ejemplo notable de una interfaz integrada con HTML Canvas es impulsado por la comunidad del proyecto de ADN del músico con sede en Brooklyn Jonathan Dagan (aka J.Viewz). Una apertura web con un vídeo muy visual de fondo, J.Viewz nos dice cómo planea construir su nuevo álbum musical a través de sus experimentos personales (que los usuarios pueden descargar) y otros colaboradores que pueden subir vídeos, música y un feedback constante.
8. Las mutaciones efecto de Parallax
Parallax ha evolucionado en muchas y diferentes mutaciones que mantienen un factor en común: los diseñadores mantienen el uso de desplazamiento o movimiento del ratón para animar elementos o propiedades de la página. Si se fijan bien, la mayoría de los sitios web utilizan esta lógica. Estos son algunos ejemplos adicionales.
Es fácil apreciar el diseño creativo de la Compañía de Diseño Mint a partir de una antigua técnica de sprites CSS. El resultado es una toma de acoplamiento única en un sitio web sencillo de empresa.
Desplazamiento Innovador: La página QUO + auricular te lleva en un salvaje, viaje laberíntico a través de su página web con un desplazamiento vertical y horizontal – junto con una interesante sección donde se «desplaza» a través de sus colores personalizables de sus productos.
9. Storybook animado
En este tipo de página, similar al primer ejemplo, una secuencia de animación se inicia cuando un usuario llega a una cierta posición de desplazamiento. A menudo, son sólo unos pocos elementos que se deslizan en la página o utilice un fundido de entrada en vigor a aparecer.
La página de producto Boldking (arriba) utiliza SVG ligero y Java Script para presentar una metáfora visual que describe la forma en que funciona su producto. No sólo es la idea y animación increíble, pero igualmente notable es el hecho de que se logró en menos de 1,5 MB del peso total de la página. A veces una sola biblioteca JS tiene este tamaño. Una de las secuencias animadas es aún interactiva.
Ejemplo: La página web de la boda Colin y de Dewi es una manera simple pero muy visual y eficaz de mantener al usuario enfocado al leer una historia. Se le presentará un fragmento de la historia a la vez y, para ver la siguiente parte, es necesario desplazarse hasta ella.
Suena como una funcionalidad de desplazamiento genérico, pero la animación CSS 3D -, así como los fragmentos de ocultación y de texto revelador – hacen que la historia mucho más atractivo.
Encabezado y página efecto de paralaje causado por el movimiento del ratón. Este efecto se utiliza para crear la ilusión de un espacio de 3 dimensiones y funciona bien cuando encajan en la narración visual de la página, como Hábitat Web (arriba) o Archéologie de la Grande Guerre .
Cuando se utiliza con buen gusto, este efecto puede tener resultado impresionante – aunque podemos predecir que probablemente no será demasiado común.
Si llegara a ser muy popular, que podría fácilmente ser percibido como cursi y molesto.
10. Diseño plano
Durante los últimos tres años, diseño plano ha sido aclamado el «rey» muchas veces. Todavía está haciendo muy bien y se va a quedar para siempre – sobre todo en elementos más pequeños, tales como iconos, menús e ilustraciones.
No sólo estos elementos se ven bien (mucho mejor que esos brillante de la web 2.0 iconos que cubren casi todos los sitios web hace unos años), pero son fácilmente escalable y manejable, gracias a la tecnología icono de fuente. icomoon.io es un ejemplo de un servicio en línea lo que permite a todos a crear sus propias fuentes de iconos fácilmente de forma gratuita.
Lab 21 convierte diseño plano en el «diseño de origami».
Vale la pena señalar, sin embargo, que el diseño plana no siempre es tan plana. Los diseñadores a menudo incorporan gradientes sutiles, texturas y fotos para conseguir el efecto «wow». En nuestra opinión, la mejor parte de diseño plano no es la planitud de la tinta, pero la forma en que nos abre a metáforas visuales creativas.
En lugar de imitar objetos con skeuomorphic técnicas (en un icono de la libreta se parece a la vida real libreta de papel y encuadernado en cuero), diseño plano trata de transmitir la idea de un bloc de notas a través de un sintético, pegadizo y divertido visual que funciona bien en diferentes tamaños .
Prevemos que esta tendencia se hará más collage-como y mezclar con otros estilos visuales, similar a la HábitatWeb página web aparece al principio de este artículo.
11. No más cajas
Los diseñadores web siempre les encanta demostrar que pueden pensar fuera de la caja – en más de un sentido. Se podría llamar a esta tendencia «Dibuja una caja y demostrar que puede romperlo». Una pantalla rectángulo es el marco para cada diseño de páginas web (en la medida de aw sabemos, no tenemos monitores circulares aún). Cada elemento HTML de la página es un rectángulo también.
Pero los diseñadores, como la mayoría de la gente, no les gusta estar limitado. Existen 3 estrategias distintas para demostrar que no eres un esclavo del rectángulo – y los 3 parecen estar en aumento.
Crear diseños de página, como si un rectángulo nunca existió
Circles_Hexagons_Iirregular_Shapes
Menú de los círculos de navegar de DAN Instagram fotos. Sitio Web a través de DAN París .
Permitidos son: círculos, hexágonos, formas irregulares incluso rombos.
Horizonte y maquetación web previstas asimétricos en axonométrica vista sobre Lorenzo Bocchi traer la sensación de espacio y movimiento.
Mientras observa el restaurante Rosa homepage sus sentidos son engañados – casi se puede sentir el aroma de las galletas. Utilice una versión moderna del viejo siglos técnica de trampantojo e imitar un escritorio real dentro de un monitor. Por ejemplo, tener un fondo mesa de madera y luego poner todos los objetos de la presentación en ella.
La mejor manera de desafiar a un rectángulo es colocar al usuario en el interior de un espacio infinito donde el desplazamiento significa volar, en lugar de, bueno … el desplazamiento.
Las compañías aéreas suizas desafían su comprensión de la navegación web. Navegar por su página, usted puede sentir lo convencional nuestra comprensión del espacio documento. Aquí, en lugar de desplazarse hacia arriba o hacia abajo, esquivamos nuestro camino entre las nubes.
12. Azulejos
Por otro lado, si usted se siente cómodo con rectángulos, una manera fresca de estructurar su contenido es mediante la creación de azulejos. Para algunos azulejos razón en el diseño web vender mejor que el Metro de Windows 8 interfaz. Azulejos funcionan bien en diseños de respuesta y, al mismo tiempo, siguen siendo una manera fresca de formar diseños impresionantes.
Si se pega a los azulejos se vuelve demasiado aburrido, el diseño puede ser empujado más lejos con bordes irregulares en zigzag, empujar objetos o llevar el texto a través de los bordes.
13. widgets de navegación
El Daily Beast widget de navegación muestra la posición de desplazamiento dentro del artículo.
Experimentar con la navegación ha sido plaza favorita web diseñadores durante muchos años. «Jugar» con la navegación alcanzó su punto máximo cuando los sitios web fueron diseñados exclusivamente en Flash. El declive de Flash nos trajo menús más tranquilas, desprovistos de animación o interactividad excéntrico.
Pero navegaciones más afilado han ido en aumento de nuevo, gracias en parte a un nuevo potencial de diseño web y la creciente ineficacia de los modelos de navegación existentes en el uso a través de múltiples dispositivos. Esto se hace más fácil gracias a la amplia utilización de Java Script través de la evolución constante de Java (a través de marcos y plugins) y la interpretación más coherente de CSS moderna en todos los navegadores importantes.
Aquí hay algunos ejemplos de experimentos de navegación y tendencias. Algunas de estas ideas ya se utilizan ampliamente, mientras que otros están empujando el sobre hacia un nuevo tipo de diseño de páginas web «moderna».
Este tipo de menú se expande submenú de un elemento relevante mientras se desplaza. Funciona bien en los uno-localizadores con una gran cantidad de contenido. La página del manual MENOS es uno de los más cómodos de usar páginas «manuales de tipo» que he encontrado. Sitio web a través Menos CC .
Un menú Sticky es un tipo de un menú que se queda pegado a la parte superior o el borde de la pantalla mientras se desplaza. Nos guste o no, se está convirtiendo en un estándar para uno-localizadores.
A veces se combina con un scrollspy script para crear un widget que muestra con precisión su posición en la página. Es útil, especialmente con menús jerárquicos largos.
Los mapas de Google, especialmente vista de la calle, inspiraron al autor de Oh Deer Juegos para crear la navegación se asemeja a un paseo a través de Google Street View. El tiempo dirá si esto se convierte en una tendencia. Por supuesto, esto no es la única página explorar ya sea Vista de la calle al estilo de la navegación o el axonométrica «sobrevolar» puntos de vista, más conocido en el juego.
Lo que nos lleva a otra tendencia notable …
14. Integración de los mapas de Google
Marcamos esto como una tendencia no sólo porque ha ido en aumento desde hace algún tiempo (y lo vemos en casi todas partes), sino también que se ha vuelto más y más visualmente gracias interesantes que las opciones de personalización bien utilizado que Google ofrece.
Los sitios web más interesantes que siguen esta tendencia a construir su idea funcional y visual en torno a un mapa conceptual. Y ciertamente que utilizan mapas personalizados de Google ajustados a la mirada página y sentir.
15. interfaces de Mashup
El amor que persiste por uno-localizadores trae desafíos que se pueden resolver de manera amigable y visualmente atractivos creativo, de los usuarios. El reto consiste en adaptarse a una gran cantidad de información y funcionalidad en una sola página. La página tiene que tener un aspecto limpio, moderno y fácil de navegar.
La solución puede ser algo que nosotros llamamos una interfaz mashup: un diseño que consta de muchas «capas» que se ajustan a la funcionalidad o contenido solicitado. En realidad no es un nuevo concepto en absoluto – es la naturaleza misma de las aplicaciones de escritorio -, pero no ha sido muy popular en Internet convencional hasta ahora. Recientemente, el uso de dichas interfaces ha ido en aumento, y están cada vez más refinada y funcional.
Página web Necotrans parece tener poco contenido por encima del pliegue, con una frase singular superpuesto en una foto de pantalla completa. Pero el, menú lateral pequeña derecha permite el acceso a todas las funciones esenciales dentro de la misma área de la pantalla para ofrecer a los usuarios un widget de búsqueda del sitio (con resultados que aparecen a medida que escribe), personalizado mapa de Google, widget de noticias y formulario de contacto.
16. Minimizar
El clásico de KISS principio («Keep It Simple, Stupid» o «Keep It Short and Simple») se ha utilizado en el ejército, empresas y el gobierno desde 1960. Sin embargo, a pesar de que es posible que trabajar duro para simplificar sus diseños, es probable que haya algo de espacio para empujar este proceso aún más.
El Maemo restaurante cuenta su historia con una fuerza irresistible, utilizando el lenguaje más sencillo posible, y luego el visitante se enfrenta con una sola llamada a la acción («Reserve una mesa»), y el nombre del restaurante en un fondo del remolino de niebla fría sobre el fiordo .
Desplazamiento hacia abajo trae un par de fotos en un diseño informal, con alineaciones horizontales y verticales difícil de encontrar. Los temas de las fotos parecen casuales, también. Sin embargo, navegando esta página ofrece una experiencia sensual intensa. Forma ascética destaca la calidad de las fotos, mientras que el minimalismo hace usted lee las pocas frases que cuidaban a compartir con cuidado, como las palabras de sabiduría.
¿Qué se puede aprender aquí? Puede mantener las cosas visualmente tranquilo ( tranquilo! ) en el diseño web y aún así lograr una gran mirada! Trate de minimizar el contenido, la forma y el color tanto como sea posible al tiempo que añade interés a través de videos grandes y realistas.
12. La World Wide Wait
Usted probablemente ha escuchado esta vieja broma. En los años 90, cuando los módems de 56k eran la principal forma de acceso a Internet, el acrónimo «WWW» solía ser en broma traducida a «la World Wide Wait». Velocidad de red Fast nos ha hecho casi olvidar que.
Como nunca antes, las velocidades más rápidas que nos están permitiendo crear sitios web que habrían sido impensables hace poco tiempo – como el uso de vídeo de alta definición para un fondo página web. Pero cada paso tiene un precio y, en este caso, el precio es el tiempo. Específicamente, el tiempo de carga.
Por lo tanto, podemos ver una gran remontada de preloaders visualmente atractivas. No es tan atractiva como solían ser en los días flash cuando se convirtieron en pequeños juegos, pero aún piezas de arte por derecho propio.
Una captura de pantalla de la grid.io página web revela un error que ningún ser humano sería probable que haga (texto ilegible negro en fondo oscuro).
Este artículo no estaría completa sin tener un momento para hablar de » The Grid «- una idea pegadiza presentado por «diseñadores eclécticos» que hicieron algo de ruido recientemente. Es un intento de reemplazar el diseñador y el codificador con la Inteligencia Artificial. ¿Los diseñadores web a ser redundante? Está aún por verse.
No es posible probar este sistema, sin embargo, por lo que es difícil juzgar su usabilidad. Su sitio web parece ser la única demostración de su poder. Por lo general, funciona bien en la mayoría de resoluciones, pero los intentos de crear arte artificial parece ser el signo de los tiempos. Por ejemplo, la pintura Fool software creativo aún no ha acabado con pinturas de las galerías de arte.
Conclusión
Estas tendencias de diseño web han ido creciendo en popularidad en los últimos años y es probable que influyen en gran medida la forma en sitios web serán creados en 2015. Sin embargo, si tuviéramos que resumir este año en una sola frase, la cosa más importante que pensar cuando el diseño de un sitio web sería «Contenido Primera».
Ese mantra siempre ha sido así. Pero hoy en día, un énfasis cada vez estética en el diseño web puede revelar muchos de los errores cometidos en las fases de pre-diseño – concepto, planificación de la navegación de flujo, alambre de encuadre, copia de escritura, etc. En cuanto a ampliar sus horizontes con nuevas técnicas, sea asegurarse de que no se le olvide lo básico.
Al pensar en el diseño web , debe tener en cuenta todo el espectro de posibilidades que Internet presenta. Hecho con valentía, los diseñadores pueden empujar los límites de la interacción humana y la imaginación a escala global – como se ve a menudo con las industrias más afilado, como sitios web de agencias creativas.
En este artículo vamos a hervir algunas de las tendencias más importantes de diseño web emergentes en 2015. Es aquí donde podemos encontrar la verdadera innovación y las nuevas oportunidades – algunos de los cuales pueden cambiar por completo nuestra concepción de una «página web moderna».
Sobre ProfesionalNet: Precios asequibles para sitios exigentes, solo con la experiencia de una empresa con presencia en el mercado. Asesoramos y realizamos Presupuestos personalizados en diseño y programación web, con calidad en la realización, formato, estructura y contenido.
Más información sobre este tema en:
