0% found this document useful (0 votes)
358 views

Design Elements Complete

Uploaded by

Daniyal Abbas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
358 views

Design Elements Complete

Uploaded by

Daniyal Abbas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

© 2008 by Sean D’Souza. All rights reserved. Published by Psychotactics Ltd.

No part of this publication may be reproduced


or distributed in any form or by any means, or stored in ad database or retrieval system without the prior written permis-
sion of Psychotactics Ltd.

The Author and publisher have used their best efforts in preparing this book and the document contained herein. However,
the author and publisher make no warranties of any kind, express or implied, with regard to the informational content,
documentation, or files contained in this book or in any accompanying media files such as CDs or DVD, and specifically
disclaim, without limitation, any implied warranties of merchantability and fitness for a particular purpose, with respect
to program listings in the book, the techniques described in the book, and/or the use of files. In no event shall the author
or publisher be responsible or liable for loss of profit, or any commercial damages, including, but not limited to, special
incidental, consequential, or any other damages in connection with or arising out of furnishing, performance, or use of this
book, program files, instruction, audio or video connected with this information.

Further, the author and publisher have used their best efforts to proof and confirm the content of the files, but you should
proof and confirm information such as dates, measurements, and any other content for yourself. The author and publisher
make no warranties of any kind, express or implied, with regard to that content or its accuracy.

The Brain Audit Kit is available at special quantity discounts to use as premiums and sales promotions, or for use in corpo-
rate training programs. This is part of the entire Brain Audit series which includes audio programs, on-line training, etc.

For more information, please write to:


PsychoTactics Ltd., PO Box 36461,
Northcote, Auckland, New Zealand
Phone: 64 9 449 0009
Email: [email protected]
Elements that confuse
Confusion isn’t hard to create.

And confusion leads to distraction. And distraction pulls you madly in all directions, so that you’re totally
confused. So how do we tend to confuse customers? We tend to confuse them with elements, a lack of invis-
ible lines and with too many colours.

Our websites, our brochures, our presentations are a mess. And we don’t even know why they’re a mess—or
how to clean things up.

In reality, a clean-up is not hard to achieve. If you stay within the structure and guidelines of elements you
can immediately improve your design—even if you’re not a designer. And even if you don’t do your own de-
sign, you can make sure your designer isn’t going nuts on your next project.

In this exercise, we’re not going to break too many colour or font rules. We’re not going to use five, or ten
fonts. We’re not going to use five or ten colours. We’re going to stick to one font, and a very small palette of
colours. And yet, we’ll see that we can indeed distract with tiny element or object changes.

But let’s not yabba on. Let’s see how to stop our customers from being pulled madly in all directions. And put
some sanity into our design with some really simple tweaks.

Design Clarity in Minutes | Psychotactics.com  | 1 


Proximity of Elements
Elements are simply groups of objects that are grouped together to form a common definable form. For instance,
your eyes, nose, mouth and ears are the main objects that form the element called the face. Let’s look at the graphics
below to understand this even better.

The first factor we’re looking for is proximity.


Proximity is simply a factor of how far, or how close objects are to each other. And if they’re too close, they
kinda feel claustrophobic. But if they’re too far, they feel too loose. The trick is to keep the objects within
comfortable proximity to each other, so that they feel just right.

This ‘just-right’ feeling also helps your eye focus. When objects are too far apart, they form a completely dif-
ferent element. This is painful for the eye, and requires more effort. Of course, when you put a whole bunch
of too-close, or too-widely spaced elements on a web page, or brochure, or presentation, you create immense
confusion. Confusion that can easily fixed with an understanding of proximity.

These designs are almost identical. Yet the design on the right takes a fraction of a second more
to register. Why is that? Yes, you’ve worked it out. It’s a factor of proximity. The design on the left
is compact. Even though there are several objects, it seems to form a single element because of
the factor of proximity. The second design on the other hand slightly lets that proximity go loose.
And you can immediately see the factor of distraction. So let’s look at these designs a lot closer to
find out what’s going on.

A casual look at this design will reveal five objects. One of the objects is a photo.
Two of the objects are fonts, in a larger font size and black. And then we have the
same fonts in white. But both the fonts are differently sized. In all, it sure looks like
2  |  Design
five Clarity
objects. Andin in
Minutes
reality| Psychotactics.com
they are five objects. So what makes them feel so com-
fortable; so cohesive? Let’s find out on the next page.
If you look at the darkened area, you’ll notice that all of the objects (despite their
differences in colour and font size) happily sit in an imaginary box. And that’s what
makes them feel so comfortable. We can only feel this comfort level, by comparing
it with a variation of this design. So let’s pull up the earlier design.

