DiGDOM.

net White paper: Cmo beneficiarte del diseo

ndice

Por qu es importante disear tu marca en internet......1 Las fases del diseo.....................................................2 Elementos de navegacin.............................................3 Arquitectura de la informacin......................................4 Prototipado y wireframing............................................5 Diseo y usabilidad.......................................................7 Responsive web design.................................................8 Maquetacin y programacin........................................9

Por qu es importante disear tu marca en internet?

C U E E CP
1

ada vez que visitamos una tienda electrnica o un sitio web informativo, lo primero que buscamos es si cumple con nuestras expectativas, si ese sitio contiene el material que nos interesa. No existe mejor forma de satisfacer a un usuario o cliente que construyendo un sitio optimizado para cumplir con su objetivo fundamental: vender algo. Es aqu donde entra en juego la palabra mgica usabilidad.

n sitio web bien construido implica haber reflexionado sobre los objetivos que quiere llevar a cabo y a qu tipo de pblico buscamos. Una vez hecho esto hay que pensar en el contenido que se quiere publicar y su frecuencia.

A partir de ese momento podemos empezar a pensar como vamos a organizar el contenido, diseamos la arquitectura de la informacin y el diseo de interaccin. Esto no es otra cosa que hacer un boceto de cmo va a ser la navegacion de tu sitio web, cmo el usuario va a poder transladarse por la web. stablecida la clasificacin del contenido y el wireframing vamos al siguiente paso que no es otro que la eleccin de los colores y las fuentes, los vacos y los elementos grficos que vamos a usar para conseguir una adecuada experiencia de usuario. n definitiva, disear para que tu producto sea bello sin perder de vista 7 la funcin que debe cumplir, y sobre todo, que cada elemento que pongamos aporte comodidad al que lo usa y sea fcil de entender para qu est ah puesto.

ales son los beneficios de tener un cliente satisfecho? ues que volver a usar tu aplicacin, la recomendar a sus amigos, volver a comprar, si lo que tienes es una tienda, comentar positivamente en las redes sociales, por lo tanto partir del diseo para alcanzar ese servicio o producto usable, accesible, bonito y que satisfaga, se ha convertido en un requisito imprescindible para una economa conectada, con clientes o usuarios muy exigentes y rencorosos. Una mala crtica puede desatar tormentas que afecten a tu negocio. Y qu es ms importante que cuidar aquello por lo que tanto peleas a diario.

La fases del diseo

Cada audiencia tiene unas necesidades especficas, por tanto tu sitio web deber estar orientado a tus visitantes. Lo primero que debemos preguntaros es: Cules son los factores que hacen que tengamos una buena experiencia de usuario? Qu caracteriza a mi potencial audiencia? Cales son sus valores? Qu objetivos tienen cuando buscan en la red? Qu les preocupa o qu solucin buscan? Si nos enfocamos en esto, podremos dar respuesta a un grupo especfico de personas, pueden ser miles o millones. En el proceso de construccin de una web hay que tener en cuenta la manera como buscamos y navegamos por internet. Sabemos que la motivacin fundamental es la bsqueda de informacin til. Y la forma de bsqueda elegida por la mayora es a travs de buscadores, es decir, a tu sitio web llegarn en su mayor parte a travs de un buscador antes que por enlace directo o escribiendo la direccin. Por este motivo el diseo debe dejar claro qu es lo que ofreces, la navegacin debe ser muy clara, los textos bien jerarquizados mediante encabezados descriptivos y que sea fcil llegar al lugar o contenido buscado. Y si procede, lo ptimo es una foto y un texto que aporten ms informacin. Todo esto genera confianza y satisfaccin a tus usarios, y sabemos que un cliente contento vuelve. Hay muchas razones por las que los visitantes de nuestro sitio abandonan. Una de las razones principales es el uso de tecnicismos que nadie entiende, otra es encontrarse un texto con mucha informacin y que sta no est jerarquizada con un ttulo de cabecera, un subttulo o usando vietas, y que permitan encontrar fcilmente informacin relevante. 2

