THE BLANK SLATE
Applying design principles to your website
My most recent project has been a really interesting design challenge. Visually speaking, my client came to me with a completely blank slate. Talking through his business concept and listening to his “elevator pitch” as part of my onboarding process helped me to develop a style that translated his needs into visual cues.
It wasn’t easy! I spent plenty of time - maybe a little too much - just thinking about the site and playing with ideas before I started work, then after presenting my initial concept and discussing it with the client it helped him to visualise the reality of his website, and we worked together to turn the design into something that expressed his idea perfectly.
Part of the reason the design was challenging is that my client had a lot of text to get onto the site. Displaying text in a coherent, readable way is tricky. You don’t want to overwhelm the site visitor. You want to get across the main messages. There has to be some use of images and you need to make sure they fit in with the brand image you are trying to convey.
When I’m in the middle of a design I like to take a step back and look at basic design principles to make sure I am on the right track, so I thought I would share them in this #TipsOnTuesday.
7 PRINCIPLES OF DESIGN
01. Balance
Most of the time you want to make sure no single element overpowers another - every item on your site should serve a purpose, even if just to look beautiful. If it doesn’t, then think about removing it.
You can create balance in a number of different ways - one big headline on the left and two or three blocks of smaller text on the right might balance each other for example. Or you can mirror both sides or both halves of the page with each other.
02. Contrast
Want to make one single element stand out? Use contrast. In my client’s case his design was black and white - the most basic of all colour contrasts. But you don’t have to use colour - you can also use shapes, textures, animations or images to create contrasts.
03. Emphasis
Every great design includes emphasis - it breaks rule #1 but there’s a good reason for it. Creating emphasis helps to lead a visitor around your site. Like the clever use of white space and balance, emphasis leads the eye - whether to a call to action, a focal piece of text or a hero image. Just make sure that you are emphasising the parts of your site that are going to work for you, for example, selling your product or clicking on a subscribe button.
04. Movement
Movement is attention-grabbing, and good use of animation is another way to add interest to your site. In my case animation in the form of sliding graphics that merged on scroll down added some interest and helped with navigation on an text heavy site. You can also create the feeling of movement with lines, patterns and image placement. Just don’t overdo it - you don’t want a site that’s slowed down with super fancy special effects or visitors will click away.
05. Repetition
Adding repeated elements to creative pieces give a sense of familiarity to the site visitor and makes them feel comfortable. It creates consistency, and consistency helps to deliver a brand identity. You can use contrast, colours or texture to make your repeated items more interesting, but think about the placement and size of repeated elements - that consistent use brings continuity.
06. Hierarchy
Your site visitors will naturally place more importance on the first things they see, so you need to decide what on your site requires the most emphasis, what’s not so important and what the least important elements are. Each piece of content can be ranked by hierarchy in this way, helping you to determine where to place them in your beautiful layout. At this point it’s a great idea to check back with your client - as really it’s what they want to focus on for their business that matters.
07. Unity
Finding the right balance with the right elements to create a harmonious feeling is the ultimate end result. Nothing should be random, useless or out of place - and if an item feels wrong, it probably is. Make sure that when you add new elements to your site that they fit into the rest of your design. You can play with colour, size or shape - but as a rule of thumb I’d say only pick one of the three to change, and you will retain that sense of unity throughout.
You can read more great tips for using the principles of design to create a great website on this Wix blog https://www.wix.com/blog/2018/07/7-principles-of-design-websites/
Or take a graphic design perspective here in this blog from the Graphic Design Institute
https://www.graphic-design-institute.com/visual-grammar/principles-design/