Where are the documents?
Our main design file can be found here on Figma.
Why did we choose this design?
Design System
Our design system philosophy combines Google's Material Design with our custom components. Google Material Design brings user-friendly principles and cross-platform compatibility, while our tailored components cater to our platform's needs. This blend ensures a consistent user experience and efficient development, resulting in a unified and effective design language.
Colors
We expanded Google's Material Design color palette by incorporating soothing light blues for surfaces and striking dark blues as accent colors. We also included shades of greys and whites for clarity. This custom palette respects Material Design principles while giving our platform a unique look that's visually engaging and user-friendly.
Some general guidelines/standards for DataLab
Collaboration with devs
Figma's Dev Mode feature, combined with Jira integration, creates a seamless collaboration bridge between developers and designers. Dev Mode enables developers to inspect design elements and their specifications directly within Figma, eliminating the need for design handoff documents. Developers can access code snippets, measurements, and even export assets effortlessly. Simultaneously, the Jira integration streamlines the task management process. Design elements can be linked to Jira tickets, connecting design decisions directly to development tasks.
This collaboration begins with designers crafting designs in Figma. Developers can then enter Dev Mode to inspect and gather all necessary details. If adjustments are needed, designers make them in real time, and developers instantly see the changes. Once the design is approved, designers link elements to Jira tasks, automatically creating a structured workflow. Developers access design details right within Jira, fostering a smoother understanding of implementation requirements.
In essence, Figma's Dev Mode and Jira integration foster a continuous dialogue between designers and developers, mitigating miscommunication, reducing back-and-forth, and accelerating the entire design-to-development process.
Hand-off process
Lorem
File structure
As the date of writing (29/08/23), the Datalab Figma file is currently composed of 9 main pages.
📔 Cover
Figma project files should always include a cover and a thumbnail due to several reasons. These visual elements aid in swift project identification, fostering efficient organization, and presenting a professional image when sharing files. Consistent covers and thumbnails reflect branding and design cohesion, while also providing a quick preview of project content. By effectively utilizing these visuals, designers enhance communication, offer inspiration, and make their work more engaging and accessible to collaborators and stakeholders.
🧩 Components & Styles
The Components & Styles page houses a collection of reusable design components and stylistic elements. This includes buttons, forms, icons, typography styles, color palettes, and various UI elements essential for ensuring visual consistency throughout the design system. By centralizing these components and styles, it streamlines the design process, promotes cohesive aesthetics, and facilitates efficient collaboration among team members working on different aspects of the project.
🎨 Design
This Design page serves as the creative hub where user interfaces come to life. Here, the design process unfolds, and user-centric visuals take shape. This page is dedicated to crafting intuitive layouts, arranging elements, and refining visual details that define the user experience. From wireframes to high-fidelity mockups, the Design page encapsulates the evolution of ideas into tangible designs.
🖱️ Prototype
The Prototype Page is designed for creating interactive prototypes and user flows within your Figma project. This page serves as a platform to construct dynamic representations of your designs, allowing you to visualize and communicate user interactions effectively. By linking screens and incorporating interactive elements, you can simulate the user experience, demonstrating how users will navigate and engage with your design. This page is instrumental in crafting compelling presentations for stakeholders and users, offering a hands-on preview of the envisioned product's functionality and usability.
🎫 JIRA tickets preparation
This page is used to arrange and plan tasks for future Jira tickets. It helps you break down project steps, organize work, and clarify what needs to be done.
📢 Communication & logos
The Communication & Logos page is where you create logos and visuals for Datalab communication. It's the hub for designing graphics that represent the project's identity and message. This page ensures consistent and impactful visuals for effective communication with Datalab users.
🛣️ Value Proposition & Roadmap
The Value Proposition & Roadmap page is where we shape Datalab's unique value and outline our design plans.
🧑🏼🤝🧑🏼 Persona/Journey/feedback
The Persona/Journey/Feedback page is where we first created our user personas, plotted their journeys, and collected valuable insights from user interviews. This space ensures we deeply understand our users and use their perspectives to shape our design decisions effectively.
🗄️ Archives
The Archives page serves as a repository for outdated and no-longer-relevant content, acting as a cutoff point for such materials. Here, you can house old pages that have been retired from active use. Among these is the Drafts section, which holds older designs that have become obsolete but are still valuable for reference purposes. The archives page aids in maintaining a clutter-free and organized workspace while preserving historical design iterations and insights.