PDF de programación - Abordar el diseño de un sitio web Experiencias y Reflexiones

Abordar el diseño de un sitio web

Experiencias y Reflexiones

Ricardo Castillo “negro”

www.rcgrafica.com

Índice

1
2

3

4

5

Objetivo
Temática
Usabilidad
Navegación
Colores

6

7

8

9

Logotipo
Composición
Accesibilidad
Maquetado

El sabio cumplimiento de todas las
etapas en la construcción de un sitio web hará
que el resultado final esté bien resuelto

y arroje mejores resultados.

Objetivo

Definir un objetivo debe preceder
el resto de las etapas

¿Qué quiero lograr?
¿A quién me estoy dirigiendo?
¿Qué deseo comunicar?

“

”

Si no tengo claro a dónde ir,

cómo puedo saber que camino tomar

Temática

Motivar la inspiración y
preparar los elementos de trabajo

Analizar sitios de la competencia y en el rubro.
Mirar revistas de diseño.
Elegir tipografías y fotografías adecuadas y atractivas.
Seleccionar colores relacionados a la temática.
Iconografía que siga una línea estética.

“

Estar informado es estar

”

Usabilidad

¿Estoy pensando en los usuarios o estoy
pensando en hacer lo que a mí me gusta?

Crear interfaces familiares a la temática.
Destacar los elementos correctamente.
Sintetizar los textos.
Simbología y fotografía coherente .

Usabilidad Definición y beneficios

Definición

Efectividad, eficiencia y satisfacción con la que un
producto permite alcanzar objetivos específicos a
determinados usuarios en un contexto de uso.

Beneficios de la usabilidad

La usabilidad permite que tu web sea fácil de usar,
eficiente y transmita una buena experiencia.

Usabilidad Beneficios

Beneficios para el cliente:

Mayor satisfacción de los usuarios.
Mejor posicionamiento de la marca.
Aumento de la tasa de conversión.
Menor esfuerzo en futuros rediseños.
Menos recursos en atención al cliente.

Usabilidad Beneficios

Beneficios para el usuario:

Mayor rapidez en la ejecución de tareas.
Mayor productividad.
Experiencia de uso más agradable.
Facilidad de entendimiento.

Usabilidad Buen ejemplo

www.digg.com

Usabilidad Buen ejemplo

www.flickr.com

Usabilidad Buen ejemplo

www.apple.com

Usabilidad Buen ejemplo

www.yahoo.com

Usabilidad Mal ejemplo

www.godaddy.com

“

”

Simple no es fácil, hacer

las cosas simples es complejo

Navegación

¿Cómo vamos a construir nuestro menú de opciones?
¿Cuántos ítems y/o sub ítems vamos a tener?
¿Nuestros menús serán desplegables o no? ¿Por qué?

Navegación Ejemplo

www.infobae.com

Navegación Ejemplo

www.download.com

Navegación Ejemplo

store.apple.com

Navegación Ejemplo

www.maxim.com

“

Mejor navegación, menor tiempo

”

Colores

Creando una paleta de colores

Seamos moderados.
Busquemos paletas en Internet.
Aprendamos sobre colores.

www.colourlovers.com

Colores Ejemplo

Trabajando con tonos

Trabajar con pocos colores de base.
Utilizar tonos, hacia blanco y hacia negro.
Los iconos y las fotografías también nos
aportan color a nuestro diseño.

Colores Ejemplo

“

El sentido común es el menos común de
los sentidos, no podemos atribuir saber
combinar colores únicamente al sentido
común, hay que aprender sobre colores

”

Logotipo

Tener una buena idea.
Saber abstraer.
Representativo.
Distintivo.
Fácil de recordar y asociar.
Fácil de aplicar en diferentes medios.
Debe poder aplicarse en pequeños tamaños,
escala de grises y blanco/negro.

Logotipo Ejemplos

Un logo es síntesis, simbiosis,

abstracción y distinción. No es un dibujo,
no es un texto, no es un texto con un dibujo.

“

”

Composición

¿Cómo voy a distribuir el espacio?
¿Qué cosas voy a destacar y por qué?
¿Cómo ubico el contenido en el sitio?
¿Qué grado de tensión tienen los elementos?
¿Cómo logro equilibrio y armonía?

Composición Espacios y distancias

Entrar al sitio

Composición Iconografía

Entrar al sitio

Composición Multimedia

www.neostream.com

Composición Productos

www.apple.com

Composición Información

www.clarin.com

Composición Entretenimiento

www.gamespot.com

“

saber componer ya no es tan sencillo

Componer es crear un

elemento a partir de otros,

”

Accesibilidad

Capacidad de acceso a la web y a sus contenidos.
Cualidad íntimamente relacionada con la usabilidad.
En la web, el W3C ha desarrollado directrices o pautas
específicas para permitir y asegurar este tipo de
accesibilidad.
El grupo de trabajo dentro del W3C encargado de
promoverla es el WAI (Web Accessibility Initiative).

Accesibilidad Aplicación en la web

Niveles de accesibilidad

A (mínimo).
AA (extendido).
AAA (Máximo).

TAW (Test de Accesibilidad Web)

Herramienta para el análisis de la accesibilidad
de sitios web.

www.tawdis.net

Accesibilidad Aplicación en la web

Acceso de todas las personas en condiciones
de igualdad

Colocar textos alternativos en las imágenes.
Enlaces con nombres significativos.
Videos con subtítulos.
Contenidos escritos en un lenguaje sencillo.
Presencia de diagramas y animaciones.
Usar la tecnología de forma moderada
(Adobe Flash, Java Script, AJAX).

Accesibilidad Aplicación en la web

Tamaño de texto suficientemente grande.
Tamaño adecuado de botones o áreas activas .
Evitar acciones que dependan de un dispositivo en
concreto (pulsar una tecla, hacer clic con el ratón).

“

La accesibilidad no es un tema

comercial, es un tema de ética, todos
merecemos acceder a la información

”

Maquetado

Maquetar correctamente significa:

Identificar adecuadamente los elementos en el HTML.
Utilizar hojas de estilo (CSS) para aplicar el diseño.
Utilizar correctamente las imágenes.

Maquetado HTML

HTML (HyperText Markup Language)
Lenguaje de etiquetas de hipertexto

Describe la estructura y el contenido en forma
de texto.
Cada etiqueta identifica un tipo de contenido.
Se estructura identificando cada una de las partes
por separado.

Maquetado

XHTML

XHTML (eXtensible Hypertext Markup Language)
Lenguaje extensible de marcado de hipertexto

Sustituye al HTML como estándar para las páginas web.
Es la versión XML de HTML.
Cumple las especificaciones más estrictas de XML.
La información se separa de su presentación, la cual
estará dada por hojas de estilo (CSS).

Maquetado

CSS

CSS (Cascading Style Sheets, CSS)
Hojas de estilo en cascada

Lenguaje para definir la presentación del HTML.
Nos permite aplicar diferentes estilos a cada una
de las zonas del HTML.
Para un HTML dado, se pueden aplicar “n”
diseños diferentes.

www.csszengarden.net

“

El gran diseñador web conoce y

muestra interés por varias disciplinas,

está más allá del software,

es autocrítico y acepta la crítica.

El gran diseñador web NO tiene límites

”

Nos encontramos en www.abcdisegno.com
Comunidad hispano parlante de diseño,

programación y creatividad.

¡Hasta pronto!