
Make Your Mockup in Markup - DeusExMachina
http://24ways.org/2009/make-your-mockup-in-markup
======
jamesjyu
Starting with mockups as markup makes it hard for me to be creative. It binds
my brain immediately to the implementation aspect of the design, rather than
freely exploring creative avenues.

Being able to nudge and push things around in Photoshop (or Fireworks, my
preferred program) is invaluable. This takes away the overhead of thinking
about browser related implementation issues. Don't underestimate this
overhead. I find that all my designs start looking the same if I start with
markup, in contrast to the more varied and interesting designs that I come up
with when starting in Fireworks.

~~~
peng
Learn a power tool like Sass, and you'll get your creativity back. I'm a
designer who actually prefers coding CSS (via Sass) over Photoshop.

PS is incredibly awkward and unwieldy for web design. You don't realize it
though, because there so few options for anything better. It was designed for
photo editing and graphic work, not solving layout problems for a flexible
medium like HTML.

~~~
jamesjyu
I agree about PS. Try fireworks, which is actually made for web design.

------
matt1
As an alternative to Photoshop and Markup you should also try my app, jMockups
[1], a web based high fidelity mockup tool. I launched it on HackerNews about
a month ago [2] and you can already mockup most existing sites with it. You
could create the mockup in this tutorial in about 10 minutes (complete with
the gradients and 960gs integration). If I wasn't on vacation and using my
iPhone at the moment, I'd show you :)

I really do need to get some examples up there...

[1] <http://www.jmockups.com>

[2] <http://news.ycombinator.com/item?id=1829657>

~~~
ivanzhao
Just checked out jMockups, great stuff! About the implementation, I see
everything seems to be in "canvas", why not just use DOM and HTML elements
directly?

~~~
matt1
Long term I'm going to implement a feature that let's you toggle between low
fidelity (sketched) and high fidelity. That would be next to impossible using
standard HTML elements. It winds up being a lot harder to implement this way
but you get a lot more flexibility too.

Plus using HTML elements would be boring :)

------
kree10
FTA: "...browsers can render mockups that are just as beautiful as those
created in an image editor"

This gets at something I never understood about the start-with-PSD school of
web design: if it's not possible to get the effect you want in a browser, what
is it doing in a mockup?

~~~
tptacek
It's possible to get most effects in a browser; you just have to use images.

~~~
bmj
Yep. When I did a brief stint at an ad agency, we had print designers doing
web layouts, which meant much of the design could not be rendered easily (or
at all) via HTML and CSS. That meant we spent a fair bit of time cutting up
PSDs and dumping the images into tables.

~~~
armandososa
Cutting images and using them creatively with CSS based designs is an art on
itself that will be lost very soon because of CSS3.

~~~
tomjen3
I wish, sadly they don't work in anything less than ie9, which isn't even out
yet and will never be ported to xp. It will be a decade before it will be in
general use, and by that time css3 will be as obsolete as ie6 is today.

------
sudonim
This is an old article, but definitely influenced my thinking in 2010. I don't
think that making a mockup in markup is practical on most teams... our process
is still something like:

Paper, Balsamiq, Photoshop, Code, Design Polish

That works pretty well, but I think getting things into code quicker helps to
think through flows and interactions.

~~~
dasil003
It's less than a year old, and it's an idea that has been slowly gaining
momentum for the past 5 years, but is still far from critical mass. This
article could have been written today and still be timely (although I will
admit that it's a bit of preaching to the choir for engineering-centric
startup folks).

------
retlehs
Andy Clarke's article on progressive enhancement from last year is also great.
Can't wait 24ways to start again in an few more days.

<http://24ways.org/2009/ignorance-is-bliss>

Elliot Jay Stocks also wrote a good one on side projects:
[http://24ways.org/2009/a-pet-project-is-for-life-not-just-
fo...](http://24ways.org/2009/a-pet-project-is-for-life-not-just-for-
christmas)

~~~
alabut
I can see Andy and Meagan coding first because their designs are very blocky
and square, but Elliot's work is actually quite creative and polished, so he's
good inspiration to try going with HTML first on a test project or two.

Although I still think it's fine to start with PS or Fireworks first as long
as it's for your own internal creativity and not something that clients or
coworkers see, because then they just expect it to be xeroxed straight to the
web exactly as is.

------
antidaily
Links to another 24ways post about using RGBA, which I wasn't especially
familiar with - worth checking out: <http://24ways.org/2009/working-with-rgba-
colour>

~~~
RossM
Discovering there's an alpha-version of rgb() has actually made my day. I
remember trying to emulate it (without knowing it) using opacity :/

