0

As the first stage of development. I need to give several different mockups to the client so he can pick the one he like. Normally I design in photoshop and give the png to the client. In here I face several problems :

  • Some client's say the size need to be adjusted and to full screen. They try to compare it with the real output. But the problem is they change when coding.
  • Some say there are too much information but the thing they don't see is that the png have the full site but when someone visit the site only a part will be displayed in the screen
  • There are some visual effects I can't replicate in photoshop to match exactly with the real css output.
  • I feel like i need a framework like Bootstrap or Material at that very moment. Replicating those elements in photoshop is harder. Coding them might be easier right?
  • I feel like I can't show everything to the client. Mostly the animations.

But I feel like designing in the browser is a bit more work! Is it worth it?

1
  • I think the edit actually changes the intent of the question a bit. There's two issues intertwined here: how to create mockups, and how many variations do you show the client. Might warrant putting the 'variations' angle back into the title.
    – DA01
    Jul 13, 2015 at 18:15

5 Answers 5

9

I think you're on a classic designer dilemma, and addressing the issues you mention is of foremost importance.

First of all, the classic design failure approach:

I need to give several different mockups to the client so he can pick the one he like.

WHAT?!?!?! You're basically telling your client: "listen, I don't give a damn, I have no idea what you want and couldn't care less, so I'll throw a bunch of designs at you and choose whatever you want". This is also like telling yourself "I will never have a decent size client". Period.

Clients vary, but as a general rule, they want to know you listened, you care about their business and based on a thorough and exhaustive questionnaire you'll get to a solution based on your professional expertise, which means 1 (one) wireframe/mockup with a rationale for each element.

After this, you may find that the client likes your view and maybe require adjustments and minor changes, or the client doesn't like it, then AND ONLY THEN, you create another version. But if your rationale is correct, you'll find your client will agree with it and it will be useful for next versions (if needed).

On the opposite side, when a designer does what you mention, failure is secure. Think of this: John Designer offers 3, 4, 10, 100, 1000, 1000000 versions of a site. Statistically, you may nail it eventually, but there's something clear: it will be luck. Neither the designer neither the client has any idea of what and why are they using the site, nor they have any idea if it will work, and why. Needless to say most clients will notice their site has failed and John Designer will probably ask himself "why did I lose the client? I gave him 450 versions!"

The above being said, on to your specific points:

  • Some client's say the size need to be adjusted and to full screen. They try to compare it with the real output. But the problem is they change when coding.

Explain your clients how things behave. Once you work in 1 (one) and only 1 (one) version, it's easy to build a tablet or mobile version to show your client. Also, if you designed your piece properly, and you coded it properly, it should look the same. To help with this, try using a grid system like Bootstrap, Foundation, Unsemantic and the likes

  • Some say there are too much information but the thing they don't see is that the png have the full site but when someone visit the site only a part will be displayed in the screen

If they see too much information, there probably is too much information. Work on that.

  • There are some visual effects I can't replicate in photoshop to match exactly with the real css output.

Based on your description, I assume you're talking hover states and basic transitions. For example, on a nav element you can show all different states on different subsets of the nav

  • I feel like i need a framework like Bootstrap or Material at that very moment. Replicating those elements in photoshop is harder. Coding them might be easier right?

I think you're a bit confused here. First of all, Bootstrap is a framework, and Material is a set of guidelines (although you may find frameworks following these Material guidelines). Either way, there are thousands of UI templates, grids, elements and resources for both Bootstrap and Material and even Bootstrap Material. Replicating this in Photoshop not only is super easy, but absolutely needed, otherwise, how do you plan to show your client's a site preview? About coding.... yes, sometimes is easier, but it will rarely have the polished finish you'll get from a professionally made design

  • I feel like I can't show everything to the client. Mostly the animations.

Again I assume you mean transitions (as in on hover). If this is the case, read above. If not, work on 1 (one) and only 1 (one) version with no animations, and once approved by the client, you can work on the animations. Otherwise, you may spend lots of time on something that will never be approved.

6

As the first stage of development. I need to give several different mockups to the client so he can pick the one he like

This is the 'traditional' way to handle 'graphic design'. It's not a good way to handle user experience design or web design.

If the goal is to handle figuring out the 'look and feel' and 'branding' then I'd suggest the first step isn't to show mockups, but consider solutions like:

  • mood boards
  • Style Tiles
  • General competitive and non-competitive research (what does the client like/not like out in the wild).

After that, you may want to sketch up a few mockups in Photoshop to show different paths to take, but treat them purely as artistic pieces. The idea is to figure out colors, fonts, and general themes...not specific layouts.

