آموزش بوت کمپ طراحی رابط کاربری، هفته 1: ترکیب
UI Design Bootcamp, Week 1: Composition
مهمترین جنبه برای ایجاد یک تجربه کاربری عالی، داشتن یک رابط کاربری زیبا است. برخی تغییرات کوچک در زیبایی‌شناسی شما می‌تواند تأثیر یا تجربه زیادی برای کاربران شما داشته باشد.
اگر روی یک برنامه وب طراحی میکنید، در مورد تایپوگرافی، رنگ و ترکیب تصمیم می‌گیرید. اینها بر نام تجاری، سبک، قابلیت استفاده و تجربه کاربری برنامه شما تأثیر می گذارد. شما در حال حاضر این تصمیمات را می گیرید اما آیا از تاثیر آنها آگاه هستید. استفاده بسیار ظریف از تایپوگرافی و رنگ می تواند به اندازه ای شخصیت داشته باشد که ما به هیچ تصویر دیگری نیاز نداشته باشیم. ما می‌توانیم به یک متن کسل‌کننده جان بدهیم و خواندن آن را برای کاربر آسان‌تر یا سخت‌تر کند. انجام صحیح چند انتخاب ساده می تواند برنامه را خراب یا خراب کند.
هفته 1: ترکیب بندی
ترکیب بندی خوب باعث می شود طرح های ما یکنواخت به نظر برسند، اما جذابیت بصری نیز ایجاد می کند. اگر می‌دانیم چگونه از یکی استفاده کنیم، این تنها چیزی است که می‌تواند بلافاصله طراحی را حرفه‌ای‌تر کند و در عین حال کاربران را درگیر نگه می‌دارد.
این هفته مجموعه‌ای از تمرین‌های عملی را برای بهبود شهود شما هنگام قرار دادن عناصر در صفحه دنبال می‌کنیم. هنگامی که این شهود را دارید، می‌توانیم اضافه کردن متن، تصاویر و سایر عناصر رابط کاربری را شروع کنیم. اما بیایید مطمئن شویم که قبل از اینکه همه چیزهای دیگر را درگیر کنیم، با تسلط بر آهنگ‌هایمان شروع کنیم.
آیا این دوره برای من است؟
در حالت ایده آل شما قبلاً مدتی را صرف طراحی وب سایت ها و/یا برنامه های کاربردی کرده اید. هر جنبه ای از دوره با در نظر گرفتن مبتدیان ایجاد می شود، اما اگر قبلاً برخی از طرح ها را ایجاد کرده باشید، ممکن است متوجه شوید که از دوره بیشتر بهره مند می شوید. همچنین باید بدانید که چگونه از برخی نرم افزارهای طراحی استفاده کنید. من Figma را توصیه می‌کنم، اما Adobe XD، Invission Studio، Sketch یا نرم‌افزارهای مشابه نیز مشکلی ندارند.
این دوره با در نظر گرفتن طراحان ایجاد شده است، اما ممکن است برای توسعه دهندگان فرانت اند یا صاحبان محصول نیز جالب باشد.
شما تعداد زیادی ترکیب ساده در این ماژول ایجاد کردید.
آنها را با دیگران به اشتراک بگذارید و ببینید چه چیزی ایجاد کرده اند.
- عبارت: یک کلمه احساسی انتخاب کنید و ترکیبی را فقط با استفاده از مربع‌های سیاه ایجاد کنید.
- تعادل: ترکیبی ایجاد کنید و به اشتراک بگذارید که به نظر تعادل می‌رسد. با اشکال و تاریکی ها آزمایش کنید. ببینید آیا می‌توانید یک ترکیب متعادل با چندین شکل روی آن ایجاد کنید.
- کنتراست: یک ترکیب با مقداری عنصر کنتراست ایجاد کنید.
- فرم: یکی از ترکیب‌های قبلی خود را دوباره بسازید، اما با بافت‌ها و خطوط بازی کنید تا فرم‌های جالب‌تری ایجاد کنید.
- سلسله مراتب: یک ترکیب با چندین شکل ایجاد کنید. اطمینان حاصل کنید که چشم شما ابتدا به یک شکل و سپس به شکل دیگر کشیده شده است. بنابراین دستوری وجود دارد که به اطراف ترکیب نگاه کنید.
- روابط: ترکیبی ایجاد کنید که در آن برخی از عناصر احساس کنند با هم مرتبط هستند.
- تراز: ترکیب مورد علاقه خود را تا کنون دوباره ایجاد کنید اما عناصر را تراز کنید یا اندازه هایی را که می توانید استفاده کنید محدود کنید تا مطابقت بیشتری به نظر برسد.
- Sequence Pace: یک ترکیب عمودی ایجاد کنید که دارای پس‌زمینه‌های رنگی با اندازه‌های مختلف باشد. با استفاده از هر چیزی که در تمرینات قبلی آزمایش کردید، اشکال دیگر را اضافه کنید.
درس ها Lessons
-
اصطلاح Expression
-
تعادل Balance
-
مقدمه UI Bootcamp UI Bootcamp Introduction
-
خلاصه Summary
-
هم ترازی Alignment
-
دنباله و سرعت Sequence & Pace
-
روابط Relations
-
تضاد Contrast
-
سلسله مراتب Hierarchy
-
ترکیب بندی Composition
-
فرم Form
https://donyad.com/d/4fd7da
Rob Sutcliffe
طراح و توسعه دهنده UI
نمایش نظرات