martes, 10 de mayo de 2011
Insertar juegos gratis en tu sitio web
jueves, 4 de marzo de 2010
¿Cómo encuentro la combinación adecuada de colores para mi Web?

Hoy Hablaremos de uno de los grandes problemas que tenemos los programadores, que aunque sabemos de diseño no somos diseñadores gráficos de carrera, ¿Cómo encuentro la combinación adecuada de colores para mi Web? Pues ahora tenemos la respuesta; Adobe no nos lo pudo poner mas sencillo con Adobe® Kuler™ para comenzar a utilizarlo deberas entrar en http://kuler.adobe.com/
Es una aplicación web sencilla donde podremos:
Explorar distintos temas de colores
Explora miles de colores creados por la comunidad Kuler, buscando por palabras claves, tetulos, creadores o por coloresCrear nuevos temas a partir de un color
Crea nuevos temas con las fáciles herramientas que te ofrece KulerCrea Nuevas combinaciones a partir de una imagen
Solo tendrás que subir una imagen y el sistema registra la combinación de colores de la imagen y te ofrece distintas posibilidades de trabajar con estos coloresKuler es compatible con tu Sofware favorito de de Creative Suite 4
Adobe Illustrator® CS4, Photoshop® CS4, InDesign® CS4, Fireworks® CS4, and Flash® CS4
miércoles, 24 de febrero de 2010
ColoRotate, creador de paletas de colores en 3D.
En otras ocaciones hemos hablado de herramientas para crear paletas de colores, recuerdese Colors Palette Generator, Color Scheme Designer y Generador de Paletas de Color online. El problema es que cada vez que sacan una nueva herramienta de este tipo la hacen más atractiva como en el caso de ColoRotate, una herramienta online basada en Flash con la que podemos crear paletas de colores usando una interfaz muy agradable en 3D mostrada mediante un cono de colores o mediante una vista con controles de deslizamiento.
Por lo que he probado les puedo decir que es una herramienta sencilla, intuitiva, rápida y eficiente. El registro se puede hacer utilizando una cuenta de Google, los usuarios que usan Photoshop tienen disponible de un plug-in por $34 dolares.
La herramienta está en inglés, pero como les decía antes es bastante intuitiva, podremos aprender incluso acerca de la teoria de los colores, hecha con todo propósito para diseñadores tanto profesionales como principiantes, las paletas de colores creadas tambien pueden ser compartidas.
Fuente: Downloadsquad
http://www.bitacoradewebmaster.com/2009/05/16/colorotate-creador-de-paletas-de-colores-en-3d/
martes, 19 de enero de 2010
Top Ten de errores en sitios web
Los sitios webs suelen cometer errores imperdonables a la hora de llevar su contenido al publico. Repasemos cuales son los errores más frecuentes de los Diseñadores Web a la hora de mostrar un sitio.
1. Uso de flash excesivo
Con la salida
de Macromedia al mercado, muchos Diseñadores Gráficos se movieron a la Web creando
sitios impactantes en Flash. Lamentablemente esto se convirtió en un hábito
para muchas empresas que dejaron que sus portales y sitios B2C se convirtieran
en una "obra de arte" de el Diseñador de turno. Estudios recientes demuestran
que en el 99% de los casos un sitio flash para una empresa o comunidad, está siendo mal empleado. Las razones? muchas:
>Carecen de boton back en el explorador, ya que es un solo archivo y por lo cual,
el navegante tiene o que volver al principio y empezar de nuevo su recorrido,
o descubrir que el Diseñador no tuvo en cuenta ese detalle, por lo que generalmente
se retira del sitio.El archivo flash mal utilizado suele ser pesado y consumidor de recursos. Los
archivos Flash en la Mac o PC del Diseñador pueden llegar a correr y cargar
tan fluidamente que aveces asombra, pero resulta que el 90% del resto del
planeta no tiene una PC o Mac equipada para soportar miles de vectores y
videos en movimiento, más el agregado de la música que suena entrecortadamente
haciendo que la sola acción de cerrar el Navegador para huir del sitio se
convierta en una mala palabra.Impedimento de copiar texto informativo y pegarlo en otro lugar de la PC. Al ser un
sitio web Flash, es imposible copiar cualquier texto informativo dentro
del mismo, ya que aunque existe la opción en el programa de habilitar esta
particularidad, muchos Diseñadores nunca la utilizan.
Estos son solamente algunos ejemplos de cómo los Diseñadores hacen
mal uso de la tecnología flash. Es más que obvio que la tecnología flash bien
utilizada puede ser una de las más finas maneras de comunicar.
2. Fuentes ilegibles
Los Diseñadores
generalmente no se fijan en este punto, pero es sumamente escencial dejarle
a los navegantes elegir el tamaño de la tipografía en el WebSite. Con la tecnología
Flash esto quedo en el pasado y por lo tanto se deja fuera del alcance a una
buena porcion de navegantes maduros (+40 años) que son potenciales clientes
o lectores.
No solo la tecnología Flash ha provocado estos errores, también el uso excesivo
de programas que crean stylesheets (hojas de estilo) y en el mayor de los casos
no tienen contemplada la posibilidad de darle a elegir al navegante como quiere
leer su texto.
3. Pantalla completa
Muchos de los
WebSites que utilizan esta propiedad no son bien visto por los navegantes. Según
encuestas, es más probable que un navegante cierre un WebSite que no le permite
la opción de utilizar el resto de su pantalla que el visitante cierre un Banner
Pop-up.
Hoy en día la gran mayoría (por no decir la totalidad) de navegantes utilizan
sistemas de mensajería instántanea, y al utilizar una propiedad de pantalla
completa se obliga a los navegantes a elegir, entre una lista de colegas/amigos/profesionales
que pueden o están enviando mensajes constantemente en línea, y un WebSite.
No vale la pena sacrificar una visita y una posible compra/relación, por el
solo hecho de acaparar la atención total del navegante, ya que provoca el efecto
contrario y hasta puede llegar a parecer violento.
4. links del tipo Mailto en lugares inesperados
Este es un
error común de novato cometido inexplicablemente por muchos Diseñadores. Parece
raro que se haya olvidado que la arquitectura y usabilidad es tan importante
como el aspecto gráfico de un WebSite. En los tiempos que corren todo pasa por
lograr impactar gráficamente al usuario y se han cometido errores básicos tal
vez imperdonable para profesionales y colegas con años de experiencia en la
materia.
El navegante en la mayoría de los casos odia que un WebSite le haga hacer una acción
que no era la que esperaba. Si en un link se lee la leyenda "click aquí para
enviar un email" el navegante sabe que si hace un click ahí, o lo llevará a
una página con un formulario de envío o le abrirá un nuevo mensaje de su correo
electrónico predeterminado. Pero si un mailto está completamente
disfrazado en un link con la leyenda "averigue más sobre este producto!/servicio!"
el navegante espera que lo lleve a un texto o a otro lugar donde puede averiguar
y obtener más información y no que le abra un nuevo mensaje de su cliente de
correo.
Esta error ha costado muchos menos visitantes, ya que el navegante se siente engañadoy lo peor de todo, que lo tomaron por idiota con éxito.
5. Recolectar emails ilegalmente
O legalmente,
como lo hacen muchos WebSites e ISP (Internet Service Provider). El spam es
un problema que nos involucra a todos y cada uno de los profesionales que realizamos
contenidos Web, y lamentablemente muchos de los WebSites de ISPs y empresas
proveedoras de casillas de correo gratuita que fueron apareciendo en estos últimos
meses han tomado por idiota al navegante.
El
navegante al ver que un sitio tiene una política de privacidad, está confiado
de que su información será salvaguardada como se merece, pero muchos WebSites
hacen totalmente lo contrario, en su política de privacidad explican al usuario
que pueden vender su información al mejor postor, pero obviamente escrito entre
1.190 lineas de texto que solamente un Abogado se atreveria a leer y no un navegante
promedio. Esta falta de consideración se está haciendo cada vez más presente
en Internet y la única manera de controlarlo es crear políticas de privacidad
cortas, al grano y entendibles por cualquier usuario.
6. Páginas pesadas
Hace un par de años en america
latina se tenía muy en cuenta como en el resto del mundo que no todos los navegantes
tienen una conexión por cable o ADSL para poder bajar los WebSites en 2 segundos
y medio, por lo que se diseñaban WebSites que fueran atractivos para los que
poseían conexiones de alta velocidad y los que no.
Hoy en día los responsables de WebSites han olvidado que existen cada vez más
personas que utilizan dial-up gratis en los que la velocidad no es el punto
fuerte del servicio, si no el no pagar un abono mensual fijo por el servicio
de conexión. Esto es un error gravísimo y fatal para las empresas de Internet
que han sacrificado accesibilidad por interactividad.
7. Contenidos extensos
Por
el afán de ofrecer cada vez más, muchos WebSites han cometido el error de ofrecer
demasiado contenido a sus navegantes perdiendo así la línea de lo que en verdad
quieren ofrecer o dar a conocer. Estudios demuestran que un navegante se pierde
muy rápido en un WebSite extenso que en uno con su información concentrada y
enfocada.
8. Poca información del navegante
Hace unos años los WebSites requerian que el navegante en cuestión
para hacer uso de un servicio o ingresar a una comunidad de navegantes se registrara
mediante un formulario que recababa datos sobre la persona en cuestión. Mediante
estos datos surgían unas estadísticas que le indicaban al personal que mantenía
este WebSite que rumbo tomar en base a las preferencias, nivel social, pasatiempos
y demás información incluso geográfica de los navegantes.
Hoy en día estos formularios fueron disminuidos tal vez demasiado por las continuas
quejas de los navegantes que no deseaban pasar 15 minutos llenando un formulario
de 3 páginas. La queja estaba bien dirigida, pero la acción que tomaron muchos
WebSites fué extrema. El reducir en un 89% la información de sus navegantes
indica el no saber que dirección tomar. La solución hubiese estado en recabar
información vital para la empresa y no información para ser vendida a agentes
externos.
9. Banners Flash
Nuevamente
con el flash, los Diseñadores Web comenten el error de aceptar publicidad en
este formato, que lo unico que logra es alterar al navegante. Nada puede ser
más odioso que una publicidad que tiene música, se mueve al margen de lo que
uno está leyendo y distrae la atención. Ni los clasicos gifs animados de 2 frames
lograron tal efecto en los navgantes. Aunque existen publicidades en formato
Flash que están excelentemente realizadas y orientadas al lugar donde serán
mostradas, en la mayoría de los casos esto no es así.
10. Contáctenos…o no?
La
finalidad de una sección de contáctenos en un WebSite es simplemente
eso, un lugar donde se muestra al navegante toda la información necesaria para
ponerse en contacto con la empresa.
Naturalmente aquí se tendrían que colocar todos los datos de la empresa, como
dirección postal, ubicación en la ciudad, teléfonos, emails, etc. Pero desgraciadamente
esto no se lleva a cabo y solamente ponen a disposición del navegante una dirección
email, olvidando que no solamente los "buscadores de ocio" navegan la Internet,
si no también, empresarios, accionistas, socios y clientes en potencia visitan
Internet día a día.
Un punto a reconsiderar.
jueves, 21 de mayo de 2009
Conozca los ocho trucos para vender en Internet
Diseñar para vender . 8 trucos para aumentar las ventas en tus webs
Posted on 06. May, 2009 by Karto in Archivos
Son cada vez más los negocios que trasladan su movimiento a la Web, y muchos más aún los que se inician directamente online, de lo cual surge la necesidad de websites diseñados y construidos para vender. Una página web bien presentada logra el propósito de formar y distribuir una marca fuerte, pero el buen aspecto solo no basta para vender los productos o servicios en oferta. Por eso, se necesita introducir los elementos del marketing.
1. Sugestión subliminal
Las investigaciones muestran que los objetos e imágenes que ves a tu alrededor pueden predisponerte a ciertas conductas. Por ejemplo, un estudio sobre niños mostró que después de haberles sido exhibido un gorro de Santa Claus se hallaban mejor dispuestos a compartir sus golosinas con los demás. El gorro llevaba implícito en sus mentes el concepto de compartir y dar, y la exposición a él los preparaba interiormente para mirar de modo más positivo el acto de compartir. En el mismo estudio se expuso a los chicos a un logo “Toys ‘R’ Us” que tuvo el efecto opuesto al del gorro de Santa Claus, haciéndolos menos dispuestos a compartir sus golosinas.

