My Web Design Process

---

Introduction

Designing and developing 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 workflow process.

From the information gathering to the launch of the website involves a lot of processes.

Web design workflow 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 website that our clients will love.

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

Note: 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 scribble down ideas. Therefore, I use a pen most of the time 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 them a bit tidy. My go-to software for basic wireframes is Balsamiq. Here, I experiment with my sketches and refine the 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 action 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

I use Adobe XD for design. 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 like the result of the real website. My client should see almost exactly what to expect.

Coding

I set up my development environment in the 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 working 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 sites without no coding knowledge.

Conclusion

As I said earlier, every designer has his/her way of doing things.

there are many tools out there for designers to use to their advantage. A lot of other designers use Sketch and Figma these days.

It is trending in the design industry. It is just a matter of preference 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.