Lush Digital came to ustwo looking to create their first mobile experience, with the aim of augmenting their site and bridging the gap between online and in-store experiences.
Together we built a team involving both companies, allowing for quick decision-making and skill-sharing. My role was to come up with ideas, organise which features were worked on and construct the interface in stills and motion design.
Starting a project is a good opportunity to refresh your thinking and learn new things. We were keen to try out Sketch from Bohemian Coding, having heard good things about it.
It's got a shallow learning curve and has many of the best features that have made the Adobe Creative Suite and Creative Cloud so popular over the years – it's like a mix between Photoshop, Illustrator and InDesign. In this walkthrough, I'll explain our day-to-day workflow on the project, including exporting assets and supplying them to our developers.
Launching Sketch, before you start working you need to set up an artboard to match the dimensions of an iPhone 6 – 750 x 1334 pixels – and place some background artwork as a holder. In this example I'll be making a shopping basket that mirrors the Lush website.
Commonly used icons and buttons can be created and then stored as symbols. Making symbols means that changes inside one instance will be reflected anywhere that they've been re-used – handy if you have the same elements occurring across several artboards.
For consistency, I'm checking my horizontal and vertical alignments against the grid, which I've set up inside Sketch. In this case, I'm using a base unit of 30 pixels as a spacer. Sketch enables you to pre-set type styles and sizes and re-use them across a project, which is what I'm doing here.
0 comments:
Post a Comment