LegacyLocker pone en su página de inicio la foto de una familia feliz, presumiblemente para evocar en los visitantes un sentimiento cálido hacia los productos de la compañía, y un deseo de cuidar de sus seres queridos.
Cuando elijas imágenes para tu website, piensa cuidadosamente en el mensaje que tratas de transmitir. Elige imágenes que sean significativas y que lleven implícito ese mensaje o sentimiento. No pongas gráficos por lo que valen en sí mismos; si no cumplen una función, no tienen por qué estar ahí. Los clichés, las imágenes demasiado vistas y las fotos de stock también son peligrosas porque no pueden transmitir el mensaje correcto en el contexto dado, más bien selecciona imágenes que den el efecto que buscas obtener.
2. Evitar la parálisis de la elección
Existe un fenómeno conocido en marketing como “parálisis de la elección”. Esto se produce cuando se le ofrecen al usuario demasiadas opciones. Elegir es agradable, pero cuando presentas a tus clientes demasiadas opciones, pueden sentirse confundidos y no saber para dónde tirar. Nadie desea el arrepentimiento del comprador (cuando una persona elige un artículo y más tarde decide que no le conviene), por eso muchas personas dedican más tiempo del que debieran al proceso de selección: se paralizan.
De hecho, según Barry Schwartz, cuando los clientes tienen demasiadas opciones a considerar, terminan por eludir la adquisición de un servicio o específico o una tarea en general (Paradoja de la elección), y esto es precisamente lo que los diseñadores necesitamos tener bien en cuenta en nuestros diseños.
La lista de precios de Highrise muestra un conjunto de planes de pagos mensuales. El más popular resalta visualmente para ayudarte a hacer tu elección.
Para remediar la parálisis de elección hazle más fácil a la gente hallar el producto o servicio que le conviene. Diles cuáles son las bondades de cada opción, y luego sugiere la que ellos deberían elegir. Puedes utilizar recursos visuales para destacar el producto más popular e inclinar hacia él a potenciales compradores. Si el producto no les conviene, elegirán otro, pero si están confundidos, una elección “por defecto” ayuda a evitar la parálisis.
3. Mostrar el producto
Cuando tú visitas una tienda real, digamos de comestibles, puedes mirar, examinar y a veces hasta probar los productos en venta. Tomas tu decisión de compra en base de la información que allí has recogido. ¿Están los tomates bien maduros? ¿Son esas frutillas bastante rojas? ¿Qué tal el aspecto y el aroma de ese pan recién horneado?
Cuando vendes servicios o aplicaciones online, deberías hacer exactamente lo mismo: mostrar el producto. Es sorprendente cuántos sitios web que venden software no muestran realmente capturas de pantalla de sus aplicaciones. Es cierto, son mercancías intangibles, mercaderías digitales que no puedes tocar ni oler, pero sí son mercaderías que puedes ver.

Dashboard pone grandes capturas de pantalla de sus aplicaciones en la página inicial
La gente juzga los productos basándose en su aspecto. ¿Por qué?.Porque la apariencia es un indicador, correcto o erróneo, de la usabilidad de un producto. Esto se conoce como el efecto estética-usabilidad.
Xtorrent, un cliente de OS X, tiene una imagen de pantalla del producto justo al comienzo de su minimalista página inicial.
Si la persona ve una interface complicada o confusa o, en ciertos casos, sólo una interface poco atractiva, tiende a suponer que no es muy usable o que es difícil de aprender. En cambio, si la persona ve una interface atractiva y de aspecto sencillo, comienza a imaginar lo bien que funciona y querrá probarla. Haz que la gente se imagine usando tu software, y estarás más cerca de cerrar la venta.
4. Deja que la gente lo pruebe
Una vez que comienzas a usar un producto, te involucras con él. Una vez que comienzas a meter datos en él, empiezas a hacerlo propio. Cada segundo que un usuario dedica a probar un programa es un segundo de su tiempo invertido en aprender y usar tu producto.
Después, cuando se le pregunte al usuario si comprará o se suscribirá al producto o servicio, es más probable que diga “sí” porque ya está involucrado y ha invertido tiempo en él. Naturalmente, si el producto es malo, luego la gente lo rechazará, pero entonces tu prioridad sería en realidad mejorar el producto hasta que alcance un nivel satisfactorio.
MailChimp, un servicio de marketing por email, te permite comenzar a usar el servicio de manera gratuita con tus primeros 100 suscriptores.
En años recientes hemos visto aparecer el negocio tipo “freemium” (palabra formada por free –libre– y premium –primera línea–). Es un servicio que permite al cliente usar una porción de él libre de cargo, pero requiere una compra para usar todas sus características. Ello da a la persona una muestra del producto total pero no lo limita a un período de prueba. Esto le permite usar el producto libre de cargo sin compromiso monetario y luego ir actualizándolo si le agrada.
Es un buen modelo para muchos negocios online de Software-como-servicio, porque una vez que la gente comienza a usar tu producto, queda enganchada con él. Comienza a confiar en él, y cuando uno confía en el producto para hacer negocios o manejar su vida, lo más probable es que luego necesite las características premium del producto completo, y estará contento de incorporarlas porque ya conoce bien tu servicio.
Las historias son muy importantes para la venta porque hacen que los potenciales clientes se imaginen cómo será usar tu producto. Dejar que la gente realmente lo pruebe sin cargo va aun más allá. No tienen que imaginar porque pueden empezar a usarlo directamente y sin costo. Permitir a la gente probar tu producto, ya sea mediante un demo, un período de prueba o un modelo freemium, es una manera excelente de ganar clientes. Ahora bien, este no es realmente un elemento de “diseño” pero es importante mencionarlo aquí por su potencial para dirigir conversiones.
5. AIDA
AIDA es una conocida estrategia de ventas, y significa: Atención, Interés, Deseo y Acción. Es relativamente simple y describe la secuencia de hechos que debes tener en cuenta para lograr una venta. Así, ante todo, debes captar la atención de tu potencial comprador. Una vez que la tienes, debes ganar su interés explicándole cómo tu producto o servicio pueden ayudarle.
Luego, una vez que él ya está interesado, debes generarle el deseo de tu producto.Por ejemplo, una historia acerca de cómo este producto le ha servido a alguien parecido a tu visitante puede ayudarle a imaginar lo que este producto puede hacer por él, y especialmente qué beneficios le traería. Sin duda, la parte beneficio es clave aquí, porque beneficios, no características, venden productos.
Finalmente, necesitas hacer que la gente actúe. Esto significa comprar el producto o suscribirse al servicio. Si la persona desea tu producto, no tiene más que apretar un botón para solicitarlo. Si está interesado pero no todavía no está seguro, hay algunos métodos que puedes usar para motivarlos aun más; por ejemplo, crear una sensación de urgencia con una oferta de tiempo limitado o limitación de cantidades disponibles.
Yokaboo presenta gráficas grandes que atrapan el ojo. Es probable que leas primero la breve descripción a la izquierda. Luego, las inscripciones en la camiseta ayudan a inspirar confianza. Finalmente presenta un llamado a la acción a la derecha.
Ahora bien, la estrategia AIDA se aplica más a la copia –el verdadero texto de marketing en la página web– que al diseño, de modo que lo que necesitamos hacer en lo referente al diseño es reforzar esa copia, hacer que sobresalga y asegurar que los visitantes la lean. Esto significa asegurar que lo primero que vea el nuevo visitante realmente capte su atención. Luego el correr de la página dirigirá su enfoque a los puntos que logren las otras dos metas: interés y deseo. Por último, al final de este flujo, necesitamos convertir. Entonces, llamemos a la acción: “Pídelo ahora”, “Firma aquí”.
Es importante comprender que el diseño solo no vende: necesitas un texto fuerte en el lugar para hacer la mayor parte del trabajo. El diseño está aquí para reforzar y apoyar el texto, y no al contrario.

