Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

A friend of mine and I have been trying to start up a web design company, so we're looking to find the most efficient overall web-design process straight off the block.

However after reading a few articles on creating mock ups, I'm getting the impression that it is potentially a very wasteful process.

I was wondering whether I could pick a few brains of some hardened veterans on the best mocking-up practices for your development process?

share|improve this question
add comment

4 Answers 4

up vote 3 down vote accepted

However after reading a few articles on creating mock ups, I'm getting the impression that it is potentially a very wasteful process.

For the ultimate whiteboard - functional public site design process, thinking through the best IA and wireframing things out before creating mockups, settling on one, then coding is the best way to go.

However, for time efficiency, it depends how you conduct your client relationship and what sort of websites you're pumping out.

Are these quick brochure sites for a few hundred each, or $1 - $3k custom sites? Or a few hundred dollar small brochure sites where the client would be happy just using a given wordpress theme?

When I ran a web design company a couple years ago, our process was to gather as much information as possible about the necessary features and content, letting us determine the IA, and as much as possible about what sort of design they wanted, the look and feel they were going for, and we'd often ask that they link us a few websites they like, and explain what it was they liked, whether it was the layout, the color scheme, the over all visual tone, etc.

From there, I'd whip open photoshop and design a mock up of something for them. This part, if anything, allowed us to create better work, and have happier clients. Any changes to layout / design they wanted could just be redone in photoshop, quickly. It wasn't until they were settled on the layout and design that we started coding, generally into WP. Sometimes they'd want some small layout revisions after we had started coding it, but mostly, the compositions saved us from having to back track further.

Depending on the site, sometimes it's easier to do a photoshop composition first anyhow. Even if you aren't showing it to someone.

If you really want to skip the mock up portion of the process, then your best route would probably be to gather a few different themes for brochure sites or ecommerce sites, and present them to clients asking them to choose one and giving them the option of certain layout changes.

A lot of it really depends on whether or not they want a unique design and heavily branded site, or something pretty generic with their logo and color scheme and some photos of their own.

share|improve this answer
    
Thanks for the answer, it was very informative. But in reference to asking the client to share links of other websites which they liked, was that ever viewed by the client as unprofessional or improper protocol. As is I was planning of having the client fill in a questionnaire from which I would elicit their stylistic and functional requirements. Adding a section on a form requesting to add links to sites that they like might seem a little unprofessional. –  Gary Cassar Aug 29 '13 at 11:20
2  
@GaryCassar Asking for links of sites they liked was something we did more to compensate with non-web people. Often, people we were building their first site for, or rebuilding a very old unmaintained site. With a larger client, or a more web savvy client, you probably either shouldn't ask, or phrase it differently while discussing your brief. Possibly asking who they feel their competitors are, or specifics of the problem they currently have if it's a redesign. At this point, it becomes sort of a case by case thing, but yes, I'd imagine larger clients wouldn't be flattered by asking that. –  Eric Aug 29 '13 at 13:03
    
Great, cheers Eric –  Gary Cassar Aug 29 '13 at 20:18
add comment

If you are trying to build a design firm I don't know anyone that would take the "design" over an actual functioning site. I would develop at-least five sites with your best work in regards to design and coding and make a simple mock-up that links to the actual sites. I would assume you have your own domain and you should be able to build the sites and host them on a subdomain if desired.

share|improve this answer
add comment

Are you also developing the web sites? If so, investigate Agile development and Lean UX. The ultimate goal is to get into code ASAP as that is ultimately what the web site will be: code.

share|improve this answer
    
Yes, we are also developing the sites. Thanks, I've heard a lot of good things about agile software development. I will definitely look into those two systems. –  Gary Cassar Aug 28 '13 at 14:32
    
I don't think this really addresses the question from a design point of view. Though I do not disagree with you from a business perspective about getting to production fast. But if you get to production before validating the design, you will end up hurting the product or building something that no one wants. –  JGallardo Oct 16 '13 at 22:33
1  
@JGallardo the design should be validated, certainly...every step of the way. I don't think that invalidates the concept of "code sooner rather than later" though. –  DA01 Oct 17 '13 at 4:10
    
@DA01 I agree with "code sooner rather than later" however there has to be a certain milestone at which it begins. Such as finalizing certain key requirements. I too often see overly enthusiastic developers start coding a project and letting the coding shortcuts dictate the design which results in a product with a poor user experience. And sometimes the product manager or client will just want the project to keep moving for sake of time and budget while sacrificing what could have been a better design. –  JGallardo Oct 17 '13 at 16:35
1  
@JGallardo I hear the "letting the coding shortcuts dictate the design" problem quite often. It's a problem but, alas, seems to be more of an issue of lazy developers more than anything. Developers should be striving for UX best practices as much as the UX team (i do realize that in the real world, sometimes the development is being outsourced for pennies on the dollar and, honestly, I can't expect those types of developers to do anything but shortcuts...) –  DA01 Oct 17 '13 at 17:16
show 1 more comment

It depends how detailed your mockups are that determines if it is a waste or not.

I first sketch with pencil on a notebook with the general design limitations (target screensize, etc).

Then I write some user stories like:

  1. user logs in to check message
  2. Follows link to read blog with an intent to share
  3. Hears about site and wants to find a number of articles about a certain topic 3.

Then I have a better idea of what the user should see. So I factor that in to pencil or pen drawings in a notebook. I try to draw out as many iterations as fast as possible. Then I go to a wireframing tool like Balsamiq or Keynote so that I can get a better idea of proportions for elements in the layout.

Then I code the HTML and CSS to actually test the interactions. You can use a framework like foundation which is great for rapid prototyping. I personally just code the CSS really fast and very bare.

I have a microframework that I created that has the file structure already done. The CSS already has the resets and is neatly categorized for adding rules to the grid, buttons, and the text content.

Then once I have a working unstyled product that is approved. I then go back and add the design details. You might have noticed though that I take a very content first approach.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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