Proyectos frecuentes de un diseñador web freelance

Desde que soy diseñador web freelance, observo que el tipo de necesidades de mis clientes se repiten y se puede observar un patrón en el tipo de proyectos que necesitan.

Se podría decir que mis clientes son de dos tipos:

1. Startup que necesita un freelance todoterreno o con experiencia.
2. Empresa u organización que necesita presencia en Internet o bien desarrollar un negocio o proyecto que necesita de la comunicación en Internet.

Con las startups normalmente suelo realizar una colaboración estrecha y desarrollo para ellos todo tipo de tareas o proyectos. Trabajo a distancia, manteniendo la comunicación diaria con Skype o por teléfono, por email y usando servicios en la nube para compartir archivos: Google Docs y Dropbox, principalmente. También suelo hacer reuniones presenciales una vez al mes para coordinarnos mejor y cuidar la relación.

Para ese tipo de clientes realizo tareas de diseño, maquetación y programación. Normalmente trabajo un fijo de horas al mes para ellos ampliable y facturándolo por horas.

Si eres un freelance y vas a iniciar una colaboración a medio-largo plazo con una empresa, y en general, si vas a destinar un trabajo contínuo facturándoles por horas, lo mejor es que elabores un contrato de prestación de servicios. En ese contrato se especificará tu compromiso de cuántas horas mensuales dedicas a sus tareas y ellos especificarán su compromiso a proporcionarte trabajo para ellas. Lo ideal es dejarlo bien especificado: compromisos, obligaciones y tarifas. Pero lo básico es entender que el trabajo se factura por horas trabajadas, no por proyecto realizado. Ya que tu trabajo lo van a usar o no otras personas y se va a integrar en un entorno que tu ya no controlas.

Tallergorilas ha colaborado con varias startups en sus fases iniciales, actualmente con Layers, en el momento de escribir este post llevo un año colaborando en sus tareas de creación de productos, entre otros la app para Google Chrome, su nueva app para iPad: persona/

Para el segundo tipo de cliente, la empresa u organización que necesita presencia en Internet, la cosa cambia, normalmente necesitan un proyecto que tiene un principio y un final. Se suele hacer un contrato de ejecución de obra o bien un presupuesto que especifica los términos de trabajo.

Este tipo de cliente suele necesitar tres tipos de proyectos:

1. Presencia en Internet: darse a conocer, explicar sus productos o servicios, establecer una puerta de comunicación.
2. Comercio online:  necesita vender algo a través de Internet, poder gestionar los pedidos, y mostrar a sus clientes sus productos.
3. Proyectos más personalizados: portales educativos, sitios web en varios idiomas y que realicen alguna función especial, portales…

Para el primer tipo de Presencia en Internet, normalmente lo más importante es que la comunicación sea clara, coherente y que se ajuste a la línea gráfica y la apariencia de marca. Muy importante conocer al cliente, asesorarle y entender qué necesita. El sitio web debe ser accesible, buen posicionable en buscadores y sencillo a la hora de mantener su contenido. Normalmente no basta con hacer un sitio web típico con WordPress, hay que ir un poco más allá y explicarle al cliente cómo puede hacer una estrategia más completa con el uso de las redes sociales y la integración en su sitio web.

Para este tipo de proyectos he realizado este año pasado varias webs presenciales, como por ejemplo, el sitio web del fotógrafo profesional Tino Gil, el sitio web de la academia de estudios Clase Parque Goya y el sitio web de la empresa de servicios educativos y deportivos Educasport.

Para el Comercio online, es prioritario entender su estrategia y el tipo de proyecto que quiere iniciar. Eso decidirá si se realiza un proyecto gradual, empezando por una tienda pequeña e ir ampliando poco a poco o si se comienza con un sistema completo con control de stock, newsletter, etc… Por ahora las soluciones tecnológicas para este tipo de proyectos que más me convencen son usar el Magento, o mejor su solución alojada: Magento Go. O bien, construir un gestor de contenidos (CMS) personalizado e integrar una pasarela de pago. Ambas opciones tienen sus pros y sus contras y habrá que valorar cuál conviene al cliente. En todo caso, el enseñar al cliente a usar su gestor de contenido para que gestione su tienda online es una fase muy importante del proyecto, ya que estas suelen ser complejas y no siempre intuitivas.

Los proyectos personalizados suelen necesitar un gestor de contenidos programado a medida. Esto implica que el cliente inicia una relación a medio-largo plazo con la empresa de programación que mantendrá el gestor de contenidos y lo hará evolucionar según necesite el cliente. La realización de un proyecto de estas características necesita una dinamica muy bien construida en la que se seguirán las etapas necesarias:

