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!)
|BBC News Homepage||BBC 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.
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…