Week 5: Creating a wireframe ✍🏼

Jun 01, 2023 1:01 am

Hey, ,

Welcome back to our six-week training series on building an intentional business and online presence.

Inside this edition, we’ll:

Discuss the importance of a wireframe
Identify simple tools to begin wireframing
Explore a helpful guide on what you should include
Utilize your Content Guide to help you draw
Discover tips on guiding your website users
Balance realism and feasibility with Wix capabilities
Learn what the purpose of your wireframe actually is

Catch up on the past five weeks of training materials:

Week 0: An Overview of Wix in Six

Week 1: Brand Discovery

Week 2: Website Strategy

Week 3: Content Creation

Week 4: Image Selection

Over the next two weeks, I'll be sharing my process and behind the scenes of me making a website, so that you can do the same for yourself (if you wish).

Plus, get the Wix Basics course for free when you share this newsletter (details below).

Let's dive in…

—

The importance of creating a wireframe for your website

The first step in the design stage is to wireframe your website. Wireframing helps you map out a seamless user experience for everyone (including you).

According to Invision, an industry-leader in digital product design:

Wireframes serve as the skeleton of your digital product. They’re the base, and they provide a general idea of the construction of what you’re building.

Starting your website design with a wireframe can help you to better understand your audience's needs and where your content should go. This way, you can plan more effectively and create a website that is easy to use and navigate.

Wireframing will save you hours of time later on, because you're solving design challenges before you even get started.

I believe that the beauty of wireframing lies in its accessibility to everyone, even those who don't consider themselves designers. You don't need any prior design experience to create a wireframe, which is what makes it so incredibly user-friendly and adaptable.

So, if you can draw a line (not even a straight one), and a square (not even a proportionate one) — then you're able to get started with your wireframe.

—

Use simple tools to begin wireframing

All you need is a pen and paper. To easily share my work and get feedback from clients, I use my iPad with an Apple Pencil and the free app, Notability.

The goal for you, just like how simple these drawings are going to look, is to keep your tools simple for you.

Basecamp's creators, Jason Fried and David Heinemeier Hannsson, shared that they use a fat marker to sketch out their pitches for new app ideas. Then, they label what each drawing is by writing a couple words next to the drawings.

I like that tip, so I use it too. Including words alongside your sketches will prove helpful in the future when you need to refer back to them after a week or two. This practice provides clarity and context for your drawings, making it easier for you to recall the information later.

—

A helpful guide on what to include in your wireframe

To keep this section short, I'll link out to a friend, Niki, who made a video on the elements she uses the most in her wireframes:

—

Utilize your Content Guide to help you draw

When I'm starting to sketch out a new website's wireframe, it's so helpful for me to pair it with the content guide we created. I suggest you do the same.

Inside your content guide, you'll find everything you need: pages, sections, copy, and image preferences for your website.

Remember to use the "What, So What, Now What" framework for your sections.

This means you can confidently begin to create each section with all the information you plan to include when you start designing the website.

Here's an example of what a section out of a content guide looks like for me:

Here's how I've made it into a wireframe:

And, below is how that all comes together on your website. We'll be learning more about web design next week.

—

Tips on guiding your website visitors

An effective wireframe should make it easy for users to navigate your site and find the information they need.

As you work on your wireframe, you may come across a common challenge: excessive text content. Perhaps you notice lengthy mission statements or paragraphs of text on your About page that feel overwhelming. This is one of the initial questions you need to address in order to optimize your wireframe design and create a user-friendly experience.

I suggest breaking up the text into smaller sections to ensure readability and maintain a clear flow between them. You could also improve the wireframe by adding images between text sections, or creating a brief mission statement and linking to a blog post with more information.

It's also important to consider how the layout and elements affect your users and how they might feel when navigating your website. For example: sharp corners tend to give a professional tone, while rounded corners feel more welcoming.

Using a fat marker while sketching is useful, and using gray shading can also help you or your team differentiate between different elements, like buttons, backgrounds, and text, in your wireframes.

Consistency in your design helps establish trust with your audience and solidifies brand recognition. Ensure that each page follows the same structure — including color schemes and fonts — to create a cohesive look. We'll explore this more in the web design phase, but since you're starting to draw your website — I thought I'd mention it.

—

How to balance realism and feasibility with Wix capabilities

Since I work exclusively in Wix, and have used their product for some time, I know quite a bit about what's possible.

This helps me when I'm sketching out the website itself. I know what kinds of tools I can use within Wix to accomplish things. I'm familiar with the appearance of their webpages for features like eCommerce and scheduling appointments online. So, when I draw them, I know we can build them that way and I know what each area is meant for.

If you're less familiar, check out the Wix App Market or the Wix Templates for some ideas to help you.

The point here is that you're able to help your future self by drawing what you know is possible. If you begin to create things you don't even know how to create, you might get stuck in the next phase: designing and developing the website.

—

The purpose of your wireframe

Remember what Invision said? Your wireframe is a skeleton of how your website will come together.

To play with that analogy a bit more — there's muscle, skin, and so much more that will go onto that skeleton itself. In reference to your website, you'll have the copy, color, font, images, apps, systems, etc. that will be added later.

I like to think of my wireframes as a guide or blueprint. It's not permanent. You're not stuck on using everything as you sketched it week(s) ago.

And, if you have a team or work with clients, it's a visual aid to a conversation — one that you started with brand development in Week 1.

Starting with wireframing is crucial in designing a project as it provides a strong foundation for addressing future design obstacles. By sketching your website first, you can confidently navigate potential questions and challenges throughout the design process.

Have more questions about getting started with your wireframe? Ask me.

—

Build Your Most Effective Landing Page

If you’re seeking additional guidance for your website, my online course can be found here: Build Your Most Effective Landing Page.

Start Building Today

—

What's up for next week?

Next Wednesday (June 7th), we'll be focusing on the production process in web design. I'll be working inside Wix to create an actual website for a new business. Join me as I bring my ideas to life and make progress towards creating a fully functional website.

Get up to speed on the past few weeks:

Week 0: An Overview of Wix in Six

Week 1: Brand Discovery

Week 2: Website Strategy

Week 3: Content Creation

Week 4: Image Selection

—

Need help?

Have questions or want feedback? Email me.

—