Web design process play a great positive role in web designer professional life if it is simple and organized. What are the top priorities for web designer? What should you take care of if you work as freelancer? This post touches up organizational web design project topics as well as creative workflow and process. I describe typical web design process used by me today. I can’t say that I got the ideal web design process but its efficiency is proved by trial-and-error method.

1. Initial contact

The most important point at this stage of web design process is to make good first impression. You need to understand the client general needs and ensure them that you’re able to provide them with quality web design and solution for their business. The base for client decision should be your testimonials, portfolio and references. Never do any serious web design work before initial payment. By any means it can’t help you to persuade potential client but you can loose your time and work for free.

There’re most of the clients or competitors studying the market who just would like to waste your time. Learn how to determine those ones. Most of the inquiries freelance web designers receive have zero or little money behind them. Have a solid copy and paste project estimation system. Send out pre-made email replies and customize them with personal details. Thus you will save your time for something more important and let potential clients feel your attention.

2. Consultation and quote

Next step in your web design process is to ask as much questions as needed to have a full picture of project’s complexity and functionality to give a quote to the client besides researching the company and the market. The biggest mistake to the web designer and the client’s success rate is not charging for the “needs assessment” process and guessing what the client can spend. Note that the detailed estimation you could provide only after clients approve your workflow and technical details.

The most important things you should know are the basic purpose of the website, who’s involved, what is the budget and time period. Discuss needs and goals of the site, message the client trying to communicate through it, what the visitors should remember and what is essential functionality client would like to see on their website? Other questions to ask are about target audience, what are advantages of this company over competitors on the market? You should take into attention not only the site goals but potential visitors’ goals and balance these two things.

3. Payment

If the client doesn’t disappear after you let him know about most important things in your workflow and that you won’t work before the initial payment it tells you that he is quite serious. A large number of clients order mockups to tens of web designers without prerequisite payments but only one will get paid or the client can just change his mind and disappear without paying to anybody. Though some people would argue that they work for idea or like design process, all of designers work for money.

Usually payments are divided into 2 or 3 different parts. It doesn’t matter how much you will be paid by initial payment but it should be done as soon as possible because it’s your guarantee that your future work will be paid and project will continue. The second/third payment should be made right before delivering final revision to the client or launching the website. Don’t be afraid to simply drop and walk away from a project if the client refuses to pay or demands more than you originally outlined. Keep all files and do not deliver source until final payment is made.

4. Competitive Analysis and Brainstorming

It’s a great idea to have a look at already existing ideas and implementations created by competitors. You need to identify strengths and weaknesses of those existing designs and subsequently use successes and avoid failures. Find similarities and differences between projects. Try to find out the characteristics which weren’t used before.

If your web design project has no creative boundaries, it’s time to begin brainstorm session. Create lists of relevant words, topics, and phrases related to the project. Don’t pay attention it would be closely related or abstract your task is broaden project ideas as much as possible and uncover not obvious solutions. Use thesaurus and mind mapping software. You could use paper prototyping and whiteboards as well.

5. Project’s brief

First of all you should learn what needs to be done, roles and responsibilities in this project. You should clearly visualize what’re doing. Is it website to impress clients, impress colleagues or just make as much money as possible?

You also have to deal with unrealistic pricing and functional expectations. It’s a good idea to suggest a questionnaire to be filled by client. Make and provide to client project’s brief for approvement. It’s always great to have a guideline to work with. In addition approved by clients project’s brief will be your insurance for unrealistic demands.

Will Flash, Ajax, JavaScript intensively be used? Would website include video, audio or Secure Credit Card Transactions? Should you use simple html or CMS and frameworks? The timeline with major milestones should be also outlined. The project brief should include concrete tasks, assignments, target dates and dependencies between tasks.

Before starting project’s brief you should already knew how you are going to structure content, making hierarchy and priorities. You should make clear purpose of the project, along with the ideas and concepts.

The project’s brief should obviously include approximate Sitemap, Wireframe and Task Flow. If the project requires serious programming, special functions or usability it should be described as detailed as possible.

Sitemap makes it easy for you to define priorities, site navigation and structure. Task Flow outlines the whole process until the website launch.

A wireframe include all the navigation, function and content elements but with no graphics. It is used to uncover any problems or missing elements, and will act as the blueprint for the content, design and construction work later. While most websites wireframes could be drawn in graphic design software, some of them require working HTML prototype to click through and make sure everything is in the place.

Ask yourself what top-level links and forms (such as login and contact us) really need to be available on every page to be usable and to not confuse visitors too. The visitors’ path to needed content or action on the website should be as short as possible.

Sometimes it’s a good idea to sketch out the most important aspects of the interaction between site and user. The sketch should include entry points and paths to actions which your client wants to be done by visitors on the website. There could be a few successful scenarios, which may apply to different users and ways of using site.

Next step in web design process is the Content creating and preparing which is the most time consuming part in the project on the client’s side.

6. Mockup

Once you choose ideas after brainstorming and project’s brief is approved by the client it’s time to start drawing sketches on paper or in your favorite graphic editor especially if you use pen tablet. This is a fast way to come up with design ideas. With these sketches you should define and choose basic web site elements for page composition like header placement, column structure without a focus on small details.

As you’re satisfied with basic layout you can add more and more details. Your job is to balance the relative noticeability of all the visual elements on the page and accentuating most important things. There’s a lot of websites where visitors just get lost around bunch of links. They just didn’t know what to click and confused finally leave such a site. Carefully prioritize relevant visual elements that are most useful in explaining to visitors what the site is about, what they’ll find here, and where they might go next.

Though some of the most beautiful designs use type alone, unique and carefully chosen Imagery creates enormous visual impact, adding emotions and deeper level of understanding. While the best imagery is that one created for this particular project you can also use royalty-free stock sites. Just to remember to avoid cliche.

Try to not overdo photography or illustration because it can quickly create bloated chaotic design. Don’t forget about composition of balance and tension. Try to keep it as simple as possible and do not afraid to adapt something that has worked before, if it’s suitable. Craft custom buttons, an icon or logo, if doing so will deliver impact. You can make accent by contrasting graphic elements size, colors, shapes, lines or edges. You could add Movement (either actual animation or dynamic lines that give the impression of movement). Surround important elements with plenty of space around them to help visitors easier to identify them. Or place them at high-value positions on the page.

Typography is a crucial element in setting the formalness or informality of a design. Appropriate typeface should emphasize look and feel of the site. In general, it can’t contradict with usability rules as it should be easy to read. Though finding something unique is always a great idea you should already have in mind collection of different typefaces suitable for different themes.

7. Revisions

There’s such a funny feature as unlimited revisions provided by some web designers which means that they can work on the web design project endlessly. Usually client is provided with 2 free revisions and option to pay for each additional one. This process of work-feedback-rework is repeated at various stages in the project. Besides preparing the content, this confirmation process is also one of the main responsibilities of the client.

8. Coding and Programming

As a next step in web design process, you can start writing CSSfor the design at a high-level or use any of the CSS frameworks, focusing on the layout structure, major backgrounds, and large regions of the page. Then you could focus on details to each element, from the top of the page, down.

After creating CSS and testing in various browsers, the design could be changed in non substantial ways. Sometimes you need to sacrifice attractiveness to the benefit of usability and sometimes it even improves look and feel. As a web designer you should make decisions on the fly about what was important to recreate exactly and where you could be flexible by coding.

If the website requires backend development programming, CMS customizing any, integrating plugins or complex functionality you will spend additional huge amount of time on implementing it.

Don’t forget to permanently communicate with your client to show what you’ve done and what’re you going to do and maintain their confidence throughout the web design process.

Go along project’s brief and check website for relevance to it. If you meet serious challenges that could be obstacles to the project timeline don’t afraid to tell client the truth.

9.Testing and Quality Assurance

For this stage of web design process you main focus is to intensively test the site to discover any hidden bugs. Make sure that everything is working as it supposed to do. The most important point is to get fresh view on your site, it could be your colleagues or friends not involved in the project.

The site needs to be tested across all platforms to polish any technical problems, and checked thoroughly for content errors. It’s great if you have a friend or colleague who could give you a feedback as professional.

Your main focus area should be content without spelling, grammar or factual errors, working links, functionality related to the project’s brief, valid XTML and CSS, browser issues (most important are Internet explorer 6 and 7, Firefox 2 and 3, latest builds of Opera and Safari for Mac/Windows), usability, formal or informal site testing on target audience, SEO optimization, load optimization (reducing graphic, CSS and script size) as well as reducing number of quires to the database if it’s complicated high traffic website, possible caching algorithms.

You should divide issues into groups of critical (which should be fixed before site launch) and non critical (which you can address later) otherwise you could not launch website on time.

10.Website launch and maintenance

You need to watch the site for at least around 10 days or so after launch in case of problems, and if necessary fix the bugs. As the site gets ready to go online, it is important to document the style guide. It should include Visual Guideline (logos, colors, typography, the better idea is to block for clients possibility to change important design elements such text size and colors), Naming Conventions (files, directories, CSS, images, titles), future possibility of scaling and site structure development.

Plan to launch in a way that minimizes downtime. Usually the best time for launch new or redesigned website is the days with less traffic such as weekends. Because no matter how thoroughly you tested it before launch there for sure will be minor issues to deal with. Be prepared to fine tune or solve any unexpected challenges during the first few days of the site debut. The further maintenance (as a separately paid project or included in the main one) could include updating design elements to make site current, internal SEO optimization, functionality extending and dealing with scalability and security issues.

11.Testimonials

Almost every business relies on some form of ‘proof’ that they can deliver what they offer. When asking for testimonials it is helpful to provide guidance for your client. By asking them to answer questions they can quickly focus on what to say. Why did you choose me? How I contributed to achieve your business objectives? What will you say by recommending me to your colleague or friend? These questions can easily be asked via email. Ask for client testimonials even if you write them yourself and have the client endorse it.