Etapas de construcción

Manos a la obra, vamos a construir una web. Empezaremos recopilando material, haremos los cimientos e iremos elevando poco a poco el edificio hasta llegar al tejado.

grua

 

El primer paso corresponde al área de marketing, planteamiento iniciales, requisitos, posicionamiento en el mercado, distribución de contenido, diseño de la estructura. Osea que nos toca la preparación del material de obra antes de empezar a edificar.

A continuación nos llega la tarea de planificar la parte más técnica, tipo de servidor en que vamos a alojar el contenido, tecnología que vamos a usar, decidiremos el lenguaje de programación a utilizar. En resumidas cuentas estudio del terreno y el diseño de los planos de construcción.

Y empezamos con los cimientos, integramos gente en el proyecto. Dependiendo de su tamaño necesitaremos analistas, diseñadores, programadores…. en caso de proyectos pequeños  incluso una sola persona puede desarrollarlo. No es lo mismo construir una cabaña en un árbol que un rascacielos.

La siguiente etapa es edificar la estructura. En nuestro esqueleto se empezará a plasmar todo el estudio previo y será muy importante ya que un error en esta fase puede dar al traste con todo el proyecto o acarrear problemas estructurales que convierten un buen trabajo en una pesadilla. Las goteras, grietas y demás problemas sólo aparecen si la estructura no es sólida.

Colocamos los tabiques y vamos dando forma al interior. Vamos integrando el contenido: textos, videos, imagenes… y vemos como se comporta nuestra web.

Y ya nos toca meternos con la fachada, el diseño exterior de nuestra flamante construcción. Construimos la interfaz, los diseñadores hacen su magia para que todo quede bonito.

Por último realizamos pruebas y estudios para comprobar que nuestro edificio es sólido y seguro. Un estudio de estres de la web es imprescindible para comprobar que va a soportar el tráfico de gente previsto en ella.

Como en todas las construcciones es muy importante el mantenimiento. Una vez realizado y entregado el trabajo hay que cuidarlo y mimarlo para que nos dure mucho tiempo. E ir realizando reformas y actualizaciones para que se mantenga sano.

Mamá quiero una web

Diariamente recibimos un bombardeo de información con la posibilidad de construirnos nuestra propia web, sin ningún conocimiento y por poco dinero. Cualquier pequeña empresa con pocos recursos puede tener una presencia online  sin necesidad de realizar un gran desembolso.

Sin embargo no todo es tan sencillo (ni por supuesto tan barato). Hacer una web es algo más que elegir una plantilla y subir unas fotos. Se me antoja imprescindible realizar un estudio previo de necesidades, valorar el posicionamiento en el mercado y demás elementos de marketing que no voy a detallar porque esto es un blog de diseño.

Las empresas de hosting (alojamiento web) han ido ampliando su negocio ofreciendo plantillas pre-diseñadas para que los usuarios las utilicen. Todos los ejemplos que nos aparecen tienen un aspecto absoluta y totalmente profesional (porque realmente están hechos por profesionales). Cuando el neófito en estas lides se lanza a componer su web comienzan los problemas.

webs

Disponer de una buena imagen corporativa, un buen logotipo, un diseño acorde con el posicionamiento en el mercado de empresa supone un importante gasto, en general poco valorado.

Planificar una web, conseguir una estructura equilibrada, un diseño personalizado, una navegación simple y organizada, una buena elección de colores y un contraste adecuado entre ellos requiere conocimientos y horas de trabajo.

En resumidas cuentas, si quieres ofrecer una buena imagen de marca, acude a un profesional. De la misma forma que si quieres reparar una tubería llamas a un fontanero.

Y si lo que quieres es dedicarte al diseño, aparte de los conocimientos de gráfica publicitaria vas a necesitar manejar una serie de herramientas que detallaré en un próximo post.

El tamaño sí que importa

Una campaña digital. Una sencilla adaptación de las piezas gráficas a formatos digitales. En resumidas cuentas llevar la imagen de una empresa a la cabecera de facebook, twiter y resto de medios digitales. Hasta aquí puede parecer sencillo, pero vamos mentiendonos en harina.

El primer problema con que nos encontramos es que desconocemos los tamaños necesarios para las imágenes, para ello hay una solución larga y tediosa que es visitar cada una de las páginas (de las redes sociales por ejemplo) y bucear en ellas hasta encontrar las características que buscamos. La alternativa es acudir a alguna de las páginas donde se recopila esta información. Altamente recomendable es esta de Autreplanete: Social Media Image Maker.

redes

