responsive design, tools of the trade, & the ever-evolving designer

A few years ago myself and my office-mates had our collective minds blown by responsive design. It wasn’t the fact that responsive design was “a thing” – But more by the pace at which responsive began its takeover. What started like Monty Python’s lonely King Arthur endlessly charging toward the Holy Grail quickly became something fierce and fresh, charging through the design community like a new and improved King Arthur and his Knights of Justice.

c7c05f558c0ac4fa3d065fc11c74afcf

The push for responsive design began slowly.

 

 

 

 

 

 

 

 

 

VS.

Shiny and strong ridding the world of outdated websites hither and yon.

But before long, it was shiny and strong, ridding the world of outdated websites hither and yon.

Not long ago were the days when we — as designers — would visit a website, grab the corner of the browser and size it down as small as possible. We wanted to see whether or not the site was responsive. These days responsiveness isn’t even a question. A site MUST be responsive. In fact, ignoring responsive design risks having the mighty God of Googs slap you on the wrist before hurling a lightning bolt to destroy your mobile ranking.

lightning-bolt

And nobody wants that… right?

So we… the few, the proud, the art department, grabbed our tablets, picked up our styluses, and prepared to defend the walls we have so proudly built. We will design responsive websites and rank them to glory!!!

We will not let this castle fall!

We will not let this castle fall

One site for all devices! That is our credo! Right guys? Right??

All this is leading to my main point. We — the art department — have a job to do. It may not be as glorious and bloody as defending a castle from frozen dead things. Or giants. But it is glorious nonetheless. We must create engaging websites that suit our clients and have the sites work on every device.

The Weapons:

So how do we defend ourselves from the frozen horde? Welp. Currently we are slaves to Adobe and any product they put out (but not for long! More on that later….). I have been designing for 20 years, so I know all the ins and  outs of Creative Suite. For the past few years I have been feeling like my beloved Photoshop is a tad outdated. A once powerful sword, capable of many a task now feels chipped and fragile after years of use. I didn’t want to accept it. But my trusty Photoshop might be better suited hung above the mantle. Hung proud in tribute to past projects and clients the mighty Photoshop has once served and slayed (the projects… not clients).

It was this fragile feeling – coupled with constant workflow battles with the dev team – that prompted my search for something more up-to-date. I needed an application designed exclusively for responsive design, unlike Photoshop which tries to be a swiss-army knife. No more whittling a square peg to fit a round hole. No more having to make three separate psd’s (sometimes more) for one design. No more having three separate design sessions (desktop, tablet, mobile) for one layout. It is time for a new weapon.

It is time for a giant fiery battle axe of a responsive design!

It is time for a giant fiery battle axe of a responsive design!

With each passing month I have been seeing new tools emerge. There have been many tests and trials. I let these apps battle it out and prove their worth, thinking “There can be only one!”

The remaining contender would get my vote as the new tool the Art Department would embrace. Enter Sketch, developed by the talented people at Bohemian Coding. Sketch is a powerful application made for one thing: Digital design. I was immediately impressed by the workflow. Sketch seems to be made by fellow designers plagued by similar problems.

The issues:

1. The Dev team needs a layout for everything.  And I mean everything.

2. The current workflow between dev and design is like watching very long tennis match.

tennis

3. Having to open multiple psd’s all the time seems very 90’s

4. Workflow between Dev and design is currently broken.

5. Did I mention workflow?

How Sketch Helped

Sketch provides one work space for all of your layouts. Open Sketch and by default (in a web project) you are presented with Desktop HD, Desktop, Tablet Portrait, and Mobile art boards. This is a HUGE improvement over photoshop. You can even grab the side of an artboard and re-size at will. This feature alone had me at once reaching for my wallet and ready to uninstall Creative Suite. All design happens in one space. Sketch even handles both raster and vector, further making it seem like an enchanted sword I’ve been looking for.

A look at Sketch’s device specific artboards, which make responsive design easier than ever.

Sketch also will connect to productivity platforms like Slack. Which our office just happens to use (with gusto). With a simple plugin called “Send to Slack”. You can export PDF’s of your layouts to certain slack channels. This can be handy when working with a team. Especially handy when you don’t want your layout ripped apart by development post client approval.
Which never happens. Ever… Really…

You-Sit-on-a-Throne-of-Lies

Uncharted Territory: A Bold New World

The down side to Sketch is that you are now faced with the daunting task of learning an entirely new application. An application that you and your officemates have to adjust to. In my opinion. Change is good. I welcome change. It means that I am developing as a human being. It means that I am gaining knowledge. More importantly. Accepting change means that I will always stay current. Someday I may hang up my stylus and focus on helping younger designers develop. But for now I need to stay current. And staying current means accepting change. I’ve seen more than one person become a dinosaur thinking they knew it all.

sad dino

Sketch is the most promising Application I‘ve seen, so for now I will keep learning how to use it. The only blockade I foresee is that our developers are on Windows machines. The Art Department will now have to figure out a way to get all of the assets development needs in order to start a build, which we kind of have to do now. But how we do it will change drastically if we choose Sketch.

Interestingly Enough: A New (Old) Challenger Approaches

Happy Gif 5

Well, maybe…

As I started to gather my thoughts on this Sketch vs Photoshop post. Something unexpected happened. Something wonderful.

On June 15th 2015 Adobe released CC 2015. A complete overhaul of Creative Suite! Upon download I launched Photoshop expecting to see minor bug updates and such. Glad I was wrong! It took very little time for me to realize that Adobe has included support for multiple Artboards in Photoshop!!! It’s about damn time! I wonder who they got their inspiration from?

A look at how Adobe’s latest version of creative cloud added artboards to photoshop.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Artboards and more from Photoshop’s latest update

Not only do we now have multiple art boards but the export tool has received a major overhaul. All you have to do is right click on a layer to export. You can also “export layers”. Meaning ALL the layers. I have always made PSD templates for internal page photos and such. Now we can export them all with the click of a button. Very nice! This will make designers and developers happy. But mostly interns. Because we all know the ones who will be exporting ALL the images are lowly interns. :p

I’m glad to see Adobe is trying to grow with the times. Growing with technology can be very demanding. Especially on the brain.  Unfortunately as a creative professional it is one of your number one priorities. Stay current. I cannot say that enough. If you fall behind and fail to find new tools and styles you could gimp your whole department.

I will definitely take full advantage of the new toys Photoshop has.  But I can also definitely say that I am going to stick to learning Sketch. Sketch seems like it could lead to a smarter workflow. It forces you to think in terms of usability, content, and design all at once. All visually. For us designers, this is key! Designers can plan anything. But most of us have to do it visually. Now we can plan and design all in the same space. Sketch even has a handy pre-made style guide you can customize then send to your devs for the build.

Page 4: A New Hope.

For me. Sketch is the winner. It has a newness that I like. A freshness. Mad props to the developers at Bohemian Coding for making a product that actually reflects current design needs and standards.

Sorry Photoshop. I will always love you. But you still seem broken and frail. You just may wind up over my mantle. After all….

things-done-changed

 

4Walls Media Group is an Industrial Traffic Company | copyright 2017 |