: What are some good "mocking-up" practices in web design? 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

@Karen819

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:


user logs in to check message
Follows link to read blog with an intent to share
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.

Vote Up Vote Down

@RJPawlick971

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.

Vote Up Vote Down

@Barnes313

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.

Vote Up Vote Down

@Eichhorn212

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

Vote Up Vote Down