دوره رایگان آموزش طراحی بصری - قسمت اول: مرور کلی

این پست، شروع یک سری مقالات مرتبط به هم هستن که در مورد آموزش طراحی بصری هست. یه دوره باکیفیت (سعی می‌کنیم) و رایگان، پس با به اشتراک گذاری و دادن نظر بهمون انرژی بدین که این راه رو باهم طی کنیم!

• قسمت اول: مرورکلی
• قسمت دوم: یکپارچگی
• قسمت چهارم: تعادل
• قسمت سوم: تراز
• قسمت پنجم: سلسه مراتبی
• قسمت ششم: تضاد
• قسمت هفتم: نسبت
• قسمت هشتم: فضای منفی

طراحی بصری درباره ساخت و ایجاد ثبات در زیبایی عمومی یک محصول است. برای ایجاد استایل زیبا در یک وبسایت یا اپ، ما با اصول عناصر طراحی دیداری، مثل چینش اونا طبق مبانی طراحی کار می‌کنیم. این عناصر و اصول با هم اجزای سازنده طراحی بصری رو تشکیل میدن. داشتن درک درستی از اونها در طراحی بصری هر محصولی حیاتی هستش.

اینجا، ما عناصر طراحی رو معرفی میکنیم: خط، شکل، فضای منفی یا سفید، حجم، ارزش رنگ (color value)، (نوع) رنگ و بافت. درحالی که بررسی دقیق هر یک از این عناصر معمولا بخش مهمی از کارای روزمره طراح نیست، اصول طراحی ( منظور اینکه چطوری عناصر رو کنار هم بچینیم تا صفحات به شکلی بهینه بسازیم)، نقش حیاتی داره. یادگیری اینکه چطور به یکپارچگی، گشتالت، وجود سلسله مراتب، تعادل، کنتراست، مقیاس، چیرگی و سادگی برسیم، باعث کاهش دوباره کاری و اتلاف زمان میشه. همچنین نحوه ی استفاده از این عناصر کاربردی رو هم برای ایجاد بیشترین تاثیر یاد می گیرید.

عناصر طراحی دیداری

هر محصولی (از محصولات نرم افزاری مانند وبسایت و اپ ها گرفته تا محصولات سخت افزاری مثل دستگاه تستر و سشوار ) میتونن به عناصر پایه در طراحی دیداری تجزیه بشن، همون طور که آلان هاشیمتو پرفسور طراحی گرافیک و هنر کامپیوتری در دانشگاه یوتا و آقای مایک کلایتون مدیر و استاد هنرهای گرافیک کامپیوتری تو کتابشون، "مبانی طراحی دیداری با رویکرد دیجیتال". میگن: این عناصر ابزارهای پایه هستند که ما طراحان در کارهای روزمره مون ازشون استفاده میکنیم و داشتن درک خوبی از اونا، قطعا پیش نیاز این شغل هست.

خط

خطوط دو نقطه رو به هم وصل میکنن، و پایه ترین عنصر طراحی دیداری هستن. ما از اونا برای ساخت شکل ها استفاده میکنیم و با تکرار اونها، میتونیم الگویی رو شکل بدیم که بافتها رو بسازن.

خطها ویژگیهای متنوع زیادی دارن که بهمون اجازه میدن حالات زیادی رو منتقل کنیم. برای مثال، خطوط میتونن ضخیم یا باریک، مستقیم یا خمیده، پهنای یکسان یا متنوع و هندسی باشن. مثل اینکه با خط کش یا پرگار کشیده شده باشن یا ارگانیک باشن. مثل اینکه با دست کشیده شده باشن.

همچنین خطوط می توانند بر این کاربرد نیز دلالت کنند: ایجاد یک ارتباط نامرئی بین سایر عناصر. به عنوان مثال در لوگو بنیاد طراحی تعامل ، کلمات «بنیاد طراحی تعامل» (Interaction Design Foundation یا IDF) اطراف درخت یه شکل دایره ی مانند رو رسم کرده.

شکل

اشکال، ناحیه های بسته‌ای هستند که معمولا توسط خطوط شکل میگیرند (علیرغم اینکه اونا ممکنه که رنگ و مقدار و بافت مختلف داشته باشن) یک شکل دو بعد داره، عرض و طول.

