P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 002 of 070

W I N D O W S L I V EH U M A N I N T E R F A C E G U I D E L I N E S2006

User Exper ience Framework & Arch i tecture for the ent ire network of Windows Live products and serv ices

microsoft_live.zip

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 011 of 070

M i T V U S E R I N T E R F A C ED E S I G N & I N T E R A C T I O N

mitv_interface.pdf

1. Unifica el vocabulario visual para designar que es información proveída por el sistema y lo que es contenido aportado por el usuario.2. Botones de colores tienen funcionen constantes y culturalmente intuitivas a su tonalidad.3. Los interfaces se presentan lo más simplificados posible, escondiendo funcionalidad avanzada tras el botón “Opciones” representado por Verdi, el experto técnico de la familia MiTV y apoyo a cualquiera de las otras secciones del producto.4. El menú principal está ahora dividido entre el paquete básico de funcionalidades: MiTV Digital y el paquete MiTV Conecta.

MiTV Interface – Home OptionsInterfaz MiTV – Opciones de Inicio

page 02 of 08

Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com

1. El botón azul está ahora permanentemente asociado al paquete de conectividad, lo cual sirve muy bien para sutilmente recordar que mas funcionalidad está disponible aunque no se haya adquirido previamente. Si el usuario hace uso del botón azul... una sugerencia para su compra aparecerá.2. El menú inferior puede replegarse una vez el usuario no necesite recordar para que es cada botón. Mientras tanto, si el Kit de conectividad no ha sido adquirido, este se difuminará y permanecerá deactivado como constante recordatorio visual.

MiTV Interface – MiTV ConectaInterfaz MiTV – MiTV Conecta

page 03 of 08

Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com

1. Zula, representa todos esos servicios acogidos en la oferta de MiTV Conecta. Estos, una vez adquiridos, permanecerán bajo el menú de Zula, activable por el botón azul y apoyado como siempre por el botón verde de opciones avanzadas. 2. Al separar los menúes de TV digital y gestión de intercambio de información, permite recordar al usuario el valor añadido de su inversión y separa los públicos ya identificados como centrados alrededor de la TV, y aquellos más duchos en la comunicación entre dispositivos (PCs, bluetooth, Wi-Fi, ADSL, etc).

OPCIONESTV DIGITAL AYUDA CONECTA

MiTV Interface – HomeInterfaz MiTV – Inicio

page 04 of 08

Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com

1. Al igual que cualquier función dispone del apoyo avanzado de Verdi con solo dar al botón verde, también es posible aprender más y ser instruido en cualquiera de los temas con la ayuda de Amalia, activable con el botón amarillo.2. El sistema de Ayuda capitaneado por Amalia, puede disponer tanto de un manual con explicaciones de la funcionalidad de cualquier aplicación, como ejemplos de usos prácticos para poder imitar como si de un tour virtual se tratase.3. Al modularizar tanto la ayuda como el sistema de opciones e información avanzada, se puede construir un interfaz a la medida del usuario.

OPCIONESTV DIGITAL AYUDA CONECTA

MiTV Interface – MiTV Conecta HelpInterfaz MiTV – Ayuda de MiTV Conecta

page 05 of 08

Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com

1. La selección de ficheros es unificada a través de todo el interfaz.2. Permite visionar la televisión al mismo tiempo, y la información crece de acuerdo a las necesidades.3. La familia MiTV está vinculada coherentemente a las diversas funciones dentro de sus capacidades.4. Aquella información no necesaria, ha sido escondida y aparecerá ahora con el botón amarillo de Amalia.5. Los iconos reflejan las diversas posibles procedencias.6. La ventana principal confirmará posteriormente en su título de donde proceden los contenidos.

MiTV Interface – Attach Content IInterfaz MiTV – Añadir Contenido I

page 07 of 08

Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com

