Use clickable Mockups by developing web applications
I recently came across an article by Braden Kowitz on Design Staff (Shortening the Build-Measure-Learn Cycle with Clickable Mockups) that talks about using clickable design mockups in your website requirements gathering process. Kowitz lays out the steps his team takes when working with a new project and why spending time up front to prototype and end user test is better than jumping right into code after creating basic wireframes.
Using prototyping and specially ProtoShare, we talk a lot about how important it is to work out your ideas to get feedback prior to coding. What we don’t talk about a lot is the ability to use (and benefit from) clickable design mockups during the prototyping process. From grey-box wireframes to high-fidelity prototypes and documenting decisions, there is a lot you can accomplish in ProtoShare – and creating clickable mockups has always been something even non-technical users can do quickly and easily.
Let’s first look at Kowitz’s process and then discuss how it relates to our prototyping:
- Set a deadline
- Design a flow
- Mock up each step in high-fidelity
- Write up a prototype
- Show it to people
Depending on the size and complexity of your project (a 10-page website vs. a 50-page website with multi-step application elements), you may follow several variations of this process. The first step is pretty self-explanatory; just remember to be reasonable in your time estimates. In our experience, when it comes to designing flows for your site or application, it’s likely that you’ll go through several iterations with your team and/or client. Collaboration at each step ensures you’re headed in the right direction before moving to design.
In Kowitz’s process, Step 3 refers to mocking up the flow with high-fidelity designs (not functionality), so this is where your designer’s talent comes into play. You’ll then take those designs and create an interactive prototype from them. This is something quite easy to do in ProtoShare. As an Editor, simply create images from your design files and drag them from your computer directly to the canvas or Page Tree. Then add hyperlinks, navigation, or functional components over the images to create the prototype. Finally, share the clickable mockup with a sample of end users and conduct user testing.
Is creating clickable design mockups (or “clickable comps” as we refer to them) really all that new of a concept? Of course not.
I have the opportunity to speak with a lot of our customers and learn about their processes on a regular basis.
Not everyone marries their wireframes to the design in this fashion prior to sending the design and requirements to developers to build the final product. For them, design is just the next step in the process after creating and validating prototypes. Some even jump from planning straight into design. While jumping into design isn’t our recommended best practice, it works for some people and projects. However, if the website or application design has a big impact on functionality or if you need to test the design and interaction flows with end users, creating clickable comps is a great way to iron out additional wrinkles before handing off the requirements to the development team.
Because successful website and application projects are contingent upon good communication between stakeholders during each step in the development process, bringing design together with the prototype is becoming a popular workflow.
Got tips on how you use design comps in your process? We’d love to hear about them in the comments below!
3D 60 seconds video 60-Sekunden Videos Agile agile amazon.com Archivematerial art director back of a page Beta-SP blog Cinema 4D color Colorgrading complaints management design developers digital activation dual screening DVCam DVCPro dvd ebook epub grading Ground15 HDR iBook ipad iPhone jeff lam Klout Klout for business kpi kunst marketing strategy mobile apps mockups multimedia mutimedia online marketing Online Marketing package work page speed planning process ProtoShare prototype prototyping Rendering reputation management scrum second screen Second screen social media Social Media social TV sprint stories VHS video Video Books Waveforme-Darstellung webpage