A Design System (DS) provides consistent experiences for users and streamline the development process by providing a set of reusable components and patterns.
One of my first tasks at RFOX was to establish a well defined DS which needed to be big and comprehensive enough to support a range of different web3 applications across the multiple ventures the company was doing. It was built on Figma as libraries of shared colors, styles, and components.
Below is a selection of a few major components we developed in this DS. (Please keep in mind the actual RFOX Design System is way more extensive and detailed.)
One of my first tasks at RFOX was to establish a well defined DS which needed to be big and comprehensive enough to support a range of different web3 applications across the multiple ventures the company was doing. It was built on Figma as libraries of shared colors, styles, and components.
Below is a selection of a few major components we developed in this DS. (Please keep in mind the actual RFOX Design System is way more extensive and detailed.)
Colors
Colors in a design system are used to create a unified visual language and to help create a consistent user experience. Colors can be used to create contrast, to draw attention to certain elements, to create hierarchy, and to define and differentiate between different elements. This set of colors were developed in accordance with the RFOX Brand Guidelines which was established prior to the development of the DS.
Typography
Typography affects the readability, legibility, and overall look and feel of the interface. Consistent typography helps to establish a brand identity and reinforces brand recognition, which is especially important for a company like RFOX with multiple products and services.
Button
Buttons on websites are typically used to trigger an action, such as submitting a form or navigating to a new page.
Checkbox &Radio
Checkboxes and radio buttons are used in a design system to allow users to select one or more options from a visible list.
Accordion
Accordions are often used to deliver large amounts of content in a small space, helping to reduce scrolling and shorten pages. They can also be used to organize information and keep screens less cluttered.
Input Field
An input field in a design system is a UI component that allows users to enter data into a form. Input fields are a key part of most user interfaces and play a crucial role in collecting information from users.
RFOX Page Components
Various components that are reused on multiple websites, applications and ventures, closely following the RFOX Brand Guidelines.
RFOX platform that enables users to explore and use new ways to grow their digital asset portfolios. It is powered by the VFOX token, which can be used to purchase the platform’s native token, RFOX. RFOX holders can take advantage of the platform’s features, such as yield farming, staking, and liquidity pools, to increase their profits.
RFOX VALT is a new virtual space that offers an immersive shopping and retail experience, combining gaming, media, crypto-finance, and NFTs. CitiXens are a limited NFT collection of metaverse-ready 3D avatars for the RFOX VALT. These avatars come with unique characteristics including a RFOX VALT quarter origin, appearance, and other features. I was in charge of designing the promotional website along with the Mint Portal through which users could mint their own CitiXen.
An upcoming decentralized marketplace for buying and selling non-fungible tokens (NFTs). RFOX 's first web3 marketplace that allows users to buy, sell, create, and auction NFTs. Aiming to compete with the likes of OpenSea and Axie Infinity, this UI was thoroughly researched and carefully crafted with an user-centric approach.
GRAPHIC DESIGN
With RFOX being a start-up which usually experienced shortages in manpower, at the start I often helped with creating promotional graphic design materials for multiple projects and campaigns.
