- Overview
- Website Platform Recommendations
- How to Decide on a Web Format
- Instructional Videos
- Helpful Links
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 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.
Google Sites is an online tool that allows users to create websites. It offers several templates and limited customization compared to professional website-building tools, like 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) and stores data via Google Drive. It is also easy to transfer ownership from your Wisc account to a personal account after graduation.
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.)
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.
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 platform for beginners because it is the easiest to get started quickly.
Microsoft Sway: This web-based software is available to UW-Madison students, faculty, and staff via Office 365. Sway pages are defaulted to private, but can be shared as website links by adjusting the sharing settings. This unique software is a single-page website organized by an outline structure with sections and subsections. For those looking to create an interactive but single-page option, this is our best recommendation because it has the ability to include text, images, video, and/or audio together in a single project. Sway designers have the ability to choose how readers will view the project, either scrolling from top to bottom, scrolling from left to right, or creating a slideshow that can be clicked through.
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.
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.
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.
Blogs
How to Make Your Blog Look Beautiful
Websites
LinkedIn Learning Introduction to Web Design and Development
10 Principles of Effective Web Design
Web-Based Portfolios
Creating a Portfolio Website: Tips on How to Do it Right
Tips for Creating a Great Portfolio Website