We Offer Custom

Website
Design

Specializing in web design, web development, Wordpress & Offering Ongoing Tech Support

Web Design Fundamentals

It's relatively easy to get confused in today's "Web Design" market, as there are so many different terms with which to keep up. Yet, even with the 'latest and greatest', the fundamentals have remained essentially the same. The following is part of the process we go through in the design aspect of website development, although the process can take on various overt forms, including sending you "mockups" of your design. Behind almost all design are the following fundamental principles.


The Layout


Since before the advent of the printing press, even before letters or the written word begin, there has been 'the layout'. It's the most basic or fundamental aspect of web design or 'print', despite what many would have you believe. KISS method applies here! Even the caveman needed a wall on which to draw!

As we always do, work from the 'whole to the part', so first... the context.

Tabula rasa, means "blank slate" in Latin and originates from the Roman tabula or wax tablet used for notes, which was blanked by heating the wax and then smoothing it, to give a tabula rasa." ~ wikipedia


For our purposes, this will be a blank 'webpage', which can be 'served and rendered' on many different devices: computers, cellphones, tablets, laptop computers, big screen TVs, and the list goes on. For now, just remember 'webpage', which is our 'design context'.
Webpage!
webpage

Next step is to DESIGN a structure, one in which we will start to place the information/media. This brings us to...

Rows and Columns

Well-known Layout
stockmarket1
Our entire lives we have been surrounded by the columns and rows look in almost all major media, from print to video.
How about a News Paper?

In short, we superimpose a design 'grid' on our webpages, whereby we can break the whole into it's constituent parts, which we will eventually populate with information/media. For our purposes, we will consider the vertical alignment, as you will see, horizontal almost takes care of itself (we read left to right... horizontally).

superimpose
superimpose2

Text, Colors, & Imagery (or Multi-media)

Now that we have a place for objects to go, we can populate the areas! For our current example with the news article:

But, if you take a look at almost any webpage, the concept is essentially the same, the only thing that differs is how a designer either consciously or unconsciously goes about his/her work, as there are various techniques to use. (Without getting into all of those fine tooth comb distinctions, we are simply pointing out the essential principles of 'the layout' here for you. It's the basic 'design process'.)

Here are a few design overlays to help you see how it's inherent in almost every webpage on the Internet and in most media today:

Yes, there is a bit more to it, but when we work together, we will take it step by step and make it as easy as possible. No worries, if there is something that you need more or deeper explanation, we can do that. :)