Make Your Mockup in Markup

http://24ways.org/2009/make-your-mockup-in-markup

by justinl • 17 years ago

38 17 17 years ago

chrischen• 17 years ago

When doing work for others, I still think drawing up something in Photoshop is faster.

However when doing work for myself, I don't need to draw a mockup to show myself, I can simply picture what I want in my head. So I've tended to go straight to HTML for my own stuff, and go into Photoshop only to produce some graphical element. This way I also skip the painful part of transferring the pixel perfect photoshop design into rendered HTML/CSS.

dcurtis• 17 years ago

Wow, this is exactly how not to design.

Separating layout and content is a mistake. Content should be inextricably linked to how it is presented. This is what design means; it means taking content and displaying it in an understandable and pleasing way. Every piece of content desires to be presented differently.

This is exactly why CSS is such a horrible pile crap. It trains designers to separate content from presentation, and it's not designed for page layout. CSS is designed for forcing content into little boxes.

As long as people design for the web by separating content from presentation, we're never going to evolve into something better.

Just look at the end result of this article. It's a boring, lifeless "design" as a container for any type of content. It goes completely counter the very soul of Zeldman's quotation.

BerislavLopac• 17 years ago

I can only hope you're joking. Design, by itself, is pointless; content, by itself, is the point.

sp332• 17 years ago

Badly-presented content can be useless or misleading. Good design may not draw attention to itself when you're paying attention to the content, but it's still there. e.g. http://graysuite.blogspot.com/2009/06/consider-my-mind-blown...

sjs382• 17 years ago

And here you have described the difference between print design and web design. They each have constraints.

jrockway• 17 years ago

"Better" was the web before there was CSS. Black background, white text. Links. That was all anyone needed.

Now the web is the equivalent of a coffee-table book. Glossy and colorful, but expensive and lacking any substantial content.

Zarathu• 17 years ago

The problem with mocking something up in XML/HTML is that you're particularly limited because you're forced to think in boxes. Photoshop doesn't put that restraint on you.

jamesbritt• 17 years ago

FTFA: "In the past we’ve put up with Photoshop because it was vital to achieving our beloved rounded corners, drop shadows, outer glows, and gradients."

No. Drawing tools beat markup because it's usually faster to draw (and redraw) a layout than to work out the markup. More so if you are looking for a very particular arrangement.

Working right in HTML it's easy to get stuck in a design because you can't quite figure out how to make something look just so. You tend to use the markup that's most familiar.

One risk to using a graphics tool: if you're busy with the rounded corners, drop shadows, outer glows, and gradients you end up with a design that is near impossible to accurately achieve with markup. Better to treat Photoshop as a robust set of pencil and paper you can save to disk.

Raphael• 17 years ago

Flush it out good.

rwhitman• 17 years ago

I've worked in both PS and HTML for mockups.. in different team workflow enviros, sometimes out of necessity, sometimes as experiments, laziness etc.

Photoshop almost always produces more esthetically pleasing layouts. Its also a lot faster to knock out ideas. And if you have clients (not solo) its the only way to go.

When you work in HTML first its very easy to back yourself into a wall. You're constricted by boxes and CSS, and due to the difficulty making certain things work in CSS you're usually less apt to do something difficult, so you get very dry layouts.

Hacker News is a great example of a site that was designed in HTML haha. One giant column, no chrome, no styling of almost anything. Easy in CSS, hideous on the eyes...

Tyheam• 17 years ago

Hacker News is simple, sure. But "hideous on the eyes"?

ahlatimer• 17 years ago

I tend to agree that the design of HN isn't all that great. It's simple and usable, but it's not the easiest on the eyes. I've seen simple sites that were also beautiful. The design isn't what really matter on HN, though. The community is what's beautiful, so I can ignore the fairly uninspired design.

rbritton2• 17 years ago

Nearly every selector used in that mockup either: 1. Flat-out doesn't work in Internet Explorer; or 2. Requires certain hacks to align Internet Explorer's rendering with more compliant browsers. I can understand how it's much nicer to have a functional prototype, but I can't agree with it being worth the difference in the time invested.

Very, very few clients I've ever worked with use something other than Internet Explorer. It just doesn't happen, and I can't even count the times I've had to dumb down layouts because the requirements to overcome IE's limitations weren't worth the time investment.

tptacek• 17 years ago

You may be missing the point. 100% of a mockup done in Photoshop won't render in IE. It's a mockup.

rbritton2• 17 years ago

My point is that building a prototype that won't render correctly in IE (i.e., the browser likely in use by the commissioning client) as it's described in that article is counter-productive. If the client can't see it as it's intended, what's the point?

Building up the prototype to a point where it is universally compatible will have two end results:

1. The designer is building multiple functional pages and putting in all the labor required.

2. The designer is providing the client with a nearly fully-functional page/site prior to full payment being received.

innovate• 17 years ago

I've found pen and paper to be the most flexible way to go. There is also something to be said about clients reactions to quick and dirty layouts done on paper... its more collaborative and inspires innovation more so than specific tools like photoshop or markup layouts allow for.

Make Your Mockup in Markup

Related Stories