UIUX-Squad-CIS-Team

“We are in CIS help you to start in UI/UX."Craft the future with your design touch!"

▶️What is UI/UX?

• " User Interface (UI) design In digital product or service design, it refers to the interactive and visual aspects that let people engage with the product or service. This comprises buttons, menus, navigational elements, touchscreens, and screens. An interface's usability, aesthetic appeal, and efficiency are all the products of user interface design. The user experience (UX) design process requires it as a crucial component.

• " User Experience (UX) design In UX design, user behavior is analyzed, user research is carried out, user personas are created, and the product is designed to offer a seamless and fulfilling experience. UX designers ensure that the product is user-friendly, satisfies user goals and needs, and is intuitive."

⚡"Welcome to the exciting world of UI/UX design, where creativity and problem-solving collide to create meaningful experiences for users."

• Videos

  • English : Youtube Video / Youtube Video

  • Arabic : Youtube Video / Youtube Video

• Articles

  • What’s the difference between UI & UX design?
  • UI vs UX

▶️Level 0️⃣:-

How to start with a Tool

Figma Tool

• English Tutorial: Learnux Playlist
• Arabic Tutorial : Youtube Playlist

Adobe XD Tool

• English Tutorial: Learnux Playlist
• Arabic Tutorial : Youtube Playlist

Basics of UI Design

• Understanding Visual Hierarchy

  • English : Youtube Video / Youtube Video

  • Arabic : Youtube Video

• Color Theory and Usage

  • English : Youtube Video / Youtube Video

  • Arabic : Youtube Video / Youtube Video

  🔷 Articles

  • English : Colors Basics
  • Arabic : Colors Basics

• Typography in UI Design

  • English : Youtube Video / Youtube Video

  • Arabic : Youtube Video / Youtube Video

  🔷 Articles

  • Typography Bascis
  • Typography in UI: Guide for Beginners
    • Google Fonts
    • Arabic Fonts

• Grid Systems in UI Design

  • English : Youtube Video / Youtube Video

  • Arabic : Youtube Video

  🔷 Articles

  • Grid Sys / Grid sys / How to use Grid System

• Spacing

  • English : Youtube Video / Youtube Video

  🔷 Articles

  • Spacing Guide / Spacing and Layout

Practice on how to use the tool

Adobe XD Tool

• Daily UI
• Task 1
• Task 2
• Task 3

Figma Tool

• Daily UI
• Task 1
• Task 2
• Task 3

• 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

• Typography

  • Fonts google
  • Arab fonts
  • dafont

🪄Make a difference with your design.(Inspiration)

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

▶️Level 1️⃣:-

⚡Start your web design journey

• Grid Systems in Web Design

  • English : Youtube Video / Youtube Video

  • Arabic : Youtube Video

Practice many designs for web

• Daily UI
• Task 1
• Task 2
• Task 3
• Task 4
• Task 5

⚡Next Step : try to make a design system

• Autolayout

  • Figma : Youtube Video / Youtube Video

  • XD : Youtube Video

• Component

  • Figma : Youtube Video / Youtube Video

  • XD : Youtube Video

• Variant

  • Figma : Youtube Video / Youtube Video

  • XD : Youtube Video

  🔷 Articles

  • Design Systems: Step-by-Step

Inspiration

Note: You can search for your idea and start to build your own design as it is only inspiration.

• Behance
• Dribble
• Apple Design
• Uplabs
• Pinterest
• Mobbin
• chamjo

UI Design articles

• Guide to space and layout in UI design
• Example Of Bad UI Design
• 5 Principles of Visual Design in UX
• 7 Common Mistake To Avoid
• 10 rules of composition all designers
• 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

▶️Level2️⃣:-

let's fly high with UX🚀

What is UX Design

• The meaning of UX
• The importance of UX
• The impact of UX in business

What is the process of UX

• UX Design process
• Process of UX

UX Fundamental Process ✍🏻

• English Tutorial: Process of UX
• Arabic Tutorial : UX Design Process / UX Design Process

🔷 Articles

• 7 Fundamental UX Design

▶️Level3️⃣:-

The first step is to find a Product idea you can be the stakeholder with the idea at your first time.

Emphasis: Research Your Users' Needs

1- 📝User Research:

• English : Youtube Video /Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX User Research: Step-by-Step

2- 📈Compatitor Analysis:

• English : Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX Competitor Analysis: Step-by-Step

Define:Your Users' Needs and Problems.

1- 🙋🏻‍♂️Persona:

• English : Youtube Video /Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX Personas: Step-by-Step

2- 🗺️Empathy Map:

• English : Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX Empathy Map: Step-by-Step

3- 🛣️Journey Map:

• English : Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX Journey Map: Step-by-Step

Ideate:Challenge Assumptions and Create Ideas

1- ⏳User Flow:

• English : Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX User Flow : Step-by-Step

2- 📐Information Architecture:

• English : Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX Information Architecture: Step-by-Step

Design:the intentional creation of something to meet a specific need or purpose.

1- 🧾Wireframe:

• English : Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX Wireframe: Step-by-Step

2- 📲Prototype:

• English : Youtube Video
• Arabic : Youtube Video

🔷 Articles

• UX Prototype: Step-by-Step

3- 📱Visual Design:

• English : Youtube Video

🔷 Articles

• UX Visual Design: Step-by-Step

Test: the process of evaluating a design or prototype to identify and fix any problems before it is released to the public.

1- 🧪Usability & A/B Testing:

• English : Youtube Video
• Arabic : Youtube Video /Youtube Video

🔷 Articles

• UX Usability Testing: Step-by-Step

2- 🤩Implementing Feedback:

• English : Youtube Video

🔷 Articles

• UX Wireframe: Step-by-Step

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

Courses

• Product Design - Udacity
• Product Design - Coursera
• Product Design - EDX
• UI/UX Courses
• User Interface Design Specialization

🎉Warmest congratulations on your achievement! Wishing you even more success in the future,CIS Mentors.

▶️Our Contacts📱