
Continuous Design and the NoPSD Movement - ABS
http://thoughtworks.github.io/p2/issue02/continuous-design.html
======
bhauer
Wow, that is a lot of text to describe-- _I think_ \--a process most of us
non-designer types who have to do nominal design at times have used for years
without assigning it a name. Namely, we tweak CSS (and markup as needed) until
the page looks good. We don't have an image-editing tool, nor do we want to
invest the time necessary to learn how to use one. By comparison, we know what
the CSS rules do. So we just design using CSS.

It's obvious that even some who call themselves "designers" would use the same
process now that CSS3 gives us so many graphic effects.

Calling this _Continuous Design_ or _NoPSD_ speaks more to a somewhat irksome
need to brand everything than it does to a new "movement."

~~~
robertnealan
I've often just seen it referred to as "designing in the browser." Simple
enough I'd think.

Unfortunately any designing that's dealt with clients knows it's much easier
to convince them of something they weren't previously aware of when it comes
off as some new movement/idea/trend/etc. It's why Apple brands everything they
introduce to their products, even if it's a technology thats been around for
years. Telling client, "I know most designers do PSD mockups first, but I just
design in the browser instead," likely wouldn't go over very well as they feel
they're getting less than they otherwise would, even if the missing part is
wasted time.

I personally havn't come across a client that'd go for pure designing in the
browser (yet). Instead I've generally just encouraged a hybrid approach where
the final PSD's are subject to changes and subtle tweaks once in development
so that the PSD's can be seen as a rough draft and not necessarily a pixel
perfect execution.

My most recent client was skeptical, but I think I managed to sell it with
something like: "Does a painter paint a painting of his painting before he
paints it?"

~~~
blindhippo
I suspect most clients will never be comfortable with "designing in the
browser" for exactly the reasons you state. It does come across as amateur.

There is another reason this wouldn't work for most projects. Many, many
projects are not just web based. They are part of an overall campaign that
includes assets for all different types of media, especially print. Designers
have to create assets for all potential media in the campaign, designing in
the browser would be duplicating work.

However, if all you're concerned with is a pump and dump web product, then
this approach may have merit.

~~~
redblacktree
What do you mean by "pump and dump web project?"

