Photoshop mockups have their place, but sometimes you need something more interactive, collaborative and still code-free. Step up wireframing.
Photoshop has become a design industry standard for everything, including web and mobile prototyping. But guess what? It was never originally intended to be used for web design. As the name suggests, Photoshop was meant for editing – you got it – photos. Which means that using the tool to create PSD mockups at the start of a web or app design process can have its downsides:
- Photoshop is expansive, and getting to grips with all its shortcuts and secret passageways is time-consuming
- PSD mockups have to be converted to HTML, a skill to be mastered
- You can share your PSD mockups, but you can’t work collaboratively
- PSD mockups are pixel-based, a little clunky in a responsive-adaptive multi-screen world
- New users who don’t need to actually edit images can find features a little overwhelming.
While building PSD mockups in the early stages of a web design project is still done, there are plenty of reasons why stepping up the fidelity makes sense. Prototyping tools come complete with gestures, rich animations and transitions, so you can create, present and test wireframes more exactly. Here are some of the main reasons you should ditch your PSD mockups in favour of interactive prototypes.
Clickable wireframes and hotspots
Photoshop mockups can undoubtedly boast a lot of visual fidelity to your eventual website or app, but they’re not clickable; sure, you can flick between screens manually, but you can’t create navigation flows with any subtlety. Explaining to clients or business peeps the details of your design is tough when all they’ve got in front of them is a static mockup. Flows and interactions become a lot clearer, however, when using tools that cater for interaction design and animation. Prototyping tools mean you can create links between screens and, using UI elements such as Hotspots, can generate a link from one small part (say an image) of a screen to another screen. The visual fidelity of an image-heavy PSD mockup is maintained, but you also get the functional fidelity lacking from static Photoshop screens.
Of course, sometimes maximum fidelity is called for. Plain old Hotspotting is good, but adding effects and animations to Events is the proverbial cake icing. Switching from Photoshop to a prototyping tool gives you the freedom to dictate much more, from event triggers – a click, or a mouse hover – to actions, such as a page or style change. The ability to define conditions for every interaction enables you to create a prototype that runs certain actions at certain times during simulation – user testing at the prototyping stage becomes possible with this kind of functionality.
Animations and events
It’s been a long while since websites were purely static affairs, and the mobile experience is even more dynamic. How are you meant to represent that in a PSD mockup? Umm, you can’t. If you need to demonstrate animation in a prototype, you’re better off building with that in mind from the start: choose a tool such as Justinmind that lets you combine advanced animations with your static design files from the start, still without having to switch between tools or write any code. You can play around with the timing, easing and movement of your animation, factors which may be a dealbreaker if you’re designing something that has to be on-trend or brand-exact.
UI elements and kits
Building mockups in Photoshop implies spending time finding or making your own UI elements – icons, screens, etc – to match the specific interface for which you’re designing. If that sounds like a time-suck, it’s because it is. Wireframing tools come equipped with their own stock of UI elements and libraries (Justinmind has hundreds of pre-made UI elements for all interfaces, for example), which are dragged and dropped into the prototypes, and re-used across projects. UI kits, made up of pre-built elements and screens, are a great way to incorporate atomic design principles into prototyped interfaces, and all the icons in the kits are compatible with PSD files, so you won’t lose any elements you made up previously.
Integration with other tools
At different points in the design process, you’re going to want to switch back and forth between tools; nothing is more crazy-making than finding out one software isn’t compatible with another. Some projects require a lot of user testing phases (say, with a highly-specialised Enterprise software), in which case you’ll wish Photoshop was hooked up with usability testing tools (hint, it isn’t); switch up to something that has fully integrated usability testing as standard (we’re hooked up with the lovely people at user testing service Validately).
Integration with other tools such, as Photoshop and Illustrator, means you can copy paste vector images directly into your interactive prototypes, and make the most of responsive text widgets. The UI elements you worked hard to create for PSD mockups won’t be lost – just import them and get back to work.
Validate user scenarios
User scenarios are tricky to get right in a lo-fi PSD mockup. Sure, you can talk people through proposed navigation flows, but until you actually beat out interactive scenarios and check the flow, it’s tough to know how things will really pan out. Creating user scenarios in a prototyping tool takes much of the guesswork out of the process: just add a new User Scenario (Justinmind has a simple system to do this), define the screens, decisions and actions that make up a User Scenario and link the components to create navigation flows. One wireframe can have several User Scenarios defined within it, and will run through them on simulation.
PSD Mockups to interactive prototypes – the takeaway
PSD mockups, while they’re still relevant, don’t have the flexibility or fidelity of an interactive prototype, and they might just take you longer to build despite being much less detailed. Plus communication and collaboration is easier with a prototyping tool, with everyone from team members and potential investors to project managers and user testers. So next time you start a PSD mockup, take a minute to reflect – maybe what you really need is an interactive prototype.