Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

DESCRIPCIÓN GENERAL DEL PROCESO DE DISEÑO WEB

Para el diseño y creación de páginas web, se recomiendan tomar en cuenta los siguientes puntos, ya que permitirán evitar el rediseño o la demora en el desarrollo de la página web y como consecuencia, el retraso de la entrega del proyecto:

Contenidos

1. Conocer la marca/empresa

Necesitamos conocer muy bien la marca/empresa, para detectar sus necesidades convirtiendo sus debilidades y todos aquellos factores diferenciadores en fortalezas.

El conocimiento de la marca deberá también extenderse a su competencia directa o indirecta. Debemos saber en dónde estamos posicionados, para poder generar una propuesta que sea superior a la de la competencia.

2. Definir objetivos

Es importante tener claro ¿para qué se va a hacer el sitio web? ¿qué queremos lograr? Si no se tiene bien claro esto, el sitio web es solo un accesorio.

Una página web genera “Presencia” y “Visibilidad” en internet, por lo que un sitio web de alguna empresa que no sirva para “posicionamiento de la marca” y/o “vender”, no tiene razón de ser.

3. Diseño y contenido centrados en el usuario (audiencia)

Definición de la audiencia en base a:o Estrato Social.o Educación.o Idioma.o Ubicación Geográfica.o Nivel de ingresoso Edad.

El diseño deberá de ser consistente y bien claro para el segmento de mercado al que va dirigido, por lo que los elementos de navegación y contenidos deberán de usar un lenguaje fácil y entendible para las personas que estarán visitando el sitio.

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

4. Arquitectura del Sitio Web

Definición del mapa del sitio en base a los objetivos y contenidos. Definición de los mecanismos de atención a usuarios (formulario de contacto, chat,

etc.) Definición de los widgets. (aplicaciones que agregan funcionalidad adicional a la

página web como las de Facebook, Twitter, YouTube, Pinterest, enviar a un amigo, Clima, Banners, etc.)

La arquitectura de contenidos puede ser obtenida de 3 formas:o Agrupación de contenidos por temáticas o categorías.o Agrupación por funcionalidad.o Basada en sitios web similares (competencia).

Mientras menos clics tenga que dar el usuario para llegar a un contenido es mejor. Se recomienda no hacer más de 3 clics. En caso de ser necesario mayor cantidad de clics para llegar al contenido deseado, debemos de cuidar que el usuario tenga claro que cada vez se acerca más al contenido que está buscando.

5. Desarrollo de Wireframes (bocetos)

Es de suma importancia el aterrizar en wireframes la arquitectura del sitio web, para de una manera más clara y simple, pueda transmitirse la idea de la distribución de la información y de los elementos funcionales que contendrán las páginas web.

Los elementos relacionados tendrán que organizarse en grupos, ya que cada grupo se volverá una sección dentro de la página.

Se recomienda hacer un boceto por sección/página del sitio web. Los wireframes son el primer entregable al cliente para su aprobación, para poder

continuar con el diseño gráfico.

6. Diseño de la página web

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

BUENAS PRÁCTICAS DE DISEÑO WEB

1. Diseño basado en las emociones: CCR ¿Qué tipo de diseño será el que mejor transmita los sentimientos de la

marca/empresa? Se recomienda el uso de lluvias de ideas con el cliente para lograr este objetivo.

Es necesario contar con un Concepto Creativo Rector (CCR), porque de ahí parte todo.

Lo más importante en el diseño es la transmisión de emociones que la misma marca/empresa pretende lograr generar con sus productos/servicios a su audiencia.

o Debemos de hacer uso del Storytelling, ya que es una de las herramientas más importantes para captar usuarios, pues el “arte de contar historias” es la clave para que el usuario comparta un vínculo emocional con las marcas.

o Una de las formas de conectar con el cliente es vincularlos a nosotros emocionalmente, hacer que nos consideren parte de su entorno y de su universo más cercano, que nos necesite, creando un vínculo fuerte a sus emociones, metiéndonos en su mente.

