How to Prototype a Website
Our goal with using tools like sitemaps and wireframes is to think through and deliver a solid user experience using our User Persona as a guide. This level of abstraction helps us communicate with key stakeholders like management and most importantly the development and design teams.
As the digital marketer you’re often expected to wear many hats and having the tools to communicate to different audiences is critical.
Interactive Wireframes as Quick Prototypes
Once you’ve roughed out the wireframes and sitemap, your development team might use a tool like Twitter Bootstrap. This free framework allows the dev team to quickly code up different page layouts and essentially “prototype” a website or app with very little time invested. We tend to call these interactive wireframes.
As a result, an effect called the “browser epiphany” starts to occur. This is where the flaws in the wireframes and the architecture suddenly emerge when the site or app is interacted with on the desktop or mobile device. Ideally, a company has strong relationships with existing or potential customers and these prototypes can be put in front of these existing users for instant feedback.
Key takeaway: You will save money and deliver a better experience if you adopt this workflow for developing technology. Software development is expensive and you want to minimize wasting programming resources by ensuring you have mapped out a great user experience before it goes into final production.
Polishing Wireframes
Following an “interactive wireframe” stage, the designs are ready to get polished up. This is where a talented design team can play a critical role. Remember the goal of a digital property is to integrate into the overall brand experience. Things like brand identity, color palette, copy, images, etc these all have to be carefully aligned with the brand’s other marketing collateral.
Usually, a website or app has repeatable elements used throughout the experience. Often times there will be the following templates:
- Homepage or welcome screen on a mobile device – can include a login.
- General information or text page with a sidebar to the left or right.
- Blog summary page showing a short snippet of text and an image for that post.
- A media page layout for pictures, video, social feeds.
- Forms page for logging in or submitting contact requests.
- Social feed for either pulling in feeds or clicking into the brand’s other social properties.
As the design team works through these page templates, the tested interactive wireframes serve as an excellent guide.
From here the creative will get handed off to the development team, commonly known as coders. To stay on deadline, solid wirefames and call outs of interactivity elements are critical for communicating back and forth across the technical divide.
Key Takeaway: You can set yourself apart as a digital marketer by not being intimidated by the technology and instead delving into understanding as much as you can and being fluent with these communication tools.