i want to fix this  text(# ✦ UI UX Design Roadmap ✦

Made by Ismail Mospah

---

**Beginner Level ( Weeks 1-8 )**

## **Week 1: UX vs UI: What’s the Difference?**

### • Understand The Basics:

 To begin your journey as a UI/UX designer, you need to grasp the fundamental differences and roles within the field. 

### •UI Design

Focus on the visual aspects of digital interfaces.
Elements: Visuals, colours, typography.

### •UX Design

Focus on the overall user experience and interaction.
Elements: User research, wireframes, user journeys.

### Resources:

### •Articles:

https://www.interaction-design.org/literature/article/ux-vs-ui-what-s-the-difference

### •Videos:

https://youtu.be/Nje7GiGeKW0?si=_8fr2D2jzz6uvK8K ( Arabic )

### Task:

Write about the differences between UI and UX.

---

---

## **Week 2: UXD fundamentals**

### Resources:

### •Courses

1:30 hour Only and you will get a certificate from mahara tech

https://maharatech.gov.eg/course/view.php?id=1231 ( Arabic )

### Task:

get a certificated and Summarize what you learned.

---

---

## **Week 3: Introduction to Design**

What is design? Basic design principles (balance, contrast, proportion, harmony).

### Resources:

### •Articles:

https://www.toptal.com/designers/ui/principles-of-design
https://paperform.co/blog/principles-of-design/

### •Videos:

https://youtu.be/120NDS4WrAs?si=NUfL82DWOOzDkbAn
https://youtu.be/9EPTM91TBDU?si=UEem4s7kvuhs1exE

### Task:

Summarize what you learned.

---

---

## **Week 4: Figma  &  wireframing**

### Resources:

### •wireframe :

https://www.springboard.com/blog/design/how-to-create-a-wireframe/

### •Figma :

https://youtu.be/-zkYtn7cIew?si=HnBtErgZgKKyQUXb ( Arabic )

https://www.youtube.com/watch?v=7K7pEPFepWA&list=PLjzhiGLyugKynpBi7v2AWMCJgTrRI6Ne- ( Arabic )

### Task:

watch This video and  apply behind him and create wireframe to this app

https://www.youtube.com/watch?v=7tC8b9pIqhY ( Arabic )

---

---

## **Week 5: UX Basics**

### Resources:

### •Articles :

7 Factors of User Experience, What is UX process, good UX vs bad UX?

https://medium.com/ascentic-technology/7-factors-of-user-experience-by-peter-morville-cb2fdfb45bcb

https://uxdesign.cc/what-is-the-design-process-and-why-every-designer-should-know-about-it-baab017eed82

https://www.creativecorner.studio/blog/bad-ux-vs-good-ux

### •Videos :

What is UX Design ?

https://www.youtube.com/watch?v=SRec90j6lTY

Good UX vs bad UX  is UX

https://youtu.be/6chQ6JZpvTQ?si=VzdWvpgr1RIXmZMZ

### Task:

Summarize what you learned.

Analyze any website or app and identify the strengths and weaknesses in user experience.

---

---

## **Week 6: Basics User Interface (UI)**

### Resources:

### •Articles :

https://maze.co/collections/ux-ui-design/ui-design-principles/

https://medium.com/@NALSengineering/10-principles-in-ui-design-enhancing-user-experience-through-practical-examples-9d519e91b515

### •Videos :

https://youtu.be/uwNClNmekGU?si=98qlxy0Iw6PTy0wm

https://youtu.be/yNDgFK2Jj1E?si=12Lv_RHz9yAQ_H6-

### Task:

watch This video and And apply behind him and create wireframe to this app

https://youtu.be/5ebUVh72wGc?si=rYeE3vmwEi919zF8

---

---

## **Week 7: Prototyping**

### Resources:

### •Videos :

https://youtu.be/UUsysuFmVrA?si=JFgel3qGZFQimTIm

https://youtu.be/1hJjyL0o7vg?si=3hHrAz2rMKyFvDv-

### Task:

watch This video and And apply behind him and create prototype to this app 

https://youtu.be/eM1534Fng6g?si=aThhQ8mf_9n532M1

---

---

## **Week 8: project, Local Food Delivery App**

The task is for beginners to design a simple app that allows users to order food from local restaurants, with a user-friendly interface for browsing and ordering. The app’s features include:

### project details:

•Study popular food delivery apps.

•Identify the strengths and weaknesses of existing apps..

•Sketch on paper

•wireframes

•Final UI

•Focus on UI principles

•Focus on UX principles

•Prototype

### App features:

•Viewing menus from different restaurants.

•Selecting Meals and adding them to the cart.

•Multiple payment options (cash, card).

•Tracking order status (preparing, on the way, delivered).

### Final Submission:

•Present the final project, explaining each stage they went through.

•Showcase the final prototypes and how users responded to them.

---

---

**intermediate Level ( Weeks 9-28 )**

## **Week 9: Design Thinking**

### Resources:

### •Articles :

https://www.interaction-design.org/literature/article/what-is-design-thinking-and-why-is-it-so-popular

https://www.nngroup.com/articles/design-thinking/

### •Videos :

https://www.youtube.com/watch?v=6lmvCqvmjfE

https://www.youtube.com/watch?v=p_IKACdmH10 ( Arabic )

https://www.youtube.com/watch?v=9dkGoWhgQBg&t=190s ( Arabic )

https://www.youtube.com/watch?v=n8V5yV2VEtU ( Arabic )

### Task:

Write what steps we follow when thinking about solving a specific problem ?

---

---

## **Week 10: Colors & Typography**

### Resources:

### •Colors :

https://medium.com/@code_theorem/color-theory-for-designers-color-wheel-theory-what-each-color-means-9401af6ea981

https://uxdesign.cc/color-theory-for-designers-a-crash-course-with-infographic-41d8b4c45619

https://youtu.be/wHCauzqO3kk?si=hfOsbJS9CNcQ2x66 ( Arabic )

https://youtu.be/0xl67wDdOvg?si=A4F208gAkwz2kafh  ( Arabic )

### •Typography:

https://xd.adobe.com/ideas/process/ui-design/typography-in-ui-design/

https://www.youtube.com/watch?v=GCluIaNmOG0

### Task:

design 3 Onboarding  Screens to clothes app, focus on colors and typography

---

---

## **Week 11: Intro to UX Research**

### Resources:

### •Articles :

https://uxbooth.com/articles/complete-beginners-guide-to-design-research/

https://medium.com/mule-design/the-9-rules-of-design-research-1a273fdd1d3b

### •Videos :

https://youtu.be/kQ_6faxhyIw?si=Az79h9_spnxEP5eS

https://www.youtube.com/watch?v=z3ruzLItPlM ( Arabic )

### Task:

1-
What are the primary goals of your user experience research? What specific questions are you trying to answer?

2-
The designs you designed in the previous task, design them here but used website frame and make the web responsive.

---

---

## **Week 12: Qualitative & Quantitative Research**

### Resources:

### •Qualitative Research:

https://www.interaction-design.org/literature/topics/qualitative-research

https://www.youtube.com/watch?v=dyHMTaQJmYo

https://www.youtube.com/watch?v=qvpitkHcIGk

### •Quantitative Research:

https://www.interaction-design.org/literature/topics/quantitative-research

https://www.nngroup.com/articles/quantitative-user-research-methods/

https://www.youtube.com/watch?v=LmWPygSxMms

### Task:

State the difference between Qualitative & Quantitative Research

---

---

## **Week 13: Spacings & Iconography**

### Resources:

### •Spacings:

https://www.designsystems.com/space-grids-and-layouts/

https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632

https://youtu.be/cf95Z7Ngg8k?si=wt9xdeg2EMi_OFb6

https://youtu.be/xUfiMPTz2mI?si=DpD4uBq-ml96u5qg ( Arabic )

### •Iconography:

https://www.designsystems.com/iconography-guide/

https://www.youtube.com/watch?v=GCluIaNmOG0

https://youtu.be/ffUxT6pVI5Q?si=QvW2yPTiDlsjzP-g

### Task:

design Login and Sign Up Screens to Clothing app , Focus on spacing and icons

---

---

## **Week 14: ( Discover ) Interviews & Surveys**

### Resources:

### •Interviews:

https://www.nngroup.com/articles/user-interviews/

https://medium.com/designstrat/exploratory-design-research-interview-dc51398c6354

https://www.nngroup.com/articles/interview-guide/

https://youtu.be/5tVbFfGDQCk?si=QptXsjQpLgf3XLg9

### •Surveys:

https://www.nngroup.com/articles/qualitative-surveys/?ref=uxtools-challenges

https://www.surveymonkey.com/learn/survey-best-practices/

https://uxplanet.org/this-is-all-you-need-to-know-to-conduct-a-ux-survey-50400af45920

https://youtu.be/exyHMFVrZCg?si=-NkJkkqCOGV-UGwB

### Task:

1-
Choose 3 people and do a user interview with them about the problem you previously identified in Design Thinking Task?

2-
The designs you designed in the previous task, design them here but used website frame and make the web responsive.

---

---

## **Week 15: Components & Naming**

### Resources:

### •Components:

https://www.designsystems.com/space-grids-and-layouts/

https://youtu.be/BGNacvycbiI?si=-PUTts4EgpDmU34U.  ( Arabic )

https://youtu.be/MeNNPaxT3UM?si=BE_RrHttrm196YHv.  ( Arabic )

https://youtu.be/77UlksKEaeI?si=sv49J6TG_VzkCOiG.  ( Arabic )

### •Naming:

https://www.youtube.com/watch?v=w2LFfOtPsoc

### Task:

1-
Create varible button used by componanents ( with title and without, with icon and without icon , big and small fill and out line and so on ) Focus on naming to this components too

2-
design Home screen to clothing contains at search, ads bar, categories and products Cards

design product details screen 

design cart screen

---

---

## **Week 16: ( Discover ) Competitive Analysis & SWOT Analysis**

### Resources:

### •Competitive Analysis:

https://www.toptal.com/product-managers/product-consultant/product-designer-guide-to-competitive-analysis

https://xd.adobe.com/ideas/process/user-research/guide-to-competitive-analysis-ux-design/

https://uxplanet.org/top-things-to-know-about-ux-competitive-analysis-d91689fd8b36

https://youtu.be/5tVbFfGDQCk?si=QptXsjQpLgf3XLg9

### •SWOT Analysis:

https://www.investopedia.com/terms/s/swot.asp

https://youtu.be/I_6AVRGLXGA?si=9OZrAoWssEWj7hO7

### Task:

1-
Do Competitive Analysis to 3 competitors in any field you choose and Swot Analysis.

2-
The designs you designed in the previous task, design them here but used website frame and make the web responsive.

---

---

## Weak 17: Read Chapter 1 & 2 from Practical UI book

### Resources:

### •Download link:

https://drive.google.com/file/d/1fRb1u3k7yLmch3PqwSp4SdUoqa-0He9I/view

### Task:

1-
Summarize Chapters 1 & 2 and tell us what you learned .

2-
Complete any screens not design yet in clothing app and web like Check Out screens and account screens and anything else to complete this app

---

---

## **Week** 18: ( Discover ) Persona & Empathy Map

### Resources:

### •Persona:

https://www.nngroup.com/articles/persona/

https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/

https://medium.com/@benleralph/personas-74c4e1c12ee2

https://youtu.be/PYv46j02zvY?si=0gDU2Iv0F0vS_UdF

### •Empathy Map:

https://www.nngroup.com/articles/empathy-mapping/

https://uxbooth.com/articles/empathy-mapping-a-guide-to-getting-inside-a-users-head/

https://www.interaction-design.org/literature/article/empathy-map-why-and-how-to-use-it

https://youtu.be/QwF9a56WFWA?si=zq4VqWUoUkZjX3da

https://youtu.be/QvmLQ7cDvsA?si=qSP0KH-XFpQ1-k2F ( Arabic Empathy & Persona )

### Task:

Do a persona and empathy map to any idea 

---

---

## **Week** 19: Design System

### Resources:

### •Articles:

https://uxdesign.cc/what-is-a-design-system-a-simple-guide-to-get-started-529fb4b38f9b

https://www.toptal.com/designers/design-systems/benefits-of-design-system

### •Videos:

https://www.youtube.com/watch?v=EK-pHkc5EL4

https://www.youtube.com/watch?v=_SK2L3Nns_s&list=PLlzarBwg78omi49iNVXY_iTXvRm9V1tZN ( Arabic ) 

### Task:

Do a design system to clothing product

---

---

## **Week** 20: ( Discover ) Customer Journey Map

### Resources:

### •Articles:

https://www.interaction-design.org/literature/topics/customer-journey-map

https://medium.com/choice-hacking/how-to-create-a-customer-journey-map-ffbd580284d7

### •Videos:

https://youtu.be/3iwL2OEeWiw?si=71VKPpjIP7Ry6O5_

### Task:

What is customer Journey Map ?

---

---

## **Week** 21: Read Chapter 3 & 4 from Practical UI book

### Resources:

### •Download link:

https://drive.google.com/file/d/1fRb1u3k7yLmch3PqwSp4SdUoqa-0He9I/view

### Task:

1-
Summarize Chapters 3 & 4 and tell us what you learned .

2-
design a landing page to encourage people to download clothing app ( responsive )

---

---

## **Week** 22: ( Define ) Problem Statements

### Resources:

### •Articles:

https://www.interaction-design.org/literature/topics/problem-statements

https://www.nngroup.com/articles/problem-statements/

### •Videos:

https://www.youtube.com/watch?v=kT0ZqwdPYRM

https://youtu.be/TNAdanuvwtc?si=WldpFOTXRn5f00We

### Task:

**Detatils**:

1. Choose a product or service you use frequently, such as a mobile app, website, or even a physical device.

2. Identify a specific problem that users face with this product or service. Try to be as precise as possible.

3. Write a Problem Statement that describes the issue. Make sure to include:

- Who are the users?
- What is the problem they are facing?
- Why does this problem negatively impact their experience?

**Example of a Problem Statement:**

"Students attending lectures via the Zoom app are struggling to stay focused due to the lack of interactive features. This issue affects their learning experience and reduces the effectiveness of the lectures."

---

---

## **Week** 23: Read Chapter 5 & 6 from Practical UI book

### Resources:

### •Download link:

https://drive.google.com/file/d/1fRb1u3k7yLmch3PqwSp4SdUoqa-0He9I/view

### Task:

1-
Summarize Chapters 5 & 6 and tell us what you learned .

2-
Create a dashboard to clothing product

---

---

## **Week** 24: ( Ideate ) Brainstorming & Affinity Diagrams

### Resources:

### •Brainstorming:

https://www.interaction-design.org/literature/topics/brainstorming

https://www.intercom.com/blog/running-design-workshops/

https://www.youtube.com/watch?v=Gyb_ZdYVt3k ( Arabic )

### •Affinity Diagrams:

https://www.interaction-design.org/literature/article/affinity-diagrams-learn-how-to-cluster-and-bundle-ideas-and-facts

https://www.youtube.com/watch?v=uVz_oFK472w

### Task:

**1. Brainstorming:**

- conduct an individual brainstorming session.
- Choose a specific problem or topic related to user experience in a product or service.
- Write down all the ideas and suggestions that come to mind for solving the problem or improving the experience, without evaluating or criticizing them.
- Focus on generating as many ideas as possible within a set time frame (e.g., 15-20 minutes).

**2. Affinity Diagrams:**

- After brainstorming, start grouping similar ideas together.
- For each group, give it a title that represents the common idea.
- Continue organizing the ideas until you have a clear diagram that shows the relationships between different ideas.

---

---

## **Week** 25: Read Chapter 7 & 8 from Practical UI book

### Resources:

### •Download link:

https://drive.google.com/file/d/1fRb1u3k7yLmch3PqwSp4SdUoqa-0He9I/view

### Task:

1-
Summarize Chapters 7 & 8 and tell us what you learned .

2-
Complete the dashboard and make it responsive

---

---

## **Week** 26: ( Ideate ) Information Architecture & User Flow

### Resources:

### •Information Architecture:

https://xd.adobe.com/ideas/process/information-architecture/information-ux-architect/

https://www.youtube.com/watch?v=OJLfjgVlwDo

https://www.youtube.com/watch?v=TtvOiDxRPtE  ( Arabic )

### •User Flow:

https://www.interaction-design.org/literature/topics/user-flows

https://youtu.be/cvYhuowazh0?si=jGtouT71jHrVpupn

https://youtu.be/0_6z39YcMTo?si=2v2yNO5FCkaqfg-p ( Arabic )

### Task:

**1. Information Architecture:**

- Choose an existing website or app that you use frequently.
- Analyze its current structure by mapping out its main sections and sub-sections.
- Based on your analysis, propose a revised Information Architecture that improves navigation and user experience. You can create a sitemap to visualize the new structure.
- Justify your decisions by explaining how the new structure better meets the needs of the users.

**2. User Flow:**

- Select a specific task or goal a user would want to accomplish on the chosen website or app (e.g., purchasing a product, signing up for a service).
- Create a User Flow diagram that shows the steps a user would take to complete this task, starting from the entry point to the final action.
- Identify any potential pain points or areas of friction in the current flow, and suggest improvements to make the process smoother and more intuitive.

---

---

## **Week** 27: Usability Test & Iteration

### Resources:

### •Articles:

https://www.nngroup.com/articles/usability-test-checklist/

https://www.smashingmagazine.com/2018/03/guide-user-testing/

https://www.toptal.com/designers/ux-consultants/how-to-conduct-usability-testing-in-6-steps

https://xd.adobe.com/ideas/process/user-testing/process-user-testing-iterative-usability-testing-best-practices/

### •Videos:

https://youtu.be/nYCJTea1AUQ?si=NQjKxJOsO4Pc3wFQ

**1. Usability Testing:**

- Select a digital product (website or app) that you or your group has worked on or are familiar with.
- Create a usability test plan that outlines:
- The goals of the usability test (what you want to learn).
- The tasks you want users to perform (e.g., finding a product, completing a registration form).
- The criteria for selecting participants (e.g., target user demographics).
- Conduct the usability test with at least 3-5 users. Observe their interactions, take notes on their feedback, and record any challenges they face.

**2. Analysis:**

- After the testing, analyze the data collected from the usability tests.
- Identify common pain points, user frustrations, and areas for improvement based on user feedback.
- Summarize your findings in a report, highlighting key insights and specific recommendations for design improvements.

**3. Iteration:**

- Based on your analysis, create an iterative plan that outlines the changes you will make to improve the user experience.
- Update the design or prototype to address the identified issues.
- Consider conducting another round of usability testing with the revised design to evaluate the effectiveness of your changes.

---

---

## **Week** 28: project, Case Study

You will be divided into teams, 3 in each team, and each team will look for a specific problem or idea and then apply it using what we have learned.

### Project details :

**1. Research :**

• Brainstorming : 

First, brainstorm with the team the idea or problem you want to solve.

• User Interviews: 

Each group should conduct interviews with 3-5 users to understand their needs and pain points.

• Surveys:

Create a simple survey to gather quantitative data from potential users.

• Affinity Diagrams : 

make affinity diagram from all data you get it 

• Competitive Analysis & SWOT Analysis :

Analyze 2-3 competing apps or websites to identify strengths and weaknesses.

**2. Personas & User Journey :**

• Personas: 

Create 2-3 user personas based on the data collected in the research phase.

• User Journey Mapping:

Create a user journey map that illustrates the user's path through the app or website, highlighting pain points and opportunities for improvement.

**3. Information Architecture & Wireframes  :**

Design the structure of the core pages in the app and show how users will navigate between them.

• Sketch & Wireframes: 

Develop low-fidelity wireframes to outline the layout and structure of key screens.

**3. UI design & Prototype**

-Design the user interface, applying best practices in layout, colors, typography, and spacing.
-Then Create a prototype using UI screens

**4. Usability Test & Iteration :**

- Conduct the usability test with at least 3-5 users. Observe their interactions, take notes on their feedback, and record any challenges they face.

- After the testing, analyze the data collected from the usability tests.

- Update the design or prototype to address the identified issues.

-Revise the prototype based on user feedback to improve the overall user experience.

**5. Presentation:**

Each group should prepare a full presentation that explains the entire process, from research to final design, focusing on the solutions they implemented.) make organize text and add more detsials and exaplanations and more more and add more links for exanapation, and mkae thie roadmap is best roadmap and in the end type created by: Mahmoud Tawfik,