Doing mock up designs for client

[vanquish]

Hi guys,

As most of you know, i have started up a web design business. Just wondering if someone could tell me how you guys go about doing mock up website designs for clients? Do you design them in photoshop or in dream weaver? do you print out the designs of show them on screen? how many designs should i be presenting? and how long should i be spending on design?


any info you can provide would be great.

thanks

[budafist]

How many pages are you doing?

I would do about 5 different designs that are visuals only. Client picks 1 to develop and I will work on that design in dreamweaver with working links etc.

[ecsyle]

So you started a web design business and cant do webdesign?

I do mockups with photoshop. If they like the design, then I cut that mockup up and create the html.

I will do 2 mockups (maybe... I usually only need 1), with no more than 2 revisions per mockup (again, its usually just 1), unless they pay more. To present the mockups I create simple html pages with the image aligned like it would be if the site were live. If there are tiled background images I show them on the mockup page too so they get an idea of the whole experience. Design takes time. I spend maybe 5-20 hours on a mockup. That doesnt really include research and talking to the client though.

[Drazan]

I do one static image. I spend about 2-3 hours on talking with the client and research and anywhere from 5-10 on a mockup. Then I let the client see it. Usually I'm spot on to what the client wants.

After aproval of the design then I build the code behind it. I code by hand for a sleek and fast loading site and I also write and imput their copy for SEO and marketing purposes. Once it is to a point that I'm nearly finished as per the first conversation and detailed contract, I let the client see the site and gain any other imput.

The time it takes to take the image from design to code depends on how many pages and whether or not there's application coding (e-commerce, catalog, database, etc.).

Once it is live, then we follow up with the marketing strategy to make the clients customer base aware of the website.

=)
Jade

<< web guru for 13 years

[zubaier]

Hi guys,

As most of you know, i have started up a web design business. Just wondering if someone could tell me how you guys go about doing mock up website designs for clients? Do you design them in photoshop or in dream weaver? do you print out the designs of show them on screen? how many designs should i be presenting? and how long should i be spending on design?


any info you can provide would be great.

thanks

Um... with all due respect, do you know anything about design? I'm not sure you're quite ready to launch your own business if not.

[PrintDriver]

If you take the attitude shown in two posts above, more than half the people on this website shouldn't be freelancing...

Don't assume the person doesn't know how to design because of the words Photoshop or Dreamweaver. He may be asking whether tools are used to do mock ups rather than taking the time to code a page. This is just like a GD newb asking how many comps to draw and how long a project should take.

Give the poster the benefit of the doubt.

[zubaier]

If you take the attitude shown in two posts above, more than half the people on this website shouldn't be freelancing...

Don't assume the person doesn't know how to design because of the words Photoshop or Dreamweaver. He may be asking whether tools are used to do mock ups rather than taking the time to code a page. This is just like a GD newb asking how many comps to draw and how long a project should take.

Give the poster the benefit of the doubt.

If hes 'started his own web design business' then dear god, he should know to present mock-ups. before starting a business in an industry people generally learn about said industry by working in it for a time.

The question put to us by the original poster would appear to signify they haven't put that time in. and so IMO shouldnt be launching a design consultancy.

[LeftBrain Artist]

For mock up purposes, it seems like a lot of people generally make static images (either sketches/drawings or nicely done comps) to use for the discussion, and its the discusssion where dynamic elements of the design are discussed. Which is fine, unless the client lack the vision to understand how things like rollovers and animation might take place - and since they usually don't have the ability to visualize even static imagery . . .

One of the best mock ups I've seen was done by a client of ours. We had supplied him some printouts of static pages we were proposing, then he took them and cut and taped them back together pop-up book style, going so far as to print out little drop down menus that he taped to the back of the back of the mock up, and came through a slit in the mockup to the front side so you could grab it and pull it down. You can also tape buttons in their normal states on it, but just tape one edge so you can flip it back and reveal the rollover states. These types of mockups are a little sloppy, a little fragile, and almost comical when you first see it - but if it gets the point across, helps people understand some of the dynamic elements, and saves time creating a working digital file - its something to consider if you're a crafty individual.

[Derfie]

I think it is reasonable for the poster to ask for opinions on what programs/tools he should use in presenting Mock-ups for website designs. It is the same as if someone has worked in-house, and wants to start a freelancing business. They might have business questions on the how much time to invest in initial comps for clients because they might lack that experience, but are still good/professional designers. We all have to start our business somehow.

[PrintDriver]

The poster obviously knows he has to do mockups. He's asking advice on the best way.
Same as any other newb.
And we go easy on newbs here.

