Diseño de Paginas Web Antes y Ahora

Cuando nos poníamos nostálgicos en el siglo XX, ¿qué hacíamos? Hojeábamos viejos álbumes de fotos, poníamos vinilos o abríamos el baúl de los juguetes. Los recuerdos manaban copiosamente de aquellos objetos polvorientos.

En el siglo XXI, la nostalgia ha tomado otras formas. Ahora que pasamos gran parte de nuestra vida conectados a Internet, las páginas que visitamos son recuerdostan poderosos como las reliquias mejor conservadas.

Súbete con nosotros en la máquina del tiempo, vamos a llevarte de vuelta a los albores de la Web. Corría el año 1997, Google aún no existía y Softonic acababa de nacer...

¿Por qué 1997?

Las primeras páginas web aparecieron alrededor de 1991. A finales de 1994 ya había unas 10.000, pero la Web seguía siendo poco más que un experimento. Hicieron falta un par de años más para que la Web despegara definitivamente.

1997 representa la edad de oro de la Web hecha a mano. Los directorios de páginas web, como About.com y Yahoo!, triunfaban. Las páginas personales se hospedaban en GeoCities, AngelFire o Tripod. Había que actualizarlas a mano o editarlas con FrontPage o Composer.

Para buscar algo, en lugar de Google, usábamos Excite, InfoSeek y Altavista. En español, los buscadores más conocidos eran Dónde, Olé y Ozú. A medio camino entre los directorios y los buscadores, la eficacia de estos buscadores era muy limitada; había que recurrir a más de uno.

Cómo navegábamos en 1997

Comparada con la actual, la tecnología web de 1997 era muy básica, aunque ya tenía todo lo esencial para mostrar contenido en Internet. Los estándares HTML y CSS ya existían, y Macromedia acababa de lanzar Flash Player 2.0. Había incluso quien se atrevía con VRML, el estándar para la Realidad Virtual en la Web.

Los navegadores web principales, Netscape Communicator e Internet Explorer se hallaban enzarzados en la primera guerra de los navegadores. Algunas páginas solo se veían bien en uno de los navegadores.

¿Cómo nos conectábamos?

Los que tenían suerte navegaban sin límites desde las universidades e instituciones públicas. El resto de usuarios debíamos pagar por una conexión telefónica. En España, el ADSL aún no había llegado, y la Tarifa Plana, tampoco.

*¿Qué se hacía en la Web en 1997?

En la edad de oro de la Web todo parecía maravillosamente moderno, pero lo que podía hacerse era más bien poco: navegar, hacer clic en enlaces y, con suerte, ver un vídeo diminuto durante algunos segundos.

Para que te hagas una idea de las diferencias entre 1997 y hoy, mira esta tabla de equivalencias:

La Web de 1997 era tan inocente como un pueblo pequeño. La privacidad era la última de las preocupaciones. Sin Google, ya era bastante difícil que alguien encontrara tu página web, alojada en uno de los muchos vecindarios de GeoCities. Pero nos encantaba; era nuestro pequeño poblado virtual, donde todos nos conocíamos y la vida transcurría tranquila.

¿Y el contenido?

Era poco pero de calidad. Los blogs todavía eran un sueño, así que para crear y editar páginas web había que armarse de paciencia y escribir código HTML en el Bloc de notas (o usar Netscape Composer, FrontPage Express y Adobe PageMill). Los estándares web, en aquella época, eran una preocupación prácticamente inexistente: lo importante era publicar como fuese.

Diez cosas típicas de las páginas web en 1997

Si navegaste durante los años 90 o creaste tu propia página personal, seguro que recordarás qué aspecto tenían. Para ayudarte a hacer memoria, hemos recopilado los diez signos típicos de una página "noventera":

1.      GIF Animados No podían faltar. Al añadir un GIF animado estábamos dando vida a la página web. ¿Los más célebres? La arroba dando vueltas, el obrero comiendo el bocadillo y el bebé danzante de Ally McBeal.

2.      Canciones MIDI incrustadas Las canciones que se reproducían nada más entrar en la página eran el golpe de gracia. Después de minutos cargando imágenes y fondos, el MIDI bajaba como una guillotina, dispuesto a colgar el navegador en el acto.

