Es por eso que espero sus comentarios, ahora el cliente es ficticio es real, yo voy a crear el ambiente real y las soluciones serán reales. Antes de empezar quiero resumir las tareas que desempeñaremos y que aprenderemos:

• Entender al cliente y sus requerimientos
• Estudio de soluciones para el cliente
• Principios de diseño web
• Jquery, lo bueno del javascript
• WordPress, la vida del sitio web
• Promoción y divulgación

Ok, yo creo que con eso estamos. ¡Empecemos!

El cliente y nuestro nuevo proyecto

Nuestro cliente será una empresa que necesita un sitio web “básico”, con funciones “web 2.0″ y que sea dinámico. ¿Entonces, te quedó claro? Un brief no es un resumen del problema, no es una explicación de un problema tampoco una solución a medias.

Cuando tenemos un cliente, lo primero es saber que significa para el palabras como “básico”, “web 2.0″, “dinámico”, “que venda” por ejemplo. Un brief nos dará una idea bastante clara de lo que se necesita y como se puede solucionar.

Otro punto muy importante es que los requerimientos no son barreras. Las barreras se llaman limitaciones. Los requerimientos son, para el cliente, lineamientos talvez de marca. Más no cosas como “que el logo se mueva”, son cosas como “mis clientes son personas con pocos conocimientos en internet”, no “quiero que funcione igual en firefox que en IE6″.

Entonces, nuestro cliente necesita un nuevo sitio web para su empresa. Ellos se dedican a la venta o alquiler de casas y apartamentos que personas particulares quieren vender o alquilar. Los requerimientos son los siguientes:

• Necesitan que se puedan ingresar casas o apartamentos y que puedan identificarse por ubicación en Guatemala (mi país) y si se pueden vender o alquilar.
• Solo utilizarán dolar para los precios
• Desean que cada ficha de casa tenga sus opciones generales: número de cuartos, de baños, si tiene jardín, serviciso, cuantos níveles, etc. además de una galería con una N cantidad de imágenes.
• Un blog de noticias y cosas de interés
• Conectividad para redes sociales
• Grupo objetivo clase alta y media-alta

La ventaja es que nos han dejado hacer lo que queramos.

Planificando el proyecto

Por ser un sitio donde tendremos un catálogo de propiedades que pueden expanderse luego no solo casas y apartamentos sino a oficinas, bodegas, fincas, etc. necesitamos alguna forma de categorizar y que no tiene nada que ver con las noticias.

Necesitamos también categorizar por ubicación y por modo alquier/venta.  Aparte de las secciones que comúnmente se ven un sitio corporativo. Necesitamos facilitar la búsqueda por tipo de vivienda, ubicación, alquiler o venta y posiblemente por rango de precios.

En algún momento puede que hayan propiedades que sean más relevantes que otras y que se quieran mostrar en forma de compreme.

Solución

Usaremos WordPress y sus famosos post-types y taxonomías (si, se te acaban de alumbrar los ojos, también habrá un artículo completo mostrando el uso de estos recursos en la vida real y no solo ejemplos dummy).

El diseño estará basado en una paleta de colores rojos y tonos oscuros (negros) ya que nuestro cliente solo vende propiedades de lujo y queremos dar un toque de pasión en las propiedades.

Usaremos 960 (si otra vez tus ojos, usaremos 960 al máximo para que te des una probadita de poderoso sistema de maquetación).

Los custom fields de WordPress serán quienes nos darán información extra para poder hacer las búsquedas.

• Ver nuevo cliente real, para la serie de artículos

Antes de todo quiero aclarar la diferencia entre una página web y un sitio web. Ya que casi cada empresa web que visito, encuentro “hacemos páginas web“.  Es una palabra la gran diferencia, como lo mencioné en “5 cosas que debes saber antes de adquirir tu sitio web”, un detalle muy imporante:

• Página web: en resumen es un archivo donde se muestra contenido en un formato para que pueda ser leído por un explorador web…
• Sitio web: conjunto de páginas web que hace referencia a una empresa, institución o información; con un mismo tema en común…

