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):

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
Photoshop
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.

DESIGN BASICS

I will now go over the design basics as I know them and what I think works. Some of this data I have collected from various design books, and some of the data I have seen as I have been designing.

Do not take anything I say here as an unbreakable rule, once you get the feel of design and get familiar, you will build your own style and you will probably break many stated design rules. This is good, I don’t think you need to follow the rules perfectly. The rules will help you get started and the rest is up to your imagination and your best knowledge.

The first thing I will cover is the basic rules of Typographic designing. Typography, meaning dealing with Type or letters. This is a very important subject, type is used in most designs on the market in present time and it has been used since god knows when.

TYPOGRAPHIC DESIGN

Some of the general concepts for this section are derived from Robin Williams: Non-Designers Design Book.

There are a number of basic rules governing designing with type. They are as follows:

1. Have good Contrast in your type and design

Having good contrast in your design is imperative. What is contrast? contrast is essentially the difference between elements and how obvious or not they are. Using correct contrast in your typography can add a sense of impact or sophistication. You want to contrast things that are supposed to be different. For example, the title of a chapter should have good contrast to the main body of text, weather it be with font size, color, typeface or even type style. Contrast can be used in many ways to make typography more comprehensive and understandable.

Subtitles in a book or publication would have some contrast so separate the subsections (not necessarily the same contrast that the title would have — that could confuse things). Italic or bold can be used as a contrast as well as type position and white space. (i.e. indents)

Example of a resume design:

2. Repeat certain elements in your design so that the piece is strengthened as a unit

Repeating certain elements in a design is important. It shows unity and strength as a design whole. There are many ways to do this. Some examples of this are: repeating a logo, using a color scheme throughout a design, coordinated type styles, etc. Another example for magazines is a repeating grid layout throughout.

Example showing repeated elements in a design:

3. Have correct grouping and alignment, this means aligning things that are related and not aligning things that are dis-related.

Group together pieces of information that are related, separate elements that are dis-related. This helps in understanding the relation between all of the elements. This piece of information can be used in any kind of design including web design and packaging design.

Example showing good and bad grouping:
(The bad example also has other problems, but look at it for grouping and alignment)

4. Make sure the type is readable, don’t make it too small, don’t put it over some background where it can’t be read.

If you are using text or type, think about readability. If you want a person to read the type elements, make sure they are big enough to read comfortably. Don’t overlay text onto a design element that would render the text illegible. If you are using text as a design element and not necessarily something to read, you can overlay it and do whatever you want with it.

If you want to use text over an image, try adding an outline, a drop shadow or even a dark gradient over the image:
(There are many other ways to make text readable over an image, I have only mentioned a few ideas)

5. Use the color wheel to enhance design concepts, create contrast or create similarities.

The use of  the color wheel can greatly enhance design and visual concepts. I am not going to cover the color wheel and how to use it. Colors can be chosen to show relation between design elements, color can also be used in the exact opposite way to convey contrast or difference. I have seen many designs and websites where the colors are not coordinated correctly to communicate the message of the site. I have also seen way to many colors used which clutters up the design or layout (This can be handled by reducing the amount of contrasted colors being used in the design).

Here is a very nice color harmony tutorial: read it here

Example of designs using just color and shapes:

Please keep in mind that you should use these design elements sparingly and tastefully. Using too many effects in your webdesign can be tacky and detract from the overall design.

To begin, here is the website: http://jqueryfordesigners.com/

Ajax image carousel

This creates an endless carousel with an html list. It also displays a very smooth scrolling effect. This is very simple to set up and uses jquery. Here is an image showing the carousel. View the code and tutorial here.

Ajax smooth slidedown

Ajax smooth data changer

This creates a panel that automatically switches out a list of divs. A very nice effect for blog or website sidebars that want to show rotating pieces of information in an attractive way. View the code and tutorial here.

Ajax Smooth Image Fade

I myself have always wondered how to do the smooth image crossover fade and this tells you how to do it. The effect is very nice on buttons, menus and even images on display. View the code and tutorial here.

