Oct 14 2008
Web design terms, the basics
Before we move forward with the “What makes good web design?” series, I think it’s important to discuss/define the basic terms you will be reading about at Web Substance Meets Style. Now you’re probably thinking to yourself “I already know these web design terms,” but I would challenge that. I’m sure you know the terms, but do you understand them? That’s the key difference.
If you already know the specific differences between web development and web design, or if you understand why CSS is so important (not just that you can do cool stuff with it), consider yourself ahead of the curve—this will serve as a nice little review. If, however, you want a better understanding of the elements that make up web design for the sake of improving your own, get out your pens and take some notes!
The Basic Terms
These are some of the basic terms of web design. I think it’s important to take away three lessons from this list:
1. CSS is important, and not just because you can do cool stuff with it.
2. There is a difference between web design and web development.
3. Content and design are two different things and should be treated as such.
Let the list begin!
CSS (Cascading Style Sheets)
A standard for specifying the appearance of text and other (usually graphic and layout) elements. CSS lets you separate your content from your design which allows you greater control over both. This is important, so I will repeat it. CSS lets you separate your content from your design. Taking the job of formatting content from HTML is CSS’s first priority—not making cool navigation lists nor hiding and displaying DIVs.
CSS’s two main jobs are layout (position, alignment, width, etc.) and style (typeface, color, border, etc.).
Design
Generally in graphic form, design is the artistic and technical work prepared in the early stage of web development. (See web design.)
Layout
The general appearance of a web page; the positioning of navigation, content, ads, graphics, etc.
Look-and-Feel
The look-and-feel of a website is how its branding and content are reflected in its design. ‘Look’ refers to the appearance of the web elements: text color, font size, header treatments, navigation design, etc. ‘Feel’ refers to the reader’s experience of using the website. For example, is the site easy to navigate, is the content clear and readable, etc.
Navigation
Navigation is the method readers use to move around a website, and comes in many forms:
- global navigation
- bread crumbing
- page-turner
- footer links
- target-anchors (like a table of contents)
Navigation encompasses not just the linking, but the visual elements involved. Website navigation has two primary purposes:
1. provide a means for the reader to go somewhere else;
2. tell the reader where they are.
Secondary purposes include informing readers where they have been and providing complementary design elements for a website’s look-and-feel. Notice how I’ve listed “design elements” as a secondary purpose?
Web Design
Using visual elements such as images, graphics, icons, and content formatting to display (i.e. design) content on the internet. Web design is NOT web development. Think of it this way: web design is how it looks.
Web Development
Using internet technologies such as HTML, XML, CSS, PHP, etc. to develop content on the internet. Web development is NOT web design. Think of it this way: web development is how it works. (Web development does incorporate web design—you need the development technology to layout the design.)
This is not an exhaustive list—it’s not meant to be. The elements above were listed to provide additional insight and to (hopefully) clear up some confusion regarding common web terminology mistakes. If you have terms you would like to add and/or discuss, or you disagree with anything I have stated above, please post in the comments. Conversation is always welcome!
