Planning Process

Website/Desktop App:

​

1. Programming Language

1.1. Next.js (JavaScript) + CSS + Electron.js

​

2. Desktop Application/Website

2.1. Available on Windows

2.2. Available on MacOS

2.3. Available on Chrome 

2.4. Available on Safari

​

3. Starting Loading Page

3.1. Small logo/picture of OFF-STYLE before the home page

​

4. Homepage (NO REGISTRATION PAGE NEEDED)

4.1. Sidebar Navigation (left side)

4.1.1. Create

4.1.1.1. Create a new project and enable the “create” panel or content

4.1.1.2. Six clothing templates (button) to start the new project (e.g. hat, t-shirt, hoodie, sweater, sweat pants, shorts…)

4.1.1.3. Brief description under each clothing template (button)

4.1.2. Open file

4.1.2.1. Access to local/computer files to open an existing project, then access to the editing page

4.1.3. Settings

4.1.3.1. Access to Settings panel/page-content

4.1.4. Exit

4.1.4.1. Terminate the program

​

5. Template Menu page

5.1. Title of the project on top of the page, Users are allowed to change the title of the project (label)

5.1.1. Default Title: “New (clothing template) project” 

5.1.2. Must have at least a letter, else the change won't save

5.1.3. The title of the project is also the name of the saved file

5.2. Sidebar Navigation

5.2.1. Main Menu

5.2.1.1. Show the small Yes/No/Cancel window with the message: “Do you want to save your project?”

5.2.1.1.1. If yes, access to the Save process

5.2.1.1.2. If no, access to the Delete process, then access back to the homepage

5.2.1.1.3. If Cancel, access back to the template menu page

5.2.2. Save

5.2.3.1. Update the saved file that was already been placed in the computer

5.2.3.2. If the file has not been saved yet, then access to the Save As process

5.2.3. Save As…

5.2.3.1. Access to local files/computer to export and save the project on a computer

5.2.3.1.1. Users can change the name of the file in this process

5.2.4. Delete

5.2.4.1. Show the small Yes/No window with the message: “Are you sure you want to proceed with the deletion?”

5.2.4.1.1. If yes, delete the progress/entirely of the project

5.2.4.1.2. If no, go back to the template menu page

5.2.5. Settings

5.2.5.1. Access to the editing settings panel/page-content

5.2.6. Exit

5.2.6.1. Show the small Yes/No/Cancel window with the message: “Do you want to save your project?”

5.2.6.1.1. If yes, access to the Save process

5.2.6.1.2. If no, access to the Delete process, then terminate the program

5.2.6.1.3. If Cancel, access back to the template menu page

5.3. Template Menu content-page 

5.3.1. Guide image of the clothing template

5.3.1.1. Image shows the selected clothing template with each clothing’s section labeled (e.g. right, left, front, back, top, or bottom)

5.3.2. Image Buttons (clothing’s section/side)

5.3.2.1. Each image button (clothing’s section/side) has the process to access the editing page

5.3.2.2. The image changes to the saved version of the clothing’s section/side

5.3.2.2.1. Otherwise, just display the default version (white) 

5.3.3. Result Button

5.3.3.1. Access the print page with the current progress

​

6. Editing page

6.1. Keep the sidebar navigation from the Template Menu page

6.2. Extended sidebar navigation (editing features)

6.2.1. Color background feature

6.2.1.1. Access to color background sidebar that provides color options

6.2.2. Image upload feature

6.2.2.1. Access to the local file/computer to select a supported image file for the import process

6.2.2.2. The imported image default location will be in the middle of the canvas area

6.2.3. Inserting shapes feature

6.2.3.1. Access to the shapes sidebar that provides shape options

6.2.3.1.1. After the user selects a shape, access to shape color sidebar that provides the color options for the shape.

6.2.4. Material Label Option

6.2.4.1. Editable label to specify the material on the chosen clothing’s section

6.2.4.2. Default Material label: “Cotton”

6.2.5. Details

6.2.5.1. List of sizes available (checkboxes)

6.2.5.2. Extra Notes

6.2.5.3. Color Details

6.2.5.4. Printing Methods

6.3. Editing content-page

6.3.1. Not editable Clothing’s section label (e.g. front, back, right, left, top, or bottom)

6.3.2. Editing area

6.3.2.1. Non-canvas area (grey)

6.3.2.2. Canvas area

6.3.2.2.1. The clothing section template

6.3.2.2.2. If saved progress is not used, the template color is default (white)

6.3.3. Result Button

6.3.3.1. Show the small Yes/Cancel window with the message: “Do you want to save your project?”

6.3.3.1.1. If yes, access the Save process, then access the print page 

6.3.3.1.2. If Cancel, access back to the Editing page

​

7. Print page

7.1. Sidebar navigation

7.1.1. Go back

7.1.1.1. It goes back to the last Template Menu page

7.2. Print page content

7.2.1. Display the (view only) templated A4 format with all the saved clothing’s sections (colors and material) placed on one page

7.2.2. Print button

7.2.2.1. Labeled “print your design in PDF format”

7.2.2.2. Access to the local files/computer to save the PDF file to the computer

7.2.2.2.1. If the user clicks save, then another loading progress window will show up with the message “Processing… don’t close the program yet” Then terminate the loading window after the export is processed

7.2.2.2.2. If the user clicks cancel, then redirect back to the last print page

​​