Reglas Para una Navegación Web Optima

Debería ya estar claro que en realidad es imposible tener una "perfecta" de navegación, pero podemos tratar! Por supuesto, su navegación puede variar en función de su sitio / tema / diseño, sin embargo, espero que estas reglas te den una buena base para trabajar.


1. Incluye estados activos y pasivos a los botones
Esta es una parte muy importante de la navegación del sitio web, sin embargo, algo ignorado por mucha gente. Hay varias ventajas de la inclusión de un estado activo / pasivo:
-El estado activo le permitirá al usuario conocer al instante en donde se encuentra dentro de su sitio web. En combinación con la ruta de navegación "migas de pan" (cubierto más adelante) esto debería eliminar una gran cantidad de problemas de usabilidad.
-El estado "en suspenso" hace que los usuarios sepan que su menú esta en realidad compuesto por mas enlaces, en lugar de ser texto estático.
-El estado "en suspenso" también le dará a su menú un toque más interactivo, aumentando la participación de los usuarios. Suelen hacer clic en vínculos con el estado " en suspenso" más que en los que no lo tienen, principalmente porque el estado "en suspenso" anima a hacerlo!


2. No incluya demasiados enlaces
Si el usuario es bombardeado con una gran variedad de opciones que simplemente lo confunden, solo logrará que sus enlaces se vuelvan inútiles. Un buen consejo es tratar de mantener los vínculos por debajo de 6-7. Más que esto y podría ser una buena idea introducir un segundo nivel de navegación o desplegable de navegación.No es ninguna pretexto decir que usted tiene un montón de contenido, ya que incluso los sitios más grandes en el mundo pueden llegar a utilizar un menú de navegación mínima.


3. Mantenga su menú prominente y claro
No tiene sentido la integración de estados activos / pasivos y la limitación de su número de enlaces si nadie se está dando cuenta de su menú! Es absolutamente necesario garantizar que el menú es prominente y legible. Esto significa elegir un tipo de fuente / tamaño que sean legibles, y asegurar un contraste adecuado con relación al fondo. También tratar de tener el menú en la parte superior de la página, de preferencia como parte de su cabecera.


4. No se olvide de estos elementos esenciales!
Es importante no olvidarse de sub-navegación y otros métodos de navegación. Asegúrese de incluir lo siguiente en su sitio web:
-La ruta de navegación "migas de pan" - Esto es muy útil para permitir a los usuarios saltar entre diferentes secciones de su sitio web, sabiendo dónde están dentro de la estructura de su sitio. 
-Mapa del sitio de navegación - Esto no es útil solo para los motores de búsqueda, sino también para los usuarios, si estos quieren una visión general de la estructura de tu sitio.
-Opciones de búsqueda - Incluso con la mejor navegación del mundo es útil incluir un formulario de búsqueda. Esta es la diferencia clave entre la búsqueda y navegación, y es probable que los usuarios quieran hacer ambos!

Read More

Los Principios de los Botones de Llamada-A-Acción.

Una llamada-a-acción dentro de un contexto web, se refiere a cualquier parte de una website que incita al usuario a tomar alguna accion.Esto incluye los enlaces de imagen o texto, o de otras características interactivas.Este artículo se centrará exclusivamente en los botones de llamada-a-la acción, sólo en los botones, no líneas regulares. Estos botones son el formato de llamada-a-acción mas conocido y son los mas utilizados en llamadas-de-acción básicas.
Una llamada-a-acción básica es la acción más importante que usted desea que sus clientes hagan. Por lo tanto, un botón de llamada-a-acción básico como "registrarse" debe tener un diseño personalizado, mientras que llamadas-a-acción menos significativas pueden ser enlaces regulares.


En este articulo analizaremos como sacar el máximo provecho a los botones de llamada-a-acción. Lo ideal es utilizar todos los puntos que expodremos a continuación, y esperar el cambio en sus paginas web correspondientes.