ما می توانیم با استفاده از خطوط (مانند شکل بالا) یا با استفاده از تفاوت در رنگ ، بافت یا غلظت رنگ، اشکالی را ایجاد کنیم.

ما آدما تمایل داریم که اشیا رو با شکل های پایه شون تشخیص بدیم، و برای درک بیشتر فقط روی جزئیات (مثل خطوط، مقادیر، رنگ ها و بافت ها) تمرکز کنیم. به همین دلیل، اشکال عناصری حیاتی هستند که ما طراحان برای برقراری ارتباط سریع و موثر ازشون استفاده می‌کنیم.

فضای منفی / سفید

فضای منفی تحت عنوان فضای سفید نیز شناخته میشود، که به ناحیه خالی اطراف یک شکل مثبت گفته میشه. بین شکل و فضای اطرافش ارتباطی وجود دارد که با عنوان شکل و زمینه شناخته میشه. بهتره بدونیم که زمانی که داریم یک شکل مثبت رو طراحی می‌کنیم، درهمان حال داریم فضای منفی رو هم می‌سازیم. فضای منفی هم به اندازه فضای مثبت مهم هست برای اینکه بهمون کمک میکنه که مرز فضای مثبت رو تعریف کنیم و تعادل رو به ترکیب‌مون بیاریم.

بعضی از طرح‌ها از فضای منفی برای ساخت جلوه های جذاب دیداری استفاده می‌کنن. برای مثال، لوگو World Wide Fund for Nature (WWF) از ترکیب فضای مثبت و منفی برای ایجاد تصویر پاندا استفاده کرده.

حجم

حجم به اشکال سه بعدی گفته میشه که طول، عرض و ارتفاع دارن. ما به ندرت از حجم برای طراحی دیداری استفاده میکنیم، به دلیل اینکه بیشتر محصولات دیجیتال در فضای دو بعدی نمایشگرها دیده میشن با این حال بعضی از اپ ها و وب سایتها از مدل ها و گرافیک های سه بعدی استفاده میکنن. از لحاظ فنی عکس های سه بعدی که روی صفحه نمایش دو بعدی دیده میشن هنوز دو بعدی هستن.

ارزش رنگی

به زبان ساده، تیرگی یا روشنی رو معین میکنه.

یک طرح با تضاد بالای میزان رنگ (به این معنی استفاده از مقادیر تیره و روشن) باعث وضوح بیشتر طرح میشه اما تو طرح دیگه ممکنه با تضاد رنگی کمتر اصلا احساس نشه و نامحسوس باشه. ما همچنین می تونیم از ارزش رنگی برای شبیه سازی حجم در فضای دو بعدی استفاده کنیم برای نمونه، با استفاده از رنگ های روشن تر که که رو شکل میفته و زوایاش رو مشخص میکنه و رنگ تیره هم رو زمین میفته و سایه ایجاد میکنه.

رنگ

رنگ یک عنصر از نور هست. تئوری رنگ یک شاخه از طراحی است که برروی ترکیب و کاربرد رنگهای مختلف در طراحی و هنر متمرکز شده است. در تئوری رنگ، یک تفاوت واضحی بین رنگ هایی که افزایشی ترکیب میشن با رنگ هایی که کاهشی ترکیب میشن، وجود داره.

در نقاشی ?، رنگ‌ها کاهشی ترکیب می شوند به دلیل اینکه نور توسط رنگ دانه ها جذب میشه، وقتی رنگ دانه های مختلف با همدیگه ترکیب می شن، نور بیشتری جذب میکنن، و رنگ نهایی تیره تر خواهد شد. از ترکیب کاهشی فیروزه ای Cyan، ارغوانی Magenta و زرد Yellow، رنگ مشکی blacK بدست میاد. ترکیب کاهشی در رنگهای نقاشی و چاپ، سیستم رنگی CMYK رو میدن بهمون.

در طراحی دیجیتال، که محصول در یک صفحه نمایش نشان داده میشه، رنگ ها افزایشی ترکیب میشن، چون که نمایشگر ها نور رو ساطع میکنند و بطور طبیعی رنگ ها در هم اغام میشن، وقتی رنگ های مختلف باهم روی نمایشگر ترکیب میشن، رنگ روشن‌تری بدست میاد که نتیجه‌ش ساطع شدن بازه وسیع‌تر و روشن تر نور از صفحه ی نمایشه. یک ترکیب افزایشی از قرمز Red، سبز Green و آبی Blue و روی نمایشگر، رنگ سفید رو ایجاد میکنه. ترکیب افزایشی از رنگها روی صفحات دیجیتالی موجب ایجاد سیستم رنگی RGB میشه.

ما از رنگها در طراحی بصری برای رسوندن احساسات و افزودن تنوع و جذابیت به طرح، تفکیک بخش های مختلف صفحه و متفاوت سازی کارمون از رقیبامون استفاده می‌کنیم.

بافت

به کیفیت سطح یک شی بافت گفته میشه.

به عنوان طراح، می‌تونید با دو نوع از بافت ها کار کنید: بافت ملموس، که می‌تونید بافت رو (با حس لامسه) احساسش کنید و ناملموس که فقط می‌تونید ببنیدش چون قابل احساس نیست. بیشتر طراحان دیداری از بافت نامحسوس استفاده میکنن، چون که نمایشگر ها نمی تونن بافت ها رو ملموس کنن!

آیکن‌های طراحی شده iOS 6 و نسخه های قبلیش از بافت شیشه ای تقلید کردن که کاربر را به ضربه زدن ترغیب کنه. بعد اپل، طی حرکتی بافت لنین رو برای پس زمینه ی رابط کاربریش معرفی کرد. با معروف شدن طراحی تخت (فلت) (یه سبک طراحی مینیمالیستی (ساده‌گرایانه) که روی ساده بودن فضا و دو بعدی بودنش تاکید داره) استفاده از بافت در طراحی دیداری از اواسط سال 1390 خیلی کم تر شده هرچند که هنوزم میتونن خیلی مفید باشن.

اصول طراحی

عناصر طراحی بصری (خط.، شکل، فضای منفی یا سفید، حجم، میزان رنگ، نوع رنگ و بافت) بلوکهای سازنده زیبایی محصول هستند. در مقابل، اصول طراحی بهمون میگن که چطور این عناصر رو برای رسیدن به بهترین نتایج کنارهم بزاریم. بطور کلی بعضی از این اصول به هم مرتبط و بعضی هاشونم مکمل همن.

حالا چقدر این اصول طراحی برای شغل طراح دیداری مهم هستن؟ استاد پژوهش و توسعه در بنیاد مدیریت علوم موسسه William Lidwell، با استناد به کتاب اصول طراحی جهانی که میگه:

“The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles.” – William Lidwell

بهترین طراحان بعضی وقتا اصول طراحی رو نادیده می‌گیرن. و زمانیکه این اتفاق میفته، مجبور میشن هزینه ی این سرپیچی رو بپردازن تا طرح به سرانجام خوبی برسه و اشتباهات جبران بشن. حتی اگر همچنان مطمئنید که به روش خودتون بهترین نتیجه رو میگیرید، بازم بهتره که این اصول رو گوشه ی ذهنتون نگه دارید. - ویلیام لیدول

یکپارچگی

یکپارچگی یعنی ایجاد هارمونی بین تمام اجزاء موجود در صفحه. وقتی یک عناصر در یک صفحه به شکل دیداری یا مفهومی، مرتب چیده شده باشند حس یکپارچگی به بیننده القا میکند.

وقتی ما داریم وبسایت رو طراحی می‌کنیم، می تونیم از گرید (Grid) برای بوجود آوردن حس یکپارچگی استفاده کنیم. چون عناصری که در یک گرید سازماندهی شدن یک چینش مرتب رو دنبال می‌کنند. ما به گرید نیاز داریم تا بین یه طراحی خسته کننده و شلوغ پلوغ، تعادل برقرار بشه.

گشتالت

گشتالت به تمایل ما به درک مجموع بخش های یک چیز در مقابل درک هر بخش بصورت تکی، اشاره میکنه. چشم و مغز آدما تصویر یک جسم رو بصورت یکدست پردازش میکنه تا بصورت یک تصویر با جزئیات انفرادی و تکی. در بیشتر مواقع ما کلیت یک شی رو قبل از جزئیاتش درک می کنیم، ولی مثلا خط و بافت و عناصر دیگه شی قبل از درک کلی اون تو ذهن پردازش نمیشه!