------
drawkbox
37 Signals also skip Photoshop in their process:
[http://37signals.com/svn/posts/1061-why-we-skip-
photoshop](http://37signals.com/svn/posts/1061-why-we-skip-photoshop) (2008)
so the NoPSD movement is not new really.

It depends on the skillset, if you only have a designer they will probably end
up with Photoshop and Illustrator comps, if you have a UX/UI person they can
probably work faster and make a better/real-world comp in html5/css3 etc that
is also truer to the medium. Everything looks so good in PSD/AI and then the
conversion leads to problems, better to comp in the final format nowadays.

~~~
ThomPete
the average UX person is not capable of doing HTML5/css3 in my experience.

------
camerondaigle
Designer here. The specific downsides addressed in the article, IMHO, can be a
problem of process, not tools. On my projects (I work at Hashrocket, RoR shop)
we put clients through an initial look & feel phase to nail down general
palette & styles, and move forward with PSDs that are approved prior to
HAML/SASS slicing and actual implementation.

However, we always (always always) treat the PSD step not as Final Design, but
as a high-fidelity communication tool - the next step after our wireframes
(which are as un-designed as possible) and story cards. When requirements
change, we loop back as far as necessary; for small changes, new stories and
in-view UI adjustments suffice; for more fundamental changes we'll go back to
the PSD.

Don't get me wrong - being able to maintain design quality in the face of
change is one of the most difficult aspects of being a designer on an agile
team (and getting design involved in the entire delivery process is absolutely
essential) but the tool you use to build initial design isn't necessarily
going to solve that challenge for you.

Personally I find it healthy to be able to concept layout & UI without making
stylesheet & DOM structure assumptions. Designing via code, for me, blurs my
focus - when I'm making decisions in Photoshop, I'm aware of the CSS that will
be required to replicate it, but I'm not having to actively execute on them.
Designing and coding take very different parts of the brain for me, if that
makes any sense. Try drawing a picture while listening to a podcast vs.
reading a book while listening to a podcast.

> “When it comes to products, user experience trumps pretty pictures. It’s not
> easy for most designers to do, because you have to rebel against everything
> you’ve been taught as a designer: fight the pretty pictures, fight the urge
> to tweak your drop shadows or find the perfect border-radius.”

This is more than a little patronizing. Delivering a polished, professional
design and being flexible to changing requirements aren't mutually exclusive
goals.

------
michaelpinto
The only way in the real world to kill to PSDs is to have an easy-to-use
WYSIWYG web design tool which would allow designers (and the non-technical) to
eliminate HTML production pros. This has existed for desktop publishing since
the 80s when programs like PageMaker eliminated the need for designers to work
with phototypesetters who entered everything by hand.

I suspect the reason that this hasn't happen is because HTML has always been
an evolving standard. So while you can use your copy of Quark from ten years
ago today, you wouldn't be advised to do that with a ten year old copy of
Dreamweaver if you want to make an HTML5 site.

Another reason Photoshop comps exist is because of clients who can't
comprehend the abstract. As someone who does IA I can tell you that time I've
had many clients (who are very intelligent) who just can't go from the
abstraction of quickly done wireframes that show navigation to what the final
site will be. So until you have clients like that (and maybe they're a
generation away) you'll need Photoshop to what that final site will look like.
And I say that knowing that Photoshop is really a hack given what the sites
can do.

~~~
joshmlewis
Instead of designers being dependent on WYSIWYG, let them learn HTML/CSS. It's
not hard, and is a valuable skill to have.

~~~
XorNot
Raw HTML/CSS is god awful - especially HTML, which has to be about the most
unfriendly possible syntax to type out on a keyboard.

Currently I'm loving Jade/Stylus to implement a fairly static website design,
and that's just building it with a simple script (with Live.JS to preview
changes).

~~~
talmand
So your complaint about HTML is simply about typing it? You've piqued my
curiosity, what's so horrible about the syntax in that you dislike typing it?

~~~
leephillips
This is about to turn into an argument about why designers need to learn vim.

~~~
talmand
That, hmmm, that actually sounds like fun.

------
rjvin
It's a good thought, but it's named wrong. Emphasis on 'psds vs not psds'
makes it seem like it's about the tools, but it's not: it's about the process.
Most of the problems stated in the article can be solved by simply not
outsourcing design and doing it in-house. After that, all you have to do is
learn how to iterate quickly. Designing for software products and designing
for marketing/advertising are very different processes because they have very
different needs. Software goes out and is updated as it lives and is used. Ad
campaigns and branding materials very rarely are. I think the big thing here
is that we have to recognize that, and not try to do all design in the same
way.

~~~
lstamour
This is similar to why NoSQL was a hard sell after the novelty wore off.
People have uses for SQL _and_ its alternatives. Similarly, NoPSD is a
fantastic, catchy term but of course we'll still want PSDs for graphic work.
The point of NoX movements isn't really "None" just "Much less" and as a
shorthand of expressing a way to do things differently.

------
bluthru
Those large, fixed next and previous arrows are horrible. Does the author
REALLY want me to consider skipping next or forward throughout the duration of
the article? Probably not. Put the buttons at the bottom where they belong,
similar to how Medium does it.

------
rwhitman
This design-in-markup concept has been around for a while (I like the new term
"NoPSD" though). I tend to flip both ways on this issue. For expediency's
sake, and often in terms of usability and performance, designing in CSS
definitely wins out.

The problem is that you end up with bland designs that tend to conform to the
whims of the technology rather than the type of creative elegance that a PSD
affords. Because photoshop is removed from the tech, a designer in Photoshop
can use their imagination a little bit and force pushing the boundaries of the
technology in ways that a developer typically wouldn't. Even when you are a
developer and aware of the tech, spinning the design in Photoshop (and even
better, further abstracted down to pencil sketches etc) just always gives more
creative and aesthetically pleasing results in my opinion.