o Para conseguir la empatía de nuestro público objetivo no hay nada mejor ni más efectivo que crearles una más que positiva experiencia de usuario, vinculando nuestro producto o servicio a un recuerdo o a una sensación vivida por el cliente y que le cree sensaciones positivas, para lo que es ideal recurrir a una historia.

2. Reglas de diseño claras Selección minuciosa de las fotografías a utilizar y el tratamiento que se les dará

(recorte o retoque). Seleccionar la tipografía adecuada para el sitio. De preferencia no utilizar más de

2 tipografías. Las tipografías deberán poder utilizarse en web de manera gratuita, ya que la mayoría requiere licencia de uso. En caso de tener un costo, habrá que notificárselo al cliente para su aprobación.

Selección de la paleta de colores a utilizar. Cada color seleccionado tendrá un objetivo o función muy específica dentro del diseño. La psicología del color tiene un papel muy importante en la generación de emociones.

Diseño que permita una fluidez visual para encontrar de manera rápida y fácil la información importante. El usuario tiene de 5-8 segundos para entender de lo que se trata el sitio web.

3. Jerarquía visual clara: El título deberá de ser el elemento más destacado de los contenidos de la página. Se deberá hacer uso de barras de navegación y menús para la agrupación de

contenidos del sitio web. La forma de lectura de una persona en nuestra ubicación geográfica es de arriba

abajo, de izquierda a derecha (basado en estudios de mapas de calor – heat maps), por lo que la forma de navegación más importante deberá cumplir una barra de navegación superior (principal/secundaria) y menú lateral izquierdo en caso de ser requerido.

Utilizar un estilo estándar en las barras de navegación, no hacer sufrir a los

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

usuarios con la búsqueda del menú principal, ya que permite menos abandonos del sitio y más páginas visitadas por el mismo usuario, lo que permite mayor número de conversiones (suscripciones, compras, etc.).

La facilidad de uso y ubicación de la información es más importante que el diseño mismo, lo que no significa que el diseño no sea importante, solo que en orden de prioridades, el diseño es secundario. “Mientras menos hagamos pensar al usuario, menos se sentirá frustrado”.

Las etiquetas de los enlaces del menú deberán ser genéricas y cortas, ya que mensajes como “Lo que hacemos” en vez de “Productos” o “Servicios”, no comunican nada extra. Las etiquetas genéricas ayudan a reducir el porcentaje de abandonos de un sitio.

Se recomienda no más de 7 elementos en el menú, por lo cual, en caso de ser necesario, se tendrá que revisar la arquitectura de contenidos. En caso de ser demasiados elementos, se requerirá una nueva categorización. En caso de ser necesario se puede considerar el uso de una navegación principal y otra secundaria.

El orden de aparición de los elementos deberá de ser en base a su importancia. La información que se quiera que el usuario visite primero, deberá de ser el punto de referencia para el ordenamiento. No todas las personas visitan todos los enlaces de las páginas web, por lo que debemos de considerar que mínimo vean lo más importante.

Si se utiliza algún menú desplegable, se deberá indicar gráficamente con una punta de flecha hacia abajo al final de la etiqueta del enlace, para que el usuario sepa de este funcionamiento y no tenga que estar investigando si cuenta o no con esa funcionalidad ese elemento del menú.

Incluir breadcrumbs para indicar el lugar en el que se encuentra actualmente el usuario en la página web. Una forma correcta de estructurar los contenidos sería Sitio > Sección > Página (donde el nombre de la página deberá estar de un color distinto a los otros enlaces).

Utiliza contraste para una mejor lectura en todos los elementos gráficos del sitio: “No todas las personas distinguen todos los colores con claridad”.

Una buena práctica es incluir un buscador cuando los contenidos del sitio web lo ameriten.

4. Consistencia: Los enlaces deberán parecer enlaces y los botones parecer botones. No debemos

de hacer pensar al usuario, ya que eso implica que el usuario se pierda e incluso tome la decisión de abandonar el sitio web. Los botones complican el posicionamiento en buscadores y el mantenimiento gráfico del sitio web.