By slightly shifting the space, we’ve created two sets of elements. We still have the
same number of objects, but the elements have changed. We’ve gone from one
cohesive element, to two. Of course, all you have to do is move the fonts and the
pictures a bit here and bit there, and you’ll create three, four, up to a maximum of
five elements. This means that if you have five objects, you can have five elements.
If you’ve got twenty objects, you’ve got a massive headache. Which is why it’s
important to understand the concept of proximity. You may not be able to fit twenty
objects into one element, but that’s ok. Use two, three sets of elements, but when
you start going above that number of three, a certain amount of distraction occurs.
You may not be able to avoid that distraction, but knowing and applying the factor
of proximity, greatly reduces the confusion in your communication.
Design Clarity in Minutes | Psychotactics.com  | 3 
Invisible lines
Invisible lines are um, invisible. But that doesn’t mean they don’t exist. The funny thing is, that once you see the
lines, you see them all the time. Then it’s just a matter of tweaking the objects on the page to make sure that they
stay within the boundaries of the invisible lines. And like all good rules, this rule can be broken, but knowing the
rule first, and breaking it deliberately, is what’s important. So let’s go to the rule first and see how the lack of the rule
causes distraction, and unnecessary elements as well.

Invisible lines, where are you?


You remember that darkened area in the previous example? Well, that darkened area created invisible lines.
Now you’re going to see how very visible those lines really are. And how you need to line up stuff, so that you
don’t create a factor of confusion.

See that darkened area? The text seems to align at top, to the left, to the right
(well, almost) and even at the bottom. And then the picture juts out slightly. Not
sure what I’m talking about? Let’s look at the lines in the picture below. You see
them clearly now, don’t you? This sticking within the lines, helps create a little less
jumpiness in the picture. It keeps everything within a parameter. And when that
parameter is broken, it’s done so to create drama in some way. See that text jutting out? There’s no
reason for that text to jut out. It’s
just sloppiness. In a tiny graphic,
you’d never notice that glitch, but if
it were a big graphic, your eye would
pick it up, right away!

The ‘headlines’ text and the ‘Why


do most’ text are in the same hori-
zontal invisible line.

Notice how the graphic seems to jut


out? Well, that’s the rule being bro-
ken. And you can break rules (and
not have to apologise) if you know
what the rules are in the first place.

The
4  |  graphic and in
Design Clarity the headline
Minutes align
| Psychotactics.com
in the same vertical invisible line. Even the letter ‘n’ and the ’Why do most’
text aligns. Not quite in this example, but
that’s what it should do ideally. It should
align.
Colour Palette
Colour Palette means that you stick to a few colours when creating your presentation, or your website. Because
you can have a technically sound design, and yet one colour can create a factor of distraction. It may not be a loud
distraction, but somehow it jars. And you’re not sure why. In most cases, it’s because you haven’t defined a colour
palette in advance. So what does a colour palette look like and how can it help you in keeping your design really
simple and effective?

Ok, so a palette is a fancy word. In effect, what we’re saying is: Hey can you work
with three-four colours and throw away the rest of the ‘paint box?’ That’s all you’re
really doing. You’re choosing a set of colours and working with it. This choosing
of colours helps you to keep your design within parameters. It creates structure,
instead of a dump of rainbow colours.

When you look at these graphics side by side, they look perfectly acceptable. There’s no reason to favour one over the other. Yet
one does have greater favour over the other, when you look at where the graphic is being placed. If we stick to the colour palette
above, then the beige graphic is the right one to choose. And the greenish-blue graphic gets dropped. But how do we know this to
be true? We put the two graphics in the environment they’re going to appear, and the graphics speak for themselves.

Notice how the graphic on the right suddenly seems to jump out of the page? That’s because it’s not in the colour palette. Now you may argue, that
it’s a good thing to jump out of the page, but is that really the goal of the page? The goal is to make a customer aware
Design Clarityofinthe graphic,
Minutes not necessarily
| Psychotactics.com  | 5 
to cause the customer to get confused when everything seems to be jumping out. And if you look at the pages on Psychotactics, we’ve tried to keep
to a colour palette. Is it perfect yet? Nope it isn’t, but we’re still working on it for the next fifty years or so.
Examples of proximity

You can see (if you strain your eyes, that is) at least seventeen
elements. And that’s actually a bit of an understatement. There
are actually well over twenty-five, maybe even thirty elements.
Way too many objects, way too many elements. So is it possible
to do an instant clean-up of this page? Funnily, the answer was
online. I didn’t have to go very far to find an almost identical
page, in the wine industry itself.

6  |  Design Clarity in Minutes | Psychotactics.com


The number of objects are almost identical. The number of links and actions on the page are almost identical too. Yet, as you can
plainly see, one page looks far easier to read (and navigate) than the other page. And the real difference isn’t colour, or proximity,
but sheer number of elements. The more elements you put on a page, the klutzier it gets.

Here are some screenshots from the Attversumption Masterclass (http://www.psychotactics.com/products). As you can see in this
Powerpoint Presentation, there are as few elements as possible. When you’re doing a presentation, you’re going to use words, or
pictures, or graphics/illustrations. The above examples have all three. And in every case, they adhere to as few elements as pos-
sible (See below)

Keep it simple. You don’t need more than three points in any given slide. If you’re covering a slide with fifteen points, you’re prob-
ably one of those nightmare presenters. Time to move over from the dark side. :)

