If men are from Mars and women from Venus, designers and developers are definitively from different planets!
It’s true! Many developers struggle when it comes to design and vice versa. If you’re a developer who wants to improve your design skills, read on!
Basic Design Principles and Elements
Before riding a bike, one must first learn how to walk, right? Let’s learn some of the basic design principles that you can incorporate in your WordPress web design, then!
Table of Contents
- Hierarchy
- Composition
- Focal Point
- Colors
- Typography
- Flow
- Alignment
- A Final Note to Developers
Hierarchy
Visual Hierarchy is the presentation of design elements and features on a web page in a way that implies relative importance. Visual hierarchy also influences the order in which the human eye perceives what it sees. It is usually achieved with visual contrast, size, or placement of the elements.
TIP FOR DEVS: Creating a visual hierarchy should be easy for youbecause as a developer you are an avid organizer – at least when it comes to code. Approach this task like you’re creating an HTMLstructure (best example is the hierarchy of headings, with <h1> being the most important <h2> the next one, you know the drill.).
Make a list of all the elements on your web page. Label each with a “level” of importance somewhere on a piece of paper (it’s for your eyes only). For example, your headline/catchphrase is usually the most important thing a visitor should see on a landing page. Make it a lvl 1. The second most important thing should be the CTA button – this is your lvl2 element, and so on. Make the higher level elements visually stand out and make the rest of the content (lvl 4 or below) visually less eye-catching.
The infographic below demonstrates some of the ways to create visual hierarchy. Just remember, don’t go over the top and mix everything up!
Visual hierarchy can apply to elements of the same type, which is exactly the case with headings in HTML. For example, you can have a button for stronger and weaker actions (like “buy now” and “read more”) if you just style them a bit differently.
Note how the small things, like changing the border size and color or changing the weight and style of the font, can make a great difference. These are all super easy things to do in CSS.
Composition
The composition of a web page is the placement and organization of design elements according to basic principles of art and web design.
Creating balanced compositions is easier when applying the Rule of thirds.
The rule of thirdsproposes that an image should be imagined as divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines. The most important compositional elements should be placed as close as possible to the intersections of these lines.
Applying the rule of thirds creates more energy and better flow to your composition than simply centering your focal point.
Balance
Balance is the principle of design which prescribes how to evenly distribute visual elements. Our brains perceive balanced designs as stable and calm, while imbalance makes us feel uneasy and uncomfortable. Imbalanced design can make a stronger statement but it requires a highly skilled designer to do so in a proper way. In most cases, you should strive to balance things out.
Negative space
White space is an important part of your layout strategy. Incorporating negative space into a design helps reduce visual noise, increase readability, and bring balance.
Use margins and padding on your design elements to add negative space.
By adding negative space around an element you can emphasize that element. Look at a Google’s search page. It has a centered logo and tons of negative space around it. You simply can’t miss the point of this website.
Now compare it to this.
This website is wrong on so many levels, but one of the worst things about this page is that it’s so cluttered with content you can’t even look at it.
Focal Point
Focal point or focus of a web page is the place on your page that draws the most attention. It should be the most important piece of your WordPress page or post. Your page should always have one clear focal point (I mean, just look at Google’s home page). Two or three focal points at most, on larger canvases, depending on your design and site functionality (number of potential CTA elements). Make too many elements stand out and you will end up with a complete mess like on this page. If you’re an epileptic don’t open this link.
PRO TIP: For images and non-centered web pages use the rule of thirds to put the focal point in the proper place. Photoshop crop tool draws the lines for you.
Notice how the most important elements of this image (the hero’s face and company logo) are on the intersection of the lines that are forming the thirds. This is exactly where a focal point should be.
Color
Color is an extremely important basic design element. Covering color theory and color psychology can take entire semesters in design schools, but don’t worry, we will keep it brief.
The most important thing you need to know is how to create a color palette for your web design.
Here are some tips:
- Pick a primary color for your design.
- Pick two variances of your primary color (usually a lighter and a darker hue of your primary color) to help you gain depth and achieve a professional look.
- Choose a secondary color. Make sure it compliments (or contrasts) your primary color.
- Pick two variants of your secondary color as well.
- Add neutrals (whites, greys, blacks).
- Never use full opacity black or white color. It’s too hard on the eye.
- Using 3 accent colors is acceptable in some cases. Using 4 or more is almost always a really bad idea. Don’t make your site look like this!
Most WordPress themes have a built-in option to choose primary and secondary colors. This means that once you choose a primary color, the color of some elements and usually parts of the layout will change automatically. For a more detailed design, add variants of your primary and secondary color and use them for custom made details.
Use neutrals or variants of your secondary color for elements of lower importance in the visual hierarchy.
PRO TIP: Hack your way to a perfect color palette by using the color calculator. This simple yet amazing app will let you choose a harmony based on your initial color choice.
Other neat tools for picking a color palette is Google’s Material Palette and the color tool app. Use Material Palette to pick a primary color and it’s hue variants and use Color Calculator to create harmonies. If you want to learn more about the usage of colors in UI design, the best place to visit is Material Design.
FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.
FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.
Flow
Flow or visual movement is used to guide the viewer’s eyes through the piece. Careful composition of design elements (lines, shapes, images, typography and negative space) creates the flow.
In web design, good flow is a bit tricky to execute, because most web design elements, like text blocks, navigations, sliders, etc. visually break the eye movement. This is because they are rectangle-shaped, which is the most boring shape, by the way.
Usually, (in western cultures) our eyes start viewing the website from the top left corner. This is why the most common flow types in web design are F flow and Z flow.
TIP FOR DEVS: Don’t stress about the flow too much – just have in mind where the focal point is, and how the viewer’s eye gets to it. Find a good WordPress theme with pre-designed layouts to help you with the overall composition.
Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed, says Wikipedia.
Without going into too much detail, here is what you need to know:
- Where to find fonts
- How to choose a font
- How to pair up fonts
- How to upload a custom font to your WordPress site
Where can you find good fonts?
Maybe there is one just waiting behind a bush? Well, to catch ‘em all, it helps to know where to look. The first place everyone goes to is the Google Fonts Directory.
Check out How to Use the Google Font Directory With WordPress and BuddyPress.
If you don’t want to use Google fonts like everyone else, there are many more font libraries to visit:
How to choose a perfect font for your website?
That’s an art in itself, but here are some suggestions:
- Choose a font according to your brand’s aesthetics and mood. Obviously, you wouldn’t think of using comic sans if you’re creating a law firm website. In fact, don’t use comic sans at all. Even if you’re making comics.
Here are some other fonts which designers love to hate and which you probably shouldn’t use on any website. Helvetica is the exception here. Designers only hate it because it’s too good and they’re jealous. Papyrus, on the other hand, is a “definitely never use” all-time favorite.
- As a general rule of thumb, use sans-serif fonts for headings and serif fonts for content.
- Use handwriting fonts in extreme moderation and only as design elements or decoration. Never use them for your content.
- For content, choose legible, non-decorative fonts.
- Don’t mix up too many typefaces and font types on your page. Two is usually more than enough.
- You can opt to use only one typeface on your site. If that’s the case, I strongly suggest experimenting with different font weights and styles.
If you’re interested in reading a lot more about font-picking, I suggest this good-old article.
How to choose a font pair for my WordPress design?
I’ll give you 2 tips on how to choose a pair of fonts that go well with each other:
- Use the same font family. Unlike human families, font families get along with each other really well.
- Choose two contrasting, yet visually complimentary typefaces, one serif, and one sans-serif. Establish a font hierarchy and use one font for the headings (that would be a sans-serif in 99 percent of the time) and the other for the content.
To get inspired, check out these 30 great font combinations.
How to install fonts to WordPress
Adding fonts to your WordPress theme is a fairly simple process for any developer.
First, upload the example-font.ttf file in your (child!) theme’s directory using a File Manager.
Next, link the font file in your child theme’s style.css using the CSS@font-face rule.
You’re done!
If you need help, check this detailed guide to Uploading custom fonts to your WordPress site.
As always, there are many WordPress typography tools and plugins to help you do it.
BONUS TIP: You may be wondering what the difference between a typeface and a font is. In theory, a typeface is, in fact, a font family. A font is a particular size, weight, and style of a typeface. However, nobody uses the word typeface anymore except posh designers. Make it a part of your vocabulary if you want to infiltrate their inner circles.
Alignment
Alignment is a design principle you’re probably familiar with. You know… you used alignment in Word, you know the CSS text-align property, you used to date it in college…
Well, like your high-school sweetheart, there’s more to the Alignment principle than meets the eye. For starters, it’s not only a text property. Oh, no, no! Margin and padding are also examples of alignment you’re familiar with.
Remember, designers LOVE to align EVERYTHING. In fact, the best way to spot a bad or lazy designer is to see if all the elements on his design are perfectly and symmetrically aligned or not.
Alignment helps in organizing elements relative to a line or margin. Usually, the margin is invisible and implied by the way your design is arranged.
There are two basic types of alignment principles: edge alignment and center alignment.
Edge alignment positions elements against a margin that matches up with their outer edges, while Center alignment places design elements so that they line up with one another on their center axes.
TIPS FOR DEVS: The easiest way to align the elements on your WordPress site is by using page builders. If you’re more of a CSS guy, don’t forget to adjust the margin and padding settings of your layout. Align elements left or right usingCSSfloat property.
A Final Note to Developers
Let’s be real. Hiring a professional designer to whip up an amazing design is the tried and tested way to go in most cases. They can do all the creative (over)thinking for you while you focus on your strengths – code and functionality. Still, you might find yourself in a design pickle every now and then, and that is exactly when knowing basic design principles comes to the rescue. Training your eye and visual perception will undoubtedly make your job a little easier, and allow you to immediately recognize good or bad design. After all, we wouldn’t want a tacky color combo to ruin all your hard work behind the scenes.
Do you think developers should know basic design principles? Have you ever found yourself in a "design pickle"? Share your experiences, I would love to hear from you!
Tags:
- design
- UI
- color
- typography
