Anderson case study

Page 1

Interface design Project 2 Book Promotional Website


table of contents

Project Statement Inspirational Book Sites Inspirational Websites Mood Board Typography Mood Board Site Map Wireframe Sketches Lo-Fi’s First Comp Hi-Fi’s Sources

Interface design Project 2 Book Promotional Website

1 3 4 6 7 8 9 12 18 19 38


PROJECT STATEMENT PROJECT DESCRIPTION: Create a website to promote the graphic novel, Asterios Polyp. Website needs to be visually similar, but not the same as the book cover. It should offer a link to purchase the book or other books by the same artist as well as an event page that shows tours and upcoming releases. TARGET AUDIENCE: Men ages 24-40, interested in graphic novels as well as intricate stories Women ages 22-30, likes romantic stories as well as comics The target audience is a more mature group as far as age goes, since this graphic novel is not a traditional children’s comic. I would suggest upper to mid twenties for men and lower twenties to early thirties for women. Being a graphic novel and not a comic, it has a storyline that can be be romantic or dramatic. There might as well be an older following of people that follow all of the author’s works that can be considered a secondary target audience. PURPOSE: The purpose of this website is to allow users to read about the novel, characters, and see snip-its from the story as well as to get them to purchase the novel and potentially others by the same author. It will also promote the author’s book tours. OBSTACLES: Keeping the site mature enough for the audience while still using the overall feel and graphic nature of the novel. Convincing the user to purchase the book by showing excerpts without giving it away. Creating a webspace that can be revisited to follow upcoming releases and touring information. STYLE & TONE: Follow style and tone of book cover. Color scheme found in book as pink, blue, yellow, and purple. Utilize strong, geometric typefaces that compliment but do not duplicate the cover title. Experiment with transparency and overprint techniques. Geometric strong shapes meet emotional squiggly shapes. Line drawing. Overall tone should feel logical and straightforward, similar to the tone of the voice in the main character. Architectural and mathematical.

Interface design Project 2 Book Promotional Website

1


PROJECT STATEMENT ABOUT THE BOOK: This graphic novel follows Asterios Polyp, who might be described as logical, rational, and cold. He has his way with woman, leaving a trail of broken hearts behind him. The story moves between the past and the present and shows the reader the true character of Asterios. We meet Hana, who changes everything.

“The triumphant return of one of comics’ greatest talents, with an engrossing story of one man’s search for love, meaning, sanity, and perfect architectural proportions. An epic story long awaited, and well worth the wait.

Meet Asterios Polyp: middle-aged, meagerly successful architect and teacher, aesthete and womanizer, whose life is wholly upended when his New York City apartment goes up in flames. In a tenacious daze, he leaves the city and relocates to a small town in the American heartland. But what is this “escape” really about?

As the story unfolds, moving between the present and the past, we begin to understand this confounding yet fascinating character, and how he’s gotten to where he is. And isn’t. And we meet Hana: a sweet, smart, first-generation Japanese American artist with whom he had made a blissful life. But now she’s gone. Did Asterios do something to drive her away? What has happened to her? Is she even alive? All the questions will be answered, eventually.

In the meantime, we are enthralled by Mazzucchelli’s extraordinarily imagined world of brilliantly conceived eccentrics, sharply observed social mores, and deftly depicted asides on everything from design theory to the nature of human perception. ”

ABOUT THE AUTHOR: David Mazzucchelli has been making comics his whole life. Known chiefly for his collaborations - with Frank Miller on seminal Batman and Daredevil stories, and with Paul Karasik on an adaptation of Paul Auster’s novel, City of Glass - he began publishing his own stories in 1991 in his anthology magazine, Rubber Blanket. Since then his short comics have been published in books and magazines around the world. Asterios Polyp is his first graphic novel.

Interface design Project 2 Book Promotional Website

2


INSPIRATIONAL book sites

Clockwise from Left: Noone Belongs Here More Than You, Dark Places, Day of War, The Revised Fundamentals of Caregiving, Harry Potter (Scholastic), Warm Bodies.

Interface design Project 2 Book Promotional Website

3


INSPIRATIONAL WEBSITES

Clockwise from Left: Prabaharan CS, Bagigia, Michelberger Booze, Ego Pop

Interface design Project 2 Book Promotional Website

4


INSPIRATIONAL WEBSITES

Clockwise from Left: Head 2 Heart, Ascension Latorre, HBO Go, Johan Reinhold Interface design Project 2 Book Promotional Website

5


MOOD BOARD

boy Meets girl Interface design Project 2 Book Promotional Website

6


TYPOGRAPHY MOOD BOARD Pantone Black 6C C: 81 M: 71 Y: 59 K: 76

