Scholarly Publishing and Open Access blog

The latest news and answers to your questions about scholarly publishing and open access.

Building a website for your program of research, project, or lab? My top 10 tips

Published by Lupin Battersby

A website is a commonly used tool for knowledge mobilization for research projects and labs. I often get asked (or provide unsolicited advice!) on how to do this well. For those that don’t ask, or I haven’t connected with yet, I have put together my top ten tips.

Note: I’m a knowledge mobilization expert, not a web designer. This list is based on a non-comprehensive review of expert opinions, blog posts, and my past experience. I’ve highlighted some of my favourite resources for this work below.

1. Identify your target audience and objective for the website

With all knowledge mobilization and dissemination efforts, you should always first know what you hope to achieve and who you need to reach. This informs all your other decisions. Don’t skip this step! Need help figuring this out? Get in touch with the SFU Knowledge Mobilization Officer.

2. Assess your resources

Consider how much time, technical ability, and financial resources you have and are willing to dedicate to developing and upkeep of the website. If all are limited, then keep it basic.

3. Determine and develop the content and tone of the site

This will be informed by your audience and objective. For example, if the audience is other researchers, and the objective is to build new collaborations, you may want the content to be more technical and the tone professional. If you are looking for students, the tone might be more fun and emphasize the activities of the lab. If it is for the public, perhaps it is more plain language, informational, and engaging.

4. Avoid overcrowding

A layered structure, with brief overviews that can be clicked through to more information, is often preferable. However, avoid very complicated sites with multiple clicks to arrive at desired information. SFU’s Scholarly Communications Lab website is a nice example of how to do this well:

5. The layout of each page should flow, be uncluttered, and organized

This can be achieved by organizing in a grid, column, or horizontal layout. Use negative (blank) space to facilitate readability and navigation (scan-ability). The image below places two websites side-by-side and illustrates why this is important to consider. Which page do you find easier to read – right or left?

Comparison images of a cluttered website and a uncluttered site

6. Choose images that are specific to your research, in focus, with sufficient resolution

Include an up to date image of your team or project lead(s), and consider how your website images compliment and align with your social media accounts. For example, the website top image and your headshot could be the same as your photo and cover image on Twitter and LinkedIn. For accessibility, be sure to include alternative text that explains the image – sometimes called “alt-text.” If you are including images or graphics of humans, use diverse representation and avoid stereotypes.

7. Use simple fonts

Choose a maximum of three complementary fonts (one for title, heading, and body). Often a sans serif font (without extra embellishments such as Helvetica) is preferable for large text (titles and headings) and serif (e.g. Times New Roman) for small text (body). Dark text on light backgrounds are easier to read and provide a more accessible experience for viewers.

Visual depiction of three categories of font: sans serif, serif, and script

8. Pick a colour scheme of three complementary colours (and maybe an accent or two)

Choose colours that align with your audience, objective, research and tone. Check out Canva’s colour generator for help and inspiration.

Screenshot of Canva Color Palette Generator

9. Consider diversity, equity, and inclusion

How we design and write can influence our audience’s sense of inclusion and more. This needs to be considered in selection and use of colours (e.g. colour blindness), font (readability), images (think about representation and messaging), language (e.g. use inclusive and plain language), and assumptions.

10. Get feedback and support

Reach out to available SFU resources (e.g. communicators, Knowledge Mobilization Hub, Digital Humanities Innovation Lab) for guidance and feedback. Consider hiring a professional web designer if you can afford it, and/or graphic artist. Before you launch, ask friends and colleagues to review your site.

Want to learn more?

More blog posts

Here are some useful blog posts that dive deeper into strategies, process, and considerations:

Resources and supports

Here are some platforms, templates, and services to get you started (paid and free):

  • Designs that Cell -- A Canadian research-focused scientific illustration company.
  • Science Project -- A subscription-based website platform for scientists.
  • Or use one of the most popular non-specialist platforms for building websites:
    • Squarespace -- Includes marketing and e-commerce features.
    • Wordpress -- Very customisable but does not include hosting.
    • Wix -- Allows you to build webpages using drag-and-drop features.

What does a good website look like?

It’s always good to have a few examples of websites that you like. Some of this is personal preference of course, but here are a few project or lab websites that I like:

Siteinspire is a whole site dedicated to the collection of creative websites. I choose a few from their list in the education and science space that might offer some inspiration: