Herramientas para diseño web

diseño web
taller_media
jueves 5 de septiembre de 2013

diseño weberrores frecuentes

taller 6 - información y medios digitales
Fuentes excesivamente
pequeñas o con poco contraste
con respecto a los colores de
fondo.}legibilidad

Son poco accesibles, no se
diferencian los visitados de los
no visitados o se usan anclajes
tan malos como “Haz click aquí”}enlaces

Intentando hacer una web más
vistosa, se consigue el efecto
contrario: Hacerla menos
accesible y darle menos
importancia al contenido,
elemento primordial para un
sitio.
}uso de ﬂash

Lo ideal en una web es mostrar
información de una manera
corta y concisa, sin extenderse
y dando las ideas principales
además de una opción para
ampliar la información.
}contenido
concreto

La mayoría de los sitios carecen
de una opción de búsqueda en
un sitio web, cuando muchos
buscadores proporcionan una
de forma gratuita.}búsqueda

Aunque para muchos el único
navegador es el Internet
Explorer lo cierto es que existen
muchos otros
como Firefox que están
consiguiendo una cuota muy
importante del mercado.
}incompatibilidad
de
navegadores

estructuración
de contenidos

LOS USUARIOS CENTRAN EL INTERÉS EN LOS
CONTENIDOS POR SOBRE LOS GRÁFICOS
}

ELLOS BUSCAN:
TITULARES-INDICACIONES
(LINKS, GRÁFICOS DE CONTENIDOS)
}

escribir para
la web

LEER EN COMPUTADOR ES UN 25% MÁS LENTO
QUE EN UN IMPRESO
}

· Escribir la mitad del texto que se escribiría en la versión
impresa.
· Escribir para poder encontrar las cosas, utilizando
párrafos cortos, subencabezados y listas con viñetas.
· Utilizar hipertexto para dividir los contenidos.
}consejos

Utilizar títulos y subtítulos signiﬁcantes.
· Usar listas bulleteadas y elementos
similares para romper la uniformidad de los bloques de
texto.
· Utilizar realces, enfatizaciones para
captar la atención del usuario.
}consejos

USAR COLORES DE GRAN CONTRASTE PARA
TEXTO Y FONDO
}

NO USAR FONDO GRÁFICOS
PUEDEN INTERFERIR EN LA CAPACIDAD DEL OJO
HUMANO PARA INTERPRETAR LÍNEAS Y LETRAS
}

FONT-SIZE / FONT-FAMILY: EL TEXTO PEQUEÑO ES MÁS
LEGIBLE SI USAMOS FUENTES DE LA FAMILIA SANS-SERIF

TEXT ALIGN: JUSTIFICARLO A LA IZQUIERDA

estructuración
de un sitio

UNA BUENA ESTRUCTURA
PERMITIRÁ AL LECTOR VISUALIZAR TODOS LOS
CONTENIDOS DE UNA MANERA FÁCIL Y CLARA
}

PLANIFICA
LA ESTRUCTURA ANTES DE DISEÑAR
}

LA ESTRUCTURA DEPENDE DEL CONTENIDO
}

DUPLICA LOS ELEMENTOS DE NAVEGACIÓN SI ES
NECESARIO
}

aspectos
formales

AGOSTO2010
JERARQUIZA!
{PÁGINAS
TÍTULOS
ELEMENTOS
TEXTOS

ASPECTOS FORMALES{la estructura

ASPECTOS
FORMALES{pirámide invertida
titulares

ASPECTOS
titulares
explicación

ASPECTOS
titulares
explicación
textos

diseño con
grillas
Antes de pensar en contenedores,
estilos y tags…definamos la grilla
constructiva

"Una Grilla CSS debe ser fácil de entender, usar
y modiﬁcar, económica en el uso del código y
ﬂexible para adaptarse a la mayor cantidad de
necesidades de diagramación" }

¿cuál es su
utilidad?

Criterio normalizado de presentación de elementos y/o
recursos.
Aporta practicidad, armoniza la estética.
Permite establecer patrones de regularidad visual.
Divide el espacio en campos o espacios más pequeños
}

ESTILO
SUIZO

thegridsystem.org
designbygrid.com
960.gs}recursos

paletas
cromáticas

colourlovers.com
colorhunter.com
colorschemedesigner.com}recursos

Herramientas para diseño web

Más contenido relacionado

Similar a Herramientas para diseño web (14)

Más de iConstruye (20)

Último (20)

Herramientas para diseño web