Principios del diseo Frontend

Presentacin para el Diplomado Diseo Web: Estrategia y Diseo de la Informacin Digital por Ing.Horiany Contreras y
Prof.(a) Gloria Mousalli se distribuye bajo una Licencia Creative Commons Atribucin-NoComercial-CompartirIgual 4.0
Internacional.

Cmo navegan las personas?

Por lo general navegan con un objetivo en mente, incluso buscar

entretenimiento puede ser un objetivo.
La mayora de las veces, llegan a nuestros sitios a travs de una red social,
Google o de un enlace que vieron en otra web, pocas veces escriben la
direccin exacta www.direccion.com

Qu implicaciones acarrea este comportamiento?

Las personas no siempre van a llegar al home

sino a alguna de las pginas internas

Las pginas internas deben ayudar al usuario a entender de qu sitio est

tratando de obtener la informacin que necesita
ubicar rpidamente a qu sitio lleg
tener una idea de cmo se estructura de la informacin

Cmo lo logramos?

...elementos que pueden ayudarnos a ubicarnos en el sitio

Si es relevante, entonces imgenes que ayuden
y de qu trata:
Un logo (siempre presente)
Una navegacin consistente y descriptiva

al contenido y un resmen
Ttulo de la pgina

Entre ms orientado est el usuario, mayor

disposicin de usar nuestro sitio

Por qu se van los usuarios?

Porque no encuentran la informacin que

buscan

La mayora de las veces, somo nosotros mismos quienes ocultamos la

informacin a nuestros usuarios

Utilizando tecnicismos

No

Si

Usando distractores (publicidad, animaciones y textos

parpadeantes)

No

Si

Ubicando la informacin importante dentro de una pared de

texto

No

Si

Cmo leen los usuarios en la Web?

No leen, sino que escanean el sitio, el texto largo debe ser presentado en
trozos muy bien identificados con subttulos

Si

El patrn de la F

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

El contenido ms importante debe aparecer primero, o en su defecto un

resumen.

Las personas leen 25% ms lento en pantalla

Y aproximadamente, slo el 20
20% del texto en
un sitio

Qu caractersticas debe tener un buen diseo

Web?

...un diseo sencillo

Entre ms elementos, ms difcil ser encontrar la

informacin

No

Si

Todos los elementos de la pgina deben ayudar a

que se cumplan los objetivos identificados en la
fase de planificacin

...si un elemento no ayuda

Se elimina

Ejercicio:

 Identificar en Amazon una sla imagen que no ayude a vender, hallar un

elemento que sea solamente decorativo.

Pero..!
..Y si mi sitio es de diseo?

Pero..!
..Y si mi sitio es de diseo?

Las imgenes deberan ayudar a explicar el

contenido

La tpica imagen de call center no

dar pista alguna al usuario

En cuanto al uso de animaciones, audio y vdeo

Dependen de la estrategia de contenidos, pero

esencialmente deben ayudar a comunicar, y no slo
ser puestos para llenar un espacio

 para llenar un espacio xD

ayudan a comunicar

El diseo debe ser consistente

Consistencia Externa
Consistencia Interna

Consistencia Externa
Las personas que llegan a nuestros sitios, ya han navegado otros y tienen
patrones preestablecidos, se puede decir que ya han aprendido cmo
trabaja la web.
Por ejemplo: uno de los ms comunes es el men de navegacin presentado
horizontalmente en el top de la pgina

Consistencia Interna
Usar los mismos patrones en cada una de las pginas del sitio
Por ejemplo: El men principal no debe cambiar en las internas

No

Prctica:
1) Identificar un ejemplo de consistencia externa para el
prototipo de tu emprendimiento
1) Mencionar algunos elementos de consistencia interna
que podrs aplicar a tu proyecto

La Ley de Fitt

El tiempo para llegar a un objetivo (visual) es

una funcin de la distancia a dicho objetivo y su
tamao
Entre ms cercana y larga sea el rea objetivo, ms rpido ser alcanzarla
con un apuntador (cursor o dedo)
Click aqu

Click aqu
rea cliqueable

...en el juego de golpear al topo se hace

evidente la Ley de Fitt (el topo ms lejano
es el que ms cuesta)

Ejercicio rpido:
En el siguiente diseo cul es el botn ms fcil
de apuntar?

La pgina de inicio

La tradicional

