اتو لیاوت کارتها در فیگما
یکی از موضوعات مهمی که حین طراحی در فیگما باید به آن توجه کرد، استفاده از ساختار اتولیاوت است. این کار تنها به ما در دیزاین محصولات ریسپانسیو کمک میکند و سرعتمان را بالا میبرد. اتولیاوتها در جاهای مختلفی مانند دکمهها، فیلدها، کارتها و غیره استفاده میشوند که در این مقاله به نحوه اتولیاوت کارتها میپردازد.
اتولیاوتها به ما کمک میکنند تا هنگامی که میخواهیم دیتای متفاوتی را در المانی استفاده کنیم چه بیشتر و چه کمتر، خود را هماهنگ با دیزاین کند و یا هنگامی که به صورت ریسپانسیو دیزاین میکنیم بتوانیم همان المان را استفاده کنیم و نیازی به ساخت دوباره آن المان در سایز کوچکتر نداشته باشد.
اولین کار در طراحی هر چیزی آن است که به صورت اتموار تمام اجزای تشکیلدهنده را مشخص کنیم، سپس اتمهایی که امکان ترکیب شدن با یکدیگر و تشکیل یک گروه معنادار را دارند را درنظر بگیریم، (مثلا گروهی که شامل یک اتم آواتار و یک اتم نام و نامخانوادگی نویسنده است) و در هرکدام از آنها اتولیاوت را استفاده کنیم.
🔗 مراحل گامبهگام و تصویری نحوه اتولیاوت کردن یک کارت را میتوانید اینجا مشاهده کنید.
(زمان حدودی مطالعه: ۹ دقیقه)
گردآورنده: فروزان فاضلی
#UI
#رابط_کاربر #دیزاین_سیستم #کارت
@Dexign فلسفه دیزاین
______
یکی از موضوعات مهمی که حین طراحی در فیگما باید به آن توجه کرد، استفاده از ساختار اتولیاوت است. این کار تنها به ما در دیزاین محصولات ریسپانسیو کمک میکند و سرعتمان را بالا میبرد. اتولیاوتها در جاهای مختلفی مانند دکمهها، فیلدها، کارتها و غیره استفاده میشوند که در این مقاله به نحوه اتولیاوت کارتها میپردازد.
اتولیاوتها به ما کمک میکنند تا هنگامی که میخواهیم دیتای متفاوتی را در المانی استفاده کنیم چه بیشتر و چه کمتر، خود را هماهنگ با دیزاین کند و یا هنگامی که به صورت ریسپانسیو دیزاین میکنیم بتوانیم همان المان را استفاده کنیم و نیازی به ساخت دوباره آن المان در سایز کوچکتر نداشته باشد.
اولین کار در طراحی هر چیزی آن است که به صورت اتموار تمام اجزای تشکیلدهنده را مشخص کنیم، سپس اتمهایی که امکان ترکیب شدن با یکدیگر و تشکیل یک گروه معنادار را دارند را درنظر بگیریم، (مثلا گروهی که شامل یک اتم آواتار و یک اتم نام و نامخانوادگی نویسنده است) و در هرکدام از آنها اتولیاوت را استفاده کنیم.
🔗 مراحل گامبهگام و تصویری نحوه اتولیاوت کردن یک کارت را میتوانید اینجا مشاهده کنید.
(زمان حدودی مطالعه: ۹ دقیقه)
گردآورنده: فروزان فاضلی
#UI
#رابط_کاربر #دیزاین_سیستم #کارت
@Dexign فلسفه دیزاین
______
Medium
How to create responsive cards with the help of auto-layout in Figma?
We will be creating a card design inside Figma using auto-layout which will be fully responsive.
👍10🔥2⚡1
سلسله مراتب بصری
سلسله مراتب بصری پایه و اساس محصول موفق است. این کار به سازماندهی عناصر رابط کاربری به صورت موثری کمک میکند تا درک محتوا آسان و دیدن آن لذت بخش باشد. ارائه عناصر بصری تاثیر زیادی روی تجربه کاربری دارد. اگر اجزا به صورت هوشمندانه سازماندهی شوند، کاربران میتوانند بدون تلاش با محصول ارتباط برقرار کنند و از فرآیند لذت ببرند.
همه عناصر برابر نیستند
وقتی همه چیز در طراحی در حال رقابت برای جلب توجه است، پر سر و صدا و آشفته به نظر میرسد.
زمانی که سعی میکنید عناصری که مهمتر هستند را برجستهکنید، نتیجه بسیار خوشایندتر خواهد بود.
اندازه همه چیز نیست
توجه بیش از حد به اندازه فونت برای کنترل سلسله مراتب اشتباه است. اغلب منجر میشود محتوای اولیه بیش از حد بزرگ و محتوای ثانویه بیش از حد کوچک به نظر برسد.
به جای استفاده از اندازه فونتهای متفاوت سعی کنید از وزن یا رنگ فونت متفاوت استفاده کنید.
معناشناسی در درجه دوم قرار دارد
معناشناسی بخش مهمی از طراحی دکمه است، اما این به این معنا نیست که میتوانید سلسله مراتب را فراموش کنید. هنگام طراحی مهم است که جایگاه آنها را در سلسله مراتب مشخص کنید. اقدامات اولیه باید واضح باشند. رنگهای پس زمینه توپر و با کنتراست بالا در اینجا عالی عمل میکنند.
اقدامات ثانویه باید روشن باشد اما برجسته نباشد. استایلهای برجسته یا رنگهای پس زمینه با کنتراست پایینتر گزینههای خوبی هستند.
اقدامات سوم باید قابل کشف باشند اما غیرقابل نفوذ، تنظیم این اقدامات مانند لینکها معمولا بهترین روش است.
🔗 برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۴دقیقه)
گردآورنده: فاطمه عبداللهی
#رابط_کاربر #UI
@Dexign فلسفه دیزاین
______
سلسله مراتب بصری پایه و اساس محصول موفق است. این کار به سازماندهی عناصر رابط کاربری به صورت موثری کمک میکند تا درک محتوا آسان و دیدن آن لذت بخش باشد. ارائه عناصر بصری تاثیر زیادی روی تجربه کاربری دارد. اگر اجزا به صورت هوشمندانه سازماندهی شوند، کاربران میتوانند بدون تلاش با محصول ارتباط برقرار کنند و از فرآیند لذت ببرند.
همه عناصر برابر نیستند
وقتی همه چیز در طراحی در حال رقابت برای جلب توجه است، پر سر و صدا و آشفته به نظر میرسد.
زمانی که سعی میکنید عناصری که مهمتر هستند را برجستهکنید، نتیجه بسیار خوشایندتر خواهد بود.
اندازه همه چیز نیست
توجه بیش از حد به اندازه فونت برای کنترل سلسله مراتب اشتباه است. اغلب منجر میشود محتوای اولیه بیش از حد بزرگ و محتوای ثانویه بیش از حد کوچک به نظر برسد.
به جای استفاده از اندازه فونتهای متفاوت سعی کنید از وزن یا رنگ فونت متفاوت استفاده کنید.
معناشناسی در درجه دوم قرار دارد
معناشناسی بخش مهمی از طراحی دکمه است، اما این به این معنا نیست که میتوانید سلسله مراتب را فراموش کنید. هنگام طراحی مهم است که جایگاه آنها را در سلسله مراتب مشخص کنید. اقدامات اولیه باید واضح باشند. رنگهای پس زمینه توپر و با کنتراست بالا در اینجا عالی عمل میکنند.
اقدامات ثانویه باید روشن باشد اما برجسته نباشد. استایلهای برجسته یا رنگهای پس زمینه با کنتراست پایینتر گزینههای خوبی هستند.
اقدامات سوم باید قابل کشف باشند اما غیرقابل نفوذ، تنظیم این اقدامات مانند لینکها معمولا بهترین روش است.
🔗 برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۴دقیقه)
گردآورنده: فاطمه عبداللهی
#رابط_کاربر #UI
@Dexign فلسفه دیزاین
______
Medium
Visual Hierarchy
A sufficient visual hierarchy is the foundation of a successful digital product. It helps to organize UI elements in an effective way so…
👍7🔥2⚡1
چیزهایی که کاش قبل از طراح UX/UI شدن میدانستم
آیا قبل از این که یک طراح UX/UI شوید در حال تسلیم شدن هستید؟ آیا در مسیر طراح شدن دچار چالش شدهاید؟ من چیزهایی که آرزو میکردم قبل از طراح شدن میدانستم را به شما میگویم.
۱. طراحی یک توانایی ذاتی نیست، میتوان آن را آموخت
من از زمانی که کرونا شروع شد طراحی UX/UI را شروع کردم. میتوانید من را یک طراحِ الهام گرفته از کرونا بنامید. طراح بودن چیزی نبود که از همان اول به آن فکر کرده باشم. من نمیتوانستم رنگها را از هم متمایز کنم و ترکیب خوبی از آنها خلق کنم. من حتی نمیدانستم چگونه کنتراست رنگی خوبی ایجاد کنم. همهی ما این اصطلاح را شنیدهایم که طراح باید دید طراحانه داشته باشد.
این اصطلاح به این معناست که طراحان به صورت غریزی میتوانند نواقص یک طراحی مثل نحوه استفاده از فضای سفید، رنگها، فونت و... را ببینند.
من از روی کنجکاوی در دورههای آموزشی مرتبط شرکت کردم و خودم را به مهارتهای لازم مجهز کردم. بنابراین اگر در رنگها خوب نیستید از امتحان کردن نترسید. طراحی با هنرمند بودن فرق دارد. طراحی به معنای اطمینان از این است که چیزها در محدودهای از دستورالعملها قرار دارند تا تجربههای خوب و زیبا ایجاد کنند (بنابراین طراحی قابل یادگیری است).
۲. طراحی UX/UI حرفهای مناسب برای مبتدیان است
عنوان این حرفه (UX/UI) صرفاً روشی جذابتر برای نامیدن طراحی محصولات دیجیتال است. بنابراین با عناوین طراح تجربه کاربری/ طراح رابط کاربری دچار سردرگمی نشوید.
من در رشته مهندسی الکترونیک، پایداری ساختمانهای سبز و بازاریابی کسب و کار تحصیل کردم. دورههایی که ربطی به طراحی نداشتند. من در زمان دانشگاه مطمئن نبودم که در آینده به چه حرفهای مشغول خواهم شد. در نهایت، من طراحی UX/UI را انتخاب کردم که به هیچ یک از درسهایی که من در دانشگاه خواندم ربطی نداشتند.
بنابراین حتی اگر از رشتهی بیربطی آمدهاید نگران نباشید، طراحی UX/UI فراگیر بودن را تشویق میکند. این حرفه برای مبتدیانی که مشتاق هستند تواناییهای خود را کشف کنند بسیار مناسب است.
دیگر پیشنهادات نویسنده برای مبتدیان را میتوانید اینجا مطالعه کنید.
(زمان حدودی مطالعه: ۴ دقیقه)
گردآورنده: بهاره حاجوی
#مسیر_شغلی #پیشرفت_شغلی
@Dexign فلسفه دیزاین
______
آیا قبل از این که یک طراح UX/UI شوید در حال تسلیم شدن هستید؟ آیا در مسیر طراح شدن دچار چالش شدهاید؟ من چیزهایی که آرزو میکردم قبل از طراح شدن میدانستم را به شما میگویم.
۱. طراحی یک توانایی ذاتی نیست، میتوان آن را آموخت
من از زمانی که کرونا شروع شد طراحی UX/UI را شروع کردم. میتوانید من را یک طراحِ الهام گرفته از کرونا بنامید. طراح بودن چیزی نبود که از همان اول به آن فکر کرده باشم. من نمیتوانستم رنگها را از هم متمایز کنم و ترکیب خوبی از آنها خلق کنم. من حتی نمیدانستم چگونه کنتراست رنگی خوبی ایجاد کنم. همهی ما این اصطلاح را شنیدهایم که طراح باید دید طراحانه داشته باشد.
این اصطلاح به این معناست که طراحان به صورت غریزی میتوانند نواقص یک طراحی مثل نحوه استفاده از فضای سفید، رنگها، فونت و... را ببینند.
من از روی کنجکاوی در دورههای آموزشی مرتبط شرکت کردم و خودم را به مهارتهای لازم مجهز کردم. بنابراین اگر در رنگها خوب نیستید از امتحان کردن نترسید. طراحی با هنرمند بودن فرق دارد. طراحی به معنای اطمینان از این است که چیزها در محدودهای از دستورالعملها قرار دارند تا تجربههای خوب و زیبا ایجاد کنند (بنابراین طراحی قابل یادگیری است).
۲. طراحی UX/UI حرفهای مناسب برای مبتدیان است
عنوان این حرفه (UX/UI) صرفاً روشی جذابتر برای نامیدن طراحی محصولات دیجیتال است. بنابراین با عناوین طراح تجربه کاربری/ طراح رابط کاربری دچار سردرگمی نشوید.
من در رشته مهندسی الکترونیک، پایداری ساختمانهای سبز و بازاریابی کسب و کار تحصیل کردم. دورههایی که ربطی به طراحی نداشتند. من در زمان دانشگاه مطمئن نبودم که در آینده به چه حرفهای مشغول خواهم شد. در نهایت، من طراحی UX/UI را انتخاب کردم که به هیچ یک از درسهایی که من در دانشگاه خواندم ربطی نداشتند.
بنابراین حتی اگر از رشتهی بیربطی آمدهاید نگران نباشید، طراحی UX/UI فراگیر بودن را تشویق میکند. این حرفه برای مبتدیانی که مشتاق هستند تواناییهای خود را کشف کنند بسیار مناسب است.
دیگر پیشنهادات نویسنده برای مبتدیان را میتوانید اینجا مطالعه کنید.
(زمان حدودی مطالعه: ۴ دقیقه)
گردآورنده: بهاره حاجوی
#مسیر_شغلی #پیشرفت_شغلی
@Dexign فلسفه دیزاین
______
Medium
Things I Wish I Knew Before Becoming A UIUX Designer
Are you giving up too soon to be a UIUX designer? Are you struggling to become a UI UX designer? I will tell you how I wish I had known…
👍7⚡6👌4❤3👀2🔥1
خطای پنهان رابط کاربر
زمینه یا context ها نقش مهمی در زندگی ما دارند و تاثیر بسیاری بر رفع ابهامات میگذارند، مثلا ابهامی که در کلمه شیر وجود دارد با قرارگیری در زمینه یا مکانهای مختلف معنی درست و واضحی را میگیرند، اگر درجایی مثل جنگل یا باغ وحش بهکار ببریم به معنی حیوان شیر است و اگر در جایی مانند سوپرمارکت استفاده کنیم به معنی شیر خوراکی است. این موضوع در رابط کاربری هم صادق است و اتفاقات و اکشنها در زمانهای مختلف و یا زمینههای متفاوت میتواند باعث اتفاقات متفاوتی شود. مثلا کیبورد خود را در نظر بگیرید، در حالتی که دکمه caps lock روشن باشد تمام حروف به صورت بزرگ نمایش داده میشوند و اگر خاموش باشد همان دکمهها حالت کوچک حروف را نشان میدهند. پس دکمه caps lock یه “تغییردهنده حالت یا mode swithcer است.
یک المان و چند نتیجه یا اتفاق
یکی از دلایل آن است که ما دنیای محدودی داریم، کلمات محدود، حافظه محدود، فضای محدود و…. مثال کیبورد را در نظر بگیرید، داشتن کیبوردی که هم حروف بزرگ و هم کوچک داشته باشد، کیبورد خیلی بزرگی خواهد بود که دسترسی و استفاده از آن نیز سخت خواهد شد. دلیل دیگر ایناست که گاهی برخی از اقدامات به خوبی با عملکردهای مختلف سازگاراند. مثلا به صورت معمول ما از لمس و کشیدن انگشتانمان روی صفحه گوشی برای انتخاب و یا اسکرول کردن استفاده میکنیم ولی گاهی میتوانیم با آن چیزی بکشیم یا امضا کنیم و نیاز است که مودی خاص برای ویرایش داشته باشیم که در جای درست این اتفاق رخ دهد.
برای همه ما اتفاق افتاده است که پسوردی را وارد کنیم و با خطا مواجه شویم و متوجه شویم که دکمه caps lock روشن بوده است، مودها معمولا منبع خطاهای کاربراناند و از نوع خطاهای پنهان نیز هستند زیرا در هر مود و حالتی کاربر نتیجه متفاوتی خواهد دید. اما باید توجه داشت در کنار اینکه باعث خطای کاربر هستند ممکن است تنها راهحل برای مسائل باشند مانند مثال حرکت انگشت برای اسکرول کردن و امضا کردن.
توصیه میکنیم حتما ویدیو را ببینید.
(زمان حدودی مشاهده: ۶ دقیقه)
گردآورنده: فروزان فاضلی
#UI
#تجربه_کاربر
@Dexign فلسفه دیزاین
______
زمینه یا context ها نقش مهمی در زندگی ما دارند و تاثیر بسیاری بر رفع ابهامات میگذارند، مثلا ابهامی که در کلمه شیر وجود دارد با قرارگیری در زمینه یا مکانهای مختلف معنی درست و واضحی را میگیرند، اگر درجایی مثل جنگل یا باغ وحش بهکار ببریم به معنی حیوان شیر است و اگر در جایی مانند سوپرمارکت استفاده کنیم به معنی شیر خوراکی است. این موضوع در رابط کاربری هم صادق است و اتفاقات و اکشنها در زمانهای مختلف و یا زمینههای متفاوت میتواند باعث اتفاقات متفاوتی شود. مثلا کیبورد خود را در نظر بگیرید، در حالتی که دکمه caps lock روشن باشد تمام حروف به صورت بزرگ نمایش داده میشوند و اگر خاموش باشد همان دکمهها حالت کوچک حروف را نشان میدهند. پس دکمه caps lock یه “تغییردهنده حالت یا mode swithcer است.
یک المان و چند نتیجه یا اتفاق
یکی از دلایل آن است که ما دنیای محدودی داریم، کلمات محدود، حافظه محدود، فضای محدود و…. مثال کیبورد را در نظر بگیرید، داشتن کیبوردی که هم حروف بزرگ و هم کوچک داشته باشد، کیبورد خیلی بزرگی خواهد بود که دسترسی و استفاده از آن نیز سخت خواهد شد. دلیل دیگر ایناست که گاهی برخی از اقدامات به خوبی با عملکردهای مختلف سازگاراند. مثلا به صورت معمول ما از لمس و کشیدن انگشتانمان روی صفحه گوشی برای انتخاب و یا اسکرول کردن استفاده میکنیم ولی گاهی میتوانیم با آن چیزی بکشیم یا امضا کنیم و نیاز است که مودی خاص برای ویرایش داشته باشیم که در جای درست این اتفاق رخ دهد.
برای همه ما اتفاق افتاده است که پسوردی را وارد کنیم و با خطا مواجه شویم و متوجه شویم که دکمه caps lock روشن بوده است، مودها معمولا منبع خطاهای کاربراناند و از نوع خطاهای پنهان نیز هستند زیرا در هر مود و حالتی کاربر نتیجه متفاوتی خواهد دید. اما باید توجه داشت در کنار اینکه باعث خطای کاربر هستند ممکن است تنها راهحل برای مسائل باشند مانند مثال حرکت انگشت برای اسکرول کردن و امضا کردن.
توصیه میکنیم حتما ویدیو را ببینید.
(زمان حدودی مشاهده: ۶ دقیقه)
گردآورنده: فروزان فاضلی
#UI
#تجربه_کاربر
@Dexign فلسفه دیزاین
______
YouTube
UI Modes and Modals
Modes can be a hidden state and lead to user errors. But they can also make a user interface more efficient by allowing the same action to have different results, depending on the situation.
👍4⚡3❤2
یه جوری بهم توضیح بده انگار من ۵ سالمه:
طراح محصول کیه؟
طراح محصول در اصل کسی است که مشکل را حل می کند. کسی که از جنبهها و ابزارهای مختلف طراحی برای ایجاد و اجرای راه حلی استفاده میکند که کمبودهای تجربه کاربر را برطرف میکند.
طراح محصول وظیفه تولید و ساخت Journey Maps, Persona, Wireframe, Prototype را دارد.
طراحی سیستم، طراحی فرآیند و طراحی رابط، ۳ نوع اصلی طراحی محصول است. همه آنها نقشی جدایی ناپذیر در کل تجربه کاربری بازی میکنند زیرا اهداف متفاوتی را دنبال میکنند. طراحی محصول یا UX Design، حلقه ثابت از تجزیه و تحلیل، طراحی، آزمایش، راه اندازی، نظارت و تکامل است. همه اینها به این دلیل است که طراحان محصول در حال حل مشکلات هستند.
طراحان محصول با نام های مختلفی معرفی می شوند، مانند:
- طراح تجربه یا Experience Designer (XD)
- معمار اطلاعات یا Information Architect (IA)
- طراح تعامل یا Interaction Designer (IX)
- معمار تجربه یا Experience Architect (XA)
- طراح رابط کاربر یا User Interface (UI) Designer
- طراحی تجربه یا User Experience (UX) Designer
و ...
حقیقت این است که طراح محصول ممکن است مسئول برخی یا همه موارد فوق باشد یا برخی از این عناوین با مسئولیتهایش هم پوشانی داشته باشند.
یک طراح محصول، در اصل، یک حل کننده مشکل است.
طراح محصول کسی است که از جنبهها و ابزارهای مختلف طراحی برای ایجاد و اجرای راه حلی استفاده میکند که کمبودهای تجربه کاربر را برطرف میکند.
🔗 برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۹ دقیقه)
گردآورنده: امیرحسین معظمی
#UX
#تجربه_کاربر #طراحی_محصول
@Dexign فلسفه دیزاین
______
طراح محصول کیه؟
طراح محصول در اصل کسی است که مشکل را حل می کند. کسی که از جنبهها و ابزارهای مختلف طراحی برای ایجاد و اجرای راه حلی استفاده میکند که کمبودهای تجربه کاربر را برطرف میکند.
طراح محصول وظیفه تولید و ساخت Journey Maps, Persona, Wireframe, Prototype را دارد.
طراحی سیستم، طراحی فرآیند و طراحی رابط، ۳ نوع اصلی طراحی محصول است. همه آنها نقشی جدایی ناپذیر در کل تجربه کاربری بازی میکنند زیرا اهداف متفاوتی را دنبال میکنند. طراحی محصول یا UX Design، حلقه ثابت از تجزیه و تحلیل، طراحی، آزمایش، راه اندازی، نظارت و تکامل است. همه اینها به این دلیل است که طراحان محصول در حال حل مشکلات هستند.
طراحان محصول با نام های مختلفی معرفی می شوند، مانند:
- طراح تجربه یا Experience Designer (XD)
- معمار اطلاعات یا Information Architect (IA)
- طراح تعامل یا Interaction Designer (IX)
- معمار تجربه یا Experience Architect (XA)
- طراح رابط کاربر یا User Interface (UI) Designer
- طراحی تجربه یا User Experience (UX) Designer
و ...
حقیقت این است که طراح محصول ممکن است مسئول برخی یا همه موارد فوق باشد یا برخی از این عناوین با مسئولیتهایش هم پوشانی داشته باشند.
یک طراح محصول، در اصل، یک حل کننده مشکل است.
طراح محصول کسی است که از جنبهها و ابزارهای مختلف طراحی برای ایجاد و اجرای راه حلی استفاده میکند که کمبودهای تجربه کاربر را برطرف میکند.
🔗 برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۹ دقیقه)
گردآورنده: امیرحسین معظمی
#UX
#تجربه_کاربر #طراحی_محصول
@Dexign فلسفه دیزاین
______
Medium
Explain it like I’m 5: What is a Product Designer?
Recently, I was fortunate enough to speak at HubSpot’s First Gen in Tech event where I had the chance to talk about what a Product Designer…
👍17❤2🔥1
قانون ۶۰–۳۰–۱۰:
نحوه انتخاب رنگ برای طراحی رابط کاربری
رنگ و نحوه کاربرد آن، یک جنبه حیاتی در طراحی UI است، و این قدرت را دارد که بر رفتار کاربر، بهبود تجربه کاربر و انتقال پیام برند تأثیر بگذارد. یک پالت رنگی که به خوبی انتخاب شده باشد، می تواند طرح را از حالت ملایم به زیبا ارتقا دهد و یک رابط بصری جذاب ایجاد کند که کاربران را درگیر و خوشحال میکند.
شناخت و نحوه استفاده از رنگها، میتواند پروژه شما را موفق کند و یا شکست دهد. قانون ۶۰-۳۰-۱۰ ابزاری مفید برای ایجاد طراحیهای متعادل است.
مرحله اول، ۶۰ درصد
انتخاب رنگ غالب یا رنگ اصلی است که بیش از همه برجسته میشود و باید پیام برند شما را منعکس کند.
مرحله دوم، ۳۰ درصد
که رنگ ثانویه است و از رنگ اصلی پشتیبانی میکند. اما همچنان به اندازه کافی متفاوت است تا کنتراست ایجاد کند.
معمولا از رنگ ثانویه یا رنگ مکمل در عناصر اصلی مانند متن و بعضی از المانهای طراحی استفاده میشود.
مرحله سوم، ۱۰ درصد
این رنگ زبان برند شماست. این رنگ را میتوان در دکمهها، پاپ آپها، هایلایتها و ... استفاده کرد.
پیشنهاد:
قبل از افزودن رنگ به طرح خود، روی چیدمان و فاصله عناصر تمرکز کنید.
رنگهای روشن و پر جنب و جوش راه بسیار خوبی برای افزایش جذابیت بصری هستند. آنها میتوانند به جلب توجه به مناطق خاصی از صفحه کمک کنند یا به طور کلی آن را زندهتر کنند.
همچنین باید سیاه و سفید را به عنوان رنگهایی در نظر بگیرید که اهمیت خاص خود را دارند.
مقاله کامل را میتوانید در این لینک مطالعه کنید.
(زمان حدودی مطالعه: ۴ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر #دیزاین_سیستم #رنگ
#UI
@Dexign فلسفه دیزاین
______
نحوه انتخاب رنگ برای طراحی رابط کاربری
رنگ و نحوه کاربرد آن، یک جنبه حیاتی در طراحی UI است، و این قدرت را دارد که بر رفتار کاربر، بهبود تجربه کاربر و انتقال پیام برند تأثیر بگذارد. یک پالت رنگی که به خوبی انتخاب شده باشد، می تواند طرح را از حالت ملایم به زیبا ارتقا دهد و یک رابط بصری جذاب ایجاد کند که کاربران را درگیر و خوشحال میکند.
شناخت و نحوه استفاده از رنگها، میتواند پروژه شما را موفق کند و یا شکست دهد. قانون ۶۰-۳۰-۱۰ ابزاری مفید برای ایجاد طراحیهای متعادل است.
مرحله اول، ۶۰ درصد
انتخاب رنگ غالب یا رنگ اصلی است که بیش از همه برجسته میشود و باید پیام برند شما را منعکس کند.
مرحله دوم، ۳۰ درصد
که رنگ ثانویه است و از رنگ اصلی پشتیبانی میکند. اما همچنان به اندازه کافی متفاوت است تا کنتراست ایجاد کند.
معمولا از رنگ ثانویه یا رنگ مکمل در عناصر اصلی مانند متن و بعضی از المانهای طراحی استفاده میشود.
مرحله سوم، ۱۰ درصد
این رنگ زبان برند شماست. این رنگ را میتوان در دکمهها، پاپ آپها، هایلایتها و ... استفاده کرد.
پیشنهاد:
قبل از افزودن رنگ به طرح خود، روی چیدمان و فاصله عناصر تمرکز کنید.
رنگهای روشن و پر جنب و جوش راه بسیار خوبی برای افزایش جذابیت بصری هستند. آنها میتوانند به جلب توجه به مناطق خاصی از صفحه کمک کنند یا به طور کلی آن را زندهتر کنند.
همچنین باید سیاه و سفید را به عنوان رنگهایی در نظر بگیرید که اهمیت خاص خود را دارند.
مقاله کامل را میتوانید در این لینک مطالعه کنید.
(زمان حدودی مطالعه: ۴ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر #دیزاین_سیستم #رنگ
#UI
@Dexign فلسفه دیزاین
______
Medium
60–30–10 Rule: How to choose colors for your UI design
Color is an important part of any interface design, and knowing how to choose colors can make or break your project. The 60–30–10 rule will…
👍8🔥4❤2
منظور ما از طراحی چیست؟
این کلمات برای بسیاری از آدمها، خلاقیت، محصولات، معماری، گرافیک یا به زبان ساده، نحوه عملکرد یا ظاهر چیزی را تداعی میکند.
همه این ها درست است، اما امروزه تمرین طراحی به طور منظم فراتر از این مرزها گسترش می یابد و تکنیکها، روشها و رویکردهای گستردهتری را در بر میگیرد. هنگامی که ما از طراحی در زمینه نوآوری صحبت میکنیم، تمرکز ما بیشتر روی چیزی است که ممکن است آن را "طراحی استراتژیک" بنامیم.
طراحی فقط برای حرفه ای ها نیست!
طراحی فعالیت و قابلیت اساسی بشر است و بشر در واقع از هزاران سال پیش که شروع به اختراع و استفاده از ابزار کرده است، در حال طراحی بوده است، به قول Herbert Simon، طراحی فقط برای حرفهای ها نیست.
طراحی باید در مورد بهبود موقعیتها باشد، همانطور که طراحی باید در نهایت برای بهبود اوضاع باشد.
هنگامی که از طراحی در زمینه نوآوری صحبت میکنیم، تمرکز ما بر روی طراحی راه حلهایی برای دیگران است تا به آن وضعیت مطلوب آینده دست یابیم.
۴ اصل که به بهبود طراحی کمک می کند:
همدلی
یکی از اصول اصلی طراحی، همدلی است. یعنی با قرار دادن خود به جای کاربران و یادگیری هرچه بیشتر در مورد آنها، احتمال بیشتری وجود دارد که راه حلهایی را ایجاد کنید که مشکلات را برطرف کند.
در حال تکرار
ارزیابی اینکه آیا یک راه حل به اندازه کافی برای حل مشکل خوب است یا خیر، باید از طریق فرآیند آزمون و خطا آزمایش شود. این ماهیت نمونه سازی است. با ساختن نمونههای اولیه، هر فرضی در مورد آنچه ممکن است کار کند در مراحل اولیه آزمایش میشود و این امر غالبا منجر به تعریفی تجدیدنظر شده از مشکل، یا بهبود در طراحی راهحل میشود.
همکاری
بهویژه در رشتههای نوظهور طراحی مانند طراحی اجتماعی و طراحی خدمات، طراحی با گرد هم آوردن افراد و ایجاد امکان همکاری تغییر میکند. طراحان حرفهای یا متفکران طراحی، اغلب میتوانند با گرد هم آوردن ذینفعان داخلی و خارجی برای ارائه پیشنهادی یکپارچه، نقش هماهنگ کننده را ایفا کنند.
تجسم
از طریق تجسم، اطلاعات پیچیده را میتوان برای حمایت از تصمیم گیری، قابل درک کرد. تفکر بصری زبان جهانی طراحی است که به آزمایش، ایجاد زمینه مشترک بین سهامداران و به اشتراک گذاشتن بینش کاربر کمک میکند.
برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۴ دقیقه)
گردآورنده: امیرحسین معظمی
#طراحی_محصول
#design
@Dexign فلسفه دیزاین
______
این کلمات برای بسیاری از آدمها، خلاقیت، محصولات، معماری، گرافیک یا به زبان ساده، نحوه عملکرد یا ظاهر چیزی را تداعی میکند.
همه این ها درست است، اما امروزه تمرین طراحی به طور منظم فراتر از این مرزها گسترش می یابد و تکنیکها، روشها و رویکردهای گستردهتری را در بر میگیرد. هنگامی که ما از طراحی در زمینه نوآوری صحبت میکنیم، تمرکز ما بیشتر روی چیزی است که ممکن است آن را "طراحی استراتژیک" بنامیم.
طراحی فقط برای حرفه ای ها نیست!
طراحی فعالیت و قابلیت اساسی بشر است و بشر در واقع از هزاران سال پیش که شروع به اختراع و استفاده از ابزار کرده است، در حال طراحی بوده است، به قول Herbert Simon، طراحی فقط برای حرفهای ها نیست.
طراحی باید در مورد بهبود موقعیتها باشد، همانطور که طراحی باید در نهایت برای بهبود اوضاع باشد.
هنگامی که از طراحی در زمینه نوآوری صحبت میکنیم، تمرکز ما بر روی طراحی راه حلهایی برای دیگران است تا به آن وضعیت مطلوب آینده دست یابیم.
۴ اصل که به بهبود طراحی کمک می کند:
همدلی
یکی از اصول اصلی طراحی، همدلی است. یعنی با قرار دادن خود به جای کاربران و یادگیری هرچه بیشتر در مورد آنها، احتمال بیشتری وجود دارد که راه حلهایی را ایجاد کنید که مشکلات را برطرف کند.
در حال تکرار
ارزیابی اینکه آیا یک راه حل به اندازه کافی برای حل مشکل خوب است یا خیر، باید از طریق فرآیند آزمون و خطا آزمایش شود. این ماهیت نمونه سازی است. با ساختن نمونههای اولیه، هر فرضی در مورد آنچه ممکن است کار کند در مراحل اولیه آزمایش میشود و این امر غالبا منجر به تعریفی تجدیدنظر شده از مشکل، یا بهبود در طراحی راهحل میشود.
همکاری
بهویژه در رشتههای نوظهور طراحی مانند طراحی اجتماعی و طراحی خدمات، طراحی با گرد هم آوردن افراد و ایجاد امکان همکاری تغییر میکند. طراحان حرفهای یا متفکران طراحی، اغلب میتوانند با گرد هم آوردن ذینفعان داخلی و خارجی برای ارائه پیشنهادی یکپارچه، نقش هماهنگ کننده را ایفا کنند.
تجسم
از طریق تجسم، اطلاعات پیچیده را میتوان برای حمایت از تصمیم گیری، قابل درک کرد. تفکر بصری زبان جهانی طراحی است که به آزمایش، ایجاد زمینه مشترک بین سهامداران و به اشتراک گذاشتن بینش کاربر کمک میکند.
برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۴ دقیقه)
گردآورنده: امیرحسین معظمی
#طراحی_محصول
#design
@Dexign فلسفه دیزاین
______
www.designcouncil.org.uk
What do we mean by design?
This article originally appeared as part of Design for Europe and was written by Bas Leurs and Isobel Roberts from Nesta. What comes to mind when you think o...
👍6⚡1
طراحی رابط کاربری
طراحی رابط کاربری (UI) فرآیندی است که طراحان برای ایجاد رابط در نرمافزار یا دستگاههای رایانهای با تمرکز بر ظاهر یا سبک استفاده میکنند. هدف طراحان ایجاد رابطهایی است که استفاده از آنها برای کاربران آسان و لذت بخش باشد.
رابطهای کاربری در سه قالب ارائه می شوند:
- رابطهای گرافیکی کاربر (GUI) Graphical user interfaces
مثلا دسکتاپ کامپیوتر یک رابط کاربری گرافیکی است.
- رابطهای کنترلشده صوتی (VUI) Voice-controlled interfaces
سیری در آیفون و الکسا در دستگاههای آمازون
- رابط های مبتنی بر ژست (VR) Gesture-based interfaces
به عنوان مثال، در بازیهای واقعیت مجازی (VR).
کاربران به سرعت طرحها را قضاوت میکنند و به قابلیت استفاده و دوست داشتنی بودن اهمیت میدهند. آنها به طراحی شما اهمیت نمیدهند، بلکه به انجام راحت کارها و با حداقل تلاش اهمیت میدهند. بنابراین، طراحی شما باید «نامرئی» باشد.
طراحی خوب طراحی احساسی است. کاربران احساسات خوب را با برندهایی مرتبط میکنند که در همه سطوح با آنها صحبت میکنند و جادوی تجربههای لذتبخش و یکپارچه را زنده نگه میدارند. Airbnb نمونهای از طراحی خوب است.
برای ارائه رابط کاربری چشمگیر، بهتر است این دستورالعملها را رعایت کنید:
- دکمه ها یا عناصر دیگر را قابل پیش بینی کنید.
- رابطها را ساده و نامرئی نگه دارید.
- به چشم و توجه کاربر در مورد چیدمان احترام بگذارید.
- از بازخورد، برای پاسخها یا اقدامات کاربران استفاده کنید.
- از الگوهای طراحی رابط کاربری مناسب برای کمک به راهنمایی کاربران استفاده کنید.
- ثبات برند را حفظ کنید.
از آنجایی که بهترین رابط، بدون رابط بودن است، شما باید مستقیمترین، در دسترسترین، راحتترین کنترل و بهترین تجربه را به کاربران ارائه دهید، تا جایی که فراموش کنند از طراحی شما استفاده میکنند.
بنابراین، از خود بپرسید "آیا می توانم کارها را ساده تر کنم؟"
برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۵ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر
#UI
@Dexign فلسفه دیزاین
______
طراحی رابط کاربری (UI) فرآیندی است که طراحان برای ایجاد رابط در نرمافزار یا دستگاههای رایانهای با تمرکز بر ظاهر یا سبک استفاده میکنند. هدف طراحان ایجاد رابطهایی است که استفاده از آنها برای کاربران آسان و لذت بخش باشد.
رابطهای کاربری در سه قالب ارائه می شوند:
- رابطهای گرافیکی کاربر (GUI) Graphical user interfaces
مثلا دسکتاپ کامپیوتر یک رابط کاربری گرافیکی است.
- رابطهای کنترلشده صوتی (VUI) Voice-controlled interfaces
سیری در آیفون و الکسا در دستگاههای آمازون
- رابط های مبتنی بر ژست (VR) Gesture-based interfaces
به عنوان مثال، در بازیهای واقعیت مجازی (VR).
کاربران به سرعت طرحها را قضاوت میکنند و به قابلیت استفاده و دوست داشتنی بودن اهمیت میدهند. آنها به طراحی شما اهمیت نمیدهند، بلکه به انجام راحت کارها و با حداقل تلاش اهمیت میدهند. بنابراین، طراحی شما باید «نامرئی» باشد.
طراحی خوب طراحی احساسی است. کاربران احساسات خوب را با برندهایی مرتبط میکنند که در همه سطوح با آنها صحبت میکنند و جادوی تجربههای لذتبخش و یکپارچه را زنده نگه میدارند. Airbnb نمونهای از طراحی خوب است.
برای ارائه رابط کاربری چشمگیر، بهتر است این دستورالعملها را رعایت کنید:
- دکمه ها یا عناصر دیگر را قابل پیش بینی کنید.
- رابطها را ساده و نامرئی نگه دارید.
- به چشم و توجه کاربر در مورد چیدمان احترام بگذارید.
- از بازخورد، برای پاسخها یا اقدامات کاربران استفاده کنید.
- از الگوهای طراحی رابط کاربری مناسب برای کمک به راهنمایی کاربران استفاده کنید.
- ثبات برند را حفظ کنید.
از آنجایی که بهترین رابط، بدون رابط بودن است، شما باید مستقیمترین، در دسترسترین، راحتترین کنترل و بهترین تجربه را به کاربران ارائه دهید، تا جایی که فراموش کنند از طراحی شما استفاده میکنند.
بنابراین، از خود بپرسید "آیا می توانم کارها را ساده تر کنم؟"
برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۵ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر
#UI
@Dexign فلسفه دیزاین
______
The Interaction Design Foundation
What is User Interface (UI) Design?
User interface (UI) design is the process designers use to build easy-to-use and pleasurable interfaces in software or computerized devices.
👍7❤3⚡2
رابطه بین طراحی سرویس و طراحی UX
در دهه گذشته، خدمات دیجیتال به بخش رایجی از زندگی روزمره ما تبدیل شده است.
این روزها، شرکتهای دیجیتال خالص به طور موثر تجربیات خدمات دیجیتال معناداری را ارائه میدهند. شرکتهایی مانند اپل از این آموختهها برای بهبود تجربه خدمات فیزیکی خود از طریق طرحهایی مانند فروشگاه اپل استفاده کردهاند.
در مقایسه، بسیاری از کسبوکارهای سنتی برای مدرنسازی خدمات تلفنی یا فروشگاهی خود با مشکل مواجه شدهاند و از دیجیتال فقط به عنوان تمرین کاهش هزینه سلف سرویس استفاده میکنند، نه وسیلهای برای ایجاد یک تجربه خدماتی عمیقتر و صمیمیتر.
به دلیل هم مرز بودن با سایر رشتهها، رایج ترین تعاریف از طراحی سرویس، شامل اتخاذ رویکردی جامع برای طراحی تعاملاتی است که در طول سفر مشتری رخ میدهد، با در نظر گرفتن بخشهای تجاری، بازیگران، پلتفرمها و نقاط تماس.
مقایسه طراحی UX و طراحی خدمات
هنگام طراحی محصولات و خدمات دیجیتال، طراحان UX ملزم به اتخاذ رویکردی جامع برای کار خود هستند، که اغلب شامل حفاری عمیقتر در زمینه گستردهتر مشکل و چگونگی ارتباط راهحل با سازمان گستردهتر، اهداف تجاری آن و تجربه مشتری نهایی است.
همانطور که الیل سارینن گفته است:
"همیشه یک چیز را با در نظر گرفتن آن در زمینه بعدی بزرگتر طراحی کنید - یک صندلی در یک اتاق، یک اتاق در یک خانه، یک خانه در یک محیط، یک محیط در یک طرح شهری."
طراحان UX خوب همیشه به زمینه نگاه میکنند. این ناگزیر به این معنی است که از صفحه نمایش خارج شوید تا بفهمید که چگونه محصولات در دنیای واقعی استفاده میشوند. طراحان خدمات اغلب نیاز دارند تا جزئیات یک نقطه لمس دیجیتال را برای ایجاد مشخصات معنادار که میتواند به یک طراح UX تحویل دهد، بررسی کنند.
با ظهور خدمات دیجیتال، مرزهای بین رشتهها و نقش طراح به طور فزایندهای مبهم میشود. همانطور که طراحی خدمات بیشتر به صورت دیجیتالی متمرکز میشود و پروژه های UX بیشتر و بیشتر خدمات گرا میشوند، فضایی مشترک بین رشته ها نیز پدیدار میشود.
همانطور که الیل سارینن گفته است ...
"همیشه یک چیز را با در نظر گرفتن آن در زمینه بعدی بزرگتر طراحی کنید - یک صندلی در یک اتاق، یک اتاق در یک خانه، یک خانه در یک محیط، یک محیط در یک طرح شهری."
ادامه مقاله را در اینجا مطالعه کنید.
(زمان حدودی مطالعه: ۴ دقیقه)
گردآورنده: امیرحسین معظمی
#طراحی_محصول #تجربه_کاربر
#UX
@Dexign فلسفه دیزاین
______
در دهه گذشته، خدمات دیجیتال به بخش رایجی از زندگی روزمره ما تبدیل شده است.
این روزها، شرکتهای دیجیتال خالص به طور موثر تجربیات خدمات دیجیتال معناداری را ارائه میدهند. شرکتهایی مانند اپل از این آموختهها برای بهبود تجربه خدمات فیزیکی خود از طریق طرحهایی مانند فروشگاه اپل استفاده کردهاند.
در مقایسه، بسیاری از کسبوکارهای سنتی برای مدرنسازی خدمات تلفنی یا فروشگاهی خود با مشکل مواجه شدهاند و از دیجیتال فقط به عنوان تمرین کاهش هزینه سلف سرویس استفاده میکنند، نه وسیلهای برای ایجاد یک تجربه خدماتی عمیقتر و صمیمیتر.
به دلیل هم مرز بودن با سایر رشتهها، رایج ترین تعاریف از طراحی سرویس، شامل اتخاذ رویکردی جامع برای طراحی تعاملاتی است که در طول سفر مشتری رخ میدهد، با در نظر گرفتن بخشهای تجاری، بازیگران، پلتفرمها و نقاط تماس.
مقایسه طراحی UX و طراحی خدمات
هنگام طراحی محصولات و خدمات دیجیتال، طراحان UX ملزم به اتخاذ رویکردی جامع برای کار خود هستند، که اغلب شامل حفاری عمیقتر در زمینه گستردهتر مشکل و چگونگی ارتباط راهحل با سازمان گستردهتر، اهداف تجاری آن و تجربه مشتری نهایی است.
همانطور که الیل سارینن گفته است:
"همیشه یک چیز را با در نظر گرفتن آن در زمینه بعدی بزرگتر طراحی کنید - یک صندلی در یک اتاق، یک اتاق در یک خانه، یک خانه در یک محیط، یک محیط در یک طرح شهری."
طراحان UX خوب همیشه به زمینه نگاه میکنند. این ناگزیر به این معنی است که از صفحه نمایش خارج شوید تا بفهمید که چگونه محصولات در دنیای واقعی استفاده میشوند. طراحان خدمات اغلب نیاز دارند تا جزئیات یک نقطه لمس دیجیتال را برای ایجاد مشخصات معنادار که میتواند به یک طراح UX تحویل دهد، بررسی کنند.
با ظهور خدمات دیجیتال، مرزهای بین رشتهها و نقش طراح به طور فزایندهای مبهم میشود. همانطور که طراحی خدمات بیشتر به صورت دیجیتالی متمرکز میشود و پروژه های UX بیشتر و بیشتر خدمات گرا میشوند، فضایی مشترک بین رشته ها نیز پدیدار میشود.
همانطور که الیل سارینن گفته است ...
"همیشه یک چیز را با در نظر گرفتن آن در زمینه بعدی بزرگتر طراحی کنید - یک صندلی در یک اتاق، یک اتاق در یک خانه، یک خانه در یک محیط، یک محیط در یک طرح شهری."
ادامه مقاله را در اینجا مطالعه کنید.
(زمان حدودی مطالعه: ۴ دقیقه)
گردآورنده: امیرحسین معظمی
#طراحی_محصول #تجربه_کاربر
#UX
@Dexign فلسفه دیزاین
______
Clearleft
The Relationship Between Service Design and UX Design - Part 1
With the rise of Digital Services, the boundaries between the disciplines of Service Design and UX Design–and the role of the designer–are becoming…
👍5❤2
استفاده از نظریه گشتالت در طراحی رابط کاربری
گشتالت کلمهای آلمانی است که "کل یکپارچه" ترجمه میشود.
هم در هنرهای تجسمی و هم در روانشناسی، هدف اصول گشتالت یافتن برخی عناصر مشترک و وارد کردن نظم ساختاری در محیط آشفته و پر سر و صدای انسانی است.
اصول گشتالت و کاربردهای آن در طراحی، در ۳ مرحله تعریف می شوند...
قانون تقارن و عدم تقارن
ترکیب متقارن شامل قرار دادن عناصر در یک ترکیب برابر است، نه منحرف کردن دید. در مقابل، ترکیب نامتقارن زمانی است که عناصر به روش خاصی قرار میگیرند که چشم را به عنصری خاص هدایت میکند.
با انتخاب درست چیدمانها از طریق تقارن و عدم تقارن، میتوانیم تعادل، طراحی پویا و یا اطلاعات مورد نیاز را برجسته کنیم.
قانون تداوم
قانون تداوم توضیح میدهد که چگونه ذهن انسان به طور ناخودآگاه خطوط بصری یا عناصری را دنبال میکند که به عنوان یک جهت ثابت در کنار هم قرار میگیرند. این به طراحان اجازه میدهد تا کاربر را به طور نامحسوس به سمت اهداف خاص هدایت کنند و در عین حال تأثیر قابل توجهی بر روی کاربر بگذارند.
قانون شکل / رابطه زمینه
رابطهی بین پیش زمینه و پس زمینه مکمل یکدیگرند. چشم انسان تمایل دارد بین دو رنگ مختلف در یک تصویر به عنوان پیش زمینه و پس زمینه تمایز قائل شود. معمولاً جسم یا نقطه کانونی پیش زمینه در نظر گرفته میشود و بقیه پس زمینه.
قوانین گشتالت در رسیدن به هدف رابط کاربری کمک و امکان انتقال سریع و آسان اطلاعات را فراهم میکنند. یک طراحی خوب مخاطبان را گیج نمیکند و آنها را از نظر بصری به بهترین وجه راهنمایی میکند. این حس، نظم و انضباط طراحی UI را در کاربر القا میکند.
برای مطالعه ادامه مقاله به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۵ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر
#UI
@Dexign فلسفه دیزاین
______
گشتالت کلمهای آلمانی است که "کل یکپارچه" ترجمه میشود.
هم در هنرهای تجسمی و هم در روانشناسی، هدف اصول گشتالت یافتن برخی عناصر مشترک و وارد کردن نظم ساختاری در محیط آشفته و پر سر و صدای انسانی است.
اصول گشتالت و کاربردهای آن در طراحی، در ۳ مرحله تعریف می شوند...
قانون تقارن و عدم تقارن
ترکیب متقارن شامل قرار دادن عناصر در یک ترکیب برابر است، نه منحرف کردن دید. در مقابل، ترکیب نامتقارن زمانی است که عناصر به روش خاصی قرار میگیرند که چشم را به عنصری خاص هدایت میکند.
با انتخاب درست چیدمانها از طریق تقارن و عدم تقارن، میتوانیم تعادل، طراحی پویا و یا اطلاعات مورد نیاز را برجسته کنیم.
قانون تداوم
قانون تداوم توضیح میدهد که چگونه ذهن انسان به طور ناخودآگاه خطوط بصری یا عناصری را دنبال میکند که به عنوان یک جهت ثابت در کنار هم قرار میگیرند. این به طراحان اجازه میدهد تا کاربر را به طور نامحسوس به سمت اهداف خاص هدایت کنند و در عین حال تأثیر قابل توجهی بر روی کاربر بگذارند.
قانون شکل / رابطه زمینه
رابطهی بین پیش زمینه و پس زمینه مکمل یکدیگرند. چشم انسان تمایل دارد بین دو رنگ مختلف در یک تصویر به عنوان پیش زمینه و پس زمینه تمایز قائل شود. معمولاً جسم یا نقطه کانونی پیش زمینه در نظر گرفته میشود و بقیه پس زمینه.
قوانین گشتالت در رسیدن به هدف رابط کاربری کمک و امکان انتقال سریع و آسان اطلاعات را فراهم میکنند. یک طراحی خوب مخاطبان را گیج نمیکند و آنها را از نظر بصری به بهترین وجه راهنمایی میکند. این حس، نظم و انضباط طراحی UI را در کاربر القا میکند.
برای مطالعه ادامه مقاله به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۵ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر
#UI
@Dexign فلسفه دیزاین
______
Medium
Use of Gestalt Theory in UI Design
The whole is other than the sum of the parts — Kurt Koffka.
👍8
مشکل “درست” برای حل کردن چیست؟
ما اکثر محصولاتی که مشکلی را برای ما حل میکنند، نمیخریم، همچنین در مورد بسیاری از محصولاتی که زندگی ما را به نحوی بهبود میبخشند، شناختی نداریم.
به عنوان طراح، ما با این سوال و عواقب حل مشکل اشتباه مواجه هستیم.
اما مشکل "درست" چیست و چگونه می توانیم آن را شناسایی کنیم؟
مشکل زمانی پیش میآید که شما هدفی داشته باشید اما ندانید چگونه به آن هدف میرسید!
موضوع حل مشکل مناسب معمولا زمانی مطرح می شود که تیمی به دنبال راهاندازی یک محصول جدید است. از خود میپرسیم «مشکل درست برای حل چیست» زیرا حل مشکل «درست» میتواند منجر به طراحی محصولی مطلوب و سودآور شود.
حل مشکل «درست» بیشتر در مورد توانمند ساختن افراد برای انجام کاری است که قبلاً قصد داشتهاند انجام دهند، اما برای انجام آن تلاش نمیکنند یا توان حل مشکل را ندارند.
تقاضای مشتری از کجا میآید؟
اینکه تقاضا از کجا میآید، برای درک اینکه چه چیزی حل یک مشکل را ممکن میکند، کلید اصلی است.
تقاضا مجموعهای از لحظات و سناریوهایی است که من را در موقعیتی قرار میدهد که میخواستم کار بخصوصی را انجام دهم اما این کار را نکردم یا برایش تلاش کردهام و نتیجه نگرفتهام.
برای اینکه یک مشکل به تقاضا تبدیل شود، باید چرخهای تکراری را بشکند. تقاضا به این دلیل ایجاد میشود که چیزی تغییر کرده است و کاری که قبلا انجام میدادم دیگر جواب نمیدهد. باید آن علت و معلول دومینویی وجود داشته باشد که تقاضا را کاتالیز کند.
«پرسشها فضاهایی در ذهن هستند که راهحلها در آن قرار میگیرند»
کلایتون کریستنسن
🔗 برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۶ دقیقه)
گردآورنده: امیرحسین معظمی
#تجربه_کاربر #حل_مسئله
#UX
@Dexign فلسفه دیزاین
______
ما اکثر محصولاتی که مشکلی را برای ما حل میکنند، نمیخریم، همچنین در مورد بسیاری از محصولاتی که زندگی ما را به نحوی بهبود میبخشند، شناختی نداریم.
به عنوان طراح، ما با این سوال و عواقب حل مشکل اشتباه مواجه هستیم.
اما مشکل "درست" چیست و چگونه می توانیم آن را شناسایی کنیم؟
مشکل زمانی پیش میآید که شما هدفی داشته باشید اما ندانید چگونه به آن هدف میرسید!
موضوع حل مشکل مناسب معمولا زمانی مطرح می شود که تیمی به دنبال راهاندازی یک محصول جدید است. از خود میپرسیم «مشکل درست برای حل چیست» زیرا حل مشکل «درست» میتواند منجر به طراحی محصولی مطلوب و سودآور شود.
حل مشکل «درست» بیشتر در مورد توانمند ساختن افراد برای انجام کاری است که قبلاً قصد داشتهاند انجام دهند، اما برای انجام آن تلاش نمیکنند یا توان حل مشکل را ندارند.
تقاضای مشتری از کجا میآید؟
اینکه تقاضا از کجا میآید، برای درک اینکه چه چیزی حل یک مشکل را ممکن میکند، کلید اصلی است.
تقاضا مجموعهای از لحظات و سناریوهایی است که من را در موقعیتی قرار میدهد که میخواستم کار بخصوصی را انجام دهم اما این کار را نکردم یا برایش تلاش کردهام و نتیجه نگرفتهام.
برای اینکه یک مشکل به تقاضا تبدیل شود، باید چرخهای تکراری را بشکند. تقاضا به این دلیل ایجاد میشود که چیزی تغییر کرده است و کاری که قبلا انجام میدادم دیگر جواب نمیدهد. باید آن علت و معلول دومینویی وجود داشته باشد که تقاضا را کاتالیز کند.
«پرسشها فضاهایی در ذهن هستند که راهحلها در آن قرار میگیرند»
کلایتون کریستنسن
🔗 برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۶ دقیقه)
گردآورنده: امیرحسین معظمی
#تجربه_کاربر #حل_مسئله
#UX
@Dexign فلسفه دیزاین
______
Medium
What is the “right” problem to solve?
And where does customer demand come from?
👍10
هر آنچه که باید در مورد فاصله گذاری و چیدمان بدانید
کلید هر طراحی عالی سازماندهی اطلاعات آن است. روشهای فاصله گذاری و شبکههای چیدمان ساختار، سلسله مراتب و ریتم را در طراحی شما تعریف میکنند. فاصلهگذاری نه تنها بر زیبایی طراحی تأثیر دارد، بلکه به صفحه ظاهری هارمونیک میدهد.
در نتیجه، این شمایید که تصمیم میگیرد مخاطبان به چه چیزی توجه کنند.
واحد پایه
واحد پایه تعیین میکند که هر اندازهگیری و مضرب آن چه خواهد بود. این باعث میشود که طرحها ثابت بماند، ارتباط با دولوپرها بهبود یابد و تعداد تصمیماتی که یک طراح باید بگیرد را کاهش میدهد. توصیهشدهترین واحد پایه ۸ پیکسل است زیرا اکثر اندازههای صفحه نمایش بر ۸ بخش پذیر هستند.
سایز بندی
ارتفاع و عرض عناصر رابط کاربری در صورت امکان باید با افزایش واحد پایه (یعنی 8، 16، 24) اندازهگیری شود. این کار سلسله مراتبی واضح ایجاد میکند، عناصر را به طور منظم تراز میکند، و ریتم بصری ثابتی ارائه میدهد.
لایه گذاری
لایه گذاری یا Padding به فضای بین عناصر UI اشاره دارد و همچنین با افزایش واحد پایه اندازه گیری میشود. بالشتک ثابت و قابل پیش بینی از نظر زیبایی شناختی دلپذیر است، رابطه بین عناصر را روشن میکند و خوانایی را بهبود میبخشد.
آناتومی شبکه
همه شبکهها از سه عنصر تشکیل شدهاند:
- ستون
- گاتر (فاصله بین ستون)
- حاشیه
ستونها بلوکهای ساختمانی یک شبکه هستند و محل قرارگیری عناصر را مشخص میکنند. گاترها فضای منفی بین ستونها هستند و عرض آنها باید مضربی از واحد پایه باشد. حاشیهها فضای منفی بین لبه ستون بیرونی و قاب است.
نتیجه گیری
با استفاده از فاصلهگذاری، از مزایای تایید فاصله منفی هم برخوردار خواهید بود:
- اولویت یا خوانایی کاربر را بهبود میبخشید
- یک سیستم با چیدمان قوی دارید
- زیبایی بصری را افزایش میدهید
- طرحی انعطاف پذیر را تضمین میکنید
🔗 ادامه مقاله را میتوانید از این لینک مطالعه کنید.
(زمان حدودی مطالعه: ۸ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر #گرید
#UI
@Dexign فلسفه دیزاین
______
کلید هر طراحی عالی سازماندهی اطلاعات آن است. روشهای فاصله گذاری و شبکههای چیدمان ساختار، سلسله مراتب و ریتم را در طراحی شما تعریف میکنند. فاصلهگذاری نه تنها بر زیبایی طراحی تأثیر دارد، بلکه به صفحه ظاهری هارمونیک میدهد.
در نتیجه، این شمایید که تصمیم میگیرد مخاطبان به چه چیزی توجه کنند.
واحد پایه
واحد پایه تعیین میکند که هر اندازهگیری و مضرب آن چه خواهد بود. این باعث میشود که طرحها ثابت بماند، ارتباط با دولوپرها بهبود یابد و تعداد تصمیماتی که یک طراح باید بگیرد را کاهش میدهد. توصیهشدهترین واحد پایه ۸ پیکسل است زیرا اکثر اندازههای صفحه نمایش بر ۸ بخش پذیر هستند.
سایز بندی
ارتفاع و عرض عناصر رابط کاربری در صورت امکان باید با افزایش واحد پایه (یعنی 8، 16، 24) اندازهگیری شود. این کار سلسله مراتبی واضح ایجاد میکند، عناصر را به طور منظم تراز میکند، و ریتم بصری ثابتی ارائه میدهد.
لایه گذاری
لایه گذاری یا Padding به فضای بین عناصر UI اشاره دارد و همچنین با افزایش واحد پایه اندازه گیری میشود. بالشتک ثابت و قابل پیش بینی از نظر زیبایی شناختی دلپذیر است، رابطه بین عناصر را روشن میکند و خوانایی را بهبود میبخشد.
آناتومی شبکه
همه شبکهها از سه عنصر تشکیل شدهاند:
- ستون
- گاتر (فاصله بین ستون)
- حاشیه
ستونها بلوکهای ساختمانی یک شبکه هستند و محل قرارگیری عناصر را مشخص میکنند. گاترها فضای منفی بین ستونها هستند و عرض آنها باید مضربی از واحد پایه باشد. حاشیهها فضای منفی بین لبه ستون بیرونی و قاب است.
نتیجه گیری
با استفاده از فاصلهگذاری، از مزایای تایید فاصله منفی هم برخوردار خواهید بود:
- اولویت یا خوانایی کاربر را بهبود میبخشید
- یک سیستم با چیدمان قوی دارید
- زیبایی بصری را افزایش میدهید
- طرحی انعطاف پذیر را تضمین میکنید
🔗 ادامه مقاله را میتوانید از این لینک مطالعه کنید.
(زمان حدودی مطالعه: ۸ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر #گرید
#UI
@Dexign فلسفه دیزاین
______
Uiprep
Everything you need to know about spacing & layout grids
This guide will walk though spacing and layout grid best practices based on Material Design, Bootstrap, and Figma.
👍13
۹ نمونه پورتفولیو UX Writing برای تازهکارها
طراحی یک پورتفولیو به خودیِ خود ممکن است کار سخت و زمانبری باشد. اگر تازهکار باشید و نمونهکار قابلعرضهای هم نداشته باشید، سختتر هم میشود. اما بالاخره باید از جایی شروع کرد.
وقتی بهتازگی در زمینه شغلی جدیدی مثل UX Writing وارد میشوید، چالشی که در ابتدای کارتان به آن برمیخورید، این است که باید تجربه کاری داشته باشید تا بتوانید تجربه کاری جدید کسب کنید!
راهحل این چالش خلاقبودن در نشاندادن کارهایتان است. در ابتدای کارتان برای طراحی پورتفولیو، باید از هرچه دارید استفاده کنید. مثل پروژههای دانشجویی، چالشهای شخصی، تمرینهای کلاسی و حتی تسکهای مصاحبههای شغلی.
اگر هیچ نمونهکاری ندارید، از محصولات دیجیتالی که روزانه از آنها استفاده میکنید شروع کنید و برای خودتان چالش UX Writing طراحی کنید.
نکته مهم در پورتفولیوی UX Writing، این است که بتوانید نشان دهید چطور مسئله را تعریف میکنید، چطور فکر میکنید و چطور به راهحل میرسید.
در مقالهی پیشرو، نمونههای خوبی از پورتفولیوی افراد تازهکار به نمایش گذاشته شده است. در هرکدام از نمونهها، با موقعیتهای متفاوتی روبرو خواهید شد که ثابت میکند برای داشتن یک پورتفولیوی حرفهای، لزوما نباید نمونهکار اجراشده داشت. تمرینها و چالشهای انجامشده در این پورتفولیوها، به شما کمک میکند ایده بگیرید و با تعریف تمرینهای جدید، نمونهکارهای بیشتری برای ساخت پورتفولیوی خود داشته باشید.
🔗 برای مطالعه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه : ۱۵ دقیقه)
گردآورنده: الهه زراعتکار
#مسیر_شغلی #پورتفولیو
#ux_writing
@Dexign فلسفه دیزاین
______
طراحی یک پورتفولیو به خودیِ خود ممکن است کار سخت و زمانبری باشد. اگر تازهکار باشید و نمونهکار قابلعرضهای هم نداشته باشید، سختتر هم میشود. اما بالاخره باید از جایی شروع کرد.
وقتی بهتازگی در زمینه شغلی جدیدی مثل UX Writing وارد میشوید، چالشی که در ابتدای کارتان به آن برمیخورید، این است که باید تجربه کاری داشته باشید تا بتوانید تجربه کاری جدید کسب کنید!
راهحل این چالش خلاقبودن در نشاندادن کارهایتان است. در ابتدای کارتان برای طراحی پورتفولیو، باید از هرچه دارید استفاده کنید. مثل پروژههای دانشجویی، چالشهای شخصی، تمرینهای کلاسی و حتی تسکهای مصاحبههای شغلی.
اگر هیچ نمونهکاری ندارید، از محصولات دیجیتالی که روزانه از آنها استفاده میکنید شروع کنید و برای خودتان چالش UX Writing طراحی کنید.
نکته مهم در پورتفولیوی UX Writing، این است که بتوانید نشان دهید چطور مسئله را تعریف میکنید، چطور فکر میکنید و چطور به راهحل میرسید.
در مقالهی پیشرو، نمونههای خوبی از پورتفولیوی افراد تازهکار به نمایش گذاشته شده است. در هرکدام از نمونهها، با موقعیتهای متفاوتی روبرو خواهید شد که ثابت میکند برای داشتن یک پورتفولیوی حرفهای، لزوما نباید نمونهکار اجراشده داشت. تمرینها و چالشهای انجامشده در این پورتفولیوها، به شما کمک میکند ایده بگیرید و با تعریف تمرینهای جدید، نمونهکارهای بیشتری برای ساخت پورتفولیوی خود داشته باشید.
🔗 برای مطالعه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه : ۱۵ دقیقه)
گردآورنده: الهه زراعتکار
#مسیر_شغلی #پورتفولیو
#ux_writing
@Dexign فلسفه دیزاین
______
UX WRITING HUB
9 Beginner UX Writing Portfolio Examples - UX WRITING HUB
Learn how to create a beginner UX writing or content design portfolio with these 9 examples from new UX writers and content designers.
❤8👍5❤🔥1
تفکر طراحی
ما در عصری از تجربیات زندگی میکنیم که با هر تکامل، مجموعه جدیدی از نیازهای برآورده نشده به وجود میآید.
ایدئولوژی تفکر طراحی بیان میکند که رویکرد عملی و کاربر محور برای حل مسئله میتواند منجر به نوآوری شود و نوآوری میتواند منجر به تمایز و مزیت رقابتی شود. این رویکرد عملی و کاربر محور توسط فرآیند تفکر طراحی تعریف شده است.
چارچوب تفکر طراحی از سه جریان کلی
۱. درک
۲. کاوش
۳. تحقق پیروی میکند.
در این جریانهای بزرگتر، ۶ مرحله وجود دارد: همدلی، تعریف، ایدهپردازی، نمونه اولیه، آزمایش و اجرا.
همدلی
به منظور توسعه دانش در مورد آنچه کاربران شما انجام میدهند، میگویند، فکر میکنند و احساس میکنند، باید تحقیق کنید.
در این مرحله، شما با طیف وسیعی از کاربران واقعی صحبت میکنید. به طور مستقیم به آنچه انجام میدهند، چگونه فکر میکنند و چه میخواهند مشاهده کنید، از خودتان بپرسید که «چه چیزی باعث ایجاد انگیزه یا دلسردی کاربران میشود؟» یا «آنها در کجا ناامیدی را تجربه میکنند؟»
تعريف
در مرحله تعریف، از دادههای جمع آوری شده در مرحله همدلی برای جمعآوری بینش استفاده کنید. همه مشاهدات خود را سازماندهی کنید و موارد مشابهی را بین تجربیات فعلی کاربران خود ترسیم کنید. آیا نقطه درد مشترکی در بین کاربران مختلف وجود دارد؟ نیازهای برآورده نشده کاربران را شناسایی کنید.
در حالی که نیازهای کاربران خود را مشخص میکنید، شروع به برجسته کردن فرصتهای نوآوری کنید.
از طوفان فکری استفاده کنید. طوفان فکری طیفی از ایدههای دیوانه کننده و خلاقانه که نیازهای برآورده نشده کاربر شناسایی شده در مرحله تعریف را برطرف میکند. به خود و تیم خود آزادی کامل بدهید. هیچ ایدهای خیلی دور از ذهن نیست و کمیت جایگزین کیفیت میشود.
نمونه اولیه برای زیرمجموعهای از ایدههای خود، نمایشهای واقعی و لمسی بسازید. هدف این مرحله این است که بفهمید چه مؤلفههایی از ایدههای شما کار میکنند و کدامها نه.
در این مرحله، از طریق بازخورد در نمونههای اولیه، شروع به سنجش ایده در مقابل اجرایی شدن آن میکنید.
آزمایش برای گرفتن بازخورد به کاربران خود بازگردید. از خود بپرسید "آیا این راه حل نیازهای کاربران را برآورده میکند؟" و "آیا احساس، تفکر یا انجام وظایف آنها را بهبود بخشیده است؟" نمونه اولیه خود را در مقابل مشتریان واقعی قرار دهید و تأیید کنید که به اهداف شما میرسد.
اجرا
چشم انداز را عملی کنید. اطمینان حاصل کنید که راه حل شما تحقق یافته و زندگی کاربران نهایی شما را تحت تاثیر قرار میدهد.
موفقیت تفکر طراحی در توانایی آن در تغییر جنبهای از زندگی کاربر نهایی نهفته است. این مرحله ششم، اجرا، بسیار مهم است.
🔗 برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۷ دقیقه)
گردآورنده: امیرحسین معظمی
#تفکر_طراحی #حل_مسئله
#UX
@Dexign فلسفه دیزاین
______
ما در عصری از تجربیات زندگی میکنیم که با هر تکامل، مجموعه جدیدی از نیازهای برآورده نشده به وجود میآید.
ایدئولوژی تفکر طراحی بیان میکند که رویکرد عملی و کاربر محور برای حل مسئله میتواند منجر به نوآوری شود و نوآوری میتواند منجر به تمایز و مزیت رقابتی شود. این رویکرد عملی و کاربر محور توسط فرآیند تفکر طراحی تعریف شده است.
چارچوب تفکر طراحی از سه جریان کلی
۱. درک
۲. کاوش
۳. تحقق پیروی میکند.
در این جریانهای بزرگتر، ۶ مرحله وجود دارد: همدلی، تعریف، ایدهپردازی، نمونه اولیه، آزمایش و اجرا.
همدلی
به منظور توسعه دانش در مورد آنچه کاربران شما انجام میدهند، میگویند، فکر میکنند و احساس میکنند، باید تحقیق کنید.
در این مرحله، شما با طیف وسیعی از کاربران واقعی صحبت میکنید. به طور مستقیم به آنچه انجام میدهند، چگونه فکر میکنند و چه میخواهند مشاهده کنید، از خودتان بپرسید که «چه چیزی باعث ایجاد انگیزه یا دلسردی کاربران میشود؟» یا «آنها در کجا ناامیدی را تجربه میکنند؟»
تعريف
در مرحله تعریف، از دادههای جمع آوری شده در مرحله همدلی برای جمعآوری بینش استفاده کنید. همه مشاهدات خود را سازماندهی کنید و موارد مشابهی را بین تجربیات فعلی کاربران خود ترسیم کنید. آیا نقطه درد مشترکی در بین کاربران مختلف وجود دارد؟ نیازهای برآورده نشده کاربران را شناسایی کنید.
در حالی که نیازهای کاربران خود را مشخص میکنید، شروع به برجسته کردن فرصتهای نوآوری کنید.
از طوفان فکری استفاده کنید. طوفان فکری طیفی از ایدههای دیوانه کننده و خلاقانه که نیازهای برآورده نشده کاربر شناسایی شده در مرحله تعریف را برطرف میکند. به خود و تیم خود آزادی کامل بدهید. هیچ ایدهای خیلی دور از ذهن نیست و کمیت جایگزین کیفیت میشود.
نمونه اولیه برای زیرمجموعهای از ایدههای خود، نمایشهای واقعی و لمسی بسازید. هدف این مرحله این است که بفهمید چه مؤلفههایی از ایدههای شما کار میکنند و کدامها نه.
در این مرحله، از طریق بازخورد در نمونههای اولیه، شروع به سنجش ایده در مقابل اجرایی شدن آن میکنید.
آزمایش برای گرفتن بازخورد به کاربران خود بازگردید. از خود بپرسید "آیا این راه حل نیازهای کاربران را برآورده میکند؟" و "آیا احساس، تفکر یا انجام وظایف آنها را بهبود بخشیده است؟" نمونه اولیه خود را در مقابل مشتریان واقعی قرار دهید و تأیید کنید که به اهداف شما میرسد.
اجرا
چشم انداز را عملی کنید. اطمینان حاصل کنید که راه حل شما تحقق یافته و زندگی کاربران نهایی شما را تحت تاثیر قرار میدهد.
موفقیت تفکر طراحی در توانایی آن در تغییر جنبهای از زندگی کاربر نهایی نهفته است. این مرحله ششم، اجرا، بسیار مهم است.
🔗 برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۷ دقیقه)
گردآورنده: امیرحسین معظمی
#تفکر_طراحی #حل_مسئله
#UX
@Dexign فلسفه دیزاین
______
Nielsen Norman Group
Design Thinking 101
What is design thinking and why should you care? History and background plus a quick overview and visualization of 6 phases of the design thinking process.
👍9
۴۰ روش ساده برای خلاق ماندن
وقتی شغل شما با خلاقیت رابطه مستقیم دارد، گاهی ممکن است احساس کنید خلاقیتتان تمام شده است.
در این مواقع به این نتیجه میرسید که دیگر ایدههای جدید به سراغتان نمیآید یا برای انجام هر کار خلاقانهای، باید ساعتها فکر کنید.
قبل از هرچیز باید بگوییم که این احساس کاملا طبیعی است و هیچ ایرادی ندارد که گاهی ذهنتان نتواند آنطور که نیاز دارید، خلاق باشد. اما همانطور که میدانید، روشها و تمرینهایی برای تقویت خلاقیت و افزایش قدرت ایدهپردازی وجود دارد.
این روشها بهسادگی قدم زدن در محیط بیرون تا طراحی و اسکیس از هر چه در اطرافتان میبینید است که زمان زیادی را از شما نمیگیرند، اما انجامدادن آنها، ذهنتان را برای ورود ایدههای جدید آماده میکند. میتوانید هر روز یکی از تمرینها را انتخاب کنید و روزانه نیم الی یک ساعت برای آن وقت بگذارید. قطعا ارزشش را دارد!
اگر شما هم به کمی خلاقیت بیشتر، ایدههای جدیدتر و درنهایت طراحی خلاقانهتر احتیاج دارید، مطالعه این مقاله را از دست ندهید.
(زمان حدودی مطالعه: ۱۵ دقیقه)
گردآورنده: الهه زراعتکار
#توسعه_فردی #خلاقیت
@Dexign فلسفه دیزاین
______
وقتی شغل شما با خلاقیت رابطه مستقیم دارد، گاهی ممکن است احساس کنید خلاقیتتان تمام شده است.
در این مواقع به این نتیجه میرسید که دیگر ایدههای جدید به سراغتان نمیآید یا برای انجام هر کار خلاقانهای، باید ساعتها فکر کنید.
قبل از هرچیز باید بگوییم که این احساس کاملا طبیعی است و هیچ ایرادی ندارد که گاهی ذهنتان نتواند آنطور که نیاز دارید، خلاق باشد. اما همانطور که میدانید، روشها و تمرینهایی برای تقویت خلاقیت و افزایش قدرت ایدهپردازی وجود دارد.
این روشها بهسادگی قدم زدن در محیط بیرون تا طراحی و اسکیس از هر چه در اطرافتان میبینید است که زمان زیادی را از شما نمیگیرند، اما انجامدادن آنها، ذهنتان را برای ورود ایدههای جدید آماده میکند. میتوانید هر روز یکی از تمرینها را انتخاب کنید و روزانه نیم الی یک ساعت برای آن وقت بگذارید. قطعا ارزشش را دارد!
اگر شما هم به کمی خلاقیت بیشتر، ایدههای جدیدتر و درنهایت طراحی خلاقانهتر احتیاج دارید، مطالعه این مقاله را از دست ندهید.
(زمان حدودی مطالعه: ۱۵ دقیقه)
گردآورنده: الهه زراعتکار
#توسعه_فردی #خلاقیت
@Dexign فلسفه دیزاین
______
Layerform
How to Stay Creative - 40 Ways, Tips & Tricks
Layerform.com presents a list of 40 ways how to stay creative in the form of an infographic which everyone can use to maintain their creativity
👍6🔥2⚡1
ماک آپ و یک ابزار کاربردی
بعد از تمام شدن پروژه طراحی رابط کاربری هر سایت یا اپلیکیشن، یکی از مهمترین چالشها ارائه محصول است.
اگر تا به حال به مرحله طراحی کیس استادی و نمونه پرزنت رسیده باشید قطعا با ابزاری به اسم mockup آشنا هستید!
معنی لغوی mock up معادل مدلی است که به اندازهای طبیعی و کامل برای مطالعه و آزمایش رسیده باشد و نمایش به مشتری و کاربرد آن در دیزاین بدین شکل است که فیلم نهایی خود را به صورت پیش نمایش در گوشی همراه و یا در لپتاپ و تبلت نمایش دهید.
این قابلیت به مقدار زیادی پرزنت شما را صفحه آرایی میکند و باعث میشود هر چه بیشتر با مشتری ارتباط برقرار کنید.
امروز میخواهیم یکی از ابزارها و پلاگینهای کاربردی در این زمینه را به شما معرفی کنیم تا بتوانید با استفاده از آن در سریعترین زمان ماک آپهای زیبا تولید کنید.
پلاگین artboard Studio mockup
مراحل:
۱. وارد قسمت پلاگینها شده و پلاگین artboard Studio mockup را سرچ و ران کنید.
۲. از طریق لینک وارد سایتِ خودِ پلاگین شوید و از طریق اکانت گوگل در سایت ثبت نام کنید.
۳. بعد از ثبت نام API پلاگین را دریافت کرده و در فیگما وارد پلاگین کنید و پلاگین را ران کنید.
۴. از قسمت فیلترها، ماک آپهای free را انتخاب کرده و از موارد نمایش داده شده به دلخواه یک مورد را انتخاب کنید.
۵. یک ماک آپ و یک فریم خالی در فیگمای شما اد خواهد شد. فریم طراحی کرده خود را داخل فریم خالی اضافه کنید و سایز آن را با فریم خالی ست کنید ( از طریق کلید K میتوانید این کار را انجام دهید)
۶. در مرحله بعد فریم پرشده را انتخاب کرده و داخل پلاگین، رندر را کلیک کنید و تمام.
لینک پلاگین : https://www.figma.com/community/plugin/750673765607708804/artboard-studio-mockups
زمان مطالعه حدودی : ۵ دقیقه
گرد آورنده : علی لطفی
#فیگما #مسیر_شغلی
#UI
@Dexign فلسفه دیزاین
______
بعد از تمام شدن پروژه طراحی رابط کاربری هر سایت یا اپلیکیشن، یکی از مهمترین چالشها ارائه محصول است.
اگر تا به حال به مرحله طراحی کیس استادی و نمونه پرزنت رسیده باشید قطعا با ابزاری به اسم mockup آشنا هستید!
معنی لغوی mock up معادل مدلی است که به اندازهای طبیعی و کامل برای مطالعه و آزمایش رسیده باشد و نمایش به مشتری و کاربرد آن در دیزاین بدین شکل است که فیلم نهایی خود را به صورت پیش نمایش در گوشی همراه و یا در لپتاپ و تبلت نمایش دهید.
این قابلیت به مقدار زیادی پرزنت شما را صفحه آرایی میکند و باعث میشود هر چه بیشتر با مشتری ارتباط برقرار کنید.
امروز میخواهیم یکی از ابزارها و پلاگینهای کاربردی در این زمینه را به شما معرفی کنیم تا بتوانید با استفاده از آن در سریعترین زمان ماک آپهای زیبا تولید کنید.
پلاگین artboard Studio mockup
مراحل:
۱. وارد قسمت پلاگینها شده و پلاگین artboard Studio mockup را سرچ و ران کنید.
۲. از طریق لینک وارد سایتِ خودِ پلاگین شوید و از طریق اکانت گوگل در سایت ثبت نام کنید.
۳. بعد از ثبت نام API پلاگین را دریافت کرده و در فیگما وارد پلاگین کنید و پلاگین را ران کنید.
۴. از قسمت فیلترها، ماک آپهای free را انتخاب کرده و از موارد نمایش داده شده به دلخواه یک مورد را انتخاب کنید.
۵. یک ماک آپ و یک فریم خالی در فیگمای شما اد خواهد شد. فریم طراحی کرده خود را داخل فریم خالی اضافه کنید و سایز آن را با فریم خالی ست کنید ( از طریق کلید K میتوانید این کار را انجام دهید)
۶. در مرحله بعد فریم پرشده را انتخاب کرده و داخل پلاگین، رندر را کلیک کنید و تمام.
لینک پلاگین : https://www.figma.com/community/plugin/750673765607708804/artboard-studio-mockups
زمان مطالعه حدودی : ۵ دقیقه
گرد آورنده : علی لطفی
#فیگما #مسیر_شغلی
#UI
@Dexign فلسفه دیزاین
______
Figma
Artboard Mockups | Figma
Access Artboard Studio's extensive library of high-quality mockups directly within Figma. Choose from a wide range of categories including devices, packaging, apparel, and print. Effortlessly transform your Figma designs into realistic product mockups with…
👍6❤4
چرا همراه شدن محتوای تجربه کاربری با بومیسازی بهتر کار میکند؟
در این مقاله به رابطه بین محتوای تجربه کاربری (یوایکس کانتنت) و بومیسازی محتوا و اهمیت آن در دستیابی به موفقیت جهانی پرداخته شدهاست.
پیام اصلی این است که این دو عامل با هم، بسیار مفیدتر و تاثیرگذارتر کار میکنند، به مخاطبان گستردهتری دست مییابند، تجربه کاربری را بهبود میبخشند و به رشد کسبوکار در سطح منطقهای و جهانی کمک میکنند.
در دنیای امروز، نقش محتوا و بومیسازی آن برای موفقیت یک برند بسیار حیاتی است. زبان انگلیسی تنها زبان مورد استفاده در محصولات نیست و تنظیم محتوا مطابق نیازهای مناطق و فرهنگهای متفاوت باعث دستیابی به مخاطبانی گستردهتر (غیرانگلیسی زبان) میشود. این موضوع با بررسی و مشاهدهی رفتار کاربران و مصرفکنندگان ثابت شدهاست.
برای ایجاد هماهنگی در فرآیند بومیسازی محتوای تجربه کاربری، ابتدا باید اهداف مشترک را تعیین کنیم و سپس با در نظر گرفتن این دو به عنوان جزئی از کل سیستم، سبب شویم که کسب موفقیتها در زمان کوتاهتری رخ دهند. با برطرف شدن نیازهای مختص هر منطقهی جغرافیایی و فرهنگی، نظر تعداد بیشتری از ذینفعان و کاربران به محصول جلب میشود که این خود باعث ادامهدار شدن موفقیتهای کوتاهمدت و بلندمدت کسب و کار و تقاضای بیشتر برای آن میشود.
برای مطالعه کل مقاله به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۱۰ دقیقه)
گردآورنده: صبا لوعالیان
#تجربه_کاربر
#UX #UX_writing
@Dexign فلسفه دیزاین
______
در این مقاله به رابطه بین محتوای تجربه کاربری (یوایکس کانتنت) و بومیسازی محتوا و اهمیت آن در دستیابی به موفقیت جهانی پرداخته شدهاست.
پیام اصلی این است که این دو عامل با هم، بسیار مفیدتر و تاثیرگذارتر کار میکنند، به مخاطبان گستردهتری دست مییابند، تجربه کاربری را بهبود میبخشند و به رشد کسبوکار در سطح منطقهای و جهانی کمک میکنند.
در دنیای امروز، نقش محتوا و بومیسازی آن برای موفقیت یک برند بسیار حیاتی است. زبان انگلیسی تنها زبان مورد استفاده در محصولات نیست و تنظیم محتوا مطابق نیازهای مناطق و فرهنگهای متفاوت باعث دستیابی به مخاطبانی گستردهتر (غیرانگلیسی زبان) میشود. این موضوع با بررسی و مشاهدهی رفتار کاربران و مصرفکنندگان ثابت شدهاست.
برای ایجاد هماهنگی در فرآیند بومیسازی محتوای تجربه کاربری، ابتدا باید اهداف مشترک را تعیین کنیم و سپس با در نظر گرفتن این دو به عنوان جزئی از کل سیستم، سبب شویم که کسب موفقیتها در زمان کوتاهتری رخ دهند. با برطرف شدن نیازهای مختص هر منطقهی جغرافیایی و فرهنگی، نظر تعداد بیشتری از ذینفعان و کاربران به محصول جلب میشود که این خود باعث ادامهدار شدن موفقیتهای کوتاهمدت و بلندمدت کسب و کار و تقاضای بیشتر برای آن میشود.
برای مطالعه کل مقاله به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۱۰ دقیقه)
گردآورنده: صبا لوعالیان
#تجربه_کاربر
#UX #UX_writing
@Dexign فلسفه دیزاین
______
UX Content Collective | Content Design and UX Writing Courses
Why UX content and localization are better together • UX Content Collective
Dip into the relationship between UX content and localization to understand their significance in global product success.
👍6❤1⚡1🔥1
کنتراست در طراحی وب چیست؟
تفاوتها چشمان ما را جذب میکند و تضاد به ما توانایی تشدید تفاوتها را میدهد.
وقتی صحبت از طراحی وب میشود، مفهوم کنتراست اغلب از نظر زیبایی شناسی و جذابیت بصری مورد بحث قرار میگیرد.
کنتراست نقش مهمی در برجسته کردن عناصر طراحی در وب سایت دارد و به راحتی توسط بیننده مورد توجه قرار میگیرد و طراحی را از نظر زیبایی شناختی بهتر و کاربر پسندتر میکند. کنتراست در طراحی وب به رابطه بین دو یا چند عنصر طراحی، مانند متن و پس زمینه که نسبت به یکدیگر برجسته هستند، اشاره دارد.
انواع مختلفی از کنتراست وجود دارد که میتواند در طراحی وب برای افزایش جذابیت بصری و تجربه کاربری وب سایت استفاده شود.
رنگ
کنتراست رنگ، تفاوت نور بین فونت (یا هر چیزی در پیش زمینه) و پس زمینه آن است. این نوع کنتراست برای اطمینان از اینکه متن به راحتی خوانا است و سایر عناصر طراحی برجسته هستند ضروری است.
اندازه
کنتراست اندازه به تعداد زیادی از اندازههای مختلف در یک رابط گرافیکی مربوط میشود. با استفاده از آن، میتوانید بر عناصر خاصی تأکید کنید و همچنین عمق بصری و حس سلسله مراتب را ایجاد کنید.
فضا
تضاد فضا که به عنوان فضای منفی نیز شناخته میشود، خلاء اطراف یک عنصر است، چه توسط فضای سفید یا هر نوع فاصله بصری دیگری ایجاد شود. این نوع کنتراست، کنتراست بین پسزمینه عنصر و جزئیات طراحی اطراف آن را برجسته میکند.
پیش زمینه و پس زمینه
کنتراست پیش زمینه و پس زمینه به رابطه بصری بین یک عنصر در پیش زمینه تصویر و پس زمینه پشت آن اشاره دارد. در طراحی وب، این نوع کنتراست از این نظر منحصر به فرد است که پس زمینه میتواند به صورت پویا با تعامل بازدیدکننده سایت با آن تغییر کند.
شکل
تضاد شکل با مشخص کردن چیزها با تفاوت شکل فیزیکی آنها در مقایسه با سایر موارد موجود در صفحه حاصل میشود. از این نوع کنتراست میتوان برای ایجاد علاقه و هدایت چشم بیننده استفاده کرد.
عناصر
کنتراست عناصر به انواع مختلفی از رسانهها اشاره دارد که میتوانند در طراحی وب استفاده شوند، مانند عکسها، تصاویر، یا طرحهای طراحی شده با دست. انتخاب رسانه میتواند تاثیر قابل توجهی بر ظاهر و احساس کلی وب سایت داشته باشد و باید بر اساس اهداف وب سایت و نوع محتوای ارائه شده انتخاب شود.
بافتها و الگوها
بافتها به طرحها شخصیت میدهند و میتوانند به شما در ایجاد طرحهایی با کنتراست بالا کمک کنند، زمانی که ویژگیهای آنها به طور قابل توجهی با یکدیگر متفاوت است. برای مثال، جفت کردن یک پسزمینه بافتدار خشن با متن پیشزمینه صاف، کنتراست را به طرح اضافه میکند.
برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۸ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر #کنتراست
#UI
@Dexign فلسفه دیزاین
______
تفاوتها چشمان ما را جذب میکند و تضاد به ما توانایی تشدید تفاوتها را میدهد.
وقتی صحبت از طراحی وب میشود، مفهوم کنتراست اغلب از نظر زیبایی شناسی و جذابیت بصری مورد بحث قرار میگیرد.
کنتراست نقش مهمی در برجسته کردن عناصر طراحی در وب سایت دارد و به راحتی توسط بیننده مورد توجه قرار میگیرد و طراحی را از نظر زیبایی شناختی بهتر و کاربر پسندتر میکند. کنتراست در طراحی وب به رابطه بین دو یا چند عنصر طراحی، مانند متن و پس زمینه که نسبت به یکدیگر برجسته هستند، اشاره دارد.
انواع مختلفی از کنتراست وجود دارد که میتواند در طراحی وب برای افزایش جذابیت بصری و تجربه کاربری وب سایت استفاده شود.
رنگ
کنتراست رنگ، تفاوت نور بین فونت (یا هر چیزی در پیش زمینه) و پس زمینه آن است. این نوع کنتراست برای اطمینان از اینکه متن به راحتی خوانا است و سایر عناصر طراحی برجسته هستند ضروری است.
اندازه
کنتراست اندازه به تعداد زیادی از اندازههای مختلف در یک رابط گرافیکی مربوط میشود. با استفاده از آن، میتوانید بر عناصر خاصی تأکید کنید و همچنین عمق بصری و حس سلسله مراتب را ایجاد کنید.
فضا
تضاد فضا که به عنوان فضای منفی نیز شناخته میشود، خلاء اطراف یک عنصر است، چه توسط فضای سفید یا هر نوع فاصله بصری دیگری ایجاد شود. این نوع کنتراست، کنتراست بین پسزمینه عنصر و جزئیات طراحی اطراف آن را برجسته میکند.
پیش زمینه و پس زمینه
کنتراست پیش زمینه و پس زمینه به رابطه بصری بین یک عنصر در پیش زمینه تصویر و پس زمینه پشت آن اشاره دارد. در طراحی وب، این نوع کنتراست از این نظر منحصر به فرد است که پس زمینه میتواند به صورت پویا با تعامل بازدیدکننده سایت با آن تغییر کند.
شکل
تضاد شکل با مشخص کردن چیزها با تفاوت شکل فیزیکی آنها در مقایسه با سایر موارد موجود در صفحه حاصل میشود. از این نوع کنتراست میتوان برای ایجاد علاقه و هدایت چشم بیننده استفاده کرد.
عناصر
کنتراست عناصر به انواع مختلفی از رسانهها اشاره دارد که میتوانند در طراحی وب استفاده شوند، مانند عکسها، تصاویر، یا طرحهای طراحی شده با دست. انتخاب رسانه میتواند تاثیر قابل توجهی بر ظاهر و احساس کلی وب سایت داشته باشد و باید بر اساس اهداف وب سایت و نوع محتوای ارائه شده انتخاب شود.
بافتها و الگوها
بافتها به طرحها شخصیت میدهند و میتوانند به شما در ایجاد طرحهایی با کنتراست بالا کمک کنند، زمانی که ویژگیهای آنها به طور قابل توجهی با یکدیگر متفاوت است. برای مثال، جفت کردن یک پسزمینه بافتدار خشن با متن پیشزمینه صاف، کنتراست را به طرح اضافه میکند.
برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۸ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر #کنتراست
#UI
@Dexign فلسفه دیزاین
______
Studio by UXPin
What is Contrast in Web Design? [+7 Tips How to Use it]
Find out what contrast in web design is and how to design websites with high-level or low-level contrast. Learn to use contrast.
👍5
فضاهای سفید در طراحی رابط کاربری (UI Design)
در این مقاله قواعد بهکارگیری فضاهای سفید در طراحی رابط کاربری (UI) بررسی شدهاست.
نویسنده توضیح میدهد در یک طراحی خوب به تمام فضاهای سفید از پیش فکر شدهاست. زمانی که از فضاهای سفید به خوبی استفاده شود یک رابط کاربری (UI) هماهنگ، خوانا و مهمتر از همه، ساده خواهیم داشت.
در این مقاله ۸ فاکتور زیر بهعنوان قواعد فاصلهگذاری بررسی شدهاند:
۱. از قانون مجاورت پیروی کنید.
۲. در استفاده از فضای سفید خساست به خرج ندهید.
۳. از فضای سفید برای جلب تمرکز کاربر در بخش مورد نظراستفاده کنید.
۴. در طراحی و در اجرا از متدهای اندازه گیری یکسان استفاده کنید.
۵. در سراسر طراحی خود از قوانین فاصلهگذاری یکسان پیروی کنید.
۶. از بهکارگیری فاصلههای متفاوت اما غیرقابل تشخیص و نزدیکبهم در یک بخش خودداری کنید.
۷. زمانی که سایز فونت شما کوچکتر میشود، ارتفاع خطوط را نیز کاهش دهید.
۸. در صفحاتی با اطلاعات زیاد برای نشان دادن ارتباط بخشهای مختلف با یکدیگر از تکنیکها استفاده کنید.
برای مطالعه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۵ دقیقه)
گردآورنده: رادنا احمدینیا
#UI #White_Space
@Dexign فلسفه دیزاین
______
در این مقاله قواعد بهکارگیری فضاهای سفید در طراحی رابط کاربری (UI) بررسی شدهاست.
نویسنده توضیح میدهد در یک طراحی خوب به تمام فضاهای سفید از پیش فکر شدهاست. زمانی که از فضاهای سفید به خوبی استفاده شود یک رابط کاربری (UI) هماهنگ، خوانا و مهمتر از همه، ساده خواهیم داشت.
در این مقاله ۸ فاکتور زیر بهعنوان قواعد فاصلهگذاری بررسی شدهاند:
۱. از قانون مجاورت پیروی کنید.
۲. در استفاده از فضای سفید خساست به خرج ندهید.
۳. از فضای سفید برای جلب تمرکز کاربر در بخش مورد نظراستفاده کنید.
۴. در طراحی و در اجرا از متدهای اندازه گیری یکسان استفاده کنید.
۵. در سراسر طراحی خود از قوانین فاصلهگذاری یکسان پیروی کنید.
۶. از بهکارگیری فاصلههای متفاوت اما غیرقابل تشخیص و نزدیکبهم در یک بخش خودداری کنید.
۷. زمانی که سایز فونت شما کوچکتر میشود، ارتفاع خطوط را نیز کاهش دهید.
۸. در صفحاتی با اطلاعات زیاد برای نشان دادن ارتباط بخشهای مختلف با یکدیگر از تکنیکها استفاده کنید.
برای مطالعه مقاله میتوانید به این لینک مراجعه کنید.
(زمان حدودی مطالعه: ۵ دقیقه)
گردآورنده: رادنا احمدینیا
#UI #White_Space
@Dexign فلسفه دیزاین
______
Medium
Applying white space in UI design
8 practical tips, with examples.
👍6🔥1