Ma shuwen

Response times, availability, and stability are vital factors to bear in mind when creating and maintaining a web application. If you’re concerned about your web pages’ speed or want to make sure you’re in tip-top shape before starting or launching a project, here’s a few useful, free tools to help you create and sustain high-performance web applications.

I’ve tried to include a wide variety of tools that are easy to use, and have tried to keep them as OS and technology-independent as possible so that everyone can find a tool or two.

1. YSlow for Firebug

YSlow grades a website’s performance based on the best practices for high performance web sites on the Yahoo! Developer Network. Each rule is given a letter grade (A through F) stating how you rank on certain aspects of front-end performance. It’s a simple tool for finding things you can work on such as reducing the number of HTTP request a web page makes, and compressing external JavaScript and CSS files. A worthwhile read is the Ajax performance analysis post on IBM developerWorks that outlines practical ways of using YSlow in your web applications.

2. Firebug

Firebug is an essential browser-based web development tool for debugging, testing, and analyzing web pages. It has a powerful set of utilities to help you understand and dissect what’s going on. One of the many notable features is the Net (network") tab where you can inspect HTML, CSS, XHR, JS components.

3. Fiddler 2

Fiddler 2 is a browser-based HTTP debugging tool that helps you analyze incoming and outgoing traffic. It’s highly customizable and has countless of reporting and debugging features. Be sure to read the "Fiddler PowerToy - Part 2: HTTP Performance" guide on the MSDN which discusses functional uses of Fiddler including how to improve "first-visit" performance (i.e. unprimed cache), analyzing HTTP response headers, creating custom flags for potential performance problems and more.

4. Cuzillion

Cuzillion is a cool tool to help you see how page components interact with each other. The goal here is to help you quickly rapidly check, test, and modify web pages before you finalize the structure. It can give you clues on potential trouble-spots or points of improvements. Cuzillion was created by Steve Saunders, the ex-Chief Performance at Yahoo!, a leading engineer for the development of Yahoo’s performance best practices, and creator of YSlow.

5. mon.itor.us

monitor.us is a free web-based service that grants you a suite of tools for monitoring performance, availability, and traffic statistics. You can establish your website’s response time and set up alerts for when a service becomes unavailable. You can also set-up weekly, automated benchmarks to see if changes you’ve made impact speed and performance either positively or negatively.

6. IBM Page Detailer

The IBM Page Detailer is a straightforward tool for letting you visualize web components as they’re being downloaded. It latches onto your browser, so all you have to do is navigate to the desired site with the IBM Page Detailer open. Clicking on a web page component opens a window with the relevant details associated with it. Whenever an event occurs (such as a script being executed), the tool opens a window with information about the processes.

7. Httperf

Httperf is an open-source tool for measuring HTTP server performance running on Linux. It’s an effective tool for benchmarking and creating workload simulations to see if you can handle high-level traffic and still maintain stability. You can also use it to figure out the maximum capacity of your server, gradually increasing the number of requests you make to test its threshold.

8. Pylot

Pylot is an open-source performance and scalability testing tool. It uses HTTP load tests so that you can plan, benchmark, analyze and tweak performance. Pylot requires that you have Python installed on the server - but you don’t need to know the language, you use XML to create your testing scenarios.

9. PushToTest TestMaker

PushToTest TestMaker is a free, open-source platform for testing scalability and performance of applications. It has an intuitive graphical user interface with visual reporting and analytical tools. It has a Resource Monitor feature to help you see CPU, memory, and network utilization during testing. The reporting features let you generate graphs or export data into a spreadsheet application for record-keeping or further statistics analysis.

10. Wbox HTTP testing tool

Wbox is a simple, free HTTP testing software released under the GPL (v2). It supports Linux, Windows, and MacOS X systems. It works by making sequential requests at desired intervals for stress-testing. It has an HTTP compression command so that you can analyze data about your server’s file compression. If you’ve just set up a virtual domain, Wbox HTTP testing tool also comes with a command for you to test if everything’s in order before deployment.

11. WebLOAD

WebLOAD is an open-source, professional grade stress/load testing suite for web applications. WebLOAD allows testers to perform scripts for load testing using JavaScript. It can gather live data for monitoring, recording, and analysis purposes, using client-side data to analyze performance. It’s not just a performance tool – it comes with authoring and debugging features built in.

12. DBMonster

DBMonster is an open-source application to help you tune database structures and table indexes, as well as conduct tests to determine performance under high database load. It’ll help you see how well your database/s will scale by using automated generation of test data. It supports many databases such as MySQL, PostgreSQL, Oracle, MSSQL and (probably) any database that supports the JDBC driver.

13. OctaGate SiteTimer

The OctaGate SiteTimer is a simple utility for determining the time it takes to download everything on a web page. It gives you a visualization of the duration of each state during the download process (initial request, connection, start of download, and end of download).

14. Web Page Analyzer

The Web Page Analyzer is an extremely simple, web-based test to help you gain information on web page performance. It gives you data about the total number of HTTP requests, total page weight, your objects’ sizes, and more. It tries to estimate the download time of your web page on different internet connections and it also enumerates each page object for you. At the end, it provides you with an analysis and recommendation of the web page tested – use your own judgment in interpreting the information.

15. Site-Perf.com

Site-Perf.com is a free web-based service that gives you information about your site’s loading speed. With Site-Perf.com’s tool, you get real-time capturing of data. It can help you spot bottlenecks, find page errors, gather server data, and more - all without having to install an application or register for an account.

A while back I wrote "Where to Go to Find Design Inspiration", where I listed some of my favorite places to peruse when I’m looking for design inspiration. At the end, I posed the following question to the readers: "Where do you go for design inspiration?", and asked that you contribute suggestions. This is a list of places that readers have recommended. Some I haven’t heard of, and several I’ve added to my own favorites list.

Without further ado – I present 16 sites that you visit for design inspiration.

1. The Best Designs

Suggested by: chandan (Digg profile)

I’ve written about The Best Designs before, so I didn’t list it down this time around. For those unfamiliar with the site, The Best Designs is a wonderful spot to view high-quality XHTML and Flash designs. They tag each design with relevant keywords (i.e. - Bold, Colorful, CSS) so you can narrow down your search to the particular look you’re attracted in.

2. CSS Remix

Suggested by: chandan (Digg profile)

CSS Remix is (according to their tag line): "A Fresh Blend of the Best-Designed Web 2.0 Sites", though there are some non-Web 2.0 themed sites included as well. With over 14,000 RSS readers, CSS Remix is definitely a prime destination for designers looking to check out the work of other designers.

3. CSS Mania

Suggested by: Pat of Atrick Design

CSS Mania is a regularly updated CSS-based web design gallery that includes many design genres. At present, it has over 10,000+ websites in its collection. Though the reader who suggested CSS Mania frequents this site, he warns (and I agree): "They aren’t as particular about the quality of the designs they present, but there are definitely some gems in there."

4. screenfluent

Suggested by: Damien

screenfluent is a site that features some very nice designs. What’s great about screenfluent is that it gives you a preview of the site by opening a modal window (more commonly known as a "lightbox"). There are over 7,000 featured designs so there’s not a lack of content to view.

5. Screenalicio.us

Suggested by: Sachleen Sandhu of tehkubix blog

Screenalicio.us has over 9,800 designs for you to see. The users have the capability of rating each design based on a 5-star rating system and the ability to give feedback for each entry. You can sort the designs based on ratings and time submitted.

6. Open Source Web Design

Suggested by: Sachleen Sandhu of tehkubix blog

Open Source Web Design is a community where users upload designs to share to the public. Downloading an OSWD design is free of charge. You can either browse their gallery of designs or download them to study.

7. One Page Love

Suggested by: adelle of Fuel Your Creativity

One Page Love is a niche web design showcase gallery that features beautiful, creative one page websites and applications. Some categories include products, portfolios, temp pages, and events.

8. FullSingle

Suggested by: adelle of Fuel Your Creativity

FullSingle is another site that displays single-page websites. The latest gallery entries are featured at the top of each page with a brief description of what the page is about.

9. One Page Folios

Suggested by: adelle of Fuel Your Creativity

If the above two weren’t niched enough for you, here’s one with even greater specificity. It’s an aggregate of single page portfolio websites of designers and developers. There’s over 800 portfolios currently listed on One Page Folios, and each entry is reviewed before being published.

10. We Love WP

Suggested by: adelle of Fuel Your Creativity

We Love WP shares top-notch WordPress powered sites. They also showcase free themes that designers have modified into something unique.

11. CSS Divine

Suggested by: Jess

CSS Divine is a CSS-based design aggregate website. You can do a color search by clicking on the color palette at the side bar, and it’ll narrow down the gallery to themes tagged by that particular color. There are plenty of categories including Art, Business, Clean, and Portfolio.

12. Design Snack

Suggested by: Justin Scheetz of Design Snack

Design Snack, according to their tagline, is "The designer’s showcase that you control". Design Snack features XHTML and Flash designs. You can customize the way the designs are displayed, vote on individual entries, and browse by color.

13. SF art & design portal

Suggested by: cindyf

SF art & design portal is the work of the Amsterdam-based web design agency, Strangefruit.nl webdesign. SF art & design portal features hand-picked, innovative, creative art and design sites. You can browse by category, style, color, and even country.

14. Design Shack

Suggested by: stefan alexandru of Stefan Alexandru

Design Shack is an exclusive repository of first-class CSS-based web designs. They look for designs that "stand out from the crowd". They also have a Tutorials section that features web design lessons.

15. CSSloaf

Suggested by: CSS Loaf of CSSloaf

CSSloaf brings together designs from 35 other showcases so that you don’t have to go all over the place to see the latest designs. They feature large screenshots so that each design is visible; no need to strain your eyes on tiny thumbnails.

16. eduStyle

Suggested by: Luke Robinson (Twitter profile)

eduStyle is dedicated to the design of higher education websites for higher education professionals. It’s intended to showcase the best works of higher education designers to their peers.

Search Engine Optimisation (SEO) is a vital component of any website. As a web designer or blogger, it’s important you understand how SEO works. Here are ten easy rules that will immediately improve the SEO on all of your web sites.

This is a guest article written by Joshua Jeffrey’s who describes himself as a “busybody in the local and national design/web world” - you can read more about him on his blog.

Rule Zero: Do Not Cheat. Period.

If you walked into a room full of genius scientists with PHDs, do you think you could outsmart them all? No. Google has hundreds of rooms full of genius scientists with PHDs, and their job is to work 60 hours a week to make sure you can’t fool Google. You can’t outsmart them. Ever. Ignore any advice on trying to cheat the system and focus on making great web sites with great content, and your sites will show up fine in searches.

Rule One: Stick to Your Keywords

Pick a few keywords or phrases that describe your site. Use them, and words related to them, whenever it’s natural to do so. Repeating them uselessly is no good (rule Zero), use them in sentences, headlines, and links.

Rule Two: Content is King

Users don’t search for design, they search for content. If your site doesn’t have content people want, no one will look at it.

Every page on your site should follow the Inverted Pyramid. Each page should lead with a relevant H1 tag with one of your keywords, and the first paragraph of text should be a summary of the rest of the page.

Rule Three: Clean Code is Searchable Code

Build your sites in a text editor, and write clean, human-readable HTML. The HTML should follow the conceptual structure of the page, navigation first, followed by the H1 tag, then the first paragraph, etc. Try to use descriptive tags when possible. Use UL for lists, P for paragraphs, H tags for heads and subheads, and STRONG for bolded text. Don’t overuse Divs.

Your site can still be artistic and cool, that’s what CSS is for.

Rule Four: The Home Page is the Most Important Page

Your home page is the key to your site being found by search engines. It should summarize the rest of the site, and give a clear, compelling reason for a user to look at the other pages in the site.

Rule Five: Links Have Meaning

Search engines pay a lot of attention to the links on your site, and the words used in those links. Never use “click here” or “see more” for a link. The link text should describe where the link will take the user, such as “more examples of CSS web design” or “learn how we can improve your SEO.”

The more relevant the links on a page, the more findable the page becomes. Don’t go overboard, and don’t link to anything irrelevant. If your page is focused on minimalist web design, a link to the Design MeltDown page on minimalism will boost your SEO. A link to a hilarious picture of a cat will not.

Rule Six: Title Tags for the Win

Every page in your site should have a title with the site name and a short description of the page. About 60 letters total. Include a keyword. Remember that the page title is what appears in search results, it should give users a clear reason to click on it.

Your navigation links should have title attributes that match the titles of your pages. This looks like <a title=”name of page” href=”link”>. It’s a small thing, but it will give you a significant SEO improvement.

Rule Seven: Alt Tags Matter

Every image on your site should have an alt tag. Especially images that are relevant to the page. If your page is focused on CSS tricks, labelling a screenshot “example of rounded CSS corners” will improve your page’s findability. Labelling it “screenshot” or “image” will do the opposite.

Rule Eight: Ignore Most Meta Tags

A long time ago meta tags were the secret to SEO. Those days are gone. The only meta tag that really matters now is the description tag. Search engines may use it to provide the text under the link to your page in their results. Make sure it describes the page in a way that explains why a user searching for your content would want to look at your page.

Rule Nine: Have a Site Map

Make sure you have a site map. This is an xml file that describes the structure of your page. Make one, and give it to Google.

Rule Ten: Design for Humans

Search engines are designed to find what humans want. That means the best way to make your site findable is to design it for humans. Your job as a designer is to solve a problem, not make art, prove a point, serve your ego or break a boundry. In this case, your problem is to provide your users with a site that is easy to use and full of what they’re looking for. If you can do that, the search engines will find you.

For further reading I recommend this SEO Guide for Designers.

30 Amazing Free Vector Icons, Buttons, Stickers, Banners, Labels and Speech Bubbles.Click to visit

Did you notice that on the Web some words never mean what they sound like or were intended to mean in real life or when first coined? Some terms and expressions just do not reflect what they were meant for originally but most people still don’t realize.

To make you more web-savvy I collected a list of the top 10 most known internet lies you probably have come across a lot but never really understood their true meaning. Fasten your seat belts. To help you, I translated them to explain what they really mean.

1. Coming Soon: I don’t know when, probably never
2. Free: Use it it for free now, we make you pay later, once you depend on it
3. No strings attached: We know you distrust us for a good reason
4. Copyright 2008: This site might be abandoned but runs a script that updates the year in the copyright notice
5. Interesting photos: Stolen images, I just don’t know anything about them besides that they were popular elsewhere so they must be “interesting”
6. Make money online: Click our ads, we get commission from these affiliate networks
7. Privacy: We just use your data for advertising, if the NSA, CIA, FBI, GOP, DIY asks us and once another company buys us we can sell our user database
8. Click here: We know you are a dummy that does not know how the Internet works
9. Is now Open Source: We let others do the work for free and then earn big $$$ by reselling it
10. Social: This will transform your social life into a virtual computer game

Lately I had same crazy thoughts on coding a javascript wrapper to manipulate images rendered on the server-side. I decided to do some test which eventually resulted in phototype, a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. Let's start a quick tour.

Suppose we have a picture like this (randomly grabbed from Flickr):

First, let's reisize it:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. document.body.appendChild(l_oPhoto.fetch());

Pretty nifty eh? Note that the resizing is done serverside because usage of GD. Ok, let's do some flipping:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV(); // Flip vertical, use flipH to flip horizontal
4. document.body.appendChild(l_oImage.fetch());

And rotate it some degrees:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3); // rotate 3 degrees
5. document.body.appendChild(l_oPhoto.fetch());

