A comprehensive guide on web design & web design prices
Ivan Jacimovic
|
Brand & Web Designer
Article excerpt or TLDR:
From defining what a web designer and a web developer is, understanding the difference, learning about the most common terms that will help you better understand the bigger picture (CMS, CTA, UX, responsive design, etc.), to providing key questions to your potential web designer to successfully start your project and understanding the whole web design process behind it all. It's a long read but it covers pretty much anything that might be of interest to you when searching for a qualified web designer and web design prices.
I know.
This particular discussion has been plastered all over the web with many design experts, developers and others who like to call themselves one chimed in to offer their unique take on the entire issue.
Some try to break down their web design prices and list everything that goes into making your brand-new website. Others create several packages at various prices to try and pigeonhole your specific project into one of these packages. And try to upsell you the premium one, because who doesn’t want a premium website design, right?
The truth is, there are many, and I mean many, different aspects that go into defining how much a professional web design costs. And nobody can give you a direct quote right off the bat.
From understanding the underlining structure of your site, the key goals your website wants to achieve(not all websites have the same purpose). The overall design is defined through that goal; the user experience of the site is sketched to guide the user towards achieving this goal.
Then, draw several wireframes to test and iterate each design to see if this solution is the best possible for your specific purpose, and so on. And we haven’t even got to the coding part. 😊
And, we should keep in mind for implementing best SEO practices, create content that reflects the goal (and your brand). Also, if you need a content management system, or a payment system implemented. Or connect everything with various other services and databases to serve your purpose (for your blog, newsletter, project showcase...).
Plus, connect it with Google Analytics, Mailchimp (or another email client), Zapier for various automated tasks…
Giving you a fair answer on my web design pricing is a complex question because the process itself is complex, and be wary of anyone who says otherwise.
So, with all this in mind let's crack on!
For easier reading and better clarity, here's an overview of all the important points throughout the text.
How to tackle this issue head-on and receive a pricing quote?
It’s simple - if you make my life easier, I will make yours.
We are all busy people and sending a one-liner email in a form of a question - “I want a website, how much will the website design cost?” is difficult to answer.
My girlfriend is an architect(mostly interior design for upper-level clients). I’m sure if she received an email from a client with the same question - “I want a beautiful 3-bedroom house, how much is this going to cost?”, she would be rolling her eyes while sending me the email screenshot.
We first need to understand to create.
Every client is different because every person or brand is different. Do you need a simple one-pager for your small business website? Or do you need an online shop for your… well, shop? Blog, maybe? A specific platform for bookings?
You get the idea.
That’s the unique nature of our work. It gives us the pleasure to work and cooperate with some of the most interesting and kind-hearted people all around the world. Each with their particular problems and distinct vision they want to solve or implement.
But we need to understand you and your idea first before we can even start to think about how we can help you. Let alone put a price on it.
Right not I’m sure that you’re all “Sure, fine, but I don’t know these things, how can I tell you something that I am not familiar with? You’re the expert, you tell me.”
A valid counterpoint and I wholeheartedly agree. And I’m going to do just that.
I’m going to explain to you in layman’s terms what we need from you, how you can provide it, and why we need it the get a better understanding and give you a fair estimate of our web design cost.
I hope this will at least de-mystify some of the stuff you see when starting your search on how much web designers charge. And offer a transparent view of my way of thinking before approaching each new project.
Here it goes…
I’m a web designer, or “what do you mean, you don’t do that”?
First things first, let’s make a clear distinction between designing and developing your website. Although some freelance web designers are also web developers, that is not always the case. Knowing what is what before you start your search is crucial.
What is Web design?
Web designing means that you want someone to design your website, not build. If you want to hire a freelance web designer, you’re saying that you want to hire someone to create a visual blueprint of your website. You will receive a proposal how your site will look like, but without any functionality. Meaning, the focus of web designers is to convey the visual aspects of your brand into the website while keeping in mind that it offers a pleasing experience for the visitors of your website.
What is Web development?
This is often the next step in the process. After you liked and approved your website design, now you need to hire a web developer to build it online. You have your visual blueprints, now you need a developer to implement your design. This can be a complex process, as making something visually appealing is one thing, making it all work completely different.
Look at it from the perspective of an architect and a construction engineer. While architects are often dubbed as the “creative” ones in the industry, there needs to be a fine balance between design and development. Designing something impossible to build doesn’t lead us anywhere, as the function of your website is to serve its purpose and ultimately, help your audience.
For a more in-depth talk about the differences (and similarities), you can check this video below.
The easiest way is to, of course, find a person who’s a freelance web designer & developer. Understanding the connection between design and development provides them with an advantage in preventing any possible issues that might arise in the later phases, while still working on the early design stages.
The second-best thing is to find a web design company that has teams of designated designers and developers, so you’ll get an in-house solution and probably a more streamlined process. This will cost you a pretty penny, though.
If you go for a solo route, be aware that there are many different designers and developers, and not all work in the same environment. Meaning, they don’t use the same technology for creating your website.
Annoying, right?
This brings us to another important distinction you need to be aware of when searching - website builders.
What are website builders?
Right now, there are too many to count, let alone write here. But their whole point is to simplify this gap that exists between design & development. And create a unified solution that anyone can use with a little bit of patience and skill.
Some of these builders are pretty complex solutions that have their spin on how they tackle this.
For example, Shopify focuses exclusively on eCommerce platforms (websites made for selling goods and services with a built-in payment solution).
Webflow combines a design environment with coding tools to bridge this gap (in simple terms, think of Photoshop that has tools that write code).
Squarespace pivoted towards creating online portfolios to showcase your work.
And today, you have designers that are experts that use website builders to design and develop websites for their clients.
Now you see how muddy and all over the place the market is.
While I salute any way to bring design and development closer together, as one can’t exist without the other. It can get pretty confusing for anyone in search of how much their website will cost.
Let’s clear some of the confusion by explaining the most common terms you may come across when searching for web design prices.
WordPress is a free-to-use platform mainly suited for blogs or any website that needs a content management system (CMS, in short).
Compared to other website builders, it is completely free and only requires a bit more coding knowledge. Although you have WordPress theme builders that do the same thing as other website builders but are made specifically for this platform.
But the whole point of me bringing up WordPress is to start with one of the most common terms out there - content management system or CMS. Be aware that many terms have acronyms.
What is a content management system?
It’s a system incorporated into your website that lets you create or edit the content on your website without the need for any technical knowledge. Instead of calling your developer every time you want to make some content changes or, for example, add a new article, you simply log into your website’s CMS and change it yourself.
Do I need one?
Well, it depends. Do you need to add or edit your website content constantly? Do you plan on having a blog, online course, forum, portfolio, or any type of content that needs to be updated and changed?
In that case, absolutely.
Be aware that most modern solutions have CMS built-in or developed according to your instructions.
This is one of those things that you need to be aware of when speaking with potential web designers and developers.
If you wish to read more in-depth in regards to content management systems, check this article here.
Moving on, I’m sure you have heard about making your website “responsive”.
It means that your website will be designed and optimized for mobile screens as well.
“Why responsive, why not call it mobile design?”, you say. And I’ll just laugh and cry at the same time. Unfortunately, these days there are a ton of different screen sizes, resolutions, and *sigh* aspect ratios.
Making your website responsive means that it will conform to every screen, making it legible and usable for everyone. So, in a way, it’s “responsive” to each screen size - desktop, tablet or mobile.
The next term that might seem weird is making your website “accessible”.
What is website accessibility?
It is a worldwide effort to make your website accessible to people with some form of disability.
There are standardized guidelines that you don’t need to be aware of (but your designer/developer should). For example, there are the Web Content Accessibility Guidelines (WCAG) that are constantly updated and refined. They are soon going to publish their 3.0 guideline.
Your designer might also ask you what do you want on your landing page and do you have a specific CTA in mind.
And you’ll be looking at him politely while furiously googling in your next tab.
What is a landing page?
In concrete terms, a landing page is virtually any page on your website where a user might “land” directly by clicking on their Google search result, online advertisement, or a social media post.
These days people (designers even) use the home page and landing page as interchangeable terms. Even though they are not. The justification is that most businesses want their audience to “land” on their home page first. So, by definition, that will be your landing page.
But it’s better to be concrete, so take a look at this picture for more detailed information.
You can have more than one landing page, of course. Every page that is created for a specific campaign or a particular action (buy a product, download an eBook, sign up for a newsletter, make a donation, etc.) is a landing page. Because this page will be promoted all over the internet as a unique link a visitor can click and “land” on.
Every landing page is designed with a call to action in mind (among other things).
What is Call to Action (CTA)?
A Call to Action can be any element on the page (text, image, button) that with the use of clever marketing tactics (read: action-oriented language) guides the user to complete the desired action. I’ve mentioned these actions in the section above (buy/download/sign up).
The key thing you need to discuss with your web designer is what is the goal of your website. What do you want your visitors to do upon “landing” on your page. I’m sure many will say “gosh, such a pretty website!”, but that won’t get your business anywhere.
To incite visitors to click on that ever-so-important CTA, some websites offer a lead magnet as a way to entice users.
What is a lead magnet?
This term is borrowed from the marketing school of thinking, but in short, if you want something, give something in return. A lead magnet is something that you can offer your user in return for giving you their email address, signing up for something, sharing your promotion, etc.
A lead magnet can be something related to your niche and expertise that your audience will find helpful and valuable. That can be many things, but in most cases is in the form of some long-form content (PDFs, eBooks, questionnaires, etc.).
After bridging this gap, the subject of your site navigation will surely be brought up. Asking or proposing what should be in your navbar and what is your business info for the footer.
Again, no need to Google, we got this.
What is website navigation?
Website navigation implies any element on your website whose sole purpose is to direct the user to other pages of your site.
Two main parts are the navbar or menu bar placed at the top of your website (or in some rare cases on the sides) where each particular page or section of your website will have text links leading to it.
It also includes the footer, as its name suggests is placed at the foot of your website, or bottom. It will also include the same navigational links with some other added info for clarification.
For example, many businesses will put their business hours here, address, location, etc. Treat it like your final piece of the puzzle. After the user scrolls and reads your whole website, he or she needs just a few critical info to move on (where to buy, are you open, let’s check this particular category of products, etc.)
Again, if you’re a keen learner, here’s a pretty good HubSpot article about it.
Speaking about users scrolling and searching for information on your website, that process is called user experience. And it’s a whole new subject. There are also UX designers to bring more confusion into the name game. But let’s clear it up right away.
What is user experience (UX)?
Simply put, that’s any (and I mean any) interaction a user has with your website. Well, with any interface, be it an app, car dashboard, or anything a person might interact with.
A good UX designer will map out common actions a user will take on your website (called user journeys) and make them as easy and intuitive to use as possible. This includes contacting you, putting a product in a shopping cart, logging in, creating a new account, etc.
It’s a discipline that aligns itself with cognitive psychology, trying to make our perceptive brains understand an unfamiliar interface.
I’m sure that you’ve felt frustrated a few times when trying to sign up for something, but it keeps showing some unknown error or you just can’t seem to find it. That is bad UX.
A good UX needs to make using a particular interface feel like a breeze. Or, well don’t make you think (really good book on the matter).
Now you’ve understood all the terms that might play a part in forming a web design price and you are ready to start working with a designer & developer! The first thing they are going to do is create wireframes, yay!
Nobody starts designing right of the bat. Just like a painter will first start sketching the basic structure of the painting, a designer will first create a basic structure for your website.
It serves as a visual guide (and an easy way to change some elements according to your wishes), without putting too much focus on any design elements. Focusing only on the website’s structure and content hierarchy that follows.
It will look like a bunch of squares and rectangles placed right next to each other. But don’t worry, they are made as simple as possible, so you can quickly add/change or edit anything before we go start designing your website.
It would be a horrible idea to start designing and then realize you’re missing a critical element or it can’t fit with the overall structure.
After settling in with a website structure you both like, the next step is to add content into it and see how it works.
Some paragraphs are longer than others, some headlines are bigger than others. Everything needs to fit seamlessly before we even begin to add design elements.
Finally, you’ll get to experience our design work as we begin to add color, backgrounds, specific typography, design buttons, frames, navbars, footers, and create an overall theme that reflects your brand.
After that, it’s off to develop, but you already know that.
Just to add another term that goes a bit out of the scope of what a web designer or developer does, but can help you in getting more visitors to your new website - Search Engine Optimization (SEO)
What is search engine optimization?
Boiled down to one sentence - they are tried and tested practices that help your website rank better in Google search. For terms that you want to rank for, of course.
They are split into two categories - on-page and off-page SEO.
On-page SEO means applying some basic guidelines that will help Google better understand what your web page is all about. Use a target keyword(a keyword you want to rank on Google) as the main focus of your written webpage content. Placing your headers into the appropriate header tag. Create a proper URL structure for each page. Optimize your title and meta tags, and soon.
This is something freelance web designers should know how to do, so make sure they are familiar with proper on-page SEO practices.
Off-page SEO dictates everything that goes off your page. It mostly consists of link-building, which is building a set of links from different websites that point directly to yours. This tells Google that you must be important (content-wise), as other pages are linking to yours.
Web designers do only what’s on the page, and for proper link-building techniques, you should consult an SEO specialist.
I hope this clears up some unknown terms and words that are circling around. Although I’m sure by now you get the idea how complex this subject is.
But that doesn’t mean we won’t try and make it simpler for the both of us!
What a web designer needs at the start aka “what we need”
IMPORTANT: Every designer & developer has a distinctive process, built over the years of working with various clients.
And (also important!) I’ll add what you need to ask them. As mentioned, it’s a two-way process based on mutual understanding. They also need to fit your specific criteria.
With that out of the way, let’s go.
First, introduction.
Let me know who you are and what your brand is all about (in 1-2 sentences, brevity is always good). Explain your role in the company (who’s my main point of contact during the process). And what was your initial idea (what spur you into searching for a web designer?).
I know, it seems like basic stuff. But you wouldn’t believe how many times I received the dreaded “how much does your web design cost?” with no intro, no explanation, not even a formal introduction.
Just like it would seem shady from me to ask you to pay first without defining our project, the same can be said vice versa. I have been burned before, many of us are. That’s the nature of the business. Without trust and mutual understanding, there’s no point in collaborating.
Second, your industry.
Give me a brief explanation of your industry. What challenges do you solve? Who are your main competitors? Compared to them, what are your main advantages?
I’m trying to understand the overall idea of where you’re coming from. Every industry has a specific set of rules, content and design-wise. And you can always learn (and improve) a lot by watching your competitors and understanding what makes your brand rise above them.
Third, our project.
Here, you can delve a bit deeper into what you want us to solve. What are the challenges you wish to tackle? What are your constraints in tackling them? What do you think you need out of this project?
If you don’t know or are unsure, that’s okay. Many of us aren’t sure what is the exact thing that is missing on our website or what is needed for a website to be great. That’s where I come in to help. Even better if you let me know right at the start. That way we can research this together.
Fourth and final, success.
What does success look like for you and your brand? What is your desired outcome out of this cooperation?
This can be a plethora of things, from improving sales, sign-ups, promoting a new brand on the market, building your online presence, and so on.
We will come back to these questions after we get a better grip on the key things your website needs, but right now, knowing your opinion on the matter is invaluable. Mutual understanding, remember?
Now, the technical stuff.
See how this comes at the end? It’s the person we’re trying to help, not just design and develop a site. That only comes after understanding exactly you & your brand, your industry, and your goals.
If you’re aware of the technical things your website needs, now is the time to mention them.
*And for us to check what we’ve learned so far
Don’t worry if you don’t know how many pages your website needs. Neither do I. And it’s kind of a pointless question because some websites are purposefully built as one long page with every important info on it.
There are a few basic ones you need to be aware of, like your home page, about us page, contact page, and a specific page for your offer (landing page, remember?) or shop.
What you do need to tell me is if you need a CMS (quick question - CMS is an acronym for what?) or an eCommerce solution.
It is implied you want your website to be responsive. Everyone is on their phones these days. Also, on-page SEO is always included as well. Everyone is on Google if they want to be found online.
As you can see, the key thing is to let me know what you and your brand needs. And I’ll use that to determine what direction we need to take.
What to ask your potential web designer aka “what can you do”
Many different facets are going into website design costs and many different platforms we operate on. So, the first thing you want, no need, to ask is:
Do you offer only web design services or you offer web development as well?
Now you know what they can do for you. Ask them to give you a brief description of their work and explain their process akahow are they going to design and develop your website.
Then ask to see some recent work.
While being a freelance web designer means you need to adjust to your client’s aesthetic preferences, some designers have a unique style that they use in each of their projects (not a fan, but hey, if it works, it works).
Ask them to give you a time estimation.
A ballpark at least. Based on your provided information, you can always expect a reasonable answer. We are fully aware you have your time constraints and scheduled launch dates.
And, finally, a price estimation.
Be aware that this is an estimation at best. Because we still haven’t determined the actual scope of the project. But again, if you explain all the things I’ve mentioned above, we can give you a rough idea.
To sum it up, ask what the next steps are. Especially if you are on a time constraint, let them know that you need to have a specific price in mind soon. We’re all busy people and need to answer to someone else, it’s understandable.
In most cases, we will happily schedule a video call where we go a bit more in detail and get a better grip on how much will all take and cost.
After that, signing a contract.
You should receive a contract proposal with a detailed breakdown of each part of the process.
For example, it can include branding, copywriting, wireframes, web design & web development. Each part will have its time estimation, price, what’s included in that price, and what the web designer needs from you for each step. This all goes into forming the web design price specific to your project.
If you only receive a total price or don’t understand what you will get from the whole process, ask again. This time demand a detailed price breakdown and ask for better clarification.
Don’t ever be shy. If something is unclear, ask. As I said, it’s a two-way street. Mutual trust is what keeps the whole project going according to schedule. Don’t ever accept something you’re unfamiliar with or are unsure that you need.
There are many different designers and developers out there. Clarity and transparency should always be your number one priority before starting a project. Like it should be ours, too.
How to answer questions a web designer needs aka “what do you mean by that”
Let’s go step by step, according to the “what we need” section.
In the introduction, two things are crucial. I want to know how you see and describe your brand (as this will help us later on) and with who I’m going to speak and collaborate during the project.
Introducing a colleague right in the middle of our project with their thoughts and ideas will only slow things down considerably. Not that their opinion is not valid, on the contrary, I presume it is. So, it should’ve been included right from the start.
When talking about your industry, first I want to get familiar with your niche. Every market segment is different, so I need to understand where you are coming from to get the bigger picture.
Also, letting me know about your competitors allows me to analyze their brand and web design. I’ll check what they are doing better and look for potential things we can do better.
Don’t worry if you are unfamiliar with your competitors. After our first contact, I’m going to search for them and then we can compare what we found on our next call.
The project section is the perfect time for you to describe what you need. If you’re unsure what is exactly you need or don’t know how to convey it, no worries! Try to explain in your own words. Add screenshots of something you saw on other websites, be descriptive, be funny, it’s all perfectly fine!
Being open will get you far. I’ve done a bunch of various projects, so I’m good at figuring out what you need.
The second important thing is to try to convey why you want me to help you. For example, fill in the blanks, “I want a new website because __________ and ___________.”
Understanding what your goals are will help us greatly.
They might be adjusted along the line, sure. But first I need to understand your position on the matter and use that as a base for further development.
Finally, if you have a time constraint, or any constraints at all (can only dedicate one day per week for the project), please let me know! It doesn’t help anyone if suddenly we’re in a rush and you’re not answering my emails.
Talking about success aligns with the website goals I mentioned above. If you have noticed your bookings are dwindling for a 3rd consecutive month or you want to start a new business and need fresh emails for your marketing, don’t be a stranger!
This allows me to focus on that particular aspect we want to improve. A website won’t solve every problem, but if it’s designed and developed with a specific goal in mind, we can improve and reach that goal. And with it expand your business.
And for the technical stuff, if you are familiar with what web technology you are currently using or want to use, you can explain to me your current setup. And also let me know what currently works, what could be improved, and what you want to have.
Again, explaining in your own words will be of great help. I’ll fill in the blanks. 😊
Why are we asking you these questions aka “my process”
To give you a clearer idea of why I’m asking you all these things, and add a bit more transparency about how I work, I’m going to explain in detail my web design & development process.
We, as web designers, often put too much focus on technical details, like creating dynamic interactions or stupid sexy buttons.
But the overall strategy is what defines our purpose and what ultimately, makes a design “great”.
It’s not about making the website pleasing to look at. The overarching goal is to attract your audience and help them fully grasp your brand, company, and product.
We accomplish this by understanding the goal and by making every element work toward reaching this goal.
This holistic view is what defines my 6-part process.
1. Understanding the project scope and defining our goal
The first part is the one mentioned above. We will get to know each other. I’ll get a better understanding of the whole project and how it reflects toward your brand. And you’ll get a clearer idea of me, my work, and how I can help you.
This first section is aimed toward building trust and mutual understanding.
Our first task is to define what goals your website needs to achieve. Or to put it plainly, what is its purpose. To find out what this is, we will discuss your competitors, your niche, and what success looks like for your brand.
Everything we learn here contributes to defining the scope of our project. From the number of pages it needs, features to implement, everything is defined towards fulfilling our website’s goal.
After finishing this part, I will send you a contract with a detailed breakdown of the project scope, timeframe, and cost.
2. Clarifying your story
Apart from implementing web design to help us achieve our goal, we will also take a look at the content that will support it. Design should be a vessel that delivers a great story to its users.
While you might get praise for your beautiful, new website, it’s the underlying story that will stick into your visitors’ hearts and minds. And make them return.
We identify key components that make up your brand’s story, making every client a ready-made protagonist and your brand a wise guide that helps them reach their happy end.
With two brand workshops, we clarify who is our target protagonist, figure out how your brand can help, and form an actionable guide that helps our users toward reaching their goals.
This will help us later on when forming your about page, your CTAs, and establishing a content guide that builds value with your audience.
3. Wireframe and content creation
Knowing our project’s scope, we start creating a sitemap of your website. Here we define each page, its purpose, and how they are all interlinked.
By determining the basic structure of the pages, we can form a wireframe - the structure of your website. We test different layouts, sections, and add key categories, making space for future content components.
After agreeing on the wireframes that align with our goals, we proceed to incorporate content for each page. Here, we’ll apply on-page SEO, keeping every page focused on the keywords we wish to target. This will provide a good base on which to build our design.
It is vital that in this stage we already have the bulk of the content thought out and prepared for placement. Because if there’s a need for a few changes in the later stages, we won’t disturb the website’s overall structure.
4. Defining our visual strategy and applying it to the design
With our wireframe and content defined, only now we begin to work on your brand’s visual strategy. Of course, you might already have your brand visuals defined, which we’ll then incorporate into our design.
Here, we take a closer look at our competitors, create mood boards for inspiration, deduct our primary color palette and incorporate it into our design. Images, videos, and any other visual media will also be adjusted and added.
The entire process will be shared and agreed upon via Figma. Figma is a design tool I use that makes it easy for you to add comments to any element and can always take a look at the design.
We conclude this step by agreeing upon the final design of your website. Now is the perfect time to make those little tweaks and adjustments, and add some missing content.
5. Developing your new website
After settling on the final design and content, I will use all these assets to build your website in Webflow. This is my site builder tool of choice, as it allows me to create virtually anything design-wise and isn’t restricted to using overly similar themes. Thus, making your website your own, unique and made to reflect your business goals.
Of course, this doesn’t mean I’m confined to using only this tool. We will discuss this in the first part of the process. Sometimes a better solution for your website could be Shopify (especially if you need an eCommerce platform) or if your website is already built-in WordPress, there’s no need to switch. Although sometimes it could be beneficial.
I will check with you during this process, giving you a rundown of what’s done and what is planned. You can always go to the site (even unfinished) to check the progress; with a custom link, I will provide.
After completing the website, we will test it on various devices to see if everything works properly and if the website responsiveness translates well to smaller screens.
6. We are ready to launch!
Now will be a good time to talk about launch dates and how will you market your glorious new website to the world! I’ll also create a video explaining how you can easily change, edit, or add content to your new website without my help (this is one of the greatest benefits of Webflow).
With everything set, all that’s left is for you to choose your hosting and me to transfer your brand-new website to your account. And voila, your website is live!
What’s next for you?
I hope this long journey was worth it and that you’re at least a little bit closer to your goal. There are a lot of details I’ve incorporated here (and I’m sure some that I’ve missed).
But I hope this will serve you as an easy-to-understand guide when you embark on your journey to learn more about various methods of web design pricing and why it’s such a complicated subject.
If you want to see if we are a good match and discuss your potential new website (or re-designing an old one) in great detail, you can always contact me here. Also if you have questions in regards to any points mentioned in the article, don't be a stranger! :)
And you can check my previous projects and learn a bit more about me and my background, here.
Wish you all the best in your search.
Share this article
Facebook
Twitter
E-mail
LinkedIn
This could also be interesting to you
How important is CTA placement on your commercial website
