So you’ve just created your own website and you’re still not sure what you think of it. You adjust colors. You add fonts and images, and you try to get as much as you can above the fold. (Because that’s what they told you to do, right?)
There’s a lot of design information on the internet – tips, tricks and knowledge that can be difficult to sift through.
It’s difficult to determine good from bad knowledge when you don’t really know what you’re doing. Often what’s forgotten, is “what makes good design”, and this can make all of the difference. The answer to that is a lot of things make a good design, but today we’re going to go over some definitions that will help get ya started.
Detailing a “Good” Design – Definition Edition
When talking about ‘Good Design’, we’re really talking about proper visual design. Something that is clean, easy to read, organized, focused, and impactful. Basically it is the very definition of solid communication practices. Just like learning any good communication techniques, it’s important to start with the basics.
Here are a few key points to keep in mind:
-
Balance:
Visual balance refers to the distribution of visual elements in a design. It’s important to make sure that no one (1) area of the design feels too heavy or too light compared to the rest of the site design.
-
Contrast:
Contrast refers to the difference between two or more visual elements in a design. This can be achieved through the use of color, size, shape, or texture.
-
Hierarchy:
Hierarchy refers to the visual arrangement of elements in a design to guide the viewer’s eye to the most important information. It’s important to make sure that the most important elements are the most prominent. Think what catches your eye first, then second, and so forth.
-
Alignment:
Alignment refers to the placement of visual elements in relation to each other. It’s important to make sure that elements are aligned in a way that creates a cohesive design. Think top, middle / center, or bottom. Left or right alignment, too.
-
Repetition:
Repetition refers to the use of consistent visual elements throughout a design. This can help create a sense of unity and make the design feel more cohesive. Think brand colors, cohesive fonts, geometric shapes, etc. Stick with a “theme.”
The purpose of visual design is to communicate a message or information in a visually engaging and effective way. By storing the above basic principles and definitions in your brain’s all-purpose toolbox, you can design pieces that are both aesthetically pleasing and functional across a wide range of disciplines and media.
More on that later, for now, focus on design elements such as colors, branding, typography, etc.
Principles to Practice
Okay, so we have the five principles stashed away in our handy toolbox, correct? They’re all nicely labeled and put in the proper place, right? So let’s use them.
Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity.
Charles Mingus
Most if not all design – web,print, product, or even theatrical set – all have the same five principles and the above definitions can be applied through all types of design. This is called ‘shared skills’. Each has it’s own language and methodology, but at their car they follow the same five principles.
For now though, let’s focus on designing for the web. Web pages are a pretty unique producton their own. They are truly multimedia bridging the gap between text, video, art, and sound. Quite literally, anyone can create a website. All it takes is an internet connection, and maybe a simple text editor. That’s it – sounds easy, right?
Well… yes and no. While it’s easy to create a website, knowing how to efficiently and effectively is a completely different animal. The first step to creating any web design happens before any software is even open. It starts with the planning.
Here are some additional best practices to keep in mind when creating a visual design scheme for a website.
-
Simplicity is key:
A simple and clean design is usually more effective than a cluttered one. Focus on the most important elements and keep the design uncluttered and easy to navigate.
-
Live on the grid:
A grid system can help create a cohesive and balanced design. Grids help align elements and create a sense of order and hierarchy. – Higher, larger items are going to be more important, and the first things eyes are drawn to.
-
Use consistent typography:
Consistent typography helps create a unified design. Use a limited number of fonts and sizes, and make sure they are easily readable. You should really shoot for no more than twodifferent typefaces or fonts at first and see how you can push the design once it’s established. Think: Serif vs sans serif, Verona vs Century Gothic, etc. Headers, subheaders and so forth should also have consistent formatting and typography.
-
Use color effectively:
Color can be a powerful tool in web design, but it should be used carefully. Use a limited color palette and make sure colors are consistent throughout the design. Do you have brand colors? This is a great way to display them and stay on brand for your organization.
-
Pay attention to contrast:
Contrast is important for readability. Use high contrast between text and background colors, and use contrast to create emphasis and hierarchy. Think light vs dark colors, using colors that are complementary of each other, or opposites in nature while mainting brand standards.
-
Use images and graphics thoughtfully:
Images and graphics can enhance a design, but they should be used sparingly and thoughtfully. Use high-quality images that are relevant to the content and support the message. Dont forget to size them for web so they don’t slow down your load speed.
-
Make it responsive:
With so many devices and screen sizes, it’s important to design for responsiveness. Use flexible layouts and make sure the design is optimized for mobile devices. This means tablet, vs. smart phone, vs computer. Each are a different size and read differently. Keep this in mind while you plan!
-
Test, iterate, retest, wash, rinse, and repeat:
Finally, it’s important to test the design and iterate (a series of steps that you repeat, tweaking and improving your product with each cycle) based on feedback. Test the design on multiple devices and screen sizes, and make changes based on user experience.
Are we feeling better? We covered quite a bit, but once you understand design, the importance of consistency and cohesiveness, and what makes a “good” design, you’re ready to take on your first site. But don’t wait, design is much like writing in the way that design is redesigning.