1. El correo electrónico es una de esas herramientas bajo la custodia de Zula, como exige su condición de experta en comunicaciones.2. El interfaz de correo se ha simplificado aún más desde la primera propuesta, al ser ahora varias de las funciones asumidas por el sistema operativo general.

MiTV Interface – EmailInterfaz MiTV – Email

page 06 of 08

Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com

1. Todos los recursos dentro de una procedencia (Pen Drive en el ejemplo) aparecen con una miniatura de sus contenidos. 2. Se evitarán tecnicismos de formato como “.jpg”, “.mp3” o “.mpg” en la nomenclatura de los contenidos. Cuando sea necesario, Verdi o Amalia siempre podrán aportar más opciones y mayor información.3. Se evitará el desplazamiento parcial de ítems a favor de unidades enteras con un clic del mando momentáneo, o pantallas completas con un clic continuado.

MiTV Interface – Attach Content IIInterfaz MiTV – Añadir Contenido II

page 08 of 08

Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com

Ítem 5 de 25 Más

PEN DRIVE

Navidades 2003

La Familia

Casa Rural

Picnic

Tina Cumple

Kiko y sus amigos

Semana Santa 2002

2003

When a French company wanted to launch a new interact ive TV set-top box in Spa in , they came to us for the full package

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 024 of 070

2001

whitestone.zip

This small company in S Ingapore needed a complete refresh in brand , web and product UX to compete aga inst the l ikes of IBM

W H I T E S T O N E P R O D U C T S T R A T E G YU I , C O M M U N I C A T I O N , I D E N T I T Y

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 025 of 070

2001

whitestone.zip

This small company in S Ingapore needed a complete refresh in brand , web and product UX to compete aga inst the l ikes of IBM

W H I T E S T O N E P R O D U C T S T R A T E G YU I , C O M M U N I C A T I O N , I D E N T I T Y

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 027 of 070

2003

whitestone.zip

This software company in S Ingapore , after succed ing with the 1 .0 user interface I d id , came back two years later for an upgrade

W H I T E S T O N E P R O D U C T S T R A T E G YU I , C O M U N I C A T I O N , I D E N T I T Y

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 028 of 070

I R E M E M E M B E R T H E T W E R SW E B , D E S I G N & I N F O R M A T I O N G R A P H I C S2001

This s i te , devoted to collect ing personal memor ies about theTwin Towers , was publ ished on Max Bru insma’s “Deep Si tes” book

remember.zip

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 032 of 0

Graphics of symbolic nature, as well as all icons, bullets, functional marks, navigational aids, etc. Should be "carved-out" of a matrix grid composed of 2x2 pixel squares with 1 pixel separation among them. Any color with sufficient contrast with the background is allowed.

The matrix-based iconography applies even to large graphics of functional nature, such as this map of the world utilized on the Global Gateway.

