David Gómez-Rosado Portfolio - UI Design

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2006

WINDOWS LIVE HUMAN INTERFACE GUIDELINES

U s e r E x p e r i e n c e Fra m e w o r k & A r c h i te c t ure for the entire n e t w o r k o f W i n d o w s L i v e p r o d u c t s a n d services p a g e 0 0 2 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

microsoft_live.zip

© David Gómez-Rosado. 1994-2007

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Interface 01 July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

david@gomez-rosado.com

Project Client Document Date Design Info

2003

MiTV USER INTERFACE DESIGN & INTERACTION

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Interface 01 July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Interface 01 July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

MiTV Product Design NetGem S.A. MiTV Interface 01 July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

MiTV Interface – MiTV Conecta

MiTV Interface – Home

MiTV Interface – MiTV Conecta Help

Interfaz MiTV – MiTV Conecta

Interfaz MiTV – Inicio

Interfaz MiTV – Ayuda de MiTV Conecta

MiTV Interface – Home Options Interfaz MiTV – Opciones de Inicio

OPCIONES

TV DIGITAL

page 03 of 08

Project Client Document Date Design Info

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.

page 04 of 08

MiTV Product Design NetGem S.A. MiTV Interface 01 July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

Project Client Document Date Design Info

AYUDA

TV DIGITAL

CONECTA

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).

MiTV Product Design NetGem S.A. MiTV Interface 01 July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

page 05 of 08

Project Client Document Date Design Info

OPCIONES

AYUDA

CONECTA

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.

MiTV Product Design NetGem S.A. MiTV Interface 01 July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

MiTV Interface – Email

MiTV Interface – Attach Content II

MiTV Interface – Attach Content I

Interfaz MiTV – Email

Interfaz MiTV – Añadir Contenido II

Interfaz MiTV – Añadir Contenido I

PEN DRIVE Ítem 5 de 25

Más

Navidades 2003 La Familia Casa Rural Picnic Tina Cumple

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.

page 02 of 08

Kiko y sus amigos

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.

Semana Santa 2002

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.

page 06 of 08

page 08 of 08

page 07 of 08

W h e n a Fr e n c h c o m p a n y w a n te d to la u nch a new interactive T V s e t - to p b o x i n S p a i n , t h e y c a m e to us for the full package p a g e 0 1 1 o f 070

u x a r q u i te c t u r e

design direction

code

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.

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

mitv_interface.pdf

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2001

WHITESTONE PRODUCT STRATEGY UI, COMMUNICATION, IDENTITY

T h i s s m a l l c o m p a n y i n S I n g a p o r e n e e d e d a complete refresh in b ra n d , w e b a n d p r o d u c t U X to c o m p e te against the likes of IBM p a g e 0 2 4 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

whitestone.zip

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2001

WHITESTONE PRODUCT STRATEGY UI, COMMUNICATION, IDENTITY

T h i s s m a l l c o m p a n y i n S I n g a p o r e n e e d e d a complete refresh in b ra n d , w e b a n d p r o d u c t U X to c o m p e te against the likes of IBM p a g e 0 2 5 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

whitestone.zip

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2003

WHITESTONE PRODUCT STRATEGY UI, COMUNICATION, IDENTITY

T h i s s o f t w a r e c o m p a n y i n S I n g a p o r e , a f ter succeding with the 1.0 u s e r i n te r fa c e I d i d , c a m e b a c k t w o y e ars later for an upgrade p a g e 0 2 7 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

whitestone.zip

© David Gómez-Rosado. 1994-2007

david@gomez-rosado.com

2001

I REMEMEMBER THE TWERS WEB, DESIGN & INFORMATION GRAPHICS

T h i s s i te , d e v o te d to c o l le c t i n g p e r s o n a l memories about the Tw i n To w e r s , w a s p u b l i s h e d o n M a x B r uinsma’s “Deep Sites” book p a g e 0 2 8 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

remember.zip

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2001

1 pixel

NIKE.COM GUIDELINES WEB, ECOMMERCE & CREATIVE GROUP ORG

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

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).

U s e r E x p e r i e n c e g u i d e l i n e s , d e s i g n a n d strategy for Nike.com a n d i t s U . S . W e b s to r e . L e a d i n g a te a m of 37 professionals page 032 of 0

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

nike.zip

© David Gómez-Rosado. 1994-2007

david@gomez-rosado.com

2001

NIKE.COM GUIDELINES WEB, ECOMMERCE & CREATIVE GROUP ORG

buy it xpress!

