There are a variety of web-based projects that students are making. Below are a few common projects:

Blog: This term covers a wide array of online journaling genres. Blogs feature regularly posted texts, images, audio and/or videos and are designed to present the most recent posts at the top of the page. Blogs may be created by an individual or a community with shared interests. See also our Video and Audio resources pages for Video Blog and Audio Blogs, and our Graphic Essay page for more about combining writing and images.

Professional Websites: These sites promote an individual person or group. These sites typically place accomplishments, professional interests, contact information and experience at the forefront of the design. In some cases, these are an online presentation of The aim is to provide a window into a professional’s background and career.

Portfolios: A portfolio site allows the creator to display their own work, attract clients, network, and apply for jobs or graduate school. Regardless of the medium, it places the work at the center of the structure and design of the site. Some portfolio sites also contain a personal blog, but the majority use a gallery-style site layout. Portfolios should be easy to navigate and contain a brief description of each piece, with an artist’s or professional statement. It is important to consider whether an online portfolio is intended to be stand-alone, or paired with a professional website (see above). There are many platforms to choose from when creating an online portfolio. Here is a list of the top 15 free portfolio hosting sites (from WebpageFX.com).

Social Media Campaign: A social media campaign is a coordinated effort to reinforce or assist with a goal using one or more social media platforms (such as Twitter, Facebook, Instagram, or Tik Tok). Unlike everyday social media use, campaigns are designed to focus on increasing an organization’s online presence and user interactions.

Design Tip:
Choosing the right platform and aesthetic will go a long way in helping make your web-based project look professional. DesignLab can help you get started or provide feedback on your project!

Make an Appointment

Web Design Tips and Tricks

Websites can be created for many different purposes. Each type has specific functions and stylistic conventions. Make sure to keep genre in mind when thinking about layout and the content you want to include in your websites.

How to Decide on a Format

In order to decide what format to use, look at what other people are doing in your field, decide on the mood and tone you want to evoke with your branding, think about what information is most important or what information you want your audience to see first, and work within the restrictions of the web platform you’ve chosen.

Balance your content from page to page. This means thinking about how to layout your menu and pages so you don’t have too much content on one page — possibly resulting in an infinite scroll — while other pages have little to no content.

Consider your site’s accessibility as your audience might have visual or auditory impairments. Here are some accessibility guidelines when creating your web-based project:

  • Avoid using decorative or cursive fonts. These fonts are difficult to read for those with visual impairments or dyslexia. Keep your choices to Serif or Sans Serif fonts.
  • Avoid special characters. Those who have visual impairments might have to use a screen reader to navigate your website, however, screen readers do not read special characters well which can cause confusion.
  • Keep your texts larger than a 10-point font. While there are often magnifiers and settings in your web browsers that allow small text to be made larger, using small fonts is unprofessional and creates eye strain or gives an extra step for those who may want to read it.
  • Remember to apply contrast in your website. Use a free color checker from a site like WebAIM, Contrast Checker, or free tools such as Color Oracle to verify that your site is accessible to those with color blindness. Strong contrast such as light on dark or dark on light is preferable.
  • Use Alt Text for all images and media. Alt Text is also read by screen readers. Alt Text should be one or two sentences that describe the image or media to someone who cannot see it.
  • Use media that is close captioned or subtitled for those with auditory impairments.
  • Link text should also explain the destination of the link. Avoid using link text like click here or see this! Instead try something like: Check out the DesignLab website for more information.
  • Additionally, internal links (i.e., links to other pages on your site) can open in the same browser tab, but external links (i.e., links to other sites) should open in a new tab.
  • Be sure to include a navigation bar on every page. Most websites feature this as a built in standard but this function is sometimes disabled. Your navigation menu is the way your audience will be able to find all of the content on your website. Additionally, be sure to include all of your pages in the menu or make sure that they are easily accessible from another main landing page. There are some great free tools out there for checking your website’s accessibility. Wave by WebAIM evaluates your Alt Text, your use of headings, and other accessibility considerations. Keep in mind that this program will only check one page at a time so be sure to check all of your pages.

Student-Made Examples


Be by Derek Ho

Social Media Campaign

@bipoc_mentalhealth by Hannah Glenn

Six instagram posts in muted blues, purples, pinks, and browns

Instructional Videos