I spent some time studying Graphic Design whilst at college. This article is a good, basic primer on design theory. Though taught as part of a Graphic Design course, I’ve found it to be just as useful in web design, front end development in particular. Web Development & Design theory just work well together. The basic premise is that “Good design is CRAP“. Here’s why…
Contrast
Contrast speaks for itself, but it’s not as simple as black and white (see what I did there?). Using the right contrast helps in making text legible, and usually helps with accessibility. But it can also translate to how you use it in a design.
If you have a large featured section, a sterotypical design contrast would be to display a big image on the left, with some assorted text with a title on the right. You can also apply contrast to hover states. Making an image change to a plain container of text, is a good example of strong visual contrast.
Every decision in web development should consider contrast. Used correctly, it can have so many more benefits beyond accessibility. But using just the right amount of visual contrast can really give a design some depth, and make it pop.
Repetition
One concept I was taught early on in my design studies, was the term ‘visual echoes’. Basically, it’s a way of using similar design elements repeatedly in a design, to glue it all together. But I don’t mean in the literal sense.
Take for example a business logo. You might have it featured in the header. But for repetition you may also choose fade it off and use it as a background on some of your sections. You might simplify it and use parts of the angles in the logo shape, to clip paths on your page elements. if your branding uses a lot of curves, you might reflect this in the website’s UI. These are ‘visual echoes’.
If you work on a design, take a look at all the pieces in it. Is there something you can use as repetition? Are there circles used in the design? Maybe you can reduce them down to dots, and have them underline certain headings? Could you introduce some curves into the design that compliment the circles? Is the use of lines, or a certain combination of colours prominent? Find a way to reuse these design traits in another context. With creative thinking, there are so many ways to repeat visual echoes within a design, and have the whole thing work together.
Alignment
This’ll be familiar with front end developers. It’s probably one concept that compliments web development and design theory the most. Alignment is usually taken care of with grid positioning, and will ensure design elements are lined up consistently. But it also has to do with vertical alignment. Like making sure that grid rows are evenly spaced. If you have a grid row of items, you might want to check that the button position in each column is vertically matched (especially if there’s some variable text above it).
Sometimes a CSS grid can’t be implemented, so you’ll need to have an eye for invisible alignment. It’s demonstrated by making sure all content remains flush horizontally to the same position as you scroll the page (think header > navigation > body text > footer).
You’ll also need to account for dynamic elements which may throw your alignment out of whack, such as a dropdown. If you’ve a row of buttons, you might want to consider having them fluid in equal widths for larger screens, and reduce them to one column for anything smaller. It might look a bit weird otherwise, if you let them stack.
Alignment can sometimes be hard to achieve whilst maintaining a responsive design layout. Consider alternative placement of elements for shifting screen sizes.
Proximity
Possibly one of the most powerful tools to use in your web page layouts. Proximity deals with space. That space can be in the form of grid margins between columns, the padding inside an input, or just open areas of space between content areas of a page. Don’t underestimate the use of space in your layout. It allows breathing room for users to digest the information that they need without being overloaded. There’s something a little unnerving, at least to me, about having too much content squashed into a page.
Proximity also applies to the spaces between the lines in a paragraph, making it easier to read.
Proximity makes the different between a user friendly interface and a fiddly one. You use nice big buttons on mobile, right? Users with big clumsy sausage fingers will thanks you for them.