What I Wish I Had Known When I Graduated College
Better Stakeholder Interviews
Ready. Launch. Update!
Take a Break!
Cognition
The Four Stages of Giving Up Photoshop
- @sophshepherd
- Designer
- Sophie’s articles Feed
On one of my first projects at Happy Cog, my coworker, Kevin, suggested that we experiment with how we create responsive layouts of a site redesign. Seemed reasonable enough, until I heard him say, “and we’re going to use Keynote.” Say whaaat?! 
Like most of you reading this, I use Photoshop. I use it a lot. I use it so much that by now it feels more like an extension of my brain than a tool I need to use to get my ideas onto a screen. So giving it up was like giving up a part of myself, and the emotions that followed could be summed up as paralleling the stages of grief.
Denial
My previous experience with Keynote was as follows: I accidentally opened it once while trying to open Pages. So, basically, none.
All I knew about Keynote was that it was the cooler version of PowerPoint, made by Apple, and used for making presentations. I had never heard of it being used for anything but presentations, so I asked Kevin a couple of questions along the lines of “wait…for real?” He shared with me links to some really smart people who had written about their experience of using it as a web design tool.
It didn’t take me long to realize that, yes, he was for real.
Bargaining
My first assignment was to transfer a page that I had already designed in Photoshop into a Keynote file. The purpose of this was to learn the basics of the program: how to change gradient colors, how to set type, how to add borders, etc. Every thirty minutes or so, I would approach Kevin with a feature that Keynote didn’t have; sure I would be able to convince him to abort this ridiculous mission and go back to the comforts of Photoshop. After a couple of days of not-so-subtly complaining about Keynote’s “lack of features,” I realized he wasn’t going to budge. I was going to finish this project in Keynote.
Acceptance
With the realization that I was going to be spending some time with Keynote, whether I liked it or not, I started seeing features that were actually really clever. After about three days, I was used to the interface and working at a pretty good pace. It was surprisingly easy to set exact pixels and positioning. I could click, group, and drag objects, snapping them to my grid or center points. These grouped modules could be scaled down easily while the text flowed and wrapped around objects; perfect for designing various widths of a responsive site. Pro tip: layout tabular data in Keynote and change the widths. It’s like buttah.
Slowly, and subconsciously, my mind shifted from asking “Why doesn’t this work like Photoshop?” to “Why does Photoshop work like that?” For so long, I had accepted Photoshop as the standard because I thought it was my only option for design. But, being good at creating websites in Photoshop means knowing useful but convoluted workarounds for simple tasks that it just isn’t built to do natively. Which of the numerous unintuitive methods do you use to wrap text around an image?
Reflection
By the end of the project, I found myself asking two questions: 1. Will I use Keynote again? and 2. Would I suggest others follow my path?
Will I use it again? Probably not as the primary program on a project. Keynote is a great tool for very specific tasks on certain projects. When I need to design a simple responsive page quickly, without an incredible amount of texture and detail, I will grab Keynote from the toolbox. As the primary tool for building a rich design with photorealistic detail, Photoshop is still the best choice.
Would I recommend others try Keynote for layouts? Definitely, at least for one project. Although I was frustrated at first, by the time I was finished, my workflow was completely different than it had been previously. I forced myself to look at my process from a new angle, one that I will carry with me in my metaphorical toolbox no matter what program I am using.
Although stepping outside of our comfort zone feels unnatural, it allows us to look back and assess where we are. How would we ever discover something new if we took the same route each time? Whether it’s designing in a new program or using a new CMS or framework—how has an unexpected switch helped you rethink your process?
24 Responses
What happens when you step out of your comfort zone with your design tools? @sophshepherd shares in Cognition: http://t.co/MAnecuEU #fb
Thu, August 02, 2012 10:49:57
This one time we used Keynote instead of Photoshop. I wrote about the experience for Cognition:
Thu, August 02, 2012 11:10:07
I'm going to have to get a Mac some day. :-) #Keynote #PowerPoint #PhotoShop #comparison
Thu, August 02, 2012 2:53:06
The Four Stages of Giving Up Photoshop http://t.co/kMhtSjbl
Thu, August 02, 2012 3:28:24
“@zeldman: The Four Stages of Giving Up Photoshop http://t.co/L6KZc75F” @brandonlaird #imcslc
Thu, August 02, 2012 3:32:30
Yup, agreed. Mainly about the points on how unintuitive photoshop can be for simple things (text wrapping) http://t.co/gxZJJm3L
Thu, August 02, 2012 3:37:26
“@zeldman: The Four Stages of Giving Up Photoshop http://t.co/2DsN2N0M” ping @Kristoffintosh
Thu, August 02, 2012 3:44:39
The Four Stages of Giving Up Photoshop http://t.co/lHWmOlvo (via @zeldman) #rw
Thu, August 02, 2012 3:46:11
Keynote is so good even for web design. / @zeldman The Four Stages of Giving Up Photoshop http://t.co/3EJ0LRFi
Thu, August 02, 2012 4:14:50
@sophshepherd Great post. I find it nice to mock things in InDesign as it has ¶ styles and other webby characteristics. http://t.co/qWkOQoAl
Thu, August 02, 2012 4:24:06
#Keynote is also great for designing a mobile user experience and producing a the app’s mockup, storyboard. Love it!
Thu, August 02, 2012 6:32:42
Yes, use Keynote for designing Wireframes! “@zeldman: The Four Stages of Giving Up Photoshop http://t.co/4rZNFvdE”
Fri, August 03, 2012 1:24:03
Great article from @zeldman about giving up Photoshop for keynote http://t.co/Ts7fNCpX
Fri, August 03, 2012 2:23:25
Why even bother with keynote when you can just use the browser?
Fri, August 03, 2012 4:31:30
Using Keynote instead of Photoshop to mock up a site?
Sat, August 04, 2012 5:37:28
Reevaluate your workflow by stepping out of your comfort zone. http://t.co/ByzLpgIU
Mon, August 06, 2012 10:44:13
http://t.co/s8ebIE5y #Sophie shepherd my daughter has started speaking in a foreign language, should I be concerned?
Mon, August 06, 2012 9:56:49
Im an Illustrator guy, but "The Four Stages of Giving Up Photoshop" is a good read. http://t.co/2i3IRcRh @sophshepherd @happycog
Tue, August 07, 2012 9:39:01
Nice approach, but you don't have to go so far. I would suggest Fireworks next time. Btw, interesting :)
Mon, August 13, 2012 7:25:59
Esto me encantó, diseño web con Keynote, jo http://cognition.happycog.com/article/the-four-stages-of-giving-up-photoshop
Tue, August 14, 2012 12:33:15
Nice article!
Wed, August 15, 2012 2:45:36
The Four Stages of Giving Up #Photoshop http://t.co/p3XUP3aK
Fri, August 24, 2012 11:30:58
It might be time to comp in Keynote. http://t.co/cbrKCkdA
Thu, September 13, 2012 11:21:22
i thought about this some time ago, thanks for this excellent reminder. /// http://t.co/uDLOk9D8
Wed, January 30, 2013 1:25:55