Basic Web Page Design and Terminology in a Few Minutes

Just like an artist creating a painting, the first question in designing a website is "where to start?" If you're not creative or experienced, here are some clues. Once you have a purpose and a structure to work with your design will be much easier. With modern website development tools, creating a basic web page is the easy part.

To keep it simple and successful, follow these tips: use templates (already coded web pages designed for a specific purpose but without content), re-size your images for quick download, use well written, interesting articles and information, and read up on basic design principles such as color and layout. Many university websites provide good web design tutorials and design principle information.

Here's some terminology you're likely to see:

Server - a computer connected to the Internet (or intranet, a company network) that will send your website data to visitors' browsers on their personal computers.

Hosting company - a service provider with servers for rent which can "host" your web server.

HTML - Hyper Text Markup Language, but really the basic website programming language. It has lots of represented like that. Your web browser uses this to create the displayed web page, called "rendering."

CSS - Cascading Style Sheets, information that summarizes how things on the web page should be displayed, such as fonts and colors.

FTP - a common way to get web page files to the server.

WYSIWYG editor - editor like Microsoft Word that shows you the final version as you type. "What You See Is What You Get" is what it stands for.

HTML editor - a simple way to create a basic web page, using WYSIWYG concepts but producing HTML code.

PNG, JPG, GIF - types of image files such as photographs.

Link - Active text, usually underlined or in color, that the visitor can click to make something happen, usually moving to another web page.

Your recipe for a basic web site will be a mix of some of these - a server with enough capacity to handle your visitors, HTML, CSS and image files to show the text and graphics. If you use a web design program, you may find that your HTML is produced by files with a different name, such as ASPX or PHP. That's just a more advanced, programmable way of doing it.

To bring it all together, you'll need to know the names for the parts of a web page. At the top is the header, the bottom the footer. In the middle, content. Below the header is usually navigation. A large image at the top of the "home page" or "landing page" (first stop on your site) is called a "hero image." All these components have standard uses on web pages which you can see as you browse the web.

With the basics of web design in hand you can create a decent standard web page, or talk clearly with your designer. Visitors will understand your layout because you understand how layout is commonly done. If you want to know where your visitors will be looking first, read a little bit about where readers' eyes travel in the Yahoo Styleguide.

Elements of Good Web Page Design for Educators, Illinois State University
Good Page Layout Design Elements, University of Maryland
Parts of a Web Page, Dakota State University
Anatomy of a web page, Iteracy
Eye Tracking: where do readers look first, Yahoo!
Vincent Flanders, Webpages That Suck, Flanders Enterprises