Rules are often very flexible in the field of design. Thus, you are usually free to play around and experiment. But no strict rules can also mean no guidelines at times, which may result in confusion.
So, some simple practices to follow can never hurt a beginner at designing.
Here’s a compilation of the best visual design practices with some inspiring examples to assist you as a beginner at visual design.
Table of Contents
- Create Effective Color Palettes
- Be Deliberate in Picking your Typefaces
- Use Images to Break Up Text
- Create a Coherent Layout
- Create visual hierarchy
1. Create Effective Color Palettes
Colors are as vital to visual design as oxygen is to humans. The color palette of a brand is pivotal in shaping the brand’s identity and emotional appeal.
Any successful brand has a limited range of colors associated with it that become a part of its identity and are remembered with the brand’s name. WhatsApp’s green and white blend and Facebook’s blue and white combination are some good examples.
Thus, pairing colors is imperative to creating visually appealing designs that are remembered by a user.
To begin with the color palette, first, consider the messages and values you want to associate with the brand or product. Choose two or three keywords as your basic concepts. Next, choose one or two elementary “brand colors” that line up with those concepts and blend well together. You can build on your palette from these elementary colors.
When choosing the additional colors, don’t forget to include neutrals, colors close to white and black. These serve well as background colors. However, you need to ensure that your neutrals have some connection to the rest of your palette.
You can also consider adding an accent color, a contrasting shade that you could use to highlight small elements like a link or button.
The Facebook website uses ample neutral colors in the background. It also sticks to its palette of blue and white with just one button in green to be highlighted.
2. Be Deliberate in Picking your Typefaces
Another crucial element of visual design is typography. The effect of typefaces is often very subtle and thus it becomes tempting to just pick a font you like and are familiar with.
But it’s important to be deliberate and thoughtful when choosing the fonts for your project. A good practice is to always think about how your choice of font type relates to the keywords for your project.
Examine what type of fonts will match the tone and purpose of your project. A project for a new-age product, targeting the gen-Z, would obviously demand a modern font and narrow down your choices to a sans-serif font. While an interface for browsing through some collection of antiques would call for a classical font like a serif typeface.
Once you get comfortable with selecting fonts, you can experiment with using multiple fonts. However, two fonts should be enough in most cases.
Although you can get as creative as you want when pairing fonts, it is advisable, to begin with, one primary font for body copy, and another as the accent font for titles. An easy way of pairing fonts is to combine a serif and a sans-serif. You can check out Typewolf for some detailed tips on font combinations.
As a final step, make sure that whatever font you choose is legible and easy to read in longer blocks of text. Script fonts and other novelty lettering should only be limited to small areas like a logo.
An inspiring example for efficient use of typography is ‘madoversocial’.
The highlighted piece of text at the center of the page, aligns with the key theme of madness, just like all the other elements on the page.
3. Use Images to Break Up Text
After the color palette and fonts, the final piece of the puzzle is the image. Images just like the other mentioned elements add to the user experience and aid in setting up the intended tone.
There are several types of image ideas ranging from photos and illustrations to infographics, diagrams and icons.
But you should ensure that each visual element adds something important and functional to your design. Images too shouldn’t just be decorative, they must play well with other elements like keywords, color palette, and fonts.
Most of the images found on search engines are copyrighted and thus should not be used in your projects. However, you can find tons of absolutely free, high-quality stock photos on websites like Unsplash, Burst, and StockSnap or create your own high-quality images.
The landing page of the popular e-learning website, Skillshare, is an inspiring example of image use. They have used the images of their top creators along with the text to amplify the overall appeal of the page without doing much.
4. Create a Coherent Layout
Once you have chosen all the individual elements like colors, fonts, and images, you need to figure out how to use these elements together. You need to make sure that these elements interact together seamlessly to form a coherent layout for your project.
There are unlimited ways of placing content on a page. You need to explore the possible options by sketching out several rough layouts on paper.
Your main agenda should be to drive the user’s attention to the intended place through a clear design structure. You would want to direct the user’s attention to a “Sign Up” button or some specific link, depending upon the purpose of the page.
Try to imagine yourself as the user and observe how your eyes travel around the design. You could even ask someone else to test the design for you.
The UpGrad page layout guides you towards the desired action with minimalistic design and coherent use of images and text.
5. Create a visual hierarchy
Visual hierarchy refers to the relative importance of all the other elements in a page with respect to the most important element.
For example, the use of a more visually prominent style for headings pushes them up in the hierarchy. This helps the brain understand that these are milestones in the content. You can control the visual hierarchy by using a combination of color, size, and spacing in particular.
It can be tempting to fill a single page with as many images and text blocks as possible. But the spaces between visual elements are just as essential as the elements themselves. Using generous whitespace is also one of the simplest ways to make your designs look clean and elegant.
Grids are a system of evenly spaced lines that help you organize your content in columns or rows. Thus, grids can help you create the desired visual hierarchy by offering you a complete vision of the contents’ placement and spacing.
This simple distinction of font used in this blog on Alex Cattoni’s website serves well in creating a visual hierarchy that helps scan the content easily.
And, here is another interesting guide for you: Animation tips Best Practices
Conclusion
So, the best visual design practices are nothing a beginner can’t handle. Starting with these simple practices you can achieve great designs. Building upon this foundation you can further your expertise with time.