An open API service indexing awesome lists of open source software.

https://github.com/starmanfrommars/ui-ux-lab

This course deals with UI UX designing using Figma focusing on wireframe and UI design.
https://github.com/starmanfrommars/ui-ux-lab

figma ui userinterface ux wireframe

Last synced: about 1 month ago
JSON representation

This course deals with UI UX designing using Figma focusing on wireframe and UI design.

Awesome Lists containing this project

README

          

# UI/UX Lab
- Course Code : BCGL606
- Credits : 1

## Course Outcomes:
* Apply the basics of wireframing in designing apps and Websites.
* Make use of Figma for designing and prototyping UI/UX for different types of apps and Websites.
* Analyse user requirements and translate the requirements to design prototypes.
* Demonstrate the UI/UX concepts applied when designing the prototype of apps and Websites.
* Develop (redesign) the existing apps & Websites with customized design.

## Lab Experiments

1. Chat App Redesign: Create a Wireframe and redesign any popular chat app.
2. Food App: Create a wireframe, Design and Prototype the UI Pages for the food application.
3. Social Media App: Create a wireframe, Design and Prototype social media photo sharing app.
4. Product Website: Design and prototype a product website page. Create web pages and rollovers for the webpages
5. Travel Agency Website: Create a wireframe, Design and prototype the UI for the website including design for Home Page with search bar, Activities page, Client Testimonial Page, Image Gallery
6. UI/UX Designer Portfolio Design: Create a wireframe, Design and prototype a UI for a portfolio including design for About page, Work showcase page, Blog page, contact page
7. Dashboard Design: Create a wireframe, Design and Prototype Dashboard UI page, add some Dashboard details, statistics and graphs, Add dropdown options for some dashboard details
8. E-Commerce Website: Create a wireframe, Design and prototype Web pages including product category pages (example: mobiles, gaming consoles, Speakers), product pages in each category, buynow page, add to cart page
9. Educational Website: Create a wireframe, Design and Prototype the UI for an educational website – Include a Homepage with footer, About Us Page, Programs page, Instructors page, Pricing page, Payments page with radial buttons. Design dropdowns for programs button
10. Music Player App: Create a wireframe, Design and prototype the pages with a background and a Rollover button, and Song selection Page with a Home Rollover button. The third page may include animated play and pause button, play music animation, timer animation.

## Experiment File Links

1. [Lab 1 - Whatsappp Updated](https://www.figma.com/design/boN2aDQu510wfo7s4xQ0mh/Lab-1---M?node-id=0-1&t=ry3Yie9nEQGnrZNW-1)
2. [Lab 2 - Zomato Updated](https://www.figma.com/design/4BLZz2uPCo7hPGMbx2KEEK/Lab-2---M?node-id=0-1&t=cKVl0XcRsmCLxmfK-1w)
3. [Lab 3 - Instagram Updated](https://www.figma.com/design/LjNwwvGUO4dqOAS64xKAKP/Lab-3---D?node-id=0-1&t=DtMD02AeBeIDMhHt-1)
4. [Lab 4 - Samsung Website](https://www.figma.com/design/afW1VxOIAjVkicR23Kd91d/Lab-4---D?t=LmIeYUNlKwe4l7DY-1)
5. [Lab 5 - Travel Agency](https://www.figma.com/design/txIiXEdsCHKXXNQoCYjKUc/Lab-5---M?node-id=0-1&t=6b9WgEJt5Tbjqz41-1)
6. [Lab 6 - Designer Portfolio](https://www.figma.com/design/1EJu8dLPMwAk3GfobOUEBT/Lab-6---M?t=LmIeYUNlKwe4l7DY-1)
7. [Lab 7 - Tesla Dashboard](https://www.figma.com/design/uJfsLDP5fSjyHBtu2eRqqu/Lab-7---D?node-id=2-2522&t=QNtlaeHK58IvpBIj-1)
8. [Lab 8 - E-Commerce Website](https://www.figma.com/design/txxS39ZxUjPxiLjn8e3dEz/Lab-8---D?t=LmIeYUNlKwe4l7DY-1)
9. [Lab 9 - Educational Website](https://www.figma.com/design/Jx2AmUZYhazY20ZtxnBGZu/Lab-9---M?node-id=0-1&t=BRywnmxMfNJ7biIM-1)
10. [Lab 10 - Music Player App](https://www.figma.com/design/1xXdy1tV2aXOJbwQX2tP4P/Lab-10---D?t=LmIeYUNlKwe4l7DY-1)