They say a picture tells 1000 words. Well a prototype answers over 1000 questions.
I have prototyped for years whether the project needed it or not. Most if not all my work is done in CSS and HTML with a smattering of jQuery. Responsive web design has kind of forced it on to us in many ways which I’m cool with but it’s not always easy to get others to see the value or the benefit.
Everyone works differently. It’s the beauty of the web. There is more than one way to skin a cat they say. But are you getting good value for the way you work and more importantly is the client?
This isn’t a flat design knocking session. There is still a place for designing this way where appropriate but it is abundantly clear now that just working that way can have a negative effect on projects in terms of time, cost, effort and expectations which in turn can make it a good experience or a bad one for the client and the dev team building.
Like I said above, responsive web design changed the game and still does. We have numerous devices, numerous ways of building sites, numerous platforms and apps that all have an impact. You cannot capture everything in a pretty picture 1800px wide.
A prototype answers over 1000 questions.
It’s true. What happens to that menu at 1025px, what happens when that product title is shorter than the rest. When I click that button, what happens. The list can be endless.
Prototyping is fundamental to how I work. Both for me coming up with solutions but also how I create relationships with clients and devs. The feedback I get is real first hand feedback as it will have been viewed on the users devices which gives the user a sense of participation in getting the designs signed off. I find using the prototype on my phone a great way of designing rather than staring at the laptop screen in dev tools. Being able to use what I am designing as I go means I am finding solutions a different way and put me into the mindset of a user.
Participation is a big part of how I want to design sites. Sure, people see me as the person designing but I want others to join in, provide solutions and suggest better ways of doing things. I don’t believe in a big reveal.
One of the other key factors in the way I like to work is that I can do both design and FE both well enough to be effective which enables me to provide a good level of CSS and HTML which can be reused by the devs (if they choose to). This helps reduce the gaps between design and development which can be simple things like margins and font sizes to how a header might be animated on scroll.
Being smarter in how we work is crucial.
I work with style guides and that is another key tool in my arsenal when designing. Working with actual data helps. Long gone are the days of everything lining up with the same titles. Actual product names, some long, some short so we can see what happens.
We achieve the above with HTML and CSS sure but there are many other solutions now that can help provide the same solution. Figma, Adobe XD, Sketch, the list goes on. It might be an agency thing where the expectations are different. The old PSD route was so ingrained in how it was done for years that it’s almost expected still. But education is the key here. What a client gets out of prototypes is more than just grey boxes and lorem ipsum these days. It is so much more than that.