Design Clarity in Minutes | Psychotactics.com  | 7 


Based on proximity, Rouxbe.com came up with five distinct elements.
Grabaseat.com came up with four elements
Psychotactics came up with seven elements.
As you can see, it’s an ongoing process to reduce the number of elements (especially on a website).

8  |  Design Clarity in Minutes | Psychotactics.com


Examples of invisible lines
As you can see, Rouxbe.com and
Grabaseat.com do a far better
job of keeping the invisible lines
(designers call it a grid).

Psychotactics, as you can plainly


see, needs some more work. And
probably, so does your website.
Do an audit on your own website,
presentation etc. for the invisible.

Design Clarity in Minutes | Psychotactics.com  | 9 


On a ‘normal’ page you can’t see the invisible lines (See graphic on top of page). But if you set up some guidelines in your
word/design program, a seemingly blank screen will suddenly be filled with grids and guidelines that keep you in check.
(That’s the graphic just above these words).

10  |  Design Clarity in Minutes | Psychotactics.com


Ok, so you see the difference between the two pages. Can you see how the invisible lines play their part?

Design Clarity in Minutes | Psychotactics.com  | 11 


Examples of colour palette
When there’s a limited colour pal-
ette, it’s easy to avoid distraction.
Where you use all the colours of
the rainbow, things get a lot more
difficult. Rouxbe.com and Graba-
seat.com seem to have just a few
colours to work with. But notice
that Vineonline.co.nz has few
colours too. Yet other factors such
as elements and invisible lines
cause major disruption on that
site, and therefore creates a busy,
un-coordinated look.

12  |  Design Clarity in Minutes | Psychotactics.com


Summary
Concept 1: Proximity
You may have many objects on the page. What you need to consider is a factor of proximity. Keep the objects
close to each other, and you’ll create a cohesive element. Space them out too far apart, and you create too
many elements. And too many elements distract.

Concept 2: Invisible lines


Invisible lines crisscross every design. You may have never seen these lines before, but now you’re aware of
them. When you’re starting to design a project, see if you can pull up some guidelines. The guidelines will
keep your information within the parameters of invisible lines. Yes, you will find that you can break the rules,
but know the rule first—then break it.

Concept 3: Colour Palette


It’s easy to want to play with colours. Which is why you need to start off a project/presentation with an under-
standing of how many colours you’re going to use. You can have fewer colours, but if your invisible lines and
proximity causes havoc, you’ll still distract the heck out of your customer.

Design Clarity in Minutes | Psychotactics.com  | 13 


Other Resources
Is it really hard to create saleable information products?

What if you don’t consider yourself a writer? Can you still create
an information product that sells? And can that information
product then help you get increased revenue and time? The an-
swer lies in your ability to believe in yourself. Most of the clients
I deal with don’t believe they can create an info-product. And
then having created a single info-product believe that they’ve
put all they know into that product. And that they have nothing
else to give.

And from experience we know that those who follow this course,
and what it teaches, can create not one, but tens, even hundreds
of info-products. Which of course leads to another problem?
How do you get customers to buy? How do you create a distribu-
tion channel? How you do all of this without the hype and the
hoopla. How?
Find out at: http://www.psychotactics.com/homestudy-courses

There’s one big problem with a website.

And that problem is that a website is invisible among thou-


sands and squillions of other websites. So is it then possible to
somehow have a strategy. A strategy that doesn’t depend on
tens of thousands of prospects. A strategy that doesn’t depend
on tons of advertising and all those joint ventures? And is it
possible to make your website so powerful that it has followers?

That it’s not a bunch of bytes online, but actually a place where
customers congregate. Sounds crazy doesn’t it? Well, find out
for yourself the difference between just having a website, and
having a website strategy that makes your business robust;
makes your clients happy, and makes you a more prosperous,
and far more relaxed business owner. Find out at:
http://www.psychotactics.com/homestudy-courses

Why Article Writing Creates Expertise

Every business has not one, but about five hundred competi-
tors. And no matter how unique your business is today, you will
have competition lurking just around the corner. This leads us
to a dilemma. How you separate yourself from the herd? How
do you get customers to come to you, instead of you always
having to pitch to them?

The key is the ability to get a message across to your audi-


ence in a manner that’s non-threatening, educational, and
entertaining at the same time. And let’s face it, you’re probably
intimidated that you’re never going to be able to do that ever.
Because every time you’ve sat down to write, it’s been one heck
of a struggle. You know that article-writing is crucial, but you’ve
tried it, and it’s been frustrating and demoralising. And you
don’t know of a way out. Well...hint, hint (Go on take the hint
and click). And judge for yourself.
http://www.psychotactics.com/homestudy-courses
on
If you find anything that bugs you, please click on
the bug above to send me an email. Nothing is too
small or too big. And if I can, I’ll be sure to fix it.
[email protected]

PO Box 36461, Northcote, Auckland, New Zealand


Tel: 64 9 449 0009 Email: [email protected]

15 

You might also like