Best Practices for Website Prototyping

Developing a prototype is the first step in the website build process. A website prototype is essentially a sample of the actual site, illustrating how the creative, strategic navigation and functionality outlined in the sitemap, wireframes and design work together. The code for a prototype is the final code for the website; however, it is only being applied to a few key, representative page templates.

Benefits of Prototyping

Prototyping allows key stakeholders to experience aspects of the new website – such as the structure, drop-down menus, scrolling patterns and how it displays on various screen sizes – before the entire site is built. This process helps to ensure that the project is going in the right direction and provides the opportunity to make adjustments and enhancements that will yield better results. Also, this can save a significant amount of time and money down the road, as it’s easier to make changes on a few pages than a fully built website.

Website prototypes can help spark enthusiasm after the early project stages that include necessary, yet mundane, activities such as site audits, sitemapping and wireframing. With prototyping, key stakeholders in the project get to see the hard work pay off and come to life.

Best Practices for Prototyping

1. Make it responsive: Many of us appreciate the importance of having a responsive website that appropriately resizes and reconfigures based on the device it’s being accessed on. Prototyping allows stakeholders to see how the website looks and functions in all screen sizes and orientations on desktops, smartphones and tablets. This helps ensure that the selected design and development elements work well on all devices, which is mandatory when catering to a growing mobile audience.
2. Testing, testing: A website prototype should be thoroughly tested, from the appearance and dropdowns to link features. As a best practice, the prototype should be tested by different people, in different web browsers and on different devices. This is particularly important for responsive websites because the prototype must display properly on desktop, phone and tablet. Reviewing the site extensively helps identify issues that could present more significant problems later in the development stage.
3. Clean up the code: These issues identified in the testing phase must be resolved and reassessed prior to moving forward in the build process. Otherwise it would be like building your house with cracked floorboards. As mentioned, the code written for the prototype is the final code for the website, so if there is a bug it is going to negatively affect the entire website build.
4. Collaboration is key: For the prototyping process to be effective, each stakeholder must evaluate the prototype, express their thoughts or concerns, and agree on the next steps. Full agreement can be difficult, but reaching consensus in the initial stages of development leads to a smoother build and a final website that pleases everyone.

Preparing for a Successful Website Build

The feedback obtained and the issues resolved in the prototyping stage make it an imperative step in the website development process. While it requires additional time in the short-term, it saves avoidable rework and missed milestones in the long run – helping to create an overall better website.

• Website