Do’s and Dont’s of Great Web Design

http://pswish.com/do%E2%80%99s-and-dont%E2%80%99s-of-great-web-design/

When followed, this guide will prove to be quite a valuable web design resource. From the inexperienced to the experienced, this guide has something for everyone.

The Process of Great Web Design Just to make sure we are all on the same page, lets begin with the basic definition for “web design”. According to Wikipedia, web design is:

“a process of conceptualization, planning, modeling, and execution of electronic media delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface”.

The process of web design can be compared to the process of writing a research paper. In the conceptualization/planning stage, flowcharts (the outline) are created which illustrate the navigational structure of your website. In the modeling stage, static wireframes are created (the rough draft) which illustrate the skeletal layout for each section of your website. After the wire frames are created, graphics, colors and text are used to create the design of your web pages based on the layout of the wire frames. In the execution stage, your design is converted into a format supported by web browsers, text and content are added, and finally, your website is published live to the Internet for the world to see (final draft).

All three stages of the design process are equally important. Many web designers skip a stage in order to save time or because they don’t think that is is necessary. However, all three stages are necessary if your goal is to create a successful design and respectable website. Even if the three stages are used, there are many mistakes that web designers can make that will lead to poor-quality, non user-friendly websites.
It’s time to clean out the cabinet of bad web design practices and restock it with the good ones.

Stage 1: Conceptualization and planning
This stage is skipped more often than the other two stages. Most writers don’t enjoy creating outlines for research papers, and most web designers don’t like creating flowcharts either. Don’t be lazy. If you put forth the effort and plan out your website, then you will find the web design process to go smoothly with fewer mistakes made along the way.

There are a few things that you will need in order to effectively conceptualize and plan your website:

-a brain
-a pen and paper
-(optional) flowchart software
-a general idea of the different sections of your website

To begin, grab your pen and paper or launch your favorite flowchart software. We use OmniGraffle Professiona for Mac OS X which costs $150 per license but is well worth it if you create websites on a regular basis. If you’re on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.

There are many methods to creating flowcharts. We are going to show you the most basic way to do it for the sake of time and the length of this article. If you want to learn more about flowcharts search for flowcharts on Google or Yahoo.

View the flowchart that we created when conceptualizing Chromatic Sites. (1) At the top of the flowchart we list the name of our website. (2) Next, we include each primary section of our website: Home, About, and Services. These sections are the main navigation for your website. What the names of each section will be is entirely dependent on the content of your website. Try to use as few sections as possible so that your visitors are not overwhelmed when navigating through your website.

(3) Next, add all of the secondary pages (subsections) that will be listed on each of the primary pages. For Home, we have included Professional Web Design, Web Development, and Search Engine Optimization. The secondary navigation needs to be more descriptive than the primary navigation. The deeper your websites’ navigational hierarchy goes, the more descriptive each label should be.

The Dos
-Less is more; keep the number of primary sections to a minimum. We use 6 sections on our website which is more than enough -Whether you use a pen and paper or flowchart software, keep things as clean and organized as possible. Although you (and anyone working with you) are the only ones that will be using the flowchart, it still needs to make sense -Your primary sections should use broader terms, while secondary and tertiary terms should be more descriptive

The Donts
Creating a flowchart is pretty straight forward; however, there are a few mistakes that can easily be made:

-Don’t use very descriptive terms in your primary navigation unless your entire website focuses on one narrow topic -Don’t try and lump multiple topics on the same page. Create a general section for these topics and from that section create subsections. This will make the subsection (descriptive) web pages more likely to have better rankings in the search engines (Google, Yahoo, MSN, Ask) Once you have created a concise and descriptive flowchart, you’re ready to move on to the second stage of the web design process:
modeling.

Stage 2: Modeling
In the modeling stage, static “wireframe” mock ups are created. Each mockup illustrates a bare-bones skeleton of the layout for each of the web pages that will be included in your website. This stage is important because it gives us an idea of where different elements will be placed in our design. Some of these elements are:

-logo
-navigational menu
-content
-images, videos

To create these mockups, you can use a pen and paper or your preferred mockup software. In the past we have used Photoshop, but lately we have been using OmniGraffle Professional. OmniGraffle is not as resource intensive as Photoshop is and it allows us to assemble our wireframe mockups much quicker.

In addition, make sure that you have the flowchart(s) that you created nearby as you will need to reference these from time to time to make sure that you are mocking up all of the pages that will appear on your website.

Here is our example of how a wireframe mockup should look. As you can see, there are no colors or graphics included. This is exactly how a wireframe mockup should be - a skeletal layout of your design. The purpose is to be able to have a general idea of where each of the web page’s elements will be placed.

