ARWHD

Yeah, we get it, it’s 2014. Why are you still using expensive raster software to design things with fixed widths? Isn’t the web supposed to be fluid and responsive?

Those are pretty valid questions. I keep finding that the more I can separate design and development of a project the easier it can become. Keeping Photoshop or an image editor (I’ve heard great things about Sketch) in my workflow keeps things running smoothly. Personally, it boils down to four major reasons.

1. If your goal is to make a website and you can make major & critical design decisions upfront without getting into text editor, you’ll write code faster and more effectively and not turn it into a playground.

2. If you’re going to use Photoshop to make the assets you’re going include on your website, why not start there?

3. On top of that, there’s the whole “see the statue inside the marble” thing. Photoshop cannot/will not cover all of your design and user experience decisions. If you can have a visual to work from, you have a strong guide as you make those other decisions in the browser.

4. I’m far less willing to sacrifice code once it’s written than I am elements in Photoshop I can tweak and drag around.

Ughhh Adobe

When the Creative Cloud launched, there was quite a bit of controversy switching their purchasing model to subscription-based pricing. Then there was the hacking back in October. So I can understand any hostility toward using Adobe, it’s 100% understandable.

But, Adobe has been working to amend some of those issues, with free credit checking and a complimentary month of service. Those affected have been notified/warned/alerted. I don’t think they’ve responded terribly. Adobe is just a really big company that’s easy to hate in a crowd or public forum like Twitter.

Photoshop, despite how much we hate on Adobe, has gotten amazing. It finally feels like how designing a website in Photoshop should feel like.

For example, Typekit Desktop syncing is my favorite feature. Most of the fonts you’d want to use on your site, you can add into your mockup through Creative Cloud. You can use that feature in any of the Adobe Creative Cloud Suite. On top of that, you have more choices in terms of anti-aliasing and sub-pixel rendering for your type.

Plus, there are finally rounded corners in Photoshop and you can edit the border radius of a rounded rectangle to make nice buttons and other UI elements. There’s a Generator tool that will let you generate assets from layers.

What’s more, there are some amazing plugins that extend Photoshop further; here’re a few of my favorites:

• WebZap
• SubtlePatterns
• Adobe Kuler
• GuideGuide
• DevRocket

Long story short? Photoshop is finally a lot nicer to work in.

Mockups

There’s a push against working with high fidelity mockups for web design and a push toward designing in abstraction. There are a lot of times you’re working with a client and it’s hard to convey some abstract concept without a real context like a specific viewport. Mockups are still great for showing a design to a client, as it demystifies things on their end.

When you think about it, a client is hiring you because they’re not a designer or a developer. They’re not used to your workflow or process so you should be doing everything in your power to convey your design decisions to them in a way they’ll understand it. So don’t rule out a high-fidelity mockup for a client project.

Style Tiles & Design Systems

There is a pendulum effect here. You could spend a lot of time moving stuff around in Photoshop, if you’re getting too precise. Unfortunately, you might spend all day (or week) moving things around, deciding on content and specific language (and that could serve as a whole different post). Now what should you do to prevent that?

Samantha Toy Warren has a really great project called, Style Tiles. The whole idea is to abstract your design and not nail it to specific widths and devices. This is the direction we should be moving in as a design community. Samantha puts it quite simply: “Your process should be as responsive as the products you are designing.”

I can’t agree more. This type of thinking creates marching orders to command your design decisions. It allows you to bend without breaking. It lets you respond to the different ways your site will render in different viewports.

Roughly speaking, a design system should be a style guide of your UI elements, typefaces, lines, colors/gradients, and logos you’re planning to use as well as a collection of assets you’re using. It should also create the mood and tone you’re trying to convey in your work.

Designing In the Browsers

“You should be designing in the browser.” — smarter people than me.

Daniel Mall puts this way: “Let’s change the phrase ‘designing in the browser’ to ‘deciding in the browser.’”

From experience I find that the more I separate design and code at the beginning the better design I do and more modular code I write. It comes down to what I was saying before: the stronger your marching orders, the less you’ll waffle and change your mind when you start writing code and get into the browser.

The whole point of working in Photoshop is to get moving and keeping it initially separate from your code. It clarifies your decision making and helps you start to work in a modular fashion. My recommendation is to develop a design system first, and if you need to create a more specific mockup for your project you already have the tools to help you get there.

Anyway, I’d like to hear from you. How are you using Photoshop in your workflow? Do you have any favorite plugins? Is Photoshop completely out the window for you? Are you using something like Sketch or Pixelmator? Do you design completely in the browser?