My Web Design and Development Process

2005 was a big year for me. It was the beginning of my career as a web designer.

I was already known as a professional digital illustrator, mascot designer and logo designer during this time, having multiple local and international clients under my belt. Because most of them wanted to hire me for web design and development as well, I entered the field. The transition wasn’t hard because it’s actually something I learned in college.

The first gigs that I landed were for small businesses and for personal websites. Even before, I made sure to please my clients with my works may it be in logos, mascots, illustrations, web designs, or game art.
Of course, I also make sure to never lose my identity as an artist in this business. I always suggest on how to improve the ideas whenever I see fit.

Since 2005 up to the present, I’m very proud to say that I have satisfied my clients’ websites needs and wants. For me, uniqueness is the key. Each of my works is unique and appropriate to their niche.
Whether it’s a personal or a business website, I know that part of my work is to help them create an identity.
The burden of an artist is accurately reflecting a brand. Each of my outputs reflects who they are or what they stand for.
Most of the websites I had the opportunity to work on are business and eCommerce sites. Still, the principle applies to all.

My satisfaction, and that of my clients, don’t come easily. Like in all worthy things, I put great effort into every part of my process.

Take a look at my usual routine as a web designer. What I’m about to reveal is the six steps I follow that has worked for me in meeting my clients’ tastes.
 

Step 1: Introduction and Discovery

Consider this the getting-to-know-you stage. During this phase, my team and I discover what my client wants, how the website will look and feel like.
It’s also when both parties communicate ideas, goals, objectives, and a lot more.

To begin with, as a web designer, it’s when I find out what the website is for. If the client has any particular elements he wants included, this is when it happens. If I’m acting as a mascot designer, I ask what the mascot is for. For example, if it has any personality that would help me create a more appropriate design, I should find it before the end of this step.

This is the most important phase because it determines the plans for the next steps. In fact, everything discussed here is taken note of.
 

Step 2: Planning

What my clients know about my process, I don’t rely solely on my instincts in any of my projects. Everything is planned.

Before the visual design, I make something we called a “wireframe”. Basically, it’s the skeleton of the final output. Think of the wireframe as the skeleton of the body. You see the basics of which goes where, but there isn’t much detail. The flesh and blood, or in my case as a web designer, the visual style is taken care of later in the process.

For now, the goal is just to be clear about the positioning of elements on the page. This is also when I think of different ways to achieve my clients’ wants and needs.

You know what this means? There could be more than one plan or wireframe for each project.
 

Step 3: Visual Design

Once the client approves the wireframe, I now turn my efforts in filling out the details. Now is when creativity really comes out to play.

The overall visual design, however, isn’t a mere shot in the dark. There is a lot of thinking that goes with that.
I don’t settle on a particular design just because it looks good. Think about it, would a dark-looking web design be appropriate for a site made for children?

Chances are you agree with me when I say no. The brand of the business already limits the design choices. My job is to come up with something one-of-a-kind without expanding those limits. It isn’t just for the sake of uniformity either. The design is a message, becoming an extension of the brand itself. The colors used is also determined during this point. Again, it should be a reflection of the brand as well.

Right away, the elements and design I use is limited by the brand I’m working with. Still, knowing the role of design, I always recognize the importance in choosing the “right” one. Now, my job as a web designer is to expand those limitations. My ideas and the design I use should reflect the brand, while still being completely unique.
As I’m always dedicated to bringing only the best output to the table, I might do some revisions until I feel it would satisfy my clients’ taste.

This is when I do the web design revisions, not after the design has already been coded. It’s the most practical way to go.
 

Step 4: Web Development

After completing the visual design of a website, I now pass the torch to my partner who’ll take care of the whole web development phase.

We make it a point to make sure that it’s easy-to-read. One of the ways we do that is by commenting on the codes, so other people who’ll check the code flow wouldn’t have a hard time understanding it.

The first thing my partner does is code the front end, HTML5 and CSS3. Every line should be written neatly to make the next steps easier for us. Then, we convert it to CMS so non-techy guys can edit the web content.

Most of the websites we make are built on WordPress. However, it can also be on Shopify or even custom.
Before we launch the website, we test both the front and back end.

After those steps, the website should run smoothly on phone, computers, and all major internet browsers. That includes Google Chrome, Mozilla, Internet Explorer, Microsoft Edge, Opera, and Safari.
 

Step 5: Feedback and Finalization

Now that everything’s been done, we go on to soft launch the website. During this phase, only admins (us and our client) can see the site.

If our clients request revisions, this is when we take care of them. Once he’s fully satisfied with our work, we’re going to prepare the website for the official launch.
 

Step 6: Source Files, Launch, and Maintenance

Now we’re going to hand over the final version of the web design as well as the backup of the website.
Even after giving the source, we keep our own copy just in case our client loses his. They can retrieve this by contacting us through our email.

Then, the launch of the website for public viewing.
We believe that the first phase is just as important as the site maintenance phase. We also believe that our responsibility doesn’t end with the launching. That’s why we maintain the website for one month without any charges to make sure it is secured.

Aside from that, we check for updates of browsers, plugins, and CMS. The point of doing so is to make sure that the website works as well as we plan it to.

There’s always a chance that your online competitor would go to unthinkable measures to eliminate you on the scene.
Here are some things that your competitor/hackers can do on your website if it doesn’t go under maintenance:

Install malware, add bugs, virus and errors
Make your site offline
Send spam to your customers
Steal site visitors’ credit card information
Redirect them to malicious sites
Install backdoor to secretly enter your website
SQL injection to insert malicious code to your database
Lock down your website’s files and directory
Pull down your website’s Google ranking
 
If maintenance is neglected, there’s a great chance that the problem would spread like virus. This would mean higher costs for the client over time.
The worst that could happen is you have to rebuild your website from scratch.

An extensive maintenance plan is necessary to avoid all these. If you still haven’t got one, you better act quickly. We can test your website’s overall “health”. Through various online tools, we will uncover certain details of your website. This includes traffic, sales, and engagement.
Most importantly, threats are neutralized, thus ensuring that the website runs in optimal performance.

So, that’s my complete web design and development process. I know my clients would agree when I say it is a good system. It shows my dedication to my craft, a reason I’m able to design and develop quality websites every time and why I became a successful web designer. Check out the websites we have designed and developed for our clients.

My works and I have been featured on

Brands I've worked with along the way