Mocks of the application

[ArfatSalman]

Use this issue to collect the mocks of various screens.

It's a good idea to collect the mocks within the context of a user stories. For example,

• How many number of distinct pages do you have?
• What are the user actions?
• In how many steps does he / she achieve it? What action items have to clicked?
• What screens they have to go through?

You can use tools like Figma (recommended) or other wire-framing tools like Balsamiq.

Ensure that you also know at least these things (you can always list more things)

• Application Layout Structure
• CSS / React Layout Library
• Icon Sets
• Color Scheme
• Theme

Feel free to consult older projects listed in the Little Tags Notion page.

If you have questions, comment on this issue.

[ShankarRaknahs]

User stories and the respective Mocks:

Figma link: https://www.figma.com/file/914vaUPR3svHS7v92Meg7p/FutureBasket?node-id=0%3A1

User story1: LT001_US01 - As a user I want to land in the home page when I go to the domain "https://www.futurebasket.in/"

Screenshot of the Landing/Home page:

User story2: LT001_US002 - As a user I want to see the header with App name, Search bar, Globe icon and Profile Icon in the Home page

Screenshot of the Header:

User story-3: LT001_US003 - As a user I want to see the footer with Contact info, Copyright statement and social icons

Screenshot for the Footer:

Note: The above mentioned user stories has the mocks for the initial landing pages and it doesn't not involve user actions. Once the user actions we will add mock screen for each user action.

@yogigachinmath - As mentioned I have moved the location of search bar, please add if you have more comments/suggestions.

[ShankarRaknahs]

Mockup for Item description page:

[ShankarRaknahs]

Mockup for the sign In/Up Modal:

[ShankarRaknahs]

Mockup for the Cart page:

[ShankarRaknahs]

Mockup for the cart page with Total payment:

[ShankarRaknahs]

Mockup for the shipping address page:

[ArfatSalman]

The screens look good. Ensure that padding is correct on all elements. For example, CART --- ADDRESS --- PAYMENT can use arrows as opposed to ----- for better visual feel.