Antecedentes El hacer un breve recorrido por la historia del diseño web nos plantea algunas consideraciones. Al parecer, los problemas simples se podían resolver de muchas maneras. La existencia de distintos navegadores plantea un reto para los diseñadores y desarrolladores. ¿Por qué pareciera que hay una división entre el diseño y el código. ¿Por qué las cosas difíciles se vuelven más simples, pero las cosas sencillas se vuelven más difíciles ? Así que en lugar de debatir si los diseñadores deberían aprender el código o los desarrolladores deben aprender diseño, vamos a establecer un terreno común sobre cómo el diseño para la web evolucionó y cómo podríamos cerrar la brecha entre el código y el diseño.

La edad oscura del diseño web (1989) El principio de diseño de páginas web era bastante oscuro, como pantallas estaban literalmente en negro y sólo unos pocos píxeles monocromo vivían en el mismo. El Diseño fue hecho por medio de símbolos y la tabulación ( tabulador ).

Tablas – El inicio (1995) El inicio de la web El nacimiento de los navegadores que podrían mostrar las imágenes fue el primer paso en el diseño web como la conocemos. La opción más cercana disponible para estructurar la información fue el concepto de tablas ya existentes en HTML. A pesar de que no se sentía del todo acertada ya que el objetivo principal de una tabla es estructurar los números, seguía siendo el método común para diseñar la web desde hace bastante tiempo.

JavaScript viene al rescate (1995) JavaScript fue la respuesta a las limitaciones de HTML. Por ejemplo, la necesidad de una ventana emergente, que desee modificar dinámicamente el orden de algo? La respuesta era JavaScript. Hoy en día preferimos evitar JavaScript si la misma característica puede ser lograr con el uso de CSS. Sin embargo, sí JavaScript mantiene fuerte como en front- end ( jQuery ).

La época de oro de la libertad – Flash (1996) Para romper las limitaciones de diseño de páginas web existentes, una tecnología que nació prometió una libertad nunca antes visto. El diseñador puede diseñar cualquier formas, diseños, animaciones, interacciones, utilizar cualquier fuente y todo esto en una sola herramienta - Flash. El resultado final se embala como un archivo y luego envía al navegador que se mostrará. Esta fue la época de oro de las páginas de bienvenida, animaciones de entrada, todo tipo de efectos interactivos. Por desgracia, no era demasiado abierto a los motores de búsqueda y ciertamente consume una gran cantidad de potencia de procesamiento. Cuando Apple decidió abandonarla en su primer iPhone ( 2007 ), Flash comenzó a decaer. Al menos para el diseño web.

CSS (1998) 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. Las primeras versiones de CSS estaban lejos de ser flexible, pero el mayor problema fue la tasa de adopción por los navegadores. Tomó algunos años antes de los navegadores empezaron a apoyar plenamente y con frecuencia era bastante errático. Este es también el momento en que uno navegador tenía la característica más reciente, mientras que otro era deficiente, lo que es una pesadilla para un desarrollador. Para ser claros, CSS no es un lenguaje de codificación, es más bien un lenguaje declarativo. ¿Deben los diseñadores web aprender a programar? Puede Ser. ¿Deben entender cómo funciona CSS ? ¡Por supuesto!

Mobile – Grids and frameworks (2007) Navegar por la web en los teléfonos móviles era todo un reto en sí mismo. Además de todos los diferentes diseños de los dispositivos, se introducen problemas de contenido de paridad - si el diseño de la misma en la pantalla pequeña o debe ser simplificada? ¿Dónde poner toda la buena, parpadeando anuncios en esa pequeña pantalla? La velocidad era también un problema, ya que la carga de una gran cantidad de contenido quema su dinero internet bastante rápido. El primer paso para la mejora fue una idea de las redes de columna. Después de unas pocas iteraciones, el sistema 960 de rejilla ganó, y la división de 12 columnas se convirtió en algo que los diseñadores estaban utilizando todos los días.

Responsive web design (2010) Un tipo brillante llamado Ethan Marcotte decidió desafiar el enfoque existente proponiendo usar el mismo contenido, pero diferentes diseños para el diseño, y acuñó el diseño web responsivo. Técnicamente seguimos usando HTML y CSS, así que es más bien un avance conceptual. Para un diseñador, responsivo significa diseñar para varios dispositivos. Para el cliente, esto significa que funciona en el teléfono. Para un desarrollador, es la forma en cómo se sirven las imágenes, la velocidad de descarga, la semántica, móvil / escritorio primero 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.

Flat design (2010) Elaborar más diseños toma más tiempo, así que afortunadamente nos decidió agilizar el proceso eliminando ornamentaciones innecesarias y volver a las raíces del diseño, dando prioridad a los contenidos. Bellas fotografía, tipografía, ilustraciones nítidas y diseños pensativos es cómo diseñamos ahora. La simplificación de los elementos visuales o los llamados Flat design es también parte del proceso. El principal beneficio es que mucho más pensamiento se está poniendo en el texto, en la jerarquía del mensaje y contenido en general. Botones brillantes son reemplazados por los iconos y que nos permite usar imágenes vectoriales y fuentes de iconos. Fuentes Web ofrecen una bella tipografía. Lo gracioso es que la web estaba cerca de esto desde el principio.

El futuro brillante (2014…) El santo grial de diseño web ha sido hacerlo visual y llevarlo al navegador. Imagínese que los diseñadores simplemente mueven cosas alrededor de la pantalla y un código limpio sale ! Y no me refiero a cambiar el orden de las cosas, pero tener total flexibilidad y control! Imagina que los desarrolladores no tienen que preocuparse por la compatibilidad del navegador y pueden centrarse en la resolución de problemas reales !