Figure-Ground Relationship
Mar 4, 2010 Web Design & Design Principles
Elements are preceived as either figures (objects of focus) or ground (the rest of the perceptual field)
The figure-ground relationship is one of several principles referred to as Gestalt principles of perceptions. It asserts that the human perceptual system separates stimuli into either figure or ground elements. Figure elements are the objects of focus, and ground elements compose an undifferentiated background. This relationship can be demonstrated with both visual stimuli such as, photographs, graphic design (figurative or abstract) and auditory, such as soundtracks with dialog and background music.
When the figure and ground of a composition are clear, the relationship is stable; the figure element receives more attention and is better remembered than the ground.
In unstable figure-ground relationships, the relationship is ambiguous and can be interpreted in different ways; the interpretation of elements alternates between ground and figure.
or
Can you spot the dalmation?
Here the company name is the figure…
and here the company name is no longer the figure and therefore receive less focus.
The visual cues that determine which elements will be perceived as figure and which are ground are:
- The figure has a definite shape, whereas the ground is shapeless
- The ground continues behind the figure
- The figure seems closer with a clear location in space
- Elements below a horizon line are more likely to be perceived as figures, whereas figure above the horizon line are more likely to be perceived as ground
- Elements in the lower region of a design are more likely to be perceived as figures, whereas elements in the upper regions of a design, are more likely to be perceived as ground
In any design, web design or otherwise, clearly differentiate between figure and groundin order to focus attention and minimize perceptual confusion. Ensure that designs have stable figure-ground relationships by incorporating the appropriate visual cue as listed above. Increase the probability of recall of key elements by making them key figures in the composition.
Everyone Loves ‘Before & After’ Stories!
Mar 3, 2010 Online Marketing TIPS for your Business, Web Design & Design Principles, Web Design Victoria, BC
This story involves a conference centre that has a great event space, a world class chef and stellar online marketing strategy (Twitter, Facebook, eNewsletters), but previously had no online “hub” where everything came together.
Their website was decent in that it had information about the rooms, rates and menus, and even a little bit about the business and owners. However, what was missing (from Sunstar Creative’s perspective), was a clear message about how Ambrosia could serve you – the website visitor.
Here’s the old site:
Here’s the website that Sunstar Creative designed with what we call a “marketing wrap” and custom look and feel. This involved creating a clearly defined set of “call to action” buttons, along with eye-catching graphics and dynamic and interactive sections (video, the blog, links to social media). Click on the image below to see the site in action (there’s some cool functionality on the home page that you just can’t get from looking at the screenshot).
We look forward to hearing your feedback about the site. What do you think about the transformation?
Web Design & Colour theory
Dec 9, 2009 Web Design & Design Principles
Colour is used in design to attract attention, group elements, indicate meaning and enhance aesthetics.
Colour can make designs more visually interesting and aesthetic, and can reinforce the organization and meaning (often importance) of elements used in design. If applied improperly, colours can seriously harm the form, function and therefore effectiveness of your website. Colour theory is a massive subject, one well worth learning more about, so here is a set of guidelines that address common issues regarding the use of colour in website design:
Number of colours
Use colour conservatively. Limit the pallate to what the eye can process at a glance (generally about 5 colours. Of course, this depends on the complexity of the website design). Don’t use colour as the only means to impart information, as a significant percentage of the population has limited colour vision.
Colour Combinations
At a glance, the possible range of colour combinations may appear limitless. And to a large extent, it is. That being said, aesthetic colour combinations can be achieved by using adjacent colours on the colour wheel (analogous), opposing colours (complimentary), colours at the corner of a symmetrical polygon circumscribed in the colour wheel (triadic & quadratic):
Appealing and engaging colour combinations can also be found in nature.
Use warmer colours for elements you wish to appear ‘more in the foreground’ (read: eyecatching) and cooler colours for elements you might wish to appear ‘background’ elements.
Light grey is a safe colour for grouping elements without competing with other colour.
Saturation
Use saturated colours (pure hues) when attracting attention is a priority.
Use desaturated colours when performance and efficiency are the priority.
Generally, desaturated, bright colours are preceived as more friendly and professional; desaturated, dark coloursare preceived as serious and professional (as with the Whitehouse logo above); and saturated colours are preceived as more exciting and dynamic.
Exercise caution when combining saturated colours; they can interfere with one another, appear to vibrate and cause eye fatigue.
Lastly, and this is more a point of academic interest: There is no substantive evidence supporting the general effect of colour on mood as most of us tend to think. Similarly, there is no universal symbolism for different colour -different cultures attach different meaning to colours. Therefore, verify the meaning of colours and colour combinations for a particular audience prior to use. (see the ‘Color of Power’ by M. Walker, 1991).
Victoria Diving – Website & Marketing Design Process
Nov 13, 2009 Online Marketing TIPS for your Business, Web Design & Design Principles, Web Design Victoria, BC
With my passion for diving it was a no-brainer to jump at the opportunity to design this website. Beyond Deep Diving is a shop which had a decent looking website before, but it didn’t cater to all of the potential visitors the website can have. We identified that there are 4 types of people that visit the site: those who haven’t been certified, those that have, technical divers, and out-of-towners who want to get in a dive while they’re in Victoria (it does has been rated by Jacques Cousteau to have the best diving in the world second only to the Red Sea!) So, instead of providing the same home page that needs to cater to everyone, we designed a splash page as a point of entry to qualify our site visitors.
The rest of the website has been designed to interlink to other areas so that you are never “stuck” within a category, and we’ve done this while still keeping the main information relevant to the desires of each category of website visitor.
Just in case you’re curious, this is what the older version of the site looked like. Overall – not a shabby looking site by any stretch, we’ve just gone a few steps further (including an eCommerce area where you can buy dive gear online – coming soon!).
This website also included a social media marketing strategy that was integrated into the website. Facebook and Twitter are both great ways to get traffic to the site, and to the blog, but at the end of the day the website has to be stellar to motivate visitors to engage or make contact for purchase of products or services. This was an entire strategy to appeal to the dive industry and prospective divers and we’re quite proud to share it with you (and hear your feedback – even if it’s critical please, let us hear it).
Tags: marketing strategy, Social Media Marketing, web design
Web Design and the 80/20 Rule
Nov 4, 2009 Web Design & Design Principles, Web Design Victoria, BC
A high percentage of effects in a large system (or website) are caused by a low percentage of variables.
Okay great. Now what does that mean for your website?
Well, let’s get a little bit more background on the rule first. Sound good? Great!
The 80/20 rule (also known as the Pareto principle) is observed in all systems including economics, management, and quality control to name but a few. For our purposes I’m going to focus on user-interface design, which is really just a fancy way of describing what people see when they look at your website and how they get around that website based on the design and how the site functions. A few brief examples of how the 80/20 rule can apply to website design to help get the brain juices flowing are:
- 80% of a product’s usage involves 20% of its features
- 80% of a company’s revenues come from 20% of its features
- 80% of progress comes from 20% of the effort
- 80% of errors are caused by 20% of the functionality components
This rule is great for focusing resources and marketing messages and, in turn, realizing greater efficiencies in design, thus improving prospect for a good ROI (return on investment). Based on this, when creating an effective website, regardless of weather it is a lead-generating website or a fully-fledged eCommerce website, focus will need to be given to those 20% areas that will help deliver the 80% of return.
All elements in a design are not created equal. We use the 80/20 rule to assess the value of elements, target areas for design (or redesign) and optimization, and focus resources efficiently. Noncritical functions and aspects of a website that are part of the ‘less-important’ 80% should be minimized or even removed altogether from the website design. Everything has to justify itself. Of course, this doesn’t mean that your website should be boring; it only means that when creating the best solution possible for your business, we ‘keep the wheat and cut the chaff’.
Check back soon for related design principles such as Cost-benefit, Form Follows Function, Highlighting and Normal Distribution as well as many others.
If you want to learn a bit more of how this and other design principles will help create you a more effective website, get in touch and we’ll see how to improve your company’s web presence.
