Web Multimedia Blog

Multimedia Web Design Advice, Photography, Video, music, Mobile Websites, and Company News.

Common Web Design Layouts

joel reinke - Sunday, March 20, 2011

From my last Blog Post, How to Make a Website: Planning Stage, there are 10 parts. I will now go into more detail on step 2 by giving more examples for types of common webdesign layouts...

Please note, as I am building a lot of materials for Edmonds Web Design, for any Edmonds Website, there should be at least 1 ferry boat in your design somewhere! :)  (Ok, sorry, It's an Edmonds Kind of Joke)

From last episode:

2. Sketch Homepage

Don't worry: No artistic skill required, just draw boxes on paper and label them. 
(GLOSSARY OF TERMS at bottom of article)

  • Take a sheet of blank paper. 
  • Think up an ideal layout that matches the image of your business (see below for examples)
  • The Homepage sometimes has a more graphic layout than the rest of the pages, but it can be the same format as the rest of the pages too.  Some standard layouts for web pages are:
    • Header with Left Sidebar,
    • Header with Right Sidebar (common for blogs),
    • Left Sidebar Navigation,
    • Header + 3 columns. 
    • Option for all of these: have a footer or not
  • Some other, less standard formats are:
    • Fixed Footer Navigation,
    • 3D Layout,
    • Flexible Size Format

As a better reference for this important step, I put together small images for each of these layout types to help give you a better idea of what are standard web site layouts:

Header with Left Sidebar

A common layout. The left Sidebar is often for Navigation, but it can also be for other things and sometimes the navigation is in the Header. The Header often contains the Logo, tagline of the company, sign-in area, search bar, and important Links.  Often there is a Footer but its optional. The content section changes for each page but the other elements of the page stay the same for most of the website.

 

Header with Right Sidebar (common for blogs)

Just like above but the Sidebar is to the right.  Because the emphasis is not as strong with the sidebar on the right, the CORE navigation isn't usually in the Right Sidebar but blogs use it for things like Archives, Tag Clouds and more.  It puts more emphasis on the Content which can be good.



Left Sidebar Navigation

No Header! You have navigation in the left sidebar and a logo above it. Content start at the top of the page. Again, footer is optional.




Header with 3 columns (Left and Right Sidebars)

Like some of the others but the content is between a left and right sidebar.  Usually for web sites with a lot going on and many different categories of content.




Fixed Footer Navigation

The Footer on this one is the key.  Not as common of a layout, but useful for multiple reasons.  The Footer is locked to the bottom of the webpage and never moves.  It should always be visable.  The navigation is all in the Footer. It's kind-of like the layout on an operating system like Windows. Another advantage is the Content comes first. Disadvantage is it might throw visitors off.



Header + Content

Super basic but common layout: Just a Header then Content below. Can be a great layout, just didn't need a picture to explain that one.

3D Layout

A fun creative layout that uses 3D to create a new, unique browsing Experience. Unlimited possibilities but you have to be careful to not throw off your visitors.  Too many possibilities to go into here.


If you have other layouts you know are very common that I missed, please comment to let me know of those other types and I'll add them.


Glossary of Terms

  • Header - Top section of each page on a website that can include: logo, tagline, links, navigation, etc. Not absolutely needed for a web page but very common
  • Footer - Bottom section of each page on a website that can include: links, copyright info, address, map link, widgets, or anything you like
  • Left and Right Sidebar - Verticle section of webpage that is next to the Content that includes links, graphics, tools, widgets, content summaries, or just about anything.  Usually repeats on all web pages on a web site.
  • Content - Section of the web page that holds the important info for that page. It usually changes for each page on a site, whereas the other elements stay the same (like the header, sidebars, and footer).
  • Website - All your web pages for your site, as in everything at www.your-domain.com
  • Webpage - One, individual page on your site that has content plus a header(optional), footer(optional), sidebars(optional), etc.

How to make a website - Step 1

joel reinke - Monday, January 24, 2011

Web Design Step 1: Planning Stage

Intended Audience: Anyone looking for advice on setting up a website, with basic internet skills

This is a very broad topic, but I will focus on helping you get things ready to build a successful website from the ground up.  This blog post will be about the planning stage, future posts will continue to the next steps.

Requirements: For this post to be of value, I will focus on writing to people with a basic internet skill set.  No super technical skills are required, but you should have familiarity with using email, uploading picture files to the web, using facebook or other social networks (not absolutely required), and using a digital camera device of any sort (cellphone camera, point and shoot, or anything that takes pictures) (taking photos will be in a later step)



We'll start with a checklist of logical items to get you from idea to online:

  1. Come up with a web address and some alternatives in case it is taken
  2. Sketch out a very rough sketch of what you want your home page to look like
  3. Maybe the rest of your pages are layed out like your home page or maybe they have a different design, if different, sketch this out too
  4. Do you already have a logo or a "text-logo"? If so, get the graphic file accessible and ready to use.  If not, design one or hire someone to design one
  5. Decide on which pages you want to have on your web site. Examples: Home Page, Blog, About Us, Products, Services, etc. Do you want an online store? Do you want to start your own Social Network? etc...
  6. Build a team of people in your company, organization, group, or hire a team, for dealing with the many parts of keeping your website updated
  7. Decide on what important images you want on your website.  Will you photograph these things or hire out? Do you have a style you want to go for? 
  8. Also, if you want video clips, animation, audio, or other media: Define what you want 
  9. Start thinking about how people will find you on the internet. What search phrases would you want to come up for?
  10. Define a budget for the project.

That's enough for now. Let's focus on these 10 items to planning a successful web design. (If this sounds too complicated to manage, Contact Us to hire us for this planning stage)

1. Web Address

Wouldn't it be nice if your company name + .com was always available?  Unfortunitely, many good web addresses have been parked on or sat on because of the low cost to set these up and potential high selling cost.  If you can get your name.com, that would be the best, otherwise: time to get creative.  Try to stick to .com and play around with different options for phrasing the shortest permutation of your name or an industry category representation of what you do. Real Important Advice: If you find your name is available, don't wait and come back to it later.  Buy it now! I found a good name once, took a break, came back, and someone parked on it!  So sad. Once you start shopping, be ready to buy. Cause the internet is smart enough to figure out what people are looking for, especially for web addresses.  Some nice web sites to buy domains at are www.bluehost.com and www.godaddy.com - It's usually about $10 per year for each web address (though this could change at any time)

One other Search Engine Optimization aware type tip: You should probably buy your company name + .com if available, but also consider this: if you know your keywords or search phrase you should probably buy a domain name made up of the keywords or phrase separated by hyphens. Like: www.seattle-mice-experts.com if that's what you do. Your search results LONG RUN will thank you for it!

2. Sketch Homepage

You don't have to have any artistic skill to do this! You'll mainly be drawing boxes and labeling them.  Take a sheet of blank paper.  Think up a fun layout that matches the image of your business.  The Homepage sometimes has a more graphic layout than the rest of the pages, but it can be the same format as the rest of the pages too.  Some standard layouts for web pages are: Header with Left Sidebar, Header with Right Sidebar (common for blogs), Left Sidebar Navigation, Header + 3 columns.  All of these usually have a footer as well.
Some other, less standard formats are: Fixed Footer Navigation, 3D Layout, Flexible Size Format, and many more.  Don't feel limited by any of this, just come up with a layout you are happy with.  View my blog on Common Web Site Layouts for more info on this.

3. Other web pages

Like step 2 above.  Just determine if you'd rather have a standard format across all pages, or if you'd like your home page to be different, or if you'd like every page to have its own style.  You should have standard elements across all pages even if you want every page to have a unique style.

4. Logo

If you have a logo already, but its optimized for print (like 1,2,3, or 4 color design), you may want to make it full color for the web. It just might look plain on the web if its not.  If you're starting from scratch you may want to work with a company to develop this professionally for you.  Two prevalent types of logos are: Text Only Logos, and Graphic Logos.
Text Only Logos: These are popular today. Its just the company name in some stylized font or even the text turned into a graphic version of the text.  These logos can be nice if you just want to focus on the company name or its hard to determine a graphic that pairs well with your name.
Graphic Logos: Can be a symbol for your company.  Can be a graphic of some sort either paired with the name of the company or not.  Usually its best if the graphics of the logo are clear and somewhat simple so they can be printed easily as well as look good online. 
Some ideas for how to make a logo:

  • A. Take the first letter of your company name and stylize it into a graphical version of the letter that ties into your company theme or product. Then either continue the name or just use that one 'letter'
  • B. Make a Script Style Logo with the First letter or initials of the company.
  • C. Standardize a Corporate Font that matches your Logo
  • You can sketch out the logo to give your logo designer a head start, but you probably should have a professional make the final graphic design

5. Web Pages and Functionality

To save time when you are in the actual building stage of the web design, it is imperative to have clearly defined web pages, including what functionality the system should have such as online stores, social networks, forms for customer input, etc.  Use a separate piece of paper for each page to jot down your table of contents for your web site.

6. Build a Team

If you are a small company with multiple employees start surveying them for technical skills.  Maybe you'll find one really likes photography.  Maybe you have an author in the making ready to be your blogger.  Delegation of these and other duties is an honor and may add plenty of job satisfaction to the right employee.

7. Images and Photos

This topic will be a whole separate blog post, but for now... How important are the photographic images to your site?  To present your company in the best light, do your product images, store images, staff images, or service images need to be absolutely perfect?  If so, you should hire someone to do your photography.  If not, and your images are only small samples for reference, you could possibly do it yourself.  I hope to publish a blog: photography guide for small businesses, time allowing.  Check back later.

8. Media

Make another 'table of contents' list of what media you want on your site or on YouTube.  This includes Video, Audio, Animation, Specialized Graphics, and Interactive Demonstrations or Interactive Content.

9. Search Phrases

The first goal in Internet presence is to have something worth searching for.  The second goal in Internet presence is to provide search engines a spoon-fed way of finding you.  Think about what your company has to offer, then break it down into short phrases that you believe people on the internet will actually be typing into Google.  Write down a page of these short search phrases on a sheet of paper.  At this point, don't worry about checking to see if these are the actual things people are searching for: we'll talk about that more in later stages.  Again, this will be the source of many more blog posts for me, but right now, this is a good start for you.

10. Define Budget

How much can you spend on a web design project?  Maybe it is $0 and you'll have to be a Do It Yourself-er.  In that case, good luck, there are a lot of online resources that can help.  In my experience, a lot of my clients started out trying to Do It Yourself and ended up unhappy with the results: So they hired someone.  There are just so many things to know that it's nice to have some help.  There is a long, steep learning curve for the skills required for anything more than utilizing a template and adding your own text.  Adding graphics to a template web design can be moderately easy, but you have to have a good graphics editting program to get the graphics to exactly the right size (in pixels wide by pixels high) and optimized for web (just saving as a JPG can result in a file that's 10 times larger than an optimized image and will slow down load time significantly). Another factor is: How much is your time worth? How many hours are you willing to spend trying to design the perfect website? Would you make more profits if you spent that time doing what you do best, and hiring someone who already knows the ways of the web to make your design?

I'm not trying to discourage you, I'm just hoping to educate, and present a realistic picture of the basics of what is required.  If you are a wizard with the computer but not into web design yet, you could probably manage, just contact me if you run into problems.  I'd be happy to answer some basic questions at no cost or hire out if its more complex.

I've seen many web design firms that their minimum cost for a custom design is $3000 so that's scared off a lot of potential clients and has made people assume that they can't get a custom design for less.  I offer many designs for well under that cost (and not just a template based design) and can even help if you're designing and run into specific problems.

Thanks for reading, I hope to provide many more useful blogs on related topics in the future, so please subscribe to my blog via RSS.

-Joel Reinke