A design system for my website
A design system is a comprehensive collection of reusable components, guided by clear standards, that can be assembled to create various applications. The need for design systems arises from the necessity for scalability, efficiency, and consistency in design. They bring order to chaos, streamlining the design process. I developed a design system for my own brand to enhance my design cycle. This project shows some of the components I built for this system. However, a design system is more than just a library of components. If built correctly, it could become the lifeblood of my own brand. Below, you'll find examples of my work.
Overall Design
I created the entire website design using various components that I created in this Design System. In the following project introduction, you can see more details about the components.
Desktop layout
Tablet layout
Phone layout
Grid Layout
In designing my Personal Design System, I prioritized creating a versatile and adaptive grid system that ensures an exceptional user experience across all devices. This grid system was crafted with precision to accommodate the unique demands of each platform, maintaining both visual consistency and usability.
For mobile devices (360px), I implemented a 4-column layout with a 16px gutter width and a 16px margin. This setup optimizes space usage, ensuring that content remains legible and easy to interact with, while offering a clean and uncluttered interface.
On tablet devices (1024px), I employed a 12-column grid with a 24px gutter width and a 32px margin. This configuration provides the flexibility needed for more complex layouts, allowing for a balanced and engaging visual presentation that adapts seamlessly to the increased screen real estate.
For desktop devices (1440px), I maintained the 12-column structure, but increased the gutter width to 32px and the margin to 64px. This adjustment allows for expansive and content-rich layouts that retain a structured and harmonious appearance, ensuring that even the most detailed designs are both visually appealing and user-friendly.
These grid settings are thoughtfully tailored to the needs of each device, ensuring that my Personal Design System delivers a consistent and high-quality user experience across all screens.
Typography
Typography plays a vital role in shaping the visual identity and readability of any design. In my Personal Design System, I selected the Poppins and Lato typefaces to create a harmonious and modern aesthetic. Poppins offers geometric simplicity and a clean appearance, making it ideal for headings and impactful text. Lato, with its warmth and clarity, complements Poppins by enhancing readability for body text. These typefaces, combined with a major-third scale and carefully chosen line heights, ensure consistency and legibility across all screen sizes, from mobile to desktop. This thoughtful typographic selection supports a cohesive and polished user experience throughout the design system.
Color palette
In Jessie's Personal Design System, each color is purposefully selected to enhance both aesthetics and usability across the interface. The defined color roles not only contribute to visual harmony but also make it easier to implement changes and maintain consistency across various platforms. By establishing clear color guidelines, the system ensures a cohesive and unified appearance, regardless of the application or medium.
Button, elements, and icons
In Jessie's Personal Design System, icons, buttons, and elements are crafted to ensure intuitive user interactions. I selected a minimalist icon set that aligns with the clean and modern aesthetic of the system, reducing cognitive load and enhancing usability, especially on smaller screens. The buttons are designed with various states—default, hover/active, and disabled—to guide users effectively through interactions. To ensure consistency across different touchpoints, buttons are categorized by function and color, such as general use and CTA, and are optimized for different screen sizes. These elements work together to create a seamless and cohesive user experience.
Cards
In Jessie's Personal Design System, I designed the cards to present information in a clear and visually appealing manner. The structured layout effectively organizes different types of content, such as text, images, and links, making complex information easy to digest. These cards not only improve the user experience by enhancing clarity and accessibility but also contribute to the overall cohesive aesthetic of the interface.
Logo
With creative, joyful, energetic, and different perspective thinker personalities, I designed my logo in a playful typeface. And I believe that there is nothing that can represent me better than my own portrait, so I designed the logo according to my appearance which has not changed for many years. At the same time, I use the bright yellow color to bring out my lively qualities as what I usually impressed for my friends
Online documentation for the design system
I created a RWD online documentation for the design system used to style my portfolio website. This design system was created to support and display my portfolio content and to help visually communicate that I am a creative, curious, energetic, and different perspective thinker.
A design system is a dynamic and evolving entity, and I am committed to continuously refining this system. Jessie's Personal Design System is composed of several key components that work together to create a cohesive and efficient framework:
Documentation
The documentation serves as a central resource, outlining the design principles, usage guidelines, and best practices that guide the consistent application of the system.
Visual Language
The visual language defines the brand's aesthetic, covering elements such as colors, typography, and icons to ensure a unified visual identity.
Component Library
The component library contains all reusable UI elements, including buttons, forms, and cards, enabling a consistent user experience across the platform.
Brand Guidelines
The brand guidelines provide direction on tone, style, and visual presentation, ensuring all communications reflect a cohesive brand image.
CSS Framework
The CSS framework offers a set of foundational style rules, allowing developers to efficiently implement designs while maintaining consistency and quality.
Together, these components form the backbone of Jessie's Personal Design System, driving both the design and development processes to achieve a high standard of work.
