EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB #2

Como prometimos estamos de vuelta en ConTIGo! con la segunda parte del Post sobre EVOLUCIÓN Y DISEÑO WEB. En esta ociasioón vamos a enumerar alguno de los estilos que podemos encontrar por la Red en el diseño e interface de webs, centrándonos en tres grandes grupos. ¡Esperemos que os sea de utilidad y a ver si nos inspira alguno! 😉

Dicho esto, vamos a enumerar alguno de los más usados y relevantes estilos de diseño Web, y para ello vamos a concentrarlos en tres grandes grupos:

Estilo Clásico

Y lo pongo el primero porque hoy por hoy, son las Web con estilo clásico las que  más presencia tienen en Internet, superando el 80%. Poco voy a decirte de este estilo que no sepas. Por resumir: contenidos y diseño al 50%. En un amplísimo abanico de formas, tipos, colores y formatos, el estilo clásico, con mayor o menor acierto, mantiene esa tendencia equilibrada entre lo que se dice y como se dice. Es el estilo preferido de las PYMES y profesionales con actividades no relacionadas con el mundo creativo y audiovisual: comercios, gestorías, clínicas, oficinas, organismos públicos, agencias, etc.

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

Estilo Minimalista

El minimalismo, que ni mucho menos quiere decir simplismo, es quizá el corredor más rápido  en esta carrera por llegar primero a la meta, al menos hoy y ahora, y por supuesto, según nuestro humilde criterio.

No es un concepto nuevo, ni de lejos, pero parece que le va como anillo al dedo, a la hora de manifestar sus principios en un diseño Web.

Basado en diseños planos “flat”, este estilo reduce los elementos a la mínima expresión, dejando solo lo imprescindible para conseguir la máxima atención en los conceptos, sin distracciones ni paja: lo que se dice “ir al grano”. Se eliminan efectos innecesarios, al tiempo que predominan otros elementos como las fuentes de letra, cuya importancia se hace capital en los diseños.

Evidentemente, el estilo minimalista es como el tronco de un gran árbol cuya envergadura,  despliega un sinfín de gruesas ramas, y cada una de estas, con sus propias características y tendencias. Las hay que utilizan un sistema iconográfico por encima de todo, como el estilo Metro, o las que sólo utilizan letras, como pregonando con orgullo: “contenido al poder”. Dentro de este grupo minimalista, podríamos incluir también el estilo infográfico, que consiste en combinar imágenes sintéticas con textos, al objeto de comunicar de una forma totalmente visual.

Algunos diseñadores, opinan que el minimalismo rechaza los colores. Otros opinan lo contrario… pero en ambos casos, la intención del estilo minimalista es hacer destacar los contenidos en función de su esencia y no de adornos añadidos e insustanciales.

Y quizás te preguntes ¿Y entonces qué diferencia hay entre este estilo y lo que eran las Web en el pasado, cuando apenas se aplicaban normas de diseño?

La diferencia es abismal, y tú mismo lo comprobarás con el siguiente ejemplo. ¡Sobran las palabras!

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

Algunos ejemplos:

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

Fuentes:

Este tipo de diseños suelen ser utilizados por grandes marcas y empresas relacionadas con el mundo audiovisual, del marketing y el diseño.

Grandes fondos

Para poder explicarte mejor las tendencias, ves que finalmente hemos distribuido todos los estilos entre tres grandes cajones, pero por desgracia, la cosa no es tan sencilla. En temas de creatividad, no vale con decir esto es “A” o “B”, “blanco” o “negro”… esa disyunción, en la que un elemento excluye al otro, se lo dejamos a los matemáticos.

En lo referente al diseño de tendencias y estilos, en infinidad de ocasiones nos encontraremos con que ciertas líneas maestras de un estilo son compartidas por otros. Es normal. Por eso, aunque algunos estilos, estén en cajones diferentes, pueden tener una o más características en común.