1. Elaboración de la estructura de contenido.
2. Elaboración de una propuesta gráfica.
3. Programación del gestor de contenido: backend y frontend.
4. Maquetación html y css de backend y frontend.
5. Fase de testeo del proyecto en pruebas e inserción de contenidos.
6. Publicación final.

Estos proyectos suelen ser apasionantes pero es esencial construir una relación con el cliente sólida en la que ambas partes mantengan una comunicación clara y se impongan límites necesarios para realizarlo correctamente.

Un ejemplo de este tipo de proyecto fue el realizado para el sitio web de Santiago Auserón: La Huella Sonora.

 

Diseñando para iPad

Recientemente he realizado un par de proyectos en los que la visualización correcta en iPad era esencial. La nueva web de la Clínica del Doctor Cerezuela es un pequeño ejemplo que he maqueado y que ha visto la luz hace poco.

Es útil entender cómo este medio nuevo, el de los dispositivos móviles, en particular el iPad, demanda nuevas formas de diseñar para él. Me gustaría centrarme en tres características importantes.

La principal peculiaridad de un diseño para iPad es que va a ser observado a una distancia de lectura de libro y enmarcado en un objeto portátil. Eso provoca una diferencia en la experiencia, ya que percibimos el nuestro diseño como un objeto, cosa que se ve reforzada por el hecho de que la interactividad es táctil sobre la misma imagen. Es por eso que el quitar elementos superfluos de la página y dejarla en la mínima expresión funciona muy bien ya que la atención se focaliza como en una hoja de papel.

La aplicación para el iPad de Instapaper es un buen ejemplo de ello: es una aplicación para leer cuando te apetezca artículos encontrados en Internet. La aplicación rediseña el artículo original y lo reduce a la mínima expresión, formateándolo para que parezca un documento en una hoja de papel. Simula la experiencia de leer un documento impreso entre tus manos.

Otro ejemplo sería la aplicación Flipboard. Este formatea tus canales de rss y streams sociales como si fuera una revista, combinando diferentes artículos en la misma página y generando una composición agradable de hojear, para que decidas qué artículo leerás en profundidad. Además, añade un agradable efecto de pasar páginas sutil y diferente a otras aplicaciones. Acerca la experiencia de consumir noticias digitales a la de una revista de papel.

Otra característica importante del iPad es que la experiencia es táctil. Cada párrafo de la página puede ser acercado o alejado en un zoom al hacer doble click sobre él o bien haciendo “pinch y punch” sobre la página. La forma en la que leemos en un iPad siempre está asociada a una interactividad con lo que estamos viendo. Todo puede ser arrastrado y los elementos visuales entran y salen del marco continuamente. Esto permite mostrar u ocultar las cosas que no nos interesen y focalizar la atención en elementos que hemos tocado previamente.

Un buen ejemplo de lo que hablo es la aplicación para el iPad de Twitter. En esta aplicación, las barras laterales van añadiendo niveles de profundidad a los elementos analizados, de esta forma se generan dos sentidos de lectura: el vertical en un mismo nivel y el horizontal para pasar a niveles diferentes de profundidad.

Otro ejemplo remarcable es la aplicación Showyou. En ésta, los vídeos de tus redes sociales son dispuestos en una retícula irregular y construye un espacio infinito de vídeos en el que te puedes mover arrastrando la pantalla para que elijas el que quieras ver. La experiencia vuelve a ser gráfica, táctil e interactiva.

Una última característica del diseño para el iPad es que vamos a diseñar para orientación vertical y para apaisada. Esto crea complicaciones técnicas y creativas en el desarrollo ya que a menudo hay que diseñar dos interfaces con grandes diferencias, una para cada orientación. El diseño tendrá que ser adaptable al área visualizada así como a las zonas donde se colocan las manos al agarrar el iPad, por lo que los botones interactivos deberán cambiar de lugar en cada orientación y por tanto se deberán recolocar los elementos visuales que conforman el contenido de la página.

Un ejemplo de buen hacer en este sentido es la aplicación Plizy. Ésta muestra los vídeos de tus redes sociales, en orientación vertical la estructura de la pantalla se focaliza en los comentarios que ha publicado la gente en el vídeo que se visualiza, en orientación horizontal se vocaliza la visualización del vídeo que se pone a pantalla completa y que coloca los botones de navegación a ambos lados para pasar de uno a otro de una forma cómoda.

Se habla de la guerra entre flash y iOS, pero resulta que los diseñadores flasheros, aunque desarrollan para una tecnología no soportada (por ahora) en el iPad, llevan una amplia experiencia de diseño de interfaces que les puede ayudar a pensar en términos de interacción, y eso es un conocimiento muy útil para desarrollar en dispositivos táctiles.

