Just stay, silly. This concept dates back to 1960, when the US Navy implemented the KISS principle, which says that most systems work better when they are simple and not complicated. The same applies to almost all design projects.
Most graphic designers discover KISS at the beginning of their careers. So how can you do it? Creating a simple design is a little more complicated than you might think. Here are seven rules to design that will help you reduce all clutter and create a beautifully simple account.
1. Set One Goal Per Page
The beginning of a simple design begins with a goal for the project and specific goals for each page of the site. Each page must guide users to an action, except for navigation and footer.
It can be clicking on a link, entering information into a form, watching a video or playing a game. But each page must focus on a single action or transformation of the user.
Doing too many things can overwhelm users. You can lose sight of the actions and make the least desirable choice. Plan the design so that each page leads users to a single goal. Any switch button that can be pressed above scrolling and below scrolling on the same page should do the same. This consistency helps users understand why they are on your site and what to do; the simplicity of these choices makes the design simple and engaging.
2. Stick to two types of families
There are so many design guidelines that recommend three fonts for a project. You can streamline this even more with two robust families of types.
Look for a family of types that includes multiple weights with lots of contrast between regular and bold or black options. For even more style, opt for a display selection that includes some alternate characters that you can use in oversized titles.
Then you just need to mix and match a body font and a display font to get great lettering combinations for the whole design. Use two families of types, as you would if you were choosing more options with specific uses for specific WEIGHTS or styles.
You will find that this can help you create a very readable and easy-to-use typography palette that is easy to manage and provides visual consistency.
3. Use Consistent Alignment
Left, center, or even right-whatever orientation you like, stick to it throughout the design. This also includes aligning similar elements such as text boxes and elements that do not look the same, but fit together in groupings.
Adaptable does a great job with the text on the home cursor. Despite the text with different line numbers on the image, each title is aligned with the call-to-action button. The distance between the elements is also consistent.
In addition, this consistent alignment on the scroll continues with other headline and CTA pairs.
The orientation corresponds to the flow of the cursor, which also moves in a complementary direction. Left and center alignments are the most common options for text elements because they are the most readable. For longer text, left orientation is the preferred option.
4. Establish hierarchy
Users should not have to think about what they are looking at or how they can move in a design. Even the simplest visual compositions should have a separate hierarchy.
It starts with a dominant image. It can be an image, video or text ad or something else that makes a first impression.
Then there should be some kind of text that tells the user what the design and website are trying to communicate. This is usually in the form of a simple title that works with the dominant visual.
The third is a secondary bit of text or action that users can complete. The last visual element is a navigation menu. Users expect to find all these elements and the eye is trained to move through the elements in that order. Facilitate them by designing in this way.
5. Give the elements plenty of space
If you don’t know it now, remember: the void is your friend.
Give each element of the design a lot of space. The room will help to draw attention to the individual elements, take “space” so as not to be tempted to overload the canvas, and create an overall design that has concentration.
The trick to making good use of the space is consistency. Set rules for the amount of space that surrounds individual elements or fits between lines of text. If the design seems too sterile, you may need to return a little to the distance. You will know that the distance is correct when you open the new design and directly access the places you want users to see first. (You don’t know what they are? Go back to number 4 – Establish the hierarchy.)
6. Enhance Contrast
High-contrast design elements-from color selection to element size-can give a project the visual subtlety it needs even in the smallest of frames.
For a trendy option, try a bright contrasting color palette to attract the attention of the user. Bright colors make a simple design more complex and interesting than a black and white option. To make the most of the contrasting colors, choose shades with opposite positions on the color wheel with similar saturations. If this option is to your taste, try other pairs based on the color wheel. (You might even find an unexpected new favorite, like the purple and teal combination above.)
7. Use Consistent Icons and Elements
Consistency in design is one of the best (and worst) secrets of killer design. It’s one of those things that’s all too often forgotten because design projects are littered with different styles of social media buttons or icons that just don’t match the rest of the website iconography.
The elements of the user interface should not be a retroactive reflection.
It is important to create an icon and set of ui elements and rules and use them in the same way throughout the project. (You can even buy or download an icon font or UI element kit if you don’t want to build it from scratch.)
Choose a color for the elements, use the same action or hover effect for each element (one for clickable elements and another for elements that are not), and scale the elements according to how you use them. (It’s acceptable to have both an icon size and an oversized option for slightly more graphic elements.)
For example, Praticca machines use oversized icons to tell users that there is more information. A + is located in a colored icon. The three symbols are identical except for the color. They all do the same thing on the hover and all behave the same when a user clicks. The same icon is used smaller throughout the site to launch new pieces of content and help users scan the copy.
A simple design doesn’t have to be completely minimal or have no fun elements or ui goodies. A simple design is a very usable and intuitive design that allows users to engage without complicated questions or instructions.
Although there is room for more complex websites or user interactions, most website designs can benefit from the KISS approach. Do not think too much, and users do not have to do it either.