keanacobarde commented 10 months ago

User Story

I, as the user, will not see the initial wireframing, but everything I see whenever the website is built will exist because of the wireframe.

Acceptance Criteria

AS HIGHLIGHTED IN FRONT END CAPSTONE REQUIREMENTS

Your proposal must include a hyperlink to your wireframes that comprehensively show the journey of a user through your application.
You may use Figma, Google Jamboard, Google Slides, etc. If we cannot access your wireframes, the proposal will automatically be rejected.
Each view/page must be represented. Do not include login/register unless you need to customize those views for your user experience.
Buttons or links must be included with notes/arrows describing what happens when the customer clicks on it.
To test your link, open an incognito window in chrome, paste the link. If you cannot access it or need to log in, the instructors will not be able to either.

The wireframe should follow the flow of execution/user story detailed in other tickets. What's the end goal for the user? And, how will the design best help them achieve that? Don't go too heavy on the UI/UX, but make something clean, simple, and easy to use. You can always add more onto it later. Get a good foundation first!

Dependecies

2 - Understanding what data you're handling and the flow of it will be really important. I would also add, understanding the flow of execution is beneficial in designing the website as well. What actions will the user take, and in what order do they need to occur in? This will be a separate ticket.

Dev Notes

Can be created in FIGMA. Rudimentary wireframing has already been sketched in GoodNotes. .PDF data needs to be exported and attached to this ticket.
Don't get to caught up in the design of the thing. If it accomplishes what it needs to and follows the flow of execution laid out, it's good enough!
You need to annotate your Figma!

keanacobarde commented 10 months ago

IDEA: Chakra UI for an alternative CSS library to BootStrap. Leaving here for reference in the future.

keanacobarde commented 10 months ago

WIREFRAMING 2 WIREFRAMING 3 WIREFRAMING 4

CURRENT DRAFT WIREFRAMS

keanacobarde commented 10 months ago

PLANNED COMPONENTS

[x] Navbar
[x] Home Page
[x] Category Details Page
[x] Category Cards
[x] Expense Cards
[x] Category Modal + Form
[x] Expense Modal + Form
[x] Timeline Page
[x] Monthly Income form

COMPONENTS LEFT TO PLAN

[x] Outlook
[ ] Profile Page

keanacobarde commented 10 months ago

Date picker, REACT - https://www.npmjs.com/package/react-datepicker

keanacobarde commented 10 months ago

WIREFRAMING 5

UPDATE - Merging both Timeline and Outlook pages into one page. Monthly timelines/summary is at the top and a scroll is needed to get to Outlook page. In draft wireframe, Outlook is at the top, and the monthly salary is at the bottom.

keanacobarde commented 10 months ago

FINAL WIREFRAME - https://www.figma.com/file/JR4j0Iu2gdUDLbuTe0dU1U/OnPaper---Wireframe---Keana-Cobarde?type=design&node-id=0%3A1&mode=design&t=MPeP58xt6PYIbmwz-1

keanacobarde / on-paper

PLANNING - WIREFRAMING #3

User Story

Acceptance Criteria

Dependecies

2 - Understanding what data you're handling and the flow of it will be really important. I would also add, understanding the flow of execution is beneficial in designing the website as well. What actions will the user take, and in what order do they need to occur in? This will be a separate ticket.

Dev Notes