Published on | Prototyping: From UX to Front End — Medium Aaron Smith

Airships and Design Tools?

Photoshop is and has been the go-to tool for image manipulation and design. With years of vetted features and enormous amounts of community input, it has become the headliner of the Adobe Creative Suite, even becoming a slang term synonymous with image manipulation. The primary tool for “raster images,” this tool of creative pixel pushers has, over the last few iterations, also begun support for the ability to edit or render text, vector graphics (especially through clipping path), 3D graphics, and video. Unfortunately, these abilities are in their infant stages, limiting the photo editing juggernaut to a pixel-based format, unlike some of its newer competitors and even programs within the Adobe Suite.

Sketch is a relative newcomer to the market, specializing in web design and supporting a vector-based format. Developed by the Dutch firm Bohemian Coding, this software platform has become an increasingly popular choice for web development because of its inherent support for vector graphics and text, well-designed interface, and product scalability. Though increasingly popular amongst both UI and UX Designers, and often held in higher regard than tools like Illustrator and Axure, the true limitation in Sketch lies with its current Mac-Only platform restriction, cutting out well over half of its potential market, but creating an incredible need for companies like Zeplin.

Zeplin is a web application that enables designers and front-end developers to collaborate efficiently by generating specs, assets and style guides from designs generated in Sketch. Its purpose is to foster communication between both parties without any need for design knowledge from the front-end development team or vice versa. The ability to comment on designs, mention other users, and share designs publicly makes it an incredibly apt tool for not only passing work between teams, but also for client presentation. Zeplin provides a level of detail that is clear for client understanding and but also advanced enough for developer support. The generated CSS that it provides, though not always aware of browser support, best practice, or sometimes reusability, is an incredibly helpful starting place for ensuring that a designer’s vision comes to fruition.

Better Inflate your Method:

For the last 18 months, design team has put Sketch and Zeplin at the core of our UX and UI tools. The resulting improvements in team integration and client communication have not only positively affected budgets and timelines, but inter-team and client relationships as well.

For UX and Design professionals, there are a multitude of advantages to utilizing Sketch over Photoshop and its Suite Siblings:

Scalability
Designing with vectors instead of pixels. Designing at 1x allows for easy scalability of elements and very high-quality graphics. When ready to export, the designer or dev can easily export png, jpg, eps, svg, or tiff at any desired scale, making it easier to reformat to varying breakpoints.
Style Management
Better shared text styles. Style management is much simpler and easier to use than Photoshop and Illustrator. The management panel is not hidden away and is easily adjusted to alter text throughout the document.
Experimentation
Artboard and page organization. Have you ever had a project that was 50 separate large Photoshop files? Sketch can manage hundreds of artboards and tons of pages, all within one very small file. It’s a miracle.
Streamlining Consistency
Symbol organization. It is simple to turn any layer, or group of layers, into a symbol that can be utilized throughout a document.
Prototype Integration
Integration with prototyping tools. Prototyping tools such as InVision, Flinto, Principle, Framer, and many more integrate much smoother with Sketch than any adobe product.

Illustrating a Better Development Process

For our development team, one of the most appealing aspects of the Zeplin approach is the ease with which assets and styles can be extracted. For each item on the artboard, there is a details panel that shows the specific items styleguide and the assets contained within, formatted into SVGs, PNGs, and JPEGs where appropriate. Within the details panel, developers can find necessary details ranging from the width and height of items to computed CSS that helps accurately match the color, size, and weight of page fonts. Long gone are the days of searching through grouped and unnamed layers attempting to find images hiding behind overlays and type treatments buried behind multiple grouping folders. Here are the days of project wide asset downloads, color palettes, and font styles dynamically pulled and compiled into a format that allows for easy download and implementation.

Like the Version Control tools that developers hold so dear, Zeplin features rigorous revision tracking and annotations, with updates easily made simply by updating the related Sketch file. Revision tracking allows the client and the project team to quickly pinpoint client changes and ensure that each requirement is being met throughout the Agile process. The annotation panel helps enable UX and Design teams to accurately convey their thoughts for every treatment, behavior, and motion requirement in a way that accurately illustrates the points location. These important tools further bridge the gap between design and development standards, and easily track all changes throughout a project’s lifecycle in a visual way that was previously muddled by endless emails and screenshots.

From a Quality Assurance perspective, the use of Zeplin greatly reduces the time and effort needed to adequately check spacing, assets, and other attributes of a web application. Without the need for additional software like Photoshop or other design tools, QA teams are able to pull accurate style guides and even include this information in screenshots and documentation when providing feedback to the development team. Thanks in part to the “Notes” system bundled into Zeplin, if one were so inclined, all communication can even be handled directly inside of the web application, allowing for full transparency between teams. This simplification of communication creates a more concise and efficient hand off between QA and other teams.

The Web’s Sinking Ship

The Adobe Suite and Sketch have been at war the last few years to gain traction in the expanding web design and development marketplaces. Though previously the name synonymous with any design work, Adobe’s grasp on the market share is slipping in a real way. The vector based Sketch and it’s Zeplin counterpart have created a seamless design and development integration that can no longer be ignored. In recent weeks Zeplin has been Beta Testing an Adobe Photoshop plugin that is intended to mirror the utility of the inherent Sketch functionality. Despite this addition, no matter what filters you put on it, Photoshop was never built for the web, and the new names synonymous Web Design are Sketch and Zeplin.

Zeplin and Sketch Fly Far Above Photoshop was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Zeplin and Sketch Fly Far Above Photoshop

Cool stuff, every week

More Articles