Web Design Basics from Soula Graphic Design

This article discusses the very basic principles of graphic design and gives you an idea what to look for when browsing templates or portfolios so you know what is good work and what is bad. It has been constructed by Soula Design & New Media Nottingham and is to help brand new learners get into the field. If you want to see this work in action visit our site at soula.com.

Balance

The way the elements of a design are balanced on a page is very important; the abstract layout will instantly convey a basic message about your site. Symmetrical or simply balanced sites will create a claming tone while asymmetrical or complex designs will create an excited feeling.

Balancing a website is not as easy as it can be in other forms of media as a website is a dynamic entity, your screen may view it perfectly balanced in 1280x1024 but someone’s 800x600 screens may throw it totally off. It is always a good idea to use a tool or plug-in to view your design in different resolutions before you purchase or deploy the site.  Common solutions to help you overcome balancing a site including using the “float” attribute and centring text or objects. If you are attempting to achieve a symmetrical look be careful not to just centre all elements and end up with a boring or flat design, they are not eye-catching and look extremely amateurish when compared to many sites already on the net. If you are attempting to create an asymmetrical design then remember that it’s into just about piling everything onto one side, you must still create a feel of balance despite the fact your site is not symmetrical. This can be done by placing smaller items opposite large items or even by pitting images against text or solid, dark colours against transparent or light objects.

Contrast

Contrast is one of your most important tools to highlight areas of the site. Without the correct application of contrast a site often appears haphazard and difficult to read. By using the correct amount of contrast in your fonts, backgrounds, objects and styles you will create a much more professional looking design.

Despite what most people thing contrast is about more than colours, it’s about difference. Use whatever tools you have to make text contrast including text tricks like bold, caps and underline where necessary so that your page has obvious “hot spots” for people to review. A great example of this is hyperlinks inside text. Always set your style to underline and change the colour of hyperlinks (preferably the default blue) so that people’s eyes are drawn to them inside blocks of text. Use colour contrast between menus, logos and the main part of the page so that people can easily break these components up inside their minds. Be careful not to over do it though! High contrast pages are difficult to read (white text on a black background or purple and green are just a no go) so remember to consider practicality before creative expression.

Rhythm

Rhythm is sometimes called repetition and is a vital part of constructing a website as it helps your website flow between pages, this gives people browsing the whole of your site a much easier time as the brain will recognise the repetition in the template and focus on the new parts of a page. This is very important as if you keep disorientating the visitor they will quickly become fatigued and are likely to leave the site. It also has value for the branding, if you can successfully associated the website appearance with a brand then marketing have a whole new area to explore. It also means a redesign will have a big impact on the site in the future, a service that will likely swing back round to you if you did a good job in the first place.

I hope this quick guide has given you what you need to start designing your basic website drafts, you should always read as much material as time allows as it will show in the end result.