Ajax Sliding Tab Effect

This is a great effect for teb boxes. I see it cropping up all over the web now days. Use it for tabbed browing of information or even arrow based browsing (arrows on the left and right). View the code and tutorial here.

Very Sleek Tooltip Bubble

Very nice use of the JQuery puff effect. This shows an informational popup over the area you want when the user mouses over the area specified. Good for tooltips, information divs and any other popup application. View the code and tutorial here.

Loading a Large Image with Ajax

You have seen progress indicating gifs show up while a large image is being loaded. Ever wonder how to do this? This tutorial tells you how to do this and have complete control over how the image loads. I do not have a picture of this as this tells you how to load any image with ajax. View the code and tutorial here.

Slideout Side Menu Effect

If you have been to the Apple website recently you might have seen this in action. This gives you an interactive side menu. When a user hovers over one of the menu dividers — that menu shows up. Very nice effect (play around with the demo). View the code and tutorial here.

Ajax for Instant & Server Side Form Validation

Most of the new “Web 2.0″ websites have very fluid forms. This is because of the fact that you can lose user’s interest in registering or even buying if it is too hard to fill out the form. I myself have left websites because I found it very hard to get the form to validate. This tutorial shows you how to make a form that validates on the fly, including doing server side calls for user names and such. Quite useful for streamlined user registration. View the code and tutorial here.

There more tutorials and demos on this site regarding Ajax and JQuery. The ones selected here were selected because I thought they could be very easy and useful for web designers who want to have a design edge without haveing to spend too much time coding ajax effects.

The 2 problems we face. The first one is that the PNG format is not fully supported on all browsers that are in use today. The way we handle that is with a simple include into the main template file of your site.

Here is where you can get the javascript file click here.

Include this file into the header of your main template file:

<!--[if lt IE 7]>
        <script type="text/javascript"
        src="/resources/unitpngfix/unitpngfix.js"></script>
<![endif]-->

This is a hack to tell the browser to include the”unitpngfix.js” file if the browser is IE 7 or below.

The next problem is that IE positions things differently. We will be using a similar hack to go around this problem. Here is how the code will look.

<!-- Floating image -->

<!--[if lt IE 7]>
  <div style="position:relative; margin-left:-800px; margin-top:0px;">
<![endif]--> 

  <div style="position:relative; margin-left:0px; ">
  <div style="position:absolute; clear:left; left: -50px; top: -59px;
  margin-left:0px;">
  <img src="yourimage.png" width="332"
  height="178" style="clear:left;" />
  </div>
    </div>

<!--[if lt IE 7]>
  </div>
<![endif]-->

All you have to do is add your image path and then change the values in the “left” and “top” to adjust the position of the image. You will have to adjust the values in the “if It IE 7″ section while looking at the image in Internet Explorer 6 or 7.

I hope this helps anyone who is having trouble with absolutely placing PNG images for cross browser compatibility.

View the tutorial here.

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.

View the tutorial here.

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.

Building Rich Internet applications can take a long time for those who do not have whole teams of newly graduated programmers. For those who are trying to put a rich application together with efficiency and in a time frame that is realistic there is a solution.

The name of the program is “Flex“. Flex is a flashed based programming environment which uses XML as a main datasource. Once you have mastered Flex, you can build very functional and useful applications that run via the internet. With the advent of Adobe Air, you can also deploy these applications for use on desktops.

I do not consider myself and advanced PHP coder and yet I have built some very complex applications. One application that I built was an online course creation system which enabled someone to build online courses without having to know any coding/html. I built this for a company who delivers online courses on many subjects. They privately use it for course creation.

I have also built whole admin systems to track jobs for a publishing company. All of the applications that I have built were built on a part time basis. This is why I suggest learning Flex.

The main benefit of using Flex is that you spend less time creating the interface and more time writing your custom code. Flex has a very intuitive interface builder and data connection system that takes away a lot of the wasted time used on doing these kinds of things. If you know PHP, then Flex should be easy to start learning. You don’t even need to know Flash at all to build a flex application.

