{"id":13339185,"url":"https://github.com/CIS-Team/UI-UX-Roadmap-2023","last_synced_at":"2025-03-11T12:31:29.392Z","repository":{"id":53345851,"uuid":"389454965","full_name":"CIS-Team/UI-UX-Roadmap-2023","owner":"CIS-Team","description":"UI/UX Squad Roadmap","archived":false,"fork":false,"pushed_at":"2023-03-20T19:57:25.000Z","size":166,"stargazers_count":498,"open_issues_count":6,"forks_count":72,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-02-20T04:44:36.603Z","etag":null,"topics":["cis-team","computer-science","ui","ui-design","user-experience","user-interface","ux","ux-ui"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CIS-Team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-25T22:49:23.000Z","updated_at":"2025-02-19T16:33:52.000Z","dependencies_parsed_at":"2024-10-30T22:35:15.737Z","dependency_job_id":null,"html_url":"https://github.com/CIS-Team/UI-UX-Roadmap-2023","commit_stats":null,"previous_names":["cis-team/ui-ux-roadmap-2023"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CIS-Team%2FUI-UX-Roadmap-2023","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CIS-Team%2FUI-UX-Roadmap-2023/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CIS-Team%2FUI-UX-Roadmap-2023/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CIS-Team%2FUI-UX-Roadmap-2023/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CIS-Team","download_url":"https://codeload.github.com/CIS-Team/UI-UX-Roadmap-2023/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243034913,"owners_count":20225428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cis-team","computer-science","ui","ui-design","user-experience","user-interface","ux","ux-ui"],"created_at":"2024-07-29T19:19:19.511Z","updated_at":"2025-03-11T12:31:29.377Z","avatar_url":"https://github.com/CIS-Team.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"![UI/UX](https://corepany.com/site/assets/files/1394/kullanici_deneyiminin_onemi_fb-1.jpg)\n\n# UI/UX Squad Roadmap\n\n**“We are in [CIS](https://www.facebook.com/cisteam15/) try to give you advice about How to start in UI/UX. This Document for who are interested in UI/UX”**\n\n## **🟦What is UI/UX?**\n\n\n-   \" **User Interface (UI) design** is the process of transforming wireframes into a polished graphical user interface \". a UI designer’s job begins where a UX designer’s job ends—at the prototyping stage. They take the wireframes and add visual design to make them more usable, aesthetically appealing, and optimized for different screen sizes.\n\n-   \" **User Experience (UX) design** is about understanding the overall journey of your users and turning it into a product. The role of a user experience designer is to understand the customer journey. That means understanding the target audience, interviewing customers, defining user flows, and conducting user testing. \"\n\n![UI vs UX](http://bluebash.co/blog/content/images/2020/04/differenceuiux..png)\n\n## **🟦Level 0️⃣:-**\n\n### Difference Between UI \u0026 UX.\n\n- **Videos**\n    - English : [Youtube Video](https://www.youtube.com/watch?v=RtPnVtXw6HU)\n    - Arabic : [Youtube Video](https://www.youtube.com/watch?v=KaIzzUs2BkI)\n- **Articles**\n    - [What’s the difference between UI \u0026 UX design?](https://manvisinghwal.medium.com/whats-the-difference-between-ui-ux-design-aeddfdbe3206)\n\n### How to start with a Tool\n\n**Adobe XD Tool**\n\n- English Tutorial (Recommended) : [Learnux Playlist](https://learnux.io/course/adobe-xd)\n- Arabic Tutorial : [Youtube Playlist](https://www.youtube.com/watch?v=EqSd8vXGcBk\u0026list=PLRemWV5koZLBR1khj5OlC_xLkdsI8G5DF)\n\n**Figma Tool**\n\n- English Tutorial (Recommended) : [Learnux Playlist](https://learnux.io/course/figma)\n- Arabic Tutorial :  [Youtube Playlist](https://www.youtube.com/playlist?list=PLkIliLHi5M4LosGOLzn2f6baDETNsYpCZ)\n\n### Practice on how to use the tool\n- **Adobe XD**\n     - [E-Commerce App (Youtube)](https://www.youtube.com/watch?v=_5uI_BOpvkA)\n     - [Plant App (Behance)](https://www.behance.net/gallery/127006201/Plant-App-Sign-up-login-UI?tracking_source=search_projects_recommended%7Clog%20in%20sign%20up)\n- **Figma**\n     - [Food Ordering Mobile App Design](https://youtu.be/O3BmHGNAGhM)\n     - [Full App Design.](https://youtu.be/GP91kWinPdg)\n### Basics of UI Design.\n\n- **Color inspiration**\n    - [Color Hunt](https://colorhunt.co/)\n    - [Coolors](https://coolors.co/)\n    - [Flat UI Colors](https://flatuicolors.com/)\n    - [Colormind](http://colormind.io/)\n    - [Colorinspire](https://colorinspire.webflow.io/)\n\n    - [7 steps guide to understand color theory](https://99designs.com/blog/tips/the-7-step-guide-to-understanding-color-theory/)\n    - [Color Theory Interaction Design](https://www.interaction-design.org/literature/topics/color-theory)\n    - Colors Palette\n        - [Color Palettes for Designers and Artists - Color Hunt](https://colorhunt.co/)\n        - [Fresh Background Gradients | WebGradients.com 💎](https://webgradients.com/)\n        - [ColorSpace - Color Palettes Generator and Color Gradient Tool (mycolor.space)](https://mycolor.space/)\n        \n- **Photos**\n    - [Types of images in UI design](https://uxcel.com/blog/the-basic-types-of-images-in-ui-design)\n        - [Freepik](https://www.freepik.com/)\n        - [Pexels](https://www.pexels.com/)\n        - [Pixabay](https://www.shutterstock.com/search/pixabay?kw=\u0026gclid=Cj0KCQjw0umSBhDrARIsAH7FCoc2xTMHHU8J9BQXbOJ-p8OEQjoqvNW6LnS0y9wqUdGGvnBrejDcqzAaAglhEALw_wcB)\n        - [Unsplash](https://unsplash.com/)\n        - [Reshot](https://www.reshot.com/)\n        - [Pinterest](https://www.pinterest.com/)\n    - A little knowledge of Illustrator tool to get clear images\n    \n    OR\n    \n    - [Remove Background From Images](https://www.erase.bg/en/) (If the image has the included element)\n    \n- **Icons**\n    - [Types and Functions of UI Icons](https://blog.tubikstudio.com/small-elements-big-impact-types-and-functions-of-ui-icons/)\n    - [7 Principles of Icon Design](https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2)\n        - [Flaticon](https://www.flaticon.com)\n        - [Icons8](https://icons8.com/)\n        - [Iconfinder](https://www.iconfinder.com/)\n        - [Free icons](https://freeicons.io)\n        - [Feather icons](https://feathericons.com/)\n        - [The Noun Project](https://thenounproject.com/)\n        - [Icons store](https://iconstore.co/)\n        - [Simple icon](https://simpleicons.org/)\n\n- **Illustrations**\n     - [UnDraw](https://undraw.co/)\n     - [StorySet](https://www.atlassian.com/software/jira?gclsrc=aw.ds\u0026\u0026aceid=\u0026adposition=\u0026adgroup=97207397182\u0026campaign=9795515412\u0026creative=430047058033\u0026device=c\u0026keyword=story%20set\u0026matchtype=e\u0026network=g\u0026placement=\u0026ds_kids=p69502831155\u0026ds_e=GOOGLE\u0026ds_eid=700000001756546\u0026ds_e1=GOOGLE\u0026gclid=Cj0KCQjw0umSBhDrARIsAH7FCoeUXJYyw2zXSXumnFKzY0Zm_6_QbGZc2mwzy8Weo5mR9mkyWrovV4waAp4qEALw_wcB)\n     - [Vecteezy](https://www.vecteezy.com/)\n     - [Drawkit](https://drawkit.com/)\n     - [Humaaans](https://www.humaaans.com/)\n     - [Illustation](https://illustation.io/)\n        \n- **Grid**\n    - [8-Point Grid](https://spec.fm/specifics/8-pt-grid?fbclid=IwAR1g_goEhw0SNhix91zj1yLNeAvmW8Qg5Ab4ia-OiXSgvSuqgMhPlbbI9m8)\n    - [How to use Grid System](https://www.interaction-design.org/literature/article/how-to-use-grid-systems)\n    - [GRID systems for beginners](https://youtu.be/pxN8w-ywSuc)\n\n- **Typography**\n    - [Typography in UI: Guide for Beginners](https://blog.tubikstudio.com/typography-in-ui-guide-for-beginners/)\n        - [Google Fonts](https://fonts.google.com/)\n        - [Arabic Fonts](https://arbfonts.com/)\n    - [8 Rules for Perfect Typography in UI](https://blog.prototypr.io/8-rules-for-perfect-typography-in-ui-21b37f6f23ce)\n    \n\n\n- **Guidelines**\n    - [IOS Design Guidelines](https://ivomynttinen.com/blog/ios-design-guidelines?fbclid=IwAR0Q0ow4cjLjGQvpqhtORtNSel7bAlcn2GTM1DciG7rwRwJgQsleV-8Kyug)\n    - [Material Design](https://material.io/design/guidelines-overview)\n    - [A/B Test for websites](https://goodui.org/)\n  \n### UI Design Principles\n\n - [Golden rules of user interface design](https://maze.co/collections/ux-ui-design/ui-design-principles/)\n - [The 4 Golden Rules of UI Design](https://xd.adobe.com/ideas/process/ui-design/4-golden-rules-ui-design/)\n - [User Interface Design Guidelines: 10 Rules of Thumb](https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb)\n - [10 Fundamental UI Design Principles You Need to Know](https://dribbble.com/resources/ui-design-principles)\n - [The Basic Principles of User Interface Design](https://www.uxpin.com/studio/blog/ui-design-principles/)\n\n### Practice many designs for web and mobile(Inspiration)\n\n- [Task 1](https://dribbble.com/shots/4476562-Stand-for-Wildlife)\n- [Task 2](https://dribbble.com/shots/14968188-Travel-Service-Mobile-App)\n- [Task 3](https://dribbble.com/shots/16322334-Rental-Car-App-UI-Design)\n- [Task 4](https://dribbble.com/shots/9324251-Task-Management-Application-Design)\n- [Task 5](https://dribbble.com/shots/16473464-Task-Management-App)\n\nNote: Follow the hierarchy of the tasks \n\n### Inspiration\n\nNote: You can search for your idea and start to build your own design as it is only inspiration.\n\n- [Behance](https://www.behance.net/)\n- [Dribble](https://dribbble.com/)\n- [Pinterest](https://www.pinterest.com/)\n- [Mobbin](https://mobbin.design/)\n\n### Level 0 ✔\n\n## **🟦Level 1️⃣:-**\n### You can start with XD Challenges for creative UI ideas.\n\n- [XD Challenge (Behance)](https://www.behance.net/challenge/xd)\n\n### UI Design articles\n\n- [Elements of design](https://www.invisionapp.com/defined/elements-of-design)\n- [Guide to space and layout in UI design](https://www.justinmind.com/blog/your-guide-to-space-and-layout-in-ui-design/)\n- [5 Principles of Visual Design in UX](https://www.nngroup.com/articles/principles-visual-design/)\n- [10 rules of composition all designers](https://www.canva.com/learn/visual-design-composition/)\n- [Design Systems: Step-by-Step](https://www.uxpin.com/create-design-system-guide/)\n- [10 tips for designing the user mind](https://www.seekmomentum.com/blog/website-design/10-tips-designing-users-mind)\n\n### Full UI project\n\n- An idea from your mind as it will be designed for:\n    - Mobile Application\n    - Website\n\n### Mockup\n\n- [What is a Mockup?](https://www.youtube.com/watch?v=8iP2qXwk184\u0026t=189s)\n    - [Mockup for free](https://mockupsforfree.com/)\n    - [Mockup World](https://www.mockupworld.co/)\n    - [Graphic Burger](https://graphicburger.com/)\n    - [Is graphics](https://www.ls.graphics/free-mockups)\n\n### Portfolio\n\n- [Complete Guide to UI Portfolio](https://blog.uxfol.io/ui-designer-portfolio/)\n- [Advice for Beginners](https://www.youtube.com/watch?v=NGiQCBsVayI)\n\n### Upload project\n\n- [How To Create A Clean Portfolio Using Behance](https://www.youtube.com/watch?v=5yL-_sYKCHU)\n\n---\n\n# **UX Getting Started**🕊\n\n### What is UX Design\n\n- [The meaning of UX](https://careerfoundry.com/en/blog/ux-design/)\n\n### **What is the process of UX**\n\n- [Process of UX](https://xd.adobe.com/ideas/guides/ux-design-process-steps/)\n- [Process of UX (Video)](https://www.youtube.com/embed/Um3BhY0oS2c?autoplay=1\u0026controls=1\u0026showinfo=0\u0026rel=0)\n\n \n\n### The first step is to find a [Product idea](https://www.youtube.com/watch?v=_yinLUI_U1Y\u0026list=PLK9t9dlS8Xr8EMO6DhUQLeEo2RB7Y9BI9\u0026index=4) you can be the stakeholder with the idea at your first time.\n\n### UX Research\n\n- **Research Plan**\n    - [What is user research](https://xd.adobe.com/ideas/process/user-research/)\n    - [Research Plan \u0026 Recruiting for UX Design Projects](https://www.youtube.com/watch?v=w5JAbELISKI)\n    - [Example](https://video.udacity-data.com/topher/2019/October/5da657d1_example-research-plan/example-research-plan.pdf)( semi-structure)\n- **User interview**\n    - **[User Interviews: How, When, and Why to Conduct Them](https://www.nngroup.com/articles/user-interviews/?ref=uxtools-challenges)**\n    - **[User Interview Questions](https://stephaniewalter.design/blog/a-cheatsheet-for-user-interview-and-follow-ups-questions/?ref=uxtools-challenges)**\n    - [Ways to improve questions](https://www.smashingmagazine.com/2020/06/user-interview-questions/?ref=uxtools-challenges)\n    - [Research report](https://video.udacity-data.com/topher/2019/October/5da65823_example-research-report/example-research-report.pdf)\n- **Journey map**\n    - [The meaning of journey map](https://www.nngroup.com/articles/journey-mapping-101/?ref=uxtools-challenges)\n    - [Customer Journey Map Workshop](https://www.youtube.com/watch?v=X7iXcP-wIkk)\n- **Competitive Analysis**\n    - **[A Guide to Competitive Analysis for UX Design](https://xd.adobe.com/ideas/process/user-research/guide-to-competitive-analysis-ux-design/?ref=uxtools-challenges)**\n    - **[Essential Ingredients For Every Competitive Analysis](https://uxdesign.cc/essential-ingredients-for-every-competitive-analysis-ce08906a4079)**\n- **User Persona**\n    - [Definition of Persona](https://www.nngroup.com/articles/persona/?ref=uxtools-challenges)\n    - [Tips for How to Create \u0026 Use Personas](https://www.youtube.com/watch?v=7z7893qE_0w)\n- **Empathy Map**\n    - **[The First Step in Design Thinking](https://www.nngroup.com/articles/empathy-mapping/?ref=uxtools-challenges)**\n    - [How to make the Empathy Map](https://youtu.be/QwF9a56WFWA)\n\n### Level 1 ✔\n------------------------------------------------------------------------\n## **🟦Level 2️⃣:-**\n\n ### Wireframes\n\n- [What are Wireframes](https://balsamiq.com/learn/articles/what-are-wireframes/)\n- [How To Make Your First Wireframe](https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/)\n- [How To Create Your First Wireframe (Video Guide)](https://www.youtube.com/watch?v=KdfO_e0yK-g)\n\n### **Digital Prototype**\n\n- [The ultimate guide to prototyping](https://www.justinmind.com/prototyping?ref=uxtools-challenges)\n- [Rapid Prototyping](https://www.youtube.com/watch?v=KWGBGTGryFk)\n\n### **Information Architecture**\n\n- [What is Information Architecture](https://careerfoundry.com/en/blog/ux-design/a-beginners-guide-to-information-architecture/)\n- [Guide To Information Architecture](https://youtu.be/Ij4WquJaRTc)\n- [Top 10 Information Architecture (IA) Mistakes](https://www.nngroup.com/articles/top-10-ia-mistakes/?ref=uxtools-challenges)\n\n### Usability Testing\n\n- [What is Usability Testing](https://www.nngroup.com/articles/usability-testing-101/)\n- [Why Usability Test?](https://www.nngroup.com/articles/usability-testing-101/?ref=uxtools-challenges)\n- [What makes a good usability test?](https://www.youtube.com/watch?v=2Au2NoSSg-A?ref=uxtools-challenges)\n\n\n### Implement a final project\n\n- Inspire an idea\n- Implement a mobile application and a website included UI/UX process\n- Upload the final project with a use case in Behance\n\n### UX Certification (for more experience):\n\n**[Google UX Design Professional Certificate](https://www.coursera.org/professional-certificates/google-ux-design?utm_source=gg\u0026utm_medium=sem\u0026utm_campaign=15-GoogleUXDesign-ROW\u0026utm_content=15-GoogleUXDesign-ROW\u0026campaignid=12566638067\u0026adgroupid=119528847077\u0026device=c\u0026keyword=ux%20design%20google%20certificate\u0026matchtype=p\u0026network=g\u0026devicemodel=\u0026adpostion=\u0026creativeid=507197228289\u0026hide_mobile_promo\u0026gclid=CjwKCAiAvriMBhAuEiwA8Cs5lTRCjuQvh68Hh6ksx5OAb3q3eNkZBpEz4xrPiO7_N0pWhc4uy36PCRoCMXoQAvD_BwE)**\n\n**[UX Design Course Nanodegree (Udacity)](https://www.udacity.com/course/ux-designer-nanodegree--nd578)**\n\n### Useful links for UI/UX\n\n- [Evernote](https://www.evernote.design/)\n- [Good UX vs Bad UX: Landing Pages](https://www.youtube.com/watch?v=hCkmtXqbOrs) (And we looked at a number of examples of different products and interfaces while\nconsidering what might make them good (or bad) experiences for users.)\n\n- [Design Review](https://www.youtube.com/watch?v=mt2wlw72wVY)\n- [10 Usability Heuristics for User Interface Design](https://www.nngroup.com/articles/ten-usability-heuristics/)\n- [Mistakes](https://www.youtube.com/watch?v=aVs6EZP0inQ)\n### YouTube:\n- [Sarah Doody](https://www.youtube.com/c/SarahDoody)\n- [DesignCourse](https://www.youtube.com/user/DesignCourse)\n- [femke.design](https://www.youtube.com/channel/UCWUGGwfTfJ0-2jUS3dZqOJA)\n- [Jesse Showalter](https://www.youtube.com/user/JesseAtomic)\n\n\n\n\n\n### Reading books\n\n- [The Design of Everyday Things](https://drive.google.com/drive/folders/1Axoq6lz3BrWd8dAiBhfm3d5YzDANgByQ?usp=sharing)\n- [100 Things Every Designer Needs to Know about People](https://drive.google.com/drive/folders/1dhWkcjJYZXIoY5uzgIAAa08ld1uBM9IB?usp=sharing)\n- [Don't Make Me Think](https://drive.google.com/drive/folders/1CcB-yniVb7gPPb2iKtm-AVCi7KXup5Eh?usp=sharing)\n- [The Actionable Guide to Starting Your Design System](https://drive.google.com/drive/folders/1KTmzWMcdzorubP3gq78Q6ur18eZv9Vji?usp=sharing)\n- [The Elements of Successful UX Design](https://drive.google.com/drive/folders/1fAQqW3e_iuoxy9eH_QIqCkMx5hYDe3wz?usp=sharing)\n- [Meaningful Mobile Typography](https://drive.google.com/drive/folders/1ZV0WnjAGzoTWIAEvHBVFi_FXxp5A_JlD?usp=sharing)\n- [More Books](https://drive.google.com/drive/mobile/folders/1Ju0u-PeAyyxvj2exvmKkzLQEx5oC7Tfu?usp=sharing)\n\n \nCongratulation, we hope for you all the best, **CIS Mentors.**\n\n## **▶️Our Contacts📱**\n\u003ca href=\"https://www.facebook.com/manarosman70/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Facebook-%234267B2?style=flat\u0026logo=Facebook\u0026logoColor=white\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/mannarosman/\" title=\"LinkedIn\"\u003e\u003cimg src=\"https://img.shields.io/badge/LinkedIn-%230177B5?style=flat\u0026logo=linkedin\u0026logoColor=white\"/\u003e\u003c/a\u003e\n\n\u003ca href=\"https://m.facebook.com/doaa.hamdy.5895\"\u003e\u003cimg src=\"https://img.shields.io/badge/Facebook-%234267B2?style=flat\u0026logo=Facebook\u0026logoColor=white\"/\u003e\u003c/a\u003e\n\u003ca href=\"http://linkedin.com/in/doaa-hamdy-8598201b4\" title=\"LinkedIn\"\u003e\u003cimg src=\"https://img.shields.io/badge/LinkedIn-%230177B5?style=flat\u0026logo=linkedin\u0026logoColor=white\"/\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCIS-Team%2FUI-UX-Roadmap-2023","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCIS-Team%2FUI-UX-Roadmap-2023","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCIS-Team%2FUI-UX-Roadmap-2023/lists"}