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.

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.

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.