Dicho lo cual, ¿Qué entendemos por grandes fondos? Creo que la propia definición lo explica. Es una tendencia que va ganando cada día más seguidores y que consiste en ampliar los contenidos de la Web a la máxima capacidad del monitor. Evidentemente, esto requiere la escalabilidad de sus fondos, que pueden ser, desde más o menos minimalistas, hasta  fotográficos multi-detalle.

Por regla general, la mejor forma de aprovechar este estilo, es dotándole de contenidos impactantes, cortos y sencillos, a modo de eslóganes. Es decir, mínimo provecho de la densidad del espacio, en beneficio del mensaje.

Como decíamos, los fondos en ocasiones serán fotográficos, e incluso video portadas. En otras, simplemente colores planos.

Muy utilizado para compañías de transporte, viajes y todo lo relacionado con el turismo. Grandes marcas de automóviles, y en LandingPages (carteles publicitarios en Web).

Ejemplos:

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

 

Como decíamos desde el principio, el mundo Web y el mundo del diseño, andan cogidos de la mano y van muy, muy rápido. Nacen cientos de tendencias y estilos cada día, que eclosionan como nuevos hitos o simplemente como brotes de otros estilos anteriores. La creatividad se pone al servicio del diseño y no tiene límite ni puertas: en definitiva, es arte.

Con el fin de que entiendas mejor la filosofía del diseño, hemos hecho una simplista clasificación en tres grandes grupos, pero has de tener en cuentas que hay otras muchas tendencias que toman ramas de uno y otro tronco y que han sido, y son aún, señas de identidad de muchas marcas y tan creativas como pueda serlo la más destacada: estilos casual, vintage, informal, creative, “hecho a mano”, etc.

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

 

No obstante, hay unas líneas verdes, que nunca debes olvidar a la hora de plantearte un buen diseño Web, por muy artístico o espartano que resulte el proyecto. Conceptos como usabilidad, navegabilidad, claridad, y funcionalidad… deben imperar por encima de todo.

¡Y lo más importante! Siempre has de buscar y centrarte en la buena experiencia del usuario, pues el que usa la Web no eres tú, es él. No importa si a ti te gusta o no, lo que importa es que guste a los usuarios, y para ello, has de ponerte en su lugar.

Imagínate una Web a cuya entrada te muestre una preciosa animación de 20 segundos, y que no te dé la posibilidad de saltarla. Por muy bonita y maravillosa que sea, cuando hayas visitado la página 3 veces, estarás tan harto de ella, que relegarás la Web al olvido para siempre…

Por eso, para finalizar este post permítenos un consejo que te vendrá de perlas.

A la hora de desarrollar/diseñar una Web, no pienses como informático, ni como diseñador.  Solo has de tener dos cosas en tu mente y poner los cinco sentidos en ello: ¡La marca a la que va representar la Web, y los usuarios que la visitarán!

Esperamos que os haya resultado de utilidad ¿Os gustaría hablarnos o que os hablásemos de algún otro estilo web más a fondo? ¡Cuéntanos!

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB #1

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB #1

Al igual que otras facetas en Internet, todo lo que gira en torno al diseño de los contenidos Web está inmerso en una dinámica de constante fluir, como un puchero con agua en ebullición: Evolución y cambio.

Si eres diseñador Web desde los principios oscuros del HTML más básico (HyperText Markup Language: lenguaje de marcas de hipertexto), el de sus primeras versiones, nos entenderás al señalar el concepto evolución en primer lugar. No cabe duda, que la versión 5 del HTML, vigente en la actualidad, respecto a las versiones de los años 90, es como comparar el F1 de Fernando Alonso con un carro de bueyes.

Esta evolución ha ofrecido muchas cosas buenas al mundo Web.

