The Process of Web Design

In every field of work, there is always a process involved to achieve a particular goal. The same principle applies to web design. There is no right and wrong way to approach this, but the steps I am going to mention are what I like to use, and I think most prominent developers out there follow these as well. A goal without a plan is just a wish, and we want to minimize all signs of wishful thinking. So, let’s jump right in.

I will assume that at this point you are familiar with the basic text editors and design software. I would highly recommend to get familiar with Adobe programs, and for the purpose of this crash course, Fireworks will do just fine. The most common mistake designers make when it comes to web design and development is that they skip the design phase, and start with the development phase immediately. Bad idea.

There are several phases toward accomplishing our objective.

Research Phase

The first phase is straight to the point. Upon agreeing with your client on what to make, this step works just fine. It is called the research phase.

When it comes to research, you want to exhaust all corners, uncover all rocks and get as much information as you can. If you are dealing with a client, then you want to ask all the questions from top to bottom, right and left, if possible in all the languages they speak. The goal is to get as much information as possible, because through this information you will have a clear picture of what is expected.

The research phase is when you study your competition to see what makes them stand out, or what weaknesses they have. This is the time to research on theme styles, colors, and functionalities to implement and to understand the goal and purpose of the website. Let it be noted that this phase is probably the foundation of your entire design process. It should take at least a week or more.

As a designer, you want to study the details of all the other websites out there. This means you must pull out a chair, open your eyes, and start analyzing the header styles of several websites, the body sections, the footer styles, the fonts used, the color shades and the meaning behind them. In other words, your brain must be on top of the game.

Content Collection

It is the client’s responsibility to produce all content. After all, they are the ones with the raw vision and goals of what they really want for their websites. There will never be a point where this role will shift. When I speak of content, all that it entails is photos, text and anything relevant that wants to be displayed on the website.

This phase is probably one of the most difficult phases of this entire process. I have come to discover that most clients expect you to produce content for them. And so, this marks the number one challenge in this field. Once you have completed all your research, and have managed to collect content, then the real work starts in the third phase.

Sketching and Mock-ups

If you have noticed something, then you will discover that up to this point we have not opened our design tools or text editors yet. We are merely working with a pen and paper and just surfing on the internet, digging for the information we need. This third step requires no special skills, so to speak. Using a pen and paper, you start to sketch down how the website will look like. You don’t have to be an artist to do this. “Stick figures” artistic levels will do just fine.

With the content that you’ve collected, you must now derive a way to put them in sections and pages. This is where you start to sketch how the home page will look like, and what content will be displayed on it. The same will apply to all the other pages and sections you and the site owner have decided to produce.

Once you have sketched out all your pages, you will have a clear vision of what you want to design and eventually code. As I mentioned earlier, you want to avoid Photoshop at this stage until all sketches are completed. These stages must not be done in isolation from the client. You will save more time as you get feedback and make the necessary adjustments.

Once you are both happy with the work so far, you can now jump into your computer. This should have taken you at least two weeks, depending on the feedback you receive. Never rush this stage. Sometimes this phase can be completed after months, or even a year of silence from the client. To solve this problem, you should demand a deposit from the onset before work begins. This helps both of you to be committed to the work.

Now you can open your favorite design software. Most people are familiar with Photoshop, but Fireworks will also get the job done as well. In fact, in my opinion, it is much simpler to master for simple web designing. With the sketches you made, you should be able to produce the mock designs that you want from all the research and content you collected. Just like you did on the sketching phase, you should only jump into coding once all pages are mocked.

Coding and Launching

The most commonly used software is Dreamweaver, but if you are familiar with other programs, then by all means follow your heart. You can now start coding the HTML markup and produce the website that you want. The technical skills vary from person to person, but the principle is the same. You will be transferring the mock designs into code, while at the same time using high level languages to implement functions you need for the website.

Once the coding phase is complete and tested, you can now launch it on your favorite hosting company. The benefits of having a custom website done for you is quite clear. You will have the flexibility to make changes you need as technology advances and web standards improve. Unlike templates or themes, you will be in full control with your custom designs.

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *