Trouvée Website Document by Kim Sang

“Trouvée”, the French word for the sense of found, is the main brand of those who set their life quest for your beauty, the beauty that you can achieve from the day Trouvée got your trust. Trouvée is a collection of elite accessories and jewelries from brands and designers. Sophistication with a meticulous selection is what Trouvée does, for the elegance and the charm of the modern women to be “found”. Hopefully when it comes to Trouvée, every woman finds herself, you find yourself, a beauty. Trouvée Team.

ACKNOWLEDGE MENT Carrying out this E-project is really an interesting part of our youth and the way to the final results is such an unforgettable journey with tons of ups and downs. These acknowledgements would be written in respect to those who have accompanied with us during this journey. To the greatest extent, we would love to express our heartfelt thanks to people who gave me assistance to make this project possible. We set our heart on sending deepest gratitude and gratefulness to ourr honorable mentor, Mr. Phan Nhật Trung, for his valuable advice and constructive comments during project, especially the continuous recalling us about deadline. We also want to embrace thankfulness to Mr. Nguyễn Trí Thông for laying the foundation of our Website knowledge. Our gratitude also goes to all lecturers, staffs and other colleagues for their helps over two semesters studying at Arena Multimedia Ho Chi Minh.

SOMETHING TO SAY This E-project is conducted with our enthusiasms in about one month. It is such fascinating yet challenging journey. We experienced the whole process of building a brand & website. From the idea searching, moodboard building, concept creating for this brand & its website to the process of making them possible (including photography, designs, illustrations, color palettes, textures, descriptive words), all of these are completed with our endless efforts. When making this document, we dedicated ourrselves to making it clear & consistent in terms of information and selected concepts. We hope that you not only read about this E-project, but enjoy it as well.

06 08 26 MOODBOARD

LOGO

SITEMAP

Moodboard

Main Logo Logo Inspiration Typeface Clear-space Rule Color Logo on Grid Proper Use Improper Use Minimum size Branding

Sitemap/ User Flow

28 WEBSITE

Web Content Web Fonts Web Color System Web Intro Clip Wireframe Web Buttons Bootstrap Grid System Web Layout

62 70 RESPONSIVE WEB

CREDIT

Ipad Iphone

Group Members Mentor Colleages Softwares Websites

Moodboard

Elegant.

MODERN.

charming.

LOGO

M A I N L O G O

The trouvĂŠe brand includes the words, phrases, symbols, designs and other distinctive brand features associated with trouvĂŠe and our services.

WORDMARK Wordmark logos are all about keeping it simple. We decided to use styled text logos that spell out our brand name.

L O G O

I N S P I R A T I O N

When text is the main attraction in a logo, color is a great way to differentiate your brand and draw the eye in.

TROUVEE /tru:vê/

The word ‘trouvee’ originated from French, which means ‘tìm thấy’ in Vietnamese.

BLACK

I N S P I R A T I O N

Brands that employ logos in black are usually secure and deep-rooted. They don’t feel a need to call a lot of attention to themselves. They may believe that their reputation speaks for them and they don’t need colors to convey their power, stability, and value.

L O G O

As mysterious as the shadows, black is the absence of colors. But it doesn’t give you absent feelings, rather, black shows strength, authority, sophistication, and elegance.

TYPE

ag LIGHT LIGHT ITALIC REGULAR ITALIC BOLD BOLD ITALIC

Garamond is a group of many old-style serif typefaces, named after XVI century Parisian engraver Claude Garamond.

T Y P E F A C E

Garamond is considered the go-to in old-style serif typefaces. This is a typeface that can look elegant & formal while still being highly readable.

Upon the introduction of the Macintosh in 1984, Apple adopted a new corporate font called Apple Garamond. It is a variation of ITC Garamond, condensed to 80% of normal width.

Apple Garamond

Q i

A B C D E F G H I J K L M N O P Q R S T U V WX Y Z 3 4

[

]

(

)

{

} <

;

“

†

ﬁ

9 0

> ^ ‡

T Y P E F A C E

R U L E C L E A R - S P A C E

x/2

Always position the logo for maximum impact and give it plenty of room to breathe. This will help to ensure our logoâ&#x20AC;&#x2122;s visibility and legibility. The minimum clear space for trouvĂŠe logo is defined as the height of logo (defined as x).

FLAT BLACK/ STANDARD BLACK RGB 0 0 0 H ex # 0 00 00 0 CMYK black, or the 100K mentioned previously is great for text, allowing for a crisp and sharp reproduction.

C O L O R 17

75.52°

75.52° 1.5 a

1.9 a 0.27 a

3.3 a 2.2 a

2.25 a

G R I D

1.2 a

O N

1.6 a

11.9 a a

1.85 a

1.65 a

Logo is specified with black on white background for the best performance.

In the case of black background, please use the white alter.

P R O P E R

For other solid-colored backgrounds, please use alter that results a significant constrast.

U S E 19

DO NOT STRETCH

I M P R O P E R

U S E

DO NOT USE AS A PATTERN

DO NOT ALTER COLOR (Not specified in Proper Use)

