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

yahoo

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.

9 Simply fancy JQuery plugins

I just stumbled on this great website which has very useful and simple jquery ajax applications. I will review each here in a simple way so you can see all of the useful information. This website shows a video tutorial, a text tutorial and a demo for each of the ajax applications.

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.

Jquery Ajax Infinite Carousel

Ajax smooth slidedown

This shows you how to make a smooth div slidedown effect without the initial jump. This can be used for many cool ajax effects. 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.
Smooth data changer

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 Image Fade Effect on a menu

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.
Ajax Tabbed Slider

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.
Sleek Ajax Coda Tooltip Jquery

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.
Apple style Ajax Slide out Sidebar Effect

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.
Ajax form validation jquery
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.

Building RIA Web applications Fast and Efficiently

Building Web Applications

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.

Adobe FlexThe 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.

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.

Creating a website with WordPress

Creating a good website with wordpress is very easy once you have the right direction. In this article I will give you the basic steps to starting up a website/blog with WordPress.

First things first before we begin. WordPress is not the ony content management system for blogs/websites — there are many others. I prefer wordpress over anything else due to it’s simplicity and ease of updating and adding plug in functionality.

WordPress was originally designed for the creation of blogs. A lot of websites are centered around the idea of a blog which is new articles published frequently. For most websites to do well they need to provide constant valuable information at a decent rate. If you put up a couple of pages on a website and leave it at that, most likely your website will drop from the search engines and disappear.

I love the idea of building a website around WordPress and I am working on numerous other websites using it.

WordPress Basics

A WordPress website consists of these main things:

  • Posts
  • Pages
  • Categories
  • A Template

This makes WordPress simple to understand.

Posts: posts are articles written that fit into a category. Posts have an Author, A Published Date, A Title, Content, Tags and Comments.

Pages: Pages are basic articles that are linked to directly. Examples of pages are “About Us”, “Prices”, “Contact Us”, etc. In WordPress, posts and pages are different. Pages have an author, A Published Date, A Title, Content, Tags and they can have comments. Pages are generally directly linked to and are not part of any category.

Categories: categories separate posts into understandable divisions. Examples of categories are: Blog, Photoshop, Funny, etc. Categories help people find posts that they are interested in. Categories can have any amount of sub categories. An example of this is a category of “Computers” can have a sub category of “Windows” or even “Troubleshooting”.

A Theme: every WordPress site has a theme. A theme decides how to show your posts, pages and categories. A theme can also have any number of additional content, like a sidebar or a menu, etc. These are also called templates.

Tags: tags are keywords for posts and pages. Keywords also help people find an article or page that they might be interested in. It is very important to add tags to your posts so that people can actually find them. Some blog systems don’t differentiate between tags and categories.

Comments: comments are very important to a blog. Each post can have comments on it. Comments can be a suggestion, a question regarding the post, or request for clarification. Comments constantly update the post with additional content and help create more interest in your post.

Author: and author in wordpress is the person who wrote the article. In a WordPress site, there can be numerous authors writing posts. It is good to have numerous authors for a blog so that one guy isn’t staying up all night updating the blog.

These are some of the basic things you need to know to work with WordPress and to be succesful with what you are trying to do. We will now talk about how to set up a wordpress blog with ease.

Building Steps

Step 1: Get a domain name and hosting service.

An example of a domain name is “www.techassistnow.com”. A domain name is always unique. A hosting service has many computers to hold information, you will need to set it up so that your website and all of its data has a place to live.

I will tell you how to set these up for the hosting provider that I use. The hosting provider I use is called “1&1“. Using this domain name checker, check if the domain you want is available. If it is, then purchase the hosting option you want. I recommend 1and1 beginner if this is your first website.

For any other hosting provider, read the instructions on their website. In any case, you want to make your your hosting has PHP and mysql.

Step 2: Collect the necessary info from your hosting provider

Once you have a domain name and a website host, you should now have this basic information:

FTP Host:

FTP Username:

FTP Password:

Database Host:

Database Username:

Database Password:

Having this information is neccesary to starting your wordpress site. Once you have this information, continue through these steps. If you don’t have a database, contact your hosting provider on how to create a database.

Step 3: Download & Install WordPress

To download WordPress click here.

A very simple guide to installing wordpress click here.

Step 4: Customize with themes and plugins

Plugins

Installing plugins is very simple, you just go to the “Plugins” menu and click add new. Then you can search for the name of the plugin and install it right from WordPress. You can also download the .zip file and install it that way by clicking on the “Choose File” button.

Here is a list of the fundamental plugins you should have:

  • All in one SEO Pack: This plugin sets up WordPress for Search Engine Optimization. Download it here.
  • WP-Cache: This plugin greatly increases the speed that your WordPress site loads. Download it here.
  • Askimet: This plugin detects spam comments and is very important. Download it here.
  • Contact form: Every website has a way to contact the website editors. This plugin makes it very simple to have complex contact forms for this purpose. Download it here.
  • WP-DB-Backup: Allows you easily to backup your core WordPress database tables. This is a very important plugin for protecting your website from being completely ruined. I recommend it for any WordPress installation. Download it here.

There are a lot of additional useful plugins that can be used. I will list some of them here so you get an idea of the possibilities.

  • Broken Link Checker: Checking broken links can be annoying to you and your public. This plugin makes it simple by checking images and links if they are broken. If so,  you are notfified. Download it here.
  • Google XML Sitemap: This plugin creates an updated xml sitemap for Google. Good for SEO. Download it here.
  • Sharethis: great for adding social marketing buttons to all of your posts. Download it here.
  • WP ECommerce: Turns your site into an online store. This is just an example of a plugin that adds a whole store to your wordpress site for free. Download it here.

As you can see, there are many WordPress plugins. You can pretty much get a plugin for anything you want to do with WordPress.

Themes

Installing themes is very simple with the newest version of wordpress. All you have to do is go to the “themes” menu and click “add theme” and then upload a zipped file of your theme. WordPress will automatically install the theme for you. You should also install any recommended plugins for that theme.

Here is a list of website that have  a good free themes that you might like.  There are so many options and looks available for themes — it’s hard for me to list them all — but I will point you in the right direction.

Step 5: Start adding content!!

Now you have your WordPress site set up. Start writing and adding posts with unique content. Make sure you also add the standard pages (Contact, About, Etc).

This is a simple guide to start your WordPress website. There are many advanced features and theme custumizations still possible after this point. There are hundreds of websites dedicated to these advanced features — just google what you are trying to do.