Tenemos que tener en cuenta que, como lo he escrito antes, el saber crear un sitio web no es saber utilizar un editor de etiquetas HTML o saber manejar un programa de edición de imágenes, como comprar un dominio,  etc. Es más que aspectos técnicos, es todo un arte :D.

Como te veo te trato, el diseño

Y esto que és, colores

Creemos un layout con un concepto de color y diseño

Al crear un sitio tienes que conocer el concepto de diseño web. No literamente o técnicamente como un diseñador gráfico o algo a fín. Sino algo más espacial y usable, un diseño acorde a las necesidades de la empresa que nos contrata, no voy a colocar un diseño super dinámico con brushes e ilustraciones a un sitio que vende farmacéuticos, sería más acorde un diseño con colores consitentes y no contrastantes, fotografías de los productos con su titulo, etc.

Con un buen layout puedes brindarle a tu posible cliente las herramientas que necesita  y la información de una forma amena para la vista y que invita a contrarte. Recuerda pensar como el cliente quiere a tu empresa, y no como empresa que quiere clientes. Recuerda que una imagen hablas más que mil palabras.

¿Qué había aquí?, imágenes rotas

Cuando desarrolles un sitio web, verifica que todos los objetos (imágenes, API’s, videos) funcionen a la perfección y que tus visitantes no lidien con los cuadritos con imágenes que no aparecen, encabezados que faltan y no saben de que trata el contenido, menús hechos con imágenes que no cargaron.

La página no existe, error 404

El típico error que da la cara cuando nosotros no verificamos los links o las secciones que borramos, mucho cuidado con tener este tipo de errores, la mayoría de gente no tiene la paciencia para buscar tu página principal y buscar si por alli tienes el contenido que buscas.

Y como puede que se te vaya alguna vez uno de estos errorsitos, ten una buena página “error 404″ que mostrar, así el usuario no se sentirá como que está fuera del sitio, simplemente está en el lugar equivocado, pero puede regresar a tu sección pricipal para buscar desde allí.

Flash, flash y más flash…

El sitio full-flash

No usar flash para crear sitios con información plana

Esta es una historia conocida por todos, diganme ¿Quién no se ha topado con un sitio totalmente flash? Tu, si tienes pensado un sitio hecho totalmente en flash, por favor, quítate esa idea de la cabeza. A pesar que ya hay métodos para que Google indexe flash, no es la gracia. Sabes que flash está hecho para crear animaciones y aplicaciones interactivas, y he visto muy buenos sitios hechos con flash. Sitios que si han de necesitarlo ya que lo utilizan como debe ser, no solo por los movimientos. Además, gasta muchos recursos si no utilizas el actionscript como medio de desarrollo.

No es en forma de enojarme ;) es simplemente que se pierden muchos clientes potenciales, al hacer esperar para cargar solo texto y una que otra imagen.

La animación de la intro

