User Interface & Visual Design

Designing an educational website is much different than other types of website development. Your target audience is coming to your website for a reason - what is that reason? You may be setting up a site for your students to keep track of what is going on day-to-day in the classroom or for students to find online resources and activities that extend learning related to class topics. Whatever the purpose of your website is, keep that purpose in mind at all times and continually check that you are meeting your goal.

The layout of a website defines the location of typical items on a website, including the menu, the banner or logo, the navigation bar, contact information, and social network icons. Your website should have a layout that is consistent from page to page (e.g., menu, header, and search engine can be found in the same spot on every page of the website) When deciding on the layout of your site, consider what information or visuals will be “above the fold” This term originated from the design of newspapers - with only the upper half of the front page of a newspaper (the part above the fold) being visible to passersby.

Keep in mind that the “fold” will be different depending on what device your visitor is using (see Figure 8). You need to be aware of the fold and design your page so that your most important content lies above the fold. The main technique used in all navigation schemes is menus. Search engines are also a popular navigation tool. One other navigation method worth noting is the use of accordions.

The main purpose of your website shouldn’t be lost among cool visual effects. Your visual design should not confuse your visitors while they try to navigate your website. Use larger text size for titles, headings, and subheadings, so that they stand out from the body of content. It is not necessary (or recommended) to fill every square inch on a page. Use white space on your page to reduce visual clutter.

Use standard icons and shapes on your website. Your visitors may be accessing your site using a desktop, laptop, tablet or mobile device. The purpose of your website cannot be lost or inhibited because of different screen sizes. Be sure to test that your website responds predictably on all types of devices.

Tips to Make Your Web Design Look More Professional. U.S. Department of Health and Human Services. (n.d.). User Interface Design Basics. Sellers, O. (2018). Web Design Best Practices for Greater Business Success. Retrieved from