La de UX

Debe describir de qu trata nuestro

sitio

Debe decirle a los usuarios de qu

manera nuestro sitio va a servirles

Debe darle la bienvenida a los usuarios

Debe ofrecer valor a los usuarios de

inmediato

Debe incluir la informacin ms

importante sobre nuestra empresa

Debe orientar a los usuarios sobre la

informacin que podrn encontrar
dentro

Debe incluir un CTA

(Call to action / LLamado a la accin)

Cmo puedo probar mi pgina de inicio?

Test de los 5 segundos

Ubicar al usuario en la pgina de inicio
por
5

segundos

...si logra decir, a grandes rasgos, de

qu trata el sitio

Aprobamos

Ejercicio rpido

...De qu trataba el sitio?

...Cal era el principal CTA?

...Qu otra cosa recuerdas del sitio?

Ejercicio rpido: describir el CTA de t pgina

principal, pensar dnde lo ubicaras en el prototipo.

Pginas Internas: Navegacin y Layout

Tipos de pginas internas ms comunes:

Categoras
Sub-categoras
Artculo
Resultados de bsqueda

...Cmo crear armona en la navegacin?

Categoras:

Suelen ser los tems del

men principal, y a la vez
padres de los artculos (o
sub-categoras si las
hubiere), una manera muy
comn de presentarlas es
usando el formato tipo blog

Artculo:

Muestra en detalle el
contenido solicitado: un
concepto, tem, post,
producto o galera; la
imagen se despliega en
mayor tamao, y el texto
ocupa mayor porcentaje en
pantalla.
Si crees que un artculo debe ir en el
men principal, probablemente
califique como categora

Navegacin:

Men principal
Migas de pan
Mens secundarios
Enlaces de inters
Enlaces en el mismo
artculo

Organizacin del contenido:

Scrolling Vs Paginar

Prev <1 2 3 > Next

Organizacin del contenido:

Scrolling Vs Paginar
Paginar:
Puede causar confusin,
Si se va imprimir es mayor
proceso,
Falso que mejora el S.E.O

Scroll:
Requiere menos esfuerzo
Prev <1 2 3 > Next

El quines somos?
No slo Quines somos? , sino
Dnde estamos?
Qu hacemos?
Cmo nos va?
Cundo comenzamos?
Buen ejemplo: http://www.blogtyrant.com/about/
* Recurso adicional: https://www.nngroup.com/articles/about-us-information-on-websites/

...El quines somos es una de las mayores oportunidades

para ganar la confianza de la gente

Es verdaderamente importante el asunto de la

confianza?

Veamos algunos ejemplos:

http://www.lapaginaweb.com.ve/
http://www.jesuscardenas.com.ve/
http://www.solucionesinformatica.com.ve/diseno-pagina-web-en-sancristobal-estado-tachira.php

https://www.platiniumhost.com/portafolio.html
http://www.tuwebcaracas.com/
http://www.enigmacrea.com/
http://happycog.com/

Medium.com es un ejemplo de que no hay que ser

disruptivos para tener xito...

...lo que hace nico al sitio de tu empresa de diseo, son tus

clientes y cmo tus trabajos inspiran confianza

...lo que hace nico a tu sitio de e-commerce son tus

productos (...o sus precios)

Lo que hace nico a un sitio, es la Experiencia de

Usuario diseada intencionalmente, ...y no un
layout muy innovador pero que nadie entiende

Tipografa para la Web

Presentacin para el Diplomado Diseo Web: Estrategia y Diseo de la Informacin Digital por Ing.Horiany Contreras se
distribuye bajo una Licencia Creative Commons Atribucin-NoComercial-CompartirIgual 4.0 Internacional.

Inspiracin

Recursos

https://www.google.com/fonts

http://hellohappy.org/beautiful-web-type/ (Las mejores

fuentes de Google fonts pero combinadas)

https://typecast.com/

Inspiracin

http://www.csswinner.com/

http://www.fltdsgn.com/

https://www.thebestdesigns.com/

http://www.awwwards.com/awards-of-the-day/

http://land-book.com/

http://www.uiparade.com/

http://www.siteinspire.com/

http://www.materialup.com/

Un recurso que les deba xD

http://uifaces.com/

El libro de los recursos

http://www.frontendhandbook.com/

En Espaol (Guas)

http://librosweb.es/