🚀 30 Days of UI/UX 🚀

Welcome to 30 Days of UI/UX! 🚀 Get ready for a month-long journey into the fascinating realm of UI/UX design and Figma fun! Whether you're a design pro 🎨 or just starting out 🤓, this adventure aims to demystify web design without overwhelming you with intricate terminology. We'll keep it straightforward and hands-on.

So, are you prepared to dive into this 30-day design party with us? Let's embark on this journey together 🌈💻, transforming each day into an opportunity to enhance your design prowess and craft visually stunning digital experiences. Get ready for a month filled with inspiration, creativity, and the satisfaction of mastering the art of web design! 🚀✨

---

👀 What's Inside It

This repository contains the following main folders:

1. ui-ux folder: main folder where the workshop will take place. In here you will see files that contains the tutorials and activites assigned for each day.

   • week-1-2 folder: contains the markdown files for day 1-22, with day 1-11 serving as exercises and days 12-14 as the required project.
   • week-3 folder: contains the markdown files for day 15-22, representing one of the required projects.
   • week-4 folder: contains the markdown files for day 23-30, representing one of the required projects.

2. submissions folder: contains markdown files that participants will modify to include their outputs or figma links.

   • exercises subfolder: for daily activities with the purpose of practicing what you've learned, which are not required for the certificate of completion but is advisable to complete them.
   • final-projects subfolder: for final projects, which are required for the certificate of completion.

Important

Take your time to read the README files in these folders for important instructions and a handy outline to guide you.

---

📅 ┊ Table of Contents

Introduction to UI/UX	Figma Basics	Design Principles	Design Components	Figma Advance
Prototyping	Low-Fidelity Wireframe	Design Sprint: Empathize	Design Sprint: Define	Competitor Analysis
Design Sprint: Ideate	Lo-Fi Wireframe Website [Project]	Hi-Fi Wireframe Website [Project]	Hi-Fi Wireframe Mobile [Project]

---

✉️ Submissions

CodeQuest is made to provide participants an immersive, hands-on coding experience by guiding them through the creation of small projects. Every day of CodeQuest contains a particular knowledge that is essential to build the foundations of your web development skills.

When we talk about UI/UX at CodeQuest, we're switching gears a bit. Instead of diving into complex coding, we're going hands-on with the creative side of things. Imagine using cool tools like Figma to shape how websites and apps look and feel—without getting into the nitty-gritty of code. These sessions are all about letting your creativity flow, refining designs, and understanding how to make things user-friendly. It's a chance to see how the visual and functional aspects come together in the digital world, creating awesome projects without the need for heavy coding!

We encourage you to share your progress in 📈┊codequest-progress to serve as motivation for others and to open up discussions and reviews to gain further insights about a particular topic.

example:

Day: 02 of UI/UX

Topic: Figma Basics

Highlights:

• Learned how to navigate its interface
• Built a nice layout for Alf's Shop

Attachments: attached a screenshot of the final activity(optional)

To finish our CodeQuest: 30 Days of UI/UX, you need to submit 3 projects for your completion to be acknowledged and for you to get the CERTIFICATE:

.
├── submissions
│   ├── ...
│   ├── final-projects  
│   └── ...  ├── day12-14.md  # lo-fi wireframe layout
└── ...      ├── day15-22.md  # website hi-fi wireframe
             └── day23-30.md  # mobile hi-fi wireframe

Note: Daily lessons may not be mandatory, and submitting daily exercises/challenges is optional, but it is highly encouraged to complete them in order to learn effectively and track your progress each day until the end of the 30-day period.

---

💫 Getting Started

Use this template to create your own repository with existing directory structure and files to participate in our CodeQuest: 30 Days of UI/UX.

1. On GitHub.com, navigate to the main page of this repository and click the Use this template button.

   

2. Name it with the same name as this repository (AWSCC-CodeQuest-UI-UX), and make it public.

   NOTE: The repository name should be in the format of AWSCC-CodeQuest-UI-UX (Do not copy exactly the same name as in the image below)

   

3. On the lower right, click Create repository.

   

   and it should generate the repository in your account.

   NOTE: The repository name should be in the format of AWSCC-CodeQuest-UI-UX (Do not copy exactly the same name as in the image below)

   

4. After creating a repository, copy the repository URL and paste it in our CodeQuest Tracker Sheet in your corresponding row.

   Note: If you are having trouble with the CodeQuest Tracker Sheet, do not hesitate to directly message any DSWD officers or email us at [email protected]

5. Finally, clone the repository by clicking the Code button on the top right side of the repository's main page and clicking the Open with GitHub Desktop button to redirect to your GitHub Desktop application.

   

6. And just click the Clone button to clone it to your computer.

   

---

🌟 Contributors

Xian Cheng	Luisa Eustaquio	Khim Verona	Mikyla Angala

---

Enjoy designing!~