Sending a website design to a client, getting their approval, and moving things into development is extremely satisfying for a designer like me. Finally, it’s going to be developed, live, clickable, and, of course, subject to meticulous Q&A and testing.
This “handoff” from design to dev is critically important to the success of the project. It’s imperative that passing along design files is as seamless and efficient as possible. Giving detailed guidance ensures that our development team is 100% clear on what’s what and how everything is translated to a live, functioning website.
As web/UX designers, we spend countless hours designing a beautiful, purposeful website. And as important as it is for things to look incredible, it’s just as important to be (very) specific in providing guidelines and guidance, ensuring everything is pixel perfect in development.
How will this function on hover? What is the user being asked to do and what are we driving them to engage with? We meticulously comb through each page of a website, providing well-organized PSDs, style guides, and design files, to make the development process as smooth as a baby’s bottom.
A style guide, in this example, serves as a comprehensive presentation that establishes and clarifies style to improve communication. It enforces consistency across multiple designs and establishes best practices in visual composition, usage, and typography. In a nutshell, it’s a foolproof user manual that defines the ins and outs of the website’s style and functionality.
We include things like font and header styles, sizes and weights, line spacing, kerning, colors, image guidelines, hover states, dropdowns and navigation menus, page transitions…the list goes on.
This essential list of formalities might appear to confine the developers to only gluten free pancakes and nut free trail mix, metaphorically speaking, but when it comes to the transition from design to development, there’s no such thing as too much information.
It’s another example that final products you see and interact with, while they may appear to be simple, are the product of complex and comprehensive planning, styling, and organization. The hustle and hard work that goes on behind the scenes is what makes an excellent website look good, and most importantly, work well.