Design

The Design of the site includes navigation, color scheme, and repeating graphic design elements to give your website a consistent look.

What is good design? Check out these three infographics that focus on visual communication, typography, and color theory.

  1. Keep the design simple as it supports the story you want to tell with your site.  Consider drawing a map and/or creating a mock-up in Google Slides to see what content is where and how a reader moves from one page to the next.
  2. Design the pages with accessibility in mind so that the largest number of people can view the site without missing out on features.  In addition to the top accessibility features, also consider what your website looks like on a small screen like a phone.  
  3. Avoid the trap of continuing to add content to one page. Such additions will make your website appear disorganized. This applies to both text and visual elements as a clean look will also make it easier for your audience to see your main point.
  4. Make sure your navigation includes ways to get back to the home page.
  5. Choose your plugins carefully. WordPress can make your life easier as it has tools you can plug into your site for additional functionality.  But with plugins comes the responsibility to ensure that they work reliably, which adds a layer to the maintenance of your site. 

Finally, while this is not quite a design element, consider also privacy and security – this is why we want you to start with a private site that only you and a couple of other people can access. Know that your site is by default public, so you need to make it private. Please check with Academic Technology on how to do this.

Text

Text should be short and concise. Use headings and subheadings to chunk the text for greater accessibility. Think about how you read websites:  what keeps you reading a website and how do you decide to move away from a site?

Images

What kind of photos, or digitally created images, do you want to use? 

  • High-resolution images provide great detail but are also very large files and can take a long time to load. Think about your Picture size vs picture file size – what is a good balance for quick loading and good quality?

Tips

  • For the most part, your images will be stored in your Media Library, while video and audio files can be embedded from Imagen, or from an outside source, like YouTube or Vimeo. Just click the Add Block icon ⊕ to find the appropriate block for the media type you want to insert.
  • All student Carlsites initially have 1 Gigabyte of storage; if you need more data think about lowering the size or quality of some of your photos. Typically, high-quality photos take up 1/2-2 megabytes, so it’s okay to have a couple of high-quality photos in your Carlsite’s media library, but too many will fill up storage and make your website slow.
    For example, images like logos or thumbnails don’t need to be high quality. Try to save space by making them lower quality and smaller to save space.
  • Software for image creation and editing is also available through Carleton:
    • Make sure your images contain alt text.
    • For students looking to reduce image file size and resolution to save space, there are easy ways to do so on your home computer. For Mac users, use the Preview app to reduce image sizes; for Windows users, use the Photos app.
    • Carleton also offers Adobe Software licenses, including Photoshop for students who need image editing software. You can find this software in some public labs or can request it from the ITS Helpdesk.
  • Personal photo:  Consider if you want to have a personal picture on the website.  If yes, think about what you want this photo to look like.  Is it a professional headshot (Check the Career Center’s schedule for offering professional photography)?  Would you add a personal photo to your resume?

Video

  • If you want to add a video to a WordPress site, you should know that Carleton does not use WordPress to manage videos natively. Please do not upload videos to your media library! You can, of course, still add videos to your website — you just need to embed them from another source: YouTube, Vimeo, Imagen, or other services.
  • Keep the video short – not longer than 5 minutes, but shorter is better. Make sure to use closed captioning.  Video files are large, so you need to decide where to store your file as your WordPress site will not have enough storage.  Some options, as long as you are at Carleton, include Panopto and Imagen.  
  • What kinds of videos do you watch online?  How will these videos help you decide what kind of video to include?
  • [Note: While the WordPress Media Library supports video uploads, our installation of the software does not. Follow the instructions for uploading media to Imagen.]

Other Files

  • For pdfs, you can upload them through the File block.
Add a pdf using the File block option

Story Telling