Nos permite incluso generar las imágenes para las redes sociales del tamaño adecuado.

recorte

Hasta aquí todo perfecto, sin embargo hay que tener en cuenta que una campaña digital incluye un lema, el logo de la empresa, con lo que el ajuste en la redes se empieza a complicar.

miempresa

Sobre todo cuando lo probamos en la página donde la vamos a insertar

facebook

Es aún peor cuando no coinciden las proporciones de la imagen, como en un post de facebook.

facebook-post-normal

La única solución es tener los archivos de trabajo con los que han hecho la imagen de la campaña, y meter muchas horas para adoptar todos los formatos.

photoshop

recorte_photoshop

recorte_photoshop2

Además contamos con un hándicap añadido, cada cierto tiempo los responsables de las redes sociales y resto de medios digitales, tienen la costumbre de cambiar el diseño de sus webs. Con ello todos los tamaños de imagen vuelven a cambiar y volvemos a empezar de nuevo (acaba de suceder con Twiter).

Esas letras tan bonitas

Todos los profesionales o aficionados al diseño hemos pasado horas buscando la tipografía perfecta para un trabajo. Esas letras tan bonitas que tenemos en la cabeza y no encontramos.

letras

Una buena galería de fuentes nos van a dar mucha flexibilidad para cualquier proyecto gráfico. Sin embargo el abuso de diferentes tipografías en un diseño lo puede convertir en un desastre.

tipografia

listado

Otra cosa que sorprende al público en general es que las fuentes que podemos instalar no son siempre gratuitas, de hecho hay empresas que se dedican a diseñar y vender tipografías, podéis encontrar más información en el estupendo blog dedicado a la tipografía Unostiposduros.

En la mayoría de los casos, salvo que trabajemos para grandes corporaciones, buscaremos webs donde podemos descargar gratuitamente las fuentes o en su defecto a un módico precio. En Font Squirrel, Dafont, 1001 fontsThe League of Moveable Type, Font Fabric e infinidad de sitios mas se encuentran fácilmente tipografías de calidad sin coste alguno.

dafont

Actualmente tanto en PC como en Mac instalar una fuente es tan sencillo como descargar el archivo (normalmente está comprimido así que hay que descomprimirlo), localizar la tipografía que queremos instalar (con extensión ttf o otf), abrirla y darle al botón de instalar.

ttf

instalar_en-pcInstalar una tipografía en Windows

instalar-en-macInstalar una tipografía en Macintosh

Una sugerencia para todos y todas que estén pensando en dedicarse a este mundillo (bien en plan amateur o profesional), nunca, nunca, nunca jamas uséis la Comic Sans (posiblemente sea la tipografía más odiada). Hay una famosa web (bancomicsans) pidiendo su desaparición, e infinidad de artículos (por ejemplo en la revista gq o en el confidencial) explicando que no fue creada como tipografía, y que incluso su creador reniega profundamente de ella.

Campaña electoral. Realidad aumentada

En materia de diseño electoral nadie asume excesivos riesgos y apenas se ven apuestas rupturistas, salvo en partidos cuyas posibilidades electorales son escasas y su repercusión pasa por llamar la atención.

La busqueda «cartel electoral» en google da como resultado, infinidad de veces, la foto del candidato o candidata (lo mas agraciado o agraciada posible) con el lema de campaña en tipografía grande y cuidada y poco más.

googleUn par de excepciones testimoniales aparecen en el resultado del buscador (y no precisamente de cuidado diseño), la de Ciudadans con su candidato desnudo. Y los pechos de una candidata menorquina, con el gran lema «Dos grandes argumentos», retirado por sexista.

carteles

Obama utilizó la realidad aumentada en la campaña electoral de su reelección en 2012. Llevo años oyendo hablar de ella, hay muchas aplicaciones que la utilizan, pero no ha tenido excesivo impacto en el gran público (al menos por estos lares). En dispositivos móviles se trata de que nuestro smartphone o tablet «reconozca» una imagen con su cámara y en su lugar nos coloque en pantalla un vídeo o una animación superpuesta.

En la campaña electoral en la que estamos inmersos, hubiera sido más de lo mismo si no fuera por la apuesta de realidad aumentada del «folleto mágico» del EAJ-PNV. El diseño es tan simple como el resto, pero cobra vida con vídeos de los candidatos o nos permite sacarnos una foto (similar a la de Obama), todo ello a través de una aplicación para Android o IOS.

