>> Curso en la Escuela de Diseño gráfico de la Universidad Nacional de Colombia
>> Diseño centrado en las personas, teorías de la percepción y herramientas para el diseño web

 
Ver programa del semestre >>

Jesse james garret metodología del diseño usable


RECURSOS

Web hosting GRATIS

Dominio GRATIS

Tutoriales par aprender código
 
 
 
http://www.w3schools.com/
Tutoriales CSS / HTML
LibrosWeb.es - Libros y tutoriales sobre HTML, CSS, JavaScript, AJAX y otras tecnologías web
HTML5 Rocks - A resource for open web HTML5 developers
http://wufoo.com/
Todo tipo de formularios

Galerias de imagenes
Script lightbox para galerias

Formularios fácil y rápido
Ejemplo>> aqui
Y aqui se hacen: http://www.jotform.com/
www.panomonkey.com
Herramientas útiles para css y html
Menu by PureCSSMenu.com
http://www.bligoo.com/explora
Ultimate CSS Gradient Generator - ColorZilla.com
CSS3 Gradient Generator
Display-inline.fr - CSS gradient generator
CSS3 Generator
Text Properties
CSS3 Walking Man ¡Asombroso Experimento! | Gespadas
Generador de Lazos (Ribbons) 3D en CSS3 | Gespadas
CSS3 Generator - By Peter Funk & Eric Hoffman
CSS3 Patterns Gallery

VÏNCULOS DE INTERES

Laboratorio de usabilidad UN

Usabilidad al día
Un consejo de usabilidad cada día

No solo Usabilidad
Revista multidisciplinar sobre personas, diseño y tecnología

www.uxpond.com
Pond is a search engine dedicated to user experience blogs, journals, discussion, UI patterns, and tools

UX Magazin
Sets out to explore, promote & discuss the multiple facets of user experience one article at a time. It is built upon the foundations of ProjectNeo, a global interactive design community.

User Interface Engineering Training, and consulting firm specializing in web site and product usability

Vorlesung Mensch-Maschine-Interaktion 1
Materiales del curso hombre Hombre_maquina. Univetsidad de Munich

Usability.gov
Mejorando la experiencia de usuario, USA.

Guia Digital
La mejor guia digital, lineamientos para el desarrollo de productos y servicios en la web para el estado de Chile.










 

Aqui hay un blogg!

 

 

PLANEACIÓN
01 - INTRODUCCIÓN A LA EXPERIENCIA DE USUARIO



 

PRESENTACIÓN1

>> Introducción a la experiencia de usuario (1.8 Mb)

>> Esquema del equipo para la creación de proyecto web

LECTURAS

Manual de Técnicas para el Diseño Participativo de Interfaces
de Usuario de Sistemas basados en Software y Hardware
>> Descargar aqui: PDF 50Kb

No me hagas pensar. Steve Krug > Descargar PDF 1.26 Mb
No esta completo, falta el último capitulo

La psicología de los objetos cotidianos - Donald Norman
Leer páginas 216-229 "Los caprichos de los sistemas de ordenadores"

 



PLANEACIÓN
ESQUEMA GENERAL

PROCESO GENERAL DE INVESTIGACIÓN
Paso a paso del proceso y objetivos a lograr en cada paso

PDF 33Kb



PLANEACIÓN
02 - LAS NECESIDADES DE LOS USUARIOS

IDENTIFICANDO LAS NECESIDADES DE LOS USUARIOS
Y LOS OBJETIVOS DEL SITIO



LECTURAS

PDF: Analisis de requisitos. Tesis Granollers

WORD: Ejemplos de cuestionarios

TAREA
INVESTIGAR SOBRE LA CREACIÓN DE PERSONAS Y ESCENARIOS

LECTURAS RECOMENDADAS

Leer: Creación de personas y/o What are personas (donde Gilbert)

Directrices de usabilidad del Gobierno Colombiano
(capitulo objetivos - personas) PDF 4.3Mb


Pauta persona PDF: 22KB


PLANEACIÓN
03 - PRIORIZACIÓN DE REQUERIMIENTOS


PRESENTACIÓN SWF
Priorización de Requerimientos (swf)