Drop shadow and make sketchy..

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3);
5. l_oPhoto.dropShadow();
6. l_oPhoto.makeSketchy();
7. document.body.appendChild(l_oPhoto.fetch());

Or, make it greyscale?:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3);
5. l_oPhoto.dropShadow();
6. l_oPhoto.toGreyScale();
7. document.body.appendChild(l_oPhoto.fetch());

Adding a caption:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.rotate(3);
4. l_oPhoto.dropShadow();
5. l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf');
6. document.body.appendChild(l_oPhoto.fetch());

And finally, because we can't live without Chuck Norris :-):

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.rotate(3);
4. l_oPhoto.dropShadow();
5. l_oPhoto.addCaption('Cheers, Chuck', '1942.ttf');
6. l_oPhoto.addChuckNorris(); // every library should have this function imo
7. document.body.appendChild(l_oPhoto.fetch());

Chaining
Phototype supports chaining:

1.  
2. l_oPhoto = new Photo().load("test.jpg").dropShadow().flipH().makeSketchy();
3. document.body.appendChild(l_oPhoto.fetch());
4.  

That's it. I'm really looking forward to your comments, you can download the full package here, it's GPL licensed.

We all naturally form opinions about the websites we visit. Some of them we love so much that we come back several times a week, and others leave us with a bad experience that causes us to never return. But what is it that determines whether a website is good or bad? As individuals we each have our own opinions and we’ll never completely agree on which websites are good and which ones are bad, but most of us will base our feelings on similar factors. Here is a look at 7 factors that I feel are influential in this determination.