In addition to the guidelines stated on left. Icons of functions, calls for action or info notices (such as bullets, buttons, drop-down menus, warning signs, phone numbers, e-mail addresses, check marks, download files, etc. Must be defined out of 4 x 4 squares (2x2 pixels each with 1 pixel separation among them).

Please be aware that these illustrator graphics cannot be safely used as templates for final GIF images as PhotoShop will not respect the proportion between pixels, even if imported as "aliased' or as a "path". Therefore, make sure you recreate any matrix-based iconography within that program, observing clean square edges and solid colors throughout.

2 pixels

9x

1 pixel

N I K E . C O M G U I D E L I N E SW E B , E C O M M E R C E & C R E A T I V E G R O U P O R G2001

User Exper ience gu idel ines , des ign and strategy for Nike .com and i ts U .S . Web store . Lead ing a team of 37 profess ionals

nike.zip

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 037 of 070

© NIKE Retail Services, Inc.. 1999-2001 tech_lab

© NIKE Retail Services, Inc.. 1999-2001 tech_lab

buy it xpress!

Buy It Xpress! is a standardized module that could dynamically link all brand features to our e-commerce engine through those products common to both.

CHECKOUT

CLOSE

SHOPPING CARTMY ACCOUNT

BUY IT XPRESS!

N I K E . C O M G U I D E L I N E SW E B , E C O M M E R C E & C R E A T I V E G R O U P O R G2001

User Exper ience gu idel ines , des ign and strategy for Nike .com and i ts U .S . Web store . Lead ing a team of 37 profess ionals

nike.zip

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 038 of 070

CHECKOUT

ADD TO SHOPPING CART

SEE THIS IN

CHECKOUT

ADD TO SHOPPING CART

CONTINUE SHOPPING

Main action button has blue background.

Font for buttons is Avenir 95 Black, 10 point, with 25 kerning. All caps.

R = 0G = 0B = 204

R = 102G = 102B = 102

R = 51G = 153B = 255

CHECKOUT

ADD TO SHOPPING CART

SEE THIS IN

N I K E . C O M G U I D E L I N E SW E B , E C O M M E R C E & C R E A T I V E G R O U P O R G2001

User Exper ience gu idel ines , des ign and strategy for Nike .com and i ts U .S . Web store . Lead ing a team of 37 profess ionals

nike.zip

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 039 of 070

UPDATE

CANCEL ORDER CHECKOUTCONTINUE SHOPPING

N I K E . C O M G U I D E L I N E SW E B , E C O M M E R C E & C R E A T I V E G R O U P O R G2001

User Exper ience gu idel ines , des ign and strategy for Nike .com and i ts U .S . Web store . Lead ing a team of 37 profess ionals

nike.zip

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 042 of 070

1999

ylos.zip

Y L O SE C O M M E R C E U I , C O M M U N I C A T I O N , I D E N T I T Y

Th is small company in New Jersey needed a complete refresh in brand , web and product UX to launch i ts ecommerce solut ion

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 045 of 070

G O M E Z - M O L I N AO N L I N E P O R T F O L I O & C M S2003

gomez-molina.pdf

Pass ion for UX cont inues at home and on personal projects , good example of th is is the web s i te with CMS for my father

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 046 of 070

G O M E Z - M O L I N AO N L I N E P O R T F O L I O & C M S2003

gomez-molina.pdf

Pass ion for UX cont inues at home and on personal projects , good example of th is is the web s i te with CMS for my father

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 047 of 070

G O M E Z - M O L I N AO N L I N E P O R T F O L I O & C M S2003

gomez-molina.pdf

Pass ion for UX cont inues at home and on personal projects , good example of th is is the web s i te with CMS for my father

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 048 of 070

G O M E Z - M O L I N AO N L I N E P O R T F O L I O & C M S2003

gomez-molina.pdf

Pass ion for UX cont inues at home and on personal projects , good example of th is is the web s i te with CMS for my father

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 049 of 070

G O M E Z - M O L I N AO N L I N E P O R T F O L I O & C M S2003

gomez-molina.pdf

Pass ion for UX cont inues at home and on personal projects , good example of th is is the web s i te with CMS for my father

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2007 dav id@gomez-rosado .com

page 050 of 070

G O M E Z - M O L I N AO N L I N E P O R T F O L I O & C M S2003

gomez-molina.pdf

Pass ion for UX cont inues at home and on personal projects , good example of th is is the web s i te with CMS for my father

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2008 dav id@gomez-rosado .com

page 067 of 070 ask.zip

A S K . C O MD E S I G N M A N A G E M E N T , P R O D U C T & U X2007

Good UX des ign requ ires good UX processes , gu idel ines and management . These documents are sample of such .

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2008 dav id@gomez-rosado .com

ProjectPM

Date

Ask PeopleEzequiel VidraJuly 2, 2007 Version 03

web cool tough drunk foolish confusedamerican nice smart agressive ask managertraveler dreamer techie

Logged as AJeeves

Log Out

Manage your Pro�leManage your Contacts

About Contact Blog Support Help

Ezequiel Vidra

Ask.com

San Francisco, CAPresent

Tags Groups

TrendsSightings Connections

More

Stu�Invite to Connect!Similar People

Con�dence MeterWhat is this?

Beta

— Pro�le

Israelis inSan Francisco

Comments More

Web 2.0

LinkedIn Users

Web 2.0New York, NY

Israel EntrepreneursTel Aviv, Israel

Ask.comSan Francisco, CA

254photos

12videos

5news

Pro�le Viewed

2006

Content AddedContacted

Assign yours here

@ San Diego, CASandra Mathews

@ Boston, MAPredro Hernandez

@ San Francisco, CAJoshua Mann

Dharma321 “This guy is the bomb”

SusieSue “When I met Eze...”

Write your own

Ezequiel Vidra@ San Francisco, CA

Write

Add as Contact

ProjectPM

Date

Ask PeopleEzequiel VidraJuly 2, 2007 Version 03

Beta

— TrendsBack to Pro�le

Logged as AJeeves

Log Out

Manage your Pro�leManage your Contacts

About Contact Blog Support Help

2006 Line Graph

Ezequiel Vidra

Subscribe toEzequiel’s Trends

Con�denceMeter

What is this?

January

February

March AprilMay

June

July

August

September

October

November

December

10

20

30

40

50 Contacted 50 timesin July 2007

60

70

80

90

100

110

120

130

Pro�le ViewedContent Added

Contacted

More Statistics: Searches onEzequiel Vidra: 8

Pro�le views: 5

Updates to pro�le: 8Last: March 25, 2007

Ezequiel Vidra@ San Francisco, CA

Write

Add as Contact

ask.zippage 068 of 070

A S K . C O MD E S I G N M A N A G E M E N T , P R O D U C T & U X2007

Good UX des ign requ ires good UX processes , gu idel ines and management . These documents are sample of such .

P O R T F O L I O 1 . 0

gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng

© Dav id Gómez-Rosado . 1994-2008 dav id@gomez-rosado .com

ProjectPM

Date

Ask PeopleEzequiel VidraJuly 2, 2007 Version 03

Ezequiel Vidra

Zoom In

Zoom Out

Logged as AJeeves

Log Out

Manage your Pro�leManage your Contacts

About Contact Blog Support Help

1

234

Tel Aviv. Israel1989-1995

Buenos Aires. Argentina1978-1982

San Francisco, CAPresent New York, NY

2004-2007

See the original!

Sources forgeo-tagged media

Beta

— SightingsBack to Pro�le

Subscribe toEzequiel’s Sightings

More

Photos Videos News

Con�denceMeter

What is this?

Ezequiel Vidra@ San Francisco, CA

Write

Add as Contact

ProjectPM

Date

Ask PeopleEzequiel VidraJuly 2, 2007 Version 03

Zoom In

Zoom Out

Invite to connect!

Networks youhave in common

Logged as AJeeves

Log Out

Manage your Pro�leManage your Contacts

About Contact Blog Support Help

Beta

— ConnectionsBack to Pro�le

Ask.comSan Francisco, CA

Web 2.0New York, NY

Israel EntrepreneursTel Aviv, Israel

Sacha PearsonSan Francisco, CA

Vlad SachenkoSan Francisco, CA

Will ReadSan Francisco, CA

David Gómez-RosadoSan Francisco, CA

Ezequiel VidraSan Francisco, CA

Ezequiel Vidra

Subscribe toEzequiel’s Connections

Con�denceMeter

What is this?

Ezequiel Vidra@ San Francisco, CA

Write

Add as Contact

page 069 of 070 ask.zip

A S K . C O MD E S I G N M A N A G E M E N T , P R O D U C T & U X2007

Good UX des ign requ ires good UX processes , gu idel ines and management . These documents are sample of such .