Especialmente reseñable es que con la misma aplicación cobran vida los candidatos en una gigantesca lona colocada en la fachada de Sabin Etxea. Nos lo cuentan en el vídeo de presentación de la campaña, en su canal de youtube.

Me ha resultado muy curioso que en una campaña de tan bajo perfil hayan hecho una apuesta por el diseño de una aplicación específica. Y más aún que me resulte atractiva.

El michelín de Sarkozy

Pensamos que Photoshop es un programa mágico con botones milagrosos que consiguen dejar guapo a cualquiera, colocar elementos donde no existen e integrar cualquier cosa o persona en una foto. Sin embargo aunque las herramientas de retoque han facilitado el trabajo, la realidad es que sigue costando muchísimo tiempo y práctica realizar un montaje de calidad.

Hay retoques bochornosos pero bien realizados, sólo somos conscientes de su falsedad por la notoriedad del personaje como el michelín desaparecido de Sarkozy.

michelin

Otro mas evidente fue aquel partido en que a algún iluminado del diario As le debió parecer que había poco publico y se dedicó a clonar la gente sin ningún pudor.

partido

O aquella patética postal navideña de la familia real en la que no se pudieron juntar a todos los nietos borbones y llamaron al becario para que los juntará con Photoshop.

real

Hay una web estupenda que se dedica a recopilar montajes y retoques desastrosos, se llama psdisasters (osea como traducción «libre» desastres de Photoshop). En ella podemos ver en anuncios reales cuerpos imposibles….

cuerpo_imposible cuerpo_imposible2 cuerpo_imposible3 mano_imposible

Manos y brazos que aparecen de la nada.

brazo manos

O alguno más difícil de ver como son los reflejos inverosímiles.

sombra_imposiblereflejo_puerta

Ciertamente alguno de los «errores» son complicados de ver como el del coche. Lo dedos dislocados son más evidentes.

mano

Los que trabajamos bajo la presión de una fecha de entrega que normalmente es ayer en algún momento fallamos, no voy a ser yo el que diga que nunca ha metido la pata. Pero alguno de los ejemplos son sonrojantes.

color reloj

 

seisdedos

Os invito a visitar la web y pasareis un buen rato

RAW. Vida más allá del JPEG (y III)

Una vez conocidas las características de este formato de imagen, terminamos con el punto más importante, su edición. En mi caso utilizo el Adobe Camera Raw (ACR), pero todos los ajustes que voy a exponer son extrapolables al resto de programas que manejan el RAW.

Vamos con lo mas sencillo y efectivo, dos conceptos importantes son la temperatura de color y la exposición, ambos se pueden manejar al realizar la fotográfia, pero su corrección posterior sólo es eficaz si utilizamos el RAW de la cámara.

Para entenderlo de forma fácil, cuando la temperatura de color es alta los colores tienden a tonos rojizos y cuando es baja azulados. En este ejemplo por un inadecuado ajuste en la cámara los tonos de la imagen eran excesivamente fríos.

temp_raw

Podemos corregirlo elevando la temperatura de color

temp_raw_2

El concepto de exposición se refiere a la cantidad de luz que tiene la imagen, si está sobrexpuesta tiende a tonos mas claros, y su contrario subexpuesta a tonos mas oscuros. Vamos a ajustar una imagen subexpuesta.

exposicion

Subimos los valores de la exposición

exposicion_2

Aumentando la luminosidad de todos los puntos de la imagen perdemos resolución en las zonas más claras (en este caso nos desaparecen las nubes del cielo). Podemos manejar otros parámetros para ser más selectivos y añadir luz únicamente de las zonas más oscuras. En ACR se llama «sombras», si elevamos los valores conseguimos mantener las zonas mas luminosas y aclarar las zonas oscuras.

exposicion_3

También podemos interactuar a la inversa oscureciendo las zonas mas brillantes. En este caso manejamos «iluminaciones».

exposicion_4

Disminuimos la luminosidad y recuperamos texturas en las zonas más cercanas al blanco.

exposicion_5

Otro ajuste interesante es el grupo de «claridad», «intensidad» y «saturación» de color, que nos permite manejar la información de color para conseguir mas (o menos) contraste, colores mas vivos, o apagar los tonos de color. En este paisaje los colores no destacan mucho.

saturacion

Ajustando este grupo de valores conseguimos destacar más los colores

saturacion_2

O disminuir la intensidad de color

saturacion_3

Existen infinidad de ajustes dentro de estos programas, os invito a que vayáis descubriendo todas las posibilidades y seguro que (a mi me ha sucedido así y podéis verlo en mi flickr) empezáis a utilizar siempre el RAW.