Design Basics Part 1: How to design

Design. How do you design something that apeals to the person looking at it and achieves the goal you are trying to achieve?

Well, lets look at the goal of a good design, the main goal would be to communicate to the viewer the idea you want to communicate. This may be indirect, very direct, or even hidden.

Take the Google home page for example, what are they trying to communicate with the design? Well each person who saw it might tell you what they get, but what I get is “simplicity” the design communicates that to me and I myself like a search engine that is simple so I use Google like so many others.

Google Search (Entire page):

Google search home
Yahoo Search (Entire page):


If you wanted to communicate that your website has many different services and show that on your homepage, you might get a design like Yahoo where the home page is so loaded that to me it overwhelms me. Someone else who might like lots of links might really enjoy the design. Thats the point, you want to communicate your message with the design.

For your design to be a success, you would want to communicate the message that will pull peoples interest (People that you are selling to) and then deliver your product. As an illustration: You want to design something that sells computers. You design something that looks old fashioned, the only people you will be selling to is people who like old fashioned things – not computers. Doing this, you will lose sales and the design is a bomb (Not the Bomb, like it should be).

To be successful to sell computers you would have to do a design that communicated what a person buying a computer likes about a computer, to find this out you need to survey those kind of people and find out what they like. But surveying is a whole additional subject. Once you have surveyed and found out what the people who would like computers like about computers that makes them interested in buying computers you can do the design correctly. You then do your design in a way that communicates what would make the person buy.

Knowing the data mentioned, you can do a successful design, providing you know the basic rules and techniques of the area you are working in. The basic rules and technical skill in the area you are working in are necessary to do a good design.

Here are some examples of the technical skills necessary for some areas of design:

Book cover design:
Basic design rules
Photoshop or Indesign (Or any of the programs for designing images)

Internet design:
Basic HTML (So you know what can be done)
Photoshop or ImageReady
Flash (for designing Animations)

Interior Book Design
Indesign or Quark
Basics of Typesetting and Typography

The better you know your technique, the better you can execute your ideas for the medium being designed for.

30 Part Flash CS4 Basics Tutorial

In this Flash CS4 tutorial you will learn the basics of Flash CS4 animation. You will familiarize yourself with the Flash CS4 workspace and learn how to use the various tools in order to create a Flash animation.

Flash has many applications in the web world. Flash can be used for advanced motion graphics and animation. Flash can be seen used for interactive ad banners, portfolio sites and advanced online programs. Learning the basics through these tutorials is a great start to becoming pro.

Flash CS4 Tutorials

  1. Flash CS4 Tutorial
  2. Introduction to flash CS4 authoring environment
  3. Panels and Panel workspace in flash CS4
  4. Drawing in flash CS4
  5. Use of polystar tool in flash CS4
  6. Object drawing Mode in Flash CS4
  7. How the Line tool, Pencil tool, brush tool and pen tool work in in Flash CS4
  8. How to use Ink bottle and paint bucket tool in flash CS4
  9. How to manage layers in Flash CS4
  10. How to make an image big on rollover in flash CS4
  11. Creating Mask in Flash CS4
  12. Moving Ball Animation in Flash CS4
  13. How to create a shape tween in Flash CS4
  14. How to create a motion guide in Flash CS4
  15. Learn how to create a bouncing ball in Flash CS4
  16. Learn how to put multiple classic tween on stage at the same time in Flash CS4
  17. Learn Complex Text Animation in Flash CS4
  18. Learn Create Animations involving Masks in Flash CS4
  19. Learn to create a movie clip that fades as the user moves the cursor away from it in Flash CS4
  20. Learn to create cloud animation in Flash
  21. Learn to import sound in Flash CS4.
  22. Learn 3D Art in Flash CS4.
  23. Learn to create a customizable pop-up window using Flash CS4.
  24. How to create a pop up window in flash CS4 using javascript
  25. How to get an url in a blank window in a flash CS4 action script
  26. How to get an url in a blank window in an xml file
  27. How to put your favorite icon in the browser
  28. How to create a scroll bar in Flash CS4
  29. How to create a basic layout in Flash CS4
  30. How to load pictures in flash CS4 dynamically using the loader component

18 Simple Dreamweaver CS4 Basics Tutorials

In this Dreamweaver CS4 Tutorial you will learn how to create a basic website using Dreamweaver CS4.

