Design handover
The goal of this page is to document how to streamline the process of delivering design assets for developers to implement.
How we build websites
Modular setup
To ensure efficiency and consistency in both the design and development of our websites, we adopt a modular approach. Most pages on the websites we build consist of individual modules (also called content blocks) that are stacked on top of each other. A module spans the full width of the website.
For instance, on Tinloof's homepage (snapshot below), you can see how we have used three different modules: Hero, Projects Carousel, and Service Grids.
These modules are designed to work together seamlessly, allowing us to create a visually appealing and cohesive website that meets our clients' needs.
By using a modular approach, we can build websites more quickly and efficiently while ensuring that they are consistent in both design and functionality.
It also allows for easier updates and modifications in the future, as individual modules can be added, removed, or rearranged as needed without disrupting the rest of the site.
Content management
Content managers can focus on creating content by reusing customized modules that match the brand's aesthetic and functionality.
We use Sanity, a user-friendly CMS for easy management of content and modules.
Fixed layouts
Although our approach emphasises modularity, we also recognize that some pages require fixed elements.
For instance, an Article page typically includes specific elements such as Title, Author, Publication Date, and of course, the article content.
Below an example of an Article page that follows this format.
While the article's content may vary, the fixed elements remain consistent, providing a structured layout that allows readers to easily navigate and understand the content.
Handover guidelines
Figma structure
To ensure ease of navigation, we aim to keep the number of Figma pages to a minimum. The essential pages that we create are:
1 - Design System: This page contains elements including typography, color palettes, and interface components like buttons, form fields, and icons. Elements on this page contain the backbone of the website's design.
2 - Modules: This page includes all the customized modules that we design, such as hero banners, feature grids, and project showcases. These modules are designed to be reusable across the site.
3 - Pages: This page contains all the screens, both modular and fixed.
Additionally, if our designers are working on any elements that are still in progress, we create a separate page labeled as "WIP" (work in progress) to avoid implementing design work that is in progress.
Design system
The design system is the foundation of consistent design and streamlined UI development.
It is crucial to get it right; otherwise, the entire project may become disorganized and messy.
To ensure that our design system is well-organized and efficient, we follow a structured approach that includes the following sections:
Typography
To ensure that our typography is consistent and effective across all devices, we document how each typography style is displayed on desktop, tablet, and mobile. Sometimes, a variation works across all breakpoints, while other times it may only work for two breakpoints.
When documenting typography styles, we give them labels that make sense and are consistent across the website. This approach ensures that our typography is easy to manage and implement across different pages and modules.
Moreover, we also pay close attention to the hierarchy of headings from H1 to eventually H6 to ensure that the structure is sound.
Colors
When defining color styles, we ensure that they have indicative names based on their function rather than their color name. For example, we might call a style "Light" rather than "White" to better describe its purpose.
We aim to minimize the number of colors used in a project. We understand the importance of having a consistent and limited color palette, as it helps to create a cohesive and aesthetically pleasing design. Going overboard with too many colors can be overwhelming and distracting for users.
Components
To ensure that our components are well-documented and easy to manage, we document each component thoroughly, including its different states, such as hover effects, disabled, and pressed.
Module spacing
To ensure that our modules are well-organized and visually consistent, we make sure that they share the same spacing vertically and horizontally. This creates a harmonious placement of modules on top of each other, with no overflowing elements.
To achieve this, we often create a module spacing frame that serves as the foundation for all the modules that will be developed. This frame defines the exact spacing between modules, both vertically and horizontally, and ensures that all modules adhere to the same guidelines.
OG images templates
To ensure the preview images appear properly on social media platforms such as Facebook, Slack, Twitter, and LinkedIn, we create OG (Open Graph) images, which can be dynamically generated on the CMS.
Designing a template (or multiple templates based on client requirements) for these OG images is a necessary step in the design process.
Depending on the design, a font size change may happen at a certain character number, especially when titles get too long.
Pages
To ensure a clear and organized view of the website screens, we compile them in one location, ideally grouped within categories such as "Resources" with subcategories like "Articles," "Podcasts," and "Videos."
Each screen should be labeled accurately, avoiding duplication of similar names. Additionally, we include all responsive states, ordered by Desktop, Tablet, and Mobile.
Modules
We create a dedicated page for all modules, as they are the building blocks of most pages on the website.
On this page only include blocks that can be added via the CMS.
Any UI that is not reusable and cannot be added from the CMS, should not be under this page.
In the example below,
Variations
To streamline the implementation process for developers, we group modules with multiple variations within the same frame. This allows developers to quickly understand the variations and easily implement them.
When adding modules to the Modules page, we make sure that all variations are included. If not all the variations are ready, we keep the module under Module (WIP) until all variations are completed.
Naming
It's crucial to name the modules correctly on Figma because those are the names that developers will use to implement the modules on the CMS.
Content Managers will see these names and use them when creating pages and adding modules, so it's essential to use clear and descriptive names such as "Benefits Grid" instead of generic and unclear ones like "Img + Text Style 2".
Responsiveness across breakpoints
Ensure that each module has responsive designs that apply to all breakpoints, including in-between ones.
It is common for designers to create a design that looks good at specific breakpoints, but when resized to other dimensions, it may not be feasible to implement.
This is why it's important to make sure that modules are designed to be responsive across all breakpoints.
If a module is not responsive, redesign or tweak it to be so, rather than creating additional breakpoints just to support it.
Responsiveness consistency
Ensure consistency in responsiveness.
If you create a module of a grid list that has 9 items on desktop, then on tablet and mobile it should still have 9 items.
Below an example of a module that does not maintain consistency and cannot be implemented.
Feedback guidelines
Confirm implementation
Once a module or a set of modules are implemented, developers will request a review from the designer. You can provide your feedback directly on a separate temporary Figma page and tag the developer.
Once the developer applies the changes, conduct another round of review, and if everything looks good, place a sticker on the module that says "Implemented".