Pero en este post, no pretendemos hacer un tutorial de HTML, tampoco de cómo diseñar páginas Web. Ni se nos pasa por la cabeza. Ya hay mucho material al respecto y muy bueno. Por el contrario, nuestra intención es más teórica, e incluso filosófica. Queremos acercarte más a la idea. Al concepto de qué, y para qué. Al uso y la manera de desarrollar páginas Web en sus infinitas tendencias, estilos, modas y funcionalidades.

Desde el principio de los tiempos de Internet, siempre hubo una dicotomía reseñable, que marcó, y no poco, la forma de diseñar la Web: la funcionalidad del contenido propiamente dicho y la estética del mismo.

No hablamos de la función, arquitectura o plataforma del sitio en sí de aquellas Web, es decir, si se trataba de contenido estático, dinámico, de Internet, Intranet, Extranet, de un programa de gestión corporativa, de un comercio online o de un catálogo.

La dicotomía en el diseño, como es obvio, implica otra disyuntiva paralela respecto de la persona o equipo que materializa la Web. Rara vez se ha dado la circunstancia de aunar un empírico técnico informático y un onírico diseñador gráfico en una misma persona.

Se suele decir que “El informático cuando trabaja en su página Web, está desarrollando, mientras que el diseñador, está diseñando…”

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB

 

Fuente imagen: Vector de Ordenador diseñado por Freepik

Bromas aparte, lo que parece tan trivial y de Perogrullo, es una cuestión que ha marcado el mundo Web hasta hoy. No serás el primero ni el último que ha encontrado en Internet páginas y sitios Web que dejan mucho que desear en uno u otro aspecto (diseño o funcionalidad), y casi siempre, uno en detrimento del otro. En algunos casos, los dos aspectos son para echarse a llorar, y en otros, ambos se complementan a las mil maravillas, con excelentes resultados.

Todo a priori, parece tan fácil como plantear un buen diseño y una buena funcionalidad. Damos por hecho que toda persona, organismo o empresa, quiere lo mejor para su Web, y en estos tiempos que corren, hay sin duda profesionales y herramientas más que suficientes para conseguirlo, y resalto: ¡siempre y cuando lo hagan profesionales!, Nunca nos cansaremos de repetir que para obtener un buen producto, se necesita el trabajo de un buen profesional, no vale con tu vecino, tu primo o el amigo de un amigo “que se les da muy bien eso de la informática“.

Pero no creas, no siempre fue así de fácil, ni siquiera para los mejores profesionales. Y ¿por qué? te preguntarás. La respuesta es: por razones puramente técnicas.

Ahora, quien más quien menos, dispone de una línea de alta velocidad que puede ir desde 1 a 300 Mbit/seg. Y esta gran capacidad de ancho de banda, permite muchas alegrías y ligerezas a la hora de planificar el diseño del sitio Web. Pero antiguamente, los diseñadores/desarrolladores, teníamos que hacer verdaderos “encajes de bolillos” para conseguir el equilibrio entre una página funcional rápida y al mismo tiempo estética y bonita para el usuario. Jugábamos con las herramientas de que disponíamos, que eran muy pocas o casi ninguna. En resumen, los primeros desarrollos Web, estaban enmarcados en un entorno con:

  • Líneas de transmisión de datos de poca capacidad, lo que implicaba optimizar los contenidos estructurales de la Web al máximo para que las páginas se mostraran con rapidez y no se eternizaran ante la desesperante mirada del usuario
  • Lenguajes de marcas (HTML) con muy pocos recursos técnicos de diseño. Más enfocado a los contenidos que al estilo de los mismos. Es decir, algo parecido a un sencillo procesador de textos

Estas dos circunstancias hacían de un desarrollo Web una suerte de ingeniería de equilibrios entre lo que se mostraba y como se mostraba. Trabajo digno de la paciencia del Santo Job: El código de las páginas era un batiburrillo que mezclaba contenidos, diseño, estructura, programación, etc… O sea, un caos. Y si complicada era su creación, más difícil aún era su mantenimiento.

