۵ اصل کلیدی طراحی وب سایت خوب و جذاب

شروع طراحی یک سایت بزرگ همیشه از یک طرح اولیه آغاز می شود ، اما آنچه که می تواند این طرح را به یک پروژه عالی تبدیل کند ، توجه به جزئیات است.

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

برای پروژه بعدی خود در مورد رنگ ها ، سایه ها ، متن ها ، آیکن ها و دیگر عناصر و شبکه بندی و طرح بندی پروژه خود به خوبی فکر کنید و در نظر بگیرید که باید از هر عنصر در چه جاهایی استفاده کنید!

۱- رنگ و سایه

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

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

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

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

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

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

yeti

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

پس محل و زاویه سایه ها را به درستی انتخاب کنید.

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

نکاتی که می توان در هنگام انتخاب رنگ در نظر داشته باشیم :

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

وب سایت هایی مانند ColourLovers مکانی خوب برای پیدا کردن پالت های رنگی است. زیرا بعضی از رنگ ها به خوبی در کنار یکدیگر نمی نشینند و این وب سایت کمک فوق العاده ای برای پیدا کردن رنگ های مکمل و متضاد است و با گشت و گذار در آن می توانید رنگ بندی مورد نظر خود را پیدا کرد.

اگر هم می خواهید وب سایت های نمونه ای که از رنگ بندی متفاوت و زیبایی در کارهای خود استفاده کرده اند ، بهره مند شوید که می توان به سایت Best Web Gallery مراجعه کرده و ویترینی از طراحی های برتر را مشاهده کرد.

quommunication

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

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

برای اینکه این گزینه بیش از این طولانی نشود ، شما را دعوت می کنم تا دو پست مرتبط “ راهنمای انتخاب و ترکیب رنگ در طراحی وب ” و “ ۱۰ ابزار آنلاین ایجاد پالت رنگ برای طراحان ” را در جهت تکمیل شدن این بخش مطالعه کنید.

۲- متن و فونت

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

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

wilsonminer

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

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

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

resonate

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

۳- المنت ها و آیکون ها

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

می توان در هر بخش وب سایت مثل فرم ثبت نام ، عضویت ، خبرنامه ، منوی ناوبری ، فوتر ، سایدبار ، بین متن ها و غیره از آیکون ها و فایل های گرافیکی استفاده مفید کرد.

combadi

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

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

stationstreet

۴- طرح بندی یا Grid

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

شروع طراحی با یک فریمورک یا چارچوب بندی ( Grid ) مناسب می تواند ساختاری مناسب برای کار راحتتر را در اختیار شما قرار دهد.

elevn

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

یکی از استانداردهای مورد استفاده در طراحی وب سایت با استفاده از شبکه ( Grid ) ، شبکه ۹۶۰px است .این شبکه بر مبنای عرض استاندارد ۹۶۰px برای طراحی وب سایت ، طراحی شده است . برای مطالعه بیشتر در پست “ بررسی و آموزش فریم ورک ۹۶۰Grid  ” بیشتر در مورد این مبحث بحث کرده ایم.

coop

۵- فضای سفید

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

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

white design

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

استفاده از فضای سفید یا به عبارت دیگر فضای راهنما در طراحی سایت دارای مزایایی است:

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

نتیجه

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

شما فکر می کنید چه اصول دیگری را می توان به موارد بالا اضافه کرد؟

نوشته شده توسط سامان (وب هاب)

درباره نویسنده

"وب مثبت" فعالیت خود را از سال 91 آغاز کرد... شما در "وب مثبت" شاهد محتوای مرتبط با وب، شامل "آموزش اصول طراحی و مدیریت وب سایت" و همچنین "آخرین اخبار و حاشیه های دنیای وب" خواهید بود. WebMosbat.IR را به یاد داشته باشید...

نوشته های مرتبط