My web design process, idea to execution. "The How" - Part two of three. - Jason Baldacchino

Visit Thought Hub

My web design process, idea to execution. "The How” - Part two of three.

8th June 2018

The How - blog post for from the series, my web design process, idea to execution

In the first part of this series, I delved into the process behind getting started on a web design project. I explained how we always need to do some background research in order to discover what a person is looking for when they visit your website. The reason for this is because a website can only succeed if it answers your specific visitor’s questions. It’s actually really simple to define what a good website is! It’s a tool which is relevant and attractive to your target audience, which easily helps your target audience find what they’re looking for.

Understanding this definition is more important than web jargon.

Now take a look at most web design agencies and study their jargon language… You’ll see phrases like “responsive design”, “lightweight builds” and “CMS (Content Management System)”. These are all very important aspects which cannot be understated, but, they mean nothing if they are not used in relation to how they assist a business in growing its online engagement.

When I started out as a programmer, I wanted to create complex digital products which were super ambitious and fun to use. At a certain point, I realised that this goal was skewed because if it doesn’t actually help the individual it’s built for, it’s not going to be a good investment!

So, the question I’m tackling in this post is how exactly can a website yield positive results?

I believe it really boils down to leveraging two things:



All branding tools are created equal, but some are more equal than others.

Think about it this way, a business card can quickly and clearly display your contact details. Staff uniforms can add credibility and professionalism. Well-designed catalogues help people interested in your product or service find exactly what they’re looking for… This means we should definitely invest in them, but alone, they probably aren’t going to cut it because what they can't do is effectively leverage scale and function.

What do you mean by scale?

The internet is an integral part of our society and around 85% of EU residents regularly use it. If you want to find information, you’ll probably visit Google at some point. This means that if a business is ranking well in search engines for a particular keyword or service, people who wouldn’t have known about them previously suddenly turn into targeted leads with intent. Local offline advertisement can be brilliant, but the essence of local ads is that they are often limited in scale, and it’s difficult to quantify the effectiveness of your advertisements.

When I build a website, I make sure it’s accessible to as many people as possible. I also make it memorable to stand out from the crowd.

Understanding this idea of harnessing scale gives context to the phrases like “responsive design” and “lightweight builds”. They are core methods of creating a digital branding tool which represents your business in a user-friendly way... Here’s a more detailed breakdown of couple methods I use to harness scale.

When I build a new website, I start from the ground up instead of using pre-built themes with lots of features I’m not interested in. My aim is to create an effective working design with as little code as possible because when a website is programmed efficiently, it loads quicker. Did you know that if a website takes more than 4 seconds to load, you could lose over 50% of the engagement you would otherwise have?

I also talk a lot about a framework called Bootstrap 4. It is a tool which, amongst many things, allows me to create different site layouts depending on the width of the screen displaying it. Try loading the homepage of this website on a desktop monitor then load it on a mobile phone and you’ll see how significantly different the layout is. This is known as mobile-responsive design and it’s incredibly important because mobile devices account for around 51% (and rising) of internet usage.

Bottom line: your business should have a fast-loading and mobile-responsive website (or app, landing page etc). This can quadruple the amount of conversions you get, and it can actually help you to really stand out against your competitors if they have dated sites, which is often the case for small businesses.

Let’s explore function, or functional design.

Not all design has to be functional; but web design most certainly does. Think about your website’s primary goals which we’ve established in part one… Well, we are aiming to achieve these goals whilst retaining an attractive design, right? One of the biggest areas I consider when working on this is the hierarchy of information.

This is a really simple concept to understand and it just makes sense when you start using it for functional design… Write down a list of your business features which are both essential and non-essential that you want your web visitors to learn about or to be able to interact with. Number each of these points from 1 to 10 based on how important they are to your business. For example, if it’s a local construction company, highly rated items would be the contact details, previous works, types of services as well as credibility stamps (years’ experience, sponsors etc.) Less important items may be the mission statement, regulatory standards and employee hiring information. Now, think about the canvas that you’re going to represent this information on. A website cannot just list information indefinitely with equal visual weight assigned to each detail, because people will get bored and less is usually more in functional design. We need to use what limited space we have in a proportionally relevant way. If the contact details are the most important thing for your point-of-contact website, then why are you putting them at the bottom of the page? If your sponsors are highly recognisable and can help validate your professionalism, then why are they displayed on an inner page and not near the top of the homepage? A good website gives precedence to the information which is important, and it should be designed in this way from the very beginning.

Another smaller example of functional web design would be through a technology called AJAX. This can be used to pull up new information as and when someone clicks a button, instead of simply having everything displayed in the first place. By showing less stuff initially, and by giving your visitors the choice to display what they want, when they want it, the design takes into account UX (User Experience), resulting in a cleaner, more logical visual layout which feels highly relevant to the person it was built for.

Bottom line: functional design can help people interact with your website and it makes a huge difference. If a certain aspect of your business is really important, then find a creative way to give it visual importance! Make sure your site is easy to navigate and everything just feels right. Don’t ignore small graphical errors because they will throw your visitors off.

I use scale and function to ensure my websites get results for my clients.

In this article which I hope you enjoyed reading, I explored a few ways in which I take project research and turn it into a tangible marketing tool. I believe that websites are the apex for promoting a business because they have the ability to leverage scale and function as a way of answering a potential customer’s questions. In part three, I’ll be explaining the process behind launching a website and how to measure its success!

Jason Baldacchino Malta based freelance web developer

I am a web designer and branding specialist living in Malta for the last two years. I help businesses improve their digital presence and land more conversions through their websites. In my free time, I study Latin and Ancient Greek at the University of Malta. If you have anything you want to talk to me about, get in touch, I'd love to speak with you!