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
Product idea you can be the stakeholder with the idea at your first time.
The first step is to find aUX 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.