18

Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working
Page 2: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Brand Guidelines

Competitor Research

User Personas

Business / Brand / User Goals

Strategy Statement

Content Outline

Sitemap

Contents

Moodboard

Sketches

Design Comps

Design Refinements

Wireframes

Working Prototype

Page 3: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Brand Guidelines

Color Logo

Black and White Logo

Primary Typeface

Secondary Typeface

Copyeditor Typeface

Colors

Hex: #181818 RGB: (24,24,24)

Hex: #EEEEEE RGB: (238, 238, 238)

Hex: #D51317 RGB: (213, 19, 23)

Hex: #FFEB14RGBa: (255, 235, 20, .8)

Hex: #FFB400RGBa: (255, 180, 0, .8)

Hex: #FF6FFFRGBa: (w .8)

Hex: #8BFFFFRGBa: (139, 255, 255, .8)

Copyeditor Marks

Wordstock is a literary arts festival in downtown Portland, OR presented by Bank of America. The festival features over 100 authors, on-stage events, pop-up readings, writing workshops, and a book-fair.

Frank Ruhl LibreFor headlines, titles, signage, and primary body copy. Text written in this typeface is the only design element which may be highlighted.

Open SansFor body text of secondary importance (clarifying information, large sections of body, etc.). Should never be highlighted.

Patrick HandAlways red. May overlap with highlighted text, but should not be highlighted intentionally.

Page 4: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Competitor Research

Page 5: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Brattleboro Literary Festival

Brattleboro Literary Festival’s website is clean on the surface, but the navigation is minimally effective. It feels a little bit like a hacked wordpress theme. It’s as if the design and content were assembled sep-arately, each with minimal regard to the other. The site features author bios and a schedule of events, two things worth in-corporating into the Wordstock website.

The overall design of the site is minimal, with a mostly black and white colour pal-ette. The site is image-heavy.

Page 6: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Vancouver Writers Fest

The Vancouver Writers Fest website is a tad bland at first glance, but employs beautifully smooth transition animations. The site has a clean, searchable calendar of events. The Vancouver Writers Fest colour palette is bright and playful.

The site navigation is a bit strangely or-ganized, but the website’s content is searchable. That said, a well-organized site with good SEO shouldn’t really need to be searchable from within the site.

Page 7: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Brooklyn Book Festival

The Brooklyn Book Festival website has a few broken features, but is incredibly easy to navigate. The navigation is sim-ple and straightforward, it doesn’t “over-share” or overwhelm. The site’s limited colour palette is bright and welcoming, as is the homepage illustration.

The social media links are pushed a lit-tle too much, as a static fixture along the side of pages.

The authors page is clean and simple to navigate.

Page 8: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Fall for the Book

The Fall for the Book website is function-al, but not particularly beautiful. The site exists not as an online experience, but to answer questions about the festival and get people to the event.

The website has a schedule, but it’s pow-ered by an external plug-in, so it isn’t as clean as the schedule on the Vancouver Writers Fest site. Still, it gets the job done.

Navigational menus are triple tiered in places.

Page 9: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

User Personas

Karen | 44 | Published Children’s Author Residence: Eugene, OR. Marital Status: Married Combined Household Income: $68,000

Karen visits Wordstock yearly, as a way to network with other local authors and publishers. She spends most of her time at the book-fair and workshops.

Devices used: shared desktop computer, personal chromebook, smartphone

Practicality and functionality first, this user will likely become annoyed by any prominent features they perceive as excess.

Tom | 36 | Father of a 5 year-old Residence: Portland, OR. Marital Status: Single Combined Household Income: $43,000

Tom is a recent Portland transplant who’s always looking for good things to do with his kid on the weekends. He’s also looking for ways to become more involved in his new community.

Devices used: laptop, smartphone.

This user is primarily focused on the kid-friendly aspects of the festival, and will be looking for information with that in mind.

Page 10: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Wordstock Goals

Sponsor Goals

User Goals

Strategy Statement

- Attract new voices and visitors to the festival.- Present Wordstock as a multi-purpose festival “for everyone”.- Increase engagement with non-local writers and publishers.- Increase non-local awareness of the Portland literary scene.

- Be seen as part of the local creative and literary scene.- Increase awareness of brand sensitivity and humanity.

- Locate information about the purpose of wordstock- Locate information about event times and locations- Buy tickets

Develop a recognizable web and print presence that will launch Wordstock into national recognition through consistent brand identity application.

Page 11: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Content Outline

Site Map

Book SubmissionsVolunteer Sign Up

Our SupportersBecome a Supporter

Homepage

Past Festivals Participate Supporters Buy TicketsAbout Wordstock

Authors and PresentersOnstage EventsWriting WorkshopsExhibitors & VendorsPartner Events

2017 Events

Page 12: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Moodboard

Page 13: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Sketches

Page 14: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Design Comps

Page 15: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Homepage Mockups

Page 16: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Homepage Revised & Additional Pages

Page 17: Moodboard - Western Washington Universitymyweb.students.wwu.edu/~plagera/360/project-2/project2-process.pdf · Moodboard Sketches Design Comps Design Refinements Wireframes Working

Wireframes