David Gómez-Rosado Portfolio - Brand Experience by David Gómez-Rosado

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Identity 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

david@gomez-rosado.com

Project Client Document Date Design Info

2003

MiTV IDENTITY BRAND & PRODUCT STRATEGY

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Identity 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

Project Client Document Date Design Info

Logo Versioning and Usage

Logo Design

MiTV Product Design NetGem S.A. MiTV Identity 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

Oﬃcial Brand Colors

The chromatic selection is easily recognizable. Its additive composition (color primitives originated by the three RGB basic phosphors in the cathode tube of a TV monitor) becomes here self-referential. A clear and direct allusion to the universe painted by both television and computers. La selección cromática es fácilmente reconocible. Su composición aditiva (colores primitivos originados por los tres fósforos básicos RGB en el tubo catódico de un monitor de TV:) aquí se convierte en auto-referencial. Una alusión clara y directa al universo plasmado por ambos la televisión y los ordenadores.

The ﬁnal proposal clearly reinforces the attributes of the product as a tool for communication and exchange. With an abstract vocabulary, this brand works with only three lines... three “cables or connectors” that spring from the logotype. Three channels that own the very same basic colors that television works with: the electronic RGB rays of the cathode tube. Through this, the ideas of connection and interconnection fuse with the medium of television. The lines, in addition to generating unity and totality as a symbol, reinforce the concept that thanks to MiTV, its user is connected to everything and everyone. The yellow color in the name completes the fourth dimension of the MiTV interface. That of Help... The point of support for the other three types of interaction: Experience (Red), Customization (Green) and Connection (Blue).

La propuesta ﬁnal refuerza claramente los atributos del producto como herramienta de comunicación e intercambio. Con un vocabulario abstracto, esta marca trabaja solamente con tres líneas... tres "cables o conectores" que surgen del logotipo. Tres vías que poseen los mismos colores básicos con los que trabaja la televisión: los rayos electrónicos RGB del tubo catódico.

Logo Construction and Proportion

Con ello, las ideas de conexión e interconexión se fusionan con el medio de la televisión. Las líneas, además de generar unidad y totalidad como símbolo, refuerzan el concepto de que gracias a MiTV, su usuario está conectado a todo y a todos. El color amarillo del nombre completa la cuarta dimensión del interfaz MiTV. La de Ayuda ... El punto de apoyo para los otros tres tipos de interacción: Experiencia (Rojo), Personalización (Verde) y Conexión (Azul).

10.35x

page 01 of 08

Project Client Document Date Design Info

The different applications of the logo will remain loyal to the spectrum of television. That is, the brand will always be tinted by the RGB colors that are handled in a TV or computer screen. Every version accentuates a different characteristic in MiTV: Three sub-brands applicable to three different attitudes of the product. Each one, with its own color and emphasizing a specific “connector” that springs from the unifying dot on top of the letter “i” (as ambassador to the concept of “interactive”). Thanks to this chromatic strategy, the global brand remains solid.

La diferentes aplicaciones del logo se mantendrán fieles al espectro de la televisión. Es decir, la marca siempre estará teñida por los colores RGB que se manejan en la pantalla de una TV u ordenador. Todas las versiones acentúan una característica diferente de MiTV: Tres sub-marcas aplicables a tres diferentes actitudes del producto. Cada una, con su color y enfatizando un “conector” especifico que surge del punto unificador de la letra “i” (como embajadora del concepto “interactivo”). Gracias a esta estrategia cromática, la marca global permanece sólida.

PANTONE 376 C

BLACK 30%

CMYK composición: 0% C, 95% M, 100% Y, 0% K

CMYK composición: 50% C, 0% M, 100% Y, 0% K

CMYK composición: 0% C, 0% M, 0%Y, 30% K

RGB composición: 255 R, 17 G, 0 B

RGB composición: 127 R, 195 G, 28 B

RGB composición: 179 R, 179 G, 179 B

HEX composición (web): #FF1100

HEX composición (web): #7FC31C

HEX composición (web): #B3B3B3

PANTONE 660 C

PANTONE 376 C

CMYK composición: 90% C, 57% M, 0%Y, 0% K

CMYK composición: 0% C, 16% M, 100% Y, 0% K

RGB composición: 36 R, 74 G, 159 B

RGB composición: 255 R, 214 G, 0 B