------
cloudhead
No. Except if you want to end up with banal designs like the author
illustrates.

------
dasil003
Another way to go is:

Illustrator => Markup => CSS

The strength of this is that Illustrator is extremely efficient for working on
layouts at a high fidelity without worrying about pixels. You can and will try
out many more layouts in a shorter time than can be reasonably accomplished in
pure CSS. Then you jump straight to markup and avoid all the pixel wrangling
issues with Photoshop, and you can focus on the fine refinements in actual
CSS.

I stumbled upon this at my current startup because our creative director is
not a web designer. This obviously comes with a lot of costs, but it also
gives the designs an uncommon sensibility that lends a lot to the brand. As
long as everyone working on user-facing features is somewhat competent with
CSS then it works pretty well even if we spend some extra time shoehorning
stuff in. The ultimate brand differentiation is worth the cost.

------
aditya42
Articles like these always bring up the question of "Should designers know
CSS?" in my mind.

~~~
gnaritas
If you don't know CSS, you're not a web designer and have no business building
websites to begin with. You can't design properly for a medium which has
limitations you don't understand.

~~~
tolmasky
This is absolutely false and points to exactly what's wrong with certain
mentalities regarding web technologies.

I'm not sure at what point programmer's decided that everyone needs to conform
to their technologies, or why so many designers have meekly gone along with
it, but designers should not have to learn obscure things like HTML and CSS
simply to design. It is possible to know the limitations of a medium without
knowing the medium, and more importantly, they should not constrain their
creativity by these systems.

At Apple, when designers made mockups for desktop apps or iphone apps or
whatever, they don't do it by hand coding it in CoreGraphics or whatever
drawing technologies are being used by the programmer, they do it in
Macromedia Director or Photoshop or whatever it is they're comfortable with,
because it would be ridiculous otherwise.

The idea that the proper way to design is by typing text still astounds me
today.

If the argument however is that regardless of the way things _should_ be,
pragmatically in today's web world you _need_ to know CSS, then it points to a
failing of CSS/HTML/web tech/tools.

~~~
CPops
You shouldn't need to know CSS to be a great web-designer if you know the
strengths and weaknesses of the platform and the process for putting stuff
together. But thats just the problem - most web-designers who don't touch code
don't know what works well and what's easy or hard to put together.

~~~
tolmasky
Again, this is at best (if true), a failing of the underlying technologies,
not the designers. But I don't even believe this problem to be true quite
frankly. As a programmer, I want a designer to give me his vision, and then to
do my best to execute it (I am the implementor, that is my concern and my
responsibility). If it turns out that the design is just fundamentally
incompatible with the underlying technologies (and this should really be quite
rare on the web), then you can go back to him or her and say "x, y, and z just
won't work".

Whenever you start with the "limitations" and work your way "up to" the
result, you end up with a fundamentally less creative product. You can see
this very clearly with people who are primarily programmers: their vision is
completely clouded by implementation.

This is not philosophical idealism. I've seen this first hand. Our designers
at Apple on the iPhone had absolutely no idea about hard or easy on what is
arguably an incredibly more constrained platform than the web, and we made it
work. We'd get completely ridiculous designs and grumble about it, but sure
enough if you put the work in you could get it there. On occasion did we have
to compromise and go back to them? Of course: but that is part of the process.
I can guarantee that the result was better because we were forced to try
everything and only change it when it absolutely didn't work. And people are
surprised at Apple's great design: It's really quite simple, at Apple the
designers are _above_ the programmers, the way it should be. Its this
mentality that they should be making our lives easy that leads to second rate
products.

This of course displays the crux of the problem: design is about the end
product, not the difficulty of putting it together. What I'm hearing is less
"he doesn't understand the limitations", and more "ugh, this is going to be
hard to implement, can't you just give me a dumbed down easier version of
this". For years (as CSS struggled to keep up), we've heard things like "do we
really need rounded corners?" "is that gradient absolutely necessary". And
that's fine. I get it, there are deadlines, but we're no longer talking about
being a good designer in any traditional sense, we're talking about being a
good deadline-meeter (which don't get me wrong, can arguably be just as
important).

But let's not kid ourselves here: this is CS we're talking about, not
materials science. We're not dealing with absolute physical limitations. It's
putting pixels on a screen: most of the time that I hear programmers
complaining that designers don't understand the limitations, what they
actually mean is that they have to resort to "inelegant" code or hacks. This
of course points back to the false notion that the product is the code: it's
not! The product is the website. If you have to use an image because CSS won't
cut, _thats OK_. If you have to add hacks, _thats OK_. Perhaps someone looking
at your code will scoff, but this isn't for them, its for the person looking
at the actual website.

