Building with Zeplin: Web Designers and Developers Unite!

This year at Kicks we've gotten even more efficient by switching to a tool called Zeplin to facilitate the transition from designing a website to building it. Up until now, we've almost exclusively built sites from Photoshop files. Below is a quick outline of building a website from the ground up using Zeplin and the benefits it provides over Photoshop.

Note: Not sponsored at all- we just appreciate tools that make our lives easier. 

Zeplin - Seeing the Schematic

The most important step when tearing apart a Zeplin project is formulating a plan. Like most endeavors, foreseeing pitfalls and safe paths will help eliminate wasted time and frustration. No matter whether it's Web 2.0, 1.0 or Geocities, websites generally have 3 or 4 distinct regions.  The header, footer and content areas. While it's not as common as it used to be, sidebars are another area of note in a webs design. When you're viewing the design you should be able to visually identify these regions without much trouble.

One easy trap to fall into is to just consider the home page when you're making these distinctions. To avoid this "time suck" look at all of the designs for the project at once and note similarities. Generally, a website is not just a home page.  It's an about page, contact page, blog, etc... If you're planning out the header, for example, make sure you take note of every design and account for differences. This will help you to avoid having really messy CSS with tons of exceptions. The simpler your CSS is the easier the code will be to view, understand and maintain. This is easy to do when viewing a project in Zeplin. You'll be able to see all the designs by simply scrolling back and forth and taking mental notes on each one.

CSS - Build your Bread Base

One of the nicest features of Zeplin and a clear pro over working directly in Photoshop is the CSS that is automatically created. The global CSS for headings, paragraphs, etc... is a great way to start your CSS. This is where you create the consistency in your website. The more thorough you are at this step the cleaner your CSS will be at the end of your build. Zeplin will provide you with all of the font families, sizes and weights that you'll need.

In addition, when you're in a single page design, clicking on elements in Zeplin displays that element's width and height. From there you can set element max-widths, which is a very important part of making a website responsive for everything from large monitors to tablets.

Images - Grab Your Assets

Another great feature for Web Developers working in Zeplin is grabbing all the assets for a single page design all at once, including all resolutions. Pulling images out of Photoshop files can be very time consuming and can result in missed images or lower quality images. The one drawback in this arena is the lack of ability to download all of the assets, project-wide. While being able to download all of the images for a single page is nice it can result in duplicate assets once you grab everything from all the pages.

Content - Tickle the Text

Adding content and images is perhaps the last thing a site requires, but it's where Zeplin really shines. Of all the Zeplin benefits the ability to easily copy content straight from the design to your clipboard is by far the nicest. Unlike copying content from Photoshop which requires multiple clicks and can be difficult to see and select at times, Zeplin does it better in two clicks.

Clicking a paragraph or heading element displays the content in the Zeplin nav bar that can be copied completely by clicking the copy icon without having to select the entire thing.

Keep it Simple

This, of course, is a simplistic outline of building a fully responsive web design.  There are many more considerations you'll need to make to end up at your final product, but the general idea of keeping it simple should help guide any decision you make in web design and implementation. If you have questions about this, drop us a line!