[go: up one dir, main page]
Scribd
Upload
116 views4 pages

Assignment 1 Solution

The document outlines the process for creating an app, including designing low-fidelity and high-fidelity wireframes using tools like Figma. It emphasizes the importance of prototyping to demonstrate app functionality and user flow. Finally, it instructs users to submit their wireframes and prototype link for review.

Uploaded by

ranjanben6006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
116 views4 pages

Assignment 1 Solution

The document outlines the process for creating an app, including designing low-fidelity and high-fidelity wireframes using tools like Figma. It emphasizes the importance of prototyping to demonstrate app functionality and user flow. Finally, it instructs users to submit their wireframes and prototype link for review.

Uploaded by

ranjanben6006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Ideal Solution : Assignment 1

Possible Screens for this app:

Home Screen View Account Balanc

Account Overview Transfer money

Wireframing: A simple outline of a design that shows the layout and

structure without details like colors or images. It's like a rough sketch

of a website or app.

Design low-fidelity wireframes using pencil like this:

Focus: Basic shapes and

layout, no colors, minimal

text. Keep it simple.

Look: Boxes for buttons, lines

for text, placeholders for

images/icons.

Example: A plain screen with

a button labeled “Transfer”

and a box for "Account

Balance."
Ideal Solution : Assignment 1
Develop High-Fidelity Wireframes
Design high-fidelity wireframes using Figma like this:
This is just for example, you have to make the wireframe on
your own taking the reference of this example.

Focus: Add details like colors, Example: Button with a blue


fonts, and actual buttons. background, proper font for
"Account Balance," and icons
Look: Fully designed screens with for money transfer.
real UI elements, images/icons,
and text(typography, etc.).
Ideal Solution : Assignment 1
4. Prototyping: An interactive version of your design that lets users click
through and see how the app or website will work. It's used to test and
demonstrate the flow and functionality.
Create an interactive prototype using Figma like this:

Design each screen of your app using Figma’s Frames tool. These
frames represent individual screens in your prototype
Use the Prototype tab to select any element (button, icon, etc.) on a
frame, and drag the blue connector to the frame you want it to
navigate to
Choose the interaction type (e.g., On Click, Hover) and transition
effect (e.g., Smart Animate, Instant) to define how the prototype
behaves when users interact with it
Click Present to preview your prototype, and use the Share button to
generate a link that others can use to view and test your design
Ideal Solution : Assignment 1

5. Submit your work:

The low-fidelity and high-fidelity wireframes

The interactive prototype link.

In Figma, click the "Share" button

Set sharing to “Anyone with the link.”

Copy and paste the prototype link.

You might also like