------
spacecadet
I havent touched photoshop for interactive design in 5+ years.. First I
switched to Illustrator, because photoshop is for photography not graphics..
and then 2 years ago I switched to pure CSS/JS built on top of HTML. I will do
nice sketches of wireframes/ideas and then dive straight into the code. It's
much faster production time.

I have been trying to get fellow creatives to make this switch, but it falls
on dead ears, most of them cant write code and so they dont want to switch
process's..

Which makes me wonder, if they cant write HTML at a minimum, why are they
designing interactive?

~~~
neovive
Do you sketch on paper or in a wireframing tool?

~~~
spacecadet
Paper. Many of the designers I sometimes work with who do not know code,
design really bad web products..

------
talmand
The biggest problem with this is the apparently large number of designers out
there that design for the web but have no idea how web pages work. It's not
just that they don't know HTML or CSS coding, but that they don't how it works
in the browser. I've had numerous discussions with designers of why their
pretty design is simply not workable on a web page, not including the fact of
the rendering differences between browsers. They expect pixel perfect matching
of the mockup and almost always fail to understand why this is incredibly
difficult to do. Plus the fact it's a wasteful exercise to begin with. The
visitors are not going to care that the last sentence in the third paragraph
breaks differently between IE, Firefox, and the mockup.

Forget about trying to explain how a responsive site works and that, yes
indeed, they need to design several versions of the same page as the layout
will change as the media queries kick in. The main reason for doing so is to
prevent surprises when they look at the site on their phones. But since they
don't understand how it works they can't design for it anyway.

I've always felt, based on job interviews with prospective designers, that the
schools train backwards. They start with design concepts and at some point
they introduce web design almost as an afterthought that barely touches
coding. If a student wants to be a web designer they should learn how to code
HTML and CSS before getting heavy into design. That way they know what they're
designing for.

------
amouat
Does "spike out a mainframe in two weeks" mean anything? I assume it's meant
to be a designer parody of developer talk, but it just seems an odd phrase.

~~~
unwind
This page:
[http://scaledagileframework.com/spikes/](http://scaledagileframework.com/spikes/)
talks about the "spike" term (which I had never heard, but I've not worked
with Seriously Formal Agile folks, as far as I know).

It's summarized as "Spikes [...] are a special type of Story used to drive out
risk and uncertainty in a user story or other project facet".

It seems they "drive out risk" by focusing on analysis and research, rather
than implementing stuff. I think.

~~~
sanderjd
You don't have to be a "Seriously Formal Agile folk" for a "spike" to be a
useful concept. It just means that for a certain feature, you admit that you
really don't know how hard it is, so you give yourself some time to get a
better sense of it, usually by doing a quick and dirty version of the feature
that you may or may not end up using. I'm sure you've done the same thing for
years without needing a word for it, but hey, it can be useful to label
concepts.

------
jaggederest
The best designers I have worked with have been able to write textual
documentation about what they want to achieve, doodle in whatever medium they
prefer until they have visual concepts, and then work with me to turn those
concepts into functionality.

Delivering PSDs is worse than useless, and the results of a skilled UX/IX
designer working directly on the implementation are always better than either
of us would have come up with alone.

------
jscheel
Depending on what I'm working on, I'll either skip photoshop almost
completely, or I'll design almost every single thing in photoshop first. It's
really up to the task at had. That said, I've started using Sketch for quick
ui mockup work, and I'm really impressed. Granted, there's some serious
performance issues they need to work out, but it's been pretty good so far.

------
nijiko
Hardly a new practice or even "movement". Its just a way of development, a
process, I've been doing it since I was thirteen.

------
jgj
I've been designing and prototyping this way for a few years now.

I still keep Photoshop and Illustrator around to prototype look and feel or
specific design elements that can't be more readily achieved with CSS. Colors
and type can at times be faster to experiment with in one of those tools. But
I haven't sliced a PSD in years (except when developing another designer's
work).

