You'll get your Mac news here from now on...

Help TMO Grow

Subscriber Login

Advertising Info


The Mac Observer Express Daily Newsletter


More Info

Site Navigation

Home
News
Tips
Columns & Editorials
Reviews
Reports
Archives
Search
Forums
Links
Mac Links
Software
Reports
Contact

iTeen
by Steve Siercks, Jordan Streiff, & Chris Rogers
computer news with the teen perspective




How To Build A Successful Web Page: Put It All Together!
by Steve Siercks
December 16th

Hello again! After a short break from this series, we're back with the fourth (and last part) on making a great web page! If you missed the last 3 articles, check them out today! Just follow this link to our recent article section to get the full lowdown. Also, be sure to check at the end of this edition to see some more CONTEST news! Without further ado, let's get started.

Part 4: Design, Design, Design!

You're almost ready to make a great web page, but you still have a major step to go. Today we're going to focus on major design elements that you must include on your web page to make your audience like it and also be able to get the information they want, faster. This is one of the most difficult steps and it may take you many weeks, or months, to create the best design layout for your site. There are basically three steps to creating your layout: "Paper Layout", "Hard Layout", and tweaking/adjusting. Today I will take you through each of these steps in detail.

Step 1: "Paper Layout"

One of the first thing any designer should do when designing something is put it out on paper. By saying this I mean to actually draw a picture of the computer screen and draw in what your page will look like, even to the finest detail. This allows you to easily make changes, with an eraser or whiteout, before putting everything together in "concrete." Here are some things you should think about when putting your basic design layout on paper:

1. Easily Readable: The best web page is one where you can get to the information you want very easily. This can be incredibly tricky sometimes. Some ways to insure that you include using a lot of tables and relatively small, but readable, fonts. Another way is to keep your site organized. Be sure to have all your news in one column and all links in another, etc. You should also have different pages for different things. For example, you should not have one huge main page with everything on it. It is best to have a page for news, a page for links, a page for contact info., etc. There is a negative affect to this also. You do not want to have an excessive amount of web pages because then readers will not easily be able to get the information they want and it will be hard to read.

2. Fun For All: Another thing that makes a web page outstanding is to make it have some spark. This is the thing that makes people come to your site. If you had a choice between a site that used really cool graphics and a site that used the same graphic over and over again you probably would choose the first site (at least I would). Be sure to use a lot of cool graphics that are "iCandy." A really good program that I love to use for graphic design is Adobe's ImageStyler because of its ease of use and the incredible images it creates for its user. Also, a pretty cool thing to incorporate into a web page are some little optional things that put the final touches on your site like java or even some sort of animated gif. Finally, a very easy way to make readers enjoy your site and also navigate it easily are frames. Even though some people are against frames, I personally love them because it makes navigating a site very easy for both the designer and reader.

3. Limits: Everyone has limits, even web page designers. It is extremely important to realize what your limits are before you start designing your site, even on paper. You do not want to start your design on the computer and then realize you have no idea how to do something and have to start all over again because, well, that would suck! A good way to cure this is to either change your design to incorporate something else instead of that one thing, or find someone that actually knows how to program it and bribe them to do it for you :). But, in all seriousness, remember your limits the whole way through.

Take this advice and your paper layout design should be done in a couple days. Don't be freaked that this is what your web page will look like because you will be able to change it a little bit in the next step of web designing 101!

Step 2: "Hard designing" your site

After you have completed your paper layout it is time to start on your hard layout. This is the time when you go to your computer and get the ol' HTML (Hyper Text Marking Language) program open and ready to program! Many people get confused on this part of design, so let me take you through it step by step:

1. Pick an HTML editor: The first thing you should do is pick an editor that you like and feel comfortable with. If you are a novice HTML editor, don't go for one of the professional design programs because you will just get lost in the process. Some good all-around editors are Claris Home Page, Microsoft FrontPage, and Adobe GoLive. There are many other programs out there, but these are the easiest and also most versatile. (If you are a first time editor, most programs come with a tutorial. I suggest going through those before you actually start designing on your desktop).

2. Put in rough details: Start your design process by putting in the minor details. Instead of the real images, leave in spaces for them. At this point, you might only put in text and other rough details like links, contact info, etc. You can change your paper design a little, but be sure not to change it all together without drawing it out first. The reason you want to put in the rough details first is to see how you like it before you complete your site. If you don't like the way your site looks, you can easily go back and change stuff without messing the whole thing up.

