Design - Colour and Visual Design
Your educational website will share your museum's message across the world. No matter what the size, scale, or budget of your project, following a few design principles will enhance your website's visual layout and help present a professional product to your audience. The following design principles are demonstrated on the Canadian museum website examples.
ColourAn appropriate colour palette is a success factor in many website designs. Colour can divide or unite elements, affect readability and usability, and create a mood in website designs. Colour can enhance or detract design elements and aid in navigation.
Content can help to determine colour palettes for your website. Visit this website to see how colour reflects their content theme:
Montreal InsectariumConsider these resources when choosing appropriate web-safe and design enhancing colours:
Mix and Match Colours
Colour, Contrast & DimensionConsistencyA clear graphic message is as important as clear navigation for usability. A graphic look or closely associated looks should appear throughout your website. Look at these examples of consistent image, colour, or navigation themes:
Centre d'exposition, Université de Montréal
The University of Alberta MuseumsWeight and SizeWhat is important on your website? An image or graphic that promotes your educational theme or message can capture its essence very effectively. Larger is better in visual design and the impact of one image is almost always better than the impact of a series of images. Take a look at these examples of how websites use large and single images to enhance design:
Laboratoire de recherche sur les musiques du monde, Université de Montréal
Vancouver Art GalleryLineThe direction of a line can convey mood. For example, horizontal lines are calm and quiet, vertical lines suggest a potential for movement, and diagonal lines suggest movement. Lines can divide or unify objects or they can direct the eye to places on the screen. Lines that direct a visitor's attention are called "leaders." Visit this website to see how leaders can enhance a design:
Canadian Football Hall of Fame and MuseumShapeShapes can be created by line, colour, or values of colour. Shapes are considered positive space. It is important also to consider the area around shapes, known as negative space. View this website to see how positive and negative shapes enhance visual design:
New Brunswick MuseumTypeType is a design element that is as important to the success of a design as line, shape, or colour. Type in the body of web text is often 12pt or 14pt in size. Headers are usually larger than 18pt. When faced with a decision about the size of your type always chose bigger. Choose a type that is effective when written in a standard format (HTML) and combined with graphics. Consider readability for all type styles and font sizes. Visit these sites as examples of how text can create presence and mood on a website:
National Postal Museum
MuseopolisTextureTexture is defined as the surface quality of an object. Texture can be smooth, rough, or patterned, and can convey mood. Texture can give the impression of depth on a web page. Visit these examples to see how background textures impact website design:
Women Artists in North America, Virtual Museum of Canada
Confederation CentreSpace and DepthThe computer screen is two-dimensional, but we see the world in three-dimensions. The illusion of space and depth can be achieved in variety of ways through graphic design:
- Size and vertical location - objects look smaller when they are further away
- Overlapping - objects look further back when others are overlapping them
- Atmospheric - objects further back can be less-distinct, foggy, or blurry
- Linear perspective - lines converge at a vanishing point
- These websites create depth with careful placement of graphic elements:
Musee Pointe a Calliere
OdyssiumMovementFigures or objects that we know move in real-life can provide anticipated movement on a website. Blurry images can also convey movement since we tend to perceive fast moving objects as blurry in real-life. Movement can be suggested when designs break boundaries and graphic elements are added, as in these examples:
Prince of Wales Northern Heritage Centre
Francophonie Virtual Museum, Virtual Museum of CanadaBalanceBalance can be hard to achieve in website design. Symmetrical or formal balance is a mirror image of each side of the design. Asymmetrical or Informal balance is more common in graphic design. This type of balance can be achieved when several small objects are balanced by one large object or one darker item is balanced by several light ones. Look to these sites to see how balance is achieved using graphic design elements:
Avataq Cultural Institution
Kamloops Art GalleryEmphasisEmphasis attracts attention to a certain point or place on the monitor. There are a number of ways to create emphasis:
- Size and weight: the largest element is often the most important
- Placement: an object placed in the centre of the screen about one-third from the top of the page will often be seen as the "focal point."
- Isolation: an object isolated from others stands out.
- Contrast: a light element on a dark page or a bright colour on a monochromatic background will stand out.
- Look at these websites as examples of colour contrast, focus, and the use of negative space:
Provincial Museum of Alberta, Virtual Museum of Canada
Musee d'art de Mont-Saint-HilaireUnityUnity ties all of the elements of design together. It is complex and often difficult to achieve. Methods such as repetition and consistency throughout the website can help. Take a look at these examples to consider how unity supports visual design.
Nunatta Sunakkutangit Museum Society
Francophone Artists of Canada, Virtual Museum of Canada
DESIGN