Reinvirgorate capta tu atención con tres palabras grandes arriba: “mide, analiza, evoluciona”. Luego te conduce a un trozo de texto más descriptivo abajo y un link de llamado a la accion.
Esto significa que no debes diseñar primero un lindo website y luego llenar el espacio con palabras. En cambio, piensa en el mensaje que deseas transmitir, escribe el texto y luego construye un diseño que entregue eso. Si el camión de reparto se rompe, los paquetes no llegan, pero si antes no hay paquetes, el camión de reparto no tiene nada que hacer.
6. Guiar la atención
Para beneficiarte de algo como el AIDA, tienes que conducir a tu visitante a través de tus contenidos. Para ello puedes alinear los items de una manera fluida, y utilizar imágenes que guíen sus ojos. Por ejemplo, si quieres poner el foco de la atención en un punto determinado, utiliza una gran flecha.Nuestros ojos notarán la flecha y naturalmente mirarán en la dirección a que ella apunta.
Business Catalyst utiliza la figura de una flecha para conducir la mirada del visitante hacia el botón “Mirar el video”.

El contenido del sitio Silverback fluye de arriba abajo hacia el botón de descarga. Además, la flecha en ese botón apunta hacia el link de compra.
Estructura tus contenidos de manera que fluyan hacia algo. Tener un manojo de descripciones dispersas puede confundir y hacer que tus visitantes se pierdan, a menos, claro está, que todos los puntos terminen en llamados a la acción. Si quieres asegurarte de que tus visitantes no se perderán nada, ordena todo en una estructura lineal de manera que el usuario la pueda recorrer. Asegúrate determinarla con un último llamado a la acción: firmar o descargar un link.
7. Ofrecer siempre la acción siguiente
Siempre hay que estar cerrando. Si tienes que diseñar un sitio web para vender algo, ya sea una aplicación de software o un servicio de Internet, siempre tienes que pensar en cómo cerrar el negocio en cada página. Esto no quierre decir llenar todas las páginas con grandes botones “Compra ahora”; significa que cuando el cliente esté listo para comprar, no tenga que andar buscando el link de check-out.

