Framework Design: using Sketch to meet client briefs, from ideation to handoff
“By having all the information in one place, our development team can export the bits they need, as and when they need them”
We’ve designed Sketch to be a platform for your entire collaborative design process. That means from your first ideas and rough wireframes, right through to developer handoff, we’ve got you covered.
But how does that work in practice? To find out, we sat down with Luke Bamford, creative director, and Kara Vicca, UX/UI designer from award-winning Framework Design. They gave us the inside track on how they use Sketch to work collaboratively across the entire agency, and how it helps them deliver on client briefs.
Q. After you’ve had your initial conversations with a client, how soon do you bring Sketch into the design process?
Luke Bamford: Every project that comes through our doors starts with a Discovery session, which typically is booked in after the initial call. Discovery sessions are designed to introduce our clients to a range of different ideas, concepts, and themes and understand what they want to achieve from their project. We first use Sketch to create a document that brings these ideas together, which we then present throughout these Discovery sessions.
Creative director Luke finalizing the design review before the handover to the developers.
Q. How many people are typically involved in the design process on a project, and what are their roles?
LB: We typically tackle a design problem with a pod of people. Our managing director, Stephan, deals with the initial points of contact and outlines the work processes to the client. We then gather a pool of talent with the appropriate skill sets, which usually comprises of an account manager who runs the day-to-day, myself and members of the design team, Paul the technical director, and selected developers.
Developer James browsing the asset library for exporting.
Q. How do you use Sketch within the process? Do Workspaces help your team work together?
LB: The design team and I work in Sketch from the conception of the project until the handoff with the developers. Paul and the senior team review the designs and use the Sketch assets library to begin the development process. Accounts and directors review the designs with the clients at every stage of the design process.
Kara Vicca: We use our Sketch Workspace for all of our version control, and to help us work collaboratively when people are not in the office. The fact that it automatically syncs all our changes has also saved our bacon on a couple of occasions! When you’re working solely on your local machine you always run the risk that the file may be accidentally deleted or corrupted. Storing document in our Workspaces mitigates that issue.
Q. Are there any specific Sketch features or tools that help the designers at Framework produce a great finished product?
KV: I find the Components View really useful when creating website designs in Sketch. It allows the team to organize different elements of a web page, such as icons and shapes, into folders, so it’s easy to replicate them consistently across the whole website design. We also use Color Variables to ensure that color palettes are consistent across a project.
UX/UI designer Kara Vicca working on Framework’s next award-winning project.
Q. How do you handle developer handoff? What’s the process, and how do designers set up their Sketch documents to make life easier for the dev team?
KV: We used Sketch to create a template handover file, which acts as a complete guide for the developers when it reaches their stage in the process. We use this template for every project and it contains key information such as typography, imagery, color palettes, icons, logos, and buttons — as well as guidance on the look and feel of page structure and content. By having all this information in one place, our development team can open the document and export the bits they need, as and when they need them.
Reviewing the Warhammer components ready for development.
Q. We recently introduced real-time collaboration to Sketch. Have you adopted it into your design workflow?
LB: On larger projects, where we need multiple designers to work on it at the same time, real-time collaboration has been a lifesaver. Not only has it helped us shift larger volumes of work, it’s helped us work at a quicker pace — meaning we can be competitive when it comes to meeting shorter deadlines.
We love seeing how people and teams are using Sketch to create amazing products. If you have something you want to share with us, let us know on our social media channels using #MadeWithSketch.
