Sie sind auf Seite 1von 24

Introduccin al Diseo de Interfaces

Diseo de Interfaces Web


DAW

Tema 1

Sergio de Mingo (IES G.M. Jovellanos)

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

1 / 24

1 Introduccin al diseo de interfaces

2 Color, Tipografa e Iconos

3 Distribucin de los componentes

4 Herramientas y ayudas

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

2 / 24

Introduccin al diseo de interfaces

Interfaz

Denition Una interfaz es un elemento que funciona como intermediario en una comunicacin entre dos actores. En los computadores podemos encontrar multitud de interfaces Cualquier aplicacin informtica requiere una interfaz para ser utilizada. La interfaz de usuario En las aplicaciones web, esta interfaz se gestiona sobre el navegador del cliente

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

3 / 24

Introduccin al diseo de interfaces

Interfaz de usuario

Disponer de una interfaz de usuario bien diseada es muy importante. Y no es fcil Generalmente se infravalora Para el usuario, la interfaz lo es todo. No ve nada tras ella Una interfaz de usuario bien diseada es aquella que facilita el trabajo del usuario

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

4 / 24

Introduccin al diseo de interfaces

Interfaz de usuario bien diseada


Claridad Se lo que hace cada cosa Concisa No me estn sobrecargando de informacin Familiar Todo esta y hace lo que yo espero Adaptable (Responsive) Se adapta a mi entorno Consistente Puedo usar patrones comunes Eciente Me ahorra trabajo y tiempo Generosa (Forgiving) Me deja deshacer cualquier error Atractiva Adems es muy bonita

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

5 / 24

Color, Tipografa e Iconos

Transmisin de informacin

En una interfaz bien diseada hemos de buscar buenas maneras de transmitir informacin Disponemos de tres elementos bsicos para transmitir informacin relacionados con importantes conceptos:
Sensaciones e ideas abstractas Colores Textos Tipografas Dibujos y esquemas grcos Iconos

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

6 / 24

Color, Tipografa e Iconos

Teora del color

Una buena combinacin de colores es fundamental Con la eleccin de colores de nuestra interfaz estamos enviando el primer mensaje al usuario Nuestros cerebros transmiten distintas sensaciones segn los colores que estn observando En marketing comercial, el uso de colores se considera algo fundamental y bsico

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

7 / 24

Color, Tipografa e Iconos

Teora del color

El color rojo y su paleta de derivados transmiten energa, calidez, excitacin y fuerza Los derivados del color verde transmiten placidez, calma. Se asocia a conceptos como naturaleza, salud, frescura, etc. El color azul y sus derivados expresan armona y deliza. Se asocian a conceptos como la limpieza, la claridad o la conanza

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

8 / 24

Color, Tipografa e Iconos

Tipografas

Es otro aspecto fundamental de nuestra interfaz A menudo es el gran olvidado Una mala eleccin puede causar confusin y cansancio al leer Si en nuestra interfaz abundan los textos (ej: peridico o blog) la eleccin de la tipografa es crtica

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

9 / 24

Color, Tipografa e Iconos

Tipografas

Los tipos de letra se clasican en Serif y Sans Serif Depende de si el tipo tiene o no serifas o pequeos remates en sus terminaciones

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

10 / 24

Color, Tipografa e Iconos

Tipografas. Algunos criterios de eleccin

Longitud del texto Jerarqua del texto (cabecera, subttulo, etc.) Impresin en papel o digital Tiempo de descarga (si no est disponible) Compatibilidad Licencias

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

11 / 24

Color, Tipografa e Iconos

Iconos
Los iconos son la ltima manera de transmitir informacin en la web Imgenes o esquemas grcos Su funcin es tan importante como los anteriores y hemos de prestarles la misma atencin que a colores y tipos Su diseo debe guardar armona con el resto de la interfaz Al tratarse de imgenes debe cuidarse el tiempo de carga Es recomendable usar programas de diseo especcos (Photoshop, Gimp, etc.)

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

12 / 24

Distribucin de los componentes

Ordenando los componentes de la web