HEX composición (web): #244A9F

HEX composición (web): #FFD600

page 04 of 08

page 03 of 08

30º

PANTONE 485 C

5.35x

MiTV Product Design NetGem S.A. MiTV Identity 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

5.5x 12.75x Oﬃcial Brand Typography

Logo: Dogma Bold

Typographical test (11 pt.)

ABCDEFGHUJKLMNO PQRSTUVWXYZÁÉÍÓÚ abcdefghijklmno pqrstuvwxyzáéíóú 1234567890 -$%&(.,;:""¡!¿?)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing

Text: NetGem Sans Regular

Typographical test (11 pt.)

ABCDEFGHUJKLMNO PQRSTUVWXYZÁÉÍÓÚ abcdefghijklmno pqrstuvwxyzáéíóú 1234567890 -$%&(.,;:""¡!¿?)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,

Lorem ipsum The basis of the brand is the logotype, that is, the letters of its own name. From the dot on top of the “i”, depart three curved lines or “connectors”. The contrast between these and the rigidity of the typography accentuates its conﬁdent modernity: Solid and steady in nature, dynamic and agile in style. Such formal characteristics shall obviously translate to the perception of MiTV as a product.

La base de la marca es el logotipo, es decir, las letras de su nombre. A partir del punto de la "i", salen tres líneas curvas o “conectores”. El contraste entre estas y la rigidez de la tipografía acentúan su conﬁada modernidad: Sólido y permanente en naturaleza, dinámico y ágil en estilo. Dichas características formales obviamente se trasladarán a la percepción de MiTV como producto.

Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.

page 02 of 08

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

page 05 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 0 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

mitv_brand.zip

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Avatars 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

david@gomez-rosado.com

Project Client Document Date Design Info

2003

MiTV COMMUNICATION VISUAL STRATEGY & INTERACTION

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Avatars 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

MiTV Family – Roig

MiTV Family – Amalia

pantone 19-9 process C-0 M-3 Y-10 K-3 R-246 G-236 B-220 #F6ECDC

pantone 38-7 process C-0 M-20 Y-35 K-10 R-229 G-190 B-153 #E5BE99

pantone 46-3 process C-10 M-50 Y-85 K-0 R-225 G-143 B-65 #E18F41

Happy pantone 485 C C-0 M-95 Y-100 K-0 R-255 G-17 B-0 #FF1100

Feliz

Explaining

Explicando

Exultant

MiTV Family – Communication Strategy

Feliz

Explaining

Explicando

Exultant

Verdi

Exultante

pantone NEGRO C-0 M-0 Y-0 K-100 R-0 G-0 B-0 #000000

Pensive

Pensativo

Surprised

Sorprendido

Receptive

Receptivo

page 03 of 10

MiTV Product Design NetGem S.A. MiTV Avatars 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

DIGITAL TV

INFO

Roig represents the services of Digital Television: The basic package the product gets distributed with. TV Guide, Services, Games and MiTV management are part of his responsibilities.

Amalia acts as the helping hand of MiTV at any moment when the user is in need of additional information or further detail at a given task. Do you wish to know how the “time-shifting” feature works? Press the yellow button and Amalia shall explain it immediately.

Roig representa los servicios de televisión digital: El paquete básico con el que se distribuye el producto. Guía TV, Servicios, Juegos y gestión de MiTV son parte de sus responsabilidades.

MiTV Family – Verdi

pantone 38-7 process C-0 M-20 Y-35 K-10 R-229 G-190 B-153 #E5BE99

pantone 46-3 process C-10 M-50 Y-85 K-0 R-225 G-143 B-65 #E18F41

Happy

Feliz

Explaining

Explicando

Exultant

Exultante

pantone 376 C C-50 M-0 Y-100 K-0 R-127 G-195 B-28 #7FC31C

pantone 281-1 process C-90 M-0 Y-100 K-40 R-0 G-117 B-52 #007534

pantone 350 C-79 M-0 Y-87 K-76 R-33 G-81 B-52 #215134

pantone NEGRO C-0 M-0 Y-0 K-100 R-0 G-0 B-0 #000000

Pensive

Pensativo

Surprised

Sorprendido

Receptive

Receptivo

Pensive

Pensativo

Surprised

OPTIONS

CONECTA