3.      Las imágenes rotas ¿Cómo sabíamos que una imagen no se había cargado? Gracias al icono de imagen rota. Era un elemento tan habitual que seguimos asociándolo a las páginas web de los noventa.

4.      Fondos psicodélicos Las primeras páginas web tenían un fondo gris o blanco muy práctico pero aburrido. En cuanto la gente aprendió a ponerle fondo a sus páginas, empezó la hecatombe de los fondos raros, como este de estrellitas, muy apropiado para páginas de ovnis estilo Expediente-X:

5.      Diseño con tablas Las tablas HTML habían sido diseñadas para mostrar datos en filas y columnas, no para maquetar páginas web. La falta de conocimientos y el poco arraigo del estándar CSS provocó que la mayoría de diseños usaran tablas, lo que generaba páginas más grandes, menos accesibles y más difíciles de actualizar.

6.      Contadores de visitas En la soledad de la Web de 1997, saber que alguien había visitado nuestra página era todo un consuelo. Pasábamos horas pegados a la pantalla esperando que el contador subiese en una o dos visitas. Un motivo tan bueno como cualquier otro para festejar con vino espumoso, ¿no?

7. Comic Sans "Vamos a ser graciosos: usemos Comic Sans", pensaron muchos diseñadores noveles por aquel entonces. El abuso de la simpática fuente de Microsoft acabó por convertirla en la tipografía más odiada de la historia, hasta el punto de que existe incluso una plataforma condenando su uso: BanComicSans.com

8. Los botones "Se ve mejor con" La guerra de los navegadores exigía que las webs tomaran partido por una u otra tecnología. O por ambas. Las Web se llenó así de botoncitos que declaraban la compatibilidad de la página con el navegador de turno. Los animados eran más bonitos, claro.

9. Sección "Qué hay de nuevo" Cada actualización de página era manual: costaba mucho tiempo y esfuerzo. Para que resaltase más, las páginas añadían una sección "What's New" o "Qué hay de nuevo" en la que el autor comentaba cuáles eran las últimas novedades con respecto a la versión anterior.

10. La infame etiqueta <BLINK> No podíamos terminar sin hablar de <BLINK>, la etiqueta HTML más infame que haya existido nunca. <BLINK> hacía parpadear el texto. No había forma de detener el parpadeo. Fue atacado desde el principio por los expertos en usabilidad y ahora nadie lo usa

Actualidad de la Web

El dicho de que menos es más se ha aplicado a todo, desde arte a la publicidad. Cuando se trata de diseño web, nunca ha sido más cierto de lo que es hoy en día.

Con toda la tecnología de vanguardia y tantos y fabulosos gráficos para elegir o crear, a menudo los diseñadores quieren tirar de todo lo que puede para crear un sitio web.  El resultado, más que impresionante, suele ser caótico. No hay ningún centro de coordinación o de fácil uso incluso para localizar barra de navegación, el usuario se confunde y a menudo son incapaces de navegar por el sitio fácilmente o les es imposible. Se van y el propietario del sitio web pierde no sólo un visitante, sino un posible cliente.

Un sitio web minimalista, por otro lado, ofrece a los usuarios un sitio web que es fácil de usar y de navegar. Con una buena página web de diseño minimalista, los visitantes pueden fácilmente y rápidamente encontrar exactamente lo que estás buscando. Encontrar un sitio como este es como encontrar un oasis en medio del desierto.

Piense en Google, por ejemplo. Simple, básico y muy eficiente. Nada podría ser más fácil de usar? Es el perfecto ejemplo de cuán eficaz puede ser un sitio web minimalista.

Los sitios web minimalistas pueden ser muy bellos cuando están bien diseñados y rezuman clase. Gran color y gráficos lo suficiente combinados con la cantidad correcta de los espacios en blanco hacen un sitio menos ocupado, por lo que es más sencillo para un visitante para navegar. Es un calmante y refrescante cambio para un usuario, y hace que el sitio se aprecie y quieran visitarlo a menudo.

Este contenido ha de ser claro y conciso. Si bien todos hemos escuchado que el contenido es el rey, esto no significa que tengan que haber toneladas y toneladas de contenido, especialmente si se tiene poca sustancia. La información que es de fácil acceso y, precisamente por escrito es mucho más eficaz que tenga demasiado contenido para cribar a encontrar la información necesaria.