Si se utilizan fotografías, ilustraciones o iconos, considerar que no rompan con el concepto gráfico y sean coherentes con la información o sentimientos a transmitir.

Limitar el uso de colores de 5-6 por paleta de ser posible. Toda información importante se deberá destacar de la demás información, para

que rápidamente pueda ser captada por el usuario.

5. Elementos de navegación: Los siguientes elementos de navegación deberán ser constantes en todos los

diseños:o Barra de navegación o menú superior. o Menú lateral. (izquierdo y/o derecho según la forma de lectura de acuerdo

al idioma).

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

o Ubicación de los widgetso Breadcrumbs. o Buscador.o Encabezado.o Pie de página.

Mapa del Sitio. Información de Contacto. Copyright. (Si el sitio web tiene un formulario de registro, deberá

contemplarse también las políticas de privacidad y uso del sitio web)

Nota: En los dispositivos móviles no existe el “mouse over” (poner el puntero del mouse sobre algún elemento), por lo que no se deberá de contemplar funcionalidad asociada a este tipo de evento.

Consideraciones Generales de Diseño: Diseño y contenidos:

o Las páginas deberán estar diseñadas para que mínimo en una resolución de pantalla de 1024x768 pixeles, ya que algunas netbooks e iPads tienen esa resolución. El área que se puede ver de contenido cuando se carga una página web es de aproximadamente de: 960x600 px (descartando la barra de menú, barras de herramientas y otros componentes de la ventana del navegador) por lo que se recomienda que los elementos visibles en ese espacio no sean truncados. En caso de que así lo requiera el layout, se podrá crecer de manera vertical (nunca de manera horizontal).

o Cuidar los márgenes, el relleno y la altura de líneas de texto. La mejor manera de trabajar los layouts es a través de cuadrículas o grids de 12 o 16 columnas. (más info en 960.gs y templates en descargas ). Se tiene demostrado que las layotus de Landing Pages aumentan las conversiones (suscripciones, compras, etc.).

o Los diseños deberán validarse de manera conjunta con el área de desarrollo (programación) para ver la factibilidad, ya que se tendrá que validar el dominio en el uso de las herramientas y tecnologías propuesta, antes de ser presentado al cliente para su valoración.

o No porque haya páginas web que te gusten, significa que sean funcionales o estén bien hechas. Encontramos en la actualidad bastantes páginas web que gráficamente sean increíbles, pero son difíciles de utilizar y no cuentan con las mejores prácticas de diseño y programación, por lo que se deberá ser selectivo. Un factor que no podemos olvidar, es el del posicionamiento

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

en buscadores, por lo que si la página no cuenta con los elementos necesarios para ser visible en internet, las personas no la encontrarán o si se hacen campañas publicitarias, el costo por clic será demasiado caro (nuestro anuncio no será de buena calidad).

Mejores Prácticas en el uso de tipografías (más información aquí ):o Cualquiera de serif o sans-serif fuentes están muy bien para el cuerpo del

texto y los títulos, pero fuentes sans-serif son todavía más popular para ambos.

o Para títulos las tipografías más comunes son Georgia, Arial y Helvetica y para contenidos las tipografías más comunes son Georgia, Arial, Verdana y Lucida Grande. (no quiere decir que sean las tipografías a usar de manera obligatoria)

o El tamaño de fuente más popular para los títulos tiene un rango entre 18 y 29 píxeles.

o El tamaño de fuente más popular para el cuerpo del texto es un rango entre 12 y 14 píxeles.

o El tamaño de la cabecera se sugiere que sea 1.96 veces el tamaño de la tipografía del cuerpo del documento.

o El interlineado (pixeles) se sugiera que sea de 1.48 veces el tamaño de la tipografía del cuerpo del documento.

o El ancho del párrafo (pixeles) se sugiere que de 27.8 veces el interlineado.o El espacio entre párrafos (píxeles) se sugiere que sea 0.754 veces el

interlineado (margen superior y margen inferior).o El número óptimo de caracteres por línea es de entre 55 y 75, pero entre 75