Verdi gathers the most advanced among MiTV features. By just calling him, you will access the additional options to each basic function. Verdi shall explain how to attach a picture to an e-mail message, how to program the recording of a TV channel, etc.

Zula is the added value of connectivity for the MiTV receptor that will sell as a separate package. She gathers all the capabilities associated with content sharing: From Internet access, to email use, to the publishing of images, videos and sounds.

Verdi reune la parte más avanzada de todas las prestaciones de MiTV. Con solo llamarle, accederás a opciones añadidas a todas las funciones básicas. Verdi explicará como se añade una foto a un correo, como se programa la grabación de un canal de TV, etc.

Zula es el valor añadido de la conectividad en el receptor de MiTV que se venderá como un paquete separado. Ella reúne todas las prestaciones asociadas con el intercambio de contenidos: Desde el acceso a Internet, al uso de correo, a la publicación de imágenes, vídeos y sonidos.

Receptive

Receptivo

page 01 of 10

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Avatars 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

MiTV Family – Zula

Zula

MiTV Product Design NetGem S.A. MiTV Avatars 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

MiTV Family – Nacho

pantone 19-9 process C-0 M-3 Y-10 K-3 R-246 G-236 B-220 #F6ECDC

pantone 38-7 process C-0 M-20 Y-35 K-10 R-229 G-190 B-153 #E5BE99

pantone 46-3 process C-10 M-50 Y-85 K-0 R-225 G-143 B-65 #E18F41

Happy

Feliz

Explaining

Explicando

Pensativo

Surprised

Sorprendido

Exultant

Exultante

Receptive

Receptivo

Happy

Explaining

Explicando

Pensativo

Surprised

Sorprendido

Exultant

Exultante

Receptive

Receptivo

pantone 229-4 C-70 M-5 Y-5 K-0 R-9 G-183 B-225 #09B7E1

pantone 231-3 C-80 M-5 Y-5 K-30 R-0 G-134 B-170 #0086AA

pantone NEGRO C-0 M-0 Y-0 K-100 R-0 G-0 B-0 #000000

Pensive

page 07 of 10

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 code

Feliz

pantone 660-C C-90 M-57 Y-0 K-0 R-36 G-74 B-159 #244A9F

page 02 of 10

design direction

Sorprendido

page 04 of 10

page 06 of 10

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

La familia MiTV ha sido diseñada para la integración total con el interfaz del producto. Todo personaje adopta la labor de embajador a cada uno de los cuatro colores que protagonizan tanto en el software como el hardware. Esta identiﬁcación mimética se continua con sus nombres, evocadores de sus respectivos colores para ayudar como recursos mnemotécnicos a la hora de navegar los servicios y prestaciones. El estilo de las ﬁguras es moderno y ágil, con cada uno de los miembros adoptando un fragmento de la identidad corporativa de MiTV.

pantone NEGRO C-0 M-0 Y-0 K-100 R-0 G-0 B-0 #000000

page 05 of 10

p a g e 0 0 9 o f 070

Amalia

Amalia actúa como la ayuda de MiTV en cualquier momento que el usuario necesite información adicional o una explicación más detallada de la labor siendo realizada. ¿Quieres saber como funciona el "time-shifting"? Presiona el botón amarillo y Amalia te lo explicará de inmediato.

Verdi

pantone 19-9 process C-0 M-3 Y-10 K-3 R-246 G-236 B-220 #F6ECDC

pantone 8-1 C-0 M-20 Y-100 K-40 R-168 G-135 B-2 #A88702

Amalia

Roig

The MiTV family is designed for a total integration with the product interface. Every character adopts an ambassador role to each of the four colors that predominate both in the software and the hardware. This mimetic identiﬁcation continues with their given names, evocative each of their respective color so to help as a mnemonic resource when it is time to navigate through services and features. The style of the ﬁgures is modern and agile, with each of the members adopting a fragment of the MiTV corporate identity.

pantone 2-1 C-0 M-5 Y-100 K-10 R-236 G-209 B-0 #ECD100

pantone 76-1 C-0 M-100 Y-100 K-40 R-158 G-11 B-14 #9E0B0E

Project Client Document Date Design Info

Zula

pantone 376 C C-0 M-16 Y-100 K-0 R-255 G-214 B-0 #FFD600

pantone 177 C-0 M-47 Y-43 K-0 R-255 G-127 B-142 #FF7F8E