1 - Purpose

Every website needs a well-defined purpose. Website owners and bloggers who have a solid understanding of what they expect to get out of their site will be able to work backwards in order to determine how the site should be managed, what content should be included, what messages should be communicated to visitors, and really everything involved with developing and running a website.

Unfortunately, it’s pretty common for site owners to rush through the process of setting up a website and the true purpose is sometimes overlooked. Without knowing specifically what you hope to achieve, you will lack direction, your efforts will be scattered, and your chances of making a positive impact with your site will be poor.

A purpose should be fairly specific. Instead of saying “I want to improve my business by having a stronger presence online,” consider something like “My website will become the most consistent source of leads for my services and it will help me to improve communication with potential clients.” With the second purpose, you now know specifically what you want to achieve with your website, it’s just a matter of finding ways to make that happen.

The purpose of a website functions in essentially the same manner that a mission statement aids a business. It sets the tone for all of the activities and it gives a context that should be used to help in decision making. If your business already has a mission statement, I suggest also developing a separate purpose for your website. The website’s purpose should serve to support the mission and make the business more effective in achieving that mission.

2 - Clarity

Your website may have a purpose, but is it clear to your visitors why your website exists? It’s easy to get caught up in adding all kinds of new features and building fancy websites, but sometimes overload can produce a jumbled message to visitors that produces confusion.

