Project 2: Book Promotional Website

Course Competencies from GWDA202 Syllabus addressed by this project:

  • Define the principles of Interface Design
  • Describe the principles of design in the context of visual interfaces
  • Describe the relationship between user needs and interface design
  • Apply the principles of design to interfaces
  • Create hierarchies with layout, color, type, and image
  • Combine design elements to communicate the tone and message Apply principles of usability to the design of interfaces
  • Address user needs
  • Create visual hierarchies to guide users through page content
  • Develop wayfinding strategies
  • Solve user-centered design problems with interface design
  • Combine the principles of usability and design to create effective interface systems

Project Description

Your task is to create a design for a proposed web product which will promote a recently published book. Your client is that book’s publishing company. The proposed web promotion launch would coincide with the release date of the book, garnering interest and book sales. You will create a full case study proposal which depicts research, drawn and digital process leading to a high resolution mockup depicting its functions and the program your site will follow. You will locate a book with excellent book cover design which will provide you with the guidelines for styling your site.

Find a book to promote.

Desired choices: 

  1. Have excellent book cover design which gives the designer art direction to follow in styling the web promo. This is most important. Google “Best Book cover design (insert last year)” and you will find several recent compilations.
  2. Are directed at an adult audience. No children’s books.
    Young Adult can be okay if it truly satisfies #1.
  3. Graphic Novel can be okay if it is literature. Think Adrian Tomine, Chris Ware, etc.
  4. Are recent. Published in the last year 
  5. Also consider your understanding of and interest in the book’s story/topic.   
  6. Book research and final choice to be approved by instructor.

Create a full case study/ proposal for a responsive website/mobile interface which will promote this book, incorporating its marketing material: text, images. Overall art direction is derived from the book cover design: Use the same fonts, photo sourcing and overall layout as appropriate to maintain brand consistency with product on shelves.

Pages and features of website should be inventive, creative and go beyond the ordinary to reach readers.

Review the example Book promotional sites at the link in the right sidebar of the pages for this class on scottmansfieldais.com.

Find similar existing book promotional sites and analyze them for their structure. Examine their best marketing practices and adopt those which seem most effective.

Your site will have these features:

  • an ‘about the author’ page
  • excerpt from the book page(s),
  • a cast of characters page (if applicable)
  • an itinerary, schedule of Author appearances – in- store readings
  • a press blurb page. “What the critics are saying”
  • a book trailer: a video embed which functions similar to a movie trailer in promotion of the book or an embedded video of the writer giving a reading
  • a page containing links to buy the book from the largest online retailers. Your task does not include creating a purchasing interface.
  • Prototype Size: Design desktop breakpoint  for a 1280 px w 800 px h viewport
  • Mobile breakpoint size: 414px x 735px.
  • Project will be a created in Muse. 
  • EXCELLENCE: A thoroughly documented case study which depicts the steps to the finished project. An excellent design that is congruent with the book design choices. A site which features content which surprises and delights, and it is clear that the concepts and world of the book have infused the design.

Overall, focus on creating a presentation that will convince your client of the soundness of your proposal and communicates your passion for the book being marketed.


Job 1: Research and explore options for you product and client. Also, review the characteristics of contemporary web design: research competitors and analyze their sites. Endeavor to design for today’s desktop and mobile experience, not 2008.

Job 2: Define the nature of your product (genre) and what is appropriate for this site. Identify your target demographic and create Personas (2).

Job 3: Research and create an inspiration page: What is your project like?

Job 4: Thumbnail sketches, wireframe. Define the regions of activity, requiring different layouts.

Job 5: Configure existing graphic elements to spec to create final high fidelity Desktop and mobile prototype of your website. Document this stage in your case study.

Job 6: Create user testing documentation. Test your prototype with willing subjects in and out of class. Add the test results to your case study. Demonstrate in the case study how the results affected your design.  

Job 7: Iterate. Update your prototype, and document the changes you made and the testing results.

Job 8: Present. Present your project case study in class the final week of class. Professionally present your project to the class and explain how the process and testing/iteration cycle changed your final prototype.

Project case study will be submitted as pdf: 8.5” x 11”, landscape format. print quality
(though not printed), under 10 mb in size.
It will include:

  1. Project Statement. Be sure to include a large scale image of book cover
  2. Three (at least) book promotional websites. Competitive analysis.
    Write an analysis of each: why are we looking at this? What features and choices you drawing from this?
  3. Inspiring Site screen grabs. Sites which influence your design choices (may be non book sites) Write an analysis of each: why are we looking at this? What are you drawing from this?
  4. Create Personae: at least 2. Who are you designing for?
  5. Interface process drawing, sketches
  6. Sitemap.
  7. Style guide: largely-if not entirely derived from the book cover.
  8. Desktop and mobile wireframes. Divs labelled with pixel dimensions or percentages.
  9. Working (proof this) link(s) to hosted Hi fidelity Prototype(s) of desktop and mobile website of full sequence of pages necessary to communicating all of the features of your proposal. This should represent the mobile experience and the desktop experience.
  10. Source image attribution page. Credit your sources- typeface, images.

Schedule

Week 4: 

Full Introduction to project specifications. Research concepts in class. Post three possible books to blog by beginning of next class. Inspiration/competitive analysis: Post two examples of existing book promotional websites, hotlinked and labelled. Post all in blog post titled “P2 Research”

4 points

Week 4-5: 

1. Identify the publisher as client, research the book designer/illustrator for credit attribution. Identify the target audience of the book. From this information you can begin their project statement, 

2. Research other web products which promote specific books (preferably), or authors, examining their branding methods and choices. From this research you will assemble their competitive analysis page.

3. Gather assets: find high resolution version images of book cover, research the typefaces used, or ones similar enough, or congruent with book design.

  1. Begin sketching out ideas.
  2. Collect assets

Project Check due at end of class

2 point

Week 6:

Map site features and structure. Translate sketches to wireframes.
Begin high fidelity prototype in class

Week 7:

Peer Preliminary Critique I. Upload a .pdf of your finished proposal as directed in class.

8 points

Apply feedback to project in lab time. Progress check end of class. Personae discussed and assigned.

2 point

Week 9: 

Peer Preliminary Critique II. Upload a .pdf of your finished proposal as directed in classRound robin printout markup exercise in class.
User testing document assigned.

4 points

Week 10: 

User testing document(s) due

User Testing. Incorporate your results into your case study and iterate accordingly.                   4 points

Week 11: 

Final Case Study pdf due at beginning of class. Upload a .pdf of your finished proposal as directed in class.

Professionally present your project to the class and explain how the process and testing/iteration cycle changed your final prototype.

30 points

Native files submitted : InDesign Case study package, .muse or .xd files, root HTML folder