MiTV Product Design NetGem S.A. MiTV Avatars 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

MiTV Family

Happy

Exultante

Project Client Document Date Design Info

MiTV Product Design NetGem S.A. MiTV Avatars 02b July 19, 2004 Lobe Multimedia S.L. www.lobemultimedia.com

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

mitv_avatars.pdf

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2004

COMUNYCARSE BRAND EXPERIENCE COMMUNICATIONS, BRAND & UI

B ra n d a n d m a r k e t i n g s t ra te g y fo r a m e dium-sized Document M a n a g e m e n t S o f t w a r e c o m p a n y i n M a d rid & Barcelona p a g e 0 1 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

comunycarse.zip

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2004

COMUNYCARSE BRAND EXPERIENCE COMMUNICATIONS, BRAND & UI

detail

detail B ra n d a n d m a r k e t i n g s t ra te g y fo r a m e dium-sized Document M a n a g e m e n t S o f t w a r e c o m p a n y i n M a d rid & Barcelona p a g e 0 1 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

comunycarse.zip

david@gomez-rosado.com

2003

Corporate identity manual Client: Verónica Lillo-Roith Brand proposal 1 04.10.03

LILLO-ROITH CONSULTANCY KNOWLEDGE MANAGER

Corporate identity manual C l i e n t : Ve r ó n i c a L i l l o - R o i t h Brand proposal 1 04.10.03

The mark - The brand

Official font Modula Regular

abcedfghijklmno pqrstuvwxyzáéíóú ABCDEFGHIJKLMNO PQRSTUVWXYZÁÉÍÓÚ 1234567890 -$%&(.,;:""¡!¿?) Construction and proportion

Verdana Regualr

11x

The chosen logo is inspired on the wings of imagination as they spread from the initials of Verónica Lillo-Roith, a relationship interaction consultant which bases her professional practice on the constant exercise of such.

spreading the wings of imagination

page 01

4.75x 1.5x

abcedfghijklmn opqrstuvwxyzáéíóú ABCDEFGHIJKLMN O P Q R S T U VW X Y Z Á É Í Ó Ú 1234567890 - $ % &( ., ; : " " ¡ !¿ ? )

Typographical test (11 pt.) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dol or si t amet, consetetur sadipsci ng elitr, sed diam nonumy eirmod tempor invidunt ut l abore et dol ore magna al i quyam erat, sed diam vol uptua. At vero eos et accusam et justo duo dol ores et ea rebum. Stet cli ta kasd gubergren, no sea takimata sanctus est Lorem ipsum dol or si t amet. Lorem i psum dol or sit amet, consetetur

page 04

Corporate identity manual C l i e n t : Ve r ó n i c a L i l l o - R o i t h Brand proposal 1 04.10.03

project management... with a twist 0.5x 4.5x

Official color palette

2.5x 0.5x

The selection of a green hue for its official negative background supports a perception of fresh ideas and innovative perspective.

0.5x 8x

The green implies growth, optimism, potential, promise.

0.5x 16.5x The source of the mark proportions is a mirroring geometry. It prides itself on the purity of its symmetry and it rejoices on its exact modular nature achieved by recycling a single form: The symbol of "detour from lineal thought".

Feugait duis nisl et augue, facilisis ut eros te augue ut wisi, consequatvel feugait eros ut velit.

Feugait duis nisl et augue, facilisis ut eros te augue ut wisi, consequatvel feugait eros ut velit. Tation enim consequat, feugait elit exerci et nulla vel enim. Nisl dolor aliquip veniam blandit lorem consequat iriuredolor nisl. Dolore lorem wisi iusto illum commodo nisl lobortis suscipit enim dignissim. Feugait blandit, magna ipsum, wisi ex consequat nisl vel eros vulputate.

Ut consequat praesent vulputate dolor luptatum, iusto at ut et nisl accumsan duis at. Iriure suscipit dolore, vero dolor crisare feugait enim, in et. Te consequat, vero consequat suscipit facilisis luptatum ut ullamcorper dolore et ad vulputate amet ea lobortis consequat ex luptatum. Ut nibh diam erat nostrud luptatum ut at iusto sed facilisi lorem delenit illum eu euismod vulputate exerci consequat. Veniam et feugait et, praesent dolor in, adipiscing molestie feugait feugiat. Iriuredolor feugiat ut feugiat augue facilisi vel odio at consequatvel ut, et sit nisl delenit. Suscipit eu feugait ex vel aliquam enim esse commodo, consequat in, consequatvel ex lobortis? Illum enim minim in feugait dignissim vel odio dolore vel luptatum dolore euismod, et facilisis illum eum nostrud esse wisi quis.

