Project I

Introduction

The goal of this project is to create a responsive website design based on the 1985 Pulitzer-prize winning story “Life on the Land.” Before you start designing, you will want to read this five-part series by John Sanford.

For the purpose of this project, we are going to imagine the New York Times is hiring you to design a multimedia website for this written story. You will create wireframes and color comps with a color scheme and text treatment that is consistent with the content of the site that you are creating. You should use the assets provided, and you need to design a layout with typography and color scheme that you believe fits with the project. It should be professional and look like it could appear on the New York Times.

Requirements

There are a total of 14 required art boards:

  • Table of Contents Art Board
  • Style Tile Art Board
  • Mobile Wireframe
    • 1 Mobile Home Page Wireframe Art Board
    • 2 Mobile Inside Page Wireframe Art Boards
  • Desktop Wireframe
    • 1 Desktop Home Page Wireframe Art Board
    • 2 Desktop Inside Page Wireframe Art Boards
  • Mobile Prototype
    • 1 Mobile Home Page Prototype Art Board
    • 2 Mobile Inside Page Prototype Art Boards
  • Desktop Prototype
    • 1 Desktop Home Page Prototype Art Board
    • 2 Desktop Inside Page Prototype Art Boards

There should be one (1) XD project with at fourteen (14) art boards. I recommend you create the wireframes first, then duplicate each one and work off them to build your color comps. Design the entire page; that includes scrolling content below the bottom border each art board. Include enough content to show the design for your chosen section of the story; you can indicate the existence of the extra text by fading it out at the bottom, adding a ‘read more’ button, etc. It’s up to you.

Please annotate your wireframes to help explain any UI/UX features that cannot be demonstrated with XD prototyping methods. Before you conclude that something cannot be done in XD, do a quick Google and also ask me before writing an annotation. I will deduct points if you make an annotation for some interactive element that could have been modeled in XD.

Be creative but tasteful. Usability is paramount.

You will also do a one-page writeup about why you chose to design the site the way you did. Explain your creative decisions regarding the interactive features, color scheme, typography choices, layout, and style.

Process

I highly recommend following this process when working on this project.

Table of Contents

Plan out your project so that all of the required art boards are wired up by default.

Wireframes

Start by making the wireframes for the mobile versions of your homepage and interior pages. Then make the desktop versions of the home and interior pages’ wireframes. You should have two sets of wireframes, one for mobile and one for desktop, each with at least three art boards.

Style Tile

Consider the brand of this client. Decide the fonts for your heading, subheading, and paragraph text. Design repeating components like navbars, buttons, sliders, cards, etc. Express these succinctly using a style tile.

Prototype

Go to prototype view and start with your mobile wireframes. Connect the homepage frame to the interior pages and back. Link to other art boards as needed to demonstrate the functionality of hamburger menus, carousels, animation, etc. Then do the same for the desktop wireframes, mobile prototypes, and desktop prototypes.

Writeup

Write a one-page document that explains your web design choices. I want to see that you’ve read the story, considered its themes, and thought about how to best tell the story. Ask yourself the following questions and answer them, in brief prose, in your writeup:

  • Who is my audience?
  • What elements would appeal to that audience?
  • What is my competition (i.e. similar projects)?
  • How does my visual design fit the themes of the story while staying consistent with my chosen branding?
  • What purpose do my interactive features serve? How do they help tell the story?

Assets

The actual content that will populate the site / design. Located under resources in Sakai.

Title

The title of the topic article.

Subtitle

Text that is no longer that a sentence that gives more detail.

Introduction

A paragraph discussing the purpose of the site.

Images

Located under resources in Sakai. For custom topics, source these from Unsplash and other royalty free websites.

Image Resources

These pages need to be included in your navigation menu, but don’t necessarily need to be created as art boards. You should probably pick two of them for your inside pages.

  • Story
  • About
  • Photo Gallery
  • Timeline
  • Video Interview

Submission

If you organize your project in the way described above, you should be able to share everything with a single link. Please paste that link in the Sakai submission box, attach your Adobe XD file, and attach your writeup as a PDF.

Go to Sakai