How To Prepare Optimal Design Files For Development

Design to Development; let’s discuss everything in between. What are your most valuable resources when it comes to completing a stellar website for your clienst?  We’d like to tell you it’s your developers. A team of experts you can consistently rely on to complete the project. Ninja coding skills with a vault full of pixel-perfect projects. How about the one thing that you own?  Perhaps it’s your time. How can we help you get more of it, besides calling on Marty Mcfly? 

Communication plays a big factor.  Here, we’ll lay out what developers need from designers for a more efficient process and the very best use of your time. The end goal? Your client raves to you, you rave to us. Addressing the assembly line is how we’ll enact a progressive partnership. We present our piece-of-pie guide to making design to development a breeze.  

First things first.. the ground rules:

1. Have a basic understanding of how the development process works. Yes, our results do look like things of sorcery but not everything can be translated from design to code. Reviewing technical limitations as well as possible challenges during the design phase will help with a faster turn around time.
2. Time and Scope. Understanding your budget and due date will help when working with advanced components.
3. Fonts, colors, etc. Ensure you have proper licenses to use certain fonts.
4. Plan for variances in content and how that could change the design. Will small or larger sized content break the design we previously planned for? This should be kept in mind for websites like WordPress updates that are used frequently.  

Include these tips and every project manager will be praising your name.

Sitemap,  User Flow, and Prototypes

Many times the designer will already have a sitemap on-hand, previously used for the client. If the case, this is a quick and easy step. While site-maps don’t usually require a ton of effort, the influence on the final website can get complicated.  

An A+ site-map will show connections between webpages, web-page trees, and website content. Some sitemaps are strictly used for SEO purposes so that crawl bots can easily spot them. A visually inclined developer will prefer a visual sitemap, while an HTML sitemap is favored for those who prefer to read. Overall, the goal of the sitemap is to set priorities for navigation, define the desired content experience, and ensure designs align with the information architecture.  

“Site mapping a website is like an architect producing design drawings for a house – it gives everyone involved in the project a framework to follow and makes sure you don’t come up against any design snags.”

   Irwin Hau, Director, Chromatix

 Recommendations:

• InVision—Create highly interactive mockups.
• Framer—Design elaborate UX flows.
• Marvel—Simplify the prototyping process.
• Origami—Bring your mobile and web project ideas to life.
• Proto.io—Design prototypes that feel real.

High-Quality Design Assets

Share your secret sauce.  Youtube videos, the animation from a Pixar movie, etc. Help us navigate your idea.  The goal is to see eye to eye.  Especially when it comes to complex projects.  Items to consider:

• File Naming Conventions helps with maintenance, search, and will ensure files are in a familiar language to all.   
• Organized and Named Layered Design Files: easier maintenance and file transfer options.  
• Style Guide: denoting H1, H2, and H3 for various setting sizes and varying paragraphs.
• RGB Settings: color guides (such as designing for RGB) can be a useful way to provide models.
• Flat and Expanded Versions: providing both so nothing gets dropped. Example of fonts not rendering flat versions.
• Annotated Previews: animation examples and code snippets should be included to show how design elements will function.
• Hover Effects & Rollovers: the change of an element (color, size, shape, image) when you put a mouse over it.  
• Consistency: ensure all margins and padding are consistent throughout.

Lastly, designers should always provide FINAL designs. These should include every detail they want in the design (so the developer doesn’t need to make assumptions.) All pages should be mocked and confirmed. When the pages are already 100% approved it makes for a day and night difference. The preferred text is ‘lorem ipsum.’  We can always update the content later.  Overall, the key is having the layouts 100% approved before we dive in.

Export Assets

Let’s see what you got!  Depending on the source file you prefer to use, some will require that you manually upload documents, while others are automatic.  PSD, AI, EPS, and Sketch will also require different software, so making sure that everything transfers without hiccups are important.    

The three key assets to remember are original images, source icons, and fonts.  

Recommended design developer tools:

• Omnigraffle- makes it easy to draw arrows, add symbols, and other keys to explain the particulars of design.
• Avocode- allows you to export colors, image assets, fonts, text, CSS, sizes, and dimensions from Photoshop or Sketch. 
• Inspect from InVision- inspect promises to be another awesome handoff tool with a combination of features available

Mobile Mocks

Breaking news…we live in a mobile world. The last time we received a request solely for a desktop design was… well never. Developers like stacked and responsive templates just as much as your end client does. Consider providing views for key breakpoints with mobile and tablet if specific design adjustments are needed. Understanding what your customer’s purpose is will also help determine where most of their traffic will come from.  For example, an online shoe retailer had 85% of its traffic coming from stunning mobile ad campaigns.  We can make sure the mobile design is stacked first, making it extremely responsive and user-friendly.   

Content

The best piece of advice is to have a separate word doc for each page linked to their file naming convention or sitemap.  There are many pieces of content that get vetted going from design to development so having an individual doc for each will be useful. 

Design to Development Conclusion

One last tidbit for working with developers. We draw our inspiration from designers. Our work is complementary. The designers meticulously influence the end-user to navigate each website to the desired end goal. The developers? Our minds look something like the Matrix and it’s your vision that enables it to life. When we combine our skill sets Da Vinci has to take a bow. Still hesitant on how to optimize each file for development? Just ask! With each project, developers learn more about our designer’s specific workflows and the system improves. Now we’d love to hear about your best practices. Drop us a line below letting us know!