Anatomy of a Campaign
We here at Bruji love technology, you could say we are filled with Technolust. As such, we’re always on the lookout for software to make our lives, if not easier, than certainly more interesting. This article will examine how we created our Summer Sales campaign with a focus on the technologies used, in the hopes that it can help other folks out there learn about them. This won’t be an in-depth technical article (no code) and we won’t delve too deeply into the apps, just a nice bird’s-eye view.
The software we’ll be taking about here (for the impatient) are the following:
- Sketch 3
- CodeKit 2
- Firefox Developer Edition
- Ulysses III
But it all begins with an idea. I wanted to do a Summer Sale campaign with happy, light colours and a flat look. To me, nothing says Summer quite like the beach, so off I went in search of some good beachy images for inspiration. It helps to be specific so I wanted a shot of the ocean and sand, an umbrella and a simple beach chair. The obvious stops include:
- Google Images
Armed with a good image, the brainstorming started. You’ll find lots of photos in Google like this one, which is very nice, but is not what I wanted at all. I wanted more of an illustration look. Another search netted me a bunch of illustrations like this one or this nice one on Dribble, but none were quite right. So we extrapolate a little, we grab what we like and build from there.
I created first the umbrella, chair, ocean and sand in Sketch. Everything else followed from that design and the colours used. This was my first time with Sketch and I was learning as I went along, which can be very frustrating, but is also an excellent way to learn because you’re tackling a real-world project and not just following along with a tutorial.
It is important to have a cohesive colour palette, you don’t want your design to look like a rainbow unless that’s exactly what you’re shooting for. So based on that first image I created the colour palette for the rest of the elements. It’s got nice warm colours that feel summery and light.
When selecting a colour palette, remember that Black, White and Gray are also colours and they mix well with pretty much everything.
Black can be overpowering so use it sparingly or reduce it’s value (tending more towards dark gray), white can also be overpowering, in which case you can use some off-white value, what the paints industry calls bone-white. Lastly, gray is your friend, don’t leave it behind, if you need more variations of colours in your palette, try mixing an existing colour with gray (in small doses).
Sketch is, in my opinion, the best App out there for Web and iOS design. After using Photoshop and Illustrator for about 20 years, I switched my workflow to Sketch. If you do any design for web or iOS, I encourage you to try it, there’s a 30-day trial available. The export features alone in Sketch are enough to make you want to switch, as are the ease of use and low learning curve compared to Illustrator, and the price is right, especially compared to Adobe’s overpriced offerings. It does have its quirks however so be patient, it is ultimately worthwhile. But, if you do a lot of heavy illustrations for print and not web then Sketch is probably not for you since it doesn’t even recognize CMYK colour values and is lacking some of the more advanced illustration tools you might find in Adobe Illustrator.
Sketch’s layouts revolve around the idea of artboards (though you don’t have to use them if you don’t want to, unlike Illustrator which forces you to create a sized canvas before you can start doing anything with it) and they’re actually very useful. In artboards.png, I have the Desktop and Mobile artboards side by side. It makes it really easy to create your designs for multiple platforms, Sketch comes with a number of ready-made Artboards to take the guessworks out of your designs, from iPhone screen sizes and icons to paper sizes and OS X icons with a number of responsive web page sizes along the way. Inserting a new Artboard is as simple as pressing A on the keyboard and choosing a size.
Exporting in Sketch is a joy. Group elements into a single Layer and create an exportable image from that with a single click. Even better, if you choose to export your image in PNG format, Sketch will ask if you want it to automatically create 1x, 2x and 3x versions of your image and name them appropriately for you, yes please! Click Export, you’re done. If clicking and selecting a size is too much work, simply drag your grouped object to the desktop or any finder window and Sketch will create the image on the fly, nice.
The Bezier curve tool (called the Vector Tool) in Sketch is also the fastest and easiest I’ve ver used.
I don’t want this to turn into a raving review of Sketch, so I’ll just end by saying that object alignment has never been easier. Do yourself and favour and check the app out.
Macaw is an HTML editor with the, sadly unfulfilled, promise of letting you create web sites visually instead of coding. I’ve been pretty critical of Macaw in the past and I stand by what I wrote, I don’t think Macaw is ready for primetime yet. So why am I talking about it here if it’s no good? Well, I think that for web mockups Macaw is excellent. Currently, with version 1.5.9 I would never create a full website with it but for a single-page promo that will be up for, at most, a week, I think it’s fine.
After exporting all my images in SVG from Sketch (more on the SVG format later on) I bring them into Macaw and try to recreate the design in an actual web site and see how it responds. One of the nicer things about Macaw is that it’s very easy to add breakpoints for different screen sizes and devices. I usually add a breakpoint for iPad at 800 pixels (as opposed to the iPad’s actual portrait width of 768px to have a little buffer) then another for iPhone at 320px.
After you have all the elements in Macaw, properly named and properly placed, it’s time to start testing those breakpoints to see how things react and what breaks. Don’t forget to test them on an actual browser as well as Macaw’s built-in browser to make sure things still look good and, most important, make sure that the sizes between breakpoints still work. Macaw does make it easy to move elements around visually when adjusting for different screen sizes. For example, for the iPhone I usually create a very different layout than for Desktop, I don’t like sites where they simply scrunch all the elements into a tiny window where you can’t even read the text.
Macaw would be a lot easier to recommend if it were free (or worked as advertised). I’d say it’s a tool to keep an eye on in the hopes that one day soon they’ll fix all the niggling faults and make it really useful. For now, try the demo but make sure you create a real website and not a tutorial so you can truly evaluate the product. I’m one of the original Kisckstarter backers so I’ll keep using it until they demand more money for a newer version.
Lots of elbow grease
Now it’s time for Rubymine and lots of coding. I know I said that Macaw was fine for a single-page promo, but the truth is I have to integrate it with our existing Bruji site, this means all the different menus and layouts (desktop, iPad and iPhone) and the different scripts we use on our site and this is, unfortunately, not possible to do in Macaw.
Rubymine is an awesome IDE for Ruby coding by the good folks over at Jetbrains. It’s where I spend all day most days (when I’m not designing or fighting with Macaw I’m knee-deep in Rubymine). Both the Doghouse API and the Doghouse Admin are all written in Ruby using Rubymine. If you do any Ruby (or Rails) coding at all, do yourself a big favour and check out Rubymine. If you’ve ever tried it before and wrote it off, give it another try. I remember trying version 5.0 and being less than impressed with it because it was slow and ate up my CPU faster than champions at a pie-eating contest, but I tried version 6 and was hooked immediately, now I can’t live without it, it even has a very good built-in Database editor! I started out coding Ruby in SublimeText, which is an excellent text editor but not an IDE and doesn’t hold a candle to Rubymine. After using Rubymine, I could never got back. Rubymine even has real code refactoring, something that not even Xcode has for Swift (at the moment).
But what does all this Ruby talk have to do with a website written in HTML? you might be asking. Simple: Rubymine also happens to be an extremely good web editor, much better than SublimeText, in my opinion. The autocompletion is great and the way it handles and integrates CSS is superb. I do all my heavy HTML work in Rubymine, in fact, Bruji’s new website was built almost entirely, to great fanfare and general adulation, in Rubymine.
So I integrate the craziness that Macaw wrote and tweak it in Rubymine. If we’re going to reuse any CSS I try to convert it into SASS (or SCSS) for future reuse. This brings us to our next technology:
Sass is a CSS preprocessor. Basically it’s a much better way of writing and using CSS. Let’s face it, CSS is not great. It was fine 15 years ago to style a simple web page without having to use dreaded tables. But these days it’s really lacking and often contradictory, it’s quite a mess really. Enter Sass. Sass is a way to write CSS to make it less painful and much more usable, it includes simple concepts like nesting CSS rules together without repetition (something so basic CSS should be ashamed not to support it) all the way to variables, partials and conditionals. It also integrates well with plain HTML and more complex frameworks like Rails, etc.
Sass makes working with CSS an almost joyful experience.
However, in order to work with Sass, you need some sort of compiler that will turn your fancy Sass code into vanilla CSS that any web browser can understand. For that we turn to Codekit.
It will also alert you of any error you might have in any of those frameworks, very nice.
The best part is there is nothing to install apart from the app, no servers to run or background processes to watch, you don’t need to learn to use yet another editor or anything like that, you work in your preferred Editor like Rubymine or SublimeText and every time you save a file Codekit does its magic behind the scenes.
Check it out.
Firefox Developer Edition
Finally, it’s time to make sure everything works on a real browser, for this I use Firefox Developer Edition. It has all the bells and whistles a developer might need built-in and Firefox’s DOM inspector is the best there is in the world, no contest. I used to use Google Chrome, like everyone else, to test my websites (Safari’s developer tools are the worst) but recently switched to Firefox simply because of its DOM inspector. Firefox has been instrumental in figuring out gnarly CSS problems. Plus it’s free.
A wonderful writing tool. I write everything in it, I’m currently writing this in Ulysses. It might seem a bit pricey, but if you do any writing it’s quite worth it, especially if you like Markdown.
Last but certainly not least, Rdio. Nothing could be done without Rdio. It’s the finest music streaming service out there (I’ve tried them all) and so much better than iTunes’ Radio. Superb design and great music selection, Rdio is always running on my Mac.
For the Summer Campaign it took a little more than a week to get everything done. This may seem like a long time, but the early stages of any design take a bit of time while you’re figuring out what you like and what you don’t like, what works and what doesn’t work, etc. Also, I was learning to use Sketch so that added quite a bit of time to development, on top of that fighting with Macaw without a manual made things tougher. I was also developing a workflow which I’ve used later for subsequent campaigns and that takes time. I simply mention all this so you don’t get discouraged if coming to grips with new technology is eating up your precious time.
So there you have it, a glimpse into just some of the technologies that Bruji uses. This is just one side of the coin, on the other side we have Xcode and all things iOS-specific, but that’s a different can of worms for another day.
Hopefully you’ll find something interesting here that you might be able to use for your own projects. If you do, let us know in the comments. Also let us know if you enjoy these articles, we have plans to write more technical ones in the future once we can actually find the time 🙂