Beabloo renueva su sitio web

Tras varios años de colaboración estrecha con Beabloo, la empresa que está invadiendo de pantallas azules toda Barcelona, por fín estrenan su nuevo sitio web y gestor de contenidos para sus clientes.

Para el sitio web realizamos el proyecto con el gestor de contenido WordPress y el plugin multiidioma WPML. Gracias a ello, podrán gestionar su contenido en varios idiomas. Una de las mayores mejoras de este nuevo diseño es el de mostrar su sistema de cartelería digital, con ejemplos en vídeo. Esperamos que esta nuevo sitio web ayude a establecerlos como una empresa pionera en su sector.

Para el gestor de contenido online de las pantallas del sistema Beabloo, se realizó un completo estudio de arquitectura de información. Se diseñó la interface de usuario, estudiando el comportamiento de éste en el proceso de publicación con esta nueva herramienta de comunicación. Cualquiera puede probarlo contratando una pantalla a Beabloo o instalándo un sistema gratuito que ofrecen llamado Freebloo.

El resultado ya está siendo utilizado por cientos de usuarios e irá evolucionando contínuamente para adaptarse a las nuevas funcionalidades.

Wireframes en html

Normalmente un sitio web es el fruto de varios procesos: tras una entrevista con el cliente, se definen objetivos y se empieza con una propuesta. Esta propuesta suele ser una home realizada en photoshop (o fireworks) que ya muestra las secciones y subsecciones del sitio web ya que aparecen en sus menús de navegación. Esta home, entonces, ya muestra la línea gráfica propuesta por el diseñador así como un esbozo de la estructura de contenido. Además del diseño de la home se suele presentar al cliente un diseño de una página interna, que acaba de completar la apariencia general de la web. A partir de aqui,si es aprobada esta propuesta, el cliente ha de elaborar el contenido mientras el diseñador acaba de completar el diseño del resto de páginas.

¿Problemas?
Que el contenido nunca coincide con lo que se había diseñado, que el contenido no encaja, y que el cliente, a menudo, no sabe cómo estructurar su mensaje. Como diseñadores, acabamos intentando dar forma visual a algo que no tiene una estrategia de comunicación, a un contenido carente de gancho. Entonces intentamos suplir las deficiencias de ésto con elementos visuales o estructuras atrevidas que enganchen y hagan del sitio web algo atractivo.

Falla el proceso de diseño. Las fases del diseño web están desconectadas con el mensaje.

¿Cómo conseguir en la práctica un resultado tan bueno como el que consiguen los de 37signals? En su comunicación hay una conexión total entre lo que se pretende comunicar y la forma de comunicarlo visualmente.

Fases del diseño web con un proceso más orgánico
Esbozo de la estructura de contenido. Una hoja de papel y un lápiz basta para ello, pero si se quieren hacer presentaciones chulas de estructura de contenido, la aplicación online Prezi resulta muy útil.

Diseño de wireframes de cada página web. Este wireframe estará realizado con html y css. De forma que ya se ve la apariencia del texto y de las zonas de contenido. Se muestra jerarquía de tipografías pero no imágenes, estructura visual, pero no detalles.

El diseño de estos wireframes se hace con contenido inventado, pero ya escribimos lemas y frases que enganchen. Elaboramos contenido para prever la longitud de los textos y crear las zonas de contenido lo más realistas posible. Se reservan espacios para imágenes y se intuye dónde habrá ornamentación y dónde habrá que hacer un trabajo más delicado en la tipografía.

Los wireframes realizados en html tienen la ventaja de ser fáciles de modificar y son mucho más orientados a texto. Estamos trabajando con la materia prima: la misma página web. El cliente visualiza mejor cómo será en un futuro su sitio web y entenderá mejor la estructura de navegación, porque la puede “palpar” con su propio navegador. El proceso es como modelar arcilla, creando una estructura y modificando aquí y allá. Una vez que haya que empezar el desarrollo, la parte más tediosa ya está realizada, ya que tenemos realizada la estructura de divs y de jerarquías tipográficas. La base es firme y podremos centrarnos más en el detalle.

El secreto de un buen diseño web está en diseñar el contenido y cómo mostrarlo. Tenemos que diseñar también las frases, el cómo hablará el texto en nuestro diseño. Dónde hablará alto, dónde susurrará y donde atraeremos la atención del usuario con eyecandies. Un diseño web que tenga títulos con Lorem ipsum nunca será un buen diseño web porque no habrá tenido en cuenta el mensaje ni las longitudes de los textos y sin las longitudes no se puede diseñar el tamaño ni las relaciones. Además, como la mayoría de la gente escanea la página antes de leer el texto de ésta, los títulos son muy importantes, tanto, o más que las fotografías o que las ilustraciones. Las frases, lemas, títulos y textos de los botones deben estar ya en la propuesta inicial.

