Interface design Project 2Book Promotional Website
table of contents
Interface design Project 2Book Promotional Website
Project StatementInspirational Book Sites
Inspirational WebsitesMood Board
Typography Mood BoardSite Map
Wireframe SketchesLo-Fi’s
First CompHi-Fi’s
ResponsiveSources
13467891218193840
PROJECT STATEMENT
Interface design Project 2Book Promotional Website 1
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 comicsThe 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 2Book Promotional Website 2
PROJECT STATEMENTABOUT 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 upendedwhenhisNewYorkCityapartmentgoesupinflames.Inatenaciousdaze,heleavesthecityandrelocatestoasmall 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,andhowhe’sgottentowhereheis.Andisn’t.AndwemeetHana:asweet,smart,first-generationJapaneseAmerican 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:DavidMazzucchellihasbeenmakingcomicshiswholelife.Knownchieflyforhiscollaborations-withFrankMilleronseminalBatmanand 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 theworld.AsteriosPolypishisfirstgraphicnovel.
Interface design Project 2Book Promotional Website 3
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.
noonebelongsheremorethanyou.com gillian-flynn.com/dark-places/ lionofwar.com/new/novel/
isaacmarion.com/warm-bodies/harrypotter.scholastic.comrevisedfundamentalsofcaregiving.com
Interface design Project 2Book Promotional Website 4
INSPIRATIONAL WEBSITES
Clockwise from Left:Prabaharan CS, Bagigia, Michelberger Booze, Ego Pop
prabaharancs.com bagigia.com
egopop.netmichelbergerbooze.com
Interface design Project 2Book Promotional Website 5
INSPIRATIONAL WEBSITES
Clockwise from Left:Head2Heart,AscensionLatorre,HBOGo,JohanReinhold
head2heart.us ascensionlatorre.com
hbogo.comjohanreinhold.com
Interface design Project 2Book Promotional Website 6
MOOD BOARD
boy Meets girl
Interface design Project 2Book Promotional Website 7
TYPOGRAPHY MOOD BOARD
Pantone Black 6CC: 81M: 71Y: 59K: 76
R: 17G: 24B: 32#000000
C: 84M: 100Y: 7K: 5
R: 79G: 0B: 140#
Pantone 801 CC: 100M: 17Y: 7K: 0
R: 0G: 152B: 206#
Pantone 806 CC: 0M: 85Y: 0K: 0
R: 255G: 63B: 180#
Pantone 100 CC: 5M: 1Y: 76K: 0
R: 248G: 235B: 96#
Pantone Medium Purple C
Paper / WhiteC: 0M: 0Y: 0K: 0
R: 255G: 255B: 255#FFFFFF
BOWLBY ONEABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789!@#$%^&*()
UBUNTU CONDENSEDABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789!@#$%^&*()
RAMMETTO ONEABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789!@#$%^&*()
YANONEABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789!@#$%^&*()
EXTRA LIGHT • LIGHT • REGULAR • BOLD
MICHROMAABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789!@#$%^&*()
ARCHIVEThe quick brown fox jumps over the lazy dog.
introThe quick brown fox jumps over the lazy dog.
modThe quick brown fox jumps over the lazy dog.
portalThe quick brown fox
jumps over
the lazy dog�
the bubble lettersThe quick brown fox jumps over the lazy dog.
OVERPRINT
Interface design Project 2Book Promotional Website 8
site map
Interface design Project 2Book Promotional Website 9
WIREFRAME SKETCHES
Interface design Project 2Book Promotional Website 10
WIREFRAME SKETCHES
Interface design Project 2Book Promotional Website 11
WIREFRAME SKETCHES
Interface design Project 2Book Promotional Website 12
lo-fisHOME
Interface design Project 2Book Promotional Website 13
lo-fisHOME- HIDING NAV
Interface design Project 2Book Promotional Website 14
lo-fisABOUT THE BOOKW
Interface design Project 2Book Promotional Website 15
lo-fisCHARACTERS
Interface design Project 2Book Promotional Website 16
lo-fisABOUT THE AUTHOR
Interface design Project 2Book Promotional Website 17
lo-fisTOURING- NEWS
Interface design Project 2Book Promotional Website 18
hi fisHOME
1366x768 pixels
Interface design Project 2Book Promotional Website 29
Interface design Project 2Book Promotional Website 30
Interface design Project 2Book Promotional Website 38
responsive
Interface design Project 2Book Promotional Website 39
responsive
sources
Interface design Project 2Book Promotional Website 40
BOOK
AUTHOR/BOOK BIO & REVIEWS
WEB SAfE fONTS
MOOD BOARD IMAGERY
INSPIRATIONAL BOOK SITES
INSPIRATIONAL WEBSITES
asterios polyp by david mazzucchelli
amazon.com
google.com/webfonts
sketchmyworld.com wallpaperstock.netphotoree.comprairiemrozart.blogspot.comzekek.comslog.thestranger.com artinspired.pbworks.com
noone belongs here more than you noonebelongsheremorethanyou.comdark places gillian-flynn.com/dark-places/day of war lionofwar.com/new/novel/revised fundamentals of caregiving revisedfundamentalsofcaregiving.comharry potter harrypotter.scholastic.comwarm bodies isaacmarion.com/warm-bodies/
prabaharan cs prabaharancs.combagigia bagigia.commichelberger booze michelbergerbooze.comegopop egopop.nethead 2 heart head2heart.usascension latorre ascensionlatorre.comhbo go hbogo.comjohan reinhold johanreinhold.com
origamichicken.comrichiedesign.blogspot.comkallegraphics.comluc.devroye.org/fonts-57841.htmlilovetypography.comwordpress.com