From UI to final design – impressing the client

You are a web designer, maybe you work for an agency, or maybe you are a freelancer. That doesn’t matter since your task is the same in both those cases; get the UI design, or create it if you’re the UI designer, and give it some life and beauty aka, create the template.
The question is, how would you do it?

There are many ways to create the design and present it to the client for (a hopeful) approval. The most common way most web designers use to create the design of a website is to transfer the UI design in Photoshop and recreate the look there. Although this is a great and fast way to translate the UI design to something the client will understand and like, I believe there are some good reasons not to follow this workflow.

It is just a picture

Many designers will hate me for saying so, but the most important reason not to create a website template in Photoshop is because, in the end, it is just a static, lifeless picture. Yes, a picture is a thousand words, but I don’t think this is the case here.

It is lifeless

No matter how good designers we may be, a website template created in Photoshop although it may look cool, it will be completely lifeless and will lose some of its elegance. The reason is that you, as the designer, might have some cool animations you want to use, maybe there is a sidebar that comes flying in view when the user clicks on a button. Or maybe you want to have flakes of snow falling in the background to make the user feel the Christmas spirit and convince them to buy those Santa-hat-looking mugs your client is selling. There is no way to translate those cool features into a PSD file (…or is there?).

Many for one

Let’s face it, we are on 2018 and responsive web design has become the new black. Our possible clients tend to ask it in the websites’ requirements even though they might not completely understand what responsive web design means. The problem is, if you would want to recreate the UI template in Photoshop, you would have to create one for mobile, one for tablet and another for the desktop. That’s three templates for a single page. That’s too much, right?

That’s not what I saw!

Say there is a hero section just below the menu bar that has a cool image in the background, a really catchy title that will tempt the user to hit that CTA button floating over there. Now ignore that and let’s go back to that awesome looking background image. You have spent some time to perfectly position it where you want it to be to look as cool as possible. Positioning this same image on the final website will be a real pain if you want to follow the exact guideline of the PSD, will it not? Though you have to position it right there since the client can come and tell you, “hey, that’s not what I saw before!” and they will be completely right about it.

The ultimate solution

The problems I outlined above are just a few but really common problems a web designer faces when designing a website, there may be others too, there always are, but what should a web designer do to overcome those problems and present a cool website template that will wow the client? The answer is right before your eyes!

Web design it!

Designing a website on Photoshop is such a common practice among web designers that we actually forget our title. We are web designers so, why don’t we just web design that template?

Yes! Next time you are about to create a new website for a client, stop! Don’t open Photoshop. Open Visual Studio Code, or Sublime Text, or whatever you use anyway and start writing what you always write there, HTML, CSS, and some JavaScript.

But hey, that’s not the same!

Of course, it is the same. You have the UI design at hand and the final template in your mind, what’s stopping you from using code to bring the template to life instead of using Photoshop? Habit. An old habit that you need to set aside in order to start solving problems you may never have thought you had before.

Just do that next time and have your client use that template instead of just showing him a lifeless, static image. I am pretty sure they will go from a-ha to oh yeah now they can roam around the template, opening sidebars, toggling dropdowns and so on.

Showing your client an HTML template instead of a PSD also saves you the time explaining what will happen when they click a button, when modals open, and so on, since now they can actually see what will happen and how things work.

They can also see how the website will look on a mobile device since they want the website to be responsive. And oh yeah, you achieved that in a simple HTML file, possibly in half the time you would spend creating separate PSD templates. Well done!

Seems that you did not get bored and followed along so far. Maybe I got you mad for shaking your beliefs, maybe not. Or, maybe you already followed the workflow I do and always work on HTML templates instead of Photoshop to present templates to your clients. Whichever the case, get the conversation going down below in the comments, let me know your thoughts and how you do things your way! We always like learning new things and workflows after all.

Comments

Contact Us Now!


Social Media