Las introducciones flash no son buenas :(

Este caso me da mucha gracia :D, me he topado con sitios que colocan el “skip intro” al final de la introducción. A las personas que me han preguntado por que no utilizo introducciones flash les respondo:

• Para mi, es un gasto de recursos. Yo visito un sitio para ver su contenido, no para ver imágenes volando de un lado para otro y un logotipo que da vueltas.
• Es un golpe bajo a la usabilidad y accesibilidad, estamos haciendo que el usuario espere por algo que posiblemente no le interese y otra es que tiene que hacer más clicks para llegar a la información que necesita, y el visitante tiene que encontrar la información que busca en 3 clicks como máximo.

Y donde estoy, cuida la navegación

No recuerdo en donde era, menús

Crear menús cortos y con titulos fáciles de recordar

La mente no guarda más de 8 elementos al mismo tiempo, como pueden leer el tercer artículo de Tannel, agrupen sus secciónes en grupos pequeños. Una detalle muy importante es hacerlo de manera ordenada, hay métodos muy efectivos para poder hacerlo como el de casificación por tarjetas, por puntos, por hits, como ejemplos. También los titulos de los menús hazlos cortos. Lo repito una y otra vez, piensa como tus clientes, usa tu imaginación para desplegarle a tu visitante un menú intuitivo y fácil de utilizar.

¿Flash en menús?

No crear menús flash y utilizar una buena diagramación

No utilices flash para tu navegación es una mala práctica web, de hecho de las más comunes, imagina que tu visitante no tiene flash instalado o tiene un versión obsoleta, no podrá navegar en tu sitio. Los soniditos pueden ser interesantes pero después de eso no les encuentro función; ahora con los efectos visuales (aparte que son mi trauma) puedes crearlos con javascript, hay formas semánticamente correctas, que podrás estilizar a tu manera.

No me preguntes tanto, formularios

Los formularios cortos son mejores, cuidemos los títulos de páginas también

Una parte muy importante de los sitios y deben de tener como requisito, es un formulario de contacto. NO tener secciones de contacto donde solo haya un link mailto:micorreo@miempresa.com, debemos crear formularios de contacto accesibles y sin complicaciones. Entre los puntos que debes de tomar en cuenta están los siguientes:

• pregunta solo lo necesario, los demás datos podrás conocerlos en el proceso
• se claro en los campos que pides
• valida tu formulario con php o javascript, y no utilices pop-ups para los mismos
• no mandes a tus visitantes a otras direcciones que no tienen correlación con la tuya
• No utilices redirects para redireccionar el mensaje de “enviado” y tampoco pop-ups, sabes que la gente los odia

El contenido manda, diagramación

Al mencionar diagramación me refiero a todas esas cosas que se despliengan como contenido: texto, imágenes, video. Debes hacer que tu layout contenga la información que queremos, pero no saturar la vista del usuario con mucho marketing o gifs animados, de hecho eso daña la vista, molesta. Deja suficiente espacio entre parráfos y elementos para que el contenido “respire”. No dejes mucho para que se mire vacio.

También complementa tu información con imágenes o videos, recuerda mucho cuidar los encabezados; los visitantes ojean el contenido en busca de información relevante, por eso también puedes utilizar iconos para resaltar la información y hacerla más llamativa.

Juega con la colocación de los elementos, hazlo de forma que los que tengan más relevancia sean más grandes y entre menor relevancia, menor tamaño. Una buena forma de saber que es lo que más interesa es hacerlo por puntajes, imagina que la página de un producto es de 14 puntos entonces:

• noticias 2 puntos
• artículos relacionados 2 puntos
• descripción y fotografía 7 puntos
• beneficios o valor agregado 3 puntos

Hay varios metodos de diagramación, este es por puntaje

Toma en cuenta en que, el ojo humano se parece mucho a un motor de búsqueda, ambos empiezan a leer de la esquina superior izquierda y terminan en la esquina inferior derecha, de este modo es bueno que coloques tanto los textos de relevancia como las palabras clave en esas partes.

Cuida las faltas de ortografía, revisa tu contenido antes de publicarlo y si tienes alguna, no dudes, corrígela inmediatamente. Una buena redacción y una buena ortografía te dan muchos puntos a favor. Si te pones a pensar, las decisiones de compra se toman en tu sitio web, no más. Por eso, cuida mucho mucho, lee con atención mucho; el contenido, sé breve y consciso.

Da lo que los otros no, el valor agregado

Rompe el paradigma de dar lo que las demás empresas dan. Una característica que busca cualquier cliente potencial en el producto o servicio que necesitan, es ese “plus”, un beneficio; te aseguro que tu lo haces cuando quieres adquirir algo. Entonces, ¿Por qué no ser tú? Brinda ese beneficio que la competencia se resguarda y defiende como que es una política de empresa. No por eso tienes que reestructurar tu negocio, solo se más flexible.

Dar el beneficio no siempre es producto gratis o promociones. Eso es puro marketing, la ventaja de la web es que puedes enganchar a tus clientes con herramientas funcionales; que hagan más clara y accesible la navegación, así ellos encontrarán lo que buscan, rápido.

Dale libertad de escribir, utiliza CMS

Primero defino que es CMS: Es simplemente un sistema manejador de contenidos, y como su nombre lo dice; maneja la información de tu sitio. Hay personas que pueden ir en contra de esto, por que dicen que recarga más el servidor entre otras cosas.

Yo respondo a eso que hay métodos y plugins para poder crear html plano para sean servidas en vez de hacer siempre un request al servidor. Hablando ya propiamente de los CMS puedo citar los principales beneficios:

• Si eres el desarrollador, una de dos: te quitas el peso de encima de estar actualizando contenidos, que a pesar de ser un ingreso económico; no es significativo. Es decir, le das ese valor agregado que hablo a tu cliente. O se te es más fácil actualizar los contenidos, no más el tedioso editor de texto → ftp → corroborar.
• Crear secciones y subsecciones a tu antojo, no teniendo que duplicar el html una y otra vez
• Te puedes concentrar más en un buen desarrollo ya que se manejan temas
• Hay plugins y complementos de todo tipo para que puedas adaptarle a tu sitio

En la web encontrarás muchos tipos de CMS, te voy a citar los principales y porque los utilizo.

• WordPress, inicialmente fue creado como plataforma para blogs, pero ha ido evolucionando al punto que (también para mí) es el CMS default para muchos desarrolladores. WordPress tiene una versatilidad inmesa, además que hay plugins de todo, es muy divertido desarrollar para este CMS ( lo es para mí). WordPress está disponible en Inglés y Español, esta característica es muy importante ya que otros CMS no tienen traducción o es muy mala.
• Drupal, una plataforma muy facil de utilizar tanto para el usuario (administrador) como para el desarrollador. Ya que puedes crear bloques a tu antojo donde puedes ir colocando módulos condicionales dependiendo en que sección del sitio estás, yo lo utilizo con sitios que necesitan de más opciones y el cliente necesitas más libertad para admnistarlo, digamos para el tráfico pesado.
• Joomla!, otro CMS muy poderoso y de los más antiguos. Este CMS se caracteriza ya que tiene una comunidad muy grande brindando soporte, y al igual que WP, tiene plugins casi para todo. El defecto que le miro a este es que es muy difícil administralo (al menos para mi lo fue), ya que maneja una forma que tardarás un poco en familiarizarte. Esto no le quita lo poderoso y lo versátil.
• Edicy♥, caso especial. Como se dice en mi país: “Se salió del canasto”, aparte de ser el CMS más fácil de utilizar que he conocido, es un servicio completo de publicación y creación de sitios web. El servicio tiene consigo hosting y CMS.El CMS posee las características que la demanda necesita: formularios de contacto, blog, galería de imágenes, creación de secciones y subsecciones. La edición de contenido es lo que revoluciona en la web, ya que es a tiempo real, ya no tienes que guardar o previsualizar el contenido. Todo es a tiempo real y drag-n-drop. Por si deseas más información me puedes contactar, brindo soporte en español.

A un click de lo que busco, formulario de búsqueda

Esta es una de las herramientas que más me gusta utilizar :p, y la ironía es que la que menos utilizan los desarrolladores. Los CMS que he mencionado traen un buen motor interno de búsqueda. Imagina que creas un sitio de farmacéuticos, el visitante busca un producto en específico. Tiene que tener un búscador entre tanto producto que ofreces.

Ten en cuenta que, como lo escribí arriba, tienes que tener saber que el usuario va por información, nada más.

Quiero algo fresco, Blog

En estos tiempos hasta el más perdido tiene su blog, una vitácora donde escribes de lo que quieres. Un blog te da muchos puntos a favor, ya que para que un sitio tenga visitas reales, tienes que brindarle información fresca y actualizada. Puedes utilizarlo como medio para dar noticias de lo que está pasando con tu empresa, para publicar promociones o tips de algún tema en específico.

Ahora con los CMS, especiamente WordPress, puedes integrar el sitio y el blog en uno. Un ejemplo muy claro es que estes leyendo este artículo, si no lo hubiera creado, seguro estarías en otro sitio que brinde información parecida :p.

Únete a mi grupo, redes sociales y bookmarks

Una buena y pensada presencia en las redes sociales puede ser muy útil y beneficiosa

En la “web 2.0″, como le llaman a este movimiento (no es ninguna tecnología) o nuevo trend de la web, es muy común ver empresas que tienen presencia en redes sociales como Twitter, Facebook, Digg, entre otras. Que lo que hacen es (en la medida que sepas utilizarlo) incrementar tus visitas con personas que les interesa tu producto, servicio o lo que estés ofreciendo.

Y una vez tengas tu blog :), se tienes un gran responsabilidad de actualizarlo, no tomes la excusa de no tener tiempo, no vas a decirle a tu cliente, mire no tengo tiempo de atender un contenido e informale que es lo que acontece en relación a nuestra empresa. Si no actualizas con buen contenido tu blog es como que si no lo tuvieras, ten mucho en cuenta esto.

