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
- 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.