Overview
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!
Recommended Software
WordPress.com: This online, open-source website builder can be used for professional websites, portfolios, or blogs. WordPress.com sets up the online hosting and has a variety of different themes with many features and plug-ins available. Upgrading to a paid account is not necessary or recommended for beginners, but does allow for more customization and storage space, as well as a custom domain name and removal of WordPress.com ads. (Note: We recommend WordPress.COM, not WordPress.ORG. The latter option requires you to find your own servers to host your site, so it is not recommended for those who are beginners or do not have the resources available.)
Blogger.com: This site is Google’s free tool for creating blogs. UW-Madison students can link Blogger to their Google Workspace for Education account or any Google/Gmail account. There are a limited variety of themes available as well, but some customizations are limited to particular themes. This program is completely free, without ads, but in order to have a custom domain, you must pay an annual fee (typically between $10 and $80 depending on the domain name). We encourage this site for beginners because it is the easiest blogging platform to get started quickly.
LinkedIn: This is a free social networking site that is designed for professional networking and has a built-in blog option. Similar to a Facebook profile, users create a LinkedIn profile page that has their basic information. There are less design customizations available on LinkedIn as compared to the other blogging options listed above. One downside of LinkedIn is the number of unsolicited emails you and your friends may receive if notifications are not turned off properly.
Academia.edu: This is an academic networking site targeting graduate students, academic staff, and faculty. Membership is free, and includes a personal page that can include a curriculum vitae, photo, contact information, and various scholarly activity (including publications, conference papers, etc.). There is a paid option that allows you to create a personal website, however, without the paid option, you only get a very basic profile page. As user, you are also likely to receive many unsolicited emails from Academia.edu. We recommend this for folks looking for a beginner professional website that are looking to apply for academic jobs only.
Weebly.com: This is a website builder that is great for building both personal/business websites and online stores (through their integration with Square). Using their templates and drag-and-drop editor, you can customize your website without knowing HTML or CSS. Keep in mind that the free plan constrains the amount of storage your website has, so you are limited in how much you can upload and add to your site. Additionally, you must pay for one of their more inclusive plans if you want to remove the Weebly branding from your site.
Wix.com: This is a “free” website builder that has a built-in blog option. It is very similar to WordPress in its customizations and themes. However, in order to have no ads, you have to upgrade to a paid account. Wix has a WYSIWYG (what you see is what you get) editor, which some find easier to use than WordPress’s editor and it can be a good alternative for professional websites or blogs.
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.
