Design Specs| The DOs and DON’Ts of creating one

Galaxy Weblinks
Design + Sketch
Published in
3 min readApr 14, 2021

--

Photo by UX Store on Unsplash

The smaller details and subtleties are what make you stand out from the crowd. And this applies to every design detail of your app and website. However, going after these details all the time is a tedious task, and it can be better handled with a design specification document. This blog revolves around this highly effective document, so let’s dive right in.

What are design specs?

Design specs (abbreviated from design specifications) are a blueprint for providing detailed information from designers to developers about the user interface details, design assets, possible user flow, and layouts, etc.

To elaborate, here is the information that is present in our design specs document:

  • User interface information — this includes details about color pallets, typography, measurements, etc.
  • Design assets — icon and button styles, media, etc. It includes all the design requirements that cannot be coded can.
  • User experience layouts — information regarding user flows, their possible behavior, placements of features in line with this behavior. This way developers can understand the reasoning behind features and give priority as well.
  • Other vital information — any information that isn’t included in the above categories can go here. It can include research findings, prototype links, older references, etc.

DO’s and DON’Ts in design specs creation

Design specs are all about improving designer-developer communication and collaboration while streamlining the process to help save time, efforts, and money in an efficient manner. To make this happen, you will need to ensure that there is no room for errors in creating design specs. Let’s see how this can be done:

  • Do keep your design specifications document complete in every aspect. You can have separate design specs for your web application and mobile application, but they should have all the information that developers need at any given time. Smaller things like spacing values, grids, social media icons, opacity values, and similar details should not be missed out on.
  • Keep the document easy to read and understand. You can use image references, hand-drawn sketches, etc to convey any specific requirements. A presentable and organized document will be very useful for the developers and designers.
  • Continuous updates and iterations need to be done in the document so that last-minute requirements do not trouble anyone. And these iterations should be done systematically so that developers can make out the new changes and amendments accordingly.
  • Involve developers right from the start, instead of asking them for their feedback only when the document is ready. This way their inputs can be included right from the beginning and the feasibility of the design can be cross-verified. And this ensures that developers are informed about the requirements from day one.
  • Don’t give a range of values/color options. You should be as specific as possible to avoid any rework.
  • Design spec docs can be created during research, analysis, design phase, or even validation testing phase, so it’s never too late to have one.

As we have covered in the blog, a design spec doc serves many vital purposes. It especially comes in handy during the developer handoffs. Communication and collaboration become way easier when there is a common reference document for all to utilize. You can ping us here if you are still not convinced with this whole idea and get an inside look at how we make it work.

--

--

Galaxy Weblinks
Design + Sketch

Transforming forward-thinking ideas into bold digital experiences.