3. Design Graphics: Now it's time to design the graphics that will appear on your site. The first graphic you should design is the main logo. Even though you should have thought about this in the paper design step, it is now time to actually design it. The main logo should be a summary of your site that people could look at and say, "Oh, this site is about..." It should include your site name (duh!), but also some images that have to do with your site. It adds a little something to your site that I personally like. The next set of images you should design are your navigation images and also content page images. The main thing to think about when creating all these images is to make them all flow and also to have a common theme running throughout. Take some pride in your images because it helps attracts your audience and also creates "iCandy" for your site!

4. Put in the details: Now that you have all of the details ready to put in the site, its time to include them in the party! One by one, begin to put in your images. Be sure to do this slowly and carefully because this is one of the last chances you have for adjustment before your site goes live to the World!! If you don't like one of your images, just go into your graphics program and change it around until you like it.

5. Add in links: Since everything else is set in your web page, it's time to put in your links. Be sure to put in the correct links because the worst thing that can happen is that your site goes up and some of the links don't work. Even though this probably will happen, it is best to avoid it now because some links are hard to fix once they are up (especially image maps).

Even though there is a lot to designing a web page, it should be a fun and simple process.

Step 3: Proofing and Uploading

You're almost there! This is the last step before your page is uploaded and ready for the world to see. This is also one of the most important steps of all of the steps given in this lesson. It's to proof all of your work and make sure it to your liking. Some things to look for when you are proofing your web page are spelling, unity, coherency, placement, alignment, readablilty, "iCandy", and how much you like it. Even though it might be hard to change parts of your web page now, it is always best to try. The worst thing to do is to upload your site with major things missing or too much stuff in one place.

Wait, speaking of uploading.. It's time to UPLOAD YOUR SITE! Yes, thats right. It's the moment you've been waiting for. Now that everything is ready and proofed, you are all clear to upload at will. Some things to remember when uploading are putting the correct links in the correct places and to not rush it. The more time you spend now, the fewer problems you will have when you go to check your web page. I would upload my images before I upload my pages because you will then be able to preview each page after you upload it with all the images up and running. That way you can tell if you have a problem before you even upload the whole page.

CONTEST NEWS! CONTEST NEWS!

Now that you're done with your web page, it's time for some more contest news. **All entries are due January 15th at 6:00pm PST**. If you missed the contest information in last edition's article, be sure to check it out today. Also, if you have any questions that you need answered, feel free to email me at steve@macobserver.com!

It has been a pleasure working with you on creating your web page. Have fun with it and may it last for a long time.

See you soon,

Steve Siercks

iTeen Online


iTeen Most Recent Columns

iTeen Archives


Offering computer news with the teen perspectiv, iTeen Online started with a weekly column at theimac.com under the supervision of Robert Aldridge. When they realized that there was a huge demand for teen computer news, iTeen Online was born. iTeen Online posted daily, original content that anyone (including adults) could read. Hits soared and iTeen Online became the number one source for teen computer news.

Now iTeen Online has once again became iTeen. At The Mac Observer the iTeem will produce a weekly article that will air on Thursdays at MacObserver.com. In addition to the weekly article, the iTeem will give you the same reviews and content that you're used to at iTeenol.com.



Today's Mac Headlines

[Podcast]Podcast - Apple Weekly Report #135: Apple Lawsuits, Banned iPhone Ad, Green MacBook Ad

We also offer Today's News On One Page!

Yesterday's News

 

[Podcast]Podcast - Mac Geek Gab #178: Batch Permission Changes, Encrypting Follow-up, Re-Enabling AirPort, and GigE speeds

We also offer Yesterday's News On One Page!

Mac Products Guide
New Arrivals
New and updated products added to the Guide.

Hot Deals
Great prices on hot selling Mac products from your favorite Macintosh resellers.

Special Offers
Promotions and offers direct from Macintosh developers and magazines.

Software
Browse the software section for over 17,000 Macintosh applications and software titles.

Hardware
Over 4,000 peripherals and accessories such as cameras, printers, scanners, keyboards, mice and more.

© All information presented on this site is copyrighted by The Mac Observer except where otherwise noted. No portion of this site may be copied without express written consent. Other sites are invited to link to any aspect of this site provided that all content is presented in its original form and is not placed within another .