Perhaps the most common way that learning designers now reach their learners is through a website. Websites come in all shapes and sizes and serve all kinds of purposes, but for the learning designer, websites generally serve the purpose of being the shell for the content or learning experience that is being delivered.

In terms of ARC, then, a website's primary function is to appeal to the learner and to get them to stay on the site learning. Comprehension is the least important aspect of ARC for websites, because it is anticipated that comprehension will be focused on through the modules or content in the website and not the website itself. This means that website designs should strive to be clear, sleek, and inviting and should also make it clear to the learner where they are and where they need to go to keep learning. It also means that the design goals and decisions of the website might vary from those of the content, wherein the website focuses on navigation and ease, while leaving the heavylifting of learning to the content being provided, such as an infographic or instructional video.

For this project, you will create a multi-page visual mockup for a website of your choice. You are encouraged to use existing User Interface Design Kits (e.g., Google Material Design, Bootstrap, jQuery UI Mobile, Publica) and your own pre-existing components (e.g., icon library, dashboard, infographic) along with Adobe Illustrator to complete this project.

Task

Create a mockup of your own original website using Adobe Illustrator or another program.

Requirements

• Use a maximum width of 1280px and a minimum height of 800px.
• Create separate artboards for each page.
• Include mockups of at least 6 pages, including the following:
  • 1 homepage;
  • 1 form submission page (e.g., login, account creation);
  • 1 content page (e.g., item catalog, course list);
  • 3 other pages of your choice (e.g., contact, about us, verification).
• When sharing your site, use a program that mimics user interaction and allows your viewer to navigate the site's user pathways, such as InVision or Adobe XD.

Guidelines

• Choose a theme. Color, image, and text choices should be consistent and complementary to your intended theme.
• Represent the user pathway. Choose pages that will allow your viewer to understand the user's pathway through the site.
• Don't overuse stock photos. If a picture is worth a thousand words, then you don't want to just include a novella's worth of gibberish on your site.
• Include content. Though you don't need to create all of the textual content for your site, you can populate it with placeholder text, such as Lorem Ipsum or Bacon Ipsum.
• Don't recreate the wheel. Use existing User Interface Design Kits and Design Guides. This will make your life easier and will also make life easier on your developers, should you ever actually build the site.

Tutorial Videos

Colorful Gradient Web UI Design in Adobe illustrator

Illustrator Tutorial: How to Design Webpage

Evaluation Criteria