We usually begin from the top left and work our way down to the bottom. There is no specific way that a wireframe should look. Use your imagination. However, make sure that when creating your wireframes you don’t forget to include the most important elements of a website (logo, navigational menu, content placement, images/video placement).

If some of your pages will be using the same layout, then it is not necessary to mock all of those pages up (although you certainly can).
Just be sure to mockup any unique layout that your website will have.
You’ll thank yourself later.

The Dos
-mockup all unique pages
-include important elements (logo, navigation, content placement, images/video placement) -start from the top and work your way down -reference your flowchart created in stage 1 to make you don’t forget to mockup any pages -save, save, save - like with anything on the computer, save your mockup(s) every 10 minutes or so
-focus on clean, user friendly layouts -label your elements so you don’t forget what they are when you reference them in stage 3, execution -use other web sites as inspiration; there is nothing wrong with taking elements from other sites and making them your own (see “donts”)

The Donts
-don’t include graphics or colors (that’s for the next stage) -don’t make your mockups too “busy”; focus on clean, well organized, user friendly layouts -don’t skip this stage; it is just as important as the first and the last -if you take elements from other websites, make sure you don’t plagiarize; there is a difference between being inspired by another website to create certain elements of your design and blatantly ripping off their layout and colors

Stage 3: Execution
In the third and final stage, execution, the planning from stages 1 and 2 are combined to assist in creating a live, interactive website.
The third stage is by far the most time intensive since you will be 1) creating the graphics 2) creating the content, and finally, 3) converting the web designs from images into code that web browsers use to present your website to the world.

By the time you reach the third stage, you should have a clear idea of:

-how your visitors will get from one place to another (stage 1, flowchart) -how your web pages will be laid out (stage 2, wireframe mockups)

If you don’t have a clear idea of these two things, go back to the first and second stagees and continue to develop them. You will find that the third stage is easiest when you have constructed a clear, concise battle plan for designing your website.

Ditch the pen and paper
In stage 3, you need to be using Photoshop or another image editing program since you will be using colors and graphics to create the layout for your website.

We usually begin creating the “home” page (index) first. Use your wireframes that you created in stage 2 as a template for each of the pages you create. However, instead of using solid boxes, use graphics, colors and text instead. Each page must look exactly how you want them to look on the Internet since this is the final stage of the design process.

Be sure to include the background for your navigation (but don’t actually add the text to your image). When converted using CSS (cascading style sheets), your navigation should be in the form of text and not images. Images are not crawl-able by the search engines (the keywords used in your navigation won’t be indexed in the search engine results pages, meaning fewer people will be able to find your website).

When you’re happy with your designs and feel that they are ready to be put on the Internet, it’s time to break apart the designs so that you can create a CSS based layout. For more information on converting your layouts to CSS or marking up your website in CSS, visit w3schools.com. After looking around the Internet, we couldn’t find a decent image-to-CSS tutorial - so expect one from us in the coming weeks. Converting your designs into CSS is extremely important since table layouts are a thing of the past.

Here is an example of a nearly-completed website of the layout we mocked up in stage 2. This was taken directly from our web browser and as you can see, there is now a logo, colors, a pretty navigation system, a footer, and a most importantly, a clean, organized layout.
Thanks to the planning in stages 1 and 2, our layout is well-organized and easy to use.

The Dos
-reference your templates that were created in stage 2; though it is fine to deviate from your original layout, you shouldn’t need to -do some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing) -include color and graphics to create the final look for your web pages -use CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsers -reference your flowchart from stage 1 when coding your pages with hyperlinks; it is better to use a drop down menu that includes all (or the majority) of the links in your website on every page; this will allow for easier navigation and also make your pages easier to crawl when the search engine spiders stop by; a great place to get CSS drop down menus is at DynamicDrive.com -finalize your design while working in Photoshop or whatever image editing software you use; it can be a pain to make changes to your design once it is converted into markup (code)

The Donts
-don’t include the text in your navigation menus when converting to CSS; instead of using image text, use regular text that is readable by search engine spiders -don’t use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are dead -don’t skip the first two stages just to save time; your website WILL be better if you start from the beginning of the web design process (instead of at the end) -don’t forget to compress your images when they are cut apart for CSS; there is nothing worse than a slow loading website because of large image files; Photoshop has a “Save Optimized For Web” option (CS3 - “Save for Web and Devices”)

Process Makes Perfect
By following a web design process such as the one illustrated in this article, you increase the chances of creating a website that is well-organized, easily navigable, and very user-friendly. Lets face it - if visitors get lost or become confused while attempting to surf your website, they might hit the back button and look for a more user friendly website. People do not like to think when it comes to finding their way around websites. Don’t make them think. You do the thinking by planning out your website from stage 1 to stage 3 and you will find that more people will enjoy visiting your website.

.JPG vs .GIF - What Should You Use?

http://pswish.com/jpg-vs-gif-what-should-you-use/

Do you oftentimes feel confused what to use for your web images– GIFs or JPEGs? And more importantly why? Great. You deserve kudos as confusion leads to comprehension. Here is what you have been looking for all the way! Essentially, they are formats in which web images are created in. Any file with a .jpeg or .gif extension is recognized, by a browser, as an image file. A good web site is partly one that will load quickly into a browser. Agreed? Well, for this to happen, your web page has to be small in file size. The GIF and JPEG file formats compresses images so that it is web worthy.

This is vital for you that you don’t mess around when it comes to decide what to use when. Here’s what you need to know (a subtle reminder and congrats for tech guys who know it)

GIF ( Graphics Interchange Format)

• GIF was the first-ever image format created for use on the web. This implies that all browsers of all versions can read images in the GIF format.
• GIF can icorporate transparency . This is great. Isn’t this ? Especially so when you wish your graphic to blend in with your background.
• GIF compresses an image using LZW compression . Confused? Simply put, this means that the quality of your image does not degrade when it is compressed. Deterioration in image begins to crop up only when it is having more than 256 colors.
• Good results can be had using GIF when there is a large area of flat color in the image. And when it uses fewer colors. The fewer colors, the better.
• GIF can be animated . All animations, barring the more advanced Flash movies, are GIF files.

JPEG ( Joint Photographic Experts Group)

• JPEG uses a lossy compression schem. This means that you will, in fact, lose some data during compression. The more you compress, the more quality you lose. You will, therefore, have to strike a right balance between image file size and quality.
• JPEG compression rate can well be controlled . The higher the compression rate, the lower the size of the image. And as you have guessed, eh? The lower the quality.
• JPEG is optimally used for photographic images . The more colors and subtle gradients an image has, the better.
• Browsers take a longer time to display JPEGs.

Demarcating features of JPEG and GIF

One of the worst mistakes (hopefully you won’t make any longer) a web designer can make is to opt the wrong format for a particular type of image. As a thumb rule, for images with few flat colors, choose GIF. Images with lots of colors and gradients, you may go for JPEG.

Simple enough. Here is your turn to appreciate a couple of somewhat tricky tech understanding with regard to JPEG and JIFF’s. Pertaining to JPEG, if the horizontal rows of pixels undergo change frequently without patterns, then a JPEG may allow for a smaller file even if it is having few colors only. For designers if they can save a few kilobytes on each image, it can drastically improve the loading time of image-loaded pages intended for users with slow connections.

Further, though you can have animated GIFs, this is rarely a good idea in terms of design.

There are a few things you can do with GIFs that you can’t do with JPGs. The best way to get the smartest web images and graphics is up to you: technology is at your disposal only to be selectively used for spectacular results. So get going to harness tech understanding! People who work with a Web Design and Development always know these little tricks, now you do also.

45 Photoshop Tutorials for Better Navigation

Navigation is obviously one of the most crucial aspects of web design in terms of usability, but often it is also a focal point of the design’s appearance. Navigational buttons, bars and menus provide the designer with an excellent opportunity to be creative and add some style to the design. What better tool to use for this purpose than Photoshop?

Here is a collection of 45 tutorials that will help you with creating the perfect navigation. Some of them produce an end result that is fairly similar to another tutorial on the list, but you can learn something from each one as they take a slightly different approach.

Stunning Vista inspired menu from PSDTuts

Slick blue navigation menu from SigTutorials

Glossy navigation bar from Core GFX

Quick glass buttons from Bits O’ NewMedia

Basic sleek button from psFreak.com

Sleek buttons from OriginMaker

Vista styled button from psFreak

Shiny green button from psFreak

Sleek glossy blue button from AnotherTutorialSite

Stylish button from OriginMaker

Glowing buttons from OriginMaker

Stylish blue button from Photoshop-Tutorials.us

Shiny orange button from TutorialSubmitter

Unique blue button from OriginMaker

Stylish black nav bar from Dicat.us

Vista buttons using styles only from The Not Simple Solution

Black Vista style button from Great Design

XP style navigation from Tutorial Guide

Glossy navigation menu from Gamexe.net

Glossy style carbon fibre navigation from Photshop Star

Professional glossy buttons from Photoshop Star

Simple glossy navigation buttons from Photoshop Star

Image sprite navigation using CSS from Style Meltdown

Orb button effect from Boonage

Clean and dark navigation bar from Aviva Directory

Nice, clean vertical menu from bwebi.com

Flexible buttons using Photoshop shapes and styles from Veerle

Web 2.0 style buttons from Iris Design

Vista style nav bar from Aviva Directory

Web 2.0 buttons from BlogWatts

XBox360 style nav bar from EvoGFX

Simple and clean menu bar from Photoshop Pack

Glass type navigation bar from Pixel Digest

Tabbed navigation menu from UPUP Media

Vertical navigation menu from EvoGFX

Plastic navigation bar from Tutorial Park

Blue button from Toxic Lab

Glossy web 2.0 buttons from Aviva Directory

Pixel style navigation box from Aviva Directory

Red “order now” button from Caged Flame

Aqua button from Pragt.net

Mac button from Pragt.net

Duotone vertical menu from Pegaweb

Glass button from Depiction.net

Simple web button from 3by9

Professional dark button from Aviva Directory

77 Resources to Simplify Your Life as a Web Designer

Color Tools

Choosing the right color combination can be a difficult task. Try some of these tools to make it an easier decision.

• Color Schemer Gallery
• COLOURlovers
• Website Color Picker
• I Like Your Colors

For more color-related tools, see Find the Perfect Colors for Your Website.

Free CSS Navigation Menus

CSS-based navigation menus are used by most websites now, but they don’t need to be created from scratch. There are hundreds of menus already created and available for your use. You can use them as is, or customize them to meet your needs and match your website.

• Listamatic
• Exploding Boy
• Alvit.de
• Dynamic Drive
• Our own collection of CSS Menus
  

DHTML Navigation Menus

Xtreeme DHTML Menu Studio is a great tool for quickly creating dynamic navigation menus (cost: $49).

Photos for Your Website

Quality images greatly enhance the look and appearance of a website. You can find photos for free or buy higher quality photos for as little as $1.

• Stock.Xchng - free stock photos.
• Stock Expert - Low cost stock photography.
• iStockphoto - Low cost stock photography.
• Big Stock Photo - Low cost stock photography.

Icons

• IconFinder.net - Icon search engine
• 31 Sources of Quality, Free Icons

Blank WordPress Templates

If you design WordPress themes you can save yourself a lot of time by downloading these blank themes (from Tomorrow’s Laundry). The blank themes provide you with a very basic starting point to work from.

CSS-Based Design Templates

You may be able to save time by starting with a basic CSS-based template. Most websites are built off a one of several different layouts that can be started from a template.

• Layout-O-Matic - A tool that lets you create your own CSS-based template.
• CSS Creator - CSS layout generator.
• Layout Gala - Collection of templates.
• Open Designs - Open source templates.
• Open Source Templates - More open source templates.

Eric Meyer’s CSS Sculptor

One of the leading CSS designers has created CSS Sculptor to speed up the creation of CSS-based layouts. If you design a lot of websites this $149 software may be very helpful.

Dead Links Checker

Dead links are extremely frustrating to visitors, but checking them manually is not realistic. These tools will do it for you.

• DeadLinks.com
• Online Link Validation Tool

Testing in Multiple Browsers

Adequate testing is a part of the design process, and unfortunately that means testing in a variety of browsers.

• Browser Shots
• Browsercam
• NetMechanic

For more information on this subject see Effectively Testing Your Website in Multiple Browsers.

Validators

Valid code is generally more accessible and it should be one of the first things you test when you encounter a problem.

• HTML
• CSS
• RSS and Atom
• RSS, Atom, and KML

Scripts

There’s no need to re-invent the wheel. Save yourself some time by using free scripts that others have created.

• JavaFile
• PHP Freaks
• DynamicDrive
• The JavaScript Source
• PowerfulScripts
• DHTMLGoodies.com
• PHP Open Source Scripts

Favicon Generator

Favicons are very popular right now, and they don’t have to be difficult to create. Try these free tools to create your own and help brand your website.

• Dynamic Drive
• Favicon from Pictures
• FaviconGenerator.com
• Favicons with text instead of images
• Graphics Guru

Fonts

Typography and fonts can make or break a design, but it can be time consuming to try a number of different options. Try some of these resources.

• 80 Beautiful Typefaces for Professional Design (Smashing Magazine)
• dafont.com
• Urban Fonts
• 1001 Free Fonts

Web 2.0 Tools

Most of the modern web 2.0 and social media sites have several design features in common. Help to make your designs look more modern by incorporating some of these design tools.

• Stripe Generator
• Web 2.0 Badges
• More Web 2.0 Badges
• Web 2.0 Icons
• Web 2.0 Logo Creator
  

Button Makers

Buttons are everywhere. Easily and quickly create your own buttons with these tools.

• Dynamic Drive
• Kalsey.com
• Lucazappa.com
• Blog Flux
• Yugatech.com
• MyCoolButton
• Buttonator
  

Gradient Image Tools

Gradient images are another staple of web 2.0. If you don’t have Photoshop there are some other ways to create gradients.

• Dynamic Drive
• 4u2ges.com

Rounded Corner Boxes

Creating boxes with rounded corners is easy when you have the right tools.

• CSS Rounded Box Generator
• Spiffy Corners

CSS Speech Bubbles

Speech bubbles will give comments and quotes some variety and add to your design.

• WillMayo.com
• CSS Play

CSS Tools

If you’re looking to clean, optimize and compress your CSS code, here are some choices.

• CSS Tidy - a CSS parser and optimizer.
• Clean CSS - a CSS optimizer and formatter.
• CSS Optimizer
• CSS Analyzer - a validator plus.
• CSS Mate - online CSS editor.
• CSS Compressor

Miscellaneous

• Web Host Uploader - A simple FTP tool that eliminates the need to manually upload changes with an FTP client. This tool uploads changes with a single click.
• Web Standards Checklist from Max Design.
• Firebug Add-On for Firefox - Edit, debug and monitor your CSS, HTML and JavaScript in any live web page.
• Web Developer Firefox Add-On - Adds a toolbar with a number of features and web developer tools.

6 Things You Need for Your Web Project to Succeed

Being at an age where I’m just beginning to carve my path in the real world, I tend to have many peers and co-workers who constantly think about making an income besides sitting in front of the computer eight to ten hours a day in a windowless room.

by Andrea Mercado

I’ve had thousands of conversations about initiating startup companies, selling IT products or services online, creating profit-generating web applications (like a derivative facebook site), and putting up blogs. Eventually, I began to see characteristics that I feel are needed in order for your own project to succeed, and I present them here.

Don’t be afraid to commit.

If you’re comfortable with your current salary and you need the promise of eating at least one meal a day (sans ramen noodles), why change it? If you can’t commit whole-heartedly to your endeavor, things won’t happen, and you’ll constantly put your project second on your to-do list (i.e. right below playing “teh gamez”). In addition, when you have other obligations that take up the majority of your day, you won’t be able to commit the time and resources needed to get things rolling. Who wants to sit in front of their computer after work to design the UI interface of your application or draft a business proposal to pitch to a small-business venture investor when you’ve already used most of your thinking and creative energy at something else?

While talking to a friend of mine who’s in the midst of developing a startup company, I heard the ultimate startup killer, “I think I’m gonna try and get a part-time job somewhere, just to help pay the bills”. To which I responded with, “There isn’t a better motivation then ‘hungry’”. Put yourself in the situation where there’s no other alternative to success. You can ask anyone who knows me, one of my most-used phrases is a rip-off from Nike, “Just do it”. Take a leap of faith in your ability to succeed and overcome the obstacles of your projects.

I’m not unnecessarily asking you to quit your day job (that would be hypocritical of me), but you may have to consider (a) scaling down your project to something you can manage on a part-time basis, (b) adjusting your commitment to other duties and responsibilities, or (c) coming up with something else that you’re equally passionate about, but can manage do to in your spare time.

Before doing anything, set your goals and develop your idea in a presentable way.

Right on the onset of your project, there should first be a clear definition of goals and what it is, exactly, you’re peddling. When you’re asked about your idea, you should be able to respond in a concise, clear, and marketable way. If it takes more than five minutes to describe your idea, it says that the concept is either (a) too complex — so you should consider simplifying, (b) you’re clueless as to what needs to happen — so you should develop your ideas further, or (c) a combination of both.

Whether you’re talking to an acquaintance about your idea (i.e. a random person you met at the bars) or pitching it to a potential investor, you should always be prepared to cover these questions:

• How do you describe your project in two to three sentences?
• Who are you selling to and what’s your plan-of-attack to reach and market to them?
• Why would people attain services or products from you, or how are you different from what’s already out there?
• Who are you working with, and how does it compliment your skill set? In other words, do you have the right people to make it happen?

Besides helping you conceptualize your idea in a more graspable way, these points give your audience the basics of what you’re trying to accomplish, and allows them to comment/suggest things constructively.

Avoid going solo.

There are several reasons why a single founder is bound to fail. For one, hard decisions are going to be tough to settle without another person (or two) calling the shots. Things won’t happen and there will always be impasse’s between youyourself. and

Also, there won’t be enough diversity in generating ideas and problem-solving processes. If decisions were made in a group, person A’s idea of “let’s make a myspace derivative… only we give the user even more freedom to customize their page” might be swayed by person B’s more even-keeled reasoning.

Additionally, with a partner, you can motivate each other to keep things going, akin to having a workout buddy to force yourself to go to the gym.

But there’s the other extreme, and it’s the “too many cooks/chiefs/shot-caller” team. This runs into the problem of things being argued constantly, a lot of profanity-slinging, and important decisions not being made in time.

A good-sized decision-making team (drawn from observation and experience) is two to three diverse (but like-minded in the end result) individuals. Personally, I believe a three-person team is the way to go because there won’t be any ties when issues are being decided upon.

For example, I, being technical, simplistic, and lacking business/marketing sense, would choose a more open-minded, “full-of-big-ideas”, business-savvy peer to be in a startup with. Then, I’d pick someone that falls in the middle, someone I’d dub “the mediator”, the person who’s in between the two extreme personalities. We will all have varying skill sets and personalities that compliments each other, and we each “fill in the blanks”, so to speak, of what the other partners lack.

Hire (and pay) well.

When your startup relies on other people (programmers, graphics designers, business school MBA grads), you have to pick the right people, and once you do, you have to keep them on the payroll. Being a cheapskate when it comes to human resources will cost you a lot in the long run. How would you expect employees to commit to developing your idea when you won’t commit to keeping them on board? When your employees jump ship, you’ll be stuck in the water. Your success hinges on the people working with and for you.

Don’t make money your sole goal.

You have to be passionate (borderline obsessive) about your idea. You can’t be in it just to make a boatload of cash. Look at profit as just one of the benefits of accomplishing your project. If you’re not passionate about your plan, come up with something else, because this shows your lack of interest (and most probably your lack of expertise) in your chosen area.

For example, I’ve been trying (for almost two months) to launch a blog that my brother and I co-founded (about consumer-related topics such as mobile phones, PDA’s, cars, etc). Although these are things I’m knowledgeable and deeply involved in, I lack neither the extreme fervor to get it up and running, nor the expertise that, say, a professional consumer technology editor working for a magazine, has. With Six Revisions, it took me two days to launch, design, set-up, and start publishing stories. When you follow your passion instead of chasing after the dollar bills, things happen quickly and successfully.

Be confident and unyielding, but listen to what other people are trying to say.

You have to believe in your idea, you should have the mindset of proving your naysayers wrong… but always listen to what your peers have to say. Believe it or not, other people are smart, reasonable, and experienced too. Don’t miss out on an angle that you failed to see, or make a mistake that your super-PHP-expert friend warned you from the start about SQL injections — listen keenly and avoid the temptation to shut them out just because they’re not saying what you want to hear. If you feel their criticisms or suggestions are wrong or won’t work in your case, simply say, “Thanks for the input, but I think I got it”. This says that even though you’re not going with their idea or suggestion — it still indicates that you appreciate their input and that you’re always open to any ideas they may have in the future. If you shut out these valuable resources, in the end, you’ll have no one to else to blame but yourself.

All in all, I think these are things you should keep in mind and try to have when you’re thinking of that next big project that will oust digg.com’s spot in the social bookmarking arena. My biggest suggestion is to believe in yourself and don’t doubt your abilities… if you don’t think it’ll work, I can almost guarantee that you’ve killed your idea right there.

I’d like to hear your thoughts about the subject. What are the other ingredients for succeeding in your projects? Drop a comment!

How to Create an Effective Web Design Questionnaire

The internet has given the web professional a plethora of venues for seeking project-based work. With lots of places offering freelance gigs such as allfreelance.com, classified listing sites such as craigslist , and job boards on popular weblogs such as FreelanceSwitch and Smashing Magazine, the resourceful web builder can scout and find jobs that extends their geographical boundaries.

An effective creative questionnaire allows you to gain relevant, focused, and helpful design information without taking up a lot of the client’s time. I use the term “questionnaire” because it’s a familiar term, but as you’ll see, some examples aren’t questions.

This article is primarily about developing a one-way questionnaire where you aren’t there to explain or expound on the questions you’ve asked the respondent, though the same concepts apply whether you’re communicating via email or during a face-to-face meet.

Keep it as short as possible

Long questionnaire forms, in my experience, tend to result in rushed responses. Keep questions and the survey as short, concise, and clear as possible. We have to respect the client’s time. Typically, a demand for a website arises when a business is just starting out or when current solutions can’t meet increasing demands; either way, they’ve got a lot on their plate already.

Instead of:

“Think for a moment about your company’s mission statement – How does that traverse into the online world and how will a website achieve your mission statement?”

simply say:

“In your mind, what’s the business value of having a website?”

The latter example is terse and unambiguous. Let them do the writing, keeping yours to a minimum.

Include creative questions, preferably in the beginning

A creative question, in this context, refers to unconventional questions that have two goals:

1. to extract information indirectly - “If your website was a car, what car would it be?”
2. to get the respondent in a mood where they’re comfortable to say anything without restraint.

An effective questionnaire gets the client’s uninhabited, raw thoughts and emotions. Including them at the start can set this tone early on in the process.

Examples of creative questions

• Imagine a typical user browsing your website, what would they be thinking right now?
• Use one word to describe your website.
• What features of your website would your competitors be most envious of?
• If your website disappeared for a week, what would your users miss the most?

Provide example responses to focus and clarify your meaning

Your questions may seem crystal clear to you, but to the client, it may mean another thing. Provide sample responses to direct your client’s answers.

Some examples:

• List down key words that you associate with your company. Without prompts, you can get very colorful responses like “awesome”, “da bomb”, “where I get money for my gambling debts”. Adding “For example, a Spanish restaurant may use ‘paella’, ‘international’, ‘culture’” would make your question less vague.
• What types of designs do you like? You can indicate your expected answer by saying instead, “Please view these websites [then, list down some website addresses]. What do you like about them? What do you hate about them?”

Avoid unfocused open-ended questions

An open-ended question is one that allows the respondent to answer in a less-structured fashion. For example, an open-ended question would be, “what do you think about web 2.0?”. In contrast, a closed-ended question would be, “What’s one thing you like about web 2.0?”

Open-ended questions are a necessity in design questionnaires, but avoid ones that are vague and overly generalized.

Examples

• Describe the design you want. You can focus the respondent’s answers by saying instead, “Write specific design features that you’d like to see in the design mock-up”.
• Describe the nature of your business. This can be revised to: “Describe a typical day in your place of work”.

Evolve (tailor) your questions

Web development projects typically take week to a month’s worth of work. This means that you can—and should—take the time to customize your questionnaires for each of your clients. If you use a web-based form, this can be a bit more tedious, but it can be done by sending more questions in an email. Not only will this allow you to gain information unique to the client’s industry, it also shows that you’re giving personal attention to their needs.

Typically, I prefer to have only ten questions per questionnaire, seven of which are my standard questions and three are tailored towards the client’s particular organization.

What to do after you receive a response

Internalize it. What I do after getting a questionnaire back is I read it thoroughly, once or twice. I digest the information I’m given by rewriting and rephrasing the responses on a text file that I keep open as I design the mock-up. Embrace the subtleties of your client’s responses, take notice of grammar or spelling mistakes, all of this can be significant in helping you learn about the people you’re working with.

Example:

Website name: My AWESOME Company
Tagline: This is so awesome that I capitalized "Awesome"
Preferred colors: none specified, but described as  “high-impact”
Look and feel: Web 2.0, gradients, large text
Key words (design theme): fun, young, colorful

Ask for clarification if needed. Don’t be timid in following-up on answers that seem unclear to you. Ask as soon as you can so that your client still remembers the questionnaire-answering session.

Use it to strengthen your mock-up presentation. Use the responses while presenting your initial design mock-up to explain the design direction you took. Quote responses verbatim, if appropriate. For example, if you chose a sans-serif font face, you can say “In your response, you indicated that you wanted a clean, modern, professional design, which is showcased in the mock-up by the dark-gray, Arial font…” If you chose green hues, you can say “You mentioned that you needed a website that ‘evokes a feeling of cleanliness and ‘eco-friendliness”, so I decided to use green hues to…”

Use their responses to explain why you decided to use certain colors, a certain layout, why you avoided particular elements, etc.

Some other tips I’ve found helpful

Outline the purpose and relevant information in an introductory paragraph. Describe the purpose of your questionnaire. Assert what you expect to get as a response. Indicate the importance of the questionnaire. Typically, I’ll say something along the lines of “You are a very important part of the design process so your responses here will prove to be a valuable asset throughout the project”.

Let the client know how much time to take. Most of the time, this avoids rushed responses. I ask each respondent to take between 30 minutes to 1 hour so that they may properly answer the questionnaire.

Leave out the tech jargon. It doesn’t impress anyone, and it will only annoy them if they don’t know what you’re talking about. Use terms that are common knowledge.

Fix flawed questions. Every few projects (usually I do it every three projects or so), I take my most current questionnaires and I evaluate each question for its usefulness and clarity.

Fill out your own questionnaire. I’ve found it very enlightening to fill out my own questionnaire form. When you write the questions yourself, you don’t really think too much about the effort and the process of responding to them. I’ve found questions where I thought, “Man, I don’t want to answer this, it’s too damn long and I’ve got so much stuff going on”. Try it, at the very least, it’s a fun activity.

Readers Pick: 12 Excellent Websites to Follow if You’re into Web Design

The easiest way to keep up with the latest news and resources is by subscribing to RSS feeds of your favorite sites. When I wrote an article called "30 Websites to follow if you’re into Web Development", I knew I couldn’t include everyone’s favorites, so I asked readers to suggest other websites worth following.

This is a collection of just some of your suggestions. Each entry has a link directly to the site’s RSS feed, but if you want to include all of them into your feed reader, here’s an OPML file for all of them.

1. CSS-Tricks

Suggested by: Matthew Adams of 101PoundWebsite.com, David Lano of David Lano’s Blog, Jake of DesignerFied.com, and Nodster

CSS-Tricks is a site by Chris Coyier that shares information about CSS tips, tricks, techniques, and news. CSS-Tricks also has a fairly active forums for those who want to talk about CSS and web design, as well as a Video section containing screencasts on web development and design topics.

• CSS-Tricks articles feed
• CSS-Tricks video feed

2. DevKick

Suggested by: David of DevKick

DevKick focuses on web development articles geared towards web designers. It covers topics such as Parsing strings with jQuery, web components/widgets for web designers/developers and inspirational posts such as Graphic Design from 1950-1970. They also have a News feed that shares resources from around the web.

• DevKick Blog feed
• DevKick News feed

3. Design Bump

Suggested by: John Campbell of Design Bump

Design Bump is a community-driven social media site dedicated to design - much like Design Float and DZone (for developers). You can subscribe to particular categories such as Web Design, Galleries and Showcases, Graphics Design, Programming, and Resources.

• Design Bump Popular feed

4. Design Melt Down

Suggested by: aleeesha

Design Melt Down discusses trends and issues pertaining to web design. It’s formatted like a book, with a table of contents displayed on the side bar. Categories include: Principles of Design, Color Usage, and Design Elements and Techniques.

• Design Melt Down feed

5. Vandelay Website Design

Suggested by: Jason of Jason Bartholme’s SEO Blog

Vandelay Website Design is a blog written by web designer Steven Snell that discusses topics in web design, website marketing, social media, and search engine optimization. A couple of popular articles over there are: 77 Resources to Simplify Your Life as a Web Designer and Effectively Testing Your Website in Multiple Browsers. Also check out Steven’s post here on Six Revisions on 20 Invoicing Tools for Web Designers.

• Vandelay Website Design feed

6. mezzoblue

Suggested by: Mark of All Things Marked

mezzoblue is the blog of acclaimed designer and author, David Shea. He writes about topics like the impact of image replacement techniques on findability and designing icons.

• mezzoblue recent entries feed

7. Astheria

Suggested by: Drake

Astheria is the personal blog of Kyle Meyer, a user interface designer. Astheria provides design articles, viewpoints, and resources on the subject of design. Example articles include Evaluating the Wordpress 2.5 Interface and Originality in Web Design.

• Astheria feed

8. Design View

Suggested by: Drake

Design View is the personal blog of Andy Rutledge, a chief design strategist. Some things he talks about are styling text links and the layers of design. He also posts examples and demonstrations that illustrate concepts in design.

• Design View article feed

9. PS HERO

Suggested by Shycon Design

PS Hero is a wonderful Photoshop step-by-step tutorial site. PS Hero shows you a variety of Photoshop techniques that you can apply for web graphics such as how to create wood inlay text and creating custom patterns.

• PS HERO feed

10. A List Apart

Suggested by: Chris Harrison of cdharrison.com, Ben, Sam, and amir_arian

I think very few people are unfamiliar with A List Apart, but just in case you haven’t heard of them – A List Apart is an online magazine for people who create websites. Articles are written by some of the world’s top web designers, and the ALA crew itself includes people like Eric Meyer, Jeffrey Zeldman, and Jason Santa Maria.

• A List Apart Link and Summaries feed

11. Help Developer

Suggested by: Simon North of Help Developer

Help Developer is a blog that shares tips, resources, advice, and news for web/graphic designers. Some posts include adding thumbnails WordPress posts, places to post your graphic design portfolio, and how the web was 10 years ago.

• Help Developer feed

12. Stylized Web

Suggested by: Mark

Stylized Web is a blog about web design trends, tutorials, resources, and WordPress tips and tricks by Dejan Cancarevic. Some articles you can find on Stylized Web are Useful WordPress Tricks, Stylize your digg count, and 10 best CSS hacks.

• Stylized Web entries feed