y 85 caracteres por línea es más popular, o El cuerpo del texto está alineado a la izquierda los enlaces deberán estar

subrayados, de otro color o resaltados en negrita.o Recuerda siempre comentarle al cliente si la tipografía a utilizar es

propietaria, ya que requerirá un costo adicional en caso de que pienses incluirla en el diseño.

Layout (Photoshop, Illustrator o Fireworks):o Las imágenes no deberán contener efectos como multiply, ya que cuando

se guardan las imágenes no se ven afectadas por este efecto y así no sirven.

o Los archivos se deberán entregar de manera organizada en capas (layers) con nombres descriptivos de cada una sin excepción, para evitar el regresar el archivo para su modificación. (los programadores no son adivinos, ni expertos en el uso de esas aplicaciones, además se muestra un archivo organizado y bien hecho).

Peso de las páginas:o Si las páginas cuentan con información dinámica (administrable) se deberá

contemplar el crecimiento vertical de la página web ó evitar el hacer uso de formas caprichosas en el área de contenido dinámico, ya que el peso de la página web se incrementa sustancialmente.

o Evitar el uso de demasiadas tipografías, ya que eso requiere que el navegador web descargue más archivos y tarde más tiempo en cargar la página.

o Si las páginas web tienen la opción de visualizarse en otro idioma, se deberá contemplar los espacios asignados a los textos, ya que la cantidad de caracteres son diferentes de una palabra. (Inicio – Home, Acerca de – About Us, Contáctanos – Contact Us, etc.)

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

o Si se va a hacer uso de texturas, tendrán que ser aquellas que puedan replicarse en un patrón (mosaico) para no hacer más pesada la página web.

Página 404 (page not found): Se recomienda diseñar y programar una página que se muestre cuando algún enlace no funciona, para notificar al usuario esta información y que no sea la página por defecto. (más ejemplos aquí )

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

Dispositivos Móviles: Para las páginas web enfocadas a los dispositivos móviles (en caso de que el brief así lo defina) se deberá contemplar el concepto de “Responsive Web Design” (más información aquí ), para crear páginas que dependiendo del tamaño de la pantalla del dispositivo se distribuya correctamente el contenido del sitio web. Por ejemplo:

Más ejemplos de “Web Responsive Design” aquí .

EXTRA: USABILIDAD DE SITIOS WEB (Jakob Nielsen ):

No abandonar las reglas del buen diseño.o Seguir las reglas básicas de un buen diseño (diseño centrado en el usuario,

escribir concisamente evitando el lenguaje comercial superfluo, ofertar menos opciones, incluyendo sólo las más importantes no incluir gráficos y sonidos sólo por contar con ellos)

Gráficos y multimediao Reducir al mínimo el uso de imágeneso Dar a todos los gráficos (incluso a los banners publicitarios) nombres que

sean comprensibles y que transmitan de verdad lo que el gráfico es y hace.o Nunca difuminar las imágenes para indicar no disponibilidad.o Cuando los gráficos contengan información útil, también proporcione la

información en texto.o Da a los usuarios maneras y alternativas de obtener la información

contenida en cualquiera de los gráficos que se encuentren.o No utilice una imagen en miniatura de la página de su sitio para utilizarla

como gráfico (o botón) en otra página.o Al hacer uso de gráficos, elije siempre imágenes claras y nítidas.o Facilite a los usuarios la posibilidad de saltarse cualquier elemento

multimedia, aplicación Java o Flash. (En la actualidad el uso de Flash no se recomienda)

o No vayas a crear automáticamente una versión sólo-texto del sitio.

Pops-ups, rollovers, nuevas ventanas y menús en cascada

o Evita el uso de ventanas emergentes.o En el caso de hacer uso de cuadros de diálogo en pop-ups, asegúrate de

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

que la acción por defecto es la más “perdonable”.o Evita abrir nuevas ventanas del navegador.o Si abres nuevas ventanas del navegador, siempre proporciona una forma