One of the goals during development of a website should be to achieve clarity that will show visitors what they can get out of your website and why they should care. Clarity applies to all different types of websites. E-commerce sites need to clearly communicate to visitors what can be purchased and why it should be done through their particular website. Blogs need to communicate to new visitors what the blog is all about and what types of content they will receive if they subscribe. Service providers need clarity when they are communicating the details of their services to visitors.

Clarity is sometimes achieved through simplicity. Cutting out the noise and the clutter on a website can make the primary message more easily understood by visitors. One of the reasons for using a minimalistic design is to assist in the level of clarity.

3 - Usability

For any website to be successful, people need to be able to use it. Design and appearance will never replace the need for usability. The usability needs of a site will partially depend on the nature of the site. For example, a large e-commerce site needs to have an effective search function, logical categorization of products for browsing, a user-friendly shopping cart, etc. A blog or any type of website with lots of text will need to provide excellent readability, good navigation between articles, etc.

Any site that lacks usability will struggle to keep visitors on the site and to encourage repeat visits. Most of us internet users are impatient and if we find something that makes us work too hard, we’ll simply leave. For a more informative look at the topic of usability, see What Everybody Ought to Know About Usability and Web Design.

4 - Accessibility

Accessibility and usability often get lumped together because they somewhat overlap, but they are two distinct issues. An accessible website will not force visitors to use a certain browser, exclude handicapped users, etc. If users can’t access your website, it’s obviously not usable either.

Effective websites will be widely accessible. The difficulty with accessibility is the amount of factors that are outside of your control. However, it is possible to have an attractive, information, and helpful site that is still accessible. For more on accessibility, see 100 Killer Web Accessibility Resources.

5 - User-Focus

Because visitors ultimately determine the success of a website, they should be the focus during development. Often times, however, designers or website owners get distracted by their own wants and needs for the website, and the users are forgotten or put on the back burner.

A user-focused website will be both usable and accessible, but it will be much more than that. A website or blog that is focused on users will build content that interests and helps users, and the desires of visitors will always be important in any decision involving the development of the site. A poor website will do the opposite, it will focus on the needs of the owner and attempt to force visitors to fit in the same box.

6 - Navigation

Website navigation affects both usability and accessibility, but it is important enough to warrant its own spot on this list. When developing a new website or working on a redesign, navigation should be a primary concern. Unless you want visitors to view one page and then leave your site, you’ll need to make it as easy as possible for them to find what they are looking for.

Most websites and blogs today use fairly common navigational techniques that are expected by the average visitor. Typically, the site will have a primary navigation menu that will link to the most important pages on the site, and other links will be added to the body of the page wherever appropriate. Sitemaps, sitewide searches and FAQ pages are all very common and visitors will look for them when they don’t know where else to turn.

Blogs also have their own unique navigational trends that blog readers tend to appreciate, such as a list of categories, links to the most recent posts, links to the most popular posts, and links to related posts.

In addition to providing visitors with an easy way to move through the site, navigation is often used by designers to create more visually-appealing websites (see 45 Photoshop Tutorials for Better Navigation). Although navigation provides designers with a great opportunity to improve the look of the site, attractiveness should not come at the expense of usability and accessibility.

When developing the navigation for your website, think about what pages are most likely to be wanted by visitors, which pages are most critical for the purposes of your website, how visitors will want to move from one page to the next, what visitors will expect in terms of link location and pages linked, and how many clicks it will take visitors to get from your homepage to any other specific page.

7 - Appearance

Last but not least, the appearance of a website will be a determining factor in its success. Not every website needs to be an award-winning design in order to achieve it’s goals, but it should appeal to it’s specific audience and it should present a positive, professional image.

Trends in web design are constantly changing, and chances are if your site hasn’t been redesigned since 1999 it’s painfully obvious to your visitors. Most website owners prefer to freshen up their design or completely change it every couple of years to avoid this type of situation.

The design of the site should complement the content of the site, not overpower it. The design should also match stylistically with the message and the purpose of the site.

What’s Your Opinion?

What factors do you feel separate a good website from a bad website?

Reflex.js

This javascript enables you to add a cover flow effect to any image on your web page. You can add reflection, tilt angles and also borders to your images. The results look like this:-

Curl.js

This is an unobtrusive javascript to add page curl effect to your images and works on all the major web browsers. It can also produce the curl on mouseover where it animates the effect. Here is what it can accomplish:-

Edge.js

This javascript can help you in adding nifty edges to your images. You can even mask a second transparent image to generate some nice looking eye candy. I was able to make the script do this:-

Corner.js

This javascript lets you add effects to your image corners like rounded corners, shadow (both inner and outer), shading etc. This is what can be done using this javascript :-

Slided.js

You can add slide frames to your images by using this javascript in your web pages. I am sure it can be useful to some people. This is what I came up with:-

Glossy.js

Add a glossy effect to your images to make them stand out. This javascript also allows to add corners, shading and shadow. Here is my result:-

Filmed.js

This javascript allows you to add film strips around your images. You can also add shadow and shine to your film strip edges. This is what it looks like:-

Loupe.js

Did you ever want to add a lens to your page which will let you zoom into the images. This script will let you do that and much more using two versions of your image. Here is a preview:-

Instant.js

This javascript lets you add an instant picture effect to your images. You can add border, tilt and shadow to give your images that photo effect which you always wanted. Here is a sample:-

Bevel.js

This javascript simulates a whole bunch of effects! It allows you to add bevels with glow, shading and shine to your images. Here is the javascript in action:-

With cheap web hosting, if the hosting service is good enough, an affiliate program can work well. The marketing aspect is also not that bothersome, if there is wireless internet since then one can work on the online marketing arena. Other ways like ppc can be done later as well.

In designing a successful website interface there are tips and tricks that can save you time and make projects go much smoother.

1. Information Harvesting

Sir Francis Bacon said “Knowledge is Power” and indeed it is.

The singe best thing you can do for yourself before designing the interface is start asking your client basic questions.

Ask questions like:

• What does your company do? Or How does your service help people?
• What do you expect this website to do for you?
• How would you like to present your Product \ Service \ Idea?

Find out if they will need a CMS a Shopping Cart or a Blog.

Until you know exactly what the customer wants, it’s not time to open your photo editor

Make a work flow checklist and write down common questions so you’ll be better prepared before you go and talk with your client.

Ask questions and you will save yourself time in the long run.

2. Color

Color either can inspire you to take your graphic project to the next level or it can discourage you and slow you down.

The difference between a great color pallet and one that throws off a website interface can sometimes be very minor.

Now having said that color doesn’t have to be something that evokes thoughts of dread and terror.
Selecting color is like anything else, practice makes perfect.

There are many places to enjoy tasteful color selections like: business signs, business cards, flipping through menus at restaurants and the great outdoors. One of my favorites happens to be compiling pallets from paint swatches at local hardware stores.

Some times it’s helpful to focus on one color you like and select other colors that blend or pop based one that selection.
When looking for your base color, if you already have a logo for the design your working on, this is a great place to start.

Here are some excellent color swatch resources that can take a lot of time out of selecting color themes.
Take a look at other designers popular pallets to get a taste for what works well, Then make some yourself.

Adobe Kuler

Colour Lovers

3. Style

It’s key to spend a little time working out what design style would suit your client best.
Web 2.0 is leaving it’s mark on the design landscape and it’s not leaving anytime soon.

Now there will always be room to discuss the pros and cons of Web 2.0 but I believe that we all can see that many positive things have come to the light because of the huge popularity of Web 2.0.

Better emphasis on Typography, Use of Whitespace, Use of H1-6 headers, Uses of Cascading Style Sheets and better W3 Accessibility. These are all great things.

Now improper use of reflections, slapping beta tags on every new website and using flower badges are what I believe to be the cheeping of an art form with some exceptions.

While Web 2.0 has elements that if properly used can enhance any style design; Web 2.0 is not for everybody or every application. For instance a rock band would probably want a grunge style, a country rancher might want an old west theme, a tree service might want an interface and looks like a forest. Etc…

Modern design has a huge application base and examples of that like PureVolume and gallery sites like CSSRemix are viewed widely and often imitated.

Web 2.0 or New media design is great and often a wonderful choice. Just make sure before you add that big O’ glassy Web 2.0 badge that this is what is the best for your clients style.

4. Content

If your going to be using stock, don’t settle for anything but the best! Stock photography can either make or break a design so make sure it doesn’t do the latter to your project.

Lay out all your needed:

• Buttons
• Logos
• Header Text
• Photo Content
• Text Blocks

Import into your photo editor all the content you will need to incorporate in your interface design.

This helps prevents mishaps like designing a interface that is too small for a needed element and gets it all on the canvas to start those creative ideas flowing.

You may find it nice to do a quick interface mock up on paper, to see how it lays out first.
A quick sketch on paper sure is faster to revise than an hr spent in your photo editor creating a mock up.

I have found paper sketches save me a lot of time, especially on logo designs.

Each part of your interface should be Organized both by Location and Size.

The Size and Location should depend on the Purpose and Priority of the element.

Organize By:

• Location
• Size

Location and Size should be based on

• Purpose
• Priority

5. The Polish

Now this part of the interface design is where it gets down the the nitty gritty.

I like to add: Minimal Icons, 1 Pixel Highlights, Make Gradient Adjustments, And align everything to the pixel at this stage. I also check what I like to call the Pop Effect of the interface design.

Do my vivid colors pop of that dark background?

Or, is my gray text, dark enough to be actually read by humans on my white background?

Finely, I adjust these factors so I get the balance I want from the interface.