DO NOT ADD-IN OTHERS GRAPHIC ELEMENTS

DO NOT DISTORT I M P R O P E R U S E

DO NOT PLACE ON A COMPLICATED BACKGROUND

M I N I M U M

S I Z E

PRINT In print, do not use the logo with the width smaller than 15mm

DIGITAL

When reproducing the trouvĂŠe logo in print, the minimum size of logo is 15mm. For online use, the minimum size is 200 pixels at 72 dpi.

S I Z E

To make sure the logo is always clear and legible, there is a minimum size requirement.

M I N I M U M

Online, do not use the logo smaller than 200px at 72 dpi

B R A N D I N G

B R A N D I N G 25

Sitemap

S I T E M A P 27

Website

MAGAZINE

Contains a brief description about our brand, a showcase of our best and latest events, introduction of our featured products

Comprises 8 subpages highlighting our products categorized by its features

Exhibits articles involving the styles, the accessory trends over the world.

MIX&MATCH

SALE

MY TROUVÉE

A showcase of our hints for your mix&match our products with your outfits.

Highlights latest & upcoming promotions

Includes 4 sections that help customer manage their accounts and make it convenience for their shopping, sorted by

ABOUT US

SHOPPING BAG

A story of our brand.

Manage products in cart

- Account Information - My orders - Favorites - Viewed products

CONTACT

CHECK OUT

TROUVÉE&ME

Includes our contact information & map

Finalize your order process

Contain customers’ feeback & how they mix&match our accessories.

C O N T E N T

PRODUCT

W E B

HOME

HELP Gives our guidances for your purchase & exchange products

light display medium medium italic bold

C O L O R S

# 000000 R0 G0 B0

Strong, impressive yet elegant, flat black is used titles, text & graphic elements on website

# ffffff R255 G255 B255

Associated with light, goodness, innocence, purity, and virginity, white is considered to be the color of perfection. Therefore it is recommended to become website background body.

W E B

C O L O R

S Y S T E M

P R I M A R Y

S U P L E M E N T A R Y

# 171717 R23 G23 B23

S Y S T E M

# f0f0f0 R240 G240 B240

C O L O R

# d6d6d6 R214 G214 B214

W E B

# 1b1b1b R27 G27 B27

To make high unity, we choose the grey with its different shades for other web elements.

C O L O R S

W E B

I N T R O

C L I P

scene 1

scene 2

scene 3

In a scene, every pictures of that scene appears inturn.

C L I P

Then the pictures altogether show again & are covered by a transpatrent theme. Next, the subject of that scene comes into sight. The sequences would be applied to the others.

I N T R O

Each keyworks of trouvĂŠe brand is performed by 1 scene from scene 1 to scene 3 of clip.

W E B

scene 4

In the last scene, 3 pictures representing 3 keywords fly. A transparent hover would be added and finally, the logo with 3 keywords would turn out. 35

W I R E F R A M E

H O M E P A G E

W I R E F R A M E 37

VIEW DETAIL

nomal status

hover

W E B

B U T T O N S

VIEW DETAIL

nomal status

hover

Back-to-top button

W E B B U T T O N S

nomal status

hover

B O O T S T R A P

G R I D

S Y S T E M

B O O T S T R A P

G R I D

S Y S T E M 41

W E B S I T E

L A Y O U T

W E B

L A Y O U T 43

W E B

L A Y O U T

H O M E P A G E

H E A D E R

H O M E P A G E

LOGO Top Left Menu

H E A D E R

Navigates end-user back to main page.

Go to MAGAZINE section

Main Menu

Gives access to sections of Accessories, Bag, Headwear, Footwear, and Sales; with a finish touch of Mix & Match section.

Helps end-user navigate to all items, sections, shopping instructions and articles, etc. by inserting related keywords followed with pressing the Magnifying Glass icon.

L A Y O U T

Gives access to functions of Account, Log In, Favorites and Shopping Bag. The bar navigates end-user to manage their personal information and related issues, such as shopping list and unfinished cargos, in the most convenient manner.

W E B

Top Right Menu

W E B

L A Y O U T

H O M E P A G E

S L I D E R

H O M E P A G E

SLIDER

S L I D E R

Consists of the main banners of the homepage, which highlight main events, promotions and corporational announcements. Banners are interactable in ways of dragging left/right, clicking on either ends navigation button and clicking on any spot or button on the banner to move to landing pages.

W E B L A Y O U T 47

W E B

L A Y O U T

H O M E P A G E

C O U N T D O W N

H O M E P A G E

COUNTDOWN

C O U N T D O W N

A clock that counts to the date of special promotions. This function is to bring up enthusiasm between customers and stimulate them about the sale.

W E B L A Y O U T 49

W E B

L A Y O U T

H O M E P A G E

B A N N E R S

H O M E P A G E

BANNERS

B A N N E R S

Three small banners represent important web portals, or small, regular promotions or other important information but do not want to stand out like banner full.

W E B L A Y O U T 51

W E B

L A Y O U T

H O M E P A G E

F E A T U R E D

P R O D U C T S

H O M E P A G E

Trouvée Website Document

Articles inside

Our work