منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۱ دقیقه

طراحی گرافیک (Graphic Design) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

بیشتر طراحان محصولی که می‌شناسم از گرافیک آمده‌اند. و تقریباً همه‌شان یک دورهٔ نامطبوع را گذرانده‌اند: چیزی می‌سازند که در فیگما بی‌نقص است و در محصول واقعی از هم می‌پاشد.

این مقاله دربارهٔ همان دوره است — اینکه کدام بخش از مهارت گرافیک عیناً به رابط منتقل می‌شود، کدام بخش اصلاً منتقل نمی‌شود، و چرا.

تعریف و تاریخچه

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

ریشه‌اش بسیار قدیمی است — منبع تا نقاشی‌های غار با قدمت ۱۷ هزار سال و هیروگلیف مصری عقب می‌رود — اما خودِ اصطلاح در دههٔ ۱۹۲۰ و در صنعت چاپ ساخته شد. و همین نکته‌ای است که بعداً به آن برمی‌گردم: واژگان این حرفه در دنیای چاپ شکل گرفته است.

اصول و عناصر

• - سلسله‌مراتب بصری و ساختار چیدمان صفحه
• - حروف‌نگاری
• - تقارن و توازن
• - جریان، تکرار و الگو
• - نسبت طلایی (۱ به ۱٫۶۱۸) و قاعدهٔ یک‌سوم
• - نظریهٔ رنگ و طرح‌های رنگی
• - معماری اطلاعات و دسترس‌پذیری
• - توجه به فرهنگ مخاطب

و حوزه‌های کارش: طراحی نشان، برندسازی، تبلیغات، بروشور، وب‌سایت، اپلیکیشن موبایل، طراحی حرکت و مواد بازاریابی.

در برابر طراحی تجربهٔ کاربری

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

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

منبع John Maeda را نقل می‌کند که طراحی را پاسخ به یک مسئله و هنر را پرسشی دربارهٔ آن می‌داند؛ و به پژوهش دانشگاه بازل و گوگل اشاره دارد که آدم‌ها جذابیت بصری را در ۱۷ تا ۵۰ میلی‌ثانیه قضاوت می‌کنند — یعنی پیش از آنکه چیزی خوانده شود.

چه چیزی منتقل می‌شود

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

• - سلسله‌مراتب بصری. اینکه چشم اول کجا برود و بعد کجا — این هستهٔ مشترک هر دو حرفه است.
• - حروف‌نگاری. اندازه، وزن، فاصلهٔ سطر، طول سطر.
• - ترازبندی و ریتم فاصله‌ها. و این‌جا گرافیک معمولاً از رابط جلوتر است، نه عقب‌تر.
• - کنتراست و کاربرد رنگ.
• - حساسیت به فضای منفی.

و چه چیزی منتقل نمی‌شود

این بخش هم افزودهٔ مترجم است و مهم‌ترین بخش این مقاله. پنج فرض در واژگان چاپی هست که در رابط برقرار نیستند — و چون فرضاند، معمولاً کسی به آن‌ها فکر نمی‌کند تا وقتی که کار از هم بپاشد:

• - قاب ثابت نیست. پوستر یک اندازه دارد؛ صفحه هزاران اندازه. نسبت طلایی و قاعدهٔ یک‌سوم هر دو یک قاب معلوم را فرض می‌گیرند، و چیدمان واکنش‌گرا اصلاً قاب معلومی ندارد. این تنها یکی از این فهرست نیست که بی‌فایده شود؛ به‌طور فعال گمراه‌کننده است، چون در یک اندازه درست است و در بقیه نه.
• - محتوا ثابت نیست. در چاپ، متن را طراح می‌چیند و می‌داند چقدر است. در رابط، همان جعبه باید با نام یک‌کلمه‌ای و نام چهل‌کاراکتری، با صفر آیتم و پانصد آیتم، و در حالت خالی و در حال بارگذاری و در خطا درست به‌نظر برسد. در گرافیک شما یک ترکیب می‌سازید؛ در رابط یک قاعده می‌سازید که هزار ترکیب تولید می‌کند.
• - یک‌بار دیده نمی‌شود. پوستر را یک‌بار می‌بینند؛ ابزار را روزی چهل بار باز می‌کنند. و چیزی که در بار اول لذت‌بخش است — تازگی، غافلگیری، حرکت — در بار چهلم آزاردهنده است. این تفاوت، بیشترین اختلاف سلیقه میان طراح گرافیک و طراح محصول را توضیح می‌دهد.
• - هیچ‌چیز در بروشور لازم نیست فشاردادنی به‌نظر برسد. کل بحث افردنس در چاپ موضوعیت ندارد، چون کاربر قرار نیست کاری بکند.
• - رندر را شما کنترل نمی‌کنید. در چاپ، آنچه می‌بینید همان است که چاپ می‌شود. در رابط، قلم ممکن است بارگذاری نشود، کاربر ممکن است اندازهٔ متن سیستم را بزرگ کرده باشد، حالت تاریک ممکن است روشن باشد، و صفحه ممکن است ۲۰۰ درصد بزرگ‌نمایی شده باشد. طرح شما یک پیشنهاد است، نه یک نتیجه.

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

