In a web design and development agency such as ours, designers and developers have to work together closely on projects. An important part of every web design and development project is when web designers hand over their designs for the developers to work on. Through our experience, we’ve noted down practices that web designers can apply in their designs to ensure the handover process goes smoothly and developers have no issues with interpreting their designs. In this article, we will go through 3 best practices for handing over web designs to developers. These tips will help you prepare your design assets the right way to minimise any inconsistencies in the development process.
1. Design your mockups on a proper size
The recommended best sizes to design mockups on are:
- Desktop: 1366px
- Tablet: 768x1024px
- Mobile: 414x800px
When designing, bear in mind that different browsers on different mobile and tablet devices have varying scrollbars and behaviours. This may cause slight variations in how the developed product turns out. Normally, tablet-specific mockups are not necessary unless you intend to specify many things. If not, developers can adapt your desktop and mobile designs to fit tablet screens.
2. Know what screen size works best for your project
According to StatCounter, the most used desktop screen resolutions from March 2019 – March 2020 are:
- 1366×768 (22.98%)
- 1920×1080 (20.7%)
- 1536×864 (7.92%)
- 1440×900 (7.23%)
- 1280×720 (4.46%)
One reason why 1366px is the most popular is that the design integrity is better maintained when scaling upwards to 1920px as compared to vice-versa. This is especially important to note when working on responsive designs.
3. Use a reasonable container size for your content
Lastly, a fundamental practice is to use an appropriate container size, meaning to leave the right amount of space on the left and right of your content. For desktop mocks, commonly used margins range from around 120–200px. In fact, Adobe XD has a default grid layout that you can use as a guide for your designs.
For typically used content widths, you may refer to the table below:
Improve the quality and workflow of your projects
Apply these 3 best practices when designing your website mockups, and you’ll find your handover process will be much smoother. This will help improve clarity for your developers and the finished product will come out closer to your expectations too. For more information and tips on the handover process of a web development project, feel free to drop us a line!
