Make Your Mockup in Markup

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

by DeusExMachina • 16 years ago

123 48 16 years ago

antidaily• 16 years ago

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• 16 years ago

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

retlehs• 16 years ago

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

alabut• 16 years ago

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.

aditya422• 16 years ago

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

vog• 16 years ago

In the case of web designers, the answer is surely: Yes!

In other areas of design, I think the answer is "Yes", too, but not in the sense like "every programmer should know C++/Java", but more in the sense like "every programmer should know LISP".

CSS is not so much about the handcraft of designing, but more about separating design from content. This is a principle that should be applied to any kind of design, although to a different degree. For instance, the design of a poster is naturally more coupled with the contents than the design of a booklet or website with its contents.

gabrielroth• 16 years ago

I disagree on both the specific and the general points.

General: The idea of separating presentation from content is useful in some contexts (including much of the web) where you need to be able to pour the content into multiple different containers. In other contexts, particularly the design of physical objects, presentation and content should be tightly connected. (You use the example of a booklet, but a booklet should be designed in a way that's well adapted to its use, and its use will depend on its content. There's no one-size-fits-all ideal booklet design.)

Specific: Even if you do want to learn to better separate content from presentation, learning the box model, or the different kinds of positioning, won't help in any but the narrowest way. There's no reason to learn CSS unless you're designing for a context that renders CSS. CSS has too many intricacies and perversions to be valuable in the abstract.

gnaritas• 16 years ago

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.

tolmasky3• 16 years ago

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.

patio11• 16 years ago

I don't think I agree with you there. The basics of web design -- "you can have any shape as long as it is basically a rectangle", "fixed heights for content areas are kind of a bad idea", etc, are a heck of a lot easier than memorizing big books of the magic incantations you have to learn to get e.g. a lightbox with rounded corners over a semitransparent overlay centered in the middle of the screen. Don't worry about that, designer guy, I am very good at looking up magic incantations. You go be good at stuff that I don't know anything about and can never seem to learn, like what colors go well with pastel blue, what the emotion evoked by 42 point Helvetica is, and how to make stuff pretty.

foomarks• 16 years ago

Good print designers will know the possibilities and limitations of the medium they're working in. I think the same can be said about the screen medium.

tedkimble• 16 years ago

> You can't design properly for a medium which has limitations you don't understand.

Spot on. But it's not just understanding the limitations of a given medium, but its capacities as well.

For instance, the web's capacity to scroll: http://www.designmadeingermany.de/magazin/5/

aditya422• 16 years ago

I think there is a pretty big difference between knowing a medium, and knowing a medium's limitations. A is inclusive of B, but B doesn't need to be inclusive of A.

You might not know how to drive a car, but you know that a car can't fly.

kree10• 16 years ago

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• 16 years ago

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

bmj• 16 years ago

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.

CPops4• 16 years ago

Many "web designers" are great with Photoshop, but don't understand that a lot of special effects that are easy to make with Photoshop can be very time-consuming to pull off with HTML/CSS.

For the record, I think the ideal situation is to sketch out your design with pencil/paper and agree on a general layout before touching any code.

When dealing with clients though, unfortunately they may expect to see pixel-perfect photoshop mockups before agreeing that a design is what they want, which can complicate things.

nsfmc• 16 years ago

the point is that you don't limit yourself from the outset by designing in code (i.e. you don't impose implementation restrictions that can be resolved with images/js/svg/whatever). it's a double edged sword, though, i don't think the article is exactly spot on here, you need to sort of bottom-up & top-down the whole process.

The reason you mock up in psd (gross) or fireworks or a sketch book (yay!) or anywhere is because you can be purely expressive in an orthogonal capacity than you would be if you were implementing in code from the start.

You ignore issues like "oh, will this p be in a div or in a series of lis contained by... blërg" while those implementation details are valid to keep in mind, they're not entirely crucial to address when you're sketching which is really the key word here.

sudonim• 16 years ago

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.

dasil0032• 16 years ago

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

matt14• 16 years ago

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

davnola• 16 years ago

Neat. Can you apply custom CSS?

matt14• 16 years ago

Nope -- it's entirely visual for now. If you like to chat about it, drop me a line: matt@jmockups.com

primigenus3• 16 years ago

Great to see another innovative web-based prototyping tool, Matt! I tweeted about you and added your tool to the @quplo/prototyping list on twitter.

I'd love to write about jMockups in our blog, but I try to keep our posts limited to truly interesting apps. Could you summarise a few really unique features that only jMockups has, compared to competing wireframing and prototyping tools?

matt14• 16 years ago

I'll email you tomorrow when I have access to a computer. I'll be sure to check out your app too. Thanks --

ivanzhao• 16 years ago

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?

matt14• 16 years ago

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 :)

southpolesteve• 16 years ago

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

jamesjyu2• 16 years ago

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.

SoftwareMaven• 16 years ago

I resolve that problem by using a tool like Balsamiq or MockupScreens to create quick pencil sketches. That allows me to play with different meta-ideas before I start getting more real.

peng• 16 years ago

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.

jamesjyu2• 16 years ago

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

dasil0032• 16 years ago

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.

primigenus3• 16 years ago

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

primigenus3• 16 years ago

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

cloudhead• 16 years ago

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

jluxenberg• 16 years ago

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• 16 years ago

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• 16 years ago

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.

Make Your Mockup in Markup

Related Stories