Y donde estoy, breadcrumbs

Más que un valor agregado, es un obligación tener breadcrumbs, que son una ayuda que te muestra la ruta que tomaste para llegar a donde estás, es una herramienta muy importante cuando creas sitios muy grandes o con subsecciones. Hay muchas formas de mostrar los breadcrumbs, solo es de usar tu imaginación. Creeme que con esto, aliviaras a tus usuarios de perderse en un punto ciego y de utilizar el botón de anterior.

Entre otras cosas, lo que te digo a tí

Dale al rey lo que es del rey, no te hagas bolas

No encuentro razones por las cuales no puedas brindarle a tu cliente potencial más información de la que tu crees es suficiente, en la mayoría de los casos un título, una descripción y una foto no bastan; piensa como el usuario (sí, lo repito, así te refresco esto), él necesita saber los beneficios, el precio, donde encontrarlo, si hay existencias, que colores hay, etc. Crea las herramientas que satisfagan los deseos de comprar de tus clientes, con esto te aseguras que se queden contigo.

No te vayas con la vieja escuela, que hace que el visitiante se registre con un formulario de contacto enorme donde le pides su nombre, apellidos, teléfono, mail, dirección, estado civil, alergias, número de tarjeta de crédito, cédula, tipo de sangre y un sin fín de cosas solo para poder ver tu producto.