sencilla de volver a la página principal del sitio principal.o No confíes en los rollover de texto (tooltip) para transmitir información.o Evite utilizar menús en cascada (menús que se despliegan)

Enlaces y botones

o Limita el número de enlaces en una página.o Evita pequeños botones y enlaces con texto en minúscula.o Deja espacio entre los enlaces y botones.o Evita el uso de imágenes como el único método de enlazar a otra página.o Asegúrate de que los comandos importantes aparecen con sus propios

vínculos exclusivos.o Subraya todos los enlaces (por lo menos al pasar el mouse sobre él).o Crea vínculos dentro del texto cuando tenga sentido. Utiliza los botones

adicionales sólo cuando sea necesario.

Organización de las páginas

o Confirma al inicio de la carga de la página principal el nombre de la compañía.

o Confirma al inicio de la carga de una página en qué página se está.o No asocies la palabra “página principal” o “home” con el logotipo de su

empresa si planeas volver a utilizar el mismo gráfico en todas las páginas.o Reducir la necesidad de desplazarse con scroll.o Cuando los usuarios deban hacer una elección, pon todas las posibilidades

en la misma zona.o Cuando los usuarios deben hacer una elección, adviérteles de la elección

mediante, por ejemplo, un texto del tipo “Selección de pedido”, e infórmales de la cantidad de opciones que tienen.

o Haz un diseño de páginas consistente.o Considera la posibilidad de utilizar breadcrumbs para que los usuarios

puedan saltar los enlaces o elementos de navegación.o Elije una dirección Web de su sitio simple e informativa, y mantenga esa

URL en el campo de la dirección de la página después de la carga.

Páginas

o Evita las “páginas portada” previas a la página de inicio de un sitio, haz que la primera página que la gente vea sea la página que mejor describe la compañía y el sitio.

o Incluye tan sólo los pasos y las páginas necesarias.

Campos y formularios

o Limita la cantidad de información que el formulario requiere; recoje sólo el mínimo necesario.

o Pon las etiquetas de texto de los campos muy cerca de los campos que les corresponden.

o No indique los errores del formulario simplemente destacando un texto en rojo o amarillo.

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

o No confíes sólo en el asterisco para indicar que un campo es necesario.o Asegúrate de que el orden de tabulación es lógico.o Haz coincidir el orden de tabulación con la disposición visual de los

elementos cuando sea posible.o Apila los campos en una columna vertical.o Ofrece campos de entrada estándar para los números de teléfono.o En aquellas páginas que tenga un formulario con un único campo de

entrada o selección, poner el botón lo más cerca posible del campo.o En los formularios, ponga el botón “enviar” lo más cerca posible del último

campo.o Pon cualquier instrucción relativa a un campo en particular antes del campo

y no después.o Considera cuidadosamente cuánto tiempo se pone de tope para hacer una

acción como por ejemplo rellenar un formulario.

Textos

o Selecciona colores de texto con buen contraste.o No uses un tamaño de fuente muy pequeño para el texto de la página.o No uses texto pequeño o sutil (por ejemplo un gris rebajado) para los

encabezados y categorías.o Crea siempre un buen contraste entre el color del texto y el color de fondo

de la página.o No te bases en una imagen de fondo para crear el contraste con el texto.o Prueba los colores y fuentes de su sitio con un magnificador de pantalla y

herramientas de cambio de contraste.o Asegúrate de que es posible magnificar (zoom) el sitio.o Escribe de forma concisa y elimina el texto superfluo.o Si el nombre de la compañía o el texto en general presenta abreviaturas y

acrónimos, dígale al lector de pantalla como pronunciarlo mediante las etiquetas “abbr” y “acronym”.

o Replantéate la forma en la que usas los paréntesis y los asteriscos.

Búsquedas

o Ofrece un motor de búsqueda que perdone los errores de ortografía.o No bases únicamente la capacidad de búsqueda de un sitio en la interfaz de

navegación. (campo con autocompletar)o Coloca la caja de búsqueda donde los usuarios la esperan encontrar, no en

una zona inesperada.o Describe claramente los resultados de la búsqueda.o Avisa a los usuarios cuando no han introducido nada en la caja de

