Univers Labs Web Design Guide

How to Design for Univers Labs and Ensure that your
Digital Designs are Developer Ready

Published in

Univers Labs

7 min readAug 25, 2020

Following over 300 digital design and development projects, we have compiled our experience into this guide to ensure that your designs are fit for the web and look amazing when finally built. This is the very same guide that we use internally at Univers Labs to ensure that our designers produce the highest quality and efficient projects.

Guide Contents 📕

Key Points
Design Software
Break Points & Safe Areas
Design Annotations
Components & Style Guides
Content
Fonts
Assets
Layout Modules
Developer Ready Design Checklist
Useful Resources

Key Points 🏹

Designs should be completed in UX/UI software such as Adobe XD or Figma.
All designs must be optimised for the breakpoints and safe zones.
Take note of the highly important content guidelines.
Check our designer checklist for elements that must be designed for the web.
Make use of master components and component states inline with the atomic design paradigm

Design Software ✏️

We recommend completing designs in Adobe XD. Adobe XD is fit specifically for designing digital UX. It makes working on a project dramatically easier and ensures that what you design can be built to the highest-quality standards.

Software

Status

Notes

Adobe XD

✅ Preferred

Figma

🆗 Alternative

Prototyping is not as efficient

Sketch

😒 Not advised

We don’t like it as much 🙃, developer tools not as useful

Adobe Illustrator

😒 Not advised

Buggy, causes fractional pixels, designed for illustrating.

Adobe InDesign

⛔️ Banned

Not fit for professional developer ready designs.

Designed for print publications and typography.

Photoshop

⛔️ Banned

Not fit for professional developer ready designs.

Designed for photo/bitmap post-production.

Breakpoints & Safe Areas 📐📱 💻 🖥

Designing for the web is challenging because of resolution management across multiple and changing mobile, laptop and desktop resolutions. At Univers Labs, we support five device categories in our project proposals/contracts. To ensure the websites we build look great across all of these devices, we use designs that are optimised for three breakpoints with responsive scaling in between breakpoint widths.

Feel free to use our pre-made Adobe XD Templates which are already correctly setup.

UL Breakpoints v1.4 21st July.xd

Please ensure you check and confirm the proposal/contract for the supported breakpoints. Some contracts may offer more than three breakpoints as per our extended Full Breakpoint Table.
Please ensure your design files art boards are set to the above dimensions and that you are using guides or layout grids so that designs are optimised for the safe areas.

Design Annotations 📝

Where necessary, you should annotate your designs to indicate anything that isn’t shown. You can add these annotations on another layer.

These annotations could highlight:

Animations (Speed, curves etc, example After Effects is acceptable. Even something like “fast and flashy, gentle and delicate, subtle, not subtle”)
Show / Hide functionality
How the design should scale on different screen sizes
Where something is a button and what it should do.
Anything else you think is worth noting
Rollovers / other states

Style Guides 🎨

Make use of XD’s or Figma’s master component system and states to ensure consistency of reused elements throughout your design. It’s likely you’ve designed with a set, it is helpful for us if you have a separate art board that shows all of these styles. It should show:

Content

Content Plan
Ensure you have a good understanding of the content plan for the project you’re working on. An initial content plan is usually provided shortly after a project kick-off with the end client. It should contain:

Sitemap
Audiences
Summary list of content for each page
Functionality for each page
Examples, references, and notes

Our Content Process
At Univers Labs, the content process is a two-way street. We collaborate with strategising and advising a client on the best way to present content throughout a site or app via the following process:

Realistic Content
To ensure our designs can be properly reviewed and tested we must ensure designs use content that is either from:

Worst Case Content
Make sure that the content used fits a “worst case” scenario: If you feel a section will need a lot of text from a client, ensure that it works with a lot of text. If the content plan says we are bringing content over from an existing website’s blog, try and identify the “worst-case” content. Lots of formatting, images, text, etc and try to fit it in to your designs. This will save headaches later on in the process.

Content Constraints
Where you advise limitations and rules to content within your designs, you should configure text and image box constraints in your design software and make sure you annotate these.

Visual Content
You should use client on-brand and relevant imagery or industry applicable stock photos (unsplash is a good source). Photos of Cats (whilst utterly wonderful) are not appropriate. Take a moment to do image searches for contextually relevant images. Try to ensure these are in the public domain and available for reuse.

Fonts 🔡

Make sure that all fonts used in your designs are able to be used on the web as webfonts. In the first instance, you should check the following sources for the font and if it is available as a webfont.

Google Fonts
Adobe Fonts

If a font a designer wishes to use is not available on these sites, we ask that they contact us before using the font as we will need to procure it correctly.

Assets 💾

Ensure that you mark assets (icons, logos, images) in your design as being exportable from your design software. In XD this can be done by selecting “Mark for Export” on the objects.

If you are providing bitmap (photo, pixel) assets, you should make sure that they are at least 144dpi for use on Retina displays.

Layout Modules

For web design, Univers Labs always uses layout modules via a CMS. This means that the design is broken into distinct design elements that logically can be reused throughout a website. This allows our users to create new pages easily from a library of layout modules, giving them the flexibility to expand and adapt their website.

When designing layout modules, keep in mind the following points:

At Univers Labs, layout modules need to work across our minimum three standard breakpoints.
Layout modules should be designed to work and look good in any combination with other layout modules.
To ensure a consistent experience and design, layout modules should be made up of reusable component instances as per the Atomic Design Methodology.

Univers Labs Developer Ready Design Checklist ☑

Designs have been reviewed by a developer and 2nd UX designer for checking fitness for development
™️ Favicon is designed
🍪 Has the client supplied an up to date and GDPR compliant Cookie Policy and Privacy policy documentation? Can this be designed for all breakpoints? If not why and how can we make it so it can?
📝You have provided annotations for design details such as responsive and interactive behaviour.
📱💻 Ensure that all art boards are available in one XD/Figma file per page template with corresponding breakpoints art boards next to each page/ screen art board.
💾 Assets such as icons and illustrations are marked for export
Content meets the requirements set out in this guide
🔍📐 Have you checked your design safe areas for each breakpoint?
📱Does mobile look useable on landscape? If not what should change?