First let me preface by saying the best painters would not necessarily make the best web (or graphic) designers. At their core, art is subjective personal expression while design is objective problem solving.
I believe the most important principles of web design are:
Space, Contrast, Hierarchy, Proximity, Balance and Alignment.
Space is first on the list because, in my opinion, it is the very thing that separates amateur design from professional looking design.
Artist paint to fill up space and âfilling up spaceâ is never the best option in design.
Appleâs website is the poster child for this as they always design large amounts of white space on their website and their products. White space, which is literally the empty space on the web page, gives a website a premium feel to it and it puts more focus on the content.
Contrast is the visual differences between two different things (usually with lighter and darker colors), and hierarchy is the proportional differences, which can be size, weight, or position.
These two are related because they both control how your users browse through your site.
When you first go to a website, the very first thing your eyes see has the most prominent hierarchy. This is important to know because you as the web designer can choose how and in what order you want your users to navigate through your site.
This can be done with a large image or big, bolded text, or even animation. Thatâs the purpose of headings (H1, H2, H3, etc.) in web design. The text with the largest font will naturally be read first, followed by the next largest on down to the paragraph text. And itâs the same with images. Larger images will of course be looked at first before smaller icons.
Contrast has much to do with legibility. Good contrast in design means you donât have really light text on a light background, or it can used to make something stand out against another color like a CTA, Call to Action, button (âBuy Nowâ or âJoin Programâ).
Budweiser.com is a good example of using hierarchy, immediately grabbing the users attention with a large headline and a large hero image in the background that is related to what they have to offer.
They used good contrast with how they slightly darkened the background image to make the white text stand out more. Also, the red âSign Up Nowâ CTA button stands out from the background so it is easy for users to spot.
The site below is a bad example of hierarchy because you donât know where to start on the page. Itâs a little confusing because it has no headline or image to give context as to what youâre looking at.
Also this is a bad example of contrast because itâs really hard to see the blue links in the table on top of that textured background.
https://imgur.com/h9YJfzU
Proximity is basically how close or far groups of elements are to each other. You can (usually) always tell what group of people are together even in large places like airports and malls because families, couples and friends hang out closer to each other than to the other strangers around them.
Itâs no different in web design. You always want to group related things closer together on web page and further away from other things.
Yahoo.com is a good example of this. Even though they have a really busy homepage, it actually looks pretty well organized and not chaotic because of the proximity of the content. They have the main featured articles, the sidebar items are grouped together and there is enough space between the sidebar and the articles that tell you that they are separate from the main content.
Space (even a small amount) creates a natural divider so you donât always have to put a vertical or horizontal line divider to split up content.
Craigslist.org is another really good example of proximity between the sections and links. It wonât win any web design awwwards, but this is definitely what good design looks like.
Balance and alignment are also closely related.
Balance is the visual weight of a design, meaning does the design look âcenteredâ, not leaning too far to the left, right, top, or bottom.
Alignment is more of a science than an art. Thereâs a good reason why Google.com, for example, has always aligned its search results to the far left of the screen and not centered. We Americas, and most other countries, read left to right, top to bottom.
So aligning content that has to be read, like search results or blog posts, to the left makes it far more readable than content center aligned or right aligned.
Grids are used in design to help resolve any alignment issues. When elements are properly aligned it makes the design look really balanced, which in turn makes it look professional. But donât get me wrong, your design doesnât need to look âboxed inâ in order to get the alignment right.
Thereâs a concept called âasymmetrical balanceâ. Elements donât have to be perfectly aligned the same on all sides. But, the weight should be equally distributed on both sides so it will look balanced or âcenteredâ.
Compare these two websites, 960.gs and Stripe.com.
They are both technically balanced but 960.gs on the left is a symmetrically balanced (which makes it look âboxed inâ; while Stripe.com on the right is asymmetrically balanced. Even though they use text on the left and a large image on the right, the design still looks âcenteredâ.
You will find all of these basic principles in any good design because all of them combined are what make good, professional looking design.
Now you can go much further to incorporated things like depth. Shadows are the most common way to give elements depth but itâs not the only way.
Using contrast and another principal called proportion can make elements appear to have depth.
Artists achieve depth in their paintings by using the contrast of warm and cool colors. Warm, brighter colors, can make something look like it is âpoppingâ off the page more than cool, dull / muted colors.
In the painting below, you can see how it uses warmer colors for the pumpkins in the front and cooler coolers for the ones in the back. The artist also makes the ones in the front proportionally larger than the ones in the background.
This gives the illusion of depth.
Of course there are other ways to do this in web design (other than shadows).
If you ever ran into a modal or a popup (we all love those things!), most of them darken the background which makes it appear as if itâs out in front of the other page content.
Feedly.com does this when you click on an article to view it. It darkens the entire background to make it look as if the the slide out is floating out in front of the other page content.
Gradients give the illusion of depth especially with buttons. This is useful for user experience to make buttons look like they can be pressed, just like in the real world.
Amazon.com uses very subtly gradients on their âAdd to Cartâ and âAdd to Listâ buttons along with thin, darker colored borders which makes the buttons seem like theyâre rounded and poke out off the page a little bit.
These same principles are used to make good graphic design (flyers, ads, brochures, etc.) as well; and is what separates professional design from amateurish looking design.
Hopefully this helps answer your question a little bit betterThis text will be hidden
