asterios polyp

42
Interface design Project 2 Book Promotional Website

Upload: brooke-martin

Post on 31-Mar-2016

271 views

Category:

Documents


2 download

DESCRIPTION

Graphic Novel promotional website

TRANSCRIPT

Page 1: Asterios Polyp

Interface design Project 2Book Promotional Website

Page 2: Asterios Polyp

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

Page 3: Asterios Polyp

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.

Page 4: Asterios Polyp

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.

Page 5: Asterios Polyp

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

Page 6: Asterios Polyp

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

Page 7: Asterios Polyp

Interface design Project 2Book Promotional Website 5

INSPIRATIONAL WEBSITES

Clockwise from Left:Head2Heart,AscensionLatorre,HBOGo,JohanReinhold

head2heart.us ascensionlatorre.com

hbogo.comjohanreinhold.com

Page 8: Asterios Polyp

Interface design Project 2Book Promotional Website 6

MOOD BOARD

boy Meets girl

Page 9: Asterios Polyp

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

Page 10: Asterios Polyp

Interface design Project 2Book Promotional Website 8

site map

Page 11: Asterios Polyp

Interface design Project 2Book Promotional Website 9

WIREFRAME SKETCHES

Page 12: Asterios Polyp

Interface design Project 2Book Promotional Website 10

WIREFRAME SKETCHES

Page 13: Asterios Polyp

Interface design Project 2Book Promotional Website 11

WIREFRAME SKETCHES

Page 14: Asterios Polyp

Interface design Project 2Book Promotional Website 12

lo-fisHOME

Page 15: Asterios Polyp

Interface design Project 2Book Promotional Website 13

lo-fisHOME- HIDING NAV

Page 16: Asterios Polyp

Interface design Project 2Book Promotional Website 14

lo-fisABOUT THE BOOKW

Page 17: Asterios Polyp

Interface design Project 2Book Promotional Website 15

lo-fisCHARACTERS

Page 18: Asterios Polyp

Interface design Project 2Book Promotional Website 16

lo-fisABOUT THE AUTHOR

Page 19: Asterios Polyp

Interface design Project 2Book Promotional Website 17

lo-fisTOURING- NEWS

Page 20: Asterios Polyp

Interface design Project 2Book Promotional Website 18

hi fisHOME

1366x768 pixels

Page 21: Asterios Polyp
Page 22: Asterios Polyp
Page 23: Asterios Polyp
Page 24: Asterios Polyp
Page 25: Asterios Polyp
Page 26: Asterios Polyp
Page 27: Asterios Polyp
Page 28: Asterios Polyp
Page 29: Asterios Polyp
Page 30: Asterios Polyp
Page 31: Asterios Polyp

Interface design Project 2Book Promotional Website 29

Page 32: Asterios Polyp

Interface design Project 2Book Promotional Website 30

Page 33: Asterios Polyp
Page 34: Asterios Polyp
Page 35: Asterios Polyp
Page 36: Asterios Polyp
Page 37: Asterios Polyp
Page 38: Asterios Polyp
Page 39: Asterios Polyp
Page 40: Asterios Polyp

Interface design Project 2Book Promotional Website 38

responsive

Page 41: Asterios Polyp

Interface design Project 2Book Promotional Website 39

responsive

Page 42: Asterios Polyp

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