و آنچه رابط به گرافیک بدهکار است

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

• - ترازبندی نوری، نه ریاضی. یک آیکون مثلثی که ریاضی وسط جعبه است، نوری کج به‌نظر می‌رسد. طراح گرافیک این را می‌بیند؛ طراح رابطی که فقط به عدد نگاه می‌کند نمی‌بیند.
• - ریتم فاصله‌ها. اینکه فاصله‌ها یک نسبت داشته باشند نه اینکه صرفاً «کافی» باشند.
• - خویشتن‌داری. توانایی حذف‌کردن، که در سنت گرافیک بسیار جدی‌تر آموزش داده می‌شود.
• - و اینکه چیزی خوب به‌نظر برسد، خودش یک کارکرد است. همان ۱۷ تا ۵۰ میلی‌ثانیه‌ای که منبع می‌آورد، پیش از خواندن هر کلمه‌ای اتفاق می‌افتد — پس زیبایی اینجا تزئین نیست، اولین پیامی است که فرستاده می‌شود.

و به همین دلیل، توصیهٔ منبع دربارهٔ «توجیه انتخاب‌های سبکی» را باید دوطرفه خواند. درست است که نباید «هنر برای هنر» ساخت — اما «نتوانستم توجیهش کنم» هم دلیل خوبی برای زشت‌ساختن نیست. بخشی از کیفیت بصری واقعاً به قضاوت تربیت‌شده برمی‌گردد و همیشه به کلمه درنمی‌آید.

یک نکتهٔ فارسی

این بخش هم افزودهٔ مترجم است. سنت گرافیک در ایران قوی است — خوش‌نویسی، پوستر، جلد کتاب — و بسیاری از طراحان رابط از همین سنت آمده‌اند. اما دقیقاً به این دلیل، فرضِ «قاب ثابت» اینجا از جاهای دیگر ریشه‌دارتر است.

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

قاعده‌ای که از این بیرون می‌آید و به همهٔ این بحث تعمیم می‌یابد: هر تصمیم بصری‌ای که به یک عرض مشخص وابسته است، در رابط یک بدهی است نه یک دارایی. در تیتر بزرگ و ثابت می‌شود ازش استفاده کرد؛ در متن بدنه نه.

جمع‌بندی

• - طراحی گرافیک ساختن محتوای بصری برای انتقال پیام است، با سلسله‌مراتب و چیدمان و حروف‌نگاری و تصویر؛ ریشه‌اش کهن است اما خود اصطلاح در دههٔ ۱۹۲۰ و در صنعت چاپ ساخته شد.
• - در برابر تجربهٔ کاربری: گرافیک بر دقت پیکسلی و پیام تمرکز دارد و تخصصی است؛ تجربهٔ کاربری بر پژوهش و کلیت تجربه و چندرشته‌ای است — و در بافت UX، زیبایی باید هدفی کارکردی را بخدمت بگیرد.
• - منتقل می‌شود: سلسله‌مراتب بصری، حروف‌نگاری، ترازبندی و ریتم فاصله‌ها، کنتراست و رنگ، و حساسیت به فضای منفی.
• - منتقل نمی‌شود: قاب ثابت (و با آن نسبت طلایی و قاعدهٔ یک‌سوم)، محتوای ثابت، دیده‌شدن یک‌باره، بی‌ربط‌بودن افردنس، و کنترل رندر.
• - و جمعشان در یک جمله: در چاپ محصول نهایی را طراحی می‌کنید؛ در رابط سامانه‌ای را طراحی می‌کنید که محصول نهایی را تولید می‌کند.
• - اما رابط هم به گرافیک بدهکار است: ترازبندی نوری، ریتم فاصله‌ها، خویشتن‌داری، و این واقعیت که خوب به‌نظر رسیدن خودش کارکرد است — چون قضاوت بصری در ۱۷ تا ۵۰ میلی‌ثانیه و پیش از خواندن رخ می‌دهد.
• - و برای فارسی: هر تصمیم بصری وابسته به عرض معلوم — مثل کشیده — در رابط بدهی است نه دارایی.