Pero poco a poco, o rápidamente, según se mire, Las mentes pensantes del W3C (World Wide Web Consortium: Consorcio Internacional que ofrece recomendaciones para la Web), entendieron que había que separar de una vez por todas la parte de contenido y la parte de diseño, y en consecuencia, se fue potenciando CSS (Cascading Style Sheets: Hojas de estilo en cascada), que es un lenguaje que contiene reglas para definir la estética de los contenidos en una página HTML.

Con la inclusión de CSS, se había dado un paso de gigante, separando definitivamente el “que se muestra -> contenido HTML” y el “como se muestra -> estilos CSS”. Actualmente se utiliza la versión 3 de CSS.

Y para cerrar un triángulo casi perfecto, junto a estas dos herramientas de desarrollo Web, fue potenciándose paralelamente el uso del lenguaje JavaScript, que daba a las páginas Web la parte dinámica que HTML o CSS no eran capaces de proporcionarles, consiguiendo una interacción mayor con el usuario.

Bueno, y tras este recorrido por la historia del diseño, volvemos al presente, donde nos encontramos en plena sociedad 2.0, (ya casi 3.0), con un montón de tendencias y matices, en un auténtico paraíso para los creativos.

Ahora, hoy mismo, nos encontramos con varias tendencias de diseño Web que marcan un poco la pauta, que son como lo más moderno y actual, sin olvidar por supuesto, que todavía conviven una infinidad de sitios Web con estilos tradicionales, más o menos antiguos o modernos. ¡Vamos que hay de todo en la RED!

Y ¿Cuáles son esas tendencias punteras? Como dice el refrán: “para gustos, los colores…”, pero antes, te diré que todas y cada una de ellas, están sometidas a un tipo de formato puramente estructural, que puede ser fijo o fluido.

El formato fijo, como su nombre indica, se basa en utilizar medidas concretas en un diseño, con lo que conseguimos un dominio total de cómo se verá la Web, sin miedo a desparrames inesperados. Por el contrario, como ya habrás imaginado, en el formato fluido,  los contenidos, se ajustan al tamaño del navegador de cada usuario, y para evitar el caos en altísimas resoluciones, se suele limitar los anchos y altos con las correspondientes propiedades CSS de ancho y alto máximo. ¿Qué cual es mejor o peor?, de nuevo lo dejamos “a gusto del consumidor…”

Los que utilizamos el diseño Web, no solo para páginas corporativas y publicitarias, sino para interfaces de usuario en programas de gestión, no somos partidarios de  encumbrar, o echar por tierra, unos u otros formatos, ya que cada uno de ellos, puede ser útil llegado el caso. Sin embargo, no podemos olvidar que en la actualidad, no solo se visitan las Web desde los ordenadores.

Esto es una realidad. Cada vez más, se emplean otros dispositivos como smartphones y tablets. Y eso sí que hace determinante un estudio serio a la hora de confeccionar el diseño de nuestra Web para que pueda verse con diferentes resoluciones. A este estilo de diseño compatible con otros dispositivos, se le denomina diseño sensible o responsive (en inglés).

 

EVOLUCIÓN Y CAMBIO DEL DISEÑO WEB RESPONSIVE

 

Imagen:Vector de Negocios diseñado por Freepik

Bueno, esperamos que esta primera parte, en la que hemos viajado a los inicios del mundo web y nos hemos introducido en interesantes conceptos ¡os haya parecido interesante y de utilidad!

En el próximos post nos meteremos en materia: numeraremos y analizaremos algunos de los distintos tipos de diseños web que podemos encontrar por la Red, con ejemplos de importantes empresas que usan cada una de ellos y las características que quieren transmitir.

Pero volviendo al de hoy ¿Qué os ha parecido este análisis de la evolución web? ¿se nos ha quedado algo en el tintero? ¿Estáis de acuerdo? ¿Habéis sufrido esas “diferencias” entre funcionalidad y diseño? ¡Háblanos, te escuchamos!