Technique to designing a website based on a sample?

Question

I am starting my freelancing career as a web developer/web designer

In a few test runs, the client posts a link to a website and says they would like that style.

How would you approach that problem?

What I do is write HTML/CSS and try to make an exact copy of the website?

I then go back and compare my sample to the original.

I'm not sure if that's what you are supposed to do.

Any help is greatly recommended.

Answer 1

Firstly, you will need to talk to the client a lot. Whatever you feel you should ask, then ask. NEVER presume that he wants something. Ask, ask and ask. If you realize that you are boring to the client, there are 90% chances that this is the bad client and you will get into trouble eventually working with such clients. Good clients who want to make success out of their project will always have time for his project. He will never say you are asking stupid question (unless it's really stupid) and he will even repeat things you asked before.

So when he says he wants a website like XY, then he wants such look, UX and impression on users. It's up to you now and your expertize to ask him right questions. Such as: Do you need a backend? Do you have hosting? Do you want linux-based or windows-based website (so you can choose technology and language)? and so on.

You then make a list of all features which will become project specifications. Whatever is not clear, you ask the client. If he says I don't know, you can recommend things.

Always be honest and realistic about deadline. If you followed all these steps and the client leaves you, then you are lucky - you discovered the bad client on time and you did not lose any money, except a few hours of your time.

Answer 2

The way I do it is as follows:

1. Ask client for a number of sites (or design ideas) that they like (Note: ask the client not to dwell on sites offering the same service that they're offering).
2. I then sit down and look at their list and think.
3. Once I have some ideas I create a number of (original) designs in Photoshop, maybe 2-3. I also try to include a 'fresh' design that has little to do with their ideas.
4. I send these (as jpgs or pdfs) to the customer who considers them.
5. The customer (generally) picks one design which we then develop further. Quite often they say something like "I like design one but, put the menu from design 2 in instead".
6. After a few iterations of steps 4-5 you are left with a final design that everyone is happy with.
7. You then get the design "signed off" or completely agreed upon by the customer.
8. Start writing the HTML, CSS, etc.

If you combine this with a 'techinical specification' at the same time then your work will be much easier.

(Tech spec : what it does, Design Spec : what it looks like).

Once everything is agreed and you've built the site, if the customer then wants 'additions' or 'changes' you can argue that this isn't what was agreed upon and therefore add some additional charges. This is a really good way of avoiding 'design creep'.

Answer 3

Global view not narrow scope.

When any client provides you a link to a site they like you need to step back and look at it with untrained eyes. Ask yourself:

• Why might they like it?
• What sort of colors is the site using?
• How is navigation viewed
• How does navigation operate for the reader?
• How is content formatted?
• What sort of typefaces are used?
• Are there UI effects visible?

Do not ever look at these sites as a designer or developer to start. You need to view the site as a user would. Don't worry about how something is implemented. Look for general concepts used in the site. For example:

• It's a one-page site. Client may like one page designs
• It's using a muted, pastel color palette. Client may not be in favor of bright, loud, color schemes.
• Navigation is a drop down across the top. Client may not like sidebar navigation.
• Navigation has simply underline hover effects and drop downs require a click. Client may not like "button" style navigation or elaborate hover effects.
• Content is in three columns with a hero image. Client may be in favor of columns and want the hero graphic.
• Sans Serif type is used for the bulk of the site however some script headlines are used in various places. Client may not like serif typefaces.
• Content is click and it slides out. There are animated images. There's an in-page modal window. Client may want more client-side interactivity as a whole.

In general, you need to merely get a sense of the overall layout and never actually dive into the code of the site specifically. The point is to get a feeling for what intrigues the client when the client has little or no idea how things actually work.

From here, you start asking about the specifics: Were you envisioning a one-page style site? Do you want a more pastel color theme? How do you see the content interaction with users? etc.....

Reference links are just used for reference you shouldn't be copying any code from them at all and in most cases you don't even need to look at the code.