Similarity and contrast, connection and separation, grouped and ungrouped are all ways to describe the varying sameness and difference between elements. Based on the information they carry, we’ll want some elements to look similar, to indicate that they are related in some way. We’ll also want to show that some elements are different and belong to different groups.
Key to showing both is the visual characteristics of elements and their relationships. If two elements are related in some way, then they should show similar visual characteristics. If the elements are different, then they should look different.
Note: This is the third post in a series on design principles. You’ll find the first two posts here:
How do you show contrast and similarity between elements? The answer lies in the primitive features of the elements.
These elements have different primitive features — in this case, of shape, color and texture.
Each of these things communicates something about the element. If one heading is bigger than another, then we assume the bigger heading is more important. We might view an element with a shape that’s jagged and sharp as being dangerous.
Sometimes, an element’s attributes need to be compared to the same attributes of another element in order to have meaning. The headings from the previous paragraph are a good example. A heading should only be bigger than another heading or another piece of text. The comparison is necessary for bigger to mean anything. It’s through comparisons like these that we communicate similarity and contrast.
By giving visually similar characteristics to multiple elements, we communicate that something is similar about the elements. If two elements on a web page are both red circles, it’s natural for a viewer to ask why. Why are both red? Why are both circles? The likely conclusion is that the elements are related in some way beyond how they look. The elements’ similarity implies that they carry a similar message.
Likewise, by applying visually different characteristics to multiple elements, we communicate that something is different about the elements and the messages they carry.
Any characteristic of an element4 that can be varied can be used to make elements look the same or different. A few characteristics, however, are most often used to show similarity and contrast. In no particular order, these are:
A rectangle and a circle contrast in shape. Two red items are similar in color. A red rectangle and a red circle contrast in shape and show similarity in color. How you balance the similarity and contrast of elements through their visual characteristics will determine much about what those elements communicate to the viewer.
Note: While primitive features are the primary way to visually show contrast and similarity, we have other ways to show both — for example, the actual content that the elements carry. The words “stop” and “go” contrast. The words “stop” and “cease” are similar. Images contrast with text; long paragraphs contrast with short paragraphs; and so on.
Human beings are wired to notice difference. It’s a survival mechanism to quickly differentiate a friend from something that wants to eat us. Being able to quickly determine that was vital to returning safely home to the cave at night.
Our ability to quickly notice differences is what makes contrast so powerful. Contrast attracts attention. It draws the eye. It gets noticed. By giving an element characteristics that are visually different from the elements that immediately surround it, we can create points of interest and emphasis. In fact, because the contrast of an element with its surroundings is so good at drawing attention to the element, it’s perhaps the most effective way to add interest and excitement to a design.
Contrast does more than attract attention. It establishes boundaries between elements, too. For example, contrasting the background color of the main content and that of a sidebar is one way to show where one ends and the other begins.
Differences that stand out can provide emphasis5, highlighting important elements and information. The greater the difference, the greater the contrast will be. The greater the contrast, the more important the element will appear.
For example, two ways to set off text are bolding and italicizing. Boldness typically shows more contrast and, thus, stands out more. Spotting bold text at a glance or from a distance is easier than spotting italicized text.
If two elements are meant to be different, go big with the contrast. You don’t want viewers to wonder whether the difference is intentional. Make sure the contrast is obvious and clearly intentional. Leave no room for misunderstanding. Don’t contrast text that’s 16 pixels with text that’s 15 pixels. People won’t notice the difference immediately and, once they do, it will appear to be more of a mistake than a conscious decision.
Be careful not to overdo it. Use contrast sparingly.6 If everything contrasts and tries to draw attention to itself, then nothing will stand out. You’ll end up with visual noise that causes confusion.
Too much contrast can break the harmony and unity in a design, leading to chaos and confusion. This might be what you’re after in a certain design, but more often than not it isn’t. Decide which few elements need to stand out, and make them look very different from everything else.
While every gestalt principle is about showing similarity and contrast in some way, I want to point out two of them. Contrast is critical to determining the figure-ground relationship and showing dominance and focal points7.
Contrast and similarity at work: The green circles and orange bars are similar to other green circles and orange bars, but they contrast with each other.
The same survival mechanism that enables us to quickly see difference also helps us to see when things are the same. It points us to who or what we can trust and to what might be dangerous. Being able to recognize similarity is why human beings are excellent at finding patterns9. Patterns help us understand the world around us, provide context and make learning quicker, to the point of something becoming intuition or instinct.
When we design two or more elements to look similar, we are indicating that what’s true about one is true about the other. If one of the elements is important, then the other one is likely important, too. If one element is clickable, then other elements that are visually similar will probably be clickable, too. It’s how we can quickly recognize links in a block of text. Visual contrast shows that links are different from the rest of the text, while the visual similarity among links tells us, once we’ve discovered what one does, that all of the links are clickable.
Similarity is about showing connection and showing that multiple items are related in some way. It brings familiarity and consistency to a design.
Similarity complements our natural strategies for processing information10. When we take in our visual surroundings and attempt to make sense of it all, we naturally group objects into chunks in order to hold more information in our working memory. We further group, organize and structure everything before it becomes part of our long-term memory.
Designing similar information to be visually similar helps the user to process and comprehend the information, which are two critical goals of design.
The more that primitive features of elements look the same, the more similar they’ll look and the more viewers will think they’re the same. They’ll appear grouped and related11 in some way, even if just one characteristic is shared; and the more they look the same visually, the more they’ll be perceived as being the same.
We use similarity to build structure12 and pattern. Any similarity between two elements in a composition implies a structure. Additional similarity fills out the structure and leads to pattern, texture and rhythm.
Not all signals that show similarity are equal. In the image below, would you group the objects by shape or color? Do you see a group of circles and one of squares, or do you see one red group and one blue group?
You probably noticed color first, grouping the elements as red and blue. This suggests that color is a stronger communicator of similarity than shape. This is not absolute, however. For example, someone with red-green color blindness wouldn’t likely notice the difference between red and green objects before noticing the shapes of those objects.
What does one large element cornering a smaller element in a design imply? What does one block of text being indented more than others with light gray suggest?
A large circle cornering a small circle
Contrast and similarity are really just opposite ends of a scale. On one end of the scale, objects look entirely different; on the other end, they look exactly the same.
Most of the time, we’re somewhere in between the extremes, and the things we design will share some but not all characteristics. Similarity and contrast are expressions of where along the scale objects lie relative to each other.
Even though I haven’t been explicit about it, everything I’ve said about either similarity or contrast applies to the other. Having one is impossible without also having the other. Contrast is a lack of similarity, and similarity is a lack of contrast. It’s all about where it lies on the scale.
Thinking about them together makes them more impactful. You can use a single feature, such as color, to show that several elements are related, and then use a different color to show that several other elements are related but different from the first group. With just two colors, we can create two distinct groups of connected elements.
When everything is the same, you get tedium. When everything is different, you get noise. The best designs have a healthy mix of similarity and contrast and show a clear understanding of what they’re trying to communicate.
Contrast and similarity can be found on every website. Both need to be present. Imagine a website having no contrast. We’d all have a hard time reading text if it and the background were the same color. Just as difficult would be each word or phrase having a different style.
I’ll point out some of the contrast and similarity on the websites below. There’s more of each than what I’ll mention. I want to offer enough examples to get you thinking and then let you take over. Look at and study different designs, and work at truly improving your skill in balancing contrast and similarity.
One of the first things you’ll notice on David Simon’s website16 is the contrast between background colors, which makes it easy to distinguish one part of the page from another. The logo stands out as a dark object against a light background of space.
The image contrasts with everything to draw the eye. The background of the posts’ dates, the full uppercase used for the meta data for comments, and the background color of the menu item for the current page are also examples of contrast drawing the eye and communicating something meaningful.
Links in the menu are all styled the same, as are the links to recent posts. Both are separated with horizontal lines. Each menu contrasts with the other to signal difference. Fonts are consistent throughout. The headings and body text contrast in typeface, but their difference is consistent across the website.
Links in the body could stand out more to make clear they’re links, although the designer might have deliberately made them less obvious in order not to interrupt the flow of reading. Headings could also have been made to stand out better, although it is pretty clear that they are not a part of the main text.
The home page of Mike Kus’ website18 focuses on different projects that Mike’s worked on. Most of the page is empty, but notice how that makes each element stand out. The text contrasts with the background, as do the paintings against the background wall texture.
Note: Mike has changed his home page since I wrote this. What you see in the screenshot below is the previous version.
The paintings also contain the only color variety on the page. All other information is in the same dark gray.
Also, notice how the paintings are framed, indicating that they have something in common. In this case, they represent projects. Note, too, that the background shows similarity through its pattern of bricks. It’s clear what is figure and what is ground.
On Mike’s “About” page, below, the lone image of Mike contrasts with everything else. The blue button to “Get in touch” is the only element with color. You might not contact Mike, but it won’t be because you don’t know how. Buttons across the website have the same blue.
Mike’s name as the logo is repeated as the main heading on the page. The header contrasts with the background, as do the backgrounds of the various sections of the page below. Links in the menu share the same uppercase styling. Social icons at the top are repeated along the bottom.
Fonts are also used consistently, with headings in a sans-serif and body text in a serif, contrasting with each other.
The logo on Electric Pulp’s website21 is a red circle of moderate size. It contrasts well with everything else that is immediately visible. Notice how the color is repeated in the main navigation to indicate the current page.
Headings across the website are big, bold and set in all caps. Headings and body text also contrast consistently across the website, with the former in a sans-serif and the latter in a serif.
Click into the “Notes” section and you’ll see previous and next links with background colors that contrast with the main background. Background color is also used to distinguish different sections of the page.
Most buttons on the website are a contrasting red (a color often used to set off elements) and change to blue on hover. However, on the “Work” page, the first button reverses this (it’s blue and changes to red on hover). Whether this is deliberate or accidental is hard to tell. Nevertheless, the principle of contrast is maintained.
Color clearly delineates the start and end of sections. And the repetition of color creates a rhythm throughout the page. Notice how the yellow background of the price stands out, while also drawing the visitor’s eye down to the picture of the product.
Contrast and similarity have different functions. They are used in varying degree and in combination. You’ll always see some of both because neither exists without the other. Changing one means also changing the other.
Contrast and similarity are clues to design elements. Differences draw our attention, and similarity transfers what we know about one element to another.
Ultimately, the goal is to contrast similar layers: making the elements in one group look similar to each other, but different from another like group of elements. The way we structure contrasting and similar elements creates hierarchy, flow and compositional balance, topics we’ll get to later in this series.
The post Design Principles: Connecting And Separating Elements Through Contrast And Similarity appeared first on Smashing Magazine.
Immersive Garden impresses with a smooth scrolling experience and a beautiful draggable menu. Our pick this week.
SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Made by Alex Kaul.
A new website for showing all the awesome projects for creating a more expressive web. By the Adobe Web Platform Team.
Think outside the box: Razvan Caliman’s getting started guide for CSS Shapes.
Sara Soueidan’s insightful slides about styling and animating SVGs with CSS from her From The Front talk.
A set of beautiful hand-drawn vector elements with a nautical theme made by Ekaterina Bychkova for Pixel Buddha.
Code on Camera is an new online education platform that uses short video screencasts to teach modern web design and development.
A set of lovely solid icons by Robert Karnovski. Also, check out the line version here.
Scott O’Hara writes about how to make modal windows more semantic and accessible.
Lynn Fisher shows how to turn a single div into a sophisticated drawing with pure CSS.
A tutorial on how to create a stylish file browser by Nick Anastasov.
Learn how to master the pen tool with this fun game. Made by Mark MacKay for Method of Action.
A fantastic plugin for fitted text using the SVG text element and JS. Made by Brent Jackson.
A great new community site for startups and “bootstrappers” made by Jean-Nicholas Hould. Read more about it in this blog post.
David Clark’s look into CSS utility classes and how they should be used in large projects.
Remember the CSS-only styles of selects we’ve reported about in Collective 124? This is Todd Parker’s repo for the cross-browser styles for consistent select element styling.
For many people the day does not start until they have tasted that first sip of coffee. The drink is thought to stimulate the brain and creativity and includes a great caffeinated pick-me-up. (And thankfully, you can find a coffee shop on almost every corner.)
Here we look at 25 great options for creating a WordPress website using a theme designed just for coffee shops, café’s or coffee lovers. What’s in a theme? With so many options and choices, how do you know what’s right for your site? It might help to start with a theme that is designed for your type of website.
Barista Coffee is a fun theme with an image slider, multi-level drop down menus and included PSD files so that you can customize as much as you like in Adobe Photoshop. The simple theme is colored to remind you of a fine cup of joe and features clean typography and open space.
BellaMotel is a responsive theme that comes with everything you need for your coffee shop or café. The theme includes tools for business hours, a reservation form, menu gallery, events listings, cook or chef page, recipe custom post and plenty of shortcodes. BellaMotel also includes two sliders and integrates with WooCommerce.
Bottega is an easy to use theme with a great menu management system to show off your best cups to customers. The responsive theme is easy to customize (logo, colors, background and fonts), has nice menu navigation, links to 11 social networking sites, includes a built-in lightbox, blog and plenty of widgets. This theme also comes with specialty pages for staffing, contact information and menus.
Café Elements is designed to help get people to you coffee shop with all of your business information right on the home page. The theme is also customizable with widgets, multiple color options and the ability to include featured content and ads. Café Elements is built already search engine optimized and is ready to use once the download is complete.
Cafe Lounge is a fun and light coffee shop theme packed with customization tools and options. The responsive design is retina-ready and installs with a single click. The theme comes with four color skins (but you can make your own), an animated slider, multiple page layouts and menu pages, including a coffee menu option, designed especially for food-based businesses.
Coffee is a modern and simple coffeehouse-style blogging theme. This theme can be customized with a header or background image and features all basic WordPress functionality.
Coffee & Cream is a one-page responsive theme with plenty of trendy features. The theme is designed in the flat style and includes parallax backgrounds. It comes with 27 widgets, an infinite number of layouts, dedicated vcard modules, 10 skins (with light and dark color schemes), shortcodes and a slider. Coffee & Cream also features multiple navigation options – CSS/toggle or dropdown.
Coffee Blog is a light theme for coffee shops that want to share information and do a little blogging as well. The theme features a bright and open design scheme and features such as social media sharing, included clip art files and the PSD file for the ability to customize the theme using Adobe Photoshop.
Coffee Junkie is a simple one-page theme designed with a minimalistic style. The theme includes a jQuery lightbox and slider as well a smooth scroll script, favicon support and PSD files for easy customization and editing.
Coffee Shop is a responsive theme that is ready to go right out of the box. With custom post types, widgets and templates for menus, staff and events, it really is possible to have your site up and running in minutes. The theme is customizable and you can change the color scheme or alter almost any part of the design in the included PSD files. The theme is highly visual (so get some great pictures ready) and features a full-width homepage slider and plenty of social sharing buttons.
Coffee Theme is designed specifically as a portal for coffee shop or barista portals. The theme includes social media sharing tools, a modern design, and plenty of customization options from color changes to logo upload. This theme also includes a commenting system, a slider on the index page and a coffee variety-themed menu.
Coffee Time is a minimalist-styled responsive theme made for reading. The coffee-themed theme is designed for blogs or sites with plenty of content. The theme is fast-loading, includes seven widgets, has adaptable font sizing and allows for a custom header, logo and favicon. The look of the Coffee Time theme is unique with a left-side “header” image and navigation.
Desk Mess Mirrored is a simple theme featuring a desktop and coffee cup. The blogging theme is suitable for a variety of site types. The theme also features a nice navigation, multiple post formats, sticky posts, threaded comments and fixed layout style.
Espressionista is a responsive theme that uses flat colors and rich typography for a blogging site that is easy to sit back and read. The theme offers customization when it comes to color and font choices as well as multiple post formats and social media sharing tools. The theme is designed on a multicolumn grid and includes post thumbnails, a static header and menu item overflow grouping for ease of use and design.
Espresso is a fully-responsive theme with plenty of features. The theme includes a revolution slider, visual composer, event calendar, Envira Gallery tool, blur slider and integrates with WooCommerce. Customization is easy and makes branding the theme in your colors simple and comes with PSD files. Custom widget also help make the theme easy to set up and make your own.
Formidable Restaurant is a theme designed for almost any type of restaurant business but with a rich color scheme and plenty of features, it would work especially well for a coffee shop. The responsive theme features a home page slider, portfolio (which can be used as a menu), custom header and custom widgets. The front page has two design options and you can add a custom logo, social media sharing link and other simple customizations.
Mocaccino is a module-based theme that makes building and organizing your site easy. The theme comes with more than 30 content modules, in-browser design tools and elements made just for this type of website. Mocaccino includes a menu builder, event manager, staff listing, blogging template and works with WooCommerce.
Sunrise is designed for a variety of restaurant or food-based businesses and will work equally well for coffee shops. The responsive theme has an open and modern design with a handful of extras. The theme includes social media integration and tools for customization (such as uploading your logo or changing colors).
Verona is a responsive and retina-ready theme made just for your café. The theme includes a powerful admin panel, advanced typography options, unlimited color scheme choices, plenty of shortcodes and PSD files for additional customization. Verona is also search engine optimized and has page options for food menus, food categories and specific categories for coffee items and multiple coffee pages.
|Luckstock’s 17 Uplifting Royalty-Free Music Tracks Bundle – only $17!||
Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.
The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.
Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.
To keep up to date with all the cool links, simply follow us @DesignerDepot
How to design for thumbs in the Era of Huge Screens http://bit.ly/1yitcWs
dice.fm/ – beautiful ticketing app, from the team that just won an Apple Design Award
5 Unique Ways to Measure and Evaluate a Social Media Campaign http://bit.ly/XuI4jp
13 Ways Designers Screw Up Client Presentations http://bit.ly/1taBECU
What if the world were reduced to only 100 people (infographic) http://www.miniature-earth.com/
A guide to working with freelancers http://bit.ly/1ud2ND5
How top startups pay designers http://bit.ly/1o3IvbN
The new habit challenge: create a better to-do list http://www.fastcompany.com/3035597/hit-the-ground-running/the-new-habit-challenge-create-a-better-to-do-list
The Infinite Jukebox: For when your favorite song just isn’t long enough http://bit.ly/Qc6ICP
The Boring Designer http://bit.ly/1wzDn7r
Turning a profit: See how quickly tech giants build wealth https://www.worldpayzinc.com/tech-wealth
How to design a 365 day project http://bit.ly/1uuLsXR
Digital literacy is the key to the future, but we still don’t know what it means http://wrd.cm/1y681XJ
Apple approves $999.99 app that allows the Apple iPhone 5s to shoot 4K video http://bit.ly/1o006S1
Underwater Life: a Low-Poly illustration research http://www.underwaterlife.me
Want more? No problem! Keep track of all our tweets by following us @DesignerDepot
|Luckstock’s 17 Uplifting Royalty-Free Music Tracks Bundle – only $17!||
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Can you relate to these situations? Please share your funny stories and comments below…
|Polish-Inspired Kapra Font Family with 8 Variants – only $7!||