1. El Tamaño. 
El tamaño es crucial para un botón de llamada-a-acción. En general mientras mas grande es el botón, mas notable será y usted obtendrá mayor respuesta de parte de sus usuarios. Los botones grandes de llamada-a-acción son una de las características de diseño de la web 2.0, simplemente porque son exitosos. Pero por favor, tampoco queremos botones excesivamente grandes que terminaran distrayendo del resto del contenido al usuario. 


2. Contraste.
El contraste es crucial en un botón de llamada-a-acción. El botón debe destacar con relación al fondo de la pagina web y también con relación al resto de elementos de la pagina web. Con frecuencia se insita a utilizar colores mucho mas brillantes y llamativos que el resto de la pagina web. Naturalmente, este espacio único de color atraerá la atención del usuario al máximo.


3. Posicionamiento y relleno.
Los botones de llamada-a-acción tienen muchísimo menos impacto si se manejan alrededor del contenido. Con el fin de destacarse realmente ellos deben estar rodeados de un montón de espacio en blanco, y dispuestos en una posición donde sean vistos definitivamente por el usuario. Convenciones tradicionales de lectura sostienen que la vista del usuario tiende a bajar en la pagina web, e ir de izquierda a derecha. Esto se debería tomar en cuanta al posicionar los botones de llamada-a-acción. Un botón en la parte superior de una pagina web tendrá menor respuesta que uno que esta colocado en el medio o en la parte inferior del texto de bienvenida sobre la izquierda. 


4. No tenga demasiados.
 Como regla debería de mantener como máximo una cantidad de dos. Mientras mas botones tenga, menor será su impacto individual.


5. Incluye sutiles toques de diseño.
Incluso si usted utiliza todos los puntos anteriores, el botón puede tener un impacto y atraer mucha atención, pero aún necesita estar bien diseñado! Un botón bien diseñado siempre obtendrá más conversiones que uno mal diseñado, ya que asocia un nivel de profesionalismo con el servicio o producto que se ofrece.

Read More

La Navegación Por Pestañas: Básicos.

Navegación por pestañas es una de las técnicas más duraderas utilizadas en diseño de sitios web, y por buenas razones! Menús con pestañas son más claros y más útiles que otros y se han vuelto tan convencionales como para ser entendidos por casi todos los usuarios.


Es muy importante contar con un estado "activo" en la navegación de los sitios web, de modo que los visitantes sepan exactamente dónde están en el sitio en todo momento. Menús con pestañas, es uno de los muchos métodos que hacen uso de este estado activo, y son sin duda uno de los métodos más eficaces.


Aquí por lo general se enlazan las pestañas a otra parte del diseño (por ejemplo: derivados de una zona de gran contenido, o la parte superior de la página web). Esto ayuda a dar unidad de diseño en general, y enlaza la navegación al contenido visualmente. 
El resultado es que el usuario reconocerá inmediatamente que mediante el uso de la navegación ellos estarán efectuando el contenido mostrado. Esto puede sonar como una premisa muy simple, pero créanme - He visto algunos menús de navegación horribles en mi vida que son simplemente inservibles. 


Cómo obtener el máximo beneficio de su navegación por pestañas?


No es bueno simplemente colocar una pestaña antiguo en su menú y esperar lo mejor. Usted puede seguir las siguientes pautas en la construcción de la navegación con pestañas:


-En general, una pestaña debe contrastar el fondo circundante, ayudando a hacerlo claro y evidente
-La pestaña debe ser razonablemente grande con el fin de destacar, pero no totalmente saturar a los otros elementos del menú por completo (después de todo, desea que los usuarios hagan clic en ellos también).
-Asegúrese de que el texto de la pestaña resalta! He visto un montón de pestañas donde el texto del menú es del mismo color, por lo que acaban obteniendo un texto oscuro sobre una la pestaña oscura. Si la pestaña contrasta con el resto de los fondos, el texto de esta pestaña debe contrastar con el fondo de la pestaña!
-No se te olvide los "hover-over"! El hecho de tener un estado activo del menú, no significa que no pueda tener efectos de "hover-over" para el resto de su navegación. De hecho, personalmente me gusta darle a mi pestaña activa un estado estacionario activo, de modo que los usuarios pueden interactuar con mi menú completo.
-Piense en donde la navegación con pestañas está dirigiendo los ojos del usuario. ¿Quieres que miren hacia abajo de tu contenido, hacia el lado de su cabecera? A menudo, los elementos sutiles de diseño, como las flechas y los gradientes pueden ayudarlo a conducir a sus visitantes en la dirección correcta. 

