If you own a business, you need a website. But I’m going to guess as you’re reading an article on how to create one, you probably already know that.
What you’re realizing is that while using the internet is a pretty straightforward task, designing, building and creating a website is pretty flippin’ complicated. You want it to look nice. You want it to be easy to use. You want people to be able to find it on Google. You want it to actually help you convert visitors into clients… But how do you do all that? And more importantly, how do you do it right?
Our Ultimate Guide to Web Design will walk you through the process of getting a website step-by-step:
- What you need to know to get started
- How to get your website created
- How to design a custom website in 7 steps
What you need to know to get started
Learn who’s who in the world of web design and development
When you design a logo for your brand it’s pretty easy to hire one person to do the job and have it turn out great. That’s not necessarily the case when creating your website. While there are individuals or agencies out there that offer an end-to-end solution, it’s not unlikely that you’ll end up working with more than one person on your adventure to build a website. Here are a few of the characters you may encounter on your journey:
Web designers are, well, designers. They take your ideas and turn them into a pretty (or badass) mockup that shows what your future website will look like. This is typically done in Adobe Photoshop or a similar type graphics program.
UX (user experience) or UI (user interface) designers focus on how your layout design impacts your users. For example, they’ll help you decide where to put buttons to get more people to click them, or how to structure your navigation to make your site flow as seamlessly as possible. (There is a difference between UX and UI. This article explains it well.) Oftentimes, there is overlap between UX/UI designers and web designers; if you’re looking to save money, it shouldn’t be too difficult to hire a freelancer that has both skill sets.
Web developers—also sometimes called engineers or coders—are magical folks who have learned to speak computer. They take the pretty (or badass) mockup your designer made and translate it into a coding language so it can be displayed on the web. To further complicate things, there are many different coding languages out there, and most developers specialize in one or a few.
Front end developers specialize in the things we see when we look at a website (e.g. rendering images, text, animations, drop down menus, page layout, etc).
Back end developers on the other hand specialize in what’s going on behind the scenes and are necessary if your website needs to communicate with a database. (If you’re going to have a shopping cart, user profiles, or want to be able to upload any content on your own, you’re going to need a database.)
SEO specialists, content strategists, and copy or content writers may also be experts you want to consult as you build your website. They can help you figure out what needs to go on your site to help the right people find it (via search engines) and decide to buy once there.
Acquire a domain name and hosting
Just like if you were opening a brick-and-mortar business, the first thing you need to do when you’re building a website is to rent a location.
Web hosting is the physical space where the assets for your website will live. All those images and text and databases actually require a physical server to host them. While you can buy your own and put it in your office/house/garage, the vast majority of people and businesses rent hosting space through a company. Hosting (like rent) is typically paid monthly. For most businesses it will be in the $5-$20/month range, but could be much higher if you have large data needs. Here’s a list of recommended web hosting companies, but you may want to check with your web developer before purchasing (as they may have a preferred vendor).
Your domain name is what people type into their browser to get to your site (e.g. 99designs.com). Typically it is your business name. To get a domain name, you register it with a domain registrar. You will have to pay a small fee (generally less than $10/year) to purchase and retain the name. Most hosting services also serve as domain registrars; that’s generally your best bet as it’ll be the easiest to setup.
Finally, you will need to point your domain name to your servers which basically tells the internet that when someone types your domain into their browser, it should look on this server warehouse to find the right pictures and text to display. While this process isn’t complicated, it can be confusing. This is a step you can try to DIY (the support team at your web host or domain registrar can help you) but is also something your web developer can easily help you do.
Think about structure and gather the content for your website
Your web designer or developer is not going to write the about page on your website or take photos of your products for your store. You’re going to have to provide all of the content as well as provide the general structure of the site.
For structure you’ll want to think about what pages you need, common ones include:
- About page and/or contact page
- Product directory
- Individual product pages
- Terms and conditions
- Landing pages/marketing pages for promotions
Each of these types of pages will need to be laid out and designed, and each one will need to have content on it.
You don’t necessarily need to have content finalized at this stage in the process, but you do need to have an idea of what content you’ll want on your site and a plan for how you’ll get it. Do you need to set aside time to write copy (or hire someone to do it for you)? Should you hire a photographer to take product photos? You will need to provide all custom imagery (like your logo or photos of your team) for the site, but a web designer can probably help you source stock imagery if you want.
Pro tip: your designer (especially if they have UX/UI experience) may have some great ideas for content and structure you haven’t thought of. It is likely worth having a discussion with them early in the process.
Determine what functionality you need
When someone visits your website, what do you want to happen? Are they just getting information about your product or service, like a phone number or opening hours? Do they need to be able to purchase goods? Is their main goal to read blog articles or learn a skill? Are they filling out a form for a quote? Should they be able to create user profiles and upload their own information?
Your functionality needs are going to determine how you can get your site developed and who you need to work with. They will also have a huge impact on your budget, so you’ll need to have it sorted out in order to get accurate quotes.
Understand what a CMS is and decide if you need one
A CMS (Content Management System) is a database and web application. Essentially, it allows users (like you and your colleagues/employees) to upload content to go on different parts of your site. If you want to be able to regularly edit text or change photos on your website and you don’t know how to code you will need a CMS!
There are a lot of CMS options out there. There are fantastic out-of-the-box options for common use cases (e.g. WordPress for blogging, Shopify for hosting an ecommerce site, Six for building out a profile). But if you need advanced functionality (like you’re hoping to build the next Facebook or Uber or 99designs) you’re going to have to have it custom developed.
How to get your website created
Template sites and builders
DIY web template platforms have exploded in popularity in the past decade. You’ve probably heard of at least a couple of them. Popular names include: Squarespace, Shopify, Wix and Weebly. Each has its own specialty (for example, Shopify focuses on ecommerce sites) and their own set of templates you can choose from.
- Lowest cost option
- They are all CMSs that will allow you to control what’s on your site
- You’re limited to their templates and a few customization options (so your site will look like many others, won’t necessarily be on brand and you won’t have much control over functionality)
Hire freelancers for a custom solution
If you want to have more control over the look and functionality of your site, your best bet is to hire one or more freelancers to help you build it. This is great for getting exactly what you need at a fair cost, but will likely require you to be more hands-on.
We recommend searching through designer profiles to find someone whose style matches what you had in mind. Alternatively, if you want to get lots of design ideas, you can start a web design contest. We’ll help you write a brief. Designers from around the world will read it and send you their ideas for your site. You give feedback to refine the designs, and ultimately choose your favorite(s) as the winner.
Keep in mind you may need to hire both a designer and a developer for your project, though there are some freelancers who do both. Make sure you clarify up front so you can budget (both time and money) accordingly.
- Get exactly the look and functionality you want
- Reasonable costs (though it obviously depends on the freelancer and your specific needs)
- You may need to hire multiple people (web designer, UX/UI designer, developer)
- Requires more time and input from you
Hire freelance designers for a hybrid solution
If you want a custom look, but don’t want to invest in completely custom development, you’re in luck! It’s possible to start with an out-of-the-box template solution, and customize it with your own unique template.
One of the most popular options for this is to build a website on WordPress. While it started as a blogging platform, WordPress has become the most popular CMS on the entire internet (powering approximately 30% of all sites). It’s completely customizable and can grow with your business. There are thousands and thousands of templates out there, but it’s also possible to create your own, making it the perfect hybrid solution.
You can hire a WordPress theme designer to create a beautiful, unique, on-brand website, and use WordPress to power the back-end database functionality.
Note, this is also possible with several other template sites (for example, you can create custom templates or modify existing ones for Shopify or Squarespace) so if you would rather use one of those platforms, that’s also an option. Note that in any of these cases, the design still does need to be translated into code, so make sure you ask if your designer can do that, or know that you will have to hire a developer.
- Allows you to have more advanced functionality (that comes built-in with platforms like WordPress or Shopify) at a lower cost
- You’ll get a custom design so your site is beautiful and on-brand
- You still might have to hire both a designer and a developer
Hire an agency for a custom end-to-end solution
Web design and development agencies are experts at what they do. They will not only be able to guide you to help you make the right decisions, but they’ll be able to take you from wireframe to fully developed site. Of course, all of that comes at a premium cost. This is a great option for companies with complex needs, or those for whom cost is less of an issue.
- Fewest headaches; you’re working with experts who will walk you through the entire process
- You’re likely looking at a high price tag
How to design a custom website in 7 steps
1. Determine what you need and hire a designer
Have you got your domain name figured out? Do you know what functionality you need? A list of the pages you want designed? Do you have a plan for gathering all of the custom content you need to fill out your website?
Awesome! Time to hire a designer. To find the right one, you’ll want to look through portfolios. Think about your brand’s personality and determine if the designer is a stylistic match. (For example, do you want something edgy and modern or fun and playful?) It’s generally a good idea to look for designers who have experience in your industry, or with the specific type of site you’re looking for. If you’re a photographer, look for designers who have galleries in their portfolio, if you sell goods, look for one who has experience with other ecommerce companies.
Here are a few of our favorite web designers:
Web page design
Landing page design
WordPress theme design
Other web or app design
Other Graphic Design
Illustration or graphics
Other art or illustration
Logo & hosted website
Postcard, flyer or print
Clothing or apparel
Button or icon
2. Start with wireframes
You wouldn’t take off on a cross-country roadtrip without a map. Similarly, you shouldn’t start designing your website without wireframes. Wireframes are basically blueprints that show where your navigation lives, where you’ll have images, where CTA buttons go, etc.
Starting with wireframes will simplify the rest of the process. You and your designer can discuss structure and make changes to what are ostensibly line drawings instead of complicated Photoshop mockups. This saves everyone time and money.
You should do wireframes for all of your major page types (e.g. your homepage, product listings, blog articles, etc).
3. Design the look and feel
Your website is the home of your brand online. As such, your design decisions (from fonts to colors to style) should be built around that brand identity. If you have a brand style guide, send that to your designer. If you don’t, provide them with:
- Your logo
- Your brand colors (exact hex codes if possible)
- A list of fonts
- Any other stylistic requests (e.g. “fun and friendly” or “dark and luxurious”)
It’s also a great idea to send a few, carefully chosen examples of sites that you like, with a sentence or two explaining why you like them.
With this information, the designer will go and do their thing. They’ll usually start with whatever you say is the most important page (for many, this is the homepage, but it isn’t always).
When they return with a first draft, it’s your turn to give feedback. Note your initial, visceral reaction to the design, but resist the urge to respond for at least 24 hours. You want to give yourself time to digest and you should probably show it to other stakeholders to get their input as well. When you do give feedback, make sure it’s specific and clear.
Depending on your agreement with the designer, you might go through several rounds of feedback to get to a final design.
4. Create templates for all pages
Once you’ve got the look and feel of your most important page finalized, and assuming you have wireframes for all of your page types, it should be fairly simple to get design prototypes for all of your pages made. There might be a few small things that need to be adjusted, but at this point you and your designer are hopefully on the same page and speaking the same language.
Assuming your designer is not also your developer, at this point they should provide you with layered image files that you can take to your developer. (Industry standard is Adobe Photoshop files, though Sketch is becoming more and more popular.)
5. Work with a developer to code your design
When hiring a web developer, you want to focus on functionality. You should be able to tell a developer what you want, and they should be able to explain (in clear language that you understand even if you’re not a web developer) how they will make it happen.
If you need a CMS, make sure they tell you what platform they’re using or show you what and how you’ll have control over any changes you might want to make in the future.
Be wary if they don’t ask you a lot of questions. That’s generally a sign that they’re not thinking through all of the different steps involved in the process.
6. Fill in all the content
You have a fully functioning website. Awesome! Now’s the time you need to fill in all of your content, from employee or product photos to headlines and body copy.
Depending on your goals, it might be worth it to hire a content or SEO specialist to help with the text (they can help you with page ranking and also language that sets the right tone to get visitors to convert) or a professional photographer (especially if you’re selling goods).
7. Do user testing
Before you officially launch your site, you’ll want to get as many people as you can to play with it. Listen when they give feedback and ask questions, but resist the urge to be defensive.
My general rule of thumb when taking feedback is that if two different people (who haven’t talked to each other) give me the same note, they’re probably on to something.
Make any final tweaks you need and launch your website!
Are you ready to create the perfect website for your business?
My final thought is to remind you that a website is almost never a one-and-done project. It’s something that can and should evolve regularly. If you’re at the beginning of your journey and have opted for a template site, you might outgrow it in a year or two, and that’s okay (when you do, we’ve got plenty of amazing designers ready and willing to help upgrade you to a custom solution). Or, you might realize your customer base is changing and you need to rebrand. Or technology might change, requiring you to adapt (right now, everything should be responsive and mobile friendly. In 5 years who knows!)
Now go forth and create an amazing website!