Tras elegir el color y los tipos de fuente hemos de aadir el resto de componentes a nuestra interfaz Lo ms importante es elegir una estructura comn para todos los documentos web de nuestro sitio Mantener una distribucin o layout comn ayudar a que el usuario se sienta cmodo mientras navega Al igual que los anteriores elementos, es importante elegir una distribucin de elementos adecuada

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

13 / 24

Distribucin de los componentes

Distribucin o layout

Los elementos ms tradicionales presentes en los layouts ms comunes son:


Cabecera Barra(s) de navegacin Contenido Pie de pgina

Durante los ltimos aos estas distribuciones han ido evolucionando hacia estructuras ms visuales y complejas

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

14 / 24

Distribucin de los componentes

Distribucin o layout
La popularizacin de CSS ha permitido esta mejora en la maquetacin de las interfaces web El diseo adaptativo es uno de los principales problemas a la hora afrontar el layout. Qu dispositivo usa mi cliente potencial?
Pantalla panormica Tablet Mvil ...

Adaptarte al mayor nmero de resoluciones posibles puede ser una pesadilla


Diseo de Interfaces Web (DAW) Introduccin al Diseo de Interfaces Tema 1 15 / 24

Distribucin de los componentes

Distribucin o layout

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

16 / 24

Distribucin de los componentes

Mapas de navegacin

Aporta al usuario una visin global de toda el sitio web en una sola estructura Favorecen a los robots de los buscadores indexar la informacin cuando visitan nuestro sitio En general, resultan fundamentales para vertebrar un sitio web de mediano o gran tamao Lo normal es que sean generados de forma automtica por programas o scripts.

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

17 / 24

Herramientas y ayudas

Herramientas

El diseo de interfaces puede estar ayudado y asistido por mltiples herramientas


Aplicaciones especcas Generadores de cdigo Plantillas Guas de estilo

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

18 / 24

Herramientas y ayudas

Aplicaciones especcas

Ofrecen mecanismos sencillos para la construccin de layouts Generalmente utilizan tcnicas como drag and drop de widgets permitiendo el ajuste de sus dimensiones En segundo plano, estas aplicaciones calculan la distribucin y generan tanto el cdigo HTML como CSS adecuado Un ejemplo es el famoso Dreamweaver de Adobe

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

19 / 24

Herramientas y ayudas

Generadores de cdigo

Programas algo ms sencillos que los anteriores que se limitan a leer un documento fuente y a generar cdigo HTML y CSS para poder visualizarlo El documento fuente suele estar escrito usando diferentes lenguajes de marcas (XML+XSLT) o texto enriquecido (MarkDown, Org-mode, Creole) Son muy tiles para gente que necesita publicar textos en la web sin conocimientos tcnicos. Ej: Wikipedia

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

20 / 24

Herramientas y ayudas

Guas de estilo

Son documentos que estandarizan un patrn de diseo Son muy tiles de seguir cuando intervienen muchos programadores/diseadores en el diseo de una o varias interfaces relacionadas (un mismo sitio web, una misma aplicacin, etc.) A veces no son simples recomendaciones sino especicaciones necesarias (Ej: Apple Store)

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

21 / 24

Herramientas y ayudas

Plantillas

Las plantillas (templates) son estructuras CSS ya creadas y publicadas para uso uso Incorporan un layout ya generado junto con la combinacin de colores ms adecuada y el set de imgenes necesario (botones, barras, logos, etc.) Su uso ahorran muchsimo trabajo Existen multitud de sitios en Internet donde poder descargarnos plantillas, pero muchas son de pago

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

22 / 24

Herramientas y ayudas

Plantillas
Se han popularizado enormemente gracias a los motores de blog (wordpress, blogger, tumblr, etc.)

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

23 / 24

(cc) 2011-2013 Sergio de Mingo Some rights reserved. This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Spain License, available at http://creativecommons.org/licenses/by-sa/3.0/

http://apuntes-fp.blogspot.com sergio.demingogil@educa.madrid.org

Diseo de Interfaces Web (DAW)

Introduccin al Diseo de Interfaces

Tema 1

24 / 24