You can choose any one of these
https://joshua-bsit4c.web.app/
https://maryjoy-bsit.web.app/display-hello-world
https://calda-4a.web.app/
https://my50component.web.app
https://angularcomponents-f1373.web.app/
https://lastnaplease-3e907.web.app/counter
https://my-act-13.web.app/
https://rjcano-angularcomponents.web.app
https://camo-bsit4a.web.app/
https://angularcomponents-5e28d.web.app/
https://amador-angularcomponent.web.app
https://components-54ef5.web.app
https://angular-components-a85f6.web.app
https://walterific-50-components.web.app/
https://angular-components-devke-f685e.web.app/
https://sia-angular.web.app/
**Deadline Sep 25 **
1. Create Low-Fidelity and Mid-Fidelity Frames:
-
You will create 100 frames in total.
-
50 frames for lowFidelitySection.
-
50 frames for midFidelitySection.
-
2. Frame Size:
-
Each frame should be designed for desktop or MacBook size.
- Common MacBook Pro size: 1440 x 900 pixels.
3. Naming the Frames:
-
Name each frame based on a specific feature of the project.
- Example: "DisplayHelloWorld", "Counter", "PythagoreanTheoremSolver", etc.
-
For each feature, create two versions:
-
One for Low Fidelity.
-
One for Mid Fidelity.
-
4. Use a Column Grid:
-
Apply a column grid to your frames for consistency in layout.
- A typical grid could use 12 columns with gutter and margin spacing.
5. Low-Fidelity Design:
-
Keep it simple: Focus on the layout, placement of elements, and structure.
-
Use basic wireframes without color or detailed elements.
-
For each feature, design how the interaction or UI layout would look (e.g., input fields, buttons, text placement).
6. Mid-Fidelity Design:
-
Add more details: Include more specific UI elements like buttons, typography, and basic grayscale components.
-
Do not yet add colors or high-resolution images, but focus on structure and usability.
7. Resources for Guidance:
-
You can refer to the links you provided for examples of UI patterns and components.
-
Review the design patterns used on these platforms to inform your layout decisions.
Steps to Complete in Figma:
-
Set up your file:
-
Open Figma and create a new project.
-
Set the desktop size for each frame (1440 x 900 or similar).
-
Apply a column grid to all frames.
-
-
Create 50 Low-Fidelity Frames:
-
Start by outlining basic features such as forms, buttons, and inputs.
-
Use wireframe boxes for images, and simple lines for text or input fields.
-
-
Create 50 Mid-Fidelity Frames:
-
Refine the low-fidelity designs by adding more structured UI components.
-
Add placeholder images, basic icons, and appropriate font sizes.
-
-
Naming the Frames:
- Name your frames based on features (e.g., DisplayHelloWorld, Counter, etc.), adding both "Low Fidelity" and "Mid Fidelity" to the naming for differentiation.
Example Frame Structure:
-
Frame 1 (Low Fidelity): DisplayHelloWorld_LowFidelity
-
Frame 2 (Mid Fidelity): DisplayHelloWorld_MidFidelity
-
...
-
Frame 50 (Low Fidelity): PythagoreanTheoremSolver_LowFidelity
-
Frame 100 (Mid Fidelity): PythagoreanTheoremSolver_MidFidelity
This will give you a clear structure to your activity, ensuring that both fidelity levels are accounted for in your design.
Send your Figma link on Portal