What makes a good website, and how can I design my own?
Instructional VideoBootstrapAdobeGoogle Material DesignUser Interface Design KitsAdobe IllustratorInvisionPublicaJquery MobileUser Interaction

website example

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.

websites should value appeal, then retention, then comprehensionIn 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.


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



Tutorial Videos

Colorful Gradient Web UI Design in Adobe illustrator

Watch on YouTube

Illustrator Tutorial: How to Design Webpage

Watch on YouTube

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.

This content is provided to you freely by BYU Open Learning Network.

Access it online or download it at