Website
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
Unsatisfactory | Basic | Competent | Professional | |
---|---|---|---|---|
Layout | The layout is either cluttered or sparse. | The layout gives sufficient space to all elements, … | … organizing them in an aesthetic manner … | … that fosters readability and instant recognition. |
Color | Color is not used or is distracting, disharmonious, or confusing. | Color is used in a non-distracting manner … | … that enhances visibility … | … and enhances meaning and aesthetics. |
Graphics | Graphics are not used or are poorly constructed, not discernible, or distracting. | Original graphics are used (e.g., illustrations, graphs, icons) … | … that are clearly discernible … | … and improve aesthetics or enhance meaning in a professional-looking manner. |
Font | Fonts are not used or are inappropriate, inconsistent, or frequently changing. | Appropriate fonts and text sizes are used … | … in a consistent manner … | … that only changes to enhance meaning. |
Navigation | Navigation elements are not used or are poorly constructed. | Necessary navigation elements are clearly discernible, … | … logical, intuitive, … | … and complete. |
User Pathways | User pathways are ill-conceived, incomplete, or non-intuitive. | User pathways clearly exist … | … that are intuitive … | … and efficient. |
Scope | The mockup contains fewer than six pages of content. | The mockup includes six or more pages of content but does not include one or more of the required pages listed above. | - | The mockup includes six or more pages of content, including the pages described in the requirements above. |
Presentation | The mockup is not presented in a manner that allows for user navigation. | The mockup is uploaded and shared in a manner that allows for user navigation … | - | … and all of the links work to allow the user to make their way through the mockup in a fully functional manner. |

CC BY: This work is released under a CC BY license, which means that you are free to do with it as you please as long as you properly attribute it.
End-of-Chapter Survey
: How would you rate the overall quality of this chapter?- Very Low Quality
- Low Quality
- Moderate Quality
- High Quality
- Very High Quality