Students will build these websites in Lesson 4, but this lesson will involve some preparatory work, so let's go over the overall project now.
Objectives
- Create a responsive one-page website with a variety of content.
- Present narrative content in an engaging way that makes the reader want to scroll through the site.
- Develop a cohesive visual design based around the website's content; including colors, typography, and images.
Choosing a Subject
The subject of the website is up to you, but should be some sort of narrative with a beginning, middle, and end. This should work well with a one-page website since it already has a linear structure. Some possible subjects could include:
- A short story — shorter is probably better so you can focus more on the graphic use of large text.
- A poem — do people still read poetry?
- A tutorial — Teach us how to do something! This could be a fun way to include diagrams and other media content.
- An infographic — Illustrator is great for making graphs and charts. Focus on using visual design to make the content engaging.
- A tour — Lead us on a tour of your hometown, past vacation spot, or fantasy setting.
- ???
Requirements
The final site will be a functioning one-page site created in Adobe Muse. It should include:
- A header with a title and navigation menu
- 5 or more content sections
- At least 2 images
- A footer with your name and credits for any found media used in the site.
Why a One-Page Site?
One-page sites are a popular approach to designing websites; they work especially well with mobile devices where it's easier to scroll through one long page than navigate between several different pages.
This should also be an easier introduction to using Adobe Muse, since we won't have to deal with connecting multiple pages. We'll focus on multiple page sites and navigation in Unit 3.
Working with a single page should also encourage you to think of the website as a unified picture. When you first create the layout in Adobe Illustrator, it should be easy to see the whole site at once and create a cohesive design.
Some inspiration:
One Page Love — a showcase of sites with one-page layouts.
Scroll-focused websites and infographics — utilizing scrolling as an "interactive" way to engage with content.
Upside-down home pages — A data-driven look at why it's okay to put important content at the bottom of your site.