Once things are narrowed down, that's when you want to jump into the browser and start building and designing the actual user experience and interactions based on the general visual theme agreed upon.

0
1

I have been in your position where eventhough your rationale and design approach is right, the client can't understand unless you show him the final product. Here are the types of clients I have come across and how I communicate to them.

Just-the-looks clients

I have dealt with a few clients who are concerned only about how the site looks. I just finish up visual mockups in photoshop and present them the images in a browser. Now, they can scroll the image and get to understand how their site will look.

Holistic-view clients

These clients, mostly inclined towards the visuals, are curious about how all the pages of a website follow the same visual theme.

Again, I take the photoshop route, but I also add a little interaction using https://marvelapp.com/

Here you can define an area of your image as a hyperlink and connect to the other images. This way just using images you can create a quick click-through prototype.

Attention-to-detail clients

These are clients who see beyond the visual part. They are mostly former programmers very interested in the functionality. They want to know how the different elements interact, and will not be able to comprehend when you explain just using a static visual mockup. Their brain keeps them focused more on how things work than on how things look.

I first use Axure http://www.axure.com/ to create prototypes. They are not visually well defined, but almost all the important and micro interactions captured. Most clients understand at this point.

Most-Difficult clients

The three clients I have mentioned above are people who are interested in design. They understand our design approach and ideas at one point of time. But, I have come across clients who wanted me to design, just because one of their friends or partners asked them to. They are not really interested in design, and sometimes also think it is a waste of time and money.

CAUTION: Rant ahead

I had a bad experience where I could not figure this out. I tried my level best to communicate my ideas using storyboards, prototypes, and what not. The client would just look on without any expression, and at the end of the presentation, would just give me random feedback and his opinions, and leave.

Later from experience, whenever I come across such a client, I would ask for another point of contact who knows why he hired me. If that doesn't work, I first plan for a half day workshop where I let the clients participate in a small designing exercise, to let them understand the power of design. If that doesn't work too, I just decline the project.

Ending statement

Even if you are a great designer who knows how to prototype or present beautiful solutions, you are wasting time if you don't know how to communicate it the best way to the client. So, I always make it a point to understand how the clients understand something. So, I don't change the design solution, but change the way I communicate it.

2
  • 1
    so many replies and only one mentions axure. .... Jul 15, 2015 at 11:38
  • Haha... I was wondering the same Jul 15, 2015 at 16:40
1

Designing in browser is a potent method. It is a bit more work than sketching away in photoshop, but its definitely worth it. Building an interactive prototype means you give your designs a new depth. Its no longer a static PNG or JEPG, people can interact with it, explore it and get a clear idea of what the app or the site could do for their business.

But when to use "designing" in browser and when not to? How do I begin? What should be my process and workflow? That's something you'll have to discover for yourself. I found mine and its unique to every designer. I recommend you explore the possibilities for yourself. This article might give you some ideas.

I'll get right to the point. You don't need bootstrap or material design. You don't need to learn frameworks. That's not a step in the right direction (to learn something new to do your job. You should learn to improve or progress your knowledge and use that to get the best of your job).

So what you really need is a tool with which, you can design html the way you design in photoshop, to be more expressive with your clients.

Brilliant - the internet already has it.

Now, I would recommend Macaw, its fairly simple to use and its cheap http://macaw.co/

However, adobe muse and photoshop is a potent combo. There is also a plugin (experimental) for photoshop that exports responsive html. http://www.adobe.com/uk/products/muse.html

For material design in browser you should give the polymer designer a shot. There is a offline version of this designer and it also ships as a chrome extension https://polymer-designer.appspot.com/

For portfolios, bootstrap applications and more there are several tools and kits available online, all you have to do is ask the right questions to a search engine.

parting gift:

http://www.semplicelabs.com/

http://www.layoutit.com/

http://hand-formvalidation.rhcloud.com/designer/

0

If I were you, I would:

1) Do wireframes for initial approval, and work with the client to see what needs to be there. Research has shown (though I can't recall specific research) that the "less polish" the draft looks, the more the client will feel they are part of the creation at the next stage and will be less likely to change it.

2) Do the work in photoshop (if you google bootstrap ui asset, there are photoshop/illustrator files that replicate those buttons already, so you don't have to recreate them), and put them in a responsive imagemap (with clickable buttons), alternatively, use invision -- which is the same thing but an actual tool.

Once 2 is approve, I may or may not code it in html/css, depending if there is a development team that can replicate my style in html/css.

1
  • One word of caution--I would not 'approve' responsive layouts in Photoshop. Things will invariably have to change once development commences. I'd focus on Photoshop being 'look and feel' but actual responsive layout will happen on the code side.
    – DA01
    Jul 13, 2015 at 17:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.