20 ms·

Continuous Design and the NoPSD Movement

108 points by ABS 13y ago

rdudekul 13y ago
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 13y ago
  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.
neovive 13y ago
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?
- talmand 13y ago
  I've been using Adobe Brackets for a while now, called Edge Code in Adobe's CC suite, and find it quite helpful in building out a page from scratch. It feeds your changes to a Chrome window in real-time with visual feedback so it's easy to play with fonts, colors, and other CSS-based stuff. Has a decent selection of user-created extensions as well. It has its quirks and constantly being updated so don't always expect commercial-quality right away on new features.
- jeffasinger 13y ago
  A CSS preprocessor might help you out a lot regarding quickly changing colors and fonts across several portions of a site.
- askew 13y ago
  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.
jaggederest 13y ago
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.
rjvin 13y ago
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 13y ago
  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.
eterm 13y ago
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 13y ago
  Their line-height needs to be higher just for starters...
spacecadet 13y ago
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 13y ago
  Do you sketch on paper or in a wireframing tool?
  - spacecadet 13y ago
    Paper. Many of the designers I sometimes work with who do not know code, design really bad web products..
- uberPhil 13y ago
  I always found this interesting. For the designers that simply cannot write HTML code to reflect the desired design. What tools are they using to get the job done? Are they just taking existing templates and "hacking" it together?
drawkbox 13y ago
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 13y ago
  the average UX person is not capable of doing HTML5/css3 in my experience.
jgj 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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.
orokusaki 13y ago
One of the biggest problems with full design first (i.e., PSD, Fireworks, etc.) is that you don't really have content. How many of you here have experienced the, "I like that little side bar they have - let's do something like that.", or, "I really like how they have a menu here and a top on there." syndrome, followed by shoveling content into that side bar or stuffing random links into that top menu when the concept is actually coded, because content was an afterthought. It's very exciting to see this being addressed in a formal way. The movement toward code-based design has been growing in strength since (I'd say) about 2010, and is now stronger than ever, thanks to Bootstrap, Foundation, et al.
nijiko 13y ago
Hardly a new practice or even "movement". Its just a way of development, a process, I've been doing it since I was thirteen.
michaelpinto 13y ago
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.
- talmand 13y ago
  We've had WYSIWYG web editors for years. It's just another tool for someone who doesn't know what they're doing to create something they don't understand how it works. This is fine for people who have a specific need but for others it is not a solution. Why couldn't you make an HTML5 site with a ten-year-old copy of Dreamweaver? Sure you won't get fancy stuff like code highlighting and suggestions but you could make a HTML5 site with notepad if one really wanted to. I agree about the clients angle. Clients want to see the images of what the end of the project will look like. Until that changes, mockups will always be with us.
  - jiggy2011 13y ago
    10 year old dreamweaver won't know about CSS3 or anything like that and will produce code with nested tables and whatnot that is optimized for IE6. Sure, you could just use it as a text editor but at that point there are better editors you could choose.
    - 13y ago
jscheel 13y ago
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.
bluthru 13y ago
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.
- deleted 13y ago
  [deleted]
adamlj 13y ago
I too have replaced Photoshop with designing direct with CSS3 and using and online editor like pixlr.com/editor/ when thats needed. Works great!
amouat 13y ago
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.
- njharman 13y ago
  Spike has specific meaning in agile terminology. Two weeks is more than I'd allocate to a spike, but needs vary and agile's biggest point is adaptability. "Mainframe" I assume refers to UI element and not Big Iron. Seems non-parody, normal enough to me. Although, I did not read it in context.
  - amouat 13y ago
    Interesting. I've never run across the term spike before. I was assuming mainframe refers to "big iron". Thanks to you and unwind for the explanation.
- unwind 13y ago
  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.
  - rmrfrmrf 13y ago
    I prefer this definition: http://www.youtube.com/watch?v=mIq9jFdEfZo&t=2m0s http://www.youtube.com/watch?v=mIq9jFdEfZo&t=2m0s
  - sanderjd 13y ago
    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.
seivan 13y ago
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.
bhauer 13y ago
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."
- threeseed 13y ago
  This is Thoughtworks we are talking about. They make money from "consulting" on agile projects. Which means every ridiculous slogan they come up with is another way for them to paint companies as being stuck in the past and in need of some Thoughtworks magic.
  - ABS 13y ago
    correction: Thoughtworks makes the majority of their money by delivering software for their clients. Not a small difference. I'm certainly biased since I work there but the above is a fact :-)
    - malandrew 13y ago
      I'm also the first person to jump on the "ridicule corporate sloganisms" bandwagon (and I'll jump on this one too since it's pretty absurd), but TW, unlike most consultancies I've had the (dis)pleasure to work with is actually really good at delivering software projects to clients. In a world where most corporate software projects are a complete failure, TW would be one of the few companies that knows how to deal with difficult ass-backwards clients and still deliver software that does was the client wanted it to do (instead of what they asked for). FWIW, I've never worked there, but I have worked for a company that has hired them and I've worked with numerous TW employees after they've left Thoughtworks to pursue other career paths.
rfnslyr 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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.
talmand 13y ago
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.
camerondaigle 13y ago
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.
rwhitman 13y ago
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.
seltzered_ 13y ago
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-Without-Photoshop http://www.quora.com/Joel-Lewenstein/Joels-Posts/Life-Withou... 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.
jongalloway2 13y ago
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-designer-developer-workflow-crisis-that-everyone-s-ignoring.aspx http://weblogs.asp.net/jgalloway/archive/2009/10/15/the-desi...
MartinCron 13y ago
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 13y ago
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 13y ago
The jab at HURD seems unnecessary and potentially distracting.
drivingmenuts 13y ago
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.
davidrudder 13y ago
Why the hating on the HURD?
matb33 13y ago
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 13y ago
  (Founder here) Yep, that's the plan :)
