UI/UX Squad Roadmap
“We are in CIS try to give you advice about How to start in UI/UX. This Document for who are interested in UI/UX”
🟦 What is UI/UX?
-
" 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.
-
" 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. "
🟦 Level 0️⃣ :-
Difference Between UI & UX.
- Videos
- English : Youtube Video
- Arabic : Youtube Video
- Articles
How to start with a Tool
Adobe XD Tool
- English Tutorial (Recommended) : Learnux Playlist
- Arabic Tutorial : Youtube Playlist
Figma Tool
- English Tutorial (Recommended) : Learnux Playlist
- Arabic Tutorial : Youtube Playlist
Practice on how to use the tool
- Adobe XD
- Figma
Basics of UI Design.
-
Color inspiration
-
Colors Palette
-
Photos
- Types of images in UI design
- A little knowledge of Illustrator tool to get clear images
OR
- Remove Background From Images (If the image has the included element)
-
Icons
-
Illustrations
-
Grid
-
Typography
-
Guidelines
UI Design Principles
- Golden rules of user interface design
- The 4 Golden Rules of UI Design
- User Interface Design Guidelines: 10 Rules of Thumb
- 10 Fundamental UI Design Principles You Need to Know
- The Basic Principles of User Interface Design
Practice many designs for web and mobile(Inspiration)
Note: Follow the hierarchy of the tasks
Inspiration
Note: You can search for your idea and start to build your own design as it is only inspiration.
Level 0 ✔
🟦 Level 1️⃣ :-
You can start with XD Challenges for creative UI ideas.
UI Design articles
- Elements of design
- Guide to space and layout in UI design
- 5 Principles of Visual Design in UX
- 10 rules of composition all designers
- Design Systems: Step-by-Step
- 10 tips for designing the user mind
Full UI project
- An idea from your mind as it will be designed for:
- Mobile Application
- Website
Mockup
Portfolio
Upload project
UX Getting Started🕊
What is UX Design
What is the process of UX
The first step is to find a Product idea you can be the stakeholder with the idea at your first time.
UX Research
- Research Plan
- User interview
- Journey map
- Competitive Analysis
- User Persona
- Empathy Map
Level 1 ✔
🟦 Level 2️⃣ :-
Wireframes
- What are Wireframes
- How To Make Your First Wireframe
- How To Create Your First Wireframe (Video Guide)
Digital Prototype
Information Architecture
- What is Information Architecture
- Guide To Information Architecture
- Top 10 Information Architecture (IA) Mistakes
Usability Testing
Implement a final project
- Inspire an idea
- Implement a mobile application and a website included UI/UX process
- Upload the final project with a use case in Behance
UX Certification (for more experience):
Google UX Design Professional Certificate
UX Design Course Nanodegree (Udacity)
Useful links for UI/UX
-
Good UX vs Bad UX: Landing Pages (And we looked at a number of examples of different products and interfaces while considering what might make them good (or bad) experiences for users.)
YouTube:
Reading books
- The Design of Everyday Things
- 100 Things Every Designer Needs to Know about People
- Don't Make Me Think
- The Actionable Guide to Starting Your Design System
- The Elements of Successful UX Design
- Meaningful Mobile Typography
- More Books
Congratulation, we hope for you all the best, CIS Mentors.
▶️ Our Contacts📱
