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 Responsive Sources
Interface design Project 2 Book Promotional Website
1 3 4 6 7 8 9 12 18 19 38 40
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
noonebelongsheremorethanyou.com
revisedfundamentalsofcaregiving.com
gillian-flynn.com/dark-places/
harrypotter.scholastic.com
lionofwar.com/new/novel/
isaacmarion.com/warm-bodies/
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
prabaharancs.com
bagigia.com
michelbergerbooze.com
egopop.net
Clockwise from Left: Prabaharan CS, Bagigia, Michelberger Booze, Ego Pop Interface design Project 2 Book Promotional Website
4
INSPIRATIONAL WEBSITES
head2heart.us
ascensionlatorre.com
johanreinhold.com
hbogo.com
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
The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789!@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789!@#$%^&*() EXTRA LIGHT • LIGHT • REGULAR • BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789!@#$%^&*()
MICHROMA
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 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
29
Interface design Project 2 Book Promotional Website
30
responsive
Interface design Project 2 Book Promotional Website
38
responsive
Interface design Project 2 Book Promotional Website
39
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
40