With the move toward responsive websites, designs are being pushed to the prototype stage sooner in the process. We’re designing more in the browser. Or are we? Do Photoshop comps still have a place in the design process? Depends who you ask.
Last week Sarah Parmenter published some interesting thoughts about how she can’t design in a browser. The gist of her post is that once she opens a code editor her focus shifts away from the creative and toward thoughts of structure. She finds the resulting design to be “boxy, bland, and uninspiring.” While she readily admits it’s not feasible to create Photoshop comps for every breakpoint in a responsive design, she knows she needs to use a graphics editor while working through her creative process.
Earlier this week Mark Boulton offered similar thoughts from the Responsive Summit. He talked about designers looking for a new tool more aligned with moving things quicker to prototyping in a browser. He also talked about his own experience using Photoshop in the creative process and not wanting to give if up.
My own process has been changing the last couple of years and I find myself much less reliant on graphic editors like Photoshop.
My Responsive Design Process
Unlike Sarah and Mark, I don’t consider myself a Photoshop expert. My journey into web design was from the development side. It was much easier for me to take your PSD file and build a web page to match than to create the PSD in the first place.
Over the years my Photoshop skills have certainly increased, but my strength is still in working with code over working with graphic elements on layered comps.
I can remember one of the first sites I designed for a client where I had an idea for how to display her navigation. I could see in my head what it looked like and how to code it, but for the life of me couldn’t create it in Photoshop. I asked my client to trust me. Fortunately she did and the result was something we were both happy with.
Even with greater skills today, I still find myself leaving comps rougher than others might and moving more quickly to developing a working web page and leaving more of the design to a code editor and browser.
My design process now works as follows.
- Research and Planning — gathering information and thinking through information architecture, navigation, and typography
- Sketch — rough ideas for layouts and what’s to be included on each page
- Wireframe — something semi-polished I can send to clients
- Prototype — building 2–3 representative web pages. Much of my design process happens here
- Development — building the site and refining the design
Without going into great detail, the early phases of the above process tend toward working out design problems. It begins with some very rough visual ideas that continue to be refined as the process moves along. At the end of the wireframe stage there’s enough detail to get feel for how the site will look, but I still leave much of the design details for prototyping and refine the design during development.
This iterative process helps me work in layers starting with type, grid, and layout and adding colors, imagery, etc. on top to continue to refine and create in an iterative process. It works for me because I think it plays to my strengths as a designer, which is away from the graphic editor and toward the code editor.
In fact with the last couple of sites I designed Photoshop never entered into the picture at all, other than to help create or modify specific graphics and images that found their way into the site.
I still find happy accidents along the way and for me this process doesn’t impede creativity. Perhaps it leads my designs to look a certain way, but I think that was toward the style I was naturally developing.
In the end I design more in the browser, because the tools I’m most comfortable using are html, css, and javascript. It’s easier for me to get my ideas down using them than it is for me to use Photoshop or Fireworks and any other graphic editor.
Summary
The move toward more responsive and adaptive designs is calling for different processes than many have worked with in the past. It’s impossible to accurately reflect how a site will function in a graphics editor alone and as an industry we’re pushing toward quicker use of the browser to create prototypes in the place of design comps.
Designers who’ve worked longer with graphic editors will probably have more difficulty making this shift and they do have valid reasons for wanting to work in a graphic editor. It’s easier for some to think creatively in a graphic editor than in a code editor and there’s nothing wrong with that. We each have our own creative process.
I’m finding it easier to design more in the browser. Fortunately it plays to my strengths and before long we’ll see new tools that allow designers on both sides of this graphical, coding spectrum to work with a creative process they find comfortable. Tools that will better create responsive prototypes through a GUI.
Is your process changing? Do you find you can design and be creative with a code editor and browser or do you need to stick with a graphics editor for the creative part of the design process?
Download a free sample from my book, Design Fundamentals.
Thanks for the article! My process seems to be ever changing. I’m a UI developer by trade, but I work in a very small group, so I’m really a jack of all trades. In the beginning I didn’t really use FW/PS/AI for any of my graphic needs. I’ve evolved to use Fireworks as my work horse and I really only use it to get the first color visual of what I have in my head. Similar to how these graphic intense movies have some artist put together a backdrop to go with the live action, etc. Sometimes it’s a beautiful thing and sometimes it hurts to watch 😉
Either way, I’m better that way. I don’t get so caught up in the details of the visuals until the site is on screen. Then if I feel a gradient would fit in better than a texture, it’s easy to whip that out in Fireworks and throw it in. Bouncing back and forth doesn’t hinder progress for me. It’s not a perfect process by any stretch, but it works.
Cheers!
I’m a jack of all trades as well being a freelancer. I’ve mainly used Photoshop for all graphics since the beginning. Price kept me from buying any of the other Adobe programs.
I’d like to have more skills with graphic editors and I continue to learn, but it’s still easier for me to do some things in code so I push to get there as quickly as possible. Like you I go back and forth when I need or want a specific image or graphic and I don’t feel like it slows me down.
I find designing in the browser is a similar issue to using the command line for Sass or git. Sure, initially it’s uncomfortable, but once you get used to it the power of the tool is apparent.
Tools with heavy GUIs or frontends aren’t as helpful as understanding what you’re building and how it’s working. I can do so much more with a text editor (and faster) than a tool like Dreamweaver or even other IDE applications.
I hope more people take the leap of faith and try designing in the browser. It saves time (when you get used to it) and is a fun way to build mockups/initial iterations.
Interesting comparison. I’m not quite there with either Sass or Git so this isn’t coming from experience, but I find I look for the GUIs there. I think I’ll prefer them over the command line, but I can see how it’s the same issue with graphic editors and code.
I agree with you that you understand more about what’s happening when you’re closer to the code. I may have to rethink my plans for Sass and Git. 🙂
I would use Fireworks to try out Ideas, and then try them in html/css instantly. Don’t see the sense in making every single Screen.
This works for me because my designs are rather minimal and not so ornament-y.
My designs tend to be toward the minimal as well and less on the ornament side. I’ve been sketching and creating something for clients in Keynote and then moving to editor and browser as soon as I have a good idea of what I want to do.
I’ll create wireframes and prototypes for a few representative pages and save everything else for the browser. How many pages depends on the site.
Awesome. Thanks for sharing your process with us. We’ve been getting really heavy into designing responsive sites for our clients. It’s pretty amazing to see their reaction when you explain to them that “the website can morph to the size of the screen.”
🙂
Funny. I’ve gotten that reaction too. More surprising though is I’ve now had a client or two ask for a responsive site by name. I’m working on a site now for a woman who I never would have thought would know the term, but she actually reads Smashing Magazine and sent me a link to an article there about responsive design and asked that her site be responsive. You should have seen my reaction. 🙂
I think you’re right that it really comes down to what medium you are most comfortable with. I’ve always been most comfortable with HTML/CSS rather than photoshop. That means that designing in the browser is a more invisible process for me. The code gets out of the way and I don’t need to think about it.
With photoshop, I have to figure out how to do stuff, so it’s a barrier to inspiration. Some people, like Sarah, obviously find it easier to get photoshop out of the way of their creativity.
Yeah, in the end it’s all just a bunch of tools. Some like to work with paint, others prefer working with clay. Some rearrange sounds and others rearrange words.
In the end they can all still communicate many of the same things, though in a different form.
I’m like you. In Photoshop I’d have to spend more time figuring something out that I already know how to do with code. Others like Sarah will be the reverse. Neither approach is necessarily right or wrong. Just different.
Hi Steven,
Cool article, I have a very similar process – I like working sketches before hand. Then I present clients with either mockups or HTML based wireframes.
I’ve also created an article on my process which goes into more detail: Responsive Web Design Workflow: http://boompah.com/2012/02/23/responsive-web-design-workflow/.
I also recently published: Designing in a Browser for Designers and Developers – http://boompah.com/2012/04/02/designing-in-a-browser-for-designers-and-developers/
You might find these useful, please let me know what you think,
Cheers.
Thanks Ryan and thanks for the links. I’ve been collecting links for a series of articles on responsive design, one of which will be about workflow, and I’ve just added two more links to the collection. 🙂
Both good articles. I think we do have a similar process. There are some differences, since you work in a team and I usually work alone, but the general process looks similar. I’ll be interested in knowing your process develops. I’m often tweaking mine here and there.
Awesome yeah, I’ll definitely keep an eye on your content! Keep up the great work :).