7 ms·

Make Your Mockup in Markup

123 points by DeusExMachina 16y ago

antidaily 16y 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 http://24ways.org/2009/working-with-rgba-colour
- RossM 16y 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 16y 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 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-for-christmas http://24ways.org/2009/a-pet-project-is-for-life-not-just-fo...
- alabut 16y 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.
aditya42 16y ago
Articles like these always bring up the question of "Should designers know CSS?" in my mind.
- vog 16y 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 16y 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 16y 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.
  - tolmasky 16y 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.
kree10 16y 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 16y ago
  It's possible to get most effects in a browser; you just have to use images.
  - bmj 16y 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.
    - armandososa 16y ago
      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 16y ago
        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.
- CPops 16y 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.
sudonim 16y 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.
- dasil003 16y 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).
matt1 16y 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 http://www.jmockups.com [2] http://news.ycombinator.com/item?id=1829657 http://news.ycombinator.com/item?id=1829657
- davnola 16y ago
  Neat. Can you apply custom CSS?
  - matt1 16y ago
    Nope -- it's entirely visual for now. If you like to chat about it, drop me a line: matt@jmockups.com
- primigenus 16y 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?
  - matt1 16y 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 16y 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?
southpolesteve 16y 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
jamesjyu 16y 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 16y 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 16y 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.
  - jamesjyu 16y ago
    I agree about PS. Try fireworks, which is actually made for web design.
dasil003 16y 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.
primigenus 16y 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-browser/ 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-another-gui-prototyping-tool/ 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 http://dev.quplo.com/freeupgrade for a free beta-period upgrade to a higher plan!
- primigenus 16y ago
  Downvoted for irrelevancy/spam or because the product doesn't sound appealing? I'm honestly interested, hope someone can comment!
cloudhead 16y ago
No. Except if you want to end up with banal designs like the author illustrates.
jluxenberg 16y 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 16y 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 16y 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.

123 points by DeusExMachina 16y 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 http://24ways.org/2009/working-with-rgba-colour

RossM 16y 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 16y 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 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-for-christmas http://24ways.org/2009/a-pet-project-is-for-life-not-just-fo...

alabut 16y 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.

aditya42 16y ago

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

vog 16y 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 16y 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 16y 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.
- tolmasky 16y 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.

kree10 16y 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 16y ago
It's possible to get most effects in a browser; you just have to use images.
- bmj 16y 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.
  - armandososa 16y ago
    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 16y ago
      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.
CPops 16y 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.

sudonim 16y 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.

dasil003 16y 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).

matt1 16y 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 http://www.jmockups.com [2] http://news.ycombinator.com/item?id=1829657 http://news.ycombinator.com/item?id=1829657

davnola 16y ago
Neat. Can you apply custom CSS?
- matt1 16y ago
  Nope -- it's entirely visual for now. If you like to chat about it, drop me a line: matt@jmockups.com
primigenus 16y 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?
- matt1 16y 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 16y 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?

southpolesteve 16y 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

jamesjyu 16y 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 16y 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 16y 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.
- jamesjyu 16y ago
  I agree about PS. Try fireworks, which is actually made for web design.

dasil003 16y 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.

primigenus 16y 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-browser/ 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-another-gui-prototyping-tool/ 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 http://dev.quplo.com/freeupgrade for a free beta-period upgrade to a higher plan!

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

cloudhead 16y ago

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

jluxenberg 16y 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 16y 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 16y 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.