{Design Principles} CONTRAST
Contrast is a design principle that is so crucial to creating beautiful branding and web design. But contrast touches all parts of design, not just color. Put simply, contrast occurs when two elements of the design are different - like REALLY different.
So why the hell should you care? (I get it, you've got a business to run... so let's cut to the chase!)
Contrast is a design principle that is so crucial to creating beautiful branding and web design. When you think of contrast, you may think of color - or maybe black and white photography. The higher the contrast, the darker the blacks appear and the lighter the whites appear with little grey in between.
But contrast touches all parts of design, not just color. Put simply, contrast occurs when two elements of the design are different - like REALLY different.
So why the hell should you care? (I get it, you've got a business to run... so let's cut to the chase!)
01. CONTRAST GRABS ATTENTION. Attention gets your audience engaged. An engaged audience clicks through your website, and eventually, they get in touch with you.
02. CONTRAST CREATES ORGANIZATION. It helps your audience flow seamlessly through your About bio, your Services page and your whole site in general!
03. CONTRAST DEFINES THE FOCAL POINT. Think buttons ("Contact Me!"), header text (your mission statement) and photos. Secretly guiding your audience towards what you want them to see or do is this simple little thing called... yup - contrast! 😉
Below is a breakdown of how to create contrast:
POSITION
front/behind
above/below
centered/off-centered
isolated grouped
in/out
right/left
FORM
simple/complex
whole/broken
symmetry/asymmetry
geometric/organic
hard angles/round
DIRECTION
vertical/horizontal
stability/movement
forward/back
clockwise/counter
convex/concave
serif text/sans serif text/script text
Related Posts
HOW TO MAKE A MOOD BOARD
Mood boards help align the aesthetic, color palette, and tone of a project. They get me on the same page with my clients. They can also help get the ideas out of my brain (or off of Pinterest, if I'm wedding planning) and into a clearly organized visual hierarchy.
Mood boards are so crucial to everything I do that's visual. Starting a logo project? MOOD BOARD! Re-decorating my living room? MOOD BOARD! Planning my wedding visuals? MOOD BOARD!
Mood boards force you to select the crucial images that best represent the style of whatever you're getting ready to create. I go a step further and make sure to pick images that include the following:
texture
design elements / inspiration
lifestyle images
color palette swatches
Above is a breakdown of how I organize a sample mood board which each of these elements.
In addition to the elements listed in this mood board layout, you can see that I also have a space for a "feature image" right in the middle. This should be the core mood / style / feeling of the project. It should be whatever resonates with you the most.
I also have a space for whatever else makes sense for the brand or project. I called this "Etc." This can be any image or detail that you find is inspirational but may not fit the other elements.
A good mood board should help keep you visually focused as you move into the next phases of the project.
If you'd like some inspiration, try this or this!
If you'd like to try your hand at creating your own mood board, I've got three free mood board templates you can download here! These are in PDF format, which means you can open them in most design programs.
NEW!
a templated guide to messaging magic
A plug-and-play website copy template for your four core pages (Home, About, Offerings, Contact). Save yourself hours of stress and get templates, examples, and expert guidance that will benefit your business and your bottom line.
learn more >
WEB DESIGNER VS. WEB DEVELOPER: WHICH SHOULD YOU CHOOSE?
One of the questions I get asked most often is "What is the difference between a web designer and a web developer?". There are some very clear-cut differences, which I'll get into below, but truthfully, they can often overlap. I think this is why it can be confusing. But what are the main differences and which should you choose? Read on...
WEB DESIGNER
Web designers create and direct all visual aspects of a website including graphics, photos, layout, fonts, color palettes, and interactivity, which can include color changes, mouse rollovers, moving images, etc.
This person usually has the following responsibilities:
Researching and designing concepts that are easy to use (user-friendly), beautiful, and engage the audience
Designing page layouts and interactions (i.e.: button turns pink when you click it)
Working closely with web developers during the process of building the website online
Having an understanding of different audiences and interests with the ability to translate that into an interactive web space
Working collaboratively with content creators and copywriters to visually represent their work
Bringing a brand to life dynamically through layout, font selection, color palette and interactivity
Overseeing a project’s entire creative process
When looking to hire a web designer, make sure they also have the following skills:
Knowledge and interest in current trends in design, both digital and print
Ability to to understand the client's perspectives or problems and come up with ideas that are clear and TKTK
Significant comprehension of how HTML, CSS, browsers, and devices all work together
Ability to simplify solutions to problems and solve them through design
A style that jives with your own
A strong portfolio of projects that are similar to yo urs
WEB DEVELOPER
(There are two main types of web developers, front-end or back-end. PRO TIP: If you're looking to build a website, that's front-end.)
A web developer is someone who uses HTML, CSS and JavaScript to create a website that a user interacts with directly through their web browser. Basically, they build the 'front-end' of the website (vs. the 'back-end' of a website which is like what you interact with when you login to a website, like WordPress).
This person usually has the following responsibilities:
Translating wireframes or design mock-ups to actual code that will produce visual elements
Bridging the gap between graphic design and technical implementation
Develop web pages for commercial and content management systems, or CMS platform (like WordPress)
Understanding of web development user experience best practices (i.e.: the logo should be at the top of every web page)
Having experience with and a deep understanding of web technologies including JavaScript/jQuery, CSS, PHP and HTML5
Developing and implementing responsive websites (i.e.: does it look flawless on your tablet or phone AND your desktop computer?)
When looking to hire a web developer, make sure they also have the following skills:
Excellent problem solving skills (PRO TIP: Any good web dev. will tell you the job is about 98% problem solving!)
Experience working directly with graphic designers and website design mock-ups
If not hiring with a designer, developer should have excellent design and layout skills
So now you know the difference but your still not sure which you should hire to build your website? This doesn't necessarily have a clear cut answer because it depends on you and what you're looking for.
Personally, I recommend finding a web designer who knows a great web developers to help build custom WordPress sites. Otherwise, many web designers (like yours truly) typically know enough HTML and CSS to customize a pre-programmed website or theme, like this website. It simply depends on the project.
Hopefully this (long) list of differences will help you choose who's right for your web project. And if you're still confused or have more questions, just holla at me! I'm always happy to chat!
Related Posts
need even more help with squarespace?
Skip the overwhelm and have your website designed and launched in just 5 days (or less)!