Algunos diseñadores, por desgracia, pasan por alto esta necesidad para una navegación fácil. El esfuerzo para obtener o encontrar lo que buscas está agotador y por lo general no vale la pena el esfuerzo.

Sin embargo una precisión mínima ofrece a los visitantes muchos beneficios, principalmente la ventaja de ser capaz de leer en la pantalla la información sin demasiados elementos que compiten por su atención.

COLOR

PARTE 1: INTRODUCCIÓN
El color puede ser un tema delicado. A veces los artistas utilizan colores que evocan ciertas emociones. Otras veces los artistas utilizan los colores, simplemente porque les gusta su aspecto. Mientras que cualquier profesor de diseño te dirá que la última razón está completamente equivocada. En mi opinión personal, el color siempre tiene un sentido. Este significado puede ser, como he mencionado, de tipo emocional o puede ser una preferencia personal por parte del propio artista, pero siempre tiene un propósito detrás de él.

No hay nada malo con la elección de un color porque te guste, sin embargo, al elegir un color hay que asegurarse de que su uso no está en contradicción con lo que estamos tratando de decir. El uso adecuado de la teoría básica del color puede ayudar a decidir qué colores coinciden, así como lo que cada color hace que la gente se siente.

PARTE 2: LA RUEDA
La construcción de la rueda es en realidad bastante simple. Tú tienes tus 6 colores básicos: rojo, naranja, amarillo, verde, azul y morado. Después, dependiendo de que rueda estés mirando, tienes extras, entre los colores que son mezclas de los colores básicos.

Hay nombres de todos estos colores, que son importantes saber. La siguiente es una lista de todos los nombres de los colores y lo que es bueno para ellos.

Los colores primarios: rojo, amarillo, azul. Estos 3 colores son los colores base para cada color en la rueda. Es por eso los llaman “primarios”. Cuando se mezclan dos colores primarios, se obtiene un color secundario. También hemos de tener en cuenta la posición triangular de los colores primarios en la rueda de color, y cómo los colores secundarios están junto a ellos.
Los colores primarios son útiles para el diseño o el arte, son los colores más vivos cuando se colocan uno junto al otro, por lo que notaremos que la mayoría de los restaurantes de comida rápida utilizan colores primarios en sus logos, ya que evoca la velocidad.

Colores secundarios: Naranja, verde, morado. Estos 3 colores son los que se obtienen cuando se mezclan los colores primarios. Observemos cómo el verde se encuentra entre el amarillo y el azul. Los colores secundarios son generalmente más interesantes que los colores primarios, pero no evocan rapidez y urgencia.

Los colores terciarios: Estos son los colores como el amarillo-verde y rojo-violeta. Están hechos mediante la mezcla de un color primario y un color secundario.

Los colores complementarios: rojo y verde, azul y naranja, púrpura y amarillo. No nos dejemos engañar por el nombre porque, rara vez se ven bien cuando se usan juntos. Se llaman “complementarios”, porque, se vuelven muy vibrantes y con un contraste fuerte. Los colores complementarios son útiles cuando se quiere hacer que algo destaque.

Colores análogos: rojo y naranja, azul y verde, etc. Por lo general, coinciden muy bien, pero no crean grandes cambios. Son buenos para emitir sentimientos de serenidad en diseños y obras de arte en la que deseamos que los espectadores se sientan cómodos.

PARTE 3: OTROS TÉRMINOS
Hay un montón de nombres que se refieren a diferentes aspectos del color, pero aquí es donde empieza a ser complejo. Si deseáis saber más acerca del color, seguir leyendo.

Los colores cálidos: Son colores como el rojo, amarillo y naranja. Estos colores evocan calidez, ya que nos recuerdan cosas como el sol o el fuego.

Cool Colores: Colores como el violeta, azul, verde y púrpura. Estos colores evocan una sensación de frescura, ya que nos recuerdan cosas como el agua o la hierba.

Los colores neutros: gris, marrón. Estos no aparecen en la mayoría de las ruedas de color, son considerados neutrales, ya que no contrastan mucho con nada. Son demasiado tranquilos.

Valor: Generalmente se refiere a la cantidad de negro en un color. Cuanto más negro tiene un color, más oscuro es su valor.