LECTURAS OBLIGATORIAS
UX-Design Unger and Chandler Priorizando requerimientos (Fotocopiadora Gilbert)

LECTURAS RECOMENDADAS
Lectura: Guia para priorización de requerimientos de Appel
Lectura: Jesse James Priorizing requirements (PDF)
Cuestionario para priorización de requerimientos basado en Jesse james (PDF)
requirements_priorization_worksheet (xls)


PLANEACIÓN
04 - ORGANIZANDO INFORMACIÓN: SITE MAPS



 

ACERCA DEL CARD SORTING

EJERCICIO EN CLASE
http://www.optimalworkshop.com/
http://websort.net/

LECTURAS OBLIGATORIAS
Sitemaps y Workflows UX-Design Unger and Chandler (en la fotocopiadora de Gilbert)

SITIOS RECOMENDADOS
Otras herramientas para card-sorting
Measuring the user experience


DISEÑO
05 - ORGANIZANDO INFORMACIÓN: WIREFRAMES / ESQUELETOS



 

EJERCICIO EN CLASE:
Evaluación de Wireframes - Descargar requerimientos

MATERIALES
Ejemplos de esqueletos (wireframes)

FORMATOS DIGITALES
Formatos para dibujar wireframes PDF
Explicados aqui: http://960.gs/

SITIOS RECOMENDADOS
http://wireframes.linowski.ca/
Descarga gratuita de formatos
18 buenos ejemplos de esqueletos

LECTURA RECOMENDADA
Más información acerca de las técnicas de prototipado (PDF)


DISEÑO
06 - GESTALT

PRESENTACIÓN SWF
Teoría de la Gestalt


DISEÑO
07 - METÁFORAS - RECURSOS

PRESENTACIÓN SWF
Maneras de significar: no literal, ejemplos (swf 2.4 Mb)

Metáforas, estilos y paradigmas (Documento de word)

Tesis Toni Granolles. Diseño (PDF)


DISEÑO
08 - LOS OBJETOS ATRACTIVOS FUNCIONAN MEJOR

LECTURAS
DONALD NORMAN Los objetos atractivos funcionan mejor
El mismo libro en google books (en español)
Las fotocopias las dejo donde Gilbert ( en español)

El mismo texto explicado por el autor en TED < click aqui >


El prólogo del texto < click aqui >
1. Prólogo : Tres teteras. Donald A. Norman. Si se quiere una regla de oro capaz de satisfacer a todos, aquí la tiene: nunca hay que tener nada en casa que no ...


DISEÑO
09 - LA REDUCCIÓN DE RUIDO

PRESENTACIÓN SWF
La reducción de ruido

LECTURAS OBLIGATORIAS
Las leyes de la simplicidad (ir al sitio)
Jhon Maeda, se mueve entre el diseño y la tecnología. Publicó este libro en el 2006. Actualmente trabaja para el MIT. Hay un video suyo en TED


INTERACCIÓN / TEST DE USABILIDAD
10 - PROTOTIPOS EN PAPEL

LECTURAS OBLIGATORIAS
>> 01_que_es_el_prototipado.pdf
>> 02_analisis_de_tareas.pdf
>> 03_cuestionarios_modelo_usabilidad_web.pdf
>> 05_modelo_encuesta_general.pdf

http://griho2.udl.es/mpiua/index.htm

http://griho2.udl.es/mpiua/ejemplos/Video_Avaluacio_Prot_%20Paper/EvalProtPapel.html

http://www.youtube.com/watch?v=ppnRQD06ggY

http://en.wikipedia.org/wiki/Paper_prototyping

http://www.paperprototyping.com/download.html



INTERACCIÓN / TEST DE USABILIDAD
11 - TEST SEMÁNTICO

DIFERENCIAL SEMÁNTICO. PDF 819Kb

________________________________________

1. GUIA PARA LA EVALUACIÓN DE WIREFRAMES
DESCARGAR AQUI DOCUMENTO WORD
________________________________________

2. TEST SEMÁNTICO TEXTO INTRODUCTORIO -
DIFERENCIAL SEMÁNTICO. PDF 819Kb
________________________________________