[(gra-ph!c-D'sig-nah)]

BE EASY!!!

[chris_bcn]

I think the reason why he is getting flack is that there are some many people, with little to no design experience who set up a "web design business". It's a step up from hte "my nephews a whiz with computers, and he'll do it for $50).

I agree with ecsyle on the mockups. I do 2 plus 2 revisions. More comps or more revisions are charged at my hourly rate.

Make sure you have it all stipulated in your contract. and 50% up front

[Broacher]

My VERY limited experience with web site protoyping design was aided a lot by using an earlier version of this software: http://www.medialab.com/sitegrinder/

I acknowledge that I'm way under-qualified to say it, but I don't see why more web studios don't use something like this more often for quick prototyping.

You essentially do the design/layout work in Photoshop, and it cranks out a coded, interactive site complete with most of the popular goodies--rollovers, pop-ups, some CSS stuff, links. And all in Photoshop. It's not final code, sure. But for prototyping? Wouldn't an interactive multi-page demo make a much easier sign-in pitch than a static page or two?

[vanquish]

If you take the attitude shown in two posts above, more than half the people on this website shouldn't be freelancing...

Don't assume the person doesn't know how to design because of the words Photoshop or Dreamweaver. He may be asking whether tools are used to do mock ups rather than taking the time to code a page. This is just like a GD newb asking how many comps to draw and how long a project should take.

Give the poster the benefit of the doubt.

Your right Printdriver, i am asking about whether tools are used. In the past, when i have designed sites for family members or personal interest site, i have had the freedom to go straight ahead to the coding phase (without having to show designs before hand). I've been web designing for 5 yrs. My expertise is web development.

[ecsyle]

I read the OP like they started the business and do not really know web design. It sounded like they were asking how to create the mockup, then how to handle the mockups. Perhaps it was just worded weird to me or I just read it wrong.

[greyghost]

I think the OP is just asking what the preferred method of concept presentation is - something built in Dreamweaver or a static image made in Photoshop. And from what I understand, that's a personal preference thing. I know some web designers that do static images and some that jump straight to code. I think most do a static image... but anyway.

I have asked some pretty "basic" questions before on here, and nobody gave me the flack some folks have given the OP. I don't know if it's because too many "web designers" just know a little HTML code and crank out crappy sites for $100 or what the deal is here... but maybe wait a little while before flaming the new guy?

[zubaier]

I think the OP is just asking what the preferred method of concept presentation is - something built in Dreamweaver or a static image made in Photoshop. And from what I understand, that's a personal preference thing. I know some web designers that do static images and some that jump straight to code. I think most do a static image... but anyway.

I have asked some pretty "basic" questions before on here, and nobody gave me the flack some folks have given the OP. I don't know if it's because too many "web designers" just know a little HTML code and crank out crappy sites for $100 or what the deal is here... but maybe wait a little while before flaming the new guy?

Yes, but were you asking such "basic" questions *after* launching your own design consultancy?

I take design seriously - launching a design business with such a lack of knowledge kinda pi$$es me off TBH... he's simply not ready to launch a business if he's never been involved in a pitch (on any level) IMO. Sorry.

He says hes a been web designer for 5 years, then says his expertise lies in development - which is it? And if he's been designing professionally for 5 years then why the gaping lack of knowledge?

[greyghost]

Yes, but were you asking such "basic" questions *after* launching your own design consultancy?

I take design seriously - launching a design business with such a lack of knowledge kinda pi$$es me off TBH... he's simply not ready to launch a business if he's never been involved in a pitch (on any level) IMO. Sorry.

He says hes a been web designer for 5 years, then says his expertise lies in development - which is it? And if he's been designing professionally for 5 years then why the gaping lack of knowledge?

Well, I am no web designer. My information concerning web design is very limited at best and I often ask really STUPID questions - I hire people to do web for me, I find the client, I have the face-to-face meetings with the client, and I am sure to come across something I don't know if it can be done, or how best my web designer will do it.

So yes, I do run a business without knowing everything. I took it as an innocent question, but me not being a web artist, maybe I don't realize HOW basic a question that is. ;)

[SurfPark]

Web design is all about information architecture! You need to figure out why your client needs a web site. Is it an online store? Is it only to provide contact information? Is it an online catalogue for phone orders? Is it just a giant advertisement for a physical location? You need to identify the main purpose of the site. You won't be able to do a mock-up until you know this.

Once you have a purpose, you'll be able to make a quick sketch in Photoshop or on paper for an initial meeting. The client needs to agree on colors and layout so its best to have those in your sketch. You can also need to be able present a flow chart to illustrate the path a user will take. Remember that most users don't go more than two clicks into a site before giving up. Make all information visble and not hidden.

Seriously though, you should not be selling a service you don't have knowledge of. If I was hiring you, I'd be worried that you don't know this already. You're better off educating yourself via books and talking with your web designer so that you can sound educated when presenting your services. If needed, take notes and create a brochure of your company's services to help sell yourself.

[PrintDriver]

And some Graphic Designers here who don't know how to get their stuff into print or are asking basic software questions shouldn't be Freelance business owners either, right? But no one is flaming them.

It's a buyer beware market out there. I'd be worried too if I was a first pitch. But I'd expect the cost to reflect the experience level or the portfolio to be a killer - or he wouldn't have gotten past the 'hiring' interview.

I get as exasperated as the next person when it comes to inexperience but I'd rather a person ask questions than proceed in the dark. And questions is why the GDF is here. Well...questions and a good dose of post-count fluffing. :D

[ecsyle]

I like to use photoshop when I create web mockups. I feel I have more control over the design, and can give it the crunchy feel that illustrator cant quite get. Illy is too clean to me.

If you were to present the mockup in a working html form you just waste your time. What if they want changes? Instead of just changing the mockup, you have to change the mockup, cut out the updated graphics, and update the html.

I suppose you could use GIMP or something to. Or fireworks.

[Hub]

I appreciate the straight forward, non-judgemental answers given by most of you...are we not all here to share and learn?

I also use Photoshop to create my mock-ups - three - one to meet the clients needs, one for the direction I think the client should go, and a third - so the client has one to make suggestions on or throw away. Slice it up, throw it in Dreamweaver, tweak the code and you're good to go!

Fingers crossed....

[popstalindesign]

My process:
1. Client discovery session
2. Get signed contract
3. 50% deposit before any work begins
4. Navigational wireframes (if needed)
5. Revisions to navigational wireframes (if needed)
6. 3 design concepts
7. Design concept revisions
8. Image optimization
9. CSS coding
10. XHTML coding
11. Site testing by me
12. Site testing by client
13. Any client revisions to coded site
14. Invoice for remaining 50% of project
15. Release files to client and make site live.
16. Deposit funds.
17. Eat donut