U.S BIANGO Freelance web designer

My Web Design Process

Introduction

To design and develope a website from scratch is a complex process. There’s a lot that goes into it. With new web design tools being exploded in the industry now and then, it’s difficult to map out an efficient web design work-flow process. From the information gathering to the launch of the website involves a lot of processes.

Web design work-flow is different from designer to designer. Ask any web designer, they will tell you something different. After all, our goal is just to design a look and feel website that our clients will love.

In this article, I will show you the design process that I find effective and efficient.

Note: That I’ll not be going through every detail of how I come up with my design solutions, just the main points (or at least what I find relevant to share).

Planning

I use pen and paper to do quick site maps. I want to make sure I capture the main navigation and the home page.

After discussing some ideas about the main navigation with my client, I will then proceed to my mind mapping software to plan the pages and the structure. That is the information hierarchy of the pages. My goal here is to structure the entire site’s information architecture.

Wireframe. I use pen and paper here again first before any software. I try to use my imagination as best as possible to come up with something. At this stage, I don’t go into details. My sight is on the layout. I just scribble down ideas. Therefore, I use pen most of the times because I don’t want to erase any initial concepts as I would be tempted to do if I were to use a pencil.

It’s now time to clean things up and make it a bit tidy. My go-to software for basic wireframe is balsamiq. Here, I experiment with my sketches and refine my ideas I want to go with. I’m not worried about the content or anything else, even though I make use of Lorem Ipsum (dummy text).

I make sure all the sections and call to actions are captured. After the wireframe is done, I’ll then present (not just show) it to my client for approval. After my client has approved, I move to the next stage.

Design

For now, I use Photoshop for design. Though I have plans to move over to Adobe XD in a few months. The design part is the fun and best part of the process, or at least for me.

This is the time I consider everything aesthetics. Once my design files are ready, I use the brand guide to capture all the brand elements (colour, typography, icons, logo etc.)

The finished product here should look very much alike to the result of the real website. My client should see almost exactly what to expect.

Coding

I setup my development environment in sublime text (code editor). All design files are ready. I primarily use HTML, CSS and JavaScript for front-end development. Back-end development is not yet my thing.

I love UI (User Interface) design so much, maybe because I am coming from a design background. So, as a freelancer, I have the freedom to choose projects that I feel I’m comfortable to work on. For Content Management Systems, I use Wordpress, it’s popular, and it has many plugins for all kinds of things one can imagine. it is very easy for my clients to update their site with no coding knowledge.

Conclusion

Like I said earlier, every designer has his/her way of doing things. there are many tools out ther for designers to use at their advantage. A lot of other designers use Sketch and Figma these days. It is trending in the design industry. Is is just the matter of prefrence sometimes or experience with the tools that determine which one to stick with.

This is not the best or recommended process out there. It is just my process. As I advance in my freelance career, I will be constantly refining this process according to my needs.

Join the discussion below and tell me about your process. I’d love to read them.

comments powered by Disqus