Deliverables
Full Stack Application
Brand Identity
Npm package
Roles
UI / UX Design
Full Stack Development
Goal
Creating a tool to assist the early stages of both design and development. When beginning a new project one of the best ways to establish a solid foundation for consistency down the road is through the use of a style guide. The goal of SUi is to allow users to easily generate their own custom style guides and UI components through one seamless interface. The style guide provides brand consistency and quality while the generated UI components become the building blocks to any website.
Brand Definition
The logo design and brand execution for this project played a large role in showcasing what SUI is all about — quality and consistent branding. The final logo is minimal yet it incorporates all three letters: ‘S’ when viewed upright and 'UI' when rotated on its side.
Design / Prototyping
The UI design of the application consists of lo-fi renders of each page as well as a prototype to plan user navigation within the site. In addition, the hi-fi renders were designed to capture the clean and consistent branding that SUI promotes.
Development Technologies
MERN Stack
The full stack application involves all the technologies of MongoDB, Express, React, and Node. This 3 tier architecture allowed me to structure a database, server, and front-end. MongoDB contained storage for all the users and their public/private projects while Express handled URL routing and HTTP requests.
React Hooks and Contexts
Using a context to manage the logged in user and their projects, I was able to pass the appropriate data to the different react components to form a fully interactive interface. On top of this I also practiced utilizing react hooks and managing states within functional components.
Animations
After importing vector designs and creating animations within Adobe After Effects, I used a plugin called bodymovin to export the animation as a json file which is rendered through the library ‘Lottie’.
Npm Package
To allow users to export their theme and apply it to their own UI components, I created an npm package. First step was to transform the theme made on the application to a downloadable json document using a library called ‘Blob’. Next, I used a rollup wrapper called ‘micro-bundle’ to create my react component library. Finally, users can download the package to obtain the default components and link their json file to transform them into their own defined colours and fonts.
Demo
