Frontend Development Process

Jump to bottom

AndreCRE edited this page Sep 25, 2024 · 8 revisions

Sketch of the design

Initial Sketch ideas

90A131C2-6A0A-41D0-9D32-5C6440317EDB 72C6CAE0-EE2E-45AC-B80D-0C674C1E9853

Concrete Sketch ideas

Homepage

HomePage

Home Initial Idea

Home(Initial)

Home Final Idea

Home(final)

View Accounts Page

ViewAccounts

Transfer Page

TransferPage(PayOrTransfer)

Contacts Page (Stretch Goal)

ContactsPage

Forget and Reset Password Page

ForgetResetPass

Settings and Edit profile page

SettingsEdit

Prototype design on Figma

https://www.figma.com/design/xq5JxT5Q0K0HRjRXvKjIDl/Learn-To-Bank-FrontEnd-Design?node-id=0-1&t=thjlzIiwDsVcsPY8-1

Screenshot 2024-09-01 at 9 08 18 PM

Screenshot 2024-09-01 at 9 08 53 PM

Screenshot 2024-09-01 at 9 09 17 PM

Screenshot 2024-09-01 at 9 09 38 PM

Replication of the Figma design with code

Screenshot 2024-09-01 at 9 13 14 PM

Screenshot 2024-09-01 at 9 13 46 PM

Screenshot 2024-09-01 at 9 14 32 PM

Screenshot 2024-09-01 at 9 17 24 PM