R: 17 G: 24 B: 32 #000000

M: 100 Y: 7 K: 5

G: 0 B: 140 #

ONE ARCHIVE BOWLBY ABCDEFGHIJKLMNOPQRSTUVWXYZ

The quick brown fox jumps over the lazy dog. Pantone Medium Purple R: 79 CC: 84

Pantone 801 C

OVERPRINT

C: 100 M: 17 Y: 7 K: 0

R: 0 G: 152 B: 206 #

Pantone 806 C C: 0 M: 85 Y: 0 K: 0

R: 255 G: 63 B: 180 #

Pantone 100 C C: 5 M: 1 Y: 76 K: 0

R: 248 G: 235 B: 96 #

Paper / White C: 0 M: 0 Y: 0 K: 0

R: 255 G: 255 B: 255 #FFFFFF

abcdefghijklmnopqrstuvwxyz 123456789!@#$%^&*()

intro

UBUNTU CONDENSED

mod

RAMMETTO ONE

portal

YANONE

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog the bubble letters

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789!@#$%^&*()

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789!@#$%^&*() EXTRA LIGHT • LIGHT • REGULAR • BOLD

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789!@#$%^&*()

MICHROMA

The quick brown ABCDEFGHIJKLMNOPQRSTUVWXYZ fox jumps over abcdefghijklmnopqrstuvwxyz the lazy dog.

123456789!@#$%^&*()

Interface design Project 2 Book Promotional Website

7


site map

Interface design Project 2 Book Promotional Website

8


WIREFRAME SKETCHES

Interface design Project 2 Book Promotional Website

9


WIREFRAME SKETCHES

Interface design Project 2 Book Promotional Website

10


WIREFRAME SKETCHES

Interface design Project 2 Book Promotional Website

11


lo-fis HOME

Interface design Project 2 Book Promotional Website

12


lo-fis

HOME- HIDING NAV

Interface design Project 2 Book Promotional Website

13


lo-fis

ABOUT THE BOOKW

Interface design Project 2 Book Promotional Website

14


lo-fis

CHARACTERS

Interface design Project 2 Book Promotional Website

15


lo-fis

ABOUT THE AUTHOR

Interface design Project 2 Book Promotional Website

16


lo-fis

TOURING- NEWS

Interface design Project 2 Book Promotional Website

17


hi fis

HOME

1366x768 pixels

Interface design Project 2 Book Promotional Website

18


Interface design Project 2 Book Promotional Website

19


Interface design Project 2 Book Promotional Website

20


Interface design Project 2 Book Promotional Website

21


Interface design Project 2 Book Promotional Website

22


Interface design Project 2 Book Promotional Website

23


Interface design Project 2 Book Promotional Website

24


Interface design Project 2 Book Promotional Website

25


Interface design Project 2 Book Promotional Website

26


Interface design Project 2 Book Promotional Website

27


Interface design Project 2 Book Promotional Website

28


Interface design Project 2 Book Promotional Website

29


Interface design Project 2 Book Promotional Website

30


Interface design Project 2 Book Promotional Website

31


Interface design Project 2 Book Promotional Website

32


Interface design Project 2 Book Promotional Website

33


Interface design Project 2 Book Promotional Website

34


Interface design Project 2 Book Promotional Website

35


Interface design Project 2 Book Promotional Website

36


Interface design Project 2 Book Promotional Website

37


sources BOOK asterios polyp by david mazzucchelli AUTHOR/BOOK BIO & REVIEWS amazon.com WEB SAFE FONTS google.com/webfonts MOOD BOARD IMAGERY sketchmyworld.com

wallpaperstock.net photoree.com prairiemrozart.blogspot.com zekek.com slog.thestranger.com artinspired.pbworks.com

INSPIRATIONAL BOOK SITES noone belongs here more than you

dark places day of war revised fundamentals of caregiving harry potter warm bodies

INSPIRATIONAL WEBSITES prabaharan cs bagigia michelberger booze egopop head 2 heart ascension latorre hbo go johan reinhold

Interface design Project 2 Book Promotional Website

origamichicken.com richiedesign.blogspot.com kallegraphics.com luc.devroye.org/fonts-57841.html ilovetypography.com wordpress.com

noonebelongsheremorethanyou.com gillian-flynn.com/dark-places/ lionofwar.com/new/novel/ revisedfundamentalsofcaregiving.com harrypotter.scholastic.com isaacmarion.com/warm-bodies/ prabaharancs.com bagigia.com michelbergerbooze.com egopop.net head2heart.us ascensionlatorre.com hbogo.com johanreinhold.com

38


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.