For years, we had a simple workflow from design to development, that I assume, most other agencies also utilized. We worked this way, like cavemen, until some new software emerged recently and brought us into the modern era.
Often times, we used software for purposes that it might not have originally been intended for which made the process challenging. Does this workflow sound familiar to you? A designer creates a new website mockup in Adobe Photoshop at a fixed width, creates a .pdf of all the intended pages for review and after completing the design, sends the .psd over to the developer for.
This creates a couple hurdles for the designer:
- tough to keep track of font sizes and colors
- file sizes add up quickly
- usually end up with a different document per page
As well as some hurdles for the developer:
- make up responsive layout off of a fixed design
- needs to have knowledge of Photoshop to pull out any necessary assets
- might need icons in vector separately from designer
While Photoshop is an absolutely amazing piece of software, its intended purpose, however, is to edit photos. Trying to create a design that’s intended to be viewed on a computer as well as tablets and mobile devices can be a frustrating process.
So why do we keep doing this to ourselves? Well, we didn’t really have any other good options. Until now…
Sketch
In one of our previous posts, Tim spoke about our testing/thoughts on some new software really gaining traction in the design community called Sketch. I won’t go into much detail here since Tim already delved into that but Sketch is a vector based design tool that allows for multiple pages/artboards in one document, reusable symbols and styles, and also allows you to preview a design right on your phone!
InVision
Shortly after getting into Sketch, we also started using Invision. InVision is a prototyping tool allowing agencies the ability to send completely interactive prototypes to clients. We used to send a static .pdf of the possible designs/wireframes but can now send a website link where the client can actually click on page links on the design and move around between pages/trigger popups. This helps give a better understanding and preview of the potential website/app.
Sketch + InVision = ♥
These two companies have been working in tandem to make sure their software functions as smoothly as possible. There are so many great features that we now have at our disposal that make our workflow way more flexible than the way we used to work.
Beginning with Sketch, in the design phase, we have the ability to have multiple artboards with different sizes as well as desktop and mobile designs right in one document. We can also create resusable elements such as headers/footers or smaller components like employee info blocks. Adding in font styles helps us keep consistent font-sizing across the whole design.
The team at InVision also created a simple Sketch plugin called Craft that makes it seamless to sync our designs up with our Invision prototypes. Once our prototypes are updated, we can send that over to a client to get feedback. They can comment and draw directly on the prototype which helps decrease the amount of emails back and forth.
In the development phase, a new feature that InVision released recently (Enterprise level only), called Inspect, will help speed up development time immensely. Inspect lets developers download all of the prototype screen’s assets in one click. They can click on individual elements and view font-sizing/spacing, colors, and measurements at a glance. They can also copy CSS.
InVision has made a great video introducing this tool:
Workflow for a new age
Sketch and InVision usher in a whole new way to design for the web today. Allowing designers and developers to work together like never before. These tools allow us to save time and avoid a lot of the pain points that we used to go through.
If you haven’t used these yet, there are free trials to help you evaluate whether or not they’ll work for you.
Is there any software you currently use that you find beneficial? Share with us in the comments below.
