I’ve been invited by Helen Beetham to talk about the ‘General Principles of Visual Design’ at a workshop for interns creating learning materials and research projects as part of the University of Exeter’s CASCADE Project. This has given me a great opportunity to revisit this area and brush up on my own knowledge, as well as share a few resources that I think are useful. I’m also aware that I’ve become quite lazy with this blog, relying on the default style rather than formatting my own. So let’s try practicing what I’m going to preach!

Although this is mainly about visual design, as we’ll be looking at designing learning materials and presenting research projects, I’ve included a few links to related ‘useful things to know’ and free resources that I think have the potential to create really exciting stuff.

The Principles of Visual Design:

  • Balance – arranging elements on a page to present equal (visual) weight …or not, if you’re trying to create a particular tension or mood
  • Proximity/ unity – relationships can be defined by how close page elements are to each other
  • Alignment – creating order and ease for readability
  • Repetition/ consistency – essential for smooth navigation and ease for readability
  • Contrast – helps different design elements stand out
  • White space – breathing space between page elements so that they don’t appear too cluttered

These are illustrated well in the Desktop Publishing section of the About.com guide.

How these apply to webpages and presentations:

It’s actually quite difficult to describe these in words – better to look at examples… (Warning – once you start doing this you will deconstruct the design of everything!)

Apple Websiteapple.com Jigsy websitejigsy.com
BBC News websiteBBC News Homepage BBC Sport HomepageBBC Sport Homepage

Look at the CSS Zen Garden to see how different designers display the same information in a range of styles – interesting and inspirational! Also  design your site/ page/ presentation on paper before you start creating it so that you plan how it fits together.

Other things to consider:

Much of this is ‘usability’ – think about your own Web experiences and how they could have been improved with just a little care…

  • Your audience – do your research and see what similar sites look like – get some inspiration.  Also, are users likely to have the most up-to-date browser? Accessing your content via a mobile device? Able to play Flash files?
  • Images – resize and compress them properly to reduce the time it takes for your page/ presentation to load. In PowerPoint 2011 (mac) go to File > Reduce File Size and select the option for screen display. In PowerPoint 2010 (PC) select your image so Picture Tools appears, click on the Format tab and then Compress Pictures. Also ensure you use an ‘alt-tag’ to describe the image.
  • Active navigation – having different colours indicating whether a link is active, not clicked on yet (hover) or visited – enables the user to know exactly where they are on your site.
  • Colours – colours can define particular moods – see this fascinating post, ‘Turning Propaganda Poster Images into Modern Webdesign’.   Kuler is a free tool that can help you choose a colour theme. If you register with the site you can download your choices. See also these Colour Tools and Resources collated by David Airey.
  • Writing style – text should be presented in short, concise paragraphs – bullet points are good – as these are easy to read. Use a friendly, casual tone, unless your intended audience expect otherwise.
  • Fonts – use a sans serif font, such as Arial or Helvetica, as these make reading on screen easier. Make sure your text is scale-able; if you’re coding, set font size in ’ems’.
  • Anchors – if a webpage is long, include a ‘back-to-top’ link (use ‘anchors’ within a web-page).
  • Contact – include clear contact details so that your users can easily get in touch if they have a question or want to report a fault.

Useful links:

Accessibility and Usability – tips and techniques from Dr Simon Ball, JISC TechDis

10 Usability Crimes You Really Shouldn’t Commit – Common mistakes highlighted by Line 25

The Dos and Don’ts of Dark Website Design – from the experts at webdesignerdepot

The Responsinator – see how your site looks in various mobile simulations

Visual and Graphic Design – great links and resources from the Rapid eLearning Blog

PowerPoint for e-Learning – tips and tricks from the Rapid eLearning Blog

Free tools I like:

Issuu – present pdfs as slick e-books

Toonlet – create cartoon strips

VoiceThread – build interactive stories

EmbedPlus – annotate, control and discuss YouTube clips

Viewbix – enhance YouTube videos with links to pages, Google maps, QR codes…

Xtranormal – create a movie using ‘text to speech’

See also – ‘8 free tools for creating infographics‘ from Creative Bloq

Anything you feel I’ve left out? Please let me know…