مهارت‌های پایه‌ای طراحی گرافیک که توسعه دهندگان وب باید بدانند

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

تفاوت بین یک طراح وب با یک توسعه دهنده وب این است که یک طراح وب آن چیزی را که قرار است سایت نمایش دهد، طراحی می‌کند و توسعه دهنده وب شخصی است که آن را با کد (HTML ، CSS ، Java و موارد دیگر) می سازد.

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

توسعه دهندگان وب می توانند هر چیزی که یک طراح وب از نظر بصری ایجاد می‌کند را کدگذاری کنند. اما توسعه دهندگان وب برای بهبود عملکرد خود باید برخی از مهارت‌های پایه‌ای طراحی را بدانند.

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

اینها اصول طراحی گرافیک هستند که همه توسعه دهندگان وب باید بدانند. هرگز برای یادگیری چیزهای جدید دیر نیست!

مبانی طراحی گرافیک برای توسعه دهندگان وب

ترکیب بندی (Composition)

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

شبکه ها (grids)

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

تعادل (balance)

تعادل به چگونگی تعادل همه عناصر در فضای بصری با یکدیگر و پس زمینه اشاره دارد. اندازه و فاصله بین عناصر باید تعادل بینایی داشته باشد. شبکه ها نیز کمک بزرگی برای این امر هستند!

تضاد (contrast)

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

سلسله مراتب (Hierarchy)

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

نام تجاری (Branding)

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

تایپوگرافی (Typography)

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

رنگها (colors)

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

اصول گشتالت (Gestalt Principles)

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