Froont es un estudio de diseño web con sede en San Francisco que además de desarrollar interfaces para su cartera de clientes, generan artículos de interés para la comunidad creativa, para está ocasión han desarrollado un nuevo conjunto de GIFs que muestran de manera gráfica la evolución del diseño web de una manera sencilla para diseñadores que no aún no han dado el salto a los medios digitales.

Desde los inicios de la web en píxeles monocromáticos y la era de corta duración de las animaciones en Flash, a la llegada de los CSS y el nacimiento del Flat Design, esta serie de imágenes nos ayudan a entender cómo el diseño web ha evolucionado en los últimos 25 años.

Con objetivo de terminar el debate de si los diseñadores deberían aprender el código o los desarrolladores deben aprender diseño, estos GIFs establecen un terreno común sobre cómo el diseño de la web ha evolucionado y cómo podríamos cerrar la brecha entre lo visual y la programación.

Echa un vistazo a las imágenes GIF a continuación…

La era obscura de la web (1989)

Como su nombre lo dice, las páginas web eran literalmente negras, con sólo unos cuántos pixeles sencillos en ella.

01-Tab_keys-1

 

Las Tablas y celdas, el inicio (1995)

El nacimiento de los navegadores que podían mostrar imágenes fue el primer paso en el diseño web como lo conocemos. La opción más cercana disponible para estructurar la información fue el concepto de tablas y celdas en HTML.

02-Tables-1

 

Javascript llega al rescate (1995)

JavaScript fue la respuesta a las limitaciones de HTML. Por ejemplo, si se necesitaba una ventana emergente, o modificar dinámicamente el orden de algo, la respuesta era la programación y scripts de JavaScript.

03-Javascript-1

 

Flash, la era dorada de la libertad (1996)

Para romper las limitaciones del diseño web existente, una tecnología nació para ofrecer una libertad nunca antes vista. El diseñador podía generar cualquier forma, maqueta, animaciones, interacciones, utilizar cualquier fuente y todo esto en una sola herramienta, Flash.

04-Flash-1

 

CSS, Los estilos (1998)

Paralelamente al nacimiento de Flash, un mejor enfoque para el diseño desde un punto de vista técnico, nació con las llamadas hojas de estilo en cascada (CSS). El concepto básico aquí es separar el contenido de la presentación. Así que el aspecto y el formato se definen en CSS, pero el contenido en HTML.

05-CSS-2

 

El surgimiento del Mobile (2007)

Navegar por la web en los teléfonos móviles era todo un reto en sí mismo. Para ello surgieron las versiones móviles de la web, pero la velocidad era un nuevo problema, ya que la carga de una gran cantidad de contenido quemaba el internet bastante rápido. Además de que se requería desarrollar una versión distinta para cada dispositivo.

06-Grids-1

 

El diseño responsivo (2010)

Para un diseñador, esto significa ahorro de tiempo. Para el cliente, esto significa que su página funciona en el teléfono. Para un desarrollador, es la forma en cómo se adaptan las imágenes a los navegadores, la velocidad de descarga, la semántica, mobile first y más. El beneficio principal aquí es la paridad de contenido, lo que significa que es el mismo sitio web que funciona en todas partes.

07-Responsive-3

 

Flat Design, la tendencia (2010)

Fotografías, ilustraciones y tipografías claras y sencillas. La simplificación de los elementos visuales llamado Flat Design es también parte del proceso de un pensamiento de diseño enfocado en el usuario. Botones brillantes son reemplazados por iconos y todo respira mucho mejor, generando así una navegación y experiencia mucho más fácil. Conoce más sobre Flat Design dando clic aquí.

08-Flat-2

 

El futuro de la web (2015)

Imagina que los diseñadores simplemente muevan las cosas alrededor de la pantalla y un código limpio salga. Y no me refiero a cambiar el orden de las cosas, pero tener total flexibilidad y control se ve cada vez más cerca. Que los desarrolladores no tengan que preocuparse por la compatibilidad del navegador y puedan centrarse en la resolución de problemas reales y en la experiencia con el usuario. ¡Di hola al futuro!.

09-Future-1

Texto/Traducción por: David Ocampo @davidonoir

No Hay Más Artículos