deleted 13y ago
[deleted]

108 points by ABS 13y ago

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 13y ago
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.

neovive 13y ago

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?

talmand 13y ago
I've been using Adobe Brackets for a while now, called Edge Code in Adobe's CC suite, and find it quite helpful in building out a page from scratch. It feeds your changes to a Chrome window in real-time with visual feedback so it's easy to play with fonts, colors, and other CSS-based stuff. Has a decent selection of user-created extensions as well. It has its quirks and constantly being updated so don't always expect commercial-quality right away on new features.
jeffasinger 13y ago
A CSS preprocessor might help you out a lot regarding quickly changing colors and fonts across several portions of a site.
askew 13y ago
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.

jaggederest 13y ago

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.

rjvin 13y ago

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 13y ago
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.

eterm 13y ago

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 13y ago
Their line-height needs to be higher just for starters...

spacecadet 13y ago

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 13y ago
Do you sketch on paper or in a wireframing tool?
- spacecadet 13y ago
  Paper. Many of the designers I sometimes work with who do not know code, design really bad web products..
uberPhil 13y ago
I always found this interesting. For the designers that simply cannot write HTML code to reflect the desired design. What tools are they using to get the job done? Are they just taking existing templates and "hacking" it together?

drawkbox 13y ago

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 13y ago
the average UX person is not capable of doing HTML5/css3 in my experience.

jgj 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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.

orokusaki 13y ago

One of the biggest problems with full design first (i.e., PSD, Fireworks, etc.) is that you don't really have content. How many of you here have experienced the, "I like that little side bar they have - let's do something like that.", or, "I really like how they have a menu here and a top on there." syndrome, followed by shoveling content into that side bar or stuffing random links into that top menu when the concept is actually coded, because content was an afterthought. It's very exciting to see this being addressed in a formal way. The movement toward code-based design has been growing in strength since (I'd say) about 2010, and is now stronger than ever, thanks to Bootstrap, Foundation, et al.

nijiko 13y ago

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

michaelpinto 13y ago

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.

talmand 13y ago
We've had WYSIWYG web editors for years. It's just another tool for someone who doesn't know what they're doing to create something they don't understand how it works. This is fine for people who have a specific need but for others it is not a solution. Why couldn't you make an HTML5 site with a ten-year-old copy of Dreamweaver? Sure you won't get fancy stuff like code highlighting and suggestions but you could make a HTML5 site with notepad if one really wanted to. I agree about the clients angle. Clients want to see the images of what the end of the project will look like. Until that changes, mockups will always be with us.
- jiggy2011 13y ago
  10 year old dreamweaver won't know about CSS3 or anything like that and will produce code with nested tables and whatnot that is optimized for IE6. Sure, you could just use it as a text editor but at that point there are better editors you could choose.
  - 13y ago

jscheel 13y ago

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.

bluthru 13y ago

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.

deleted 13y ago
[deleted]

adamlj 13y ago

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

amouat 13y ago

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.

njharman 13y ago
Spike has specific meaning in agile terminology. Two weeks is more than I'd allocate to a spike, but needs vary and agile's biggest point is adaptability. "Mainframe" I assume refers to UI element and not Big Iron. Seems non-parody, normal enough to me. Although, I did not read it in context.
- amouat 13y ago
  Interesting. I've never run across the term spike before. I was assuming mainframe refers to "big iron". Thanks to you and unwind for the explanation.
unwind 13y ago
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.
- rmrfrmrf 13y ago
  I prefer this definition: http://www.youtube.com/watch?v=mIq9jFdEfZo&t=2m0s http://www.youtube.com/watch?v=mIq9jFdEfZo&t=2m0s
- sanderjd 13y ago
  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.

seivan 13y ago

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.

bhauer 13y ago

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

threeseed 13y ago
This is Thoughtworks we are talking about. They make money from "consulting" on agile projects. Which means every ridiculous slogan they come up with is another way for them to paint companies as being stuck in the past and in need of some Thoughtworks magic.
- ABS 13y ago
  correction: Thoughtworks makes the majority of their money by delivering software for their clients. Not a small difference. I'm certainly biased since I work there but the above is a fact :-)
  - malandrew 13y ago
    I'm also the first person to jump on the "ridicule corporate sloganisms" bandwagon (and I'll jump on this one too since it's pretty absurd), but TW, unlike most consultancies I've had the (dis)pleasure to work with is actually really good at delivering software projects to clients. In a world where most corporate software projects are a complete failure, TW would be one of the few companies that knows how to deal with difficult ass-backwards clients and still deliver software that does was the client wanted it to do (instead of what they asked for). FWIW, I've never worked there, but I have worked for a company that has hired them and I've worked with numerous TW employees after they've left Thoughtworks to pursue other career paths.

rfnslyr 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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.

talmand 13y ago

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.

camerondaigle 13y ago

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.

rwhitman 13y ago

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.

seltzered_ 13y ago

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-Without-Photoshop http://www.quora.com/Joel-Lewenstein/Joels-Posts/Life-Withou... 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.

jongalloway2 13y ago

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-designer-developer-workflow-crisis-that-everyone-s-ignoring.aspx http://weblogs.asp.net/jgalloway/archive/2009/10/15/the-desi...

MartinCron 13y ago

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 13y ago

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 13y ago

The jab at HURD seems unnecessary and potentially distracting.

drivingmenuts 13y ago

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.

davidrudder 13y ago

Why the hating on the HURD?

matb33 13y ago

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 13y ago
(Founder here) Yep, that's the plan :)

deleted 13y ago

[deleted]