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.
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.
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.
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 :)
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?
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.
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?
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?
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
It’s better for the designer to know the strengths and weaknesses of the medium rather than the technical nitty-gritty.
As in, random variations in styling through jQuery is fine, but multiple, pinned backgrounds for IE6 is bad. (The designers I work with have it backwards.)
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.
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.
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.
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.
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.
Well, I agree with you. It is physically possible to be a fantastic web designer without knowing how to write any sort of code. But I have found that this combination of talents is extremely rare in practice. Generally a non-coding web-designer is a good graphic designer and good with Photoshop, but is actually a very mediocre web-designer.
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.
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.
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.
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.
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.)
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.
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:
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!
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.