The software we\u2019ll be taking about here (for the impatient) are the following:<\/p>\n
- \n
- Sketch 3<\/a><\/li>\n
- Sass<\/a><\/li>\n
- CodeKit 2<\/a><\/li>\n
- Rubymine<\/a><\/li>\n
- Macaw<\/a><\/li>\n
- Firefox Developer Edition<\/a><\/li>\n
- Ulysses III<\/a><\/li>\n
- Rdio<\/a><\/li>\n<\/ol>\n
The Idea<\/h2>\n
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:<\/p>\n
- \n
- Dribbble<\/a><\/li>\n
- Behance<\/a><\/li>\n
- Google Images<\/li>\n<\/ol>\n
Armed with a good image, the brainstorming started. You\u2019ll find lots of photos in Google like this one<\/a>, 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<\/a> or this nice one on Dribble<\/a>, but none were quite right. So we extrapolate a little, we grab what we like and build from there.<\/p>\n
Design Flow<\/h2>\n
I created first the umbrella, chair, ocean and sand in Sketch<\/a>. 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\u2019re tackling a real-world project and not just following along with a tutorial.<\/p>\n
![\"umbrella-and-chair\"](\"https:\/\/bruji.com\/blog\/wp-content\/uploads\/2014\/11\/umbrella-and-chair-300x207.png\")
<\/a><\/p>\n<\/h3>\n
Palette<\/h2>\n
It is important to have a cohesive colour palette, you don\u2019t want your design to look like a rainbow unless that\u2019s exactly what you\u2019re shooting for. So based on that first image I created the colour palette for the rest of the elements. It\u2019s got nice warm colours that feel summery and light.<\/p>\n
![\"palette\"](\"https:\/\/bruji.com\/blog\/wp-content\/uploads\/2014\/11\/palette-300x51.png\")
<\/a><\/p>\nWhen selecting a colour palette, remember that Black, White and Gray are also colours<\/strong> and they mix well with pretty much everything.<\/p>\n
Black can be overpowering so use it sparingly or reduce it\u2019s 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\u2019t leave it behind, if you need more variations of colours in your palette, try mixing an existing colour with gray (in small doses).<\/p>\n
Sketch<\/h2>\n
Sketch<\/a> 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\u2019s 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\u2019s 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\u2019t even recognize CMYK colour values and is lacking some of the more advanced illustration tools you might find in Adobe Illustrator.<\/p>\n
Sketch\u2019s layouts revolve around the idea of artboards (though you don\u2019t have to use them if you don\u2019t want to, unlike Illustrator which forces you to create a sized canvas before you can start doing anything with it) and they\u2019re actually very useful. In artboards.png<\/a>, 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.<\/p>\n
![\"artboards\"](\"https:\/\/bruji.com\/blog\/wp-content\/uploads\/2014\/11\/artboards-300x188.png\")
<\/a><\/p>\nExporting 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\u2019re 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.<\/p>\n
The Bezier curve tool (called the Vector Tool) in Sketch is also the fastest and easiest I\u2019ve ver used.<\/p>\n
I don\u2019t want this to turn into a raving review of Sketch, so I\u2019ll just end by saying that object alignment has never been easier. Do yourself and favour and check the app out.<\/p>\n
Macaw<\/h2>\n
Macaw<\/a> is an HTML editor with the, sadly unfulfilled, promise of letting you create web sites visually instead of coding. I\u2019ve been pretty critical of Macaw in the past<\/a> and I stand by what I wrote, I don\u2019t think Macaw is ready for primetime yet. So why am I talking about it here if it\u2019s no good? Well, I think that for web mockups Macaw is excellent. Currently, with version 1.5.9<\/em> 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\u2019s fine.<\/p>\n
After exporting all my images in SVG<\/strong> 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\u2019s very easy to add breakpoints for different screen sizes and devices. I usually add a breakpoint for iPad at 800 pixels<\/em> (as opposed to the iPad\u2019s actual portrait width of 768px<\/em> to have a little buffer) then another for iPhone at 320px<\/em>.<\/p>\n
After you have all the elements in Macaw, properly named and properly placed, it\u2019s time to start testing those breakpoints to see how things react and what breaks. Don\u2019t forget to test them on an actual browser as well as Macaw\u2019s 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\u2019t like sites where they simply scrunch all the elements into a tiny window where you can\u2019t even read the text.<\/p>\n
![\"macaw-320\"](\"https:\/\/bruji.com\/blog\/wp-content\/uploads\/2014\/11\/macaw-320-300x248.png\")
<\/a><\/p>\nMacaw would be a lot easier to recommend if it were free (or worked as advertised). I\u2019d say it\u2019s a tool to keep an eye on in the hopes that one day soon they\u2019ll 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\u2019m one of the original Kisckstarter backers so I\u2019ll keep using it until they demand more money for a newer version.<\/p>\n
Lots of elbow grease<\/h2>\n
Now it\u2019s time for Rubymine<\/a> 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.<\/p>\n
Rubymine is an awesome IDE<\/em> for Ruby coding by the good folks over at Jetbrains. It\u2019s where I spend all day most days (when I\u2019m not designing or fighting with Macaw I\u2019m knee-deep in Rubymine). Both the Doghouse API<\/em> 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\u2019ve 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\u2019t live without it, it even has a very good built-in Database editor! I started out coding Ruby in SublimeText<\/a>, which is an excellent text editor but not an IDE<\/em> and doesn\u2019t 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).<\/p>\n
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\u2019s new website was built almost entirely, to great fanfare and general adulation, in Rubymine.<\/p>\n
So I integrate the craziness that Macaw wrote and tweak it in Rubymine. If we\u2019re going to reuse any CSS I try to convert it into SASS (or SCSS) for future reuse. This brings us to our next technology:<\/p>\n
Sass<\/h2>\n
Sass<\/a> is a CSS preprocessor. Basically it\u2019s a much better way of writing and using CSS. Let\u2019s 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\u2019s really lacking and often contradictory, it\u2019s 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.<\/p>\n
Sass makes working with CSS an almost joyful experience.<\/p>\n
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.<\/p>\n
CodeKit<\/h2>\n
Codekit<\/a>, as their website states, is like steroids for web developers. Basically it allows you to use all sorts of modern frameworks and preprocessors by compiling them all in the background and updating your web site every time you save. This might not sound like a big thing but it\u2019s actually huge. You simply write your Sass, Haml, Slim, Coffeescript, JQuery, etc and Codekit does the rest. CodeKit compiles Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript, TypeScript, Markdown and Compass files automatically each time you save.<\/p>\n
It will also alert you of any error you might have in any of those frameworks, very nice.<\/p>\n
The best part is there is nothing to install apart from the app, no servers to run or background processes to watch, you don\u2019t 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.<\/p>\n
Check it out.<\/p>\n
Firefox Developer Edition<\/h2>\n
Finally, it\u2019s time to make sure everything works on a real browser, for this I use Firefox Developer Edition<\/a>. It has all the bells and whistles a developer might need built-in and Firefox\u2019s 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\u2019s 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\u2019s free.<\/p>\n
Ulysses III<\/h2>\n
A wonderful writing tool. I write everything in it, I\u2019m currently writing this in Ulysses<\/a>. It might seem a bit pricey, but if you do any writing it\u2019s quite worth it, especially if you like Markdown.<\/p>\n
Rdio<\/h2>\n
- Behance<\/a><\/li>\n
- Sass<\/a><\/li>\n
![this one<\/a>, 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](\"http:\/\/www.wallpaperhi.com\/thumbnails\/detail\/20130320\/nature%20beach%20sand%20shore%20chairs%20umbrellas%20sunny%201920x1080%20wallpaper_www.wallpaperhi.com_16.jpg\"){kind=link}
![this one<\/a> or](\"http:\/\/thumb7.shutterstock.com\/display_pic_with_logo\/438595\/438595,1304417907,5\/stock-photo-suitcases-beach-ball-and-umbrella-on-a-beach-76439560.jpg\"){kind=link}