How to Create Your Website Like a Designer: Part 2

Create Your Website Like A Designer: Part 2

Today I’m sharing the second part of my website design process. Inside this post are invaluable guidelines and the questions you need to ask yourself as you wrap up your website design process.

If you missed the first part of this post series you can find the first four tips over here Create A Website Like A Designer | Part 1

Again, don’t worry I won’t go into the technical details of building a website but I will take you inside the mind of a professional web designer designing a website that WOWs!

If you have completed the four steps in Create A Website Like A Designer | Part 1 — Congratulations (insert confetti, music, & smiles) —- you’ve completed a huge part of the web design process! So far you have

1. The purpose of your website is clearly defined
2. The pages you need on your site are organized
3. You know what you want your customers to do on your site
4. You have created your website copy
5. And you have sourced the imagery you will have on each page

Checking each of these items off your to-do list had to feel good, so let’s keep it going!

Tip 5:  Sketch Your Layouts With Wireframes

Next, you’ll need to get out that extra-large pad of paper again 🙂 to begin wireframing.

What is wireframing?

Good question and don’t worry, it’s a super simple concept that will assist you in planning.

A wireframe is grayscale blocks that represent each piece of content on your website pages.  Creating a wireframe helps you decide where each piece of information will go on each page of your site.

It’s important to know how and where you should place important information.

Bonus Tip: The upper half of a webpage is where the most important details on your website should reside. Look for the key idea of the page and that is what should be placed on the upper half of the page.

Tip 6:  Styling

Once you have each page of your website wireframed, it is finally time to make your styling decisions! I know this is probably everyone’s favorite part, which is why most people try to start with this step. But good things come to those who wait.

You have put in the work so now your styling will be easier to decide upon (and you may have already pinpointed it in your research). Your research allowed you to see what that means visually.

If you still find yourself struggling with your brand styling, you can find some clarity with The Ultimate Brand Planning Guidebook.

Styling Decisions

• Website colors
• Types of images
• Typography (fonts)
• Types of buttons and link colors
• Any other detail you kept in your running list in Tip 4 in Part 1 of this series.

Tip 7:  Concept Mockups

To create a mockup of your website, the is standard to use Photoshop. But I’m guessing unless you are in the design business, you probably don’t have access to that design software. Not to worry! There are many free software and websites choices that allow you to take a screenshot of your design and place it in the browser so you can see how your user will experience your website. One option, you can design your mockup in Canva and view it in InVision see how it will look in a browser.

Website mock-ups allow you see how your styling choices look as a whole.

This can be useful to help you see what other graphic elements you may need to establish to create a consistent visual language across your website.

Tip 8:  Build & Launch Your Website

You did it! You have now completed the website design process! YAY!  Now you can select your website builder, choose a template, or theme to build out your website.

If you’d like me to create a post about how to choose a website builder, let me know in the comments below or email me.

Summary

At the end of the day, it doesn’t matter what font, colors, or imagery you are using on your website. What really matters is whether your website delivers a clear message on who you are, what you do, and why potential clients are going to love your products /working with you. This message can only be achieved with a lot of planning, understanding how to translate the invisible into visual communications, and a streamlined user experience. 

If you’re reading this post and feeling overwhelmed — Let me help you organize a plan to take your ideas and translate them into an emotional connection with your audience, communicate your business purpose, and achieve its ultimate goals. Only you know what your talents are, what your time is worth, and where they are best spent! 

Good luck and I’d love to hear how you did!

First Name Email Address Submit

Need further assistance in building a brand and website that fits your business? Contact me today and let’s discuss the details!