

Ask HN: What do developers do with web mockups? - mkhalil

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?
======
Falkon1313
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?)

~~~
mkhalil
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
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/>

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

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

~~~
mkhalil
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.

~~~
shanelja
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
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.

