A Designer’s (mini) Guide to Basic Developing

When I first started out designing for the web, all that a plucky pixel wrangler needed was Photoshop, Dreamweaver, and an FTP client to get the job done.

I’m oversimplifying a little, but it wasn’t far off – if you had those programs to call on, you were sorted. I know a few folks who, up until fairly recently, still relied on those three tools alone when attempting to maneuver their designs from artboard to browser.

These days, things can be a little more confusing in that regard, and it can be daunting at times to figure out the best way to get the job done and which programs or platforms to use – whether you’re starting out, or just feeling a bit stuck

I thought I’d share what I use, as a designer who needs to get down and dirty with code at times, to get the job done. Either this will come across as helpful and informative, or completely boring. Let’s find out which it is, shall we?

Sketch

I was sceptical about switching to Sketch, but boy, did I change my tune. In comparison to Photoshop (is GIMP still a thing?), Sketch is focused on user interface design for digital and web, easy and intuitive to use, and makes designing (and, importantly, exporting your designs in multiple resolutions and formats at a time) way easier.

There are also a large amount of handy plugins available to soup your Sketch antics up with (I particularly like Craft, Stark and Sketchy Pies), enabling you to store artboard templates, assign common styles to elements, and re-use & update common elements as vector symbols.

I still use Photoshop at times for more intricate editing/deep etching of photographs, but everything else is now Sketch-based.

Local environments

This is where it can get tricky – making changes to a live site on the fly is clearly no good. That’s where your local development environment comes in.

I’ve used Vagrant VVV, which is good but can be a little frustrating to use at times; it requires some command line interface wrangling (more on this below) and can take an awfully long time to boot up and run. This can be annoying if you’re trying to quickly test changes out or fix something urgently.

I used WAMP briefly back in the day, and it just…no. No thank you. Not for me.

Enter Local by Flywheel: it’s free, fast, and ideal for WordPress developers and designers.  The program spins up a local site for you (duh) with all the dependencies that WordPress needs. By choosing a few options and giving your site a name, you’re now able to spin up a fresh WordPress install in a minute or two, tops. Nice!

The UI is nice, clean, and easier for a visual person like myself to get going with the (seemingly) complex processes needed for multiple development environments at speed.

Super. Easy. I think I’m in love.

Sass + Sublime

One of the most time-savingiest¹ tools in your workflow, Sass gives your CSS superpowers and speeds up development time markedly. It lets you set variables for speedy re-use and replacement of things like colour values and font stacks, import chunks of code quickly and easily using mixins without retyping, as well as compiling and minifying your code and a whole lot of other useful features.

Writing Sass in a text editor like Sublime or Atom is a breeze and – dare I say it – even fun. Strangely, Dreamweaver has only recently caught up in this regard (despite Sass being around for 10 years) and now lets you compile Sass from Dreamweaver CC 2017 onwards.

Git + Sourcetree

What on earth did we do before version control? I remember folders upon folders on shared office drives, with work being accidentally overwritten or deleted by overzealous project managers, interns, or even (on one embarrassing occasion) myself.

Multiple versions of the same file, names like “final_final-FINAL03” – which one do I use? Running out of disk space due to duplicate files. Terrifying, right?

When I joined Woo, I was introduced to Git and the benefits of version control. I’d briefly heard about SVN at the tail-end of my previous job, and it sounded like a good idea.

Problem: I’d never used Git, Terminal or the command line before, and it sounded a little daunting.

I’m a visual person, so I initially found it pretty difficult getting used to the command line AND version control at the same time. I’ll spare you the gory details; let’s just say that mistakes were made, merge conflicts were created, and I felt like I was never going to wrap my head around it all.In hindsight, I shouldn’t have panicked as much as I did (hindsight, right?). Turns out, there are programs out there for folks like me who find the command line slightly scary, with helpful GUIs that make it far less daunting to push, pull, and create PRs without enraging the version control gods.

I discovered Sourcetree, and suddenly the whole Git process made a lot more sense to me. It was like a lightbulb went on, and it’s been invaluable to me understanding Git more and – thankfully – making less and less mistakes.

If you don’t want to remember a bunch of text commands, or just feel like a visual hierarchy would work better for you, this may just be your missing link.

That’s it

My workflow has changed a lot since the days of Notepad and Internet Explorer, and I’m sure yours has too.

Have you ever stopped to think about it how it has changed?

What do you use to help you transition your designs over to the web? Let me know in the comments below, I’d love to hear how other people approach this.

Thanks for reading – you can get back to watching Stranger Things 2 now.

¹ Definitely not a real word, but what’s done is done.