El cliente es mucho más creativo modificando propuestas de texto que elaborándolas desde cero. También, al tener una idea más clara de cómo se estructura el contenido dentro de una página, entonces será más realista en sus modificaciones de estructura de nuestra propuesta.

Finalmente se diseñarán con photoshop los elementos gráficos, ornamentos, colores y apariencia visual. Esa propuesta gráfica ya trabaja sobre contenido y por tanto es más precisa. El cliente estará más abierto a ella ya que él ha intervenido en las fases anteriores en las que ya se veía algo similar a su sitio web, pero esta vez ya lo mostramos vestido de gala y con todos los fuegos artificiales.

Posteriormente, se desarrolla el sitio web, pero no se parte de cero ya que en los wireframes ya hay una estructura de archivos, semántica y de estilos, que sólo ha de perfeccionarse.

¿Qué es necesario para esta dinámica de trabajo?
El diseñador debe cultivar un perfil híbrido: conocer al cliente y sus necesidades, proponer estrategias de comunicación, saber html+css y ser creativo con el lenguaje. Difícil pero no imposible.

Aprendiendo de las redes sociales

Parece que las felicitaciones de Navidad son un buen termómetro de qué es lo que está caliente en Internet. Si hace años una felicitación creativa hecha en flash era lo más, ahora esa misma es algo pasado de moda y cansino. Esta Navidad ha resultado mucho más refrescante ver vídeos en los que se mostraba la influencia de las redes sociales en nuestras vidas, por ejemplo el vídeo en el que se cuenta la historia del nacimiento de Jesús en clave Facebook. (aqui otro ejemplo)

La influencia de las redes sociales en Internet, y en nuestras vidas, es de lo más apasionante que ha sucedido en los últimos avances tecnológicos. Pero da la impresión de que estamos en un periodo 1.0 de nuestro conocimiento de las redes sociales. ¿Recordáis la web 1.0?¿Lo que pasaba hace años, cuando Jacob Nielsen nos decía que los enlaces debían ir en azul y con underline?¿El uso de las tablas y los gifs animados? Yo creo que pasa algo parecido: no sabemos lo suficiente de la web social.

Viendo la presentación de Paul Adams, imprescindible presentación que le ha hecho ser contratado por Facebook y dejar Google, intuimos que todos quieren dar una pátina de “capa social” a sus herramientas de comunicación, pero no se piensa realmente en términos sociales. Es como si no supiésemos de usabilidad de lo social, ya lo dice Mark Zuckerberg.

Vale, y nosotros como diseñadores, ¿Qué debemos aprender?, ¿Cuáles son las preguntas pertinentes que nos debemos hacer a la hora de abordar un proyecto comunicativo en Internet?¿Cuándo y cómo introducir lo social en los proyectos de nuestros clientes?

Se intuye que algunos ya están creando nuevas estrategias, como la del Huffington Post y sus listas de twitter, o la estrategia que realizó Stamen Design para los MTV Video Music Awards, o la aplicación Path. Estrategias como esas no se crean sin una profunda reflexión del medio y un proceso creativo elaborado, tan elaborado como la gran mentira de SCPF, pero sin trampa ni cartón, con utilidad para la gente.

Cada vez que empieza un nuevo periodo, y con el advenimiento de las redes sociales y los dispositivos móviles estamos de lleno en uno, empiezan también periodos fértiles en los que pequeñas buenas ideas pueden tener una gran repercusión. Si no somos capaces de generar esas nuevas ideas, al menos aprendamos unas “buenas prácticas” al igual que en su momento lo fue diseñar de acuerdo a los estándares.

Conditional Tags y Theme Hybrid

