world's shortest UI/UX design course

Summary

هذا النص يشرح الخطوات الأساسية لتصميم واجهة مستخدم (UI) وتجربة المستخدم (UX) لموقع ويب أو تطبيق أو أي منتج آخر. يبدأ التصميم بفكرة رئيسية لحل مشكلة أو حالة استخدام. يتضمن الخطوات رسم مخطط التدفق الشخصي، التخطيط البدائي، وتصميم نظام واجهة المستخدم مع العناصر القابلة لإعادة الاستخدام، وتصميم الفصول الفعلية مع المبادئ الأساسية ال_SIx. ينصح بالتجربة والتحسين والتصميم المستمر لتحقيق تصميم مستخدمي مريح وملائم.

Takeaways

• 🎯 التصميم يبدأ بفكرة رئيسية تحل مشكلة أو يوفر حالة استخدام.
• 🛤️ الخطوة الأولى هي رسم مخطط التدفق الشخصي لمعرفة الرحلة الرئيسية للمستخدمين.
• 📐 الخطوة الثانية هي رسم الخطوط الأساسية لإنشاء شاشات أو صفحات تساهم في إكتساب الهدف الرئيسي.
• 📚 الخطوة الثالثة هي إنشاء نظام التصميم الذي يحدد العناصر المكررة لضمان التناسق.
• 🎨 الخطوة الرابعة هي التصميم الفعلي، يتضمن الحفاظ على المبادئ الأساسية ال_SIX_ للتصميم.
• 🔍 في التصميم، يجب اختبار وتكرار وتحسين التصميم باستمرار.
• 📝 يجب ملء التصميم بمحتوى حقيقي أو نموذجي لتجربة وإنشاء توقعات واقعية.
• 🎨+ إذا كنت بحاجة إلى إضافة رسوم، فهناك مصادر مجانية ومدفوعة للرسمات التي يمكنك استخدامها أو إنشاءها بنفسك.
• 🌐 يمكن أن تضيف الرسومات والصور التوضيحية للتصميم، لكن في هذا المشروع، تم تجاهل ذلك بسبب التصميم البسيطة.
• 🚀 يمكن للمستخدمين المساهمة في الموقع المباشر الذي تم تحويل التصميم إليه للإلهام بإضافة تصميماتهم المفضلة.
• 🔄 التصميم هو مسار، ويمكنك تعزيز معرفتك من خلال التصميم والمزيد من التصميم.

Q & A

ما هي الخطوة الأولى في تصميم واجهة مستخدم (UI)؟

الخطوة الأولى هي فهم الفكرة الأساسية، وهي حل لمشكلة أو حالة استعمال معينة.

ماذا تعني مخطط تدفق المستخدم؟

مخطط تدفق المستخدم هو رسم الخطوات الرئيسية التي يتبعها المستخدم من اللحظة التي يدخل الموقع حتى إنجاز الهدف المفتاحي.

ما هي الخطوة الثانية في عملية التصميم؟

الخطوة الثانية هي رسم الخطوط الأساسية (wireframing)، حيث نقوم بإنشاء شاشات أو صفحات تتناسب مع الخطوات الرئيسية التي تم تحديدها.

كيف يمكن تصوير الخطوط الأساسية للشاشات؟

يمكن تصوير الخطوط الأساسية للشاشات باستخدام أدوات مثل Balsamiq، Axure، Sketch، Figma أو InVision.

ما هي الخطوة الثالثة في تصميم واجهة المستخدم؟

الخطوة الثالثة هي إنشاء نظام التصميم، حيث نتعامل مع الرسوميات ويتضمن تحديد المكونات المكررة لضمان التناسق.

ما هي العناصر الرئيسية التي يجب تضمينها في نظام التصميم؟

العناصر الرئيسية في نظام التصميم تشمل الألوان، الخطوط، الأيقونات، الأزرار، الإدخالات، البطاقات وغيرها من العناصر حسب الحاجة.

ما هي الخطوات الأساسية في تصميم واجهة المستخدم (UI)؟

الخطوات الأساسية في تصميم واجهة المستخدم تشمل إنشاء نظام التصميم، اختيار الألوان، الخطوط، تصميم الأزرار والبطاقات، وتصميم الفصول.

ما هي المبادئ الأساسية ال_SIX_ التي يجب اتباعها في التصميم؟