Dolor tation ad, et illum tation. Ut duis minim eum duis augue lobortis augue vel eum qui, nibh praesent in velit magna vel dignissim molestie hendrerit. Esse facilisi consequat facilisis volutpat, iusto exerci consequat nisl dolore amet veniam ea, autem lobortis ad dolore magna quis commodo hendrerit nulla duis consequatvel feugiat. Consectetuer augue, dolore veniam dolore ad diam ut consequat lobortis nisl duis. Autem ut wisi delenit illum, qui tincidunt consequat duis facilisi nostrud nibh feugiat. Wisi ullamcorper ipsum et consequat dolore delenit nisl veniam iriuredolor tincidunt elit dignissim hendrerit diam delenit dignissim suscipit nostrud illum?

detour from lineal thought

Odio tincidunt, ex molestie dignissim commodo duis quis diam blandit odio lorem. Delenit ex qui commodo nulla iriuredolor augue adipiscing duis delenit suscipit iriure? Blandit dolore crisare et sciurus erat ullamcorper wisi feugait dolor ut esse feugiat dolore ut? Delenit minim ad ut hendrerit illum facilisis feugait adipiscing ut iusto ut consequatvel esse dolore autem duis. At quis in, nulla eu minim tation facilisis at, accumsan vulputate. Nulla vel sit elit vero consequat sed? Minim crisare qui et ad. Lorem iusto te, feugait delenit iusto exerci illum duis at, illum augue at accumsan ut. Dolore wisi et blandit delenit dolore nostrud. Magna crisare consequat veniam minim illum praesent nisl et ex. At nulla nisl dolore ea ut nulla vulputate tation nulla veniam. Te dignissim feugait ut laoreet sciurus blandit molestie.

Eum magna molestie consequat te. Nostrud molestie, sit velit quis dolor nulla aliquam in hendrerit vero iusto. Erat lorem feugiat nulla feugait vel feugait dolore nulla aliquam commodo ut feugait minim in feugiat facilisis, quis vero tation aliquip molestie. Hendrerit eu, feugiat et laoreet wisi magna sciurus nulla facilisi aliquam molestie ex facilisis luptatum facilisis nulla commodo. Minim et, aliquam nisl qui nisl ad dignissim in ipsum dolore qui facilisi exerci dolore ullamcorper molestie facilisis duis delenit.

page 02 page 03

B ra n d , w e b a n d m a r k e t i n g s t ra te g y fo r a Knowledge M a n a g e m e n t c o n s u lt a n t i n G e r m a n y page 018 of 0

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

design direction

PORTFOLIO 1.0 code

i n te ra c t i o n

design

writing

gomez-rosado.com

lillo-roith.zip

david@gomez-rosado.com

2004

TANQUERAY BRAND EXPERIENCE LIGHTING & FURNISHING

B ra n d e x p e r i e n c e d e s i g n fo r a s e r i e s o f club events to c e l b ra te Ta n q u e ra y ’ s p e r s p e c t i v e i n e n tertainment p a g e 0 1 9 o f 070

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

design direction

PORTFOLIO 1.0 code

i n te ra c t i o n

design

writing

gomez-rosado.com tanqueray.zip

david@gomez-rosado.com

2004

TANQUERAY BRAND EXPERIENCE LIGHTING & FURNISHING

B ra n d e x p e r i e n c e d e s i g n fo r a s e r i e s o f club events to c e l b ra te Ta n q u e ra y ’ s p e r s p e c t i v e i n e n tertainment p a g e 0 2 0 o f 070

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

design direction

PORTFOLIO 1.0 code

i n te ra c t i o n

design

writing

gomez-rosado.com tanqueray.zip

david@gomez-rosado.com

2004

TANQUERAY BRAND EXPERIENCE LIGHTING & FURNISHING

B ra n d e x p e r i e n c e d e s i g n fo r a s e r i e s o f club events to c e l b ra te Ta n q u e ra y ’ s p e r s p e c t i v e i n e n tertainment p a g e 0 2 1 o f 070

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

design direction

