So you’re ready to sit down and design (or redesign) your website. But, how do you start with the design of a new website?
In my opinion, the first step is always strategy, or more specifically, discovery and research. Knowing your industry and what the competition is doing is the first step in creating a winning website design that is a step above everyone else competing in your space. This is also a great opportunity to do some keyword research and begin building a foundation for your search engine optimization or keyword strategy.
The next step should be the design and development of your site map. At this stage your goal should be sorting and organizing all the pages that will be included in your website and mapping out where each page will live and how each page will be connected with one another. Creating and understanding an intuitive and natural navigational experience is critical in not only the website design, but helps control things like user experience and bounce rate.
Third and arguably the most critical part of the strategy phase in a website design project is wire framing. At this stage your goal is not to design the website, but to design both the information architecture and the foundation for the user experience on the new website. This is an opportunity to figure out what information you want your audience to focus on and how you would like them to find their way through the website.
But perhaps you’ve never heard the term wire framing before…
What Are Wire Frames?
Wire frames are a schematic tool that allow web designers and developers to easily lay out and rearrange web page elements to achieve project goals and explore ideas before investing too much time in the creative design phase of a project saving everyone both time and money. Wire frames may also be referred to as web page schematics or screen blueprints.
No matter the complexity of your website design, the opportunity to lead with wire framing before design is invaluable for both client and designer to understand and explore ideas before investing the bulk of the project budget in the user interface design process. This is the stage where everyone involved in the process has the opportunity to understand and challenge the arrangement of page elements, content placement, navigational systems and overall page layout. All of these elements work together to help create the foundation of the website and user experience.
Wire Framing Can Make or Break a Website Design Project
There was a time in the early stages of my career as a web designer when I did not use wire frames and thought they were simply a waste of precious time. As I gained more experience, worked with more clients and was challenged with larger, more complex websites I soon learned the value in creating a more detailed and comprehensive plan and exploring ideas before investing large amounts of time and energy in a website design.
In these early days I often found myself spending two, three or sometimes four times the budgeted design time on revisions or fixing a website interface after deployment because my interpretation and the client’s interpretation of how the website should be designed differed to varying degrees. There were also occasions where I had overlooked requirements or missed potential flaws in the website design because I had not taken the time to create a wire frame beforehand.
Once I came around to the concept of wire framing I noticed immediately that not only did the quality of my website design as a whole improve, but I started receiving more positive feedback from clients and fewer revision requests. Ultimately, I began creating better design, faster resulting in happier clients because not only was I able to map out the website in advance and catch potential roadblocks, but I also found that this process also required the client to be fully involved in the strategy and design process to a large degree. This I discovered worked greatly to help each client understand why I had designed a website or user experience in certain way and helped them get behind an idea more easily. With everyone onboard an idea before we start the creative process the results are infinitely more positive and successful.
Wire Framing is the True Creative Process in Web Design
As I’ve developed my wire framing technique over the years I’ve come to appreciate them as the true foundation for the creative process in web design. When done correctly,
I believe wire frames may answer all the questions that both web designer and client may have and great an opportunity to solve unforeseen problems that may arise in a website design. When we come to understand and appreciate the value of wire framing, we realize that the creative design phase is simply an opportunity to refine and polish the complete web design concept.
Looking for more info about wireframing? Or are you in need for someone to assist you in your digital journey? Look no further and drop us a line through our contact form.