Otra molestia causante de abandonos es el uso de banners o publicidad intrusiva, es muy molesto y nos genera frustracin. En conclusin, las mejores prcticas en internet nos indican que los sitios web que ms xito estn teniendo, estn centrados en el cliente, son coherentes y la informacin que ofrecen tiene sentido, son honestos desde el comienzo hasta el final. Por lo tanto: Simplifica Un diseo sencillo no implica que sea aburrido o malo, al contrario, consiste en mantener los elementos imprescindibles y eliminar los superfluo, eso no impide que sea bonito. Los elementos grficos estn para reforzar y explicar tu contenido. Si insertas publicidad preocpate que sea relevante para tus lectores. En cuanto a los textos, ten claro que cuanto ms breves mejor, sintetiza todo lo que puedas. Diseo consistente La consistencia se basa en no sorprender al lector con un vdeo o una alerta cuando lo que espera es ver un artculo al clicar en un enlace. Mantener los mismos items en el men en todas las pginas es otro ejemplo de cosistencia, en definitiva, no confundir a nuestros usuarios cuando navegan y que les sea fcil hacerlo. Uso de estndares Utiliza un diseo estndar, esto no es ms que usar lo que la mayora de webs existentes usan, es mejor innovar con el contenido, ten en cuenta que tus lectores estn acostumbrados a navegar por muchas pginas, por lo cual conviene no distraer la atencin innecesariamente. Un usuario confuso es un usuario que vas a perder.

Elementos de navegacin
Existen muchas formas de desplazarse por los documentos y elementos de una web: Navegacin Para crear una navegacin ptima debemos mirar como lo hace la gente que entra en un sitio web. Lo primero que alguien mira es el nombre de la web, lo segundo es el encabezado o alguna imagen relevante, en definitiva, buscan informacin bien en los encabezados o en los mens de navegacin. Una buena prctica nos lleva a destacar un buen encabezado, resmenes y otros contenidos relacionados. Migas de pan (Breadcrumbs) Otro elemento fundamental es saber en todo momento dnde estamos dentro del sitio, o en ocasiones saber donde ir, sobre todo si se trata de un eCommerce. Son muy tiles para conocer la jerarqua de la pgina dentro del conjunto. No reemplaza al men principal, digamos que es un sistema de navegacin secundaria.

Categoras Navegar por categoras se refiere a que podemos movernos dentro de un sitio a travs de su contenido, bien por la fecha de publicacin, por contenido promocionado o relacionado, por orden alfabtico si se trata de una librera, etc.

Mens Todos deben saber de forma rpida de qu va el sitio web que visitamos, qu informacin contiene y a ser posible ver alguna imagen que nos ilustre de forma clara. Los mens de navegacin son muy importantes para mostrar las categoras. Lo ms usual es colocarlos arriba en horizontal o a la izquierda en forma vertical. Un men bien avenido tendra que evitar tapar la vista de la web con un men desplegable muy grande.Si fuera este el caso, lo recomendable es agrupar los items por semejanza. Nunca condundas a tu audiencia mediante la enumeracin de productos muy tcnicos que muchos no entendern.

Buscador Cuanto ms grande sea tu sitio web, ms necesidad tendrn tus usuarios de usar un buscador. Al parecer la mitad de los usuarios prefieren navegar con un buscador frente al men. Y aumenta su nmero a medida que que el sitio es ms grande. Enlaces Normalmente se usan de color azul y subrayado, no tiene que ser as, un buen color es el corporativo, como puede ser el del logo, pero si no tienes claro que color usar, siempre ser mejor utilizar el estndar, y obviamente hacerlo con todos los enlaces.

Arquitectura de la informacin
Es la disciplina encargada de jerarquizar las relaciones entre documentos Blueprint Para hacer un blueprint que nos ilustre como va a ser la jerarqua y la navegacin entre pginas web, podemos hacer uso de muchas herramientas. Pero en definitiva, lo importante es reflejar la estructura y jerarqua que van a tener las diferentes pginas web entre s.

Prototipado y Wireframing

Qu es el prototipado y para qu puede serte til? Como en cualquier proyecto vital o laboral, es mejor planificarse, aunque luego se tengan que hacer cambios, ya lo dice el dicho, el que no planifica su xito, planifica su fracaso. En una web es esencial conocer de antemano que contenidos y que funciones tiene que ofrecer cada pgina, y antes de ponerse manos a la obra, tener un boceto de lo que se quiere hacer es bsico para poder evaluarlo. 1-Lo primero que hay que hacer es estudiar la competencia, ver modelos de xito relacionados con tu actividad. As sabrs a quien quieres parecerte y empezar a hacer un boceto de la arquitectura de informacin y diseo de las pginas que compondrn tu sitio. 2- Para hacer los wireframing o mockup (bocetos de pginas web), puedes usar un lpiz y un papel o herramientas de software tanto gratuitas como de pago, en funcin a tus necesidades y posibilidades. Pero en definitiva, lo que hacen es de puente entre la estructura de informacin del sitio y el diseo e interaccin que van a tener sus elementos entre s y entre el usuario.

Prototipado y Wireframing

Jerarqua visual del contenido El grado de libertad a la hora de disear tu web est delimitado por varios factores: -El modo como leemos y exploramos el contenido. Cuando exploramos una web lo hacemos mirando de arriba a abajo y de izquierda a derecha. A golpe de vista nos fijamos en las fotos, en los encabezados, en la informacin relacionada,etc. Por eso tenemos que tener en cuenta la disposicin de los elementos para que su lectura sea lo ms eficiente y agradable posible. Otro factor importante es la modularidad, es decir, los bloques de contenido que se repetirn en todo el sitio.

HEADER CONTENIDO SIDEBAR

FOOTER

Diseo y usabilidad

Es importante tener en cuenta en todo momento a nuestros usuarios, eso no implica excluir lo bonito de nuestros diseos. La usabilidad nos indica lo rpido que vamos a entender un sitio, a aprenderlo y usarlo sin dificultad, implica evitar lo confuso y suprfluo. Intentar utilizar elementos que no ralenticen la navegacin y destacar los elementos del diseo ms importantes. Para que una web no sea un horror, ser conscientes de los contrastes correctos es fundamental, es decir, hay que tener en cuenta tanto los colores de fondo as como el de las fuentes. Existen muchas herramientas y sitios donde buscar inspiracin, uno muy recomendable es http://www. colourlovers.com o plugins para el navegador como colorchecker. El uso de dos fuentes es lo recomendable, en los encabezados se puede arriesgar un poco ms, pero para los textos es mejor usar tipografas sans serif debido a su mejor legilidad.

Responsive Web Design

Qu nos aporta el responsive web design? Hace no muchos aos el campo informtico era un terreno para el que tena un ordenador en casa y en el trabajo, muchas personas desconocan o tenan nociones muy bsicas de su manejo. Todo esto ha cambiado radicalmente desde que surgieron los smartphones, casi todo el mundo tiene una mquina en su bolsillo capaz de hacer lo mismo que un ordenador, por lo hay que tener en cuenta un diseo adaptado a estos dispositivos. Y no slo a mviles o tabletas, sino a cualquier pantalla que pueda conectarse a internet. En este contexto surge un nuevo concepto de diseo donde vamos desde lo pequeo a lo grande, manteniendo los elementos esenciales de tu web e ir aadiendo ms a medida que crezca el tamao del aparato que nos visite. Nuestra web se adapta a la pantalla del que nos visita, conviertiendo su experiencia en algo mucho ms agradable y eficiente, no tendr que hacer zoom no moverse hacia los lados, ser, en definitiva un usuario ms satisfecho. Habr ms posibilidades de que vuelva a visitarnos o que nos compre si se trata de una tienda electrnica. Cmo saber si una web es responsive? Puedes acceder desde una tablet o un smartphone o bien desde un ordenador personal para ver los cambios, haces click con el ratn el borde derecho de tu navegador y lo arrastras hacia la izquierda, as podrs observar como se adapta al tamao al que lo tengamos.

Maquetacin y programacin

Una vez que hemos estudiado y esbozado nuestro diseo, llega a hora de traducirlo a cdigo. Hoy en da se utiliza el lenguaje html para diagramar, para construir las capas de las que se dotar el proyecto y acontinuacin se les da forma, color, posicin,etc. Esto ltimo lo hacemos a travs del lenguaje css. Los ltimos estndares son HTML5 y CSS3, el primero es un conjunto de tecnologas que estn cambiando el escenario del desarrollo, aporta un etiquetado semntico, lo que lo hace ms amigable a los programas encargados de indexar y por lo tanto es ms fcil encontrar un sitio en los buscadores. CSS3 nos adentra en el mundo de la maquetacin, por medio de la animacin de elementos, movimiento, sombras en textos y cajas, bordes redondeados,etc. Aunque cabe decir que no todos los navegadores han implementado estas tecnologas ya que estn an en desarrollo. Programar es dotar de funcionalidad a tu proyecto, hay muchos lenguajes de programacin y libreras que nos facilitan las cosas. Tanto de cara cliente, se interpreta en el navegador, como del lado del servidor. Para facilitarnos el trabajo contamos con CMS como wordpress, joomla o drupal, que mediante su instalacin y mediante plugins nos permiten desarrollar sitios de manera fcil y rpida. Adems cuenta con comunidades detrs, que lo hacen mucho ms fcil, con foros, documentacin abundante, plantillas gratuitas y de pago,etc.

A modo de conclusin, disear aporta claridad hacia tu proyecto, evitando problemas mayores que ya se habrn resuelto en el momento de llevarlo a cabo. Tendrs pensada la estrategia de comunicacin con tus clientes y/o usuarios, y te ser ms fcil llevar a buen puerto tus objetivos.

DiGDOM.net
Primera edicin, 2013 Edicin: DiGDOM.net. Redaccin: Roberto Menor Romn Diseo grfico y maquetacin: DigDom.net Para ms informacin puede consultar la pgina www.digdom.net
Creative Commons

DiGDOM.net