~~~
CPops
Very interesting, but if you take a minute to step back and think about it for
a bit, I think you would find that your experience at Apple doesn't represent
the typical designer/developer/business interaction. You are in fact talking
about an ideal situation for designers there. Regarding what I've read about
Apple's design process, Apple affords the resources to allow for multiple
mockups, design experimentation, and other practices that aren't as common in
startups or most of the working world. Please share more about how things work
there if you can.

However, when you're working with a startup for instance, as I have had the
opportunity to do for my previous few gigs, you're dealing with finite
financial resources as I'm sure you realize. Talking about limitations and how
long something takes to build and everything is the difference between
launching or not launching before the money runs out. When you're living in
that world, focusing on the limitations of the platform and finding ways to
solve problems with minimal resources and in a small amount of time is often
what the businesses primary problem is.

~~~
tolmasky
I recognize that these are important qualities in certain environments (such
as a startup). Similarly, with limited resources we may also find ourselves
skimping on the engineering end as well. However, I was simply responding to
the original comment which was:

    
    
      If you don't know CSS, you're not a web designer and have no business building websites to begin with. You can't design properly for a medium which has limitations you don't understand.
    

My response to this was simply that no, you can be a fantastic web designer
without knowing CSS, and perhaps even better. _Maybe_ your skills would not
translate well in certain environments, but to go from that to criticizing
said designer and saying he has no place on the web is frivolous.

~~~
prodigal_erik
The Apple design approach works if you're building a platform from the ground
up. If you're trying to produce reliable results on _someone else's_ platform,
you need to understand any hard limitations it has, because you aren't going
to be able to fix them. The closer an HTML+CSS document gets to rocket
science, the more environments in which it fails to render even usably, much
less the way you were hoping it might.

I don't think anyone would accept a print designer being completely ignorant
of what is feasible with ink on paper, especially if you are going to be using
mass-produced ink in one of various worn-in press someone else is operating.

------
jluxenberg
What's wrong with the text rendering in Photoshop? I can't tell the difference
between the Safari text and the PS4 text.

As a side note, why is Photoshop re-implementing text rendering? What's wrong
with the OS-provided implementation?

~~~
pavlov
Photoshop is a cross-platform app. They can't use Mac features if there's no
guarantee that they'll be able to provide a pixel-perfect matching rendering
on Windows, or vice versa.

This is a very practical concern because PSDs are regularly opened and edited
by users who may not be on the same platform as the original creator. (For
example, a designer creates a document on Windows, then sends it to a print
house where they need to open it on a Mac.)

------
Semiapies
I tried this once. It was rather a bit of effort, and it took some additional
work to come up with a style-sheet that looked sufficiently "mock-uppy" and
not meant to be taken as a final design.

I think the point - that an image editor is _not_ what you want to use - is
quite right, though. So far, Pencil and particularly Balsamiq have hit my
sweet-spot for sketching things out with a degree of structure.

------
primigenus
This philosophy of "designing in the browser" is what our product is based on.
We believe strongly that you're a better web designer if you know how to write
HTML and CSS and our prototyping tool's features are built for people like
that (eg. like us).

Here are two relevant blog posts we wrote while establishing our direction and
attitude about 6 months ago:

* [http://blog.quplo.com/2010/04/our-philosophy-design-in-the-b...](http://blog.quplo.com/2010/04/our-philosophy-design-in-the-browser/) \- what designing in the browser is, why we think it's important, and some other references to thought leaders talking about it.

* [http://blog.quplo.com/2010/04/why-were-not-building-yet-anot...](http://blog.quplo.com/2010/04/why-were-not-building-yet-another-gui-prototyping-tool/) \- why we think the world doesn't need yet another WYSIWYG, drag-and-drop "prototyping" tool.

Anyway, if you subscribe to the Mockup-in-Markup idea, check out our app,
Quplo. It's an online app where you write HTML and CSS and a little custom
markup language specifically made for prototypes (eg. <page>, <layout>, <var>
etc). You can import an existing website and redesign it quite easily;
everything you make is accessible from yourprototype.quplo.com (with or
without a password). If you like it, head to
<http://dev.quplo.com/freeupgrade> for a free beta-period upgrade to a higher
plan!

~~~
primigenus
Downvoted for irrelevancy/spam or because the product doesn't sound appealing?
I'm honestly interested, hope someone can comment!

------
southpolesteve
If you have the CSS/HTML skills, I love this approach.

IMO this is the way all design is going. Older designers better learn or pick
up some young talent to write their HTML/CSS

