App design process - Prototype phase: Photoshop design every single screen?

Question

I've just started designing apps and still learning my way through. I'm now doing a project that it is quite complex, so this was the rough process:

1. Understanding of client's requirements and research.
2. Detailed navigation map with most essential functionality of each screen.
3. Client and developers iteration and approval
4. I created about 7 photoshop screen designs on tablet and 2 spec screens with most general styles that can be applied throughout the app.The total amount of screens is about 25.

So I wonder in this phase:

1. Is it necessary to design each screen for tablet and mobile?
2. Is it valid to, since developers have the general styles spec, to maybe draw a screen on paper just to give them idea of how it would look?
3. Is it a normal practice to leave some screens out and then sit with the developer to just refine the looks, increase paddings here and there, work out better ways to display or navigate on tablet or mobile?

I appreciated any input, just mind that although this forum usually seeks the very best practices in the industry, the best practice doesn't always suit every single company, especially when there are time constraints so designers and devs have to often be creative and rethink process for different projects.

Answer 1

1. No, it's not always necessary. System-defined screens are not obligatory, and there is no need to reproduce clone pages/elements with minor changes. Alternatives to hi-fi prototypes are lo-fi wireframes, user journey maps, PRDs.

2. Yes, paper sketches/prototypes are legitimate prototypes if they are detailed enough and capture/highlight on all important parts.

3. It is a common practice.

NB: Make sure your superior and developers are okay with this kind of specification (best would be to get approval in email form) and that all gets documented properly.

Answer 2

Just to add to the other answers, you should actually avoid making the mocks look finished until the functionality is also finished.

To quote Joel Spolsky:

If you show a nonprogrammer a screen which has a user interface which is 100% beautiful, they will think the program is almost done. (source)

To this, I would add that even people who aren't non-programmers (i.e. programmers themselves) fall victim to this fallacy.

Answer 3

You're right that one practice might not suit every single company. What's more, it might even differ from dev to dev.

The simplest way you can go is just ask the devs what's their preferred way of working. Some people hate having someone else looking at their screens, while others may have lots of questions and would rather have you around. It varies from person to person, so asking them is a good step. They'll surely understand that it's important for you to have every detail polished up, and you would welcome a constant feedback either by working together or by some other means.

In general, your mockups should suffice if the frontend team understands your comments, e.g. "make all buttons the same width". There should be no need for you to draw every single screen, especially when there's an unpleasant sudden logo placement change and you have to edit 25 screens by hand. Devs should have a fairly high level of imagination to visualize your mockups without pixel-perfect images. But asking them how much details they need should clear all uncertainties.

Answer 4

Clients certainly do not need to see all those permutations. Clients should see the big picture including functionality and aesthetics. Developers need to understand how to handle all the permutations. How you communicate the permutations is up to you (notes, diagrams, image snippets, flow charts, etc).

That said, Photoshop is perhaps the worst tool for this job. It's an app that has morphed and adapted to handle multi page layouts, but it does it by running around the block to get to the front door. Sketch 3 and Fireworks CS6 are page based, meaning you can crank out your 25 screen much faster in one file. Both are vector-native which makes drawing elements faster. Photoshop is unfortunately founded on stacking layers and manipulating pixels. It's slow and clunky compared with Fireworks / Sketch. Unfortunately Adobe stopped supporting Fireworks this year, but if you can get your hands on CS6 you won't be disappointed.