I’ve been thinking a lot about the web design community’s longing for a new web design application. In this new era of responsive design, multiple view ports, web fonts, CSS animations, etc., traditional applications like Photoshop just aren’t cutting it. The static nature of our current tools doesn’t cater to the fluid and flexible designs we’re trying to build. We all know this. We joke and complain about it on Twitter. We write blog posts about it. A fine team of designers and developers have even started Project Meteor as a way of bringing added awareness to the problem. And although I applaud a campaign like Project Meteor and agree with every item on their wish list, I don’t think a new, ultimate web design app is what we need.
As others, I’ve tried to imagine what this app might look like and how it might behave. The feature wish list at Project Meteor is a great summation of what many of us have desired: fluid layouts, grids, browser rendering of web fonts, CSS effects, object states, etc. Plus we want the ability to render stunning bitmap and vector effects and filters similar to what Photoshop currently gives us in that category. How would a single application graciously handle all of these capabilities? And maybe a better question, do we really want a single application to even try to pull this off?
Earlier this year I moved from Photoshop to Fireworks hoping to gain some kind of an advantage in my design workflow. At first I was very excited about some of the layout tools included in Fireworks that were missing from Photoshop. But in the end, each project in Fireworks was still a static, pretty picture, just as it was in Photoshop. I was left with little actually usable for the live site. I feel that whatever this new web design app offers won’t be much different in this regard. The reason being, most of us agree we wouldn’t want this new app to generate our HTML. So whatever deliverables this app is able to provide still leaves us needing to “rebuild” the entire project in code as we interpret the design intentions the app presents, or at best copy snippets of CSS into our text editors.
I decided that maybe it’s not a new tool I need. Maybe it’s a new design strategy, a new workflow, a new way of approaching a site build that would free me from my dependency on applications like Photoshop when it comes to responsive, structural, and typographic strategies. Most of the features on our wish list are features already handled by CSS and the browser. So why do we want an application that emulates what CSS and our browsers already do for us? For me the answer has always been because designing directly in the browser is a pain in the ass. Plus it stifles my creative flow.
But earlier this year I started to experiment with some of the new front-end frameworks that have been popping up lately. Twitter’s Bootstrap is a good one; so is Skeleton from Dave Gamache; and Zurb’s Foundation is one of my favorites. There are many more. I was pleasantly surprised at how easily these frameworks allowed me to design and build the typographic and structural layout of a site or screen, including with some frameworks the flexible and responsive nature of the layout. In fact, after spending some time getting to know a framework, it actually became quicker to mark up a wireframe in the browser than it was to mock up a wireframe in a dedicated wireframing app. In other words, I’m becoming as comfortable building my layouts with code as I was drawing my layouts in a WYSIWYG app. And these frameworks aren’t just for wireframing and prototyping. As I narrow down the right typographic and structural layout solutions for the site, I can continue to mature the design via any and all CSS tools I have at my disposal. In a nutshell, these frameworks make implementing and experimenting with your ideas a joy. So my problem with designing directly in the browser being a “pain in the ass” has pretty much been wiped away.
But what about the creative flow? I’ve always been reluctant to give up that blank canvas in Photoshop or Fireworks where there are few restrictions or rules in the way of my imagination. No code to distract me, just a rough wireframe to interpret into endless possibilities. I soon found out my creative flow wouldn’t be sacrificed, perhaps just rerouted a bit. Instead of Photoshop being on the front side of the design process, it has been shuffled to the last step in the design process. In its place is a wonderful new focus on type choice, typographic hierarchy, and layout strategy, including the layout’s responsive behavior. These of course were things I always tried my best to focus on within Photoshop, but working with a front-end framework directly in the browser has removed all distraction from that focus.
So Photoshop now becomes the last step in the process. By the time I’m ready to work in Photoshop (or Fireworks) my site is already living HTML and CSS. The typography is already fully planned out, implemented, and being rendered in the browser. And the site is completely responsive, with every screen size and layout adaptation accounted for. I can now focus on any necessary visual aesthetics that haven’t already been handled with CSS. I decide where the layout might need background textures, illustrations, embellishments, etc., and use my design application to produce those. And the good news is, since I’m not relying on my design application to assist me with page layout, I’m free to use any application I want. For example, I’ve always been reluctant to use apps like Acorn and Sketch, because I never felt comfortable building an entire page design in those apps. That’s no longer an issue since I’m only using my design application to produce “pieces” of art, not entire page designs. I also eliminate the step of needing to “recreate” Photoshop effects using CSS, because any effects that can be made with CSS have already been implemented before I even get to Photoshop.
Of course, this approach makes the assumption that the designer can code. And even if the designer can code, it’s also assumed they’re on a team or in an environment that allows them to contribute to the front-end development of the project. That might not always be available, although I think most teams would jump for joy at receiving responsive HTML/CSS to build upon vs. a mockup they need to interpret. It also assumes your clients will be able to adapt to this new approach. I haven’t had a problem. In fact I feel my designs are stronger because this approach forces me and the client to put more focus on the “bones” of the project (typography, layout, etc.), allowing us to hash out the visual aesthetics later in the process.
For me, a combination of my text editor, a tool like CSSEdit, a front-end framework, and a revised workflow have become the new “web design application” I’ve been longing for. And judging by some of the tweets and blog posts I’ve been reading this year, I’m far from the first to become a fan of this approach to site design. I imagine there will still be projects where an “uncoded” mockup is all that’s needed, and that’s great. If someone does eventually launch a new web design app, I’ll be as excited as everyone else to give it a try!
Have your own thoughts about this? Hit me up on Twitter and let me know what you think.
Tweet