Observa cómo después de cada uno de los tres trozos de texto en el sitio Skype hay un llamado a la acción, ya sea un “Averigua más” o un link de compra.
Siempre tiene que haber links para la acción siguiente a fin de mantener corriente el flujo y asegurarte de no perder la atención de los potenciales compradores. Los links para la acción siguiente pueden remitir al visitante a una página con más información acerca del producto o a la página donde realmente puede hacer la compra o firmar. Esos links podrían decir algo así como: “¿Listo para hacer el pedido? Haz click aquí”, “Más información” o “Comprar ahora”.
No termines la página con una vía muerta: sugiere siempre a tus visitantes adónde deberían ir después.
8. La regla de Gutenberg
El diagrama de Gutenberg (o regla de Gutenberg) es un concepto que describe algo llamado lagravedad de la lectura. Este fenómeno consiste en un hábito de lectura que se da en el mundo occidental: de izquierda a derecha y de arriba hacia abajo. El diagrama de Gutenberg divide la página en cuatro cuadrantes: “Área óptica primaria” en el superior izquierdo, “Sector en barbecho fuerte”, el superior derecho; “Sector en barbecho débil”, el inferior izquierdo, y “Área terminal” el inferior derecho.

El diagrama de Gutenberg
Ello sugiere que la zona inferior izquierda de la página obtendrá la menor atención en el recorrido de nuestra vista a través de la página desde el sector superior izquierdo al inferior derecho, y quenuestra mirada se detendrá en la porción inferior derecha. ¿Cómo podemos utilizar este concepto? Los botones y llamados a la acción podrían ir colocados en el sector inferior derecho en lugar del inferior izquierdo, ya que este es el lugar que probablemente iluminará la mirada del visitante.

Observa cómo GoodBarry ha colocado el botón para firmar la prueba en la parte inferior derecha en esta zona del doblez de la página inicial.
Observa que el diagrama de Gutenberg tiene mejores posibilidades de funcionar en las páginas que tienen una distribución más equilibrada del contenido. Si partes de tu página tienen zonas que se destacan fuertemente mediante alto contraste y tipografía en negrita, entonces esas zonas tendrán más probabilidades de atraer la atención y por ende orientarán la manera en que el usuario recorrerá la página.
Artículos relacionados
Puede ser que quieras echar una mirada a los siguientes artículos relacionados del autor:
- 10 Principles Of Effective Web Design
- 5 More Principles Of Effective Design
- 9 Common Usability Mistakes In Web Design
- 10 Useful Web Application Interface Techniques
Acerca del autor
Dmitry Fadeyev es el fundador del blog Usability Post, donde puedes leer sus pensamientos sobre buen diseño y usabilidad.