لوگو WWF ، که قبلتر دیدیم، یک مثال مثال از استفاده اصول گشتالت برای ساخت طراحی جذابه. با قرار دادن عناصر مختلف پاندا در کنار هم بصورت هوشمندانه، طراح از تمایل ما برای تصویر کردن یک پاندای یکدست و کامل استفاده کرده و به جای پردازش اجزا بصورت تک به تک، طرحی کامل از آن در مغز شکل می گیره.

گشتالت یه اصل مهمه، برای نمونه، برای جداسازی قسمت های مختلف یک وبسایت با افزایش فضای سفید بین بخش های مختلف. به عنوان طراح، ما باید مطمئن بشیم که قسمت های مختلف وبسایت (برای مثال اگه اونایی که به یکی دیگه نزدیک باشن، و شکل یکسان و یا اندازه مشابه داشته باشن) که توسط اصول گشتالت باهم گروه شدن که حتما باهم باید شباهت مفهومی داشته باشن. گروه بندی تصادفی عناصری که از لحاظ مفهومی باهم مشابه نیستن باعث گیج شدن کاربرا میشه.

در ادامه دوره وارد جزئیات بیشتری میشیم.

ساختار سلسله مراتبی

ساختار سلسله مراتبی، نشان دهنده ی تفاوت عناصر از نظر اهمیت و اولویت بندی آن هاست. رنگ و اندازه متداول ترین راه های ایجاد سلسله مراتب هستن (برای مثال با برجسته کردن دکمه اصلی، یا استفاده از فونت های بزرگتر برای سر برگ ها) در کل قراره که برای موارد بالای صفحه نسبت به موارد پایین صفحه اهمیت بیشتری از نظر سلسله مراتب بصری بدیم.

تعادل

تعادل از اصول بسیار مهمیه که نحوه توزیع یکسان عناصر طراحی رو مشخص می کنه. تعادل باعث میشه طرح آروم، پایدار و طبیعی بنظر برسه و درحالیکه طراحی نامتعادل حس گیجی و بدی به کاربر میده.

تعادل میتونه به کمک ایجاد تقارن تو طراحی برقرار بشه. برای نمونه، داشتن صفحه وب که متن و عکس هاش راست چین شدن. با این حال، شما همچنین میتونید تعادل رو بدون تقارن هم در طراحی ایجاد کنید که به عنوان تعادل نامتقارن نیز شناخته میشه. در تکنیک تعادل از نوع نامتقارن، از عناصر با سایزهای متفاوت به نحوی که منجر به یکپارچگی نهایی طراحیمون بشه استفاده میکنیم. یعنی یه نقطه در مرکز طراحی فرض می کنیم و عناصر رو حول اون به طوریکه به تعادل برسن، توزیع میکنیم.

تضاد یا کنتراست

ما از تضاد برای اینکه یه عنصری بیشتر تو چشم بیاد استفاده می کنیم، که اینکار با دستکاری رنگ، ارزش رنگ، اندازه و سایر فاکتورهای دیگ انجام میشه. برای نمونه، به عنوان یک طراح (فرقی نمیکنه طراح لوگو هستیم یا رابطه کاربری و ...) ما اغلب از رنگ قرمز ? برای اینکه یک عنصر مشخص رو برجسته کنیم، استفاده میکنیم. در سیستم عامل آی او اس، رنگ قرمز در عملکرد حذف ظاهر میشه و بهمون هشدار میده این کاری که انجام میدی (غالبا) غیر قابل بازگشت هست. در مقابل رنگ سبز ? غالبا برای عملکرد مثبت (حداقل در فرهنگ غربی) مانند ادامه دادن و قبول کردن استفاده میشه.

چیزی که قابل توجه هست اینه که وقتی ما میخوایم در طراحی مون تضاد ایجاد کنیم، نمی تونیم بیخیال معنی رنگ ها در فرهنگ های مختلف بشیم. اگه شما برای یه مشتری در کشور دیگه طراحی میکنید، در موردش یاد بگیرید و کارتون رو طوری تغییر بدین که از ترجیحات فرهنگی اونجا پیروی کنه. برای مثال، از خوتون بپرسید که - آیا رنگ قرمزتو این کشور به معنیه خوش شانسیه یا عصبانیت؟ یا رنگ مشکی به درد کسب و کار میخوره یا برای مرگ و عزا؟

