Moon Case Study 1

Portfolio Site Proposal Spring Moon

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

Concept Statement Users that may visit my site: Art/Creative Directors Hiring Personnel Students Friends Co-Workers Advertising Agencies Instructors Clients Design Firms/Potential Employers

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

What story are you telling?

Do more than just make things. Be compelling, interesting, and fresh. Drive to the edge, and jump off. Don’t be afraid to think outside the box, and just do it!

List the assets you need to persuade the user: 1-2 Package Design 2 Logo/Identity Sets 1 Ad Campaign 2 Interface/Web Design 2 Applied Illustrations

What will users want to see in order to enjoy What categories will you depict in your mockup? their visit to your site?

Portfolio (My best work) Information about me (Resume/Contact)

Intended Audience Potential Employers/Clients

Describe what you need to inform and persuade them of: Promote my: Portfolio and Design Skills Goals of the site: Display my portfolio & attract paying clients My ultimate message/philosophy: “The ability to simplify means to eliminate the unnecessary so that the necessary may speak.” - Hans Hoffman”

Print Design Interactive Media Package Design Identity Design

Concept Statement When designing my portfolio website, my intent will be to deliver a presentation that will best represent my work. I do not want the user to be distracted by the web design and layout, as the whole reason they visited my page was to see my portfolio. My goal is to have the user immediately immersed in my work. Featured work will be displayed on the homepage in categories, in which you could dive deeper if desired.

To summarize, I would like the web design (elements, variations, colors) to be very minimal, so my work will show as the highlight of their visit. The navigation will be extremely evident, so interaction with the web will be a real ease. In terms of color, my palette will be very soft, some neutrals with a pop of color only on hover of certain elements. This will help make the user more aware of their interaction with different features and clickable areas.

MOODBOARD

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

Inspiration

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

Sketches

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

- Gridded/tiled look tells more of a story - Either design could easily be coded to be responsive - B/W photos, color on hover (to keep from clashing) - Can easily keep adding projects - Tiling can appear too busy with too many projects (lack of hierarchy)

Style Guide

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Clean, Cool, crisp design.

COLORS

R 69 g 166 B 180 #45a6b4 TYPOGRAPHY

R 136 g 163 B 167 #88a3a7

R 95 g 143 B 147 #5f8f93

R 147 g 146 B 145 #939291

R 105 g 103 B 105 #696769

Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

CREATIVE CONSIDERATIONS

TEXTURES

Site Map

Sketches

R 70 g 71 B 70 #464746

Site Map HOMEPAGE

Concept Statement Style Guide

Inspiration

Wireframes 1 2 3 4

THE WORK

MOTION

THE GRAPHIC DESIGNER

IDENTITY

THE INFO

INTERACTIVE

ILLUSTRATION

PACKAGE

BOOK & PAGE LAYOUT

RESUME

CONTACT

Moodboard Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

WIREFRAMES

Concept Statement Style Guide

Inspiration

Wireframes 1 2 3 4

Logo 340 X 145 PX

Project 1 under from Section 1 500 X 337 PX

Project 2 under from Section 1 500 X 337 PX

Project 3 under from Section 1 500 X 337 PX

Project 4 under from Section 1 500 X 337 PX

Moodboard Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

WIREFRAMES

Concept Statement Style Guide

Inspiration

Wireframes 1 2 3 4

Logo 340 X 145 PX

Cover Image 295 X 185 PX

Cover Image 295 X 185 PX

Cover Image 295 X 185 PX

Cover Image 295 X 185 PX

Cover Image 295 X 185 PX

Cover Image 295 X 185 PX

Moodboard Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

WIREFRAMES

Concept Statement Style Guide

Inspiration

Wireframes 1 2 3 4

Logo 340 X 145 PX

Full Image 704 X 500 PX

Moodboard Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

WIREFRAMES Logo 340 X 145 PX

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI LANDING PAGE

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI HOVER OVER FEATURED #2

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI HOVER OVER FEATURED #3

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI THE WORK PROJECT PAGE

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI THE WORK HOVER OVER IDENTITY

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI IDENTITY SHOWCASE IMAGE 1

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI IDENTITY SHOWCASE IMAGE 2

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI IDENTITY SHOWCASE IMAGE 3

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI THE GRAPHIC DESIGNER - RESUME

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI THE GRAPHIC DESIGNER - RESUME

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

HOMEPAGE HI-FI THE INFO - CONTACT

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

Sources

Concept Statement Style Guide

Moodboard

Inspiration

Wireframes 1 2 3 4

Site Map

Sketches Sources

Hi-Fi 1 2 3 4 5 6 7 8 9 10 11

“50 Fantastic Examples of Beverage Packaging Design.” 50 Fantastic Examples of Beverage Packaging Design

Comments. Inspiration Feed, 8 Apr. 2011. Web. 20 Jan. 2013.

Casey, Chris. “Web Design Icon Version.2.” Dribbble. N.p., 3 May 2012. Web. 20 Jan. 2013.

Julien Pons : A Graphic Designer Working in Paris & London.” Julien Pons : A Graphic Designer Working in Paris &

London. N.p., n.d. Web. 04 Feb. 2013.

LP Creative’s Portfolio.” LP Creative’s Portfolio. N.p., n.d. Web. 04 Feb. 2013.

“Ploc Media Ltd.” Ploc Media. N.p., n.d. Web. 04 Feb. 2013.

Shim, Thomas. “ The Manifesto.” Motion Graphics Inspiration | #262 | From up North.” From up North. N.p., n.d.

Web. 19 Jan. 2013.

SimonOneLove. “14 Social Badges by ~SimekOneLove on DeviantART.” 14 Social Badges by SimekOneLove on

DeviantART. N.p., n.d. Web. 05 Feb. 2013.