Share
Este año ha sido un brillante Año en diseño web. Tal vez más que cualquier otro año, se han dado grandes pasos hacia la maduración del campo. Echemos un vistazo a lo que podemos esperar para el futuro del diseño web como industria..
Cualquiera que haya estado haciendo diseño web durante más de unos pocos años, sin duda, se ha enfrentado al problema de la brecha entre el diseño y el desarrollo de aplicaciones para usuario. Los diseñadores viven en herramientas similares a Photoshop o Sketch, y los desarrolladores viven en sus editores de texto.
Este flujo de trabajo común ha visto muchos intentos de solución, incluyendo cosas como SiteGrinder, Dreamweaver y más recientemente Adobe Muse. Todas estas soluciones vienen con sus problemas y no han sido ampliamente adoptadas. En su mayor parte, los desarrolladores de front-end se han adherido a sus viejas costumbres, o los diseñadores se están moviendo más hacia el navegador para trabajar, cerrando la brecha. Sin embargo, están surgiendo herramientas para cerrar esta brecha aún más. Con herramientas como la guacamaya a punto de ser lanzada, se acorta el camino hacia un extremo de la minuciosa brecha entre el diseño y el desarrollo frontal..
Estas herramientas se beneficiarán enormemente del hecho de que las tendencias de diseño web han adoptado colores planos con muy poca textura y elementos predeciblemente repetidos. Estos elementos son mucho menos complejos que los elementos de la interfaz de usuario muy dependientes de la imagen de hace unos años, por lo que es una etapa primordial para introducir herramientas para generar automáticamente bien organizado, semantico código.
No verá una buena implementación "WYSIWYG" de JavaScript para nada más allá de los widgets configurables básicos. La razón principal de esto es que HTML y CSS son ambos declarativo lenguajes, mientras que JavaScript es un lenguaje de programación. El "lienzo" para JavaScript es inherentemente el editor de texto. El lienzo para HTML es inherentemente el documento..
A medida que los navegadores adoptan los estándares más nuevos, los teléfonos se vuelven más rápidos, las pantallas se vuelven más impredecibles y los diseños se aplanan, veremos una reducción significativa en la cantidad de imágenes gráficas utilizadas en un sitio determinado. Los elementos complejos de la interfaz de usuario seguirán dependiendo cada vez más de CSS, y para las cosas que no se pueden lograr únicamente con CSS, se adoptará SVG. La principal excepción es la fotografía. Las fotos grandes continuarán reclamando más espacio de diseño a medida que los diseñadores confían más en imágenes transparentes orientadas al contenido para definir la experiencia y la narrativa.
Con bellos ejemplos que aparecen en todas partes, SVG está alcanzando su apogeo. Podemos esperar ver herramientas más accesibles para crear infovis básicas sin mucha molestia (piense en ChartJS), así como más herramientas educativas que exponen el potencial y el poder de SVG a personas que no han tenido incentivos para explorar SVG previamente.
Aunque la especificación de flexbox todavía se encuentra en una tierra de nadie no estandarizada, hay un soporte relativamente bueno en todos los navegadores. No ha habido una amplia adopción de flexbox (por razones desconocidas), pero creemos que este año habrá un impulso hacia la adopción.
Estamos lo suficientemente entusiasmados con flexbox aquí en Tuts + que publicaremos una guía que explica cómo crear diseños con flexbox pronto, así que ten cuidado.!
Aún no verá la adopción completa de una solución de imagen de retina. Aunque Webkit ha implementado srcset, los desarrolladores ya están resolviendo este problema de una manera un poco menos eficiente o robusta. Mientras srcset Eventualmente será necesario, ya que la mayoría de los desarrolladores continuarán resolviendo los problemas guardando imágenes más grandes en calidades más bajas.
¿Recuerdas cuando la paralaje se convirtió en la próxima cosa caliente? Todos empezaron a usarlo en formas nuevas y emocionantes (así como desgastadas y aterradoras) para contar historias y mejorar la experiencia del usuario. Puede esperar que la gente adopte ampliamente el video como elemento de diseño (por ejemplo, como fondo) en lugar de simplemente como una experiencia de "teatro" focal como hemos visto con YouTube..
Esto ha existido por mucho tiempo (incluso hubo encarnaciones construidas en Flash), pero no ha ganado popularidad con empresas comerciales hasta hace poco. Con esto vendrán desafíos interesantes, particularmente relacionados con el tamaño y la compresión del video..
Si bien las animaciones ciertamente no son algo nuevo, el logotipo animado y los elementos de los iconos están aumentando en popularidad. La animación SVG se puede realizar con CSS, y proyectos como Iconic, que aumentaron más de 6 veces su objetivo en Kickstarter, así como esfuerzos de código abierto como Climacons, prometen una nueva tendencia en el diseño de la experiencia del usuario basada en animaciones vectoriales..
Iconos SVG animados con CSS por Noah Blon (@noahblon) en CodePen
El año pasado, los programas de televisión como Breaking Bad ofrecieron una segunda experiencia de pantalla, brindando a los espectadores una forma más profunda de interactuar con el contenido..
En el 2014, a medida que la adopción de dispositivos móviles continúe llegando a los mercados de gama baja y la conectividad aumente en la ubicuidad, la adopción de la segunda pantalla se extenderá a más programas y más formatos. Esto incluso podría incluir cosas como sincronizar su teléfono con su computadora mientras ve un programa en Hulu, o conectar su tableta con su consola de juegos para ofrecer información secundaria sobre lo que está viendo o haciendo en la pantalla..
Esta es un área de diseño muy diferente al diseño de contenido básico. Los diseñadores deberán considerar aún más el concepto de atención secundaria, cumpliendo el rol de "acompañamiento" en lugar de "escenario principal".
"Responsive" es claramente la metodología dominante en el diseño web. A pesar de cómo está manejando la creciente necesidad de diseños y códigos no tecnológicos, los usuarios continúan moviéndose a más dispositivos en más entornos. Hasta ahora, la optimización móvil ha sido una empresa no trivial; hacer que los entregables del código sean lo más pequeños posible, crear consultas de medios, lograr altas tasas de cuadros, utilizar el almacenamiento en caché y muchas otras consideraciones requieren una inversión significativa.
En 2014, muchos marcos adoptarán completamente la metodología de mobile-first, y la barrera para crear sitios de alto rendimiento para cualquier tecnología disminuirá. Las bibliotecas de código como Hammer.js, Zepto.js, Animate.css y muchas otras han liderado la carga. Como experimentamos anteriormente con la adopción de HTML5 por parte de la industria, esperamos ver también una adopción en toda la industria de las mejores prácticas para la optimización móvil que va más allá de simplemente escribir consultas CSS.
Medium, Svbtle, Editorially, exposure.so, Ghost y muchas otras herramientas y plataformas han dado paso a una nueva era de contenido web que se centra únicamente en presentar la escritura en un formato altamente accesible, sin muletas de diseño. Este cambio continuará, influyendo en el desarrollo del tema, los nuevos servicios web y la "estética del diseño colectivo".
Es posible que también desees conocer los pensamientos recientes de Collis sobre las tendencias de diseño web para el próximo año: Predicciones para el diseño web 2014.
¿Piensas que las pruebas en varios navegadores están saliendo? ¿Tienes una idea sobre una nueva tendencia al alza? Compártelo en los comentarios!
Accentsconagua