آموزش اصول طراحی: چگونه مانند یک طراح فکر کنیم
Fundamentals of Design: How to Think Like a Designer
بیشتر ما با دیدن طراحی عالی آن را می شناسیم. اگر تا به حال یک آیفون در دست گرفته اید، داخل یک تسلا اس را دیده اید یا در ساختمانی که توسط فرانک گری طراحی شده است قدم زده اید، پس می دانید که طراحی چقدر مهم است. احساسی که در تعامل با طراحی عالی از ما به ارمغان می آورد غیر قابل توصیف است.
آنچه خواهید آموخت
- مقدمه ای بر طراحی. تفاوت های ظریف بین طراحی و زیبایی شناسی.
- قدرت شبکه ها. شبکه ها نظم را از هرج و مرج ایجاد می کنند. یاد خواهید گرفت که چگونه ساختاری را بسازید که در زیر طرح شما قرار دارد.
- ایجاد سلسله مراتب بصری. 5 روش برای ایجاد سلسله مراتب بصری: رنگ، فاصله، تراز، ضمنی و صریح.
- تایپ‌فیس‌ها را انتخاب و ترکیب کنید. فونت‌های مختلف را شناسایی میکنید، سپس اندازه و ارزش آن‌ها را تنظیم میکنید.
- شخصیت و زمینه در رنگ. شما یک پالت مناسب را بر اساس درک تئوری رنگ انتخاب خواهید کرد
آنچه خواهید ساخت
در پایان این کلاس خواهید فهمید که فرآیند طراحی چگونه کار می کند، چگونه مانند یک طراح فکر کنید و چگونه همه عناصر طراحی را کنار هم قرار دهید تا چیزی شگفت انگیز خلق کنید. شما با یک صفحه اصلی برای نمونه کارها خود به پایان می رسانید که از حساسیت های طراحی منحصر به فرد شما صحبت می کند.
شما ممکن است بخواهید یک طراح باشید یا نخواهید، اما یادگیری اینکه مانند یک طراح فکر کنید بسیار مهم است.
با استفاده از گریدها، سلسله مراتب بصری، تایپوگرافی و تئوری رنگ، یک صفحه نمونه کار شخصی طراحی کنید.
مقدمه طراحی
- صفحه شخصی خود را مشخص کنید
کپی خود را در قالب طرح کلی برای صفحه شخصی که می خواهید ایجاد کنید آماده کنید. هدف از طراحی، برقراری ارتباط با یک پیام یا حل یک مشکل است، بنابراین مطمئن شوید که طراحی شما با تعاریف بالا تداخلی نداشته باشد.
طرح کلی خود را در صفحه پروژه خود به اشتراک بگذارید. حتماً بازخورد خود را به دانش آموزان دیگر ارائه دهید.
قدرت شبکه ها
- شبکه خود را بسازید
شبکه چیست؟
■ یک شبکه صرفاً تقسیمی از فضا در صفحه برای ایجاد ساختار و نظم برای محتوا است.
■ روشهای بی‌نهایتی وجود دارد که می‌توانید یک صفحه را تقسیم کنید، اما بیایید یکی از انعطاف‌پذیرترین شبکه‌ها، شبکه ۱۲ ستونی را بچسبانیم.
■ نکته جالب در مورد شبکه ۱۲ ستونی این است که کمترین تعداد ستون‌هایی است که بیشترین تقسیم‌پذیری ستون‌ها را به شما می‌دهند.
■ با یک شبکه ۱۲ ستونی می‌توانید آن را به ۱، ۲، ۳، ۴، ۶ و ۱۲ تقسیم کنید
مزیت استفاده از شبکه چیست؟
■ مزیت شبکه این است که ایجاد تعادل بصری را آسان می‌کند
■ سازگاری ایجاد می‌کند و یک رویکرد سیستماتیک است.
■ وقتی اسناد جدیدی ایجاد میکنید، می‌تواند مقیاس‌پذیر باشد.
■ بیایید با تنظیم یک شبکه برای صفحه خود شروع کنیم
■ بیایید شبکه خود را بالا بیاوریم.
■ می‌توانم دو ستون بسازم و یک نشان‌واره و یک ناو در هر ستون قرار دهم
طرح اولیه صفحه شخصی خود را با استفاده از سیستم شبکه ایجاد کنید.
ابزارهای مختلفی برای طراحی وجود دارد:
ایجاد سلسله مراتب بصری
- از طرح کلی خود برای بررسی سلسله مراتب خود استفاده کنید
در درس قبلی شما یک طرح کلی از نسخه خود نوشتید. در این درس می توانید از اصول زیر برای ایجاد سلسله مراتبی که با طرح کلی شما مطابقت دارد استفاده کنید.
تعریف سلسله مراتب بصری ترتیبی است که در آن چشم انسان آنچه را که می بیند درک می کند. انسان ها تمایل دارند عناصر مشابه را در الگوهای معنادار گروه بندی کنند.
چرا سلسله مراتب بصری مهم است؟
من همین الان تعریف شلوار فانتزی سلسله مراتب بصری را به شما دادم، اما شاید بتوانید به این شکل فکر کنید.
همه ما دامنه توجه محدودی داریم. ما از یک جلسه به جلسه دیگر عجله داریم، بچه ها را جمع می کنیم و شام را پر می کنیم تا قسمت بعدی Bachelor را تماشا کنیم.
وقتی مطلبی را می خوانیم، سعی می کنیم با اسکن صفحه به دنبال الگوها، آن را در سریع ترین زمان ممکن درک کنیم.
ما به دنبال روابط بین هر یک از موارد و نحوه اتصال همه آن موارد به عنوان یک کل هستیم.
اگر طراح کار خوبی انجام دهد، باید بتوانیم معنای صفحه را به سرعت درک کنیم، و سپس انتخاب کنیم که آیا می‌خواهیم عمیق‌تر در محتوا غواصی کنیم.
در اینجا روشهای اصلی برای ایجاد سلسله مراتب
وجود دارداندازه
رنگ
فضا
تراز کردن
- ضمنی یا صریح
حروف تایپ را انتخاب و ترکیب کنید
- فونت ها را پیدا و اضافه کنید
- انتخاب تایپ فیس
-
- ترکیب فونت ها
- کنتراست بصری کلیدی است.
- از دو فونت با مشخصات مشابه استفاده نکنید. مانند Helvetica و Franklin Gothic.
- فونت‌های Serif و Sans-serif راهی آسان برای جفت‌سازی هستند
- اگر بتوانید دو فونت مختلف را از یک تایپوگراف جفت کنید، معمولاً خوب کار می‌کند.
- در اینجا چند ترکیب عالی پیشنهاد شده توسط Hoefler Frere و Jones، یک کارخانه ریخته گری فونت شناخته شده است.
- پیوندها
- اندازه
- از ماشین حساب نسبت طلایی استفاده کنید
- من می‌توانم در این مورد ریاضی را بررسی کنم، اما این ابزار همه کارها را برای شما انجام می‌دهد
- از ماشین حساب نسبت طلایی استفاده کنید
- کرنینگ
- فاصله بین دو حرف
- این تقریباً همیشه یک توپ چشمی است که به آن نزدیک می شود، و شما باید آن را تنظیم کنید تا زمانی که به نظر شما مناسب باشد. هرچه بیشتر این کار را انجام دهید، بهتر می‌شوید.
- این بازی kerning فوق‌العاده را که تمرینی عالی است، بررسی کنید
- جنایات قلم
- هرگز هرگز یک فونت را به صورت عمودی یا افقی دراز نکنید. همیشه. اگر این کار را بکنید، شما را شکار می کنم.
- اگر می خواهید از فونت اسکریپت فانتزی استفاده کنید، از آن در حد اعتدال استفاده کنید. همه چیز را در فونت اسکریپت تنظیم نکنید.
- کلید خوانایی است. مطمئن شوید که می توانید پیام خود را به وضوح بیان کنید.
- هرگز تحت هیچ شرایطی از Comic Sans یا Papyrus استفاده نکنید
پیوندها
مکان های زیادی برای یافتن فونت های با کیفیت بالا وجود دارد:- (رایگان اما نه با کیفیت بالا)
- انتخاب تایپ فیس
شخصیت و زمینه در رنگ
- پالت ها و ترکیب رنگ ها را کاوش کنید
یک مقاله عالی در مورد روانشناسی رنگ در وبلاگ HelpScout وجود دارد. در اینجا چند نکته اصلی وجود دارد.
«تلاش‌های زیادی برای طبقه‌بندی رنگ‌ها صورت گرفته است، اما حقیقت این است که واکنش افراد به رنگ‌ها به‌طور قابل‌توجهی تحت تأثیر تجربیات خودشان است. قرمز ممکن است به عنوان "خطر" طبقه بندی شود، اما برای یک هوادار فوتبال آلاباما، کاملاً عالی است.
بسیار مهم‌تر است که رنگ‌های برند شما به جای تلاش برای همسو شدن با تداعی‌های رنگی کلیشه‌ای، از شخصیت که می‌خواهید به تصویر بکشید، حمایت کنند.
شخصیت + زمینه
اما این فقط در مورد انتخاب یک رنگ بر اساس شخصیت نیست، بلکه باید بر اساس زمینه نیز باشد. سبز می تواند برای طراحی یک برند محیطی مانند GreenPeace استفاده شود، اما سبز می تواند برای طراحی برندی مانند TD Bank نیز استفاده شود.
در آن صورت سبز می تواند به طور موثر برای هر دو استفاده شود.
- بنابراین یک رنگ را رد نکنید زیرا سبز به معنای "پول" است، سبز همچنین می تواند با محیط مرتبط باشد.
منابع زیادی برای یافتن ترکیب رنگ وجود دارد:
منابع اضافی
این همه یادداشت های من برای کلاس است:
درس ها Lessons
-
انتخاب اندازه فونت Picking a Font Size
-
ترکیب حروف چاپی Combining Typefaces
-
Screencast: استفاده از سلسله مراتب بصری در عمل Screencast: Using Visual Hierarchy in Practice
-
مبانی تئوری رنگ Color Theory Basics
-
Screencast: استفاده از رنگ در عمل Screencast: Using Color in Practice
-
مقدمه ای بر تایپوگرافی Intro To Typography
-
گریدها و بخش طلایی Grids and the Golden Section
-
جنایات تایپوگرافی! Typography Crimes!
-
طراحی چیست؟ What is Design?
-
معرفی رنگ Intro to Color
-
انواع سلسله مراتب: رنگ Types of Hierarchy: Color
-
انواع سلسله مراتب: هم ترازی Types of Hierarchy: Alignment
-
اثر Von Restorff The Von Restorff Effect
-
تریلر Trailer
-
انواع سلسله مراتب: فضا Types of Hierarchy: Space
-
Screencast: استفاده از یک شبکه در عمل Screencast: Using a Grid in Practice
-
معرفی گریدز Intro to Grids
-
Screencast: استفاده از فونت ها در عمل Screencast: Using Fonts in Practice
-
انواع سلسله مراتب: ضمنی و آشکار Types of Hierarchy: Implicit and Explicit
-
مقدمه ای بر سلسله مراتب بصری Intro to Visual Hierarchy
https://donyad.com/d/61fd
Jack Zerby
موسس DOHQ و DoneForYouDecks.com
- جک زربی یک طراح با 20 سال تجربه و در حال حاضر بنیانگذار و DoneForYouDecks است.
- با و تیمش در Gumroad کار می‌کند و سیستم‌های طراحی UI/UX را ایجاد می‌کند.
- استارت آپ های گذشته، Flavors.me (به Moo فروخته شد) و Goodsie، در ، NY Times، ظاهر شدند span> ، شرکت سریع و .
- نقش‌های گذشته عبارتند از: مدیر طراحی در Vimeo، طراحی پنتاگرام، طراحی قورباغه، RG/A، عضو هیئت مشاوره دیجیتال Amex، و استاد طراحی کمکی در FIT
نمایش نظرات