Website Planning Guide

We have created this simple guide to help you better understand how to frame your website navigation and organize your content efficiently and better understand Image sizing, resolution, and compresson for use on your website. No matter which system you use to build your website you will need to consider 5 major factors:

1. Layout      2. Font Family and Size      3. Color Pallet      4. Navigation Menus      5. Content


1. Layout - Conceive how your site will look:  The layout you choose may limit space in certain parts of the page forcing you to put menus or other content in other areas so although the "look" is considered an astetic it defines where your navigation and content will go.



As a general rule you will only need 2 layouts your Home Page layout that  generally has more graphics and states your primary offer / message and one for your internal page layout that uses similar page elements (usually a menu or header) that maintains the same uniform look as the home page but has more room for content.  Its wise to get these pages done first since you will clone the Internal Page layout for use on all other additional pages.

For example if you desire a "layout" that uses a large logo that can't be covered and still want an upper horizontal menus you may have less room for that menu resulting in  shorter menu names  so that the width of the menu doesn't wrap causing you to use  | info | about | service | short form menu names vs larger full size names | information | about us | services we offer |  which take up more horizontal room  or you may decide to consolidate your menu putting titles as hidden submenus so you can use fewer main navigation menus or you may find that to meet your needs you must change to a different layout all together with vertical left hand menu or simply change your Logo to a more vertical aspect ratio so it fits your concept better so as you can see all of these things become factors in what decisions you will make for your layout.



2. Font Family and Size:  The modern practice of web design is to define your Font Family and Sizes in advance and not mix more than 2 Font Families or more than 4 Size Variants within a website.  This insures that your website has a uniform look and consistency between pages.  Most systems will allow you to define your Fonts and Sizes in your Preferences or CSS (Cascading Style Sheets).  The reason picking your Fonts is an early factor is larger fonts take up more room causing colums to extend in height or consuming wider width so you don't want to do a perfect layout only to find that when implimenting the fonts you desire it gets all messed up so define then right at the beginning.

3. Color Pallet:  Most sites will define their basic color schemes early on such as background color (or if you want to use an image as background) as well as overlays , color boxes, and Font Colors.  By getting the Color Pallet out of the way early which also may affect your Font colors you have all your creatives out of the way so you can then dig in and start defining Navigation.

4. Navigation:  This is where you define your Menus and if desired any Sub-Menus and finally which Pages will be under each section.   You can define your Navigation offliine on a piece of pager or word/ text document or by simply digging in using what ever tools you are building your website.  The key is that you are defining the navigation framework first and only after its completed and to your liking do you go back and fill in the content. 

In the example below you can see how the main Menus are defined on the left with Sub-Menus indended and Pages double indented.


Home
About Us
          Mission Statement
          Our History
          Our Staff
Services
     Automotive
          Auto Service 1
          Auto Service 2
     Tires
          Tire Page 1
          Tire page 2
Pictures
          Gallery 1
          Gallery 2
Hours & Location
Contact Us

5. Content:  Content consists of  Text , Pictures, Graphics, Video, Sound Files, Attachments such as .pdf or .docx, and any third party embeded code for social media ie: Facebook or Twitter or Paypal donate or buy now that will be used for each page of your site.

Its a good idea to get all your content in advance such as download stock images and graphics or generate your own logos, banners or artwork using the free graphics tools listed in the Webmaster Resources section and make sure that you have permission or license for any copyrighten content from its provider.

 

Optimizing your Content for the web:  Photos and graphics can be in any of the following formats:  .jpg .gif .png.  Photos from modern cameras are the wrong size and resolution and should not be used for websites directly as the pages will take forever to load if they load at all.


Camera photo files are not only huge in size but  the wrong 300dpi or more (dots per inch) resoltuion.whereas all graphics for the web should be 72dpi. Your best results will be to re-size photos to be no larger than 1920x1080 if they are a background and 900 or less width for normal photos otherwise they may go off screen or take too long to load.  you should use  .gif or .png for clip art and  .png or .jpg for photos and images with gradients.  If you have a very image intensive page the larger or lower compression the image the longer the page will take to load and you may want to set the bit depth of the image to 8 or 16 bit for simple images to make them smaller and increase the compression for .jpeg images to reduce their size which in most cases will not be noticable but will make them load much faster. You can access various free photo editing and bulk photo  resizing tools in the Webmaster Resources section.

Another way to organize your pictures is to Create local folders on your computer that mirror your website:  Keeping photos organized helps you find them when you need them.
 
 

Map out the graphics, photos, links & information you will use for each page:  Determine what pictures, graphics, links and content or content ideas you want to put on each page so you cover all the things you want your website to address. You may want to write out the content for each page in advance on paper or a word document or just write it on the fly once the categories and subjects are outlined.
 

 

Home --------------------------- fampic.jpg  , topborder.png
About Us----------------------- storefront.jpg
     Mission Statement------- logo.png
     Our History --------------- oldbuilding.jpg
     Our Staff ------------------ david.png , joseph.png , mary.png, robert.png
Services ---------------------  warehouse.jpg, pricelist.pdf
     Service 1 ----------------- small1.jpg , small2.jpg
     Service 2 ----------------  servicex.jpg
     Service 3 ------------------ n/a
Picture Gallery --------------- product folder
     Gallery 1 ------------------  dogs folder
     Gallery 2 ------------------  birds folder
Links ---------------------------  http://www.petco.com , http://www.aspca.org , http://www.petcare.org
Hours and Location -------  storefront.jpg , mapquest map code
Contact Us ------------------- forward emails to inquiry@mydomain.com

 

 
File Naming Conventions:  Keep your photos and graphics  organized  and consistent by using all lower case using underscore "_" to separate them into alphabetical or categorical order. Do not user UPPERCASE or sp a ce s  or non alphanumeric characters like #$@()*&^ in file names.

 

 Names based upon category

disneyworld_1.jpg
disneyworld_2.jpg
disneyworld_3.jpg
             zoo_1.jpg
            zoo_2.jpg
    museum_1.jpg
    museum_2.jpg
Natural Alphabetical Order
 
alpaca.jpg
cat.jpg
dog.jpg
     Forcing alphabetical order
 
a_xylophone.jpg
b_kazo.jpg

c_pian.jpg
Chronological order

030511_xylophone.jpg
030611_kazo.jpg

040911_pian.jpg

 


Now that your layout and files are prepared you can begin building your website.  Keep in mind Lowesthosting is not a web design firm but a host.  Even so if you have design questions or want our opinion on work you are doing feel free to open a support ticket and provide links to the pages you are working on or screen shots of layouts and ask us for any ideas or improvements.  We are always here to help.

  • 2 Users Found This Useful
Was this answer helpful?

Related Articles

Working With Web Designers

Using a Web Designer Web designers are professionals who are experts at logo design, photo...

Website building systems

    Building Your Website   OverviewWebsite design is a mixture of Layout, Navigation,...

E-Commerce Options

    Adding E-commerce To Your Website If you sell products or services then you will want to...

Front Page Extension Phaseout

Microsoft FrontPage & Publisher Microsoft stopped making new versions of their FrontPage...

Webmaster Resources

CLIENT RESOURCES FTP:  Upload / Download Your Web Files...