المبادئ الأساسية ال_SIX_ هي الترتيب البصري، التباين، التوازن، التناسق، البساطة، والتفاعل والردود.

ما هي الخطوة النهائية في التصميم؟

الخطوة النهائية هي إضافة النصوص مثل نسخ الاستخدام المستخدم (UX copy) أو النصوص التسويقية، وتجربة واجهة المستخدم.

كيف يمكن للمصممين الحصول على إلهام؟

يمكن للمصممين الحصول على إلهام من مصادر مثل Dribbble، Behance، وكذلك من المواقع التي يقومون بتصميمها.

ما هي الخطوة الاضافية في التصميم التي ت聊议 في النص؟

الخطوة الاضافية هي إضافة الرسومات والصور التوضيحية، والتي يمكن أن توفر من مصادر مجانية أو مدفوعة أو أن تصنعها المصممين بنفسهم.

Outlines

00:00

🎨 UI/UX设计基础与流程

本段落介绍了UI/UX设计的基础知识和设计流程。首先，强调了设计工具的易学难精，并提出了掌握设计工具的关键在于了解所需完成的任务。接着，详细阐述了UI/UX设计的三个步骤：用户流程图的创建，线框图的设计，以及设计系统的建立。在用户流程图中，需要描绘用户从访问网站到达成目标的主要旅程。线框图阶段，基于用户流程图创建相应的屏幕或页面，并分析用户行为。设计系统阶段，涉及视觉元素的一致性，包括颜色、字体、按钮等可复用组件的选择和应用。

05:02

🛠️ 实际设计与迭代

第二段落聚焦于实际的设计过程和迭代。首先，提出了六大基本设计原则：视觉层级、对比、平衡、一致性、简洁性和交互反馈，这些原则有助于创建清晰、直观且用户友好的设计。然后，讨论了设计不仅仅是元素的组合，还需要通过测试、迭代和原型制作进行不断的优化。此外，提到了为设计添加文本内容的重要性，无论是使用占位符文本还是编写实际内容，都有助于测试和形成对不同部分的实际预期。最后，提到了插图和视觉元素的添加，以及如何使用Figma等工具进行设计，并且鼓励观众通过实践来提升设计技能。

Keywords

💡UI design

UI design، أو تصميم واجهة المستخدم، هو جزء من تصميم البرمجيات يركز على تجربة المستخدم وتصميم واجهة المستخدم الرسومية. في النص، يُستخدم لوصف الخطوات اللازمة لتصميم واجهة مستخدم للموقع أو التطبيق. مثال على ذلك هو استخدام أدوات مثل Balsalmiq وFigma لإنشاء واجهات مستخدم مبتكرة ومبتكرة.

💡UX design

تشير UX design إلى تصميم التجربة الشخصية، وهو جزء مهم من تصميم البرمجيات يركز على كيفية تفاعل المستخدم مع المنتج وكيفية تحسين هذا التفاعل. في النص، يُستخدم لتوضيح الخطوات التي تتضمنها تصميم تجربة المستخدم مثل رسم مخططات المستخدمين وتصميم واجهة مستخدم مبتكرة.

💡User flow

User flow هو الرسم البياني الذي يوضح الخطوات التي ي seguirها المستخدم من الدخول إلى الموقع حتى إكتساب هدفه النهائي. في النص، يُستخدم كخطوة رئيسية في تصميم واجهة المستخدم لتحديد الرحلة الرئيسية للمستخدمين وكيفية تخطيها.

💡Wireframing

Wireframing هو الخطوة التي تتضمن رسم التخطيط الأساسية لصفحة الويب أو التطبيق بدون التركيز على التفاصيل الرسومية. في النص، يُستخدم لوصف الخطوات التي تتضمنها رسم التخطيطات الأساسية للشاشات المختلفة التي تساعد على الوصول إلى هدف التطبيق.

💡Design system

Design system هو مجموعة من القواعد التي تحدد العناصر القابلة للإعادة الاستخدام في تصميم واجهة المستخدم. في النص، يُستخدم لتوضيح كيف يمكن أن تكون كل مشاريع التصميم مبنية على قواعد تضمن التناسق في العناصر الرسومية مثل الألوان والخطوط والأيقونات.

💡Visual hierarchy