3. TUTORIALES EN VIDEO: test semantico
________________________________________

4. Video de DONALD NORMAN: diseño y emoción
________________________________________



ARMADA
12 - HTML

Tutorial de CSS por Silvino Gonzales
http://yourmung.net/unal/examples/ejemplos00_css.html
Como usar fuentes de FontSquirrel y Google Fonts en páginas web

Estos son los links de varias cosas:
La aplicación de Adobe Air: http://labs.adobe.com/technologies/widgetbrowser/
El calendario: http://jqueryui.com/demos/datepicker/
Incorporar Twitter en el sitio: http://www.tecnorama.org/demos/twitter/
http://www.mudaimemo.com/p/twit/

Sitios para aprender CSS
http://www.w3schools.com/
http://layouts.ironmyers.com/
http://css.maxdesign.com.au/selectutorial/tutorial_intro.htm
http://www.brainjar.com/css/positioning/default.asp
http://www.webchicklet.com/css/taking-the-plunge-learning-css/

Ejercicio en clase
www.disenomovil.mobi/multimedia_un/15_html/002turismo.zip

Scripts listos en DHTML
http://www.dhtmlgoodies.com
http://www.cssplay.co.uk/

Menus en CSS a la medida y para descargar
http://purecssmenu.com/

Ejercicio 01 - CSS
http://www.disenomovil.mobi/multimedia_un/15_html/ejemplo_stylos.zip
Armando desde PSD
Aqui archivo PSD modelo para trabajar en clase
Comportamientos / menu
descargar imagenes

Formularios fácil y rápido
Ejemplo>> aqui
Y aqui se hacen: http://www.jotform.com/

http://www.favicon.cc/

El carrusel mas sencillo
http://www.abcdisegno.com/carrusel/

otro mas complicadito
http://www.webmasterio.com/2010/03/16/como-crear-un-sencillo-carrusel-infinito-con-jquery/

30 diferentes scripts
http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

Slideshow
es como la mas bonita
http://smoothgallery.jondesign.net/showcase/gallery-set/

lightboxes
http://www.huddletogether.com/projects/lightbox2/#overview

foto gen maiz

 

Este es otro basado en el anterior tiene mas información por si a alguien le gusta
http://www.digitalia.be/software/slimbox#demo



PUBLICACIÓN
13 - DOMINIO - HOSTING Y FTP

Web hosting y Dominio gratis
http://www.hosting.eu.pn/

TUTORIAL <AQUI>

FTP FILEZILLA. Free licencia GNU
FILEZILLA Manual PDF

TUTORIALES DE FTP Y GOOGLE ANALYTICS EN VIDEO

01_Dominio y hosting
http://screencast.com/t/jXjvyRVj

02_Filezilla
http://screencast.com/t/sz8nogtJz0t

03_subirdatos
http://screencast.com/t/mn2EurR5i

04_verificar
http://screencast.com/t/oeN12uag6lJs

05_más con ftp
http://screencast.com/t/FEm2idjHRwA7

06_googleanalytics
http://screencast.com/t/suIsXabMyk

07_Google_script
http://screencast.com/t/4BrfY6d1X

08_sitemaps_01
http://screencast.com/t/ciMWjxnkPRuc

 


PUBLICACIÓN

14 - SEO

LECTURAS OBLIGATORIAS
Guía de Google para la optimización en las máquinas de búsqueda

Listado de metadatos >>>>>
http://www.html-metatags.de/38-ubersicht-an-moglichen-meta-tags/

OPTIMIZACION PARA GOOGLE
disenomovil google analytics. Descargar pdf
Disenomovil stats . Descargar PDF

Todo acerca de los sitemaps para google
http://www.sitemaps.org/es/index.php

Generador en línea de sitemaps
www.xml-sitemaps.com

Google sitemaps
Herramientas para web masters

Google analytics
herramientas para webmasters

Favicon
http://www.favicon.cc/

Archivos de robots txt
robot 1
robot 2
robot 3



PUBLICACIÓN

15 - Newsletter

Herramienta para envío de boletines

http://www.mailrelay.es

http://www.graphicmail.com

Contacto: rlmunozm@unal.edu.co / II ISemestre de 2012