búsqueda.o No presentes el ranking de relevancia de los resultados de la búsqueda en

una tabla.

Comercio electrónico

o Describe minuciosamente las imágenes de los productos que el sitio vende como si no hubiera imágenes.

o Ayuda a los usuarios a seguir comprando después de haber añadido algo al carrito, dándoles una forma de llegar de nuevo a donde estaban.

o Coloca los botones de “añadir a la cesta de compra” o “realizar pedido”

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

cerca de los elementos a comprar.o Ten en cuenta a los clientes internacionales seleccionando cuidadosamente

los términos que utiliza (políticas de venta, privacidad y uso).

Tablas y frames

o Evita el uso de tablas y frames para maquetar un sitio.o Evita el uso de tablas muy grandes sin motivo. Si debes usarlas, considera

proporcionar la información también en formato texto o usar paginación.o En especial en las tablas, no uses gráficos para indicar un dato como por

ejemplo el estado, es mejor usar texto.o Asegúrate de que las listas alfabéticas visuales siguen estando en orden

alfabético cuando son leídas por un lector de pantalla.o Incluye un resumen (“summary”) en todas las tablas.

7. Recursos:

Utilizar tipografías gratuitas para evitar problemas de copyright:o Font Squirrel – http://www.fontsquirrel.com o Google Fonts – http://www.google.com/webfonts

Animaciones Web:o Spritely - http://spritely.net/ o Jquery - http://jqueryui.com/docs/show/ o Hype - http://tumultco.com/hype/

Diseño Web/ UX:o Abduzeedo - http://abduzeedo.com/tags/sites-week o 1st Designer - http://www.1stwebdesigner.com o Designers Toolbox - http://designerstoolbox.com o Smashing Magazine - http://www.smashingmagazine.com/tag/web-design/ o The Best Designs - http://www.thebestdesigns.com/ o Web Design Shock - http://www.webdesignshock.com/ o Web Designer Aid - http://webdesigneraid.com/ o Elegant Themes - http://www.elegantthemes.com/ o Behance Served Sites - http://www.webdesignserved.com/ o Awwwads.com - http://www.awwwards.com/ o The Webby Awards - https://www.webbyawards.com/ o CSS Beauty - http://www.cssbeauty.com o Smashing Magazine:

http://www.smashingmagazine.com/category/design/ http://uxdesign.smashingmagazine.com/

Ejemplos de elementos de navegación, formularios y galerías (contemplar solo las gratuitas):

o http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display- solutions/

o http://designbeep.com/2011/02/28/20-more-jquery-image-galleryslider- plugins-and-tutorials-worth-a-look/

o http://psdcollector.blogspot.mx/2010/04/web-form-design-250-showcase- of.html

o http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

when-and-how-to-use-them/

Estadísticas web:o http://gs.statcounter.com/ (navegadores y resolución)o http://w3schools.com/browsers/default.asp (navegadores y resolución)o http://www.amipci.org.mx/?P=esthabitos (Hábitos de los usuarios de internet en

México 2013)

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

Resolución de los dispositivos móviles.

Mapas de Calor: Esquema de un sito que muestra las zonas más visitadas (zonas calientes) y las menos visitadas (zonas frías).

Bu

en

as p

rácti

cas d

e d

iseñ

o d

e p

ág

inas w

eb

@christianbonner

M.C. Christian Fernando Bonner BarbosaEmail: christian.bonner@gmail.comLinkedIn: linkedin.com/in/bonnermx

Licencia CC BY 2.5 MX

Ejemplo de mapas de calor de layout tradicional.

Landing Page: Se denomina página de aterrizaje (del inglés landing pages) a una página web a la que una persona llega, después de haber hecho clic en el enlace de algún banner o anuncio de texto cuyo objetivo es conseguir más clientes potenciales o conversiones.

Referencias: http://www.bluecaribu.com/infografia-anatomia-de-una-landing-page-perfecta http://www.bluecaribu.com/consejos-conversiones-landing-pages