Visual hierarchy هي الطريقة التي يتم بها تنظيم عناصر التصميم بحيث تظهر الأهمية بين العناصر. في النص، يُستخدم لتوضيح كيف يمكن أن تساعد الهيكلة البصرية في تحسين تجربة المستخدم وجعل العناصر الهامة أكثر قابلية للقراءة.

💡Contrast

Contrast هو الفرق في الألوان أو التفاصيل الذي يساعد على تميز العناصر وجعلها قابلة للقراءة. في النص، يُستخدم contrast لجعل العناصر في واجهة المستخدم أكثر قابلية للقراءة وللوصول إلى أهدافها.

💡Typography

TYPOGRAPHY هي الفن والعلم في ترتيب النصوص واختيار الخطوط والحجم والوضع. في النص، يُستخدم لوصف الخطوات التي تتضمنها اختيار الخطوط التي تتناسب مع تصميم واجهة المستخدم وتحسين قابلية القراءة.

💡Icons

Icons هي الرموز الرسومية التي تستخدم لتمثيل الأفكار أو الإجراءات في واجهة المستخدم. في النص، يُستخدم لتوضيح كيف يمكن أن تساعد الأيقونات في تحسين تجربة المستخدم وجعل واجهة المستخدم أكثر وضوحًا.

💡Prototyping

Prototyping هو الخطوة التي تتضمن إنشاء نموذج عملي لتصميم واجهة المستخدم لتجربة ومراجعة. في النص، يُستخدم لوصف الخطوات التي تتضمنها تجربة واجهة المستخدم وتحسينها بناءً على الملاحظات.

💡Simplicity

Simplicity هو القدرة على تقليل ال复杂度 وجعل التصميم أكثر بساطة ووضوح. في النص، يُستخدم لتوضيح كيف يمكن أن تساعد البساطة في تحسين تجربة المستخدم وجعل واجهة المستخدم أكثر قابلية للاستخدام.

Highlights

UI design tools are easy to learn but hard to master.

Mastery comes from knowing exactly what you need to do in UI/UX design.

A design starts with a main idea, solving a problem or a use case.

User flow is mapping the journey from landing on the site to achieving the key objective.

Wireframing involves creating corresponding screens that contribute to the key objective.

Technology allows for digital wireframing using tools like Balsamiq, Figma, and Sketch.

Design systems involve creating reusable components for consistency.

Colors in a design should reflect the project's industry, value, or brand identity.

Fonts impact readability and can set the tone for the content.

Icons can be sourced from libraries or created by the designer.

Buttons, inputs, cards, and other elements need to be designed according to the project's needs.

Design styles can be inspired by various resources and should be chosen carefully.

The actual designing process involves applying six basic design principles.

Designing requires testing, iterating, prototyping, and refining.

Content such as UX copy or marketing copy is essential for realistic testing.

Illustrations and visuals can be added using various resources or self-created graphics.

The project can be turned into a live site for further inspiration and contribution.

Continuous designing and learning is key to building up knowledge in UI/UX design.

Transcripts

foreign

but you want to know how to design a

website app game or any other product UI

design tools are easy to learn and hard

to master what helps you master them is

knowing what exactly you need to do so

let's learn UI and ux design no

just what you need to get started

fundamentals standard procedures and

helpful resources a design starts with

the main idea a solution to a problem or

a use case for example I really needed a

web application to collect element

specific designs like these so designers

and developers like you and me can find

inspiration got a good idea let's go

step by step step one user flow the

people you hope to use your product

probably have certain expectations

they're looking for some info want to

buy something or just use the service

you need to map out that main Journey

from the moment they land on your site

till that key objective is achieved in

this project for example when users land

on the site they should immediately find

the category and the websites in it we

call this a user flow diagram Step 2

wireframing from the user flow diagram

we'll try to create corresponding

screens or pages each pager screen is

supposed to contribute to reaching that

key objective in a way if users are

supposed to shop for something then

there's a store Page product page cart

payment page and success page you can

start drawing layouts for different

screens in the form of wireframes which

requires real hard thinking and Analysis

of user Behavior back in 1800s we used

pen and paper to draw wireframes but

thanks to technology nowadays we're

lucky enough to do them on tools like

balsamic and vision freehand or just

figma or fake Jam like a normal person

for example in this project we want a