¿Porqué no hacerlo por pasos? Dejas que conozca de una tu producto, mostrandole lo que te he dicho antes, y lo invites de una forma sutil pero atractiva a registrarse para que pueda saber las actualizaciones o nuevos productos por ejemplo. Entonces cuando ya están registrados (no más que nombre, mail, país por ejemplo), le das la opción que compren en tu sitio con un carrito de compras, una vez tiene su carrito elige lo que desea y ¡allí llegas con lo demás! Le pides su tarjeta de crédito, su dirección, y lo que necesites; pero ya tienes enganchado a tu cliente, le brindaste una forma fácil de adquirir tu producto y le “confiaste” tu información, por tanto el te confiará la de él.

La pirateria es mala, sé original

Teniendo una mente tan grande, por qué vas a hacer dos sitios web con un layout muy parecido, o por qué le copias una idea a alguien. Yo visito las galerías de css, porque tomo inspiración y guía de otros sitios web, pero no los copio. Creeme que se mira muy mal, me he topado con un par de casos y me siento tan mal. Por que lo que pienso, es que se te acabó la creatividad para desarrollar una idea fresca.

Consulta sitios que se enfocan en brindar recursos para desarrollo web (muchos pensarán, hey estos links son míos, si los doy me pueden quitar mi trabajo por que ya saben de donde saco todo, y no es así; el conocimiento se comparte):

• Smashing Magazine
• Tuts+ Network
• A list apart
• W3C School
• Ajax Rain

Utilizo más pero con estos creo que son suficientes y tienen lo que necesitan. Los demás son más específicos en cuanto a temas.

Con esto termino mi artículo, espero que sea de su ayuda y si se me olvida algo ¡Díganmelo! Será un gusto poder extender este artículo.

Se viene:

Tutorial → Como crear un layout en photoshop para usar en grid 960

Tutorial → Como crear un buen sitio web, el diseño