Rodney Keeling

When designing websites, there are a number of design principles and conventions by which most web designers abide and follow. These guidelines not only help the design process flow smoothly, but they tend to result in a much nicer user interface and general design for your web traffic. So without further ado, I shall dive into a few of these concepts and guidelines.

1. Utilizing A Grid System
Within the last few years, as graphic design and websites have begun to merge, consistent flow of information has become of huge importance. Take a look at any website with a good design; it will have its information aligned vertically, and many times even horizontally. A grid system is essentially a visual framework for managing content and information. Its extent of importance has caught the good ol’ people over at 960 grid system, as they have created templates for web designers to work with in many file formats that are to be used as visual aid for structuring a grid system. An example of a website using a grid is the very page you’re looking at! Notice how that photo of me at the top aligns with the photo within this blog post and this post’s title? Also, see how the navigation aligns with the sidebar below it? Uses a grid layout tightens your design and makes it easier for web traffic to follow content.

2. Font/Typeface Pairing
This one is generally more obvious and to some may seem silly to even mention. Choosing fonts (normally 3 or less) that are consistently used throughout one’s website is vitally important. From a UI theory/psychological aspect, keeping consistent with your fonts and what they represent hugely impact the way a visitor moves through your website. Say, for example, if I used Myriad Pro as my only font for this website. The different text-types (headers, paragraph text, titles, etc.) would get mixed up easily and visitors would get angry and leave. Conversely, the same effect would occur if I chose 7 different fonts for each type of text on my website. For this design, I chose to have Gill Sans as paragraph text, and Chunkfive as any type of header/title text. This guides your eyes along the different sections of my website. And just for style, I used Creampuff as the text under my name at the top of the page. Last thing to note is that a good idea when choosing font pairs is to choose two different types of fonts. For example, a serif and a sans-serif font are easier to differentiate than two serif fonts that slightly look different.

3. Consistant Color Scheme
Just like with font pairing, a consistent choice of color usage is vitally important for navigation and understanding the different sections of a webpage. I won’t get into color theory or anything within this post, but a basic understanding of nice color pairs and their connotations is great knowledge to have. Whatever your color scheme is, be sure to change link colors, border colors, background colors, and any other CSS attribute that may be colored, and keep it consistent. Simply Googling a query along the lines of “color matching” will yield hundreds of websites that mathematically produce color schemes based on color theory principles. They help a lot when you can’t find a nice color pair.

4. General User Interface Tips
Whether you have or have not noticed, there is a general pattern of placement when browsing websites. Perhaps the main logo of the website is on the top-left of the page, the navigation is either horizontal on the top of the page, or vertical on the left side of the page (unlike the case of my website ;) ), and the relevant content is in a relevant, logical order as you browse down the page. Also, certain keywords help you out when looking for information on a website, such as Contact Us, Home, Store Locator, and more. These keywords and placements of crucial website entities have been stained onto our brains, and when we don’t see these, we get angry and leave the website. Okay, perhaps not, but these things really help users navigate and find information. So, inherently, it is generally a good idea to stick to these conventions when designing for a company or organization. These are generally thought to be abided by portfolio websites, too; however, you may have seen crazy-cool Flash websites that have crazy navigation and 3D animation that is certainly non-standard. This is totally fine because if every website had the same structure, life would be boring! Just keep these conventions in mind when designing for your website, or a company’s website.

5. Text Leading, Line-height, and Size
Before I explain how to handle these terms, I feel I should explain what they are. Text leading is essentially the space between characters in a body of text; this determines if THIS word is scrunched together or is set to a readable spacing of letters. There is much controversy of the difference between leading and kerning on the web, but since CSS does not yet allow individual character spacing adjustments, I call web character spacing leading rather than kerning. Line-height is the space between each line in a paragraph of body of text. For example, this current line of text could be set so that it is super close or super far away from the line above is. But there is good reason it is neither of those. Finally, I think text size is quite obvious – it is the size of the text. In CSS, there are a few units of measurement to use for font-size, which are Points (pt), Pixels (px), and Ems (em), Exs (ex), Picas (pc), and Percentage (%). In my days of coding, I normally only use pixels, ems, and percentages. But there is nothing wrong with using others; just be consistent. Back to the other two terms, leading & line-height, the general size for line-height is between 1.1em and 1.4em (FYI, an em is equal to the size of the text of its current text-size. For example, if the font-size is set to 10px, and a line-height is set to be 1.3em, then 10 x 1.3 = 13px ). Leading is generally set to to either 0em or 0.1em for easy readability.

Please post questions or comments below! Cheers!

Tweet This!