hadywafa/UI-UX-Roadmap-2023

UI/UX Squad Roadmap

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
  • What’s the difference between UI & UX design?

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
  • E-Commerce App (Youtube)
  • Plant App (Behance)
• Figma
  • Food Ordering Mobile App Design
  • Full App Design.

Basics of UI Design.

• Color inspiration

  • Color Hunt

  • Coolors

  • Flat UI Colors

  • Colormind

  • Colorinspire

  • 7 steps guide to understand color theory

  • Color Theory Interaction Design

  • Colors Palette

    • Color Palettes for Designers and Artists - Color Hunt
    • Fresh Background Gradients | WebGradients.com 💎
    • ColorSpace - Color Palettes Generator and Color Gradient Tool (mycolor.space)

• Photos

  • Types of images in UI design
    • Freepik
    • Pexels
    • Pixabay
    • Unsplash
    • Reshot
    • Pinterest
  • A little knowledge of Illustrator tool to get clear images

  OR

  • Remove Background From Images (If the image has the included element)

• Icons

  • Types and Functions of UI Icons
  • 7 Principles of Icon Design
    • Flaticon
    • Icons8
    • Iconfinder
    • Free icons
    • Feather icons
    • The Noun Project
    • Icons store
    • Simple icon

• Illustrations

  • UnDraw
  • StorySet
  • Vecteezy
  • Drawkit
  • Humaaans
  • Illustation

• Grid

  • 8-Point Grid
  • How to use Grid System
  • GRID systems for beginners

• Typography

  • Typography in UI: Guide for Beginners
    • Google Fonts
    • Arabic Fonts
  • 8 Rules for Perfect Typography in UI

• Guidelines

  • IOS Design Guidelines
  • Material Design
  • A/B Test for websites

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)

• Task 1
• Task 2
• Task 3
• Task 4
• Task 5

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.

• Behance
• Dribble
• Pinterest
• Mobbin

Level 0 ✔

🟦Level 1️⃣:-

You can start with XD Challenges for creative UI ideas.

• XD Challenge (Behance)

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

• What is a Mockup?
  • Mockup for free
  • Mockup World
  • Graphic Burger
  • Is graphics

Portfolio

• Complete Guide to UI Portfolio
• Advice for Beginners

Upload project

• How To Create A Clean Portfolio Using Behance

---

UX Getting Started🕊

What is UX Design

• The meaning of UX

What is the process of UX

• Process of UX
• Process of UX (Video)

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
  • What is user research
  • Research Plan & Recruiting for UX Design Projects
  • Example( semi-structure)
• User interview
  • User Interviews: How, When, and Why to Conduct Them
  • User Interview Questions
  • Ways to improve questions
  • Research report
• Journey map
  • The meaning of journey map
  • Customer Journey Map Workshop
• Competitive Analysis
  • A Guide to Competitive Analysis for UX Design
  • Essential Ingredients For Every Competitive Analysis
• User Persona
  • Definition of Persona
  • Tips for How to Create & Use Personas
• Empathy Map
  • The First Step in Design Thinking
  • How to make the 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

• The ultimate guide to prototyping
• Rapid Prototyping

Information Architecture

• What is Information Architecture
• Guide To Information Architecture
• Top 10 Information Architecture (IA) Mistakes

Usability Testing

• What is Usability Testing
• Why Usability Test?
• What makes a good usability test?

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

• Evernote

• 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.)

• Design Review

• 10 Usability Heuristics for User Interface Design

• Mistakes

YouTube:

• Sarah Doody
• DesignCourse
• femke.design
• Jesse Showalter

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📱