We are a small Frontend team of 2 members stuck with a decision that we need a designer or not.
We both have the same opinion that getting PDFs done in Photoshop to make final decisions is a lousy way to approach a project, A process that includes prototypes could be much better.
What process do you prefer while working on your UI?
If I work directly with clients I always start with some wireframes and work in an incremental. Planning out layouts, content and so on.
After that I start designing mostly the landing page in sketch. Choosing colors, typhography and the overall mood and feel of the site.
Then I basically create a prototype in marvel with the fully designed landingpage and the wireframe subpages. The landingpage is for showing off the mood of the site and the wireframes to show of different site layouts.
Sometimes I design a second page, too to show of different elements and how they are designed. Then we come to revisions and I have only to rework 1-2 pages and the wireframes which are not that pixel perfect.
On bigger projects I really like to keep a styleguide which is insanly easy in sketch, so I can show of different UI elements and how they behave. The benefit is, that I can show of all pages of the site, without designing them pixel perfect. The client can see all components and can see the layouts as wireframes and 1-2 fully designed pages.
After the desktop version is final, I create the wireframes for the mobile (smartphone) version for some subpages which are important and have different layouts and 1 or 2 fully designed pages. Then prototyping in marvel and show it to the client. This way I can be sure that the design of the elements is final and the changes to the mobile version are most of the time pretty small.
I prefer explicit final designs where possible, hooked up to a prototype flow tool like Invision App. When you only wireframe or loosely approximate your designs, you wind up with "leaps of logic" whereby in the design it looks good, but actually makes no sense when trying to program it.
I've worked with wireframes that put a generic "related content" box on the page filled with lorem ipsum, but then when you go to build it, you realize the content you're trying to put there doesn't actually fit properly, or no thought was given to what the related content criteria should be. Sometimes pages are orphans - they exist as a design, but there is no element in another page that actually would let you get to it (which is why flow tools like Invision are helpful).
Generally the more detailed the design, the easier it is implement functionality, as the more thought-out it has to be beforehand.
Now, when it comes to doing front-end dev and styling, then full final designs all the way, down to the littlest detail. Not all design elements are easy to implement in CSS (e.g. gradient text on a textured or image background - simply not possible to do cross-browser). So having those excruciating details already designed ahead of time lets you push back on the design. And if you're a designer developer like I am, you can design while keeping the development side of things in mind, creating much more efficient and easy to implement designs.
A thorough design process lets you solve or simplify many of those implementation details before you even write a single line of code.
Use Invision app for designing, we use it here in IBS for all designing related stuff, and happy about the product.
I've usually worked in a waterfall method where everything was designed in Photoshop. That means all templates, in 3 variants: desktop, tablet and mobile. So much work for the designers... The client then approved it all and from there the developers took over. There always were a lot of questions on how things should work on mobile, which element should go where etc. This took away a lot of time and energy fir the developers.
In my new job however, I'm both developer and designer and I've decided to design directly in the browser. I haven't designed anything in Photoshop and this way I can show working concepts directly instead of just showing images. :)
To me this is a way more natural working process, because you remove a step and you are working in the environment your design will be used.
Fortunately I work internally, so no clients... Clients often want to sign off things and there's the hard part: you need to convince the client that designing in the browser is faster and better for the end result than designing everything in Photoshop first
To conclude: go with prototyping! ;)
P.s. Just an example of how time consuming it can be: we had a client who's website consisted of 12 templates. The designer fully designed all of them in 3 sizes, so 36 PSDs... Client gave multiple rounds of feedback which meant editing all these 36 PSDs and sending them to the client again for their approval. This went on for 3 rounds... The designer wasn't happy to say the least... :(