Web-Based Projects
Overview
Blog
This term covers a wide array of online journaling genres. Blogs feature regularly posted text, images, audio, and/or videos and are designed to display 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 Blogs and Audio Blogs, and our Graphic Essay page for more about combining writing and images.
Professional Websites
These sites promote a person or group. These sites typically place accomplishments, professional interests, contact information, and experience at the forefront of the design. 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 site’s structure and design. Some portfolio sites also include a personal blog, but most use a gallery-style 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.
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 X (formerly Twitter), Facebook, Instagram, or TikTok). Unlike everyday social media use, campaigns are designed to increase an organization’s online presence and user interactions.
Websites
Google Sites: This online tool allows users to create websites. It offers several templates and limited customization compared to professional website-building tools such as WordPress or Wix. However, it requires very little prior knowledge about website building and allows for collaboration. Google Sites is free to all UW-Madison students, faculty, and staff via the UW–Madison Google Workspace for Education (formerly G Suite). It is also easy to transfer ownership from your UW account to a personal account if you leave UW.
WordPress.com: This drag-and-drop website builder is great for simple websites and blogs. WordPress.com hosts your content and provides everything you need to get started for free. WordPress.com also offers paid plans, which give you access to more features. 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.)
Weebly.com: This website builder is great for creating both personal/business websites, as well as online stores (through its 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 limits the storage available for your website, 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 free website builder includes a built-in blog. It is very similar to WordPress in its customizations and themes. However, to avoid ads, you have to upgrade to a paid account. Wix has a WYSIWYG editor (what you see is what you get), which some find easier to use than WordPress’s editor, and it can be a good alternative for professional websites or blogs.
Blogger.com: This is a free online blog service from Google with many customization options. Great for folks looking to blog without creating a full website. With this site, your audience will experience ads. There are some themes available, but customization options are limited on certain themes. This program is completely free, but to use a custom domain, you must pay an annual fee (typically between $10 and $80, depending on the domain name). We encourage this platform for beginners.
Microsoft Sway: This unique web-based program features a single-page website layout with an outline structure of sections and subsections. With Sway, you can create interactive websites that combine text, images, video, and/or audio on a single page. Sway designers can choose how viewers navigate the project: either by scrolling from top to bottom or from left to right, or by creating a slideshow-style presentation. Microsoft Sway is available for free to all UW-Madison students, faculty, and staff via UW-Madison’s Office 365.
Online Professional Profiles
LinkedIn: This free social networking site is designed for professional networking and includes a built-in blog. Similar to Facebook, users create a LinkedIn profile page that has their basic information. There are fewer design customizations available on LinkedIn 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.
Academia.edu: An academic networking site for 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 activities (including publications, conference papers, etc.). There is a paid option that lets you create a personal website; however, on the free tier, you only get a very basic profile page. As a user, you are also likely to receive many unsolicited emails from Academia.edu. We recommend this for folks looking for a beginner professional website and are applying for academic jobs.
Web Formats
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.
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 for each page. This means thinking about how to lay out your menu and pages so you don’t have too much content on a single page—which could lead to an infinite scroll—while other pages have little to no content.
Web Accessibility
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, and screen readers do not read special characters well.
- Keep your text larger than 10-point font – While there are often magnifiers and settings in your web browsers that allow small text to be enlarged, using small fonts is unprofessional and creates eye strain or adds an extra step for those who may want to read it.
- Apply good contrast principles to your website. Use a free contrast checker from a site like WebAIM, Contrast Checker, or a free tool such as Color Oracle to verify that your site is accessible to people with color blindness. Strong contrast such as light on dark or dark on light is preferable. (see more below)
- 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 has closed-captioning or subtitles – This is for those with auditory impairments who may not be able to hear the sound. Automatic captions are usually included on sites like YouTube, and are usually fine. If closed captioning isn’t available, make your own transcript of the audio to include below the video.
- If possible, include videos with audio descriptions – This is for those with visual impairments who might not be able to see all of what is happening in the video. Audio descriptions are less common than closed captioning/subtitles, so they may not be available.
- 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. Too many “click here” links will make it difficult for someone using accessible tools to find them and know where they are going. This also applies to QR Codes.
- Also, external links (i.e., links to other sites) should open in a new tab. Don’t allow your audience an opportunity to leave your site, so have links to other sites open in a new tab. Internal links (i.e., links to other pages on your site) should open in the same browser tab.
- 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 how your audience finds all of the content on your website.
- Include all your public pages in the main menu, or make them easily accessible from other landing pages. Make it easy for your users to find the content they need without having to drill down a thousand pages or scroll too far.
Contrast Checkers
If you Google “Color Contrast Checker,” you will find many programs for checking contrast. We highly recommend WebAIM’s Contrast Checker. This site allows you to enter the foreground color (usually text color) and background color) to get a pass/fail for normal text, large text, and graphic objects. There are actually two different tests for each: WCAG AA and WCAG AAA. The first requires a lower contrast ratio than the latter. It is best to have a pass on all fronts, but a pass on WCAG AA is acceptable in most cases.
Testing your Website’s Accessibility
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.