top of page
Febriusa's Home
Off-Style (1).jpg
Off-Style.jpg
Off-Style.jpg

Abstract

The one tool for fashion designers & enthusiasts to fully complete their clothing design and mockup. Starting from blank templates, changing colors, uploading graphics, adding shapes, and filling out details to printing all on one page, all in OFF-STYLE.

What is OFF-STYLE?

Off-style is a simple fashion clothing editor platform that provides blank templates of basic clothing categories (i.e. t-shirt, hoodie, sweater, and hat) for all-age fashion designers to customize and modify anything in every section of clothing pieces in one place. Customize and modify features, such as adding background color, uploading images, and adding shapes to the blank section. In Off-style, fashion designers can save their projects and export their work to a templated page in PDF format.

TypeScript, CSS, Next.js, React.js, Electron.js

Project's Background

Throughout 3-years as a clothing brand owner, one thing that was difficult procedure for me was coming up with creative ideas and putting them on my design canvas while meeting all the standards and details. From my knowledge and research, no editor platform application/website was made specifically for clothing design. Designers tend to find or create the clothing template on their own, learning, photoshop, and putting it all together in the documents platform resulting in 3-4 different software required to complete one clothing design or mock-up. It is all fashion designers and enthusiasts who wish to have one tool that puts them a couple of steps ahead and completes the design process in one place.

AFFILIATIONS

Instructor & Mentor

Wanda Gregory, Ph.D

University of Washington, STEM

Lecturer

Technical Expert

Jeffri Ardian

PT. Bio Farma

Backend Engineering

Instuctor & Mentor

Jeffery Kim, Ph.D

University of Washington, STEM

Associate Teaching Professor

Download the DEMO!

Access to the code through my public GitHub.

 

Download the zip file and run the program on your computer.

​

​

Click and open the gate to proceed with the download :)

Open-Source Gate

Project's Overview

Development Plan/Model

Throughout the development of this project, the plan was divided

into 5 important stages/processes:

​

IMPORTANT: click the box below to access more details and information about the process

STEP ONE: Planning Process

  • Project's Goals

  • Creating Requirements & Specification

  • FIGMA Visualization

  • Scheduling

​

STEP TWO: Researching Process

  • Meeting with Librarians, Instructors, Experts

  • Technical Research

  • Material Research

  • Surveying Stakeholders

​

STEP THREE: Developing Process

  • Implementation

  • Creating a Format File to Import and Export

  • UI/UX Design

​

STEP FOUR: Testing Process

  • Code Review with Expert

  • User Testing

  • Manufacture Approvals

​

STEP FIVE: Delivering/Launching

  • Publishing in the GitHub

  • Project's Goals and Outcomes

  • Publishing in the Personal Profile Website

  • Publishing in the Canvas School Course

  • Refelction

  • Future Work

​

Final Project Poster

OFF-STYLE POSTER

Pages (Visualization)

Homepage

Screenshot 2024-05-29 at 12.50.09 AM.png

Template Menu Page

Screenshot 2024-05-29 at 12.50.25 AM.png

Editing Page

Screenshot 2024-05-29 at 12.50.52 AM.png

Print Page

Screenshot 2024-05-29 at 12.51.10 AM.png
Do not hesitate to contact me to discuss a possible project or learn more about my work.

© 2024 by Febriusa Estavan.

Get in Touch!
Febriusa28@gmail.com

+1 (646)266-1653
bottom of page