When you’re embarking on a new website project, you probably begin with a budget, a ton of ideas, and a wishlist a mile long to bring to the digital agency re-designing your site. You understand, as a seasoned marketing professional, that your website will need to be carefully planned, designed, and developed to ensure you end up with a site that is an appealing and effective portrayal of your brand. You plan to be involved, lightly, at every step of the process, leaving the day-to-day work to your team and your agency to manage.
For most, then, the entire process at a high level probably looks something like this at first blush:
- Conceptualizing your new website
- ????
- Design website
- Develop website
- Profit!
That vital, glossed over second step is the one we’ll discuss today, and it will be the difference between a slapdash, slipshod website and a cohesive, truly great one. It’s re-thinking the structure of the website and its underlying pieces and rendering them in an accessible way, and it’s ensuring that everyone is on board before the design begins. Ignoring this step risks putting the artfully-designed horse before the functional cart, with all the resulting crackups that metaphor implies.
Here’s everything you need to know about that second step, a multi-week process that includes site architectures and website wireframes.
Site architectures
What are they?
Basically, site architectures are arranged lists of all the pages on your website, as well as toolbar and footer content, broken out by sections and sub-sections. This can be as simple as a carefully organized Word document or as complex as a visual Slickplan architecture, but the function remains the same.
By reading a site architecture, you should be able to instantly understand what will be included in the navigation of your site, and which sub-pages will be included under which primary pages. Think of it as an at-a-glance breakdown of all your website pages and how they relate to one another.
What do they do?
The big picture question we want to answer here is what the structure of your site will be. It is a rare client that plans to preserve the entire navigation of their previous website, and it is not usually wise. After all, best practices and businesses change a lot in the 3-5 years between website re-designs, and you don’t want to be left in the dust.
An architecture generally takes the pages on your previous website and adjusts based on your team’s initial feedback to create a map of the way your site should be organized once it is designed. In addition, your partner should look to make smart, strategic improvements. That includes re-naming pages and tweaking URLs for better SEO performance. It can also include a careful look at trends and changes to the menu structure based on user behavior.
As part of the initial planning for architectures, your partner should fully audit your website to remove any unused or ineffective pages, suggest any additional pages, and combine pages where applicable to create a better user experience.
Why do you need one?
Consider this scenario: You are the vice president of marketing at Foornblurm, a maker of luxury drink koozies. You employ a website design and development firm to bring your site to the next level, and three months and many billable hours later, they deliver site designs.
There’s only one problem. Because no site architecture was developed, your design firm was working off your old site and a few notes from conversations with your team. That means the designs include pages that shouldn’t be on your new site, and your Catalog is somehow nested underneath your Company History. Now instead of requesting minor tweaks to the designs, you’re going to need to step in and ask for an overhaul of the whole thing, which is likely to be expensive.
That’s not gonna make Arthur Foornblurm happy, is it? Didn’t think so.
Website wireframes
What are they?
Once the site architecture is ironed out, the process will move along to wireframes. A website wireframe is exactly what it sounds like: A skeletal outline of what your site will look like.
Your agency partner will want to ensure that each of your core page types is wireframed, as they will essentially be templates for the structure of your entire website. This will give you an initial look at your website mapped out via gray boxes and lorem ipsum. Don’t worry, those will be replaced with fresh copy and stellar images once the site moves to design.
What do they do?
Basically, wireframes ensure that the hierarchy and content areas of your site are where you want them before site design. It’s one thing to know where a page is going to fit into the site, and another to know what content areas, calls to action, and so forth will be on each page. This allows you to plan for your image needs, and understand how much copy your team (or your agency) will need to produce for each page.
Most wireframes will contain either previously provided copy, if your team is full of ambitious go-getters, or Lorem Ipsum placeholder text, which is best described as “one of the great Roman poet Virgil’s works, composed when he was blackout drunk.” Content blocks, images, videos, CTAs, and any dynamic elements should all be included in the wireframes.
The wireframing process allows you to make edits to your site’s fundamental structure and layout before a designer gets to work. Taking the time to think through and debate those items with your team prior to design creates a much smoother design process. That means a designer can focus on pulling together a kickass design, and not worry about any additional roadblocks.
Why do you need one?
Website wireframes are vital because they greatly streamline the design process. A wireframe gives designers and developers an easy point of reference for where pages and page elements should be and ensures everyone understands your site’s new structure. A wireframe also allows you to get a sense of how much copy you (or your agency) needs to write for the new site, which should save time and frustration on both sides. It also ensures copy and design sync up so nothing is FUBARed at the end of the process.
Basically, once you’ve signed off on a wireframe, the structural integrity of your site is guaranteed. Everything that follows is the icing on the cake, so to speak until the site is developed and launched.
In closing, we insist every website be built with a site architecture and wireframe to guide the process. Your website–and the process of creating it—will be better for doing so.
Need more guidance? Want to understand the Raka website design and development process from end-to-end? If so, check out the infographic below!
