by Dan Kaho
Whether transitioning a site from one platform to another or starting a new project on a new platform, one commonly overlooked project phase is the creation of wireframes. For pre-existing sites (ie – sites that are already live), wireframes are not usually a part of the project plan. In this scenario, wireframes are even more important because proper page analysis has to be performed in order to minimize the amount of surprises encountered during a site transition project.
Wireframes highlight the main features, content areas and, most importantly, outline the “flow” of a user interface. In the website development industry, a common example of a main feature would be a menu on the home page. In this example, if the customer has asked that the main menu, when clicked, should drop-down to show subcategories, this particular functionality would be called out in the wireframes. Here are a few points that everyone involved in an website development project needs to consider when discussing the importance of wireframes:
1. Developers are not user experience analysts or wireframe designers.
For sites that are being transitioned from one platform to another, one of the biggest misconceptions is that the development team can simply duplicate the old site as it currently stands. However, it’s not as simple as copying the HTML page content from one server to another. Proper current state analysis has to be performed to capture current site functionality. Always remember, no matter if it’s a static content page, product detail page, or a category page, each page on a website has a very specific job to do. As the project delivery team, we want to make sure we capture all features and functionality up front so we don’t lose site of the value each page offers.
2. Wireframes help set project expectations and help a project team mitigate scope creep.
How many times have you been on a project and heard someone on the team say, “I see what you’ve done, but I was expecting it to do <fill in the blank>.” It doesn’t matter if you are a project manager for an eCommerce services company or a project manager developing an internal software project, chances are, you WILL hear that statement at least once in every project. Wireframes help uncover these types of questions before work has started and help to minimize the amount of necessary rework.
3. Wireframes are not meant to be “pixel perfect”.
If there is an existing style guide or site skin in place, some customers will try to save project costs by moving forward with wireframing but skip the design phase of a project. When they receive the wireframes, they tend to get caught up in the details of the page design rather than reviewing the wireframes themselves. Keep in mind, wireframes serve a simple purpose: to show the overall structure (skeleton) of a page while outlining the high-level features and functionality of the page.
4. Wireframes help the ENTIRE project team be more efficient.
The level of detail provided by a set of wireframes helps everyone in the project team work efficiently.
- It helps the Design Team by outlining how many page designs have to be created to show the many different page scenarios.
- It helps the HTML Development Team know what functionality they need to build into the site.
- It helps the Platform Development Team plan for additional features and functionality that need to be developed on the back end.
Without wireframes to reference as questions arise, many customers find that look, feel and flow questions tend to come up during the final delivery of the site. It is in everyone’s best interest to spend a little time up front to make sure the user interface is clearly defined and understood.
Wireframes are the most important aspect of a design. Flowcharts are also important when converting pseudo code to programming language. I see you have gathered up all important information here, Good job!