Why not use Sketch?
I agree that Photoshop is outdated and doesn't fit the workflow of developing interactive products. What I disagree with is the jumping right into html/css. Quickly iterating on an idea or a feature in higher fidelity comps has always been amazingly important to me. Designers are stuck in details, we love interactions, typography, colors and shapes. In order to get the right combinations it takes time. We have to go down a thousand dead ends to end up at the right solution. Can that be done in code? Yes of course. Is it as fast as me dragging around an art board and trying 30 different iterations? No. Increasingly we're losing the basic design process and fundamentals of design because of the differing opinions of process. Its fine to design in code if that works for you and yes photoshop is antiquated and clunky. But I don't think one shoe fits all (and it doesn't seem like you do either). As designers we need to be thoughtful about our decisions and personally being in code doesn't help me do that.
Just a thought.
EDIT: (Posted 2008) was added to the title after my comment.
Agree here 100%
Sure, designing in a browser works for some projects/products, but it's definitely not a process that works in all situations as, you're also alluding to.
Similar to how you need to have the design/code knowledge to know the best way to implement something, to solve a specific problem, you also need to understand the best process for implementing a solution. In some cases it might be designing directly in the browser, other times it might be iterating in photoshop/sketch first then transitioning to code.
Process is a tool designers/developers need to understand just as much as any technical skill.
Probably, when you post this comment there wasn't any statement of
(posted 2008). So, there wasn't single bit of Sketch then. I agree with the rest, though. Jumping directly to html/css is usually like start a building without any blueprint.
Well said. I personally like to design in code and modify as I go along. My CSS skills have gotten very sharp as I am able to move elements around the page seamlessly when changing the design.
Exactly my point, man. I can design high-fidelity screens at the speed of thought in Sketch. And also:
What about the code quality? Designing in code adds a new level of complexity: writing decent code that can be used for production. This means that aside from the design—which needs a lot of thinking already—you need to think about writing good, reusable code and make sure it matches the front-end architecture, conventions, etc.
Even if you do that AFTER the "design", you then need to refactor the whole thing (very time consuming in my experience). And…
What about mobile? If your design is meant to be responsive—and that's most of the cases lately— , how do you design for mobile? You need to start using media queries, move things around and think about all what I mentioned early.
If you just do your job as a designer and design, the best of your time is used.
I totally agree with this.
It's easy to whip out a live mockup with some quick coding, but I feel like you're either going quickly enough to iterate on your ideas in a timely manner, OR you're writing neat, maintainable code that will actually make sense weeks from now or when someone else needs to add onto it.
If you're speeding through messy CSS to iterate a bunch of design changes, wouldn't you just have to go back and do tons of cleanup later?
Photoshop is awkward. You can’t help but know your way around Photoshop after working in it for 10 years, but I still find it awkward to get simple things done. Working with a pen feels so much more natural to me than going back to the toolbar over and over. A pen can draw anything, but in Photoshop you need to use the text tool to type, the shape tool to draw a shape, the menu bar to adjust this or that, etc.
He's been using Ps for 10 years and doesn't know keyboard shortcuts?
RIGHT?! Wtf is he doing? Also, you are telling me, you can code a new layout before I can hotkey M, draw a few boxes and hit the alignment buttons? GTFOH.
I completely disagree and I think it's a terrible advice. If anything should be avoided for the sake of productivity is sketching in paper. Ps is a sheet of paper with steroids:
You can copy hundreds of items with a single action and modified different states of individual items. Good luck mocking that on paper in less than 10 minutes.
You can play with real proportions, alignment and distributions in matter of seconds.
You can test your mocks on device (via Silkscreen) and see how they look like.
You can test with real iconography, color composition, typography etc. Not sure what this has to be left to the end while from the very beginning can give a sense of what feels right.
You can even export certain assets and play with Origami to have a sense of how motion and transition will be applied.
"If anything should be avoided for the sake of productivity is sketching in paper."
On paper you can argue a flow, a transition, an architecture at about the same speed as you can articulate it verbally. Preferably whilst you are articulating it verbally. Preferably while you ate defending it verbally. A shit idea is a shit idea - this should be identified and thrown out long before you have tested what it looks like on your phone.
Please don't advise the kids on here that the computer is the starting point.
This should probably have a (2008) tag added to the title.
This really threw me off too. I'll add it to the title.
Remember this getting slammed in 2008, the comments were more value than the article.
Wrote on 2008, what??
Designing directly on the browser is harder but forces designers to understand how the browser works, this is why sometimes we read "Why designers should code?"
It's plenty of designers that are masters on their designing tool but they don't know nothing about the browser...
I like that this article is "Why we skip Photoshop" and not "Why you need to skip Photoshop." I like Photoshop, and it works well for me, so I disagree with some of the points. For example, "when you use Photoshop you can't help but pay attention to details." For me, that's a benefit. I lke being able to focus on alignment and colors and details. I like making things that look good for the sake of looking good. (Especially since attractive things work better.) That's what breathes life into me as a designer. I would rather take my time on details than rush into HTML/CSS.
I hate that feeling of picturing a certain color/typography palette in my head, describing it the best I can without a Photoshop mockup, then it gets jumbled up by passing through many hands (collaboration) and when it gets back to me, it's nothing like what I imagined but it's time to ship so off it goes and I can't take any honest pride in it. It's a tad bit demoralizing especially if it happens regularly.
I also feel like HTML/CSS also has a certain grain that encourages you to do things in ways you've seen before. In Photoshop (or Sketch or whatever) you can experiment to your heart's content without worrying about how it's going to work logistically. Not to say that designers shouldn't know how HTML/CSS works, but through experimentation that's purely graphical, you can think of some wild way to display a dropdown that doesn't look native but works well for the brand of the website & the users of the website you're designing for. Then if you know HTML/CSS you can scale it back so it is actually workable through HTML/CSS.
HTML/CSS are still in development too, so it's not as if our HTML/CSS toolkit is final. If you think of a new convention that's not currently the most elegant in HTML/CSS language but works well from a user experience standpoint, maybe in the future that will get worked into the spec.
Photoshop and HTML/CSS are both tools that are still evolving. I find it's better for me (again, for me) to try to use them to do the job that I want to do without focusing on their current nature. I know text in Photoshop is awkward (point #7 in the article) but Adobe's working on it, supposedly. The tools will evolve the way we use them even if it's awkward at first. border-radius wasn't always a thing, remember? We had to ask for it.
I think the constraints of HTML/CSS on design forces a limited sense of creativity and ultimately gives leeway to site-builders and things like The Grid because everything starts looking similar and easy to replicate.
And it's not like any of the crazy designs made in Photoshop are totally out of reach. There's always plenty of craziness going on over at CodePen...
[Written before realizing the article is from 2008]
I've now heard this sentiment from several CEOs and top level management and though I agree with the sentiment (shipping early and validating often) I can't disagree more.
1) A designer can, through a myriad of tools, validate a Photoshop (or Sketch) file. Invision. Pixate. Framer. All are faster and more flexible than code.
2) Laying down code is, at least for me and I think for many, a different mental task than designing. I have different concerns (scalability and durability v. empathy and creativity) which, when conflated, often lead to the suffering of both.
3) Jason Fried, and the other leaders that seem to espouse this sentiment, are rarely (ever?) UI designers. I appreciate the sentiment, but I find that prescriptive (and somewhat pejorative) claims like this of a design tool or process when they themselves don't do the work to be fundamentally naive – designers should have the freedom to use the tools they think are best for solving a particular design challenge.
(Also, Basecamp may have had a relevant design 5 years ago, it doesn't now – the UX and interaction patterns are awful in my opinion.)
Sounds like they threw the baby out with the bathwater instead of fixing the individual "issues" they have with Photoshop.
I understand it's 6 years old, but this still reads as pretty bad advice. Anyone worth their salt in a design program can work just as fast as HTML, and the sharing/collaborative aspect is moot with virtual meetings.
A personal opinion, but I feel like the 37signals guys proudly buck industry trends solely on the back of the success of a very simple product. A dangerous mouthpiece for new designers to follow.
I remember thinking this was interesting back in 2008, but it's much easier and faster to experiment with ideas in Photoshop/Sketch than it is in html/css.
I also feel that photoshop uses a different part of my brain. Writing html/css/jquery logic is a much more left brain, analytical activity. Pushing pixels around in Photoshop feels much more right brain.
So it was an interesting thought experiment, but I feel like you can play around and get to a good idea faster in Sketch and Photoshop.
I also feel that photoshop uses a different part of my brain.
Haha I'm pretty impressed that you can actually feel which part of your brain you're actively using at a given time.
Yeah, I remember that article. Started prototyping ui using only html about 4-5 years ago, never looked back after.
To say don't use Photoshop (or your favorite editing program) is going a bit overboard in my opinion. Let me tell you why.
HTML/CSS, while yes, has the ability to make something that's "real" and clickable, is also slower to work and experiment with, and doesn't easily let you be creative in terms of unconventional layouts and designs. A lot of creativity, at least for me, comes from rapid experimentation and this is what Photoshop allows me to do that no other program has really been able replicate (yes, even Sketch, because you're limited in your options when it comes to working with raster artwork).
So yes, HTML and CSS is great, but for design, it's not the holy grail in my opinion. There are definitely cases where HTML and CSS would be more useful to work with, but for most design work, Photoshop (and Sketch, or equivalent) is still the best option.
You shouldn't base your design around the tool you use, you should choose your tool, based on the design constrains you need.
Sometimes you should use Sketch. Another time you need Photoshop. And another time it’s better to make it in code.
"We" being the operative word. While I agree with the author, I can see why this wouldn't apply to every designer out there.
That moment when this isn't a Photoshop vs. Sketch article, but still it becomes one. xD
Depending on the site, perhaps. For a big-budget marketing site to launch a product with lots of stakeholders and assets... in a large company... not really practical to skip Photoshop.
And I agree with the other comments about 10 years of Photoshop experience and still not knowing how to use it powerfully (keyboard, shortcuts, actions, layer comps, smart objects, etc.).
In context of the app "Basecamp" I can understand that designing for an application doesn't really require deep design exploration in a tool like Photoshop.
As a user experience designer I tend to gravitate towards Photoshop because I'm designing new experiences for new clients for each and every new project. Without defined guidelines in place, (like Basecamp already has) I need to explore my options.
The design doesn't need to be high fidelity by any means but I think it all boils down to preference.
Use whatever method or tool that works for you and quit writing about the pitfalls of any of them.
I find that this works for App UI design, and for similar work...
but the minute you are working with a large Marketing dept for a client, this often goes out the window.
it's one of those 'pretty to think so' statements.
then again, it's like they said ...it works for them... your mileage may vary...