The other benefit is that your design can be readily kept in source control,
in branches if need be, and if you have a good process in place and are
thoughtful in your markup conventions, can be swapped between almost
seamlessly.

Firebug/CDT are great for quickly tweaking a design...I imagine (hope?) the
next wave of web design software would be much like those, except with an
easier way to edit markup, work directly on files and integrate with source
control. I suppose you can get some analogous with a browser reload plugin
hooked to your text editor or filesystem.

~~~
ThomPete
I second this.

There is a few tools I would like to see developed to help this process, so I
still need illustrator or fireworks (haven't used PSD for a long time after
religiously using it for almost a decade) for a few things, especially when
sketching concepts, but other than that it's easier and faster to script it.

Now if someone would develop a proper animation tool then that would get me
excited. Something like how Flash was in the beginning. I know how to user
after effects and can kind of get around Quarts, but they are both every
cumbersome and not by default very well integrated into the design process.

~~~
rpicard
The animation software Bret Victor demos in his "Inventing on Principle" talk
looks pretty cool [1]. I don't know of anywhere the software from the talk is
available though.

[http://vimeo.com/36579366](http://vimeo.com/36579366)

~~~
ThomPete
Yeah I love this work and have been following him all the way back from when
he wrote Magic Inc.

I am not convinced about his particular way of doing animation though.

------
matb33
Webflow appears to be a tool that would help bridge the gap between Photoshop
and handcoding designs in HTML/CSS. Just finished watching their video where
they build a responsive website with it:
[https://vimeo.com/69534373](https://vimeo.com/69534373)

~~~
callmevlad
(Founder here) Yep, that's the plan :)

------
neovive
I was actually questioning my current design process yesterday while mocking
up a landing page in Fireworks. "Why not start the process in HTML using
CSS3?" I thought. However, beyond basic layouts, I find it hard to
programmatically mix and match colors, fonts during the creative process.

With that in mind, I always felt Photoshop was the wrong tool for the job,
hence my preference of Fireworks over Photoshop. Moving to a fully code-based
workflow would probably work better with some additional tooling in place.

I've been looking at Sketch and Edge Reflow. Any other suggestions?

~~~
askew
Why not simply define the mood (or theme) of the site in FW - perhaps design
some of the key elements. Once you're happy with that, you move into the
browser and get to grips with the structure of your layout.

------
drivingmenuts
I think I stopped using PSDs about a year after I learned CSS. I tend to
design sites directly in HTML and use PS or FW to create various elements.

Now that I use Compass/Sass, it's even faster.

------
adamlj
I too have replaced Photoshop with designing direct with CSS3 and using and
online editor like pixlr.com/editor/ when thats needed. Works great!

------
eterm
I wish this were more readable, the "grey on light grey" is nice but it seems
that each day the foreground grey gets lighter and lighter...

~~~
nijiko
Their line-height needs to be higher just for starters...

------
rdudekul
Though continuous design makes sense on paper, I am skeptical about the
practicality of it. It was a big jump for developers to move to TDD &
continuous delivery practices. I think unless a set of designer friendly tools
and practices emerge, NoPSD requires a bigger cognitive "jump".

I for one am rooting this movement goes forward, since I like most did suffer
the PSD to HTML cycle overhead.

~~~
rglover
Highly practical.

More than just making the design process much more conducive to iteration, you
also have a designer doing the implementation. This is great, because it means
that you no longer have to explain that a certain design treatment can't be
done in code. Moreover, if there's a problem with the experience of using a
certain element, the designer can change it on the fly with little overhead.

------
jongalloway2
Happy to see a catchy name for this. Been trying to push it for a long time:
[http://weblogs.asp.net/jgalloway/archive/2009/10/15/the-
desi...](http://weblogs.asp.net/jgalloway/archive/2009/10/15/the-designer-
developer-workflow-crisis-that-everyone-s-ignoring.aspx)

------
seltzered_
the closest 'starting piece' of the noPSD movement I've seen was this one at
quora (2011): [http://www.quora.com/Joel-Lewenstein/Joels-Posts/Life-
Withou...](http://www.quora.com/Joel-Lewenstein/Joels-Posts/Life-Without-
Photoshop)

I like avoiding photoshop for web design, but I've usually only seemed it
championed by webapp businesses so far, not so much at places oriented towards
more 'brochure-ish' sites - like another commenter said, even younger folks
who arent used to tech can't interpret a wireframe as design progress. Also,
similar to wasting time on a PSD that doesn't make interactive sense, I've
fallen into a personal trap when designing code-first to stare too much at
different SASS frameworks.

------
seivan
I do this. Or at least I started now. I only use Pixelmator for making icons
and smaller images for in-app icons. But most of the time, I style using code
on iOS. The CPU can take it these days.

Unless you're doing patterns like linen, cloth and leather crap. Which... I
don't even like.

------
MartinCron
I would like to find a version of this manifesto that might be a little more
approachable for some traditionally minded design folks that I work with. I
guess I'll just have to write it myself.

------
haikavanian
You would think someone with such strong opinions about Design would have
bothered to actually Design their own site instead of being pretty blatantly
"inspired" by Medium.com.

------
dllthomas
The jab at HURD seems unnecessary and potentially distracting.

------
davidrudder
Why the hating on the HURD?

------
rfnslyr
What is wrong with designing in Photoshop? I use PSD's as sort of a visual
playground to experiment with new styles and prototypes of website assets
(buttons/navbars/other reusable assets).

Getting real sick of the anti designers, simply because they can't design.
Tired of all the new super easy flat UI's, and bootstraps. Put as much work
into your design as you do the rest of your product.

I can't stand designing on the fly. A wireframe is fine, sure, but I prefer to
lay things out at a basic level in Photoshop purely for dimensions. I know
exactly where things are supposed to go, how spaced apart they are, etc. Then
when I code it, I know whether I'm doing it right or wrong rather than
fiddling with values to and fro and constantly judging whether X or Y is off.

Design assets.

Layout wireframe.

Code wireframe.

Import assets.

~~~
ThomPete
I can design, but I have to say that I do not believe the future belongs to
PhotoShop.

I think you illustrate one of the problems with the "PSD" approach. You seem
to think about design in this medium as a composition. But IMHO it's only a
composition the same way a game is a composition. I.e. always in flux.

And it's a mistake to claim that just because people do flat ui they don't put
enough time into the design.

~~~
rfnslyr
I only mention flat UI and bootstrap because 90% of these 'startups' I see are
god awful poorly laid out defaults.

I miss actual design on the web, something fitting to whatever theme or
persona the website hopes to engage the user in.

~~~
ThomPete
A business is very rarely build on design the way you and I probably think
about good design.

I appreciate pixel-pushing as much as anyone else, but I also have been in the
design world long enough to see that for most startups it isn't and shouldn't
be their first priority. Especially since most of them are going out of
business in less than a year.

I always try to look at refined design as a way to optimize a product. Of
course some basics are needed, but that's why we have design patterns.

~~~
rfnslyr
I like to treat all aspects of launching a product with equal perfectionism. I
don't believe one aspect of launch should be shunned. Yes they may go down in
a year, but working on a pristine design doesn't take that much time and makes
it that much better.

Of course it isn't high up on priority, but it is a task that should be taken
seriously and completed eventually. Right now, it's usually an after thought
which to me looks like neglect.

~~~
ThomPete
That's fine if you have an infinite amount of money. To almost everyone else,
priority is the norm.

~~~
rfnslyr
Whipping up a template or general theme in Photoshop now takes "infinite
money". Enjoy your bootstrap, I'll just leave your site.

~~~
ThomPete
Enjoy your strawman, I'll just leave this conversation.

~~~
rfnslyr
Enjoy your departure.