Read More

Estás Fallando como Diseñador Web y Aquí Está el Porque.

Hay infinidad de contenido en los blogs de diseño web diciéndonos como tener éxito y hacer las cosas bien en nuestra profesión. Esto es obviamente algo bueno, ya que cada cierto tiempo necesitamos recordatorios que nos mantengan lejos de hacer las cosas como no queremos hacerlas. Cosas que pueden tener un impacto negativo en nuestro progreso como diseñadores y desarrolladores. A pesar de que a veces estas cosas pueden ser útiles temporalmente para pagar cuentas y obtener ingresos, debemos analizar nuestra situación y determinar si es que estamos produciendo diseños y hábitos de codificación saludables, y si estos están brindándonos ganancias a corto plazo que no significan necesariamente éxito a largo plazo. 

Puede ser que alguna de estas actitudes no te este jugando limpio:

1. No tienes intención alguna de rechazar jamás a algún cliente.

Este síntoma no todos lo entienden al principio. Algunos incluso lo ven como algo bueno. Después de todo, cada cliente para el que trabajes trae dinero a tus bolsillos, te brinda mayor experiencia, y aumenta tu portafolio. Pero no todos los proyectos terminan de esa forma. Muchas veces se trabaja para clientes que hacen con el diseño lo que ellos desean e ignoran los consejos sobre cómo mejorar el desarrollo o usabilidad. La mayoría de diseñadores ni siquiera coloca estos proyectos en sus portafolios.

Por supuesto que no todos tenemos el lujo para escoger a nuestros clientes como algunas agencias grandes lo hacen, pero debemos comprender al menos con qué tipo de clientes debemos ser reacios a trabajar. Puede haber circunstancias en donde simplemente no podemos permitirnos rechazar a un cliente, y eso es comprensible. Es por eso que subrayamos la palabra intención en el subtítulo.

Si somos capaces de encontrar características comunes en clientes o proyectos con los cuales no queremos trabajar porque sabemos cómo se desenvolverán los mismos, es entonces muy probable que estemos progresando como desarrolladores, y que nuestra preocupación por hacer de la web un mejor lugar y no vendernos, nos vaya a traer beneficios a largo plazo.

2. Quieres saberlo todo y hacerlo todo.

Este punto es bastante debatible, pero veamos, eres un desarrollador web que puede crear un logo en Ilustrator, desarrollar un boceto web en Photoshop, puedes trabajar con una serie de marcos back-end, puedes programar back-end en varios idiomas, puedes codificar HTML y CSS válidamente, puedes crear JavaScript desde cero, has aprendido a jugar con unas 3 o 4 bibliotecas de JQuery, puedes hacer Copywriting, estrategia de contenido, e incluso SEO y SEM.

No es nada realista pensar que serás capaz de mantenerte al día y estar a la vanguardia de las diferentes tecnologías que acabamos de mencionar, sus conceptos y lenguajes. Es mejor especializarse en unas pocas áreas. 

3.  No creas redes!