While you may not want to tell a story as you find it in a novel or movie, consider how storytelling elements can shape your website.

  1. What is the premise of your site? Often, this refers to location, characters, and circumstances – but for our purposes, you want to think about yourself as the character and the purpose of your website as the premise.
  2. What is the plot of your website?  Or rather, what is the sequence you want your audience to experience your website?  Is there a highlight of the site you want to make sure everyone experiences?
  3. Who is the main character of your site? It is most likely you – but which you do you want to show to the world?  Are there other characters who are important? (This may be more relevant if your site focuses on a project, like a community project, rather than what you want the world to know about you.)
  4. What are your style choices?  In the traditional narrative, words, sentences, and style are important, but you may also be thinking about the type of images, videos, and other items you are adding to the website – do they show a variety of styles?  And if so, does this mean you have to explain these differences?
  5. What are the themes of your story?  For example, we are asking you to think about your values – do you see your values reflected in your site and should you make them more visible? 
  6. As you add evidence of your skills and knowledge to the site, consider this narrative structure:
    1. Describe what you want your audience to see in the evidence (e.g., this writing sample was part of a longer writing project in my internship program, cumulating in a poster presentation to the key client).  
    2. Analyze how this evidence showcases the skill or knowledge (e.g., the writing sample clarifies the research and lays out a couple of possible solutions).  
    3. Apply how you will use the skill you are showcasing in other work and learning situations (e.g., explain briefly how the practice of research, revision, and design prepares you to write other communications, like research papers, memos, or formal emails).
  7. Finally, what is the hook of your story: How do you draw your audience into your site so that they stay and explore? Consider using words, images, color choices.

Source: The 5 Essential Elements of a Good Story

Accessibility

An accessible website is a website that allows most, if not all, viewers to get the full benefit of the site. For the following tips, we are relying on Carleton’s WordPress 101 site. 
Consider

  1. Adding alternative descriptions to all images on your site (unless they are purely decorative)
    1. Alt Text:  People with visual impairment may not be able to see the images you place on your site. Because being accessible means that all communications — textual or visual — can be understood by all visitors, we need to provide a textual description of every image on our sites. This is called “alternative text” or “Alt Text.” All images must have Alt Text associated with them (this is actually a legal requirement for any service or commercial site, not just a nice-to-have).  WordPress will ask you directly what Alt Text you want to add.
    2. Not sure how to write Alt Text for your image? Check out the Alt Text Decision Tree!
  2. Ensuring that text used for hyperlinking is meaningful. The link text should always describe what the user will see when they click the link. It should never be “click here” or the URL itself. Learn more about proper link usage
  3. Using headings of different levels to guide users through the site (rather than using set font size and bold as visual markers)
    1. See Use Headings section of Formatting Your Text
  4. Ensuring accurate closed captioning for any videos
    1. Closed captions are useful for anyone who needs or wants to watch videos at low or no volume.  When was the last time you used closed captions?
    2. Creating Video Captions
  5. Using a color scheme with significant contrast for better visibility
    1. Creating contrast on your page makes it easier for colorblind people to read and see your content – and it makes it easier to print a page in black and white.
    2. Add Some Style
  6. For PDF files:  Using the Accessibility checker to ensure the text is, for example, OCR enabled. (Note that you have access to Adobe Acrobat Professional through an Adobe Creative Cloud license or in any of Carleton’s computer labs)
  7. Adjusting your site so that it works on mobile devices, such as smartphones.
    • In your WordPress site, check out the options under Preview and select Tablet or Mobile to get a sense of what your site looks like on a smaller screen.
Choose different device display for responsive design.

If you are now curious about web accessibility, check out these additional websites, gleaned from Professor Amy Csizmar-Dalal’s Software Design class:  

Respect Author Rights and Reuse Permissions

When you publish content online, please remember that this means anyone can see what you are publishing – and can potentially take to use somewhere else.  Likewise, you may want to use other people’s materials (a design from a friend, a photo from a course).  How do you indicate ownership, respect other people’s work, and use materials responsibly?

What you create belongs to you and is automatically copyrighted by you.  Adding an explicit statement about copyright and/or sharing permissions can show your viewers what you want to share in what ways.