Do you want to design your website, but have no idea where to start? Everything seems overwhelming?
You don’t know what pages you need, what you want it to look like or what it should even do?
Well, don’t worry!
This post will give you a clear plan to follow, so you don’t wind up spending a lot of time and money fixing problems on your website later.
So let’s do it right from the start and save you from a headache later!
And once you’re done with designing, make sure you read this next:
Read: How to Build Your Website From Scratch
Step 1: Define Your Goals
If you’re designing your website based on what others have done, then you’re setting yourself up for failure.
Because the purpose of your website is unique to you and your business.
For example, if you’re an entrepreneur, with digital products or services, you’ll have different goals for your website than a small business selling to local customers.
And I’m going to assume that you want your website to be successful. Because if you don’t, you’re just wasting your money every month on its upkeep without seeing any return on it.
“Ok, so what goals do I need?”
Well, you’re going to start off defining what a “successful website” means to you.
Ask yourself...What does your website need to DO or HAVE to make your business succeed? Share on X
To break this down, come up with some BIG goals. Ones that are more abstract and high-level.
Write them down (because written goals are proven to be more successful).
Some BIG goals of your website may be to:
- Increase sales
- Demonstrate credibility & trust
- Provide information
- Increase engagement
Then, once you’ve come up with a list, go through each one and ask yourself,
“How can I achieve that goal?”
Take a few minutes to brainstorm possible answers. You can always research some ideas if you’re stumped or want more ideas.
Some features to achieve the goals are:
- Increase sales – dedicated sales pages for products, online chat to answer questions, downloadable demo
- Demonstrate credibility and trust – portfolio page, testimonials, secure checkout
- Provide information – pages about products, contact page, FAQ
- Increase engagement – twitter feed, Facebook comments, blog
The more you can break down your goals into concrete features to have on your website, the better! Because that’s how you will accomplish your goals.
Step 2: Build Your Site Architecture
Ok, so great! You’ve got your objectives and features you want on your website. Now what?
The next step is to decide what pages you’ll need on your website. Also known as the site architecture.
This is like the blueprint of a house or the framework of your website. Without it, you’ll be adding rooms (or pages) haphazardly later on.
So I recommend creating a document with 3 columns titled: “Page,” “Purpose,” and “Features.”
Page
The first column is for your pages. Write down as many pages as you think you’ll need. There are no wrong answers here! If anything, better to start with more pages and then narrow it down.
Then, once you’ve written down your potential pages, look through your features list from Step 1. Decide if there are any other pages you’ll need and add them to your list.
Tips: Some pages you may want to include could be:
- Sales pages
- About page
- Landing pages
- Blog
- Privacy Policy page
- Terms and Conditions page
- Error page (404 page)
Purpose
A good rule of thumb to boost conversions is to have one purpose for each web page. Share on X
For example, if you’re asking your visitors to sign up for your email list, watch a video, go to your about page, and follow you on Facebook ALL on one page, they will be overwhelmed and may just leave your site.
So it’s better to decide what you REALLY want your visitors to do on each page. What’s the most important thing for the page?
That’s what you’ll want to be above the fold and clearly evident.
So, in column 2, write down a purpose or goal for each page.
Features
In the last column, you’ll be adding features and notes for how you want that page to be.
Look through your features list from Step 1 and write the feature down for its applicable page.
Then go through each page and think about any other features you’ll want on that page or add notes if needed.
Just make sure you take the page’s purpose into account, so you’re not shooting yourself in the foot.
Step 3: Create Your Mockups
Ok, so now you’ve got a solid base to work with.
You know what pages and features you’ll need, but now you’re probably wondering how they will come together.
Well this is where the fun part comes in because you get to physically sketch out your website! Make it concrete instead of just lines in a table.
Action Items:
- Grab a pencil and some paper or your favorite illustration software (I adore Adobe Illustrator) and let’s get this party started!
- Use your paper (or artboard in AI) vertically, as you’ll get more room length-wise
- Use a separate sheet of paper/artboard for each website page.
- Place the page title at the top of your sheet/artboard.
- For each page, create a rough mockup of how you want it to look. Use your Site Architecture document to make sure the purpose of the page comes through and its features are included.
View more example features:
- Logo
- Menu
- Header
- Sidebars
- Contact form (what fields do you need?)
- Used by logos (greyed out client company logos)
- Pricing table
- Google maps
- Reviews/Testimonials
- Transitions
- Effects
- Videos
- Photos
- Graphics
- Surveys
- Quizzes
- Slideshows
- Portfolio/gallery
- Search form
- Appointment booking links
- Shopping cart
- Footer
- Opt-ins (Newsletter, content upgrade, free course, etc.)
- Social media (Instagram feed, Twitter feed, Facebook comments, social share buttons, etc.)
- Integrations (email marketing, payment gateway, Zapier, LeadPages, etc.)
- Anything else!
So, yes…there’s a lot of things you might include a website! But this will hopefully give you a clearer idea of what you may want.
And don’t forget about styling your website footer! That can be so important for visitors in browsing your site.
Then once you’ve finished your mockups, take a day and don’t touch them. Then after some time has passed, look at them again with fresh eyes.
Go through all the steps a visitor might take. Think what a first time viewer might do on your site. See if your pages are clear or if you forgot a page.
And to take it a further, try to find a friend or someone not familiar with your business to see how they would navigate your site. Show them your mockups and get feedback from them.
Feedback at this stage is great as it doesn’t take much work to revise your mockups!
Tip:
If you’re getting stuck at coming up with an idea of how you want your pages to look, feel free to look at other websites for inspiration.
The beauty is that you can use pretty much any website for inspiration (they don’t have to be in your niche)!
So go have fun browsing the web and just make note of what features you like and what you don’t like.
Then, you can revise your mockups or add features to your Site Architecture.
Obviously, it’s not the best idea to blatantly copy a website exactly. But you can totally pull features from different websites.
And if you do look up your competitors’ sites, be different and think how you could do it better.
Step 4: Customize Your Design
Now it’s time to unleash your inner artist with media and color (don’t worry, everyone is born with an inner artist, you just might not have interacted with it recently…)!
Media
One of the most important things on a website is media: your photos, videos, graphics, etc.
So look through your mockups and see how much media is included. Make a list of how many photos, videos, and graphics you will need.
And the more specific the better (ex. photo of your office, video of you speaking, etc.).
Then see if you already have the content to use or if you’ll need to get pictures and video taken. If your media isn’t of the most professional quality, you might want to get new ones.
A website's photos and videos are how people judge a professional site from an amateur one. Share on X
To decide what kinds of images you should use, I’ve written a comprehensive post to help you out:
Color
Then it’s time to create the color palette for your website. You might want to start with your existing logo and see what colors are in it (if you don’t have a logo, you should create one or find someone to create one for you).
Or you can even create a color scheme to use on your website by finding an online color scheme generator like these:
To look the most professional, try to stick to no more than 2-3 colors. And use the same color consistently (i.e. don’t estimate, use the exact hex code like #CEA453).
So go through your mockups with colored pencils (or in AI) and color in some areas with the closest color.
You’ll see if your colors are working well together, or you may need to revise it.
Step 5: Write Your Copy
Congratulations on making it to the last step!!
You’re almost done and now you just have to fill in your site with the right words.
So take your time and take your mockups a page at a time.
If you look at them, you probably see you have areas for headings, buttons, sections, testimonials, etc.
So go down your mockup and fill out as much as you can now.
You’ll probably end up writing your pages on your computer, but at least you know exactly what you’ll need. Unlike before, when it all probably seemed like an overwhelming and confusing challenge.
Now it’s important to note that words truly do matter.
Therefore, you might want to hire a copywriter, like what I include in my websites for clients, or you can take the time to research “How to write a great home/about/sales/etc. page.”
Because it’s not enough to just write with a purpose for your business website. You need to know how to convert clients and your web design needs to reflect that.
But to give you a direction, here are characteristics your copy should be:
- Clear, direct, succinct (easy to read)
- Customer-focused (relevant to your viewer’s needs)
- Conversion-optimized (benefits with credibility)
- Consistent (in voice and tone with your overall brand messaging)
- Competitive (with keywords woven in)
Conclusion
So after 5 steps, you have your website designed on paper, which will make the ultimate build a lot easier (and faster!).
You can either then move on to building your site yourself or hire a web developer to build your site. She should review what you’ve done, your plans and everything you’ve completed in this post. And a good developer will suggest improvements and discuss your best plan moving forward.
Just know that everything you’ve planned may not work out, so be prepared to go with the flow and adjust your design throughout the build process.
To view all the steps again, here’s my SlideShare to refer to:
Got a second? Leave a comment below with how you’re going to design your website. Any takeaways you’ll use from this post?
And if you’ve found this post helpful, please share it with your friends so they can also design their best website!
6 thoughts on “5 Steps to Designing Your Website without Losing Your Sanity”
great post, straight to the point. Everything you listed is important! One thing that I struggle with is colors. I tend to choose more than 3 colors! I also still don’t have a log for my brand.
Yeah, colors can be hard to narrow down, but it really does wonders for a cohesive brand to limit yourself. You could always reach out for feedback on Facebook to narrow them down. And I’d just come up with a temporary logo, because you can always rebrand later. Thanks for stopping by!
Such great tips here! Good advice to do your planning on paper, I keep a notebook for this purpose. I love the quick review slide at the end. Thanks!
Aw, thank you for your compliments, Crystal! And yep that’s smart to use a notebook for planning…it’s much faster (and easier) than sketching online. Thanks for commenting!
Nice and thorough. Good instructions.
Thanks so much Kimberly!