Una gran forma de mantenerse al día con los últimos estándares de tecnología es al construir redes tanto en línea como en persona. Crear redes en persona puede resultar limitado, pero si que se puede construir muy buenas relaciones con muy buenos desarrolladores online tan solo siguiendo los blogs de los mejores desarrolladores e intervenir en discusiones constructivas, puede ayudar.
Otra manera es participando de conferencias o eventos que se den en la ciudad donde vives, y estos son generalmente anunciados en blogs de colegas de la zona.
Colaborando con la comunidad de manera gratuita y ayudándola a surgir con alguna aplicación, blog o página web, también es una buena manera de hacerte notar en tu comunidad.
Lo único que si se debe tener en mente es que se debe estar preparado a dar de sí mismo y no solo esperar beneficiarse de otros. La única manera de recibir ayuda de otros es si se deja de lado la envidia y el egoísmo de lado y se está dispuesto a ayudar a otros. 

4. No puedes justificar tus decisiones de diseño.

Todo el mundo quiere crear páginas web que dejen una impresión mientras sirvan para un propósito y proporcionen una experiencia de usuario intuitiva y usable. Sin embargo, como diseñadores a veces nos esforzamos demasiado.

Podemos caer en la imitación. Tampoco debemos ser capaces de explicar cada pixel de un diseño, pero los componentes más importantes, si deben tener una explicación.

Es interesante cando se ve en un portafolio similitudes entre proyectos. A menos que los proyectos sean de una misma rama de la industria, los mismos patrones de diseño y elementos no deben repetirse entre proyectos. Si esto es así, es un símbolo de pereza y falta de interés en el diseño.

5. Eres un ninja del JQuery pero no sabes codificar JavaScript

Entonces solo piensas que eres un ninja en JQuery. Puedes lograr cosas increíbles con JQuery sin saber JavaScript pero saber codificarlo te permitiría lograr cosas aún más impresionantes. 

6. Usted nunca piensa en la mejora progresiva.

Si cae un árbol en el bosque, realmente hizo ruido? Nadie estaba ahí para escucharlo. Incluso si lo hizo, este fue irrelevante ya que no tuvo un propósito. Esto puede suceder con una página web que no es actualizada y que carece de accesibilidad. Aquí entra la mejora progresiva, y esta debe tenerse en cuenta en las etapas de planificación ya que aplicarlas a mitad del proyecto es aún más difícil.

7. No le interesa el progreso de los estándares web.

Debe mantenerse informado de actualizaciones de temas como HTML o CSS, por lo menos como para ser capaz de mantener una conversación de este tipo de temas en alguna entrevista de trabajo o con algún cliente potencial.

Read More

El Boceto, Básicos.

El boceto es una composición gráfica que ha usado el wireframe como base o plantilla, y la ha embellecido.
Es un modelo a escala de un producto usado para demostrar o probar un diseño. Para el diseño interactivo, los objetivos son los mismos, pero los bocetos no son a escala, ya que necesitan verse lo más real posible.
Es importante distinguirlos de los prototipos. Un prototipo está diseñado para funcionar, ya sea parcialmente. Los bocetos, no. Se componen de dibujos, pantallas estáticas que solo parecen la verdadera UI (interface de usuario).
Primero debemos definir los wireframes.  Un wireframe trata los aspectos funcionales de la UI debe estar trazado en escala de grises y con notas que expliquen la funcionalidad de la interface a diseñar o desarrollar, dejando el resto al diseño.  El diseño siempre debe usar los wireframes como base.  Podría decirse que los wireframes son más el despliegue físico y el boceto es como se va a diseñar. Puede que solo sean 6 rectángulos, pero en wireframe, esos 6 rectángulos quieren decir que el formulario de suscripción va sobre la esquina derecha, el encabezado sobre la izquierda y la foto del artículo a la derecha.
Porque son importantes los bocetos? Estos sirven para mostrarle a un posible cliente el aspecto general de su futura página web. Proporcionar un boceto de un posible proyecto para una página web es una muy buena forma de presentar un diseño y obtener su aprobación por parte del cliente. Adobe Photoshop es una muy buena herramienta para crear el diseño y hacer cambios de forma rápida y con poco esfuerzo.
Importancia:
-    Un boceto te deja saber dónde va qué información
-    Puede utilizarse para implementar el diseño antes de escribirlo en código.
-    Se puede poner mayor atención a los detalles.
-    Mayor flexibilidad en relación a cambios de ideas y conceptos.
-    Aumenta el valor del servicio que brindas, ya que tal vez tu competidor directo no brinda este servicio y puedes ofrecerlo como un servicio gratuito, siempre y cuando te asegures legalmente de que el cliente no lo utilizara sin tu autorización. 
Errores más comunes:
-    El cliente no entiende el concepto en pocos segundos.
-    Es difícil de leer, siempre es bueno utilizar un color de fuente oscuro sobre un fondo claro, y también utilizar fuentes que no sean difíciles de leer.
-    Demasiados efectos y detalles, que no añadirán valor al documento pero lo harán más denso.
-    No utilizar un esquema de colores.
-    No utilizar cuadriculas.
Procesos más efectivos en la creación de Bocetos:
Mientras más simple, mejor!
-    Discutir y explorar las necesidades del cliente. Si el cliente no puede ofrecerle información que le sirve porque no sabe cómo transmitir lo que quiere, entonces debe tener preparadas preguntas que le den la información que requiere para poder investigar qué es exactamente lo que el cliente necesita.
-    Hacer Wireframes! Mostrarle al cliente sin distracciones de colores o diseños de qué forma se dispondrá el espacio en la web.
-    Claridad y enfoque en conceptos de diseño e ideas. Hay que guiar y enfocar lo que el cliente desea hacia lo que más le conviene, no darle tantas opciones diferentes, mantener una línea.
-    Observar los diseños de las competencias directas del cliente para así obtener ideas, no copiar.
Una vez que se le han presentado varios bocetos al cliente y se ha llegado al final, se le presenta un boceto pulido, presentado con notas que explican por qué el equipo de diseño piensa que este diseño funciona, porque es fuerte, porque lo representa, y demás. Al cliente le gustara escuchar esto.

Read More

Formas de Hacer tu Trabajo más Original

Originalidad es algo que debe valorarse mucho cuando hablamos de diseño gráfico y el trabajo verdaderamente original debe resaltar en la industria. Hay muchísimos diseñadores siguiendo tendencias en lugar de establecerlas. De qué formas podemos hacer nuestro trabajo más original?

1.        Tome sus propias fotografías.

No hay nada más desagradable que encontrarse con fotos repetidas o que dan un sentimiento de que ya las has visto en alguna otra web. Si realmente quieres separarte del resto y marcar la diferencia, usar fotografías que no sean de stock puede ser una muy buena idea. El problema es que no siempre es fácil encontrar el sujeto, la situación o el clima que necesitas. En todo caso, es mejor utilizar un proveedor de fotos de stock Premium.

2.       Crea tus propias texturas.

Las texturas son una gran e importante parte del diseño gráfico, y son claramente muy útiles. Sin embargo, se pueden ver las mismas texturas usadas una y otra vez. Crear tus propias texturas también le da un toque personal y único a tus trabajos, y hay varios tutoriales que te enseñan a hacerlas, desde grass, piedra, madera,… de todo!

3.       Dibuja tu inspiración de experiencias personales.

Tus experiencias personales son, de hecho, personales y esto las hace frecuentemente únicas y específicas para ti. Experiencias personales han inspirado cientos de canciones de rock por años, así que porque no dejarlas inspirar tu siguiente gráfico? Intenta transmitir tus cambios de humor, experiencias vividas, a un medio visual y la conexión puede inyectar mayor pasión y personalidad a tus composiciones. Las memorias, recuerdos y nostalgia también sirven de inspiración.

4.       Perfecciona tu propio estilo.

Mientras avanzas por tu camino como diseñador podrás notar que vas desarrollando tu propio estilo. Es importante que lo aceptes, y que intentes crear una cohesión a lo largo de todas tus obras.

5.       Piensa fuera de la caja.

Tu trabajo jamás debe ser predecible ni aburrido. Empuja tus limites! A mendo podrás llegar a trabajar de una manera mucho más original y perspicaz en términos de composición, materia y mensaje.

Read More