At our last Meetup we discussed the questions we ask in order to begin a web project. This month we’ll be discussing the steps we take to get to design. This involves everything from site maps, to copywriting, to wireframing and finally design.
So what is a sitemap?
A sitemap is a visual model of a website’s content typically organized in hierarchical fashion.
Why would you use a sitemap?
A sitemap helps you determine all the pages on your website before you spend time designing or developing the structure and helps guide copywriting, wireframes, overall usability and communication strategy. You can compare a sitemap to the outline you create before writing a research paper. It helps to plan your overall content structure.
Step 1: Research List all products, services, features, staff, documents, etc. that need to be present on the website. Consider the existing sitemap and competitors’ sitemaps, if applicable, to compare content structures. If you’re doing keyword research, do it before site-mapping. You’ll likely uncover a handful of keywords that may reveal new pages needed on the website.
Step 2: Execute The next step is to organize the “topics” that you’ve uncovered in order of importance. Be sure to list the website’s call to action as the most important in the list. You can then start arranging and rearranging these items into a hierarchy that seems the most logical.
Step 3: Testing Before you consider the sitemap complete, be sure to consult with colleagues, users, and customers to ensure there are no discrepancies on how the page structure is laid out.
Recommended sitemap tool: Slickplan is a great tool for creating, customizing, and sharing sitemaps with clients and colleagues.
What is a Wireframe?
An image or set of images that displays the functional elements of a website or page, typically used for planning a site’s structure and functionality.
Why do you need to wireframe?
A wireframe will help determine the best way of representing the information you are trying to communicate on the website. Think of a wireframe like a blueprint to building a home. By diagraming, you can best determine where elements of the home should go, before starting construction.
Where to begin?
When creating wireframes, you must consider how your web layouts will fall on varying screen sizes. We suggest starting with a flexible grid system. Designing to a grid will not only allow you to create an aesthetically balanced layout, but will also help guide mobile friendly layouts as you shift elements around for various resolutions.
This process is similar to building a puzzle. Your “puzzle pieces” are elements such as images, videos, headlines, copy, and navigation menus that need to be on your website. Determine which “pieces” are needed in the header, body and footer of your home page and internal landing pages, and start arranging! Similar to site-mapping, be sure your call to action is given top priority on all pages.
Here are a few tools you can use for wireframing tools:
Slides can be found below. If you have any questions, please leave a comment below or feel free to post in any of our online WordPress groups.
Upcoming events
- TONIGHT: Went to WordCamp. Got the Tee Shirt. Overflowing with Questions!!
- May 7: Useful Developer Tools and Resources
- May 14: Community Support for Your WordPress Website
- May 21: Starting your WordPress site: installing from scratch, plugins, and next steps
Other resources