مقیاس

مقیاس در مورد اندازه های نسبی عناصر در یک طراحی هست. با استفاده از مقیاس برای بزرگ کردن یک عنصر نسبت به بقیه عناصر کنارش، شما می‌تونید اونو مهمتر جلوه بدید. با این کار نه تنها باعث میشه که یک عنصر خودشو نشون بده بلکه میتونید با مقیاس یک حس عمق رو هم ایجاد کنید (بدیهیه که چیزایی که به چشم آدم نزدیک ترن بزرگتر دیده میشن) مقیاس های اغراق شده در عکسها میتونه اون ها رو نمایشی و جذاب کنه.

احاطه یا چیرگی

چیرگی باعث بوجود اومدن تمرکز روی یک عنصر میشه. ما میتونیم از رنگ، شکل، تضاد، مقیاس و یا موقعیت برای رسیدن به چیرگی استفاده کنیم. برای نمونه، در بیشتر وبسایت ها یک عکس بزرگ hero image وجود داره، که از چیرگی استفاده شده تا نظر کاربر رو به شکل طبیعی جذب کنه.

زمانی که روی طراحی بصری کار می‌کنیم، باید مطمئن بشیم که استفاده از چیرگی هنوزم لطمه ای به یکپارچگی و تعادل وبسایت نمیزنه در غیر اینصورت، باعث گیجی و تجربه ای ناخوشایند برای کاربران میشه.

مثال هایی برای نشون دادن عناصر و اصول طراحی

با مدنظر داشتن عناصر و اصول طراحی بصری، ما چند وبسایت رو تحلیل میکنیم که ببنیم اونا چطور از این اصول استفاده کردن و باعث ایجاد یه طراحی خوب شدن.

صفحه اول گوگل

صفحه اول گوگل یکی از پربازدیدترین صفحات دنیاست. یکی از دلایل طراحی خوبش برمی‌گرده به سادگی صفحه، اما اینجا عامل های دیگه ای رو بررسی می‌کنیم که باعث شده این صفحه فوق العاده باشه:

• چیرگی: لوگو بزرگ گوگل و باکس جستجو باعث شده به فضای صفحه چیره بشه، که موجب جذب تمرکز مخاطب به مرکز صفحه درست جایی که لوگو قرار گرفته، میشه.
• تضاد + رنگ: لوگوی گوگل از رنگ های اصلی براق استفاده کرده و اونا رو به خوبی باهم ترکیب کرده که باعث جذابیت بصری لوگو شده. خود لوگو هم که تضاد کافی رو با پس زمینه سفید داره، باعث شده از صفحه جدا بشه.
• شکل: باکس جستجو از شکل مستطیلی استفاده کرده تا فیلد سرچ قابل قابل فهم باشه و اونو خیلی کاربردی کرده.
• فضای منفی: ضفحه اول گوگل بیشترش از فضای منفی ساخته شده، که باعث شده که باکس جستجو — عملکرد اصلی صفحه (در مرکز توجه) باشه. فضای منفی همچنین به خوبی برای صفحه کار می‌کنه که درست به عنوان یک صفحه سفید کاغذ به نظر می‌رسه قبل اینکه کاربر عبارت جستجو شو وارد کنه.
• تعادل: صفحه تقریبا به صورت عمودی قرینه هست، که موجب یک حسی از تعادل شده نگاه کرده به کاربرا حس آرامش و لذت میده ☺.

صفحه اول سایت کوارتز

کوارتز یک شرکت خبری دیجیتالی هست که بر بستر موبایل فعالیت می‌کنه و دارای مخاطبین جهانی است که در سال 2012 توسط آتلانتیک مدیا، راه اندازی شده. این شرکت صفحه اصلی بولد و چشم گیری داره که یه جورایی ویترین اخبار برگزیده‌ش محسوب میشه. اینجا عناصر و اصول طراحی که گفتیم بررسی می‌کنیم که چطور کنار هم استفاده شدن:

چیرگی: خبر اصلی سریعا چشممون رو می‌گیره چراکه فونتی بزرگ و ضخیم داره که باعث چیرگیش روی صفحه میشه.

سلسله مراتب بصری: این صفحه از یک ساختار سلسله مراتب بصری واضحی برای رسوندن اهیمت عناصر مختلف استفاده کرده. خبر اصلی، با تیتر بزرگ و درشت، بالاترین سطح سلسله مراتب نسبت به سایر عناصر رو داره. برای خبر فرعی، که زیر خبر اصلی قرار داده شده، فونت کوچک تر و سلسله مراتب پایین تری نسبت به خبر اصلی در نظر گرفته شده.

مقیاس و ارزش رنگ: صفحه اصلی وبسایت کوارتز با استفاده از مقیاس حرف کیو که ماسک خبر اصلی شده سریعا هویت وب سایت که اول کلمه کوارتز Quartz هست بهمون القا میکنه. با این حال، رنگ خاکستری کمرنگ حرف Q باعث شده که در پشت زمینه نامحسوس دیده بشه و بجاش تمرکز کلی بره به سمت تیتر خبر اصلی.

فضای منفی: بیشتر فضای صفحه اصلی منفی هست که به محتوا اجازه میده خودشو نشون بده و بدرخشه. وقتی ماوس روی تیتر خبر اصلی میره، حرف کیو پس زمینه ناپدید میشه، و فضای منفی رو با عکس خبر اصلی پر میکنه. این مثال از اینکه چطور فضای منفی میتونه یه نقش بی نظیری رو در جذابیت وبسایت ایجاد کنه.

یکپارچگی: کوارتز از یک سیستم گرید در وبسایتش ایجاد کرده که حس یکپارچگی بهمون دست میده. برای نمونه چهار خبر دارای فاصله های یکسان و پهنای برابری برخوردار هستن که باعث، ایجاد حس مرتبی و ساختارمند بودن وبسایت میشه.

جمع بندی

عناصر طراحی بصری، بلوک های اصلی ساخت یک محصول رو تشکیل میدن. با این که ما طراحان بصری نیازی به بررسی تک تک عناصر به شکلی دقیق در کار روزانه‌مون نداریم، اما اصول طراحی (اینکه چطوری عناصر رو کنار هم بزاریم که یک صفحات اپ رو بهینه بزنیم) نقش حیاتی تو کاری که انجام میدیم دارن. یاد بگیریم که چطور طرحی که میزنیم یکپارچگی، گشتالت، سلسله مراتب، تعادل، تضاد، مقیاس، برتری و تشابه داشته باشه، فوق العاده برای شمایی که طراحی بصری انجام میدید مهم هست.

پس استفاده از این عناصر به ترتیب:

• Line - خط
• Shape - شکل
• Negative space - فضای منفی
• Volume - حجم
• Value - ارزش رنگی
• Color - رنگ
• Texture - بافت

و در کنار هم بودن این اصول (که در ادامه دوره وارد جزئیات هر کدوم میشیم) :

• Unity - یکپارچگی
• Gestalt - گشتالت
• Hierarchy - ساختار سلسله مراتبی
• Balance - تعادل
• Contrast - تضاد
• Scale - مقیاس
• Dominance - چیرگی

باعث میشه دائما نتایج پیروزمندانه خلق کنید.

منبع

تمرین 1: شما هم الان با توجه به مطالبی که گفته شد یک وبسایت یا اپی که طراحی شو دوس دارید مثل نمونه گفته شده بررسی کنید و کامنت بزارید. ( اگه دوست داشتید به ایمیل m.sh1391 در جیمیل ارسال کنید!)

? نوبت شما‌ست!

اگه هر جایی تو مقاله ابهام یا سوالی دارید خیلی خوشحال میشم نظرات شما دوستان گرامی رو داشته باشیم تا کیفیت مقالات رو بالاتر ببریم. با اشتراک گذاری مقاله هم ازمون حمایت کنید تا این نوشته به دست افراد بیشتری برسه. ساعت ها طول کشیده که چندین نفر زمان شون رو بزارن تا این مقاله آماده بشه شما هم چند ثانیه وقتتون رو بزارید و لینک این مقاله رو share کنید!

پ. ن 1: جا داره از هم تیمی های گرامیم مریم کامرانفر و گلناز شهشهانی که زحمت ترجمه عکس‌ها و ویراستاری این مطلب رو کشیدن تشکر کنم.?