اصول طراحی قالب وب سایت

چگونه یک قالب زیبا برای وب سایت طراحی کنیم؟

اصول طراحی قالب وب سایت

با سلامی دوباره؛ این مقاله به نوعی اشتراک‌گذاری تجربیات طراحی قالب وب سایت با شماست. ابتدا به چالش‌های موجود برای برنامه‌نویسان UI اشاره می‌کنیم. سپس به ارائه راهکار خواهیم پرداخت.

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

برای طراحی قالب وب سایت چکار کنیم؟

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

  1.  تمرکز بر روی مدل و ساختار کلی وب سایت
  2.  تمرکز بر روی طرح گرافیکی قالب
  3.  تمرکز بر روی رنگ‌بندی قالب وب سایت

مثال خیاطی!

  1. یک پیراهن با برش اندامی و آستین کوتاه (مدل)
  2. انتخاب طرح راه راه با خطوط عمودی ظریف (طرح)
  3. انتخاب رنگ‌بندی (رنگ)

منظور از مدل و ساختار کلی وب سایت چیست؟

(مثال صفحه Home Page) هر یک از بخش‌های مستقل وب سایت یا اپلیکیشن خود را در نظر بگیرید. مانند اخبار، مقالات، سؤالات متداول، تماس با ما، پاصفحه و غیره. طبیعتاً هر یک از این بخش‌ها فضایی به صورت یک کادر به خود اختصاص می‌دهد. هر یک از این کادرها را یک بخش یا Section می‌گوییم. ابتدا مشخص کنید که کدام یک از سکشن‌های مختلف وب سایت باید در صفحه اصلی به نمایش درآیند. سپس اولویت و اهمیت نمایش آن‌ها را از بالا به پایین تعیین کنید. اگر فرضاً یک ساختار دو ستونی برای صفحه اصلی در نظر گرفته‌اید، این کار را برای محتوای ستون کناری هم باید انجام دهید. پس از حاصل شدن لیست اولویت‌ها، شما ساختار کلی و هدفمند محتوای وب سایت خود را تعیین کرده‌اید.

منظور از طرح گرافیکی قالب چیست؟

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

منظور از رنگ‌بندی قالب وب سایت چیست؟

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


مؤلف:
بازدید: 40
تاریخ:

نظر خود را به عنوان اولین دیدگاه بیان کنید.

نام: * کد امنیتی: *
دیدگاه شما: *


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