نویسنده
طراحی وبسایت چیست؟
طراحی وب؛ فرآیند برنامهریزی، ایدهپردازی و تنظیم محتوا به صورت آنلاینه. امروزه طراحی وبسایت، مسائلی بیشتر از زیبایی سایت رو در نظر میگیره و شامل عملکرد کلی وبسایته. طراحی وب، به معنی برنامههای وب، برنامههای موبایل و طراحی رابط کاربر (user interface) میشه.
میدونی که طراحی وب، میتونه تأثیر زیادی در عملکردت، در موتورهای جستجو داشته باشه؟ این مقاله بهت اطلاعات مفیدی دربارهی نحوهی ایجاد وبسایت میده که بتونه ظاهر خوب و مناسبی داشته باشه، کارایی عالی داشته باشه و بتونه به رتبهی بالایی در جستجو برسه.
در این مقاله میخونیم:
- الهام گرفتن
- انتخاب ابزار طراحی وب
- عوامل بصری
- عوامل عملکردی
- انواع طراحی وب: طراحی انطباقی (Adaptive) در مقابل واکنشگرا (Responsive)
الهام گرفتن
طراحان همیشه به دنبال الهام گرفتنن. لیستی از بهترین سایتها، برای کمک به ایجاد خلاقیت:
- Awwwards
- Web design inspiration
- Site Inspire
انتخاب ابزار طراحی وب
برای طراحی وبسایت، دو روش اصلی وجود داره: استفاده از اپلیکیشن دسکتاپ یا استفاده از وبسایت ساز. ابزاری که میخوای از اون استفاده کنی بسته به اندازه تیم، بودجه و نوع سایتی که میخوای بسازی و مسائل فنی اون، خیلی متفاوته.
-
اپلیکیشنهای دسکتاپ
در طراحی به وسیلهی اپلیکیشن دسکتاپ، طراحان باید طرحشون رو ایجاد کنن. طرح؛ برای تیم توسعهدهنده فرستاده میشه که اونا طرحها رو به کد تبدیل کنن. از مشهورترین اپلیکیشنهای دسکتاپ برای طراحی، میشه به فتوشاپ وSketch اشاره کرد.
معمولاً این استاندارد، برای وبسایتهای بزرگ و یا پیچیده به کار میره چون به طراح اجازه میده تا بتونه بر روی ظاهر و احساس کلی تمرکز داشته باشه. اما تمام چالشهای فنی، به تیم توسعه منتقل میشه. این روند میتونه گرونتر و زمانبر باشه چون به منابع متعدد، مهارتهای زیاد و ساعات کار اعضای تیم نیاز بستگی داره.
در طراحی یک وبسایت با نیازهای فنی کمتر، بهتره از یک برنامه یا پلتفرم وبسایتساز استفاده کنی.
-
سازندگان وبسایت
خیلی از سازندگان وبسایت در بازار وجود دارن که خدمات زیادی رو ارائه میدن. کاموا، وبزی، ایران سرور و ... و نمونههای ایرانی و ویکس (WIX)، مجنتو (Magento)، پرستاشاپ (Prestashop) و ... نمونههای خارجی از سازندگان وبسایتن که در قابلیتهای طراحی، گزینههای قالب، قیمت و تجربهی کلی ویرایش؛ با هم متفاوتن. حتماً تحقیقاتت رو انجام بده، آزمایشهایی مجانی وجود داره که میتونی از اونا استفاده کنی و مشخص کنی کدوم یکی از پلتفرمها بیشتر با وبسایتت سازگاره.
سازندگان وبسایت؛ وبسایتهای انطباقی یا واکنشگرایی رو ایجاد میکنن که تجربههای مختلف ساخت رو ارائه میدن. ما در اینجا جزئیات بیشتری رو توضیح میدیم تا متوجه بشی کدوم سازندهها میتونن بهترین کارایی ممکن رو برای تو داشته باشن. اگه نمیدونی چطور کدنویسی کنی، آشنایی با امکانات و محدودیتهای ابزارهای مختلف طراحی وبسایت، برای تو ضروریه. مثلاً درسته که وردپرس (Wordpress) پرکاربردترین پلتفرم طراحی وبسایته، اما به دلیل محدود بودن گزینههای سفارشیسازی، طراحان بصری به اون علاقهای ندارن.
قبل از شروع به ساختن وبسایت، نیازهای وبسایتت رو مشخص کن: گالری عکس ایجاد میکنی؟ هر چند وقت یکبار، سایتت رو به روزرسانی میکنی؟ به فرم تماس نیاز داری؟ سازندهی وبسایتی رو انتخاب کن که بتونه بهت در دستیابی موثر به این اهداف کمک کنه.
عوامل تشکیل دهندهی طراحی وب
موقع طراحی وبسایت، توجه به ظاهر و عملکرد سایتت خیلی مهمه. ترکیب این عوامل، قابلیت استفاده و عملکرد کلی سایت رو به حداکثر میرسونه. قابلیت استفاده سایتت، عواملی مثل رابط نویگیشن آسون (easy-to-navigate interface)، استفاده مناسب از عوامل گرافیکی و تصاویر، نوشتار و جایگذاری مناسب متن و استفاده از یک طرحی رنگیه. عملکرد سایتت، به سرعت، رتبهبندی، جستجو و توانایی جذب مخاطبت (capture audience) اشاره میکنه.
-
عوامل بصری
این قسمت مرور کلی از عواملیه که باید موقع طراحی وبسایتت، اونا رو در نظر بگیری تا مطمئن بشی همهی عوامل به خوبی با همدیگه کار میکنن.
کپی رایتینگ
ظاهر و متن وبسایتت، با همدیگه در ارتباطن. مهمه که محتوا نویسان و طراحان با همدیگه همکاری کنن تا طراحی منسجمی رو انجام بدن. روی ایجاد بخشهای متن (با استفاده از بلوکهای متنی) تمرکز کن تا بتونی گرافیک و تصاویر رو به مخاطبها نشون بدی.
فونتها
فونتی انتخاب کن که بتونه طراحیت رو نشون بده. فونت باید با طرحی رنگی، گرافیکی و تصاویر هماهنگ بشه و لحن کلی وبسایتت (website tone) رو تقویت کنه. ابزارهایی مثل Canva's Font Combinator بهت کمک میکنه تا بتونی فونت مناسبی پیدا کنی. ابزارهای طراحی وب مثل PageCloud چند فونت مختلف داره.
رنگها
رنگها؛ یکی از مهمترین عواملین که باید موقع طراحی وبسایت، به اونا توجه کنی. یادت باشه که سوءبرداشتهای زیادی دربارهی روانشناسی رنگ وجود داره. تمرکز بر رنگهایی که از طراحی و لحن کلی وبسایتت تعریف میکنن، خیلی مهمه. طرح رنگیت رو با برندت و پیامهایی که میخوای به مخاطبها منتقل کنی، تنظیم کن.
Layout
تصمیمگیری در نحوهی تنظیم محتوا (arrange content)، تأثیر زیادی در قابلیت استفاده و عملکرد سایتت داره. هیچ قانون خاصی برای انتخاب این طرح وجود نداره، اما چند اصل مهم رو باید همیشه در نظر بگیری: اطمینان پیدا کن که نیازهای مخاطب هدفت (target audience) رو مد نظر داری و از طرحی استفاده نکن که باعث تضعیف پیامت بشه.
شکلها
استفاده از عوامل گرافیکی در طراحی وب، میتونه به یکپارچهسازی متن، تصاویر و به ظاهر کلی سایت کمک کنه. ترکیب رنگها و شکلهای زیبا میتونه توجه بازدیدکنندگان سایتت رو جلب کنه و به طور کلی به سایتت کمک کنه.
فضاسازی
فضاسازی؛ برای وبسایتهایی که میخوان ظاهری زیبا و کاربردی آسون داشته باشن، عامل مهمیه. هر عاملی در طراحی تو، به نوعی با فضا در ارتباطه. استفاده مناسب از فضای خالی، در طراحی، خیلی مهمه چون باید بتونه در متن، عکس و گرافیک سایتت تعادل ایجاد کنه. فضای مناسب در سایت، به کاربران کمک میکنه تا بتونن به راحتی در وبسایتت بگردن. امروزه مفهوم فضای سفید (whitespace) در اولویت طراحان Modern Web قرار گرفته.
تصاویر و آیکونها
طراحیهای شگفتانگیز، میتونن اطلاعات زیادی رو فقط در چند ثانیه مبادله کنن. این کار به وسیلهی استفاده از تصاویر و آیکونهای قدرتمند امکان پذیره. تصاویر و آیکونهایی رو انتخاب کن که پیام تو رو پشتیبانی و تقویت کنن. با یک جستجوی سریع گوگل، میتونی هزاران تصاویر و آیکون پیدا کنی.
ویدئوها
استفاده از فیلمهای ترکیبی در طراحی وب، محبوبیت زیادی در بین طراحان پیدا کرده. وقتی که از ویدئو به درستی استفاده بشه، بهت کمک میکنه تا پیامی رو که نمیتونی با متن و تصویر منتقل کنی، با اون انتقال بدی. مثل وقتی که صفحهی تلویزیون در رستوران جلب توجه میکنه، چشمهای بازدیدکنندگان در وبسایتت، به سمت تصاویر متحرک جلب میشه. اطمینان پیدا کن که فیلمهات با عوامل مهم دیگه در صفحه، رقابت نمیکنه و از ارزش اونا کم نمیکنه.
-
عوامل کاربردی
در زمان طراحی وبسایت ضروریه که عوامل کاربردی رو در نظر بگیری. درست کار کردن وبسایت، برای کسب رتبهبندی بالا در موتورهای جستجو و ارائه بهترین تجربهی ممکن به کاربران، خیلی با اهمیته.
نویگیشن
نویگیشن وبسایتت، یکی از اصلیترین عواملیه که عملکرد صحیح وبسایتت رو تعیین میکنه. بسته به مخاطبانت، نویگیشن میتونه اهداف مختلفی داشته باشه: کمک به بازدید کنندگانی که برای اولین بار به سایتت میان و میخوان کشف کنن که سایتت چه چیز جدیدی داره، دسترسی آسون به صفحاتت برای بازگشت بازدیدکنندهها و بهبود تجربهی کلی هر بازدید کننده.
تعاملات کاربر (User Interactions)
بازدیدکنندگان؛ بسته به وسیلهای که برای برقراری ارتباط با تو استفاده میکنن، چندین روش برای تعامل با سایتت پیش رو دارن (اسکرولینگ، کلیک، تایپکردن و غیره). طراحی عالی وبسایت، این تعاملها رو آسون میکنه تا کاربر حس کنه که روی اونا کنترل داره. در اینجا چند مثال برای تو آوردیم:
هیچوقت صدا یا فیلمی رو به صورت خودکار پخش نکن.
هیچوقت زیر متنی رو خط نکش، مگه اینکه قابل کلیک باشه.
اطمینان پیدا کن که همهی فرمها، سازگار با موبایل (mobile friendly) طراحی شدن.
از پاپآپ (pop up) استفاده نکن.
از اسکرول جکینگ (scroll-jacking) استفاده نکن.
انیمیشنها
تعداد زیادی از تکنیکهای انیمیشن وب وجود داره که میتونه به تو، در جلب توجه بازدیدکننده کمک کنه و به بازدیدکنندههات اجازه میده تا بتونن به وسیلهی بازخورد با سایتت، ارتباط برقرار کنن. مثلاً اضافهکردن دکمهها یا فرمهای "لایک" میتونه باعث بشه تا بازدیدکنندها، با سایتت وارد تعامل بشن. اگه در زمینهی طراحی وب تازهکاری، توصیه میکنیم انیمیشنهات رو ساده طراحی کنی تا بتونی در هزینههای برای برنامهنویسی صرفهجویی کنی.
سرعت
هیچ مخاطبی وبسایت کُند رو دوست نداره. انتظار بیش از چند ثانیه، برای بارگیری صفحه میتونه بازدیدکننده رو از موندن یا بازگشت به سایتت منصرف کنه. صرف نظر از زیبایی، اگه سایتت به سرعت بارگیری نشه، در وقت جستجو عملکرد خوبی نداره (یعنی رتبه بالایی در گوگل پیدا نمیکنه).
سازندگان برتر سایت، معمولاً محتوای تو رو برای افزایش زمان بارگذاری، فشردهسازی میکنن. اما با این کار هم هیچ تضمینی برای افزایش سرعت وجود نداره. حتماً تحقیق کن که سازندگان سایتت، برای محتوای سایتت، بهترین حالت ممکن رو در نظر میگیرن. مثلاً PageCloud، تصاویر رو طوری بهینهسازی میکنه که سرعت سایتهایی که تصاویر زیاد یا بزرگی دارن، رو افزایش بده.
ساختار سایت
ساختار وبسایت هم در تجربهی کاربر (UX) و هم در بهینهسازی موتور جستجو (SEO)؛ نقش مهمی داره. کاربران تو باید به راحتی بتونن از طریق وب، بدون اینکه با مشکلات ساختاری روبرو بشن، سایتت رو پیمایش کنن. اگه کاربران، موقع پیمایش سایتت گم بشن، احتمال فعالیت "خزندهها" (crawlers) بیشتر میشه. خزنده (یا ربات) برنامهای خودکاره که وبسایتت رو جستجو میکنه و میتونه عملکرد اون رو تعیین کنه. پیمایش ضعیف میتونه باعث تجربهی کاربری ضعیف و در نتیجه، رتبهبندی پایین سایت بشه.
سازگاری متقابل بین مرورگر و دستگاه
طراحی عالی؛ باید در تمام دستگاهها و مرورگرها مد نظر گرفته بشه (بله! حتی اینترنت اکسپلورر). اگه سایتت رو از ابتدا میسازی، توصیه میکنیم از ابزاری آزمایشی بین مرورگر، استفاده کن تا بتونی این روند خستهکننده رو، سریعتر و کارآمدتر کنی. از طرف دیگه، اگه از پلتفرم ساخت وبسایت استفاده میکنی، معمولاً توسط تیم توسعهدهندهی شرکت، آزمایش متقابل مرورگر میشه. این کار باعث میشه تا بتونی روی طراحی تمرکز داشته باشی.
انواع طراحی وبسایت: سازگار در مقابل واکنشگرا
شناخت نکات مثبت و منفی وبسایتهای سازگار و واکنشگرا، بهت کمک میکنه تا متوجه بشی کدوم سازندهی وبسایت، برای نیازهای طراحی وبسایت تو، بهترین کاربرد رو دارن.
ممکنه به صورت آنلاین با مقالاتی روبرو بشی که دربارهی مجموعهای از سبکهای مختلف طراحی وبسایت (ثابت، استاتیک، سیال و غیره) مطالبی ارائه میکنن. با این حال در دنیایی که استفاده از موبایل هرروز بیشتر میشه، فقط دو سبک وبسایت وجود داره که میشه از اونا برای طراحی صحیح وبسایت استفاده کرد: سازگار و واکنشگرا.
وبسایتهای سازگار
در طراحی وب تعاملی؛ از دو یا چند نسخهی وبسایت استفاده میشه که برای اندازههای خاص صفحهی نمایش، سفارشی شدن. وبسایتهای سازگار رو میشه بر اساس نحوهی تشخیص سایت، برای نمایش اندازهی مورد نیاز، به دو دسته اصلی تقسیم کرد:
۱. سازگار بر اساس نوع دستگاه
هنگامی که مرورگر تو به یک وبسایت متصل میشه، درخواست HTTP که شامل فیلدی به نام "user-agent" ؛ به سرور دربارهی نوع دستگاه استفاده شده، اطلاع میده. وبسایت سازگار میدونه که چه نسخهای از سایت، بر اساس نوع دستگاه استفاده شده (مثلا دسکتاپ، موبایل، تبلت) نمایش بده. اگه پنجرهی مرورگر روی دسکتاپ رو کوچیک کنی، مشکلاتی به وجود میاد. چون صفحه به جای کوچیک شدن و انطباق با اندازهی جدید، همون "نسخهی دسکتاپ" رو در تبلت یا موبایل نشون میده.
۲.سازگار بر اساس عرض مرورگر
وبسایت؛ به جای استفاده از عامل کاربر (user-agent) از کوئریهای رسانهای (media queries) (ویژگی CSS که به صفحهی وب امکان میده تا با اندازههای مختلف صفحه سازگار بشه) و بریکپوینتها (breakpoint) (اندازههای مشخص عرض) برای جابجایی بین نسخهها استفاده میکنه. بنابراین به جای داشتن نسخهی دسک تاپ، تبلت و موبایل، نسخههای 1080px ، 768px و 480px رو داری. این کار باعث مشه قابلیت انعطافپذیری بیشتری، در زمان طراحی داشته باشی و با توجه به انطباق وبسایتت با عرض صفحه، تجربهی مشاهده بهتری رو به دست میاری.
ویژگیهای مثبت
هر چیزی رو که میبینی، به دست میاری (در ویرایش با مشکلی مواجه نمیشی).
طرحهای سفارشی بدون کدنویسی، سریعتر و آسونتر ساخته میشن.
سازگاری بین مرورگر و بقیهی دستگاهها.
بارگیری سریع صفحات.
ویژگیهای منفی
وبسایتهایی که از device-type استفاده میکنن، وقتی در یک پنجرهی مرورگر کوچیکتر، روی دسکتاپ دیده میشن، ممکنه شکسته به نظر برسن.
محدودیتهایی وجود داره که فقط روی بعضی از سایتهای تعاملی دیده میشه.
وبسایتهای واکنشگرا
وبسایتهای واکنشگرا میتونن از طرحبندیهای شبکهای انعطافپذیر استفاده کنن، که بر اساس درصد هر عامل در کانتیننر (container) محاسبه میشه: اگه یک عامل (مثلاً یک هدر) ۲۵٪ از کانتیننر اون باشه، بدون تغییر اندازهی صفحه، این عامل در ۲۵٪ باقی میمونه. وبسایتهای واکنشگرا؛ میتونن از تکنیک باز چینی آیتمهای صفحه (breakpoints) مثلاً card view و منوها و ... برای ایجاد نمای سفارشی در هر اندازه صفحه استفاده کنن، اما بر خلاف سایتهای سازگار که فقط وقتی که به بریکپوینت میرسن، سازگار میشن، وبسایتهای واکنشگرا به طور مداوم با توجهی به اندازهی صفحه تغییر میکنن.
ویژگیهای مثبت
فارغ از نوع دستگاه، تجربهای عالی در هر اندازهای از صفحه داره.
سازندگان وبسایتهای واکنشگرا؛ معمولاً غیر قابل انعطافن که این کار بریک (Break) طراحی رو مشکل میکنه.
الگوهای زیادی برای شروع کار وجود داره.
ویژگیهای منفی
برای اطمینان از کیفیت (از زمان شروع) به طراحی و آزمایش زیادی نیاز داره.
بدون دسترسی به کد، طراحیهای سفارشی میتونن چالش برانگیز باشن.
توجه به این نکته مهمه که سازندگان وبسایت میتونن، از دو ویژگی تعاملی و واکنشگرا استفاده کنن. مثلاً PageCloud اخیراً مجموعهای از ویژگیهایی ارائه کرده که به محتوای تو اجازه میده تا واکنشگرا عمل کنه حتی اگه وب سایتت سازگار باشه.
سازندگان وبسایت سازگار
بدون شکWix وPageCloud دو نمونه از بهترین سایتسازهای بصری در بازار امروز محسوب میشن. هر دو از یک رویکرد انطباقی استفاده میکنن. به این معنی که قابلیت کشیدن و رها کردن مثل همدیگست. تو بدون نیاز به نوشتن یک خط کد، میتونی تقریباً هر چیزی رو ایجاد کنی.
Wix از سال ۲۰۰۶ شروع به کار کرده و از اون زمان، طیف گستردهای از ویژگیها و الگوها رو متناسب با هر نیاز تجاری ایجاد کرده و امروزه از سادهترین ابزارها برای مبتدیان شناخته میشه.
انتخاب بهترین گزینه، در این زمینه دشواره اما چند نکته وجود داره که باید اونا رو مد نظر بگیری:
اگه به دنبال شخصیسازیترین تجربهای،PageCloud رو انتخاب کن.
اگه به دنبال انجام کاری واقعاً آسونی و تجربهی زیادی در طراحی نداری ازWix استفاده کن.
اگه میخوای با برنامهنویس کار کنی،PageCloud رو انتخاب کن.
اگه گزینههای الگوی زیاد مد نظرته، از Wix استفاده کن.
اگر میانبرها و تجربهی موجود در برنامههای دسکتاپ رو دوست داری،PageCloud رو انتخاب کن.
از اونجا که هر دو، پلتفرمی آزمایشی مجانی رو ارائه میدن، توصیه میکنیم قبل از تصمیمگیری، هر دو رو امتحان کنی.
سازندگان وبسایت واکنشگرا
ابزارهایی مثل Squarespace؛ به سازندگان وبسایت واکنشگرا پیشنهاداتی ارائه میکنه، اما با این حال ویرایشهای محدودتری وجود داره. ایجاد وبسایت واکنشگرای مناسب، کار سختیه و بدون دونستن نحوهی کدگذاری، ساختن وبسایتهای منحصر به فرد؛ با استفاده از سازندگان وبسایتهای واکنشگرا، تقریباً غیرممکنه.
در این جاست که باید از ابزارهای طراحی وب پیچیدهتر مثلWebflow و Froont استفاده کرد. در اینجا بعضی از ویژگیهای مثبت و منفی وجود داره که باید اونا رو در نظر بگیری:
ویژگیهای مثبت
امکان ایجاد سایتهای واکنشگرای سفارشی، بدون نیاز به کد نویسی.
کنترل عالی بر روی هر عامل موجود در صفحه.
امکان انتقال کُدِ هاست (host) در محل دیگه.
ویژگیهای منفی
ابزار پیچیده که یادگیری سختی داره.
روند طراحی کندتری نسبت به سازندگان وبسایت تعاملی داره.
تجارت الکترونیک
وبسایتهای تجارت الکترونیکی؛ بخش مهمی از طراحی وبسایت محسوب میشن. ایجاد یک فروشگاه آنلاین که به راحتی قابل پیمایش، آموزنده و قابلیت نمایش دقیق محصولات رو داشته باشه؛ برای ایجاد بهترین تجربهی خرید آنلاین مشتریان، خیلی مهمه.
در آخر
امیدواریم این مقاله به تو در درک بهتر موارد ضروری در طراحی وب کمک کرده باشه.
بعضی از عناصر اصلی در طراحی وبسایت که باعث زیبایی و کاربردی شدن میشن:
۱. کاربر همیشه حرف اول رو میزنه: تجربهی کاربر؛ همیشه باید در اولویت طراحی شما باشه ،چون در آخر این کاربرانن که تعیین میکنن که وبسایت تو ارزش بازدید رو داره یا خیر.
۲. بهترین سازندهی وبسایت رو برای کارِت انتخاب کن: عملکردهای اصلی وبسایتت رو پیدا کن و سازنده وبسایتی رو انتخاب کن که مطمئن بشی که میتونه این نیازها رو برآورده کنه.
۳. متعادل سازی عوامل بصری: حفظ تعادل بین متن، گرافیک، مولتی مدیا (multimedia) و نوع طرح رنگ مهمه چون میتونه از ایجاد یک وبسایت نامناسب جلوگیری کنه.
نظرات شما: