So, over the years I have learnt and evolved my design process, which we use now at PB Web Development to help avoid these sticky situations.

Instead of running off and starting a design with a brief that was no more than a few dot points on the back of a business card, we've come up with our own process that involves and directs our clients through the entire process from start to finish.

Our process isn't unique. In fact, many creative and web agencies around the world follow or use similar processes to reach the same goals, a collaborative effort between the web agency and the client.

This is a little overview of how we go about the design process with our clients.

The Detective Work

In the beginning, there is communication. We spend time with the client to understand their business or organisation and find out exactly what they want, what the purpose of the website is and what goals they are aiming to achieve with the website.

Here is a list of a few things that we might ask a client:

• Target market and demographics
• Existing branding, print, logos marketing material
• Competition and similar websites to desired outcome
• Purpose of the website
• Market position

All of these factors are important as they all have a contributing influence on how the website is designed.

What Does the Website Do? - Functions

Determining the function and aim of the website is the next step of the design process.

Having a list of what functions the website will be required to do will determine what is designed and placed into the layout.

Take for example a simple brochure website that is being designed for a small consulting company.

They would determine the main function of the website as being:

• Provide information to potential new clients
• Generate leads

In this situation we would make sure that there are areas in the design where users can easily gain access to sales information as well as quick and easy ways to contact the business to start the lead generation process.

Using common F patterns and eye tracking research from usability studies, we can determine the best possible positioning for these particular main functions and content on the website.

Determining these functions will make sure that the website design has a focus and purpose.

Sketching It Out - Wireframing

Wireframing I find to be the most enjoyable part of the entire design process. For those that don't know what wireframing is, it is basically the process of sketching or mocking up the website in its most minimalistic form.

The point of this is to get the client and designer to concentrate purely on the elements and the positioning of elements in the layout of the design and not get distracted by colours, branding and styles.

There are many wireframing tools out there but the ones that we love the most are the ones that work on the iPad. Being able to sit down with a client and work with them on the iPad is highly engaging. (I can see iPad sales increasing.)

Building Foundations - Structure and Planning

Next we look at the structure of content on the website.

Planning the information architecture of the website at this point goes a long way, especially since content and copy for any website seems to always be one of the last things to be provided.

Having a good site map to work with greatly helps not only with the design phase but also with the implementation of the website.

How Does It Work? - Prototyping

When wireframing has reached a mature stage in the process and the client is happy with the results the prototyping can start.

Prototyping is essentially a functional version of the wireframes that have been designed so far. It is done to test usability of a layout as well as giving the client an overview of how the design is actually going to work.

There are many prototyping tools out there but you can actually use Joomla to quickly build a functional prototype.

This process allows the client to see how they could potentially interact with the website.

Pushing Pixels - Concept Designs

Now that we have all of the plans, wireframes and structure down packed, we can start moving some pixels around and be creative.

This is the stage when the style and theme of the website comes together.

From earlier meetings with the client and the detailed information that we have gathered, we can determine the colour scheme, target audience and general theme of the website.

The designer can actually go away at this point and spend some time being creative with the brief and information from the preceding processes.

Once a few concept designs have been created we involve the client with presentations of the concepts along with explanations and rationales as to why we've chosen certain colour combinations, styling and positioning of various elements.

With all of the pre planning and communication with the client we should hopefully be very close to a final design for the new website.

Once the concept designs are approved, our design files are cleaned up and prepared for development.

Conclusion

If you're starting in the world of web design or haven't tried pre-planning your designs, I hope this article helps you design and create beautiful and functional Joomla! sites and make the design process as smooth as possible.