simple and straight to the point design

so just one single screen we need some

navigation in the header and footer our

main goal is showing users designs in

different categories how could we

Implement that maybe a little drop down

menu a filter hmm it has to be simpler

and more accessible like right in front

of everyone's eyes how about just a

simple sidebar with the categories like

font awesome for example that's a good

inspiration we also want to showcase

different designs a lot of them on this

remaining side we have several sources

of inspiration for this that have proven

to work like dribble so we need our

designs in a little grid over here and

this grid should have a link to the

source of the design its name and just a

simple image preview what we just did

was a brief version of user experience

or ux design it can be extended and have

you go through other steps as well

depending on how complicated your

project is step 3 design system this

marks the beginning of our user

interface or UI design Journey where we

deal with visuals every design project

is led by guideline that specifies

reusable components as you can imagine

this makes everything consistent like

colors fonts buttons forms boxes cards

icons and so on it can be very big or

very small like the one we have here

starting with colors they should reflect

your Project's industry value or brand

identity meaning logo product or brand

colors for this project I just know I

want it to be in dark mode with mostly

neutral colors like black white and gray

and maybe one primary Vivid color I'm

not really sure what I want yet so I'm

using real-time colors to simulate my

color choices on a real site making sure

they're accessible and look good but

generally speaking you want your colors

to be as comprehensive as possible for

example background color text color

primary secondary accent and semantic

colors each of them can have different

variations too like Shades gradients and

transparent versions next up we have

fonts which directly impact the

readability of your content plus the

fonts can give off a certain Vibe look

at these fonts funky elegant serious

childish and oh God what is this again

I'm using real-time colors to test out

some fonts from Google fonts quickly

which lead me to two fonts space

grotesque and Ubuntu then I'm using

typescale to find a good ratio and

readable sizes for these fonts and make

a list of them on figma I'm using the

standard responsive sizes of 18 pixels

for body text 14 pixels for small text

and 32 pixels for the title for icons

there is a massive library of resources

and plugins on fake by itself you can

even make them yourself like I did here

there different types of icons like flat

skeuomorphic glyph duotone 3D outlined

and so on other major parts are buttons

inputs cards and really whatever your

project needs for example for this

project we need buttons category inputs

and website cards this style I'm

choosing is outlined and transparent how

do you choose a style you ask well there

are about five uh 10 no no wait wait

yeah there's an infinite number of

styles actually that's where you come in

to design one good news is that there

are many resources to get inspired like

dribble be hands and even the site we're

designing right now step four the actual

designing now you have all the

ingredients and it's time to cook a

design let him cook keep these six basic

design principles in mind visual

hierarchy helps show the order of

importance among elements contrast helps

distinguish elements and make them

readable or accessible balance helps

moderate the spacing alignment or the

placement of different elements

consistency helps keep elements

harmonical and avoids user confusion

Simplicity keeps things clear and

straightforward for users and for extra

interaction feedback keeps users engaged

and gives them some clear reaction for

their actions now designing is not just

assembling the elements you will need to

test iterate prototype and refine a lot

in this step nowadays we browse tens of

applications and websites on a daily

basis and already have some expectations

so you don't need to escape the matrix

or calculate the answer to life universe

and everything to come up with a design

that users are already accustomed to the

only remaining step is filling it up

with some text like ux copy or marketing

copy you either use some good old lorem

ipsum dollar sit and mad consecutor a

different sync a lid

or hear me out writing some actual

content even if they're not going to be

used at all this helps with testing and

creates realistic expectations of

different sections before finalizing

them by now we're also done assembling

the design for this project but still

one step remains bonus step

illustrations and visuals if you need to

add graphics there are thousands of free

and paid resources that provide you with

them you can make them yourself too

which is much cooler luckily you don't

even need fancy software like Adobe

Illustrator or procreate to make

illustrations you can literally just use

figma for most Styles or a spline for 3D

designing for this project we didn't

really plan for any illustration because

it's supposed to be very minimal the

good news is that I've turned this

design into a live site and now you can

use it to get some Inspirations for

designing your own project elements you

can contribute to it too by adding your

favorite designs to it this is just the

beginning of a journey from here on you

can build up on your knowledge by

designing designing and more designing

and that's all for this video you if you

liked it make sure to do your magic down

there and see you on the next one