


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

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
​
Pages (Visualization)
Homepage

Template Menu Page

Editing Page

Print Page
