2.6 Visual design

Site design

Key Concept: Use colours, themes and images to break up text on your site and make it more visually appealing

There are three main ways to improve the visual appearance of your site: themes, images and banners.


Banners appear at the top of the home page within a site. These are usually images that represent the theme of the module but may also include text. It is worth noting that the banner images are not accessible to disabled students, so do not include any text in the banner image other than the title of the module.

A banner size of 600px wide x 75px high is adequate.



Images can be added to any description box and work well in content items to break up large blocks of text. Decorative images that are used on Yorkshare and in lecture slides reinforce the link between the online content and face-to-face sessions. A source of free, royalty-free images is unsplash.com. You can also use Flickr.com/CreativeCommons as long as you attribute the photographer.

Whenever an image is embedded on Yorkshare, you must add a text description in the Image Description field. The description is for users of screen-reading software that cannot read text contained within images or describe images. The text description should represent what is contained in the image, especially any text elements.

For graphs and charts, the text description will need to present enough information for the student to undertake the activity. How much description and its content depends on the learning objective of the activity. If the focus is on the interpretation of the shape of the graph, the shape should be described. If the focus is on the trends of data, then data points could be described.


Themes and colours

The default Yorkshare theme can be quite dull. You can inject some colour into your Yorkshare module sites using the inbuilt Themes. Choose a stylised theme based on the topic of your module or a colour palette. You may like to choose the same theme across a whole programme or Department. Themes can also be used as a visual indicator for different spaces, for example having one theme for academic modules and another for non-academic spaces.


The following screenshot is a typical content area with a single item using the default Blackboard theme:

Screenshot of an item with a block of text and the default pastel purple menu theme

Applying the ‘Inspiration’ theme has changed the colour of the menu and links within the Yorkshare site to blue and added a background image behind the content, as shown below. The instructor has also added an image to the item to make it less text-heavy.

Screenshot of an item with the 'Inspiration' blue theme and a decorative image embedded within the content item.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s