PORTFOLIO 1.0 code

i n te ra c t i o n

design

writing

gomez-rosado.com tanqueray.zip

david@gomez-rosado.com

2004

TANQUERAY BRAND EXPERIENCE LIGHTING & FURNISHING

B ra n d e x p e r i e n c e d e s i g n fo r a s e r i e s o f club events to c e l b ra te Ta n q u e ra y ’ s p e r s p e c t i v e i n e n tertainment p a g e 0 2 2 o f 070

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

design direction

PORTFOLIO 1.0 code

i n te ra c t i o n

design

writing

gomez-rosado.com tanqueray.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 3 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

NIKE.COM GUIDELINES WEB, ECOMMERCE & CREATIVE GROUP ORG

50 pixels 20 pixels The color of the swoosh can be: Please notice on left the proportions and placement of the swoosh in EVERY page or pop-up featuring Nike-related content.

11 pixels 40 pixels

18 pixels 11 pixels

1 pixel

1-pixel WHITE line is only required when color of swoosh banner differs from that of background.

White on colored background.

The secondary hue of the page, on any color background.

Web-safe equivalent of Nike Red (PMS 485C or R=255; G=0; B=0), on white background.

Nike Digital uses the Banner approach, with a white 1-pixel thick line separating it from the rest of the content page.

All through Niketown Online, the same technique is applied

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 2 9 o f 070

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

design direction

code

On the Nike.com homepage the swoosh stands alone without the divisor line.

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

nike.zip

david@gomez-rosado.com

2001

nike_id

NIKE.COM GUIDELINES WEB, ECOMMERCE & CREATIVE GROUP ORG

crashandlearn

nikegoddess

Nike.com • Home page

somefeature

Nike.com • Feature

somesection

somefeature

Nike.com • 2nd. level feature

somesection somecategory somefeature

Nike.com • 3rd. level feature

All text: R G B

= = =

0 0 0

R G B

= = =

51 51 51

R G B

= = =

102 102 102

R G B

= = =

153 153 153

Your web-safe color of choice (Feature predominant recommended.)

User Experience guidelines, design and strategy for Nike.com and its U.S. Web store. Leading a team of 37 professionals p a g e 0 3 0 o f 070

Examples

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

All Nike initiatives in the web have to feature a unified locator banner frame, with a distinctive color coding of your choosing.

techlab hockey nike_id nikegoddess

acg

area_x

crashandlearn nikeshox When Nike features have their own subfeatures, please apply the 2nd. level tab within the locator banner, as to provide with a clear navigation path to our users.

nike_digital

hypecentral

Same solution applies to regional and country home pages. Even if they own their own domain name, for redundancy of entry points can be put in effect.

canada usa europe hockey japan

U s e r E x p e r i e n c e g u i delines, design and strategy for Nike.com a n d i t s U . S . W e b s tore. Leading a team of 37 professionals p a g e 0 3 1 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

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

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

Graphics

HTML

headline

Avenir Black, 12 point, 16 lead, 80/100 track ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

headline

subhead

Avenir Medium, 12 point, 16 lead, 80/100 track ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

subhead

body

Avenir Book, 12 point, 16 lead, 80/100 track ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

body

The official Typeface of Nike, Inc. is also the official font of Nike.com. To be used both in printed business stationary, and on graphic-based online copy and headlines.

Verdana is the default choice for HTML text. With Arial as second choice, Helvetica as third, Courier as fourth.

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 3 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

2001

NIKE.COM GUIDELINES WEB, ECOMMERCE & CREATIVE GROUP ORG

Background White r:255 g:255 b:255

Site Basics

Nike Red (PMS 485C) r:204 g:51 b:0 Locator Banner Gray r:51 g:51 b:51 Text Black r:0 g:0 b:0

Store

Store Main, Shopping, My Account, Information r:255 g:102 b:0

Store Main, Shopping, My Account, Information r:102 g:102 b:102

Store Main, Shopping, My Account, Information r:255 g:153 b:51

Sport r:204 153 b:0

Sport r:255 g:255 b:153

Sport r:255 g:204 b:0

Men / Women / Kids r:51 g:153 b:255

Men / Women / Kids r:205 g:255 b:255

Men / Women / Kids r:51 g:153 b:255

Specialty r:102 g:153 b:51

Specialty r:204 g:255 b:153

Specialty r:102 g:153 b:51

Primary

Accent

Background

Any of the 216 colors of the Web-safe palette can be used for background and major solid areas of Nike initiatives.

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

nike.zip

漏 David G贸mez-Rosado. 1994-2007

david@gomez-rosado.com

2001

NIKE.COM GUIDELINES WEB, ECOMMERCE & CREATIVE GROUP ORG

inspirational text photoshop guidelines

Fill is Eurostile Bold Oblique 43 point 40 tracking 36 leading White 48% opacity. Normal blending mode.

The outline is the same except the font is Eurostile Bold outline and it's two layers on top of each other: Top layer at 48 opacity Bottom at 100 opacity with Drop Shadow layer effect: Blur 4 Distance 0 Opacity 75 Intensity 42 Usage of a detail picture of the product OR of the product in action (situational), as the background of the banner. THEN an overlapping smaller image of the full product on top (with slight Drop Shadow to pull it apart).

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 4 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

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 43 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

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

ylos.zip

david@gomez-rosado.com

Projecto Cliente Documento Fecha Diseño Info

2003

EMOBLA MARKET RESEARCH, BRAND & UX

Projecto Cliente Documento Fecha Diseño Info

Arquitectura Emobla.com Emobla Desarrollos S.L. Emobla Identidad 02 Febrero 17, 2005 Lobe Multimedia S.L. www.lobemultimedia.com

Projecto Cliente Documento Fecha Diseño Info

Arquitectura Emobla.com Emobla Desarrollos S.L. Emobla Identidad 02 Febrero 17, 2005 Lobe Multimedia S.L. www.lobemultimedia.com

Colores de Marca Oﬁcial - Emobla.com

Diseño de Identidad

La gama de colores ha sido escogida para desmarcarse de la competencia... Utilizando tonalidades que marcarán identidad al futuro de emobla.com y sus iniciativas asociadas. La selección cromática es fácilmente reconocible. Tonalidades frescas y vitales. Una alusión clara y directa a la ilusión de un proyecto ambicioso que habrá de llamar la atención en los medios donde se publicite. Su principal estragia: El impacto... Pero el impacto por simpatía.

Construcción y Proporción 6,75x

y y

La identidad de Emobla apunta claramente a la industria en la que se mueve.

mientras enuncia nuevamente el negocio principal. Deja claro ambos la función y el mercado objetivo de la compañía.

El símbolo surge de la unión entre la abstracción del símbolo arquetípico de la industria del mobiliario (la silla) y un estilismo de la letra “M”. Combinando ese aspecto con unos colores dinámicos y una tipografía contemporánea propone su orientación a los nuevos medios.

Es directo y “al grano”… pero con un guiño sutil. Da mucho juego a su promoción y publicidad (Ejemplo: “¿Has emoblado ya tu empresa?”). No es lo mismo “amoblar” con cualquiera… que “emoblar” con emobla. Ayuda a diferenciar lo que aparentemente sería la misma acción.

El eslogan aﬁrma la correcta lectura del nombre y convierte el servicio en un verbo

Emobla = Amoblar + Económico + Electrónica + Emoción.

PANTONE 123 C

PANTONE 144 C

CMYK composición: 0% C, 24% M, 94% Y, 0% K

CMYK composición: 0% C, 48% M, 100% Y, 0% K

RGB composición: 255 R, 194 G, 17 B

RGB composición: 255 R, 133 G, 28 B

HEX composición (web): #FFC211

HEX composición (web): #FF8500

PANTONE 382 C

BLACK 20%

CMYK composición: 0% C, 29% M, 100%Y, 0% K

CMYK composición: 0% C, 0% M, 0%Y, 20% K

RGB composición: 181 R, 220 G, 16 B

RGB composición: 204 R, 204 G, 204 B

HEX composición (web): #B5DC10

HEX composición (web): #CCCCCC

30º y

página 01 de 06

1,94x

realidad

arquetipo abstracción

fusión

estilo

prototípo

página 04 de 06

1,5x Projecto Cliente Documento Fecha Diseño Info

Arquitectura Emobla.com Emobla Desarrollos S.L. Emobla Identidad 02 Febrero 17, 2005 Lobe Multimedia S.L. www.lobemultimedia.com

60º

Projecto Cliente Documento Fecha Diseño Info