ACTUALIZADO:
He encontrado una forma más sencilla de eliminar los sidebars de la home (fuente: http://bit.ly/f5SUhF )

---

Como os he comentado, estoy haciendo muchas webs utilizando como gestor de contenidos el WordPress, que para la mayoría de proyectos pequeños resulta ser el cms más flexible y fácil de personalizar. Crear un tema a partir del tema parent hybrid y de su child theme skeleton, es muy sencillo.

Lo normal suele ser personalizar mucho la home de un sitio web para que no parezca un blog, aunque luego, las noticias se parezcan más a un blog o bien tengamos una sección blog propiamente dicha. En mis últimos proyectos tengo que crear varios loops en la home para que me muestren contenido dinámico proveniente de diferentes categorías o de diferentes custom types.

Con tantos loops, me encuentro que el imprescindible plugin widget logic no me funciona como lo esperado. Este plugin utiliza Conditional Tags. Por ejemplo: intento que el widget logic oculte los sidebars de mi home y no hay manera de que haga caso al conditional is_home().

Investigando me he dado cuenta de que al hacer varios queries en la home, parece que algunos condicionales ya no funcionan. Y la solución la encontré aqui. Así que debía resetear la query antes de usar el condicional para que funcionase. Quizás haya formas más elegantes pero esta me ha servido. He aquí el código a insertar en functions.php:

Ergonomía multitouch

Viendo el vídeo del uso de kinetic para controlar el Windows 7 me hace pensar que es divertido pero poco más. Eso de controlar un sistema operativo con los gestos es muy útil sólo si es ergonómico. Ya lo ha sabido ver Apple, cuando nos comunicaban que el multitouch quiere ser vertical: hablaba de ergonomía. Cuando mueves parte de tu cuerpo para controlar una interface, el movimiento ha de tener un punto de referencia y no es cómodo que el punto de referencia sea la parte superior de tu pantalla. Yo me imagino que un buen punto de referencia sería el codo o un objeto fijo que está sobre la mesa. Además la respuesta ha de ser instantánea, sin delay. Enlaces multitouch.

Suelo utilizar el plugin WPML para reali…

Suelo utilizar el plugin WPML para realizar un blog multilingual con WordPress. Es uno de los plugins más increíbles y completos que he visto. Además actualizan las versiones a una gran velocidad añadiendo nuevas funcionalidades día a día.

Ahora mismo estoy desarrollando un blog multilingual y el cliente necesita un formulario de contacto en la barra lateral. He optado por utilizar el Contact Form 7, ya que es muy flexible y completo. Para añadir el formulario en un lateral utilizo un widget de texto al que le inserto el código suministrado por el CF7. Además creo un formulario para cada idioma especificándolo en el menu de creación de nuevo formulario de CF7. Todo ok.

Ahora el problema es que quiero que el formulario en inglés se vea cuando estoy en el idioma inglés y el español cuando estoy con el idioma español. Es decir, quiero mostrar u ocultar un widget de texto dependiendo del idioma seleccionado en mi selector de idioma suministrado por mi WPML.

Para ello utilizo el imprescindible plugin Widget Logic. Y en las opciones del widget logic utilizo:

(ICL_LANGUAGE_CODE=='en')

en los widgets que deseo que solo se muestren en inglés y

(ICL_LANGUAGE_CODE=='es')

en los que deseo que solo se muestren en español.

Diseñar temas de WordPress con Hybrid

Cada vez es más fácil y agradable maquetar un blog con WordPress. En los últimos blogs que he maquetado, he utilizado el WordPress 3 junto con el tema hybrid y el child theme skeleton. El tema hybrid implementa el nuevo sistema de menús y está perfectamente preparado para ser traducido o utilizado con el plugin multiidioma WPML. Esta combinación, junto con el plugin widget logic que permite elegir en qué páginas o posts se verán cada widget, da una flexibilidad muy difícil de conseguir antes. Si, además, se utiliza un sistema de retículas como el 960gs, entonces se puede realizar un blog en un tiempo récord.

Casi todo lo que he aprendido últimamente de desarrollo en WordPress se lo debo al excelente trabajo didáctico de Justin Tadlock en su blog y en los foros de ayuda de su tema hybrid. Recomiendo especialmente los posts en los que explican cómo utilizar los custom post types, las custom taxonomies y el uso de los custom fields. Nunca ha sido tan fácil y flexible utilizar el WordPress como cms desde la introducción de las nuevas funcionalidades del WordPress 3.

Un ejemplo del uso de todo esto es el nuevo blog que he maquetado para Layers.com. El secreto de un buen blog es partir de un diseño que tenga en cuenta las posibilidades y limitaciones del propio WordPress. Los diseñadores gráficos han de conocer css para que el resultado sea de calidad, y por eso es una suerte colaborar con los diseñadores de Agencia Digital.

Buscar un estilo propio

Volviendo a ver el documental de Beatles Anthology. Me vuelve a confirmar que las grandes carreras artísticas suelen empezar con una fase de imitación de tus ídolos, para después entrar en una vorágine febril de trabajo donde la exploración ya es interna. Aprendes de ti mismo hasta que creas tu estilo. Esto suele suceder en un momento de apertura vital, en el caso de los Beatles a los 17 años, cuando se fueron a Hamburgo a tocar a sueldo en un garito de mala muerte.