CLOSE

CHECKOUT MY ACCOUNT

© NIKE Retail Services, Inc.. 1999-2001

© NIKE Retail Services, Inc.. 1999-2001

tech_lab

BUY IT XPRESS!

U s e r E x p e r i e n c e g u i d e l i n e s , d e s i g n a n d strategy for Nike.com a n d i t s U . S . W e b s to r e . L e a d i n g a te a m of 37 professionals p a g e 0 3 7 o f 070

u x a r q u i te c t u r e

design direction

code

SHOPPING CART

tech_lab

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.

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

nike.zip

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2001

NIKE.COM GUIDELINES WEB, ECOMMERCE & CREATIVE GROUP ORG

R = G = B =

0 0 204

CHECKOUT ADD TO SHOPPING CART SEE THIS IN

Main action button has blue background.

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

CHECKOUT ADD TO SHOPPING CART SEE THIS IN

CHECKOUT ADD TO SHOPPING CART CONTINUE SHOPPING

U s e r E x p e r i e n c e g u i d e l i n e s , d e s i g n a n d strategy for Nike.com a n d i t s U . S . W e b s to r e . L e a d i n g a te a m of 37 professionals p a g e 0 3 8 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

nike.zip

R = G = B =

51 153 255

R = G = B =

102 102 102

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2001

NIKE.COM GUIDELINES WEB, ECOMMERCE & CREATIVE GROUP ORG

UPDATE

CONTINUE SHOPPING

CANCEL ORDER

CHECKOUT

U s e r E x p e r i e n c e g u i d e l i n e s , d e s i g n a n d strategy for Nike.com a n d i t s U . S . W e b s to r e . L e a d i n g a te a m of 37 professionals p a g e 0 3 9 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

nike.zip

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

1999

YLOS ECOMMERCE UI, COMMUNICATION, IDENTITY

T h i s s m a l l c o m p a n y i n N e w J e r s e y n e e ded a complete refresh i n b ra n d , w e b a n d p r o d u c t U X to la u n c h its ecommerce solution p a g e 0 4 2 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

ylos.zip

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2003

GOMEZ-MOLINA ONLINE PORTFOLIO & CMS

P a s s i o n fo r U X c o n t i n u e s a t h o m e a n d on personal projects, g o o d e x a m p le o f t h i s i s t h e w e b s i te w ith CMS for my father p a g e 0 4 5 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

gomez-molina.pdf

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2003

GOMEZ-MOLINA ONLINE PORTFOLIO & CMS

P a s s i o n fo r U X c o n t i n u e s a t h o m e a n d on personal projects, g o o d e x a m p le o f t h i s i s t h e w e b s i te w ith CMS for my father p a g e 0 4 6 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

gomez-molina.pdf

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2003

GOMEZ-MOLINA ONLINE PORTFOLIO & CMS

P a s s i o n fo r U X c o n t i n u e s a t h o m e a n d on personal projects, g o o d e x a m p le o f t h i s i s t h e w e b s i te w ith CMS for my father p a g e 0 4 7 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

gomez-molina.pdf

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2003

GOMEZ-MOLINA ONLINE PORTFOLIO & CMS

P a s s i o n fo r U X c o n t i n u e s a t h o m e a n d on personal projects, g o o d e x a m p le o f t h i s i s t h e w e b s i te w ith CMS for my father p a g e 0 4 8 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

gomez-molina.pdf

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2003

GOMEZ-MOLINA ONLINE PORTFOLIO & CMS

P a s s i o n fo r U X c o n t i n u e s a t h o m e a n d on personal projects, g o o d e x a m p le o f t h i s i s t h e w e b s i te w ith CMS for my father p a g e 0 4 9 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

gomez-molina.pdf

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2003

GOMEZ-MOLINA ONLINE PORTFOLIO & CMS

P a s s i o n fo r U X c o n t i n u e s a t h o m e a n d on personal projects, g o o d e x a m p le o f t h i s i s t h e w e b s i te w ith CMS for my father p a g e 0 5 0 o f 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

gomez-molina.pdf

漏 David G贸mez-Rosado. 1994-2008

david@gomez-rosado.com

2007

ASK.COM DESIGN MANAGEMENT, PRODUCT & UX

G o o d U X d e s i g n r e q u i r e s g o o d U X p r o c e sses, guidelines and m a n a g e m e n t . T h e s e d o c u m e n t s a r e s a m ple of such. page 067 of 070

u x a r q u i te c t u r e

design direction

code

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

ask.zip