Arquitectura Emobla.com Emobla Desarrollos S.L. Emobla Identidad 02 Febrero 17, 2005 Lobe Multimedia S.L. www.lobemultimedia.com

2y 0,25x

0,25x 0,25x

Colores de Marca Oﬁcial - Emobla.net

Los colores del otro lado del servicio emobla (emobla.net) son por definición los harmónicos a los oficiales en el espectro colorímetro. Las tonalidades contrastan suficientemente con las anteriores, pero aún así comparten la misma frescura y optimismo. De hecho, cada servicio comparte un color de la paleta del otro que predominará como color secundario, asegurando con este juego una lectura fácil de reciprocidad y simbiosis entre ambos emoblas.

PANTONE 382 C

PANTONE 376 C

CMYK composición: 0% C, 29% M, 100%Y, 0% K

CMYK composición: 50% C, 0% M, 100% Y, 0% K

RGB composición: 181 R, 220 G, 16 B

RGB composición: 127 R, 195 G, 28 B

HEX composición (web): #B5DC10

HEX composición (web): #7FC31C

PANTONE 123 C

BLACK 40%

CMYK composición: 0% C, 24% M, 94% Y, 0% K

CMYK composición: 0% C, 0% M, 0%Y, 40% K

RGB composición: 255 R, 194 G, 17 B

RGB composición: 153 R, 153 G, 153 B

HEX composición (web): #FFC211

HEX composición (web): #999999

La tipografía (BaseMono Wide Regular) ha sido seleccionada entre varias candidatas por su rotundidad (geometría precisa y grosor sólido), originalidad (poco usadas por otras compañías) y su carácter contemporáneo (sin serifas). Su lectura va más allá de la palabra “emobla” que deletrea. Nos dice “actual”, “nuevo”, “conﬁado”, “sobrio”.

Y la esfericidad de “b” y “a” “o”, e incluso "e" han sido pronunciadas para mayor énfasis del sentido de la precisión y su asociativo “calidad”. El hueco en las letras invita a entrar en el servicio y la invisibilidad de algunas de las superﬁcies de la silla ayuda a hacer más legible la “M” intrínseca en su axonometría.

La “m” es substituida con un símbolo representativo de la industria.

Tipografía de Marca Oﬁcial

Versiones

emobla.com - 3 Colores

emobla.com - Grises

emobla.com - Blanco

emobla.com - Negro

página 02 de 06 página 05 de 06

emobla.com - 1 Color

F i r s t o f i t s k i n d i n S p a i n , a f u l l y c u s to mized, search-enabled o f f i c e e q u i p m e n t w e b p o r t a l : U X , b ra n d and market research u x a r q u i te c t u r e

design direction

code

Prueba Tipográﬁca (10 pt.)

ABCDEFGHUJKLMNOPQRSTU VWXYZÁÉÍÓÚabcdefghijk lmnopqrstuvwxyzáéíóú 1234567890 -$%&(.,;:""¡!¿?)

Emobla Texto - Formata Regular

Prueba Tipográﬁca (10 pt.)

ABCDEFGHUJKLMNOPQRSTU VWXYZÁÉÍÓÚabcdefghijk lmnopqrstuvwxyzáéíóú 1234567890 -$%&(.,;:""¡!¿?)

Emobla Web - Verdna Regular

Prueba Tipográﬁca (10 pt.)

ABCDEFGHUJKLMNOPQRSTU VWXYZÁÉÍÓÚabcdefghijk lmnopqrstuvwxyzáéíóú 1234567890 -$%&(.,;:""¡!¿?)

página 06 de 06

página 03 de 06

p a g e 0 5 1 o f 070

emobla.net - 2 Colores

Emobla Título - BaseMono Wide Regular

PORTFOLIO 1.0 i n te ra c t i o n

design

writing

gomez-rosado.com

emobla_brand.zip

david@gomez-rosado.com

2003

LOBE BUSINESS STRATEGY, IDENTITY

0.75 X

9.5 X

45º 11º

11º 14 X

15.5 X

5X 11º

3.5 X 11º 0.75 X 0.5 X

0.5 X

13.75 X 23 X

24.5 X

C o m p le te u s e r e x p e r i e n c e a n d c o r p o ra te identity for this c o m p a n y i n S p a i n o f fe r i n g m u lt i m e d i a s olutions p a g e 0 6 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

lobe.pdf