A successful website design doesn’t just happen. It takes a lot of thought and planning. In fact, web design is quite different than print design. I wrote a booklet not too long ago on design principles in web design and the same principles still hold true. Regardless of the style you are going for, the fundamental basics are all the same. Any good web design will be cogniscent of white space, texture, color, balance, typography, and movement. When these are all aligned, you’ll have a site that flows perfectly. I’ll show you how this is achieved to design a website that is pleasing to the eye as well as being very user friendly.
Purpose
The very first principle is defining the website’s purpose. What do you wish to accomplish? Who is your audience? What is the competition doing? These will all factor into how you design your site. Once you have a clear understanding of what your purpose is, you’ll have a good running off point for starting your design. At this point, you may also want to create a design manifesto to help narrow down your focus for the site.
Content
Next comes content. Make a list of the types of content you want on your website. This would include things like articles, infographics, shop, mission statement, about, and more. If you are including blog posts, you can start thinking of topics that your audience will enjoy and find helpful. Once you have a good list of potential content, you can come up with your navigation and layout ideas.
White Space
White space is the area on a page which contains no text or graphics. It is empty space and not necessarily white in color. This space allows a nice breathing room for the eye to rest.
Pages of text can seem overwhelming to a user. Breaking up text with headings, buttons, lists, or images help to create some white space. It is important to have padding or space around these design elements though. Imagine if you had lots of buttons and images clumped in close with all of your text, everything would get lost in a sea of chaos!
Texture/Images
Texture in web design is the suggested feel of the page surface. This can be accomplished by reproducing patterns of actual textures through photography, shadows, and spacing.
When you can create a look that is almost three dimensional, it really makes the design pop off the page. Having a rectangular flat screen as a base makes this type of design almost seem impossible. However, you will be amazed at what great images, lighting, and shadows can do to that flat screen.
Color
Design colors should work well together and not be hard on the eye.
Color is a powerful tool and when used correctly can give harmony to an entire page. Whether you use bold or subtle colors will depend on your overall purpose of the site. Whichever you choose, you should settle in on just two or three colors that blend well together. There are always exceptions to this, like in the case of an art site, but for the most part stay simple. If you need to pull in a contrasting color to grab attention, do so sparingly. The contrast should serve a purpose and not be random.
Balance
The position, size, texture, and shape of visual weight all affect the balance of a design. When these elements are not balanced, we immediately feel that a page is not resolved which makes us uncomfortable.
One of the most important design principles is balance. All of your design elements should work together to create harmony and structure. You don’t want any of your design elements to have the feel that they are floating off in their own space without an anchor. A good balance also helps to define hierarchy. Images of greater importance should be larger than others. the same goes for font sizes. Headings are larger in size then the rest of your body text.
Typography
A typeface should be useful and appropriate to the page it is representing. It needs to represent the overall style while at the same time being legible. A grouping of fonts should be somewhat contrasting and balanced.
Typography is what adds personality to your words. Although you shouldn’t go crazy with font styles on the body of a website, you can add character and meaning to headings. Keep in mind that not all web browsers will necessarily show your intended font. If you do use a fun font, choose a replacement web safe font that is in styling with the rest of your site for browsers that don’t have the specialty font.
Movement
Movement in design occurs when an object on a page usually appears to be in the process of moving. This is achieved by the placement and scale of the images. It also can depend on the way lines and curves are used in a design.
If you want a certain area of your website to get a lot of notice, you may want to create movement with shapes that draw the eye on a path toward your goal.