david@gomez-rosado.com

Log Out

50 30

Contact

Blog

Support

Help

@ San Diego, CA

10

Joshua Mann

About

@ San Francisco, CA

Project Ask People PM Ezequiel Vidra Date July 2, 2007

Version 03

u x a r q u i te c t u r e

design direction

code

Contact

Blog

r be

r be

De ce m

No ve m

r

to b

be Support

Oc

t us

@ Boston, MA

er

Predro Hernandez

Profile Viewed Content Added Contacted

Help

Version 03

G o o d U X d e s i g n r e q u i r e s g o o d U X p r o c e sses, guidelines and m a n a g e m e n t . T h e s e d o c u m e n t s a r e s a m ple of such. page 068 of 070

Updates to profile: 8 Last: March 25, 2007

20

Sandra Mathews

LinkedIn Users About

Profile views: 5

Contacted 50 times in July 2007

40

pt em

Web 2.0

Assign yours here

Similar People Invite to Connect!

Se

Israelis in San Francisco

Searches on Ezequiel Vidra: 8

ly

nice smart agressive ask manager traveler dreamer techie

More Statistics:

70 60

More

Ask.com

80

Au g

Groups

american

Project Ask People PM Ezequiel Vidra Date July 2, 2007

90

100

Ju

cool tough drunk foolish confused

5 news

Subscribe to Ezequiel’s Trends

Line Graph

120

Ja

web

110

Stuff

Connections

Tags

12

2006

e

Trends

130

Ju n

Profile Viewed Content Added Contacted

254 photos videos

Web 2.0 New York, NY

Logged as AJeeves Manage your Profile Manage your Contacts

What is this?

What is this?

ay

San Francisco, CA Present

— Trends

M

Israel Entrepreneurs Tel Aviv, Israel Ask.com San Francisco, CA

@ San Francisco, CA

Confidence Meter

Back to Profile

il

2006

Ezequiel Vidra

Confidence Meter

Ap r

Write your own

ry

“When I met Eze...”

ua

SusieSue

@ San Francisco, CA

Write

ar y

Ezequiel Vidra — Profile

“This guy is the bomb”

Ezequiel Vidra Add as Contact

Logged as AJeeves Manage your Profile Manage your Contacts

Fe br

Dharma321

More

nu

Comments

Write

Log Out

Beta

Ezequiel Vidra Add as Contact

ASK.COM DESIGN MANAGEMENT, PRODUCT & UX

ar ch

Beta

Sightings

2007

M

© David Gómez-Rosado. 1994-2008

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

ask.zip

© David Gómez-Rosado. 1994-2008

david@gomez-rosado.com

2007

Log Out

Beta

Write

Ezequiel Vidra @ San Francisco, CA

Confidence Meter

Back to Profile

— Sightings

Ezequiel Vidra Add as Contact

Logged as AJeeves Manage your Profile Manage your Contacts

What is this?

Log Out

Beta

Ezequiel Vidra Add as Contact

ASK.COM DESIGN MANAGEMENT, PRODUCT & UX

Write

Ezequiel Vidra @ San Francisco, CA

Back to Profile

— Connections

Subscribe to Ezequiel’s Sightings San Francisco, CA Present New York, NY

Tel Aviv. Israel 1989-1995

2004-2007

4

3

Photos

Videos

Networks you have in common Invite to connect!

Will Read San Francisco, CA

Sources for geo-tagged media See the original!

Ezequiel Vidra San Francisco, CA

David Gómez-Rosado San Francisco, CA

Ask.com San Francisco, CA

1

Web 2.0 New York, NY

Zoom In

Zoom In

More

Zoom Out

Zoom Out About

Contact

Blog

Support

Help

About

Project Ask People PM Ezequiel Vidra Date July 2, 2007

Version 03

Contact

u x a r q u i te c t u r e

design direction

code

Blog

Support

Help

Version 03

G o o d U X d e s i g n r e q u i r e s g o o d U X p r o c e sses, guidelines and m a n a g e m e n t . T h e s e d o c u m e n t s a r e s a m ple of such. page 069 of 070

Logged as AJeeves Manage your Profile Manage your Contacts

Subscribe to Ezequiel’s Connections

Vlad Sachenko San Francisco, CA

News

Buenos Aires. Argentina 1978-1982

Project Ask People PM Ezequiel Vidra Date July 2, 2007

What is this?

Sacha Pearson San Francisco, CA

Israel Entrepreneurs Tel Aviv, Israel

2

Confidence Meter

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

ask.zip