You will learn how to Define a site, Create a template, Design your template page, Design your css style sheet, Insert Editable Regions , Create the pages of your site using the template, Link all the pages together, Create a form, Check your site in the browser and, Upload your site and make it live.

Dreamweaver CS4 Tutorials

  1. Dreamweaver CS4 Tutorial
  2. Define a New Site in Dreamweaver CS4
  3. Create a template in Dreamweaver CS4
  4. Design your template in Dreamweaver CS4
  5. Design the CSS Style Sheet in Dreamweaver CS4
  6. Insert Images in Dreamweaver CS4
  7. Creating the Menu in Dreamweaver CS4
  8. Content in Dreamweaver CS4
  9. Insert Editable Regions in the Dreamweaver Template
  10. Dreamweaver CS4 Template Based Web Pages
  11. Formatting Headings in Dreamweaver CS4
  12. Formatting Images in Dreamweaver CS4
  13. Linking pages in Dreamweaver CS4
  14. Forms in Dreamweaver CS4
  15. Dreamweaver CS4 Form Validation Tutorial
  16. Tables in Dreamweaver CS4
  17. Testing the Website in the Browser
  18. Upload your site with Dreamweaver CS4

View all the tutorials here.

Fireworks CS4 Basics Tutorial

This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website.

This tutorial will take you through the making of a website design using fireworks including how to do a logo design in Fireworks.

View the tutorial here.

Create Vector and Bitmap Graphics online for free

 Have you ever wanted to create vector or bitmap graphics but did’t have all of the expensive programs to work in? Well I got wind of this website/project called Aviary which allows you to do just that. 

Create graphics online for free

Aviary has created applications mimicking all of the popular graphics programs out there today. I will list the different programs, what they do and some examples of work created by people. I find it quite amazing what you can do with these programs — and they are all free.  Aviary uses names of bird species for each of their programs.

Image Editor (Similar to Photoshop, Paint Shop, Gimp, etc.) which is called Pheonix and is depicted by a very nice Peonix icon. Pheonix has all of the basic things you need to edit an image which include: clone tool, magic wand, filters, selection tools, smudge, layers and image resizing.

To Give Pheonix (image editor) a try click here.

Here are some of the popular images that I really like. These were created in Pheonix by regular users:


Apple Created with the Pheonix Editor
Apple Created with the Pheonix Editor


Flower graphic created with Pheonix
Flower graphic created with Pheonix


Very cool. Also created in Pheonix



Vector Editor (similar to Illustrator, CorelDraw, Signlab, etc) which is called Raven and is depicted by a Black Raven icon. Raven has some of the basic things you need to edit an image. Raven is new, so more features will be coming out. Some of the existing features include: pen tool, pencil tool, brush tool, basic vector object tool, gradient editor, layers and smart selection. They also have a simple bitmap to vector tool.

To give Raven (vector editor) a try click here.

Here are some of the popular vector drawings that I really like. These were created in Raven by regular users:

Great vector illustration created with Raven
Great vector illustration created with Raven


Beautiful tree with a river and coy fish created in Raven
Beautiful tree with a river and coy fish created in Raven


Visual laboratory (not much like it on the market) which is called Peacock and is depicted by the Peacock bird. Peacock enables you to create amazing images with the use of filters, images and other mathematical effects. This application can be daunting at first, so be sure to watch the video on how to use it first.

To give Peacock (color chooser) a try click here.

Here are some stunning images created using Peacock:

Effect created using Peacock
Effect created using Peacock










Created in Peacock
Created in Peacock


Color chooser and mixer (not much like it on the market) which is called Toucan and is depicted by the colorful Toucan bird. Toucan enables you to create correct color compositions and includes and complimentary, split, etc, color mixer/chooser. You really have to mess around with it to get what it does. It is important for any kind of graphic design when having to choose a number of colors and make them harmonic.

To give Toucan (color chooser) a try click here.

Many more. In addition to the above 4 applications they are supposed to be coming out with many more useful ones. This is a list of the ones I think are quite useful:

       Desktop Publishing (InDesign, Quark Express, etc) called Owl.

       Painting Simulator (Corel Paint, Photoshop, etc) called Pigeon — haha.

       Smart Image resizer (Genuine Fractals) called Woodpecker.

       3D Modeler (3DS Max, Maya, Blender, Sketchup) called Hummingbird.

       Font Creator (TypeTool, FontForge) called Ibis. (This one is particularly exciting to me).

There are more, see them all here.