Flex interfaces can be customized using basic CSS and also and Illustrator template for graphical sections of the interface.

I suggest downloading the trial of the Flex Builder and trying it out — I think you will get hooked on it’s simplicity. Get the trial here.

Examples:

Some examples of Flex applications are listed here:

Aviary. All of the applications that Aviary has created were created using Flex.

Volkswagen. This online car locator was created using Flex.

Klok. A personal time tracker for freelancers, built on flex and deployed as a desktop application.

There are many more eaxamples as can be found here.

Keep in mind that a lot of these flex applications are mainly interface and data processing based which is what Flex makes easy to do. I hope to write additional tutorials on using Flex.

Learning Flex

Learning Flex in a Week by Adobe. Learn flex fast using these free comprehensive tutorials by Adobe

Very simple flex tutorial. A simple tutorial with downloadable file for reference.

Tutorialized Flex tutorials. Some basic tutorials, hopefully more to come.

Making a desktop application with flex. Once you have learned the flex basics, see how to turn Flex appliations into Desktop Applications.

This tutorial explains for you the basics of MySQL in combination with Php. This tutorial is also written for people who absolutely don’t have any experience with MySQL. 

This tutorial was written by CrystalEdge.

MySQL is a kind of textual database. This database is divided in table that have rows and columns. Most of the time you store similar data of the same category into the same table. By using a query, you are able to store information into the database. For people who don’t have any Php experience I suggest you to read CrystalEdge’s Basic Php Tutorialbefore starting on this one.

Read full tutorial ->

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

Flower graphic created with 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

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

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.

Have you ever wondered how to make your wordpress available on the iphone, blackberry and all those other great phones? Well I found this plugin which does an amazing job of that without having to change a thing on your wordpress blog.

WPtouch is an entire theme package for your WordPress website. The plugin makes your WordPress website load lightning fast on touch mobile devices, show your content beautifully, all while not interfering with your regular theme. I tried this out on my iphone and it works great. I haven’t tried it on the other phones like the G1 and the blackberry yet.

You can search for “WPTouch” in your Wordpress plugin browser, or you can download the plugin directly. Its a totally free plugin.

Download WPTouch here

Here are the basic FAQs from the site to answer typical questions about ther plugin. You really should just try it.

I Thought The IPhone/IPod Touch/Android Shows My
Website Just Fine The Way It Is Now?

Yes, that’s true for the most part. However, not all websites are created equal, with some sites failing to translate well in the viewport of a small mobile device. Many WordPress sites today make heavy use of different javascripts which significantly increase the load time of pages, and drive your visitors on 3G/EDGE batty. So we’ve come up with WPtouch, a lightweight, fast-loading, feature-rich and highly-customized “theme application” which includes an admin interface to let you customize many aspects of your site’s presentation.

Well, What If My Users Don’t Like It & Want To See My Regular Site?

There’s an option in the footer on WPtouch for your users to easily switch between theWPtouch view and your site’s regular appearance. It’s that easy. We even automatically put a little snippet of code into your current theme which will be shown only to iPhone/iPod/Android visitors, giving them control to switch between the two site themes easily.

Will It Slow Down My Blog?

Not bloody likely! Unless of course you’re getting slammed with all sorts of traffic because you’ve installed this sexy thang. The theme package for WPtouch is small (260kb or so). It was designed to be as lightweight and speedy as possible, while still serving your site’s content in a richly presented way, sparing no essential features like search, login, categories, tags, comments etc.

Updating, adding posts and creating draft posts on the IPhone

In addition to making your wordpress blog easily readable and user friendly on mobile phones, there is a way to keep up your blog, add new ideas before you forget and a number of other things. And all this from your IPhone.

I found a plugin that works great for that. It allows you to edit posts and a number of other things. You can add numerous wordpress sites and manage them all from there. Adding a Wordpress.com blog is simple after you have downloaded the app.

You can search “Wordpress” from your phones App Store or you can get the link directly from here:

Manage Wordpress on your IPhone