Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Unity in Web Design

No description
by

Allison Longcrier

on 24 October 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Unity in Web Design

Unity
In Design
1. The state or quality of being one; singleness.

2. The state or quality of being in accord; harmony.

Unity
What is Unity in Design?
The idea behind the design component unity is to create elements that support each other and all work together toward a common goal.
It’s about avoiding mixed messages.
Your design elements should look like they belong together and not be thrown wherever on the page.
There are two kinds of unity we’re concerned with:
Visual unity
Conceptual unity
Design that is unified by color, shape, composition or some other visual design principle.
Visual unity
Why Unity is Important?
A sentence conveys more information than random words on a page.
A paragraph conveys more information than random sentences on the page.
Unity leads to more order and organization.
Order and organization helps convey your message.
The
cat
beat
up
the
dog
The cat beat up the dog.
Makes more sense when you put the words together in one sentence.
Somebody feed
the CAT!
OMG!
Conceptual unity
For example an image of a diamond, a mansion, and a pile of money might be unified around the concept of wealth.
Design that has a common theme
or concept throughout it.
What's the repeating
theme here?
You first establish what the design will be about, what the brand will stand for, and with that in mind create elements or make public statements that reinforce the design or brand.
Creating unity is very similar to branding.
Through unity, a viewer should first see the whole idea or concept (dominant) and then then be able to dig deeper into all the supporting (subordinate) elements.
Unity is a measure of how well the elements on the page belong together and work together.
Think of it as consistency around a central message.
It emphasizes your concept and theme and helps communicate your message to your reader. Through unity, your elements are not competing with each other for attention.
Unity holds your design together both visually and conceptually.
They are working together
to reinforce your message.
Through unity, your design will be seen as a single complete piece, as a whole and not a group of disparate parts.
Boring vs. interesting unity
Unity adds order to a design.
However, too much unity can be dull and lifeless.
Variety adds interest and energy to a design.
BUT too much variety makes your design chaotic and difficult to read.
A balance between unity and contrast must be sought.
Unity and contrast can work together.
For example, your main page heading can be larger with a different font a color than all other text on the page. That will create contrast with the text and images around it. By using that same size, font, and color on all page headings across the site, you reintroduce unity into the overall site design.
How to Create More Unified Designs
To create unity in your design you should have a clear idea of what you are trying to communicate. Your elements can’t be unified toward a common message if you don’t have a clear idea what that message is.

Once you know what you are trying to communicate, you want to stay focused on it and not deviate. Everything you include in your design should complement the Main goal/concept and should serve some functional purpose in the design.
Placing an image on the page because it looks cool is not unity.

Placing an image on the page because it enhances communication of the design’s theme is unity.
Contrast
Alignment
Proximity
Consistency / Repetition
We can use the basic design principles
to help us achieve visual unity.
How to create Unity
Alignment
Elements that share a common axis appear more related to each other. Keeping a consistent alignment contributes to visual unity within an element. Designing around a common axis makes elements appear related. A bunch of paragraphs with the same alignment look like they’re part of an article, not just different bits of text thrown together, and end up looking organized and cleanly positioned.
Taking advantage of strategic placement helps us to craft stronger and more compelling compositions and utilizing a grid system provides a standard guide for element placement.
You may or may not be aware but alignment is such an integral part of most website design that you probably do not even realize it is there; it sits in the background, hidden as an initial design element.
Alignment as an effective web design principle allows us to make conscious decisions about how and where elements are placed on the page.
Without an alignment strategy, we would end up with arbitrarily placed elements, with little or no connection to additional or similar features.
Without alignment, the look and feel of your website would be a haphazard assortment of open-ended disorder.
No Alignment?
Why Alignment?
Proximity
The closer the elements are together, the stronger the relationship that the user recognizes and the better the unity it creates. If we step back for a moment and appreciate that all unity really means is the interaction between elements, we can recognize that a stronger relationship correlates smoothly with the level of interaction, and by that extent, unity.
Objects that are closer to each other appear more related to each other.
Consistency and Repetition
A football team wouldn’t go out and play in shirts with a different color per player. Instead, they are united as a team with a single design that represents their brand (or in this case, a team).
Things that look alike appear more related to each other; think of a repeating theme across the website.
Making all your objects consistent like your navigation, colors, fonts, formats and layouts will help with creating unity in the design.
Consistency in your web design is a basic principle that contributes to unity.
Consistency is achieved by trying to keep the style of similar elements the same, and relates to themes like color since they are the very factors that create successful consistency.
To achieve it, there’s not much to do other than sticking to a scheme throughout your website.
How to be Consistent?
Simple, right?
Similarly, our choice of images, colors, style, etc. should all be conceptually related to our central idea with the design.
This will also help with branding your website.
Repetition
Ways you can do your best at being unified in your design.

Use your own judgement.
Look over your design and ask yourself if everything belongs.
Ask someone else to look at your design to see if your design actually works. See what "they" think is your actual message.
The navigation you came up with may look great, but if it doesn’t contribute to the general concept it’s probably better left out in favor of navigation that
does
reinforce the concept. You can use that great looking navigation on another project.
Do You have Unity?
The final and ideal test of unity is to have a design where nothing can be added or taken away without having to rework what is left.
So, am I done? Do I have Unity?
The relationship between all your elements should be so strong and so right that to change anything would hurt the design.
This is the ideal.
Can you realistically create such perfection? Probably not and part of any design is knowing when to say enough.
Always be thinking about the elements you place on the page.
Always be asking yourself these questions and asking yourself how your choices are enhancing the overall idea you want to communicate.
Why are you adding it?
Why did you choose to place it on one side of the page as opposed to the other?
Why did you choose that color, font, size, image?
Does this help my message?
Why am I placing that here?
Unity exists when ALL your elements agree.
Unity can be seen as the single most important goal of any design; to make your whole design more than the sum of its parts.
Use the design principles of repetition, alignment, and proximity to add visual unity to your design and use contrast to add variety and interest.
Make sure any images you use agree conceptually with your theme.
Summary:
Through unity, your designs will communicate more and do so more effectively.
Visual Unity
Conceptual Unity
2
Full transcript