Art 324, Fall 2015
1
Matchbook
Client Brief The assignment is to redesign the website of Matchbook magazine through a process of research, concept, and development.
2
Art 324, Fall 2015
3
Matchbook
Phase A: Creative Brief
4
Art 324, Fall 2015
5
Matchbook
Project Statement I wish to redesign the website of Matchbook magazine, a combination of the magazine itself, online articles, and daily feeds, in a way that clearly displays their wealth of information while utilizing a clear form of navigation. The concept for the redesign is to accurately mirror the users, young women who are inspired to study culture and get educated on what interests them. This woman is confident and vibrant, but classic.
Company Overview From the existing site: “Matchbook is an online lifestyle publication celebrating classics - shaken and stirred. Our monthly issues cover past and present fashion, decor, the arts, travel and culture. Brimming with intriguing interviews, stately homes, captivating memoirs and swoon-worthy fashion spreads, matchbook seeks to inspire women around the globe to design a life they adore. From lipstick to letterpress, gelato to grosgrain, and Paris to Peru, consider us your field guide to a charmed life.� Audience The perceived audience is mainly young women, around the age of 18-25.
6
Art 324, Fall 2015
Objectives 1. To create visual hierarchy in a classic but vibrant way through color, type treatment, and organization to mirror the female viewers. 2. To create a feminine website that presents the content as the “classics - shaken but stirred�. 3. To create a website that feels feminine, but confident and empowering.
Message Statement I desire to create an engaging, minimal but not simple, well organized site that gives the impression of strong femininity, confidence, and education.
7
Matchbook
Phase B: Competitor Audit Audit competition to see what is effective and what is not. For this project, I observed other sites with a mainly a young, female audience.
8
Art 324, Fall 2015
9
Matchbook Pinterest A website with a very similar audience was Pinterest. Matchbook needed to show a wealth of information in an organized manner, something Pinterest allows its users to do. Matchbook has other things to offer as well, so only utilizing a Pinterest-like layout wouldn’t be enough.
10
Art 324, Fall 2015 Cosmopolitan Cosmopolitan was one of the major female-minded magazines. In navigating their site, there was so much content, it becomes disorganized. This is something I wanted to avoid with Matchbook.
Sony
11
Matchbook Women’s Health Women’s Health seemed to be the most hip to the young, female audience, even if they do not have the best layout. They are quick to connect their content with social media, which was a great thing to utilize in the Matchbook website.
12
Art 324, Fall 2015
13
Matchbook
Phase C1: Sitemap A road map of the website, indicating every page that could be shown.
14
Art 324, Fall 2015
15
Matchbook matchbook sitemap
matchbook
1.0 Magazine
2.0 Feed
2.1 Fashion
2.2 Beauty
2.3 Decor
2.4 Culture
2.5 Toolbox
16
Art 324, Fall 2015
k-mag.com
3.0 Boutique
4.0 About
3.1 Shop by Story
4.1 Matchbook Girl
3.2 All Products
4.2 Founders
4.3 Press
4.5 Social Media
Home page to include: -Matchbook Logo -Links to 1.0 through 4.0
-New and/or highlighted products, articles, and news -Links to social media and contact information -Search bar and member login
17
Matchbook
Phase C2: Wireframes The bare bones of the website.
18
Art 324, Fall 2015
19
Matchbook
20
Art 324, Fall 2015
21
Matchbook
22
Art 324, Fall 2015
23
Matchbook
24
Art 324, Fall 2015
25
Matchbook
Phase D: Type and Color Studies Research of typefaces, sizes, and weights in addition to color palettes that work with the concept.
26
Art 324, Fall 2015
27
Matchbook For headers, Hoefler Text was being considered because it is an ornamental, decorative typeface. While a little heavy and ornamented for body copy, it could have potentially been used for headers. Didot and Bodoni were both beautiful serif typefaces that are more reminiscent of femininity and luminescence. After much consideration, I went with Bodoni. Didot has certain stroke weights that dissapeared if too small. I preferred the femininity of Bodoni to Hoefler Text when it came down to the two.
Black
Hoefler Text could be a header. 24 Hoefler Text could be a header. 22 Hoefler Text could be a header. 20 Hoefler Text could be a header. 18 Hoefler Text could be a header. 14
Regular
Hoefler Text could be a header. 24 Hoefler Text could be a header. 22 Hoefler Text could be a header. 20 Hoefler Text could be a header. 18 Hoefler Text could be a header. 14
Italic
Hoefler Text could be a header. 24 Hoefler Text could be a header. 22 Hoefler Text could be a header. 20 Hoefler Text could be a header. 18 Hoefler Text could be a header. 14
28
Art 324, Fall 2015
Bold
Didot could be a header. 24 Didot could be a header. 22 Didot could be a header. 20 Didot could be a header. 18 Didot could be a header. 14
Regular
Didot could be a header. 24 Didot could be a header. 22 Didot could be a header. 20 Didot could be a header. 18 Didot could be a header. 14
Italic
Didot could be a header. 24 Didot could be a header. 22 Didot could be a header. 20 Didot could be a header. 18 Didot could be a header. 14
29
Matchbook
Bold
Bodoni could be a header. 24 Bodoni could be a header. 22 Bodoni could be a header. 20 Bodoni could be a header. 18 Bodoni could be a header. 14
Book
Bodoni could be a header. 24 Bodoni could be a header. 22 Bodoni could be a header. 20 Bodoni could be a header. 18 Bodoni could be a header. 14
Book Italic
Bodoni could be a header. 24 Bodoni could be a header. 22 Bodoni could be a header. 20 Bodoni could be a header. 18 Bodoni could be a header. 14
30
Art 324, Fall 2015 Although I considered serif typefaces for stylized headers, I want to use a sans-serif typeface for body copy. This will lend to a more updated, modern, and stylish appearance that better suits a younger, feminine audience. After considering the three, I decided Gill Sans paired best with Bodoni.
Futura
Dae. Accus esequi volorum sit, non porio qui nectent harum et faccaeprae. Mod uta ped minust, utate odi nobit, coribus assimpore odit unt faccuptios del elluptati aut ped et verumquae et atempor suntur magnamet molorae etur aditatis erferor epeles vellaceperis dolorro vendi re dolorum etur sunt offic te sitem adisqui berume idunt laut volorae rferibus aces dolorepero cum, ipientota porepud ignaturis volorepudi occus sequibusciam simust quatus. Berepre ssimagnia doluptatur, quatur? Cati doluptatur anduntorenim vel ipsanti atemporatur sae. Ita autatem. Lor sit, odit lam num re nis debisquam aspicipide proria cusamenda vitem nam as aut quo modisciene omnis aut volupta eruptat. Din
Dae. Accus esequi volorum sit, non porio qui nectent harum et faccaeprae. Mod uta ped minust, utate odi nobit, coribus assimpore odit unt faccuptios del elluptati aut ped et verumquae et atempor suntur magnamet molorae etur aditatis erferor epeles vellaceperis dolorro vendi re dolorum etur sunt offic te sitem adisqui berume idunt laut volorae rferibus aces dolorepero cum, ipientota porepud ignaturis volorepudi occus sequibusciam simust quatus. Berepre ssimagnia doluptatur, quatur? Cati doluptatur anduntorenim vel ipsanti atemporatur sae. Ita autatem. Lor sit, odit lam num re nis debisquam aspicipide proria cusamenda vitem nam as aut quo modisciene omnis aut volupta eruptat. Gill Sans
Dae. Accus esequi volorum sit, non porio qui nectent harum et faccaeprae. Mod uta ped minust, utate odi nobit, coribus assimpore odit unt faccuptios del elluptati aut ped et verumquae et atempor suntur magnamet molorae etur aditatis erferor epeles vellaceperis dolorro vendi re dolorum etur sunt offic te sitem adisqui berume idunt laut volorae rferibus aces dolorepero cum, ipientota porepud ignaturis volorepudi occus sequibusciam simust quatus. Berepre ssimagnia doluptatur, quatur? Cati doluptatur anduntorenim vel ipsanti atemporatur sae. Ita autatem. Lor sit, odit lam num re nis debisquam aspicipide proria cusamenda vitem nam as aut quo modisciene omnis aut volupta eruptat.
31
Matchbook
Feminine “Power” Palette The existing website was simply black and white except for their content. I wanted to bring some color in. This palette represents a power palette of sorts—a feminine power palette. Young women of this generation are independent, strong individuals. Since this site is all about fashionable, educated, confident women, this palette would be well received as indicative of a laid back femme fatale when paired with the content.
32
Art 324, Fall 2015
Purple Palette Another bold color choice, purples of ranging intensities, could have been utilized. Purple is also a feminine color, but unlike pink, is a more posh, mature color. Still feminine, but a much more reserved. For the concept of the young, well-educated, modern woman, I went with the power palette.
33
Matchbook
Phase E: Logo Refinement I did not completely redesign the logo, but I did change the typeface to match the redesign of their site. Their original typeface was extremely similar to Bodoni, so it wasn’t a major change in appearance. However, I did nix the dots and tagline to keep it clean and classy, as well as easy to scale down if need be.
34
Art 324, Fall 2015
35
Matchbook
Original
36
Art 324, Fall 2015
matchbook Revised
37
Matchbook
Phase F: Website Sketches
38
Art 324, Fall 2015
39
Matchbook
40
Art 324, Fall 2015
41
Matchbook
42
Art 324, Fall 2015
43
Matchbook
44
Art 324, Fall 2015
45
Matchbook
Phase G: Grid Development and Initial Layouts
46
Art 324, Fall 2015
47
Matchbook
48
Art 324, Fall 2015
49
Matchbook
50
Art 324, Fall 2015
51
Matchbook
52
Art 324, Fall 2015
53
Matchbook
Phase H: Layout Revisions The final site layouts.
54
Art 324, Fall 2015
55
Matchbook
56
Art 324, Fall 2015
57
Matchbook
58
Art 324, Fall 2015
59
Matchbook
60