August 2, 2012
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.
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.
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.
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?
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?
March 11, 2022
March 4, 2022
August 1, 2018
January 29, 2018
January 29, 2018
December 6, 2017
June 14, 2017
September 28, 2015
February 24, 2015
December 17, 2014
November 20, 2014
October 9, 2014
July 10, 2014
May 15, 2014
May 11, 2014
March 23, 2014
January 16, 2014
September 26, 2013
July 2, 2013
May 16, 2013
December 16, 2012
August 2, 2012