Design Tips

Creating a website often takes more preparation and planning (certainly no less) than a full color printed brochure.  Identify your target audience, have clearly in mind what you are trying to achieve with your website and plan accordingly.  

You know what you like and what you don't like...but it's hard to put into words sometimes. But that's exactly what you have to do! So wander around the net and look for sites whose style you like...then copy down the internet address (URL). Try to remember and then describe for your web designer the features, colors, styles and effects that you like.  Do you want a bold, colorful theme or a dignified, subdued, pastel style?  Notice what they do to make their sites easy to navigate, functional and quick loading.  Bookmark them.

Define your color scheme, text colors, background, patterns, textures, button and banner shapes (square, capsules, rectangles, trapazoid, shard, round, etc.), borders and effects.  Label your pictures and graphics.  Be as specific as possible.  If possible, place your text in your computer so you can send it via email, reducing laborious retyping.

Be nice to your web designer!  Give them as clear an idea as possible just what you expect.  They can't read your mind.  If you really don't have any style preferences, then tell them specifically, "I trust your judgement.  Let me know when it's done." But usually people do have style preferences, even if they think they don't at first.  So do your homework and be as precise as necessary in guiding your web designer.

Take some paper and turn it sideways (landscape format: your computer screen is wider than it is long) and layout your entire site, from home page to sub-pages and decide how your viewers will navigate between them.

Keep in mind: "What's my goal for this site?" and build to accomplish that goal.  Answer the questions, "What effect do I want my site to produce?"  "Do I want my viewers to: buy something?  or know us better?  or send us information?  or be entertained?  or ...?"  

The balanced use of white/empty space can be attractive; too many complex effects make for slow websites that people won't wait around for; make your site for YOUR average viewer (e.g. screen size, type of browser, connection speed, computer speed, etc.)  Buttons, dividers, bullets, backgrounds, headers, menu bars, 3D logos, mouseovers, animations and javascript special effects can all be created...but it may not be advisable to use them all.  After the initial creative rush subsides, ask yourself "Does this effect/design really propel me toward the goal of this website?"

Click here to view an EXAMPLE PAGE of themes and graphics.

WEB PAGE CONSTRUCTION TIPS & BACKGROUND INFO

  1. Understand that a web page is NOT like other documents.  The pictures, forms, tables, music files, etc. are not actually stored in the web page (like they are, say, in a Word document).  The web page (using HTML) tells the web browser WHERE the pictures are stored (e.g. “in a folder called “images” or in folder in a folder “siteimages/images/photo1.jpg”).  This means that you have to be perfectly consistent with where you put things and how you name files and folders. You can’t move a page, file or folder after you have entered it into a web page unless you also change the web page HTML that points to where it now lives.  Otherwise, the link is broken (instructions are wrong) and the photo will not be displayed where the page said it would be.
  1. The index.htm file (the Home Page) should be in the top level or “root” of your website.  When someone clicks on your web address, all browsers looks for a file called “index.htm” in that location.
  1. To keep things simple, keep all your HTML files in the same folder (usually the top level folder).  Keep all your main photos in a folder called “images” (although Thumbnails that are generated by FrontPage will automatically be placed by the program into the root folder).
  1. Photos that are taken at high resolution (higher than 110dpi and larger than the size you want to display at) must be resized before placing on the web page, e.g. original pic might be 300dpi and 12” x 17”, so it needs to be downsized to 110dpi and the display dimension.  If this is not done, web pages can literally take an hour to load for those that have dialup accounts.  To avoid this step, change the Quality setting on your camera to its lowest setting.  They will still look great on your monitor and will be just the right size for emailing.  Your monitor cannot display any more detail than is captured by the camera’s lowest setting, so it’s a waste of download time to use pictures that are too large (dots per inch and dimensions).
  1. When naming files, it is easier to troubleshoot/edit later if there are no spaces and no capital letters in the filename.  Every file should have a unique filename.  If the digital camera automatically gives the photo the name of “mpj497320000.jpg”, rename it to “tallguy.jpg”.
  1. Usually you’ll just ignore the folders that are created by the web tool (e.g. _vti_cnf , _overlay, _derived, etc.)  Different web tools create their own “extensions” to handle animations or other special functions.
  1. When designing your pages, set your monitor resolution to the current average sized monitor in use (e.g. 1024 x 768 is the average monitor resolution right now).  When your pages look good on your monitor, it is more likely that they will look good on most other monitors as well.  To ensure that the majority will see their sites without having to scroll side to side, some websites will first create a centered table that is 800 pixels wide and the rest of their page content goes inside that table (e.g.  http://sawmillcommons.com/ )
  1. A good way to control the positioning of pics on a page (i.e. the four pics on your homepage) is to create a table with an invisible border, placing each pic into a different cell.  You can then adjust the cell dimensions and make sure the pics display the way you want, no matter what browser is viewing them.  I've checked your page in a few different browsers and monitor sizes and sometimes the last picture was bumped down to the next line. So I did this step on your Homepage so the pics are centered and fit on one line on all monitors.
  1. Although it can be tedious, it is vital to remember the file and folder structure of your website.  If you make a web page, for instance, and later move the photos into another folder or rename the photos, the page will suddenly not work.  It is unable to find the photos at the new location.  Your original web page the pic can be found at “wonderroad.com/images/photo1.jpg” and if you moved the web page or the photo, those instructions are no longer correct and you’ll just see a square with a red X in it, meaning the link between the web page and the pic has been broken.
  1. A web tool (like Front Page, or DreamWeaver, etc.) tries to make web page construction easier, but it does a lot of things automatically that can be confusing and difficult to troubleshoot later on.  It provides a user-friendly interface that is similar to a word processor where you can key in words, insert pictures, change colors, draw lines, etc. just like you do in Word.  But keep in mind that the REAL web page is invisible and is being created in the background by your web tool.  In Front Page, for instance, there is a Tab labeled “HTML” that will show you the real web page in HTML.  To demonstrate this for you, you can make a simple web page in HTML by opening NotePad (not WordPad) and keying in the following:

<html>

<body>

<u><b> Hi There! </b></u>

</body>

</html>

Now save this text file as “test.htm” and open it from your web browser (Internet Explorer, Netscape, Opera, Firefox, etc.)

The stuff inside the brackets are HTML Tags, commands to do certain things.  Web Browsers read these Tags and follow their instructions, no matter what computer you have or language you speak.  The <html> tag tells the browser this is a web page.  The <u> tag tells the browser to display the following letter with an underline.  The <b> tag is for bold.  There are lots of tags and web pages used to constructed entirely by keying in these tags manually.  Now we have web tools like Front Page to make the job easier.  But the REAL web page is still made up of these many Tags and sometimes you have to go into the HTML and manually tweak these Tags to get the web page to display just the way you want.