نکاتی برای طراحی یک سایت حرفه ای

یک طراحی سایت حرفه ای ابتدا از یک طرح کشیده شده روی کاغذ شروع می شود، و سپس به جزئیات و ریزه کاری ها ختم می شود.

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

رنگ و سایه

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

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

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

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

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

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

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

متن و فونت

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

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

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

به یاد داشته باشید، چشم تقریبا همیشه از بزرگ‌ترین و پررنگ‌ترین متن به کوچک‌ترین متن حرکت می‌کند.

آیکون ها و عناصر

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

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

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

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

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

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

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

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

ترازبندی و گریدها

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

با یک گرید بزرگ به عنوان یک چارچوب شروع کنید. یک سیستم گرید خوب نه تنها ساختار را ارائه می دهد، بلکه باید در دنیای امروزی و پر رقابت سایت ها، سازگار و ریسپانسیو نیز باشد.

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

سپس به تراز کردن متن فکر کنید. متن می‌تواند به یکی از چهار روش - چپ چین، وسط چین، راست چین و یا از دو طرف، همتراز شود.

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

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

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

دکوراسیون: دشمن طراحی سایت

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

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

طراحان واقعی هیچگاه کارهای اضافه زیر را انجام نخواهند داد:

• استفاده از متن به عنوان یک جزء گرافیکی برای پر کردن قالب گرافیکی سایت. بلکه قالب سایت باید در خدمت متن باشد نه برعکس. هر وقت در سایتی با متن هایی بی معنی، اضافه و بدون کاربرد در قالب سایت مواجه شدید بدانید با یک نقاش سایت طرف هستید و نه یک طراح سایت.
  
  
• افزودن تصاویری به سایت که هیچ هدفی را دنبال نمی کنند و تنها برای خالی نبودن عریضه اضافه شده اند. چنین تصاویری نه تنها هیچ ارزشی را به سایت اضافه نمی کنند بلکه باعث نامفهوم شدن بیشتر محتوای سایت خواهند شد.
  
  
• استفاده از اجزای گرافیکی بی ربط که هیچ ارتباط خاصی با دیگر اجزای اطراف خود ندارند. border ها، background ها، div ها و فضاهای خالی ای که هیچ معنا یا ارتباطی با محیط اطراف خود ندارند، یکی از علائم آن است که شما با یک طراح گمراه کننده طرف هستید.
  
  
• و از همه مهمتر اینکه: طراحان واقعی وب سایت هرگز نباید ادای یک طراح دکوراسیون را در بیاورند.

طراحی دکوراسیون چیست؟

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

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

چه وقت می توان از دکوراسیون در طراحی سایت استفاده کرد؟

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

آیا موافق من هستید؟ در هر دو صورت می توانید از بخش نظرات، برای بیان دیدگاه های خود استفاده کنید.

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