Brillo: Se refiere a la cantidad de blanco en un color. Cuanto más tiene un color blanco, más brillante es.

Saturación: Se refiere a la cantidad de un color usado. Cuando un color está en la saturación completa, es muy vibrante. Cuando un color es “no saturado”, una gran cantidad de color se ha eliminado. El desaturado de los colores tiende a hacerlos más neutrales, porque hay mucho gris en ellos.

PARTE 4: TIPOS DE COLOR
Como cabe suponer, hay diferentes tipos de color. Ahora es cuando se puede lanzar la rueda de colores por la ventana.

Color RGB: El nombre de RGB significa rojo, verde y azul, que son los 3 colores primarios. Este un modelo de color basado en lo q se conoce como síntesis aditiva, con lo que es posible representar a un color por la mezcla por adición de los tres colores luz primarios.

Color CMYK: Este es el método de color basado en pigmentos. CMYK significa Cyan, Magenta, Amarillo y Key-plate (la key-Plate corresponde a la plancha negra, y se llamaba así porque dicha plancha conteniene la mayor parte de la información de la imagen.). Lamentablemente, CMYK no puede reproducir la misma cantidad de colores que RGB. Este es el método utilizado por las impresoras de todo el mundo, y es también una forma inteligente de mezcla de pinturas.

Color Pantone (PMS): Este es otro método de impresión a color. PMS significa “Pantone Matching System”, y tiene una gran lista de colores especialmente mixta realizada por la Corporación de Pantone. En lugar de utilizar CMYK para crear colores, los pigmentos se crean de forma individual para la pureza. Por ejemplo, si queremos utilizar un color rojo-violeta, me quedaría con el PMS 233M. El color se hace exclusivamente para mi proyecto y siempre se imprimirá tal y como yo quiero. El único inconveniente de utilizar colores PMS es que sólo son útiles para los proyectos con pocos colores. También son más caros.

Las 10 tendencias de diseño web que están en boca de todos en 2013

El diseño web es una disciplina que evoluciona muy rápidamente y en las que las tendencias son a menudo tan fugaces como en el mundo de la moda. Aun así, y pese a su inevitable obsolescencia, hay que estar siempre pendientes de ellas. Según esta infografía de Enfuzed, éstas son las tendencias de diseño web a las que no debe quitar ojo en 2013:

1. El diseño adaptativo
Esta tendencia, que implica adaptar el diseño web a los distintos dispositivos al alcance del usuario, ya arrasó en 2012 y lo está haciendo también en 2013.

2. El diseño Metro
Este diseño, del que Microsoft es su principal abanderado, implica poner el acento en el contenido y dejar en un segundo plano los gráficos.

3. El minimalismo
El minimalismo está línea con el diseño Metro y supone reducir el diseño web a su mínima expresión en favor de una mejor usabilidad.

4. La tipografía
Los títulos en negrita con diferentes tipografías son el último grito en diseño web.

5. Parallax scrolling
Esta tendencia se diseño se remonta en realidad a los viejos tiempos de Nintendo, pero ha vuelto a ponerse de moda y está disfrutando de una segunda juventud.

6. Scrolling infinito
Popularizado por Pinterest, el scrolling infinito está presente en cada vez más páginas web.

7. Encabezados fijos
Gracias a los encabezados fijos, el internauta se ahorra tener que hacer scroll para regresar a la parte superior de la página.

8. Páginas web únicas
Aunque muy de moda, esta tendencia no es recomendable para las webs con mucho contenido.

9. Grandes fondos de imágenes
Vinculada en sus inicios a las webs de fotógrafos y diseñadores, esta tendencia se aplica en la actualidad a todo tipo de sitios web.

10. El contenido primero y el diseño después
Esta tendencia implica darle una vuelta de tuerca al diseño web, pues supone empezar primero con el contenido y continuar después con el diseño aunque habitualmente se sigue el camino inverso.

BIBLIOGRAFIA

http://www.marketingdirecto.com/actualidad/digital/10-tendencias-de-diseno-web-que-estan-en-boca-de-todos-en-2013/

http://www.a2sistemas.com/blog/categorias/actualidad-de-la-web/

http://articulos.softonic.com/regreso-al-pasado-internet-en-1997