(توجه: با اینکه این مقاله نکات مفیدی دربر داره، اما دیگه قدیمی شده و ما سعی میکنیم به زودی بروزش کنیم. متاسفانه یا خوشبختانه، طراحی سایت خیلی سریع تغییر میکنه.)
آیا شما یه طراح های گرافیکی هستید که تو کار طراحی چاپی مهارت بالایی دارید (حتی اگه فروتن هستید و خودتون نمیگید)، مشتریهاتون عاشق کارتون هستن و ازتون خواستن یه سایت طراحی کنید. حتما به کیفیت و قدرت برندی که براشون طراحی کردین افتخار میکنید و دوست دارید همین برند رو با همین کیفیت روی سایت نمایش بدید.
ما قبلا تو دارکوب با چند تا شرکت گرافیکی مشهور کار کردیم و میخواهیم با توجه به تجربه های همکاری با این شرکتها، تو این مقاله بهتون چند تا راهنمایی ارائه بدیم:
یه خبر بد: نمیتونید طراحیتونو تو برنامه InDesign بسازید.
به نفع همه است که از InDesign استفاده نکنید. شاید انتخاب شما این باشه و قطعا برپایه سایت هم طراحی های خوبی ارائه میده، اما بازکردن عناصر سایت خارج از فایل PDF یا InDesign خیلی مشکله. رنگها شاید بپرن و اثرات لایه ها عوض بشن و ارتباطات طراحی که کلی روش کار کردید میتونه نابود بشه.
همه چیزهایی که نیاز دارید تو فتوشاپ هست. محورها، افکتها، شیب ها و غیره. در اصل InDesign برای کنترل کیفیت کارهای پرینتی بوجود اومده نه پیکسل های سایتها.
بعضی از طراح ها هم اول طراحی هاشونو تو InDesign آماده میکنن و بعد به فتوشاپ منتقلش میکنن. مشکلش اینه که معمولا توسعه دهنده ها به عناصر خام طراحی نیاز دارن که مشکلات طراحی جدید رو اصلاح کنن یا تغییراتی رو که مشتری طی فرایند توسعه میده توش اعمال کنن. مثلا شاید تغییر یه متن باعث شه یه بنر بزرگتر بشه، یه دکمه بخواد به حالت شناور درست شه و این قبیل مسائل. برای همین باید بتونیم لایه ها رو روشن و خاموش کنیم، نسخه های بزرگتری از طراحی درست کنیم تا تو جلسات نمایش بدیم یا بعضی قسمتها رو پهن تر کنیم تا با گوشه ها هماهنگ بشن.
دیگه اون روزها که توسعه دهنده های سایت یه عکس شیشه ای از صفحه میگرفتن و با دقت تصاویر رو تو کدهاشون وارد میکردن. اگه بتونیم بیشتر طراحی رو در قالب کدها وارد کنیم و تصاویر کمتری استفاده کنیم، صفحه برای مشتریها سریع تر لود میشن، امکان دسترسی به سایت برای افراد با ناتوانیهای جسمی فراهم میشه، صفحه برای موتورهای جستجو خواناتر میشه و انعطاف پذیری بیشتری برای محتوا و بروزرسانی های سایت با توجه به نیازهای آینده مشتری بوجود میاد.
فتوشاپ اونقدرها هم بد نیست، قول میدم!
مشخصات فایل
معمولا سایتو برای کمترین اندازه صفحه نمایش رایج طراحی میکنن. یعنی 800 x 600، 1027 x 768 و غیره. حالا با این تنوعی که تو اندازه های صفحه نمایش وجود داره دیگه نمیشه یه اندازه طراحی کنیم و توقع داشته باشیم با همه دستگاه ها بخونه.
این روزها روشهای مختلفی برای ارائه خدمات به صفحه نمایشهای مختلف بوجود اومده. بسته به کار شما، ما طراحی دسکتاپی سایتتونو طوری منعطف میکنیم که با صفحه نمایش کاربرها هماهنگ بشه. فعلا بهتون پیشنهاد میکنیم با یه منطقه اصلی به پهنای 1200 پیکسل شروع کنید، اما یادتون باشه که باید بتونه تا 1000 پیکسل هم باریک بشه.
توجه داشته باشید که بحثهای پیرامون ابعاد سایت، عمدتا به طراحی دسکتاپی ربط داره. قبلا یه پست اختصاصی درمورد طراحی برای سایت واکنشگرا نوشتیم، اما بازهم بد نیست به نکته بالا توجه کنید.
بافت، تصاویر و پس زمینه
اگه طراحیتون یه تصویر یا بافت بزرگ زیبا برای پس زمینه سایت استفاده میکنه، این رو هم در نظر بگیرید که وقتی پس زمینه بزرگتر یا کوچیکتر میشه چه شکلی دیده میشه. بهترین کار اینه که از یه رنگ ثابت استفاده کنید و در عین حال مواظب باشید که اطراف موضوع اصلی تصاویر به اندازه کافی فضای خالی وجود داشته باشه که با پس زمینه همخوانی ایجاد کنه. یا میتونید یه کاشی کوچیک که خیلی تو چشم نیاد رو روی پس زمینه تکرار کنید. این دو تا روش خیلی خوبن چون دیگه نیازی به اندازه صفحه نمایش نیست و سرعت بارگذاری سایت هم بالا میره. اما برای اینکه منبع اصلی عکسو حذف کنید یکم کارهای فتوشاپی لازمه. اگر هم میخواهید کیفیتش رضایت بخش باشه، باید احتمالا خودتون انجامش بدید و متکی به توسعه دهنده نباشید.
یه روش دیگه استفاده از یه پس زمینه ثابته که بسته به اندازه صفحه نمایش کوچیک و بزرگ بشه. برای این روش بهتره از تصاویر یکم تار استفاده کنید که اگه مرورگر اندازه عکس رو تغییر داد مشکلی پیش نیاد. بهتره که خودتون چندتا عکس به توسعه دهنده بدید و اجازه بدید هر جا لازم بود اندازشونو تغییر بده تا به سایز مناسب دربیان.
فونت
فناوری وب به جایی رسیده که همونطور که میتونیم از تصاویر مختلف استفاده کنیم، میتونیم هر فونتی هم که دوست داریم برای سایتمون بکار ببریم. خب این خیلی خوبه.
با اینکه میشه فونت رو هم مثل تصاویر، گوگل کرد، به فرمت مناسب تبدیل کرد و استفاده کرد، اما معمولا همچین اجازه ای بهتون نمیدن. حتی اگه فونت رو هم برای استفاده های پرینتی بخرید، نمیتونید به طور خودکار برای سایت بکار ببرید. معمولا باید یه گواهی جدا مخصوص استفاده روی سایت برای فونت بخرید.
برای خرید فونت میتونید از سایتهای Adobe Typkit و Fonts.com. استفاده کنید که فونتهای مناسب وب ارائه میدن و تا حد ممکن هم فونتهاشون خوب و تو همه مرورگرها یکسانه. معمولا فونتهای محبوب هم دارن و اگه نداشته باشن، قطعا براش فونت جایگزین میذارن. بد نیست خودتون هم یه یکم دنبال فونت بگردید و قیمتهارو بالا پایین کنید.
در مورد فونتها توجه به این دو نکته ضروریست:
برخلاف اینکه یه سری فونت برای استفاده کاربرها روی کامپیوتر از قبل نصب شده، اما برای استفاده آنلاین باید فونت مورد نظرتونو دانلود کنید. اگه از سبک و سیاق های زیادی روی سایتتون استفاده کنید سرعت بارگذاریش پایین میاد. اگه بخواهید بیشتر از دو فونت روی سایتتون بکار ببرید باید از سیستم فونتهای مکمل استفاده کنید و فونتها رو طبق اصول روی سایت استفاده کنید.
ضخامت و مدلهای فونتها: انتخاب فونت سایت باید طوری باشه که، به خصوص برای متن اصلی سایت، از دو اندازه مختلف استفاده بشه. اما از اون طرف اگه زیادی دیگه از مدلها و اندازه های مختلفی استفاده کنید، سرعت لود پایین میاد. خیلی وقتها مرورگرهای خاصی وقتی میخوان یه ضخامت مصنوعی به فونتهای رایج بدن، خرابکاری میکنن و متن رو ناخوانا میکنن.
شروع کار
با اینکه تفاوت بین مرورگرها دیگه به زیادی قبل نیست، به جاش تعداد دستگاه ها و اندازه های صفحه نمایش ها خیلی متنوع شدند. دیگه نمیشه توقع داشت تو همه پلتفرم ها سایت عالی باشه اما اگه تیزبین باشید میتونید تجربه مثبت و لذتبخشی برای کاربرهاتون فراهم کنید. چی بهتر از کاربرهای راضی!
