10 Instructional websites
Five with effective layout, media and appearance
-
- BBC
Although this page is archived and no longer active, it still offers helpful content in an easy-to-read layout. The white space and organized content in a grid makes it appealing. It has a cohesive design with interactive quizzes plus various audio & video lessons.
http://www.bbc.co.uk/languages/french/ - Busuu
Professionally designed site with content organized in small chunks, a lot of white space and consistent use of colors throughout. It’s easy to discern what the site offers.
https://www.busuu.com/en - Khan Academy
Sophisticated aesthetic with organized content and simple 3-color palette. An emoticon is used which helps to identify the site, with the same color used for navigation. Subjects listed at top left help the viewer immediately.
https://www.khanacademy.org/humanities/art-history - TEDEd
This site is visually stunning with a bright-colored palette, textured background in the banner, different types of graphics and illustrations plus an easy-to-understand navigation.
https://ed.ted.com/?utm_campaign=elearningindustry.com&utm_source=%2F8-inspiring-elearning-websites-offer-students-inspiring-educational-alternatives&utm_medium=link - CK12
This site is fun with the whimsical navigation elements, pastel colors, immediate easy-to-read banner. Organized, simple and perfect for the K-12 student audience.
https://www.ck12.org/student/
Additional sites with good content but not designed as effectively - Artyfactory
This site is confusing with a variety of fonts and color use, dated graphic in top left corner and lack of organization.
http://www.artyfactory.com/egyptian_art/egyptian_art_lesson/ancient-egyptian-art-lesson.htm - Free Online Art Classes
This website has so many interesting options however the design doesn’t match the subject matter, nor does it look like it’s been updated recently. One straightforward, sans-serif font is used for the main content and the navigation. There’s not a lot of white space for organization or eye-flow.
http://www.free-online-art-classes.com/ - W3 Schools
Although this site offers many technical tutorials, it’s website lacks visual impact. Only one simple sans-serif font is used, which looks like plain text for coding and only one color is used. There’s not a visual element, such as a different colored navigation or a graphics, that entices the viewer to stay on the site.
https://www.w3schools.com/?utm_campaign=elearningindustry.com&utm_source=%2F8-inspiring-elearning-websites-offer-students-inspiring-educational-alternatives&utm_medium=link - Edutopia
This site lacks visual interest since there aren’t any graphics or anything that gives it visual impact. Its content-heavy with the entire page being text, but lacks color use, interesting graphics or illustrations, texture or navigation.
https://www.edutopia.org/artthink-online-museum-art-curriculum - Open Learning World
The content on this site looks appealing although upon landing on the page, it appears unprofessional. The skewed, dated graphic in the middle of the page, banner filled with ads, variety of fonts used, and small size of type add to the clutter.
http://www.openlearningworld.com/innerpages/Art%20Appreciation%20Basics.htm
- BBC
Provide a screenshot of 2 websites considered to offer a compare and contrast of design elements:
The screenshot of w3schools shows a well-designed simple site with a font that’s fitting for the subject matter–coding–plus a straight forward navigation. The right side panel indicates the tutorial, in-progress area. It’s easy to discern what the subject matter is and what topics are covered.
In contrast, the website for Open Learning is dated and does not fit the subject. For a site that offers art appreciation information, one may expect something more sophisticated, colorful and visually stimulating. This site has a dated font for the header and a confusing navigation on the left. The bright ad on the right takes over the page. The entire page lacks visual hierarchy and thoughtful design. The globe comic graphic in the middle of the page seems completely unrelated as well.
