Ask HN: What do developers do with web mockups?

https://news.ycombinator.com/item?id=5628665

by mkhalil • 13 years ago

12 8 13 years ago

news.ycombinator.com

I have a guess. They extract the assets and use it as a guide, but pretty much make the html/css from scratch. Am I correct in my assumption?

shanelja2• 13 years ago

Lets say I am given a Fireworks .png or a .psd, the first thing I do is open it, flatten the image and open it alongside my browser for easy viewing.

Then I look carefully for each "asset" I require, normally images unique to the page, things I can't easily create with CSS, etc.

After this I grab my lovely grid and start to plan out where each element will fit, crafting the HTML as I go along. I could use some kind of generator but it will never be as good as hand made HTML, it is always clunky and overly complicated.

mkhalil3• 13 years ago

Thanks for the insight. When you mean "grab my lovely grid", do you mean just view the grid in Fireworks to see how many pixels apart everything is and code to match it? If so, I'm pretty suprised the mockups are "pixel perfect". Seems like mockups are a lot of work. That's done twice.

shanelja2• 13 years ago

No - at my agency the design team works to a 12 column grid which makes responsive design a bunch easier, by "my grid" I mean our pre-built HTML/CSS in house framework for working with this Grid style. It's loosely based on Eddie Machado's Bones framework [1] but integrates well with Magento too. [1] http://themble.com/bones/

hnruss• 13 years ago

Your assumption is basically correct, except a lot depends on what content in the mockup is meant to be dynamic. Sometimes a mockup can imply certain features which then must be implemented in order to fully meet the design. It is those features which take up the majority of the development time.

Falkon1313• 13 years ago

It depends on the designer.

1) Preferably, all I have to do is say "That looks nice, let me know if you need the application to generate any dynamic elements." A good web designer will be able to apply their design skills to the site. They'll work with me, and I'll make sure that the system is generating whatever content they need to style. It's the best way of ensuring that the end result matches the designer's vision.

If that's not an option,

2) Ask the designer to provide all of the individual images that they used to create the mockup, along with relevant CSS and HTML. Some designers can't apply their design ideas to dynamic websites yet, but can create a static page of their design. We take that as a guide, break it apart, and then put it back together bit by bit in such a way that it works with the dynamic system. This is, of course, less efficient.

And if that's not an option,

3) Curse and waste time slicing apart the mockup to try to extract the same images that the designer pasted together to create the mockup. Then do all the work of converting the mockup to a web design and applying the design ourselves. This is least efficient and has the greatest chance of being not quite what the designer intended due to the increased likelihood of miscommunication, having programmers doing design work, and because the designer often knew nothing about the underlying system that they were designing for (otherwise we'd probably be in one of the previous cases).

Also, as mentioned by hnruss, we discover the implied functionality, find out the requirements, and build code to support it. Then we add in all the missing pieces that typically get left out of mockups, such as error messages, or content that only shows for users with certain roles or in certain conditions. (Ever wondered why error and confirmation messages are often poorly designed?)

mkhalil3• 13 years ago

Thanks for the breakdown. Very informative. I think I'd prefer the 2nd route given the option unless I knew the designer rights good front end code. And that's an interesting point about error messages lol. Maybe they should be mocked up more often

jameswyse• 13 years ago

In most cases you're correct. It's the worst way to design a website, though. Sure it looks great in photoshop but it's an absolute nightmare trying to translate layer styles and giant background images to HTML/CSS, so the end result is rarely looks the same as the PSD.

There's an extension called CSS Hat[1] which aims to give you matching CSS for photoshop layer styles, though I've found the result is rarely the same same. Getting assets out of photoshop is also a horrible process, thankfully enigma64[2] and slicy[3] help with that.

Oh and if someone was to send me a Sketch[4] file instead of a PSD I'd charge 50% less, it's so much nicer to work with. Hasn't happened yet, though :/

[1] http://csshat.com/

[2] http://getenigma64.com/

[3] http://macrabbit.com/slicy/

[4] http://www.bohemiancoding.com/sketch/

mkhalil3• 13 years ago

Enigma64 looks cool! Thanks for the links/sources. Very helpful!

Ask HN: What do developers do with web mockups?

Related Stories