I’ve just added a new project for Why Digital to my portfolio.
This Sketch file contains templates of the Mail and Safari interfaces from iOS7. There are individual artboards setup for each app in iPad and iPhone sizes.
I created this template to visualise websites and email designs running on iOS devices. Simply drop your design in to the template and edit the titles and urls for perfect visuals.
Feel free to download the Sketch template and use it as you wish in your next project.
A number of years back I came across a hybrid vector/bitmap drawing app for Mac OS X called DrawIt. It combined non-destructive vector drawing tools and powerful bitmap filters. This seemed a perfect combination for icon, user interface (UI) and app designs in the early world of iOS. DrawIt however suffered from a number of issues which prevented it from becoming more than just another promising drawing app.
Fast forward about four years and the developers of DrawIt, Bohemian Coding, have released the the third version of the spiritual succesor of DrawIt, Sketch. It is a great app for design in general but really shines for user interface and screen based design.
For years Photoshop has been the tool of choice for most UI designers. Photoshop is a fantastic all round tool but it is not geared specifically towards UI design and this is where Sketch fits in perfectly.
At its core Sketch is purely vector based, you could argue that it is actually closer to Illustrator than Photohop in this respect, and this is one of Sketch’s biggest strengths.
The first thing that you notice about Sketch is the interface. It is simple and focussed on the task at hand. There is no clutter with unnecessary options or tools, but don’t let that fool you. Behind the simplicity lies a powerful and sophisticated graphics application.
Sketch and resloution independence
In a world of increasingly different screen resolutions, designers have had to change their way of thinking and working. Gone are the days of creating a design which works at the standard 72 dots per inch.
In the case of app design this can mean creating multiple different versions of the same image. Resolution independent artwork has become ever more important, therefore creating non-destructive vector artwork allows us as designers to easily resize images for different devices.
Whilst Sketch’s vector tools may not be as powerful and sophisticated as those found in Illustrator they are perfectly suited for the task at hand. Non-destructive Boolean operations allow for the creation of sophisticated shapes from common primitives. Precise control of shapes can be achieved through Sketch’s contextual left panel. This allows you to ‘design by numbers’ which allows for pixel perect control. This is particularly important for lower resolution screens/artwork.
Sketch’s artboard system is perfect for mobile app design. You can setup multiple artboards of any size, a feature which has been possible in more recent versions of Illustrator. Artboards can be divided across multiple pages. This is useful to organize and visually create structure in a project.
With purchase of the additional iOS app Sketch Mirror you can easily view your artboards on iOS devices as you work. The latest version of the mirror app works flawlessly, removing some of the frustrating bugs from earlier versions.
Exporting your Sketch designs
The export features in Sketch are a delight to work with. They remain one of its biggest selling points for me.
Anyone who has been involved with designing apps for iOS or Android will tell you what a chore creating the images for these can be. Often you will need to create multiple versions of the same image at different resolutions. Sketch makes this task easy through powerful export controls.
You can define anything you want to export from artboards in their entirety through to objects, groups of objects and custom defined areas. Add to this the ability to easily output each item at multiple resolutions and you start to get an idea of just how powerful this feature is.
Simply select what you want to export and then define resolutions you want and Sketch handles the rest. This even includes appending whatever identifier you want to the files (@2x etc.). Since Sketch is vector based this means you end up with the highest quality imagery at each size. It is huge timesaver especilally if for example you are dealing with Android and its various resolutions (ldpi, mdpi, hdpi, xhdpi, xxhdpi).
These are just a few of my favourite features of Sketch. There are numerous other cool features I could go into detail on, such as the built in templates for the likes of the iOS UI and Icons, CSS attribute creation, the super useful reusable symbols and more.
I really like Sketch and have been increasingly using it in favour of Photoshop. Recently, I have started transitioning as much work as possible over to Sketch. In fact I have re-created artwork for some ongoing projects in Sketch as I see it saving a lot of time in the future. Sketch isn’t a replacement to Adobe’s tools but is great app to complement them in the right circumstance.
I recently worked with the digital team at Camping and Caravanning Club to help with the development of responsive versions of their club site pages.
The aim of the project was to develop a responsive page design for the pages showing details about the campsites affiliated with the club.
I worked with the digital team to help bring to life their new designs for these pages in a way that would allow for them to be optimised for the variety of modern device, such as tablets and smart phones, which club members are increasingly using these days.
You can see the pages live now over on their website.
I have also recently worked with the club on creating a new template for their email newsletters which similarly is optimised for viewers using modern smartphones.
Say hello to Recipe Kitchen a brand new cooking app for iOS.
This is a Photoshop template that I created based on the wildly popular Samsung Galaxy S3. You can download the PSD file and use it as you wish. Download the PSD file
This is an iPhone 5 template that I created from scratch for presentation purposes. Feel free to download and use the PSD file for your own uses. Download the PSD file