اصول طراحی وب به پیچیدگی آن نیست. به نظر می رسد یک وب سایت ساده که دارای قابلیت استثنایی است و از ساختار خوبی برخوردار است، معمولاً در گوگل عملکرد بی نظیری دارد. بازدید کنندگان این سایت ها بیشتر است و تجربه کاربری بهتری دارند. این عملکرد به اثربخشی و اصول طراحی وب سایت بستگی دارد. در این مطلب به اصولی که باید در این راه توجه کنیم می پردازیم.
یک وب سایت خوب در یک کلام وب سایتی است که کاربر پسند باشد. این موضوع با سلیقه مخاطبان فضای مجازی رابطه مستقیم دارد که چندین فاکتور نیاز دارد که در هر فاکتور متخصص خودش را می طلبد.
تعیین هدف
شما قرار است درآمد داشته باشید اما در این مرحله باید بدانید از چه راهی و چه چیزی ؟ چه وبسایتی می خواهید راه اندازی کنید؟ موضوع آن چیست؟
- یک فروشگاه آنلاین برای فروش محصولات؟
- سایتی برای رزرواسیون یا ثبت نام
- صرفا یک سایت خدماتی و سفارشی؟
- نمونه کار ها برای نشان دادن هنر هایتان
- بازاریابی و تجارت الکترونیک
- کاریابی
- به اشتراک گذاشتن دانش و علم؟
- خبری و اطلاعات؟
- چند رسانه ای مانند تصاویر، کلیپ و موسیقی
- سرگرمی و …
خرید دامنه و هاست مورد نیاز
بعد از انتخاب هدف شما می دانید چه دامنه و چه مقدار فضا احتیاج دارید تا کار کنید. مسلما برای وبلاگی که نیاز به تصاویر زیاد و با کیفیت است و یا نیاز به کلیپ دارد دامنه بهتر و سرور های قوی تر با حجم بیشتری برای بار گذاری می خواهد.
انتخاب نام دامنه
نام دامنه بسیار مهم است این همان شناسنامه شما در اینترنت است. کاربر با همین نام وارد سایت شما می شود. نکاتی که باید در انتخاب نام سایت یا دامنه خود به آن توجه کنید شامل موارد زیر می شود.
- خلاصه و مفید: کلمات کوتاه و خلاصه بیشتر در ذهن مخاطب می ماند
- ساده : از کاراکتر ها و اعداد استفاده نکنید.
- حرفه ای: مربوط به موضوع و هدف وب سایت باشد.
- جذاب: نام های مخفف جذاب ترن و مشوق کاربر است می توانید از نام های ترکیبی اما کوتاه استفاده کنید.
- انتخاب پسوند های دامنه: .org تا .com و .ir، می توانید از 45 پسوند دامنه سطح بالا استفاده کنید اما بهتر است مخصوص منطقه خود و زبان سایت باشد باشد.
قرار گیری عناصر
قرار گیری عناصر با استفاده از قالب بندی و ظاهر خوانا و مرتبط با هدف کاربر سایت باعث سادگی بصری و جذب کاربر است. این موضوع هم مربوط به کد نویسی است که در فضای CSS,JAVA اتفاق می افتد مانند منو های آبشاری لیست ها و ستون ها است.
البته شما می توانید از قالب های آماده که در سایت های مختلف است را خریداری و استفاده کنید. اما باید توجه داشته باشید. قالب شما با موضوع تان هم خوانی داشته باشد. اگر موضوع و هدف شما محتوای زیادی دارد منوی کلاسیک بهتر است.
صفحه اصلی
طراحی وب سایت صفحه اصلی باید طوری تهیه شود که همه بخش ها را به طور خلاصه داشته باشد و همینطور چشم نواز و جذاب باشد همچنین دسترسی به بخش های سایت راحت باشد.
می توانید سایت های هم هدف خود را مشاهده کرده و الگو بگیرید سپس خود یک قلم بردارید و طرح عناصر مورد نیازتان را بچینید. این عناصرشامل موارد زیر می شود:
- منو: این عنصر اصلی هر وب سایت حرفه ای تضمین می کند که بازدید کنندگان می توانند به راحتی از یک گروه به گروه دیگر حرکت کنند. به همین دلیل باید در هر صفحه وب سایت تعبیه شود یک منوی ثابت بهتر است چرا که وقتی بازدید کنندگان به پایین صفحه می روند منو ثابت بماند. برای منوی تلفن همراه، تعداد دسته ها را به حداقل برسانید تا از اضافه بار صفحه کوچک جلوگیری کنید.
- هدر: در بالای صفحه است و نام سایت و یک جمله تبلیغی در این قسمت قرار دارد، همچنین قابلیت جستجو وجود دارد.
- فوتر: این قسمت پایین سایت قرار می گیرد. پاورقی های وب سایت در همان ابتدا دیده نمی شود بلکه وقتی مخاطب به پایین صفحه برود آن را می بیند که شامل اطلاعات تماس باما می شود.
- ستون: ستون ها بیشتر برای لینک شده به سایت هایی است که حمایت می کنید یا دسته از مطالب گل چین شده و پر بازدید برای دسترسی بیشتر مخاطبان.
- پیمایش: جلوه های پیمایشی بسیاری وجود دارد. احتمالاً از پیمایش اختلاف منظر شنیده اید. این اثر سه بعدی حرفه ای همچنان سال به سال یک روند طراحی وب اساسی است.
صفحات دیگر اضافه کنید
هر سایتی که تولید محتوا دارد یا بخش های دیگر مانند ثبت نام یا ارتباطات و … نیاز به طراحی مختصر تر دارند، بعضی عناصر در میان صفحه ها حذف می شوند. اما استفاده تک بعدی از یک صفحه هم خوب نیست. ولی منو می تواند ثابت باشد.
فضای سفید: قسمتی که شامل هیچ چیزی نمی شود. از فضای خالی وحشت زده نباشید. فضاهای سفید در صفحات دوم سایت اجازه می دهد تا مخاطب، بین تصاویر یا تکه های محتوا نفس بکشند.
کد نویسی
خلاصه نویسی و مرتب بودن کد ها و قرار دادن کد ها در یک خط باعث می شود که بارگیری وب سایت سریع تر اتفاق بیفتد.
این کار نه تنها صفحه را سبک می کند بلکه کاربر تمایل بیشتری دارد تا در صفحه گردش کند چرا که صفحات به راحتی و با سرعت باز می شوند و این تجربه کاربری را افزایش می دهد.
هیچ کس سایتی را که زمان بارگیری زیادی دارد را دوست ندارد. بنابراین با روش های زیر آن را کنترل کنید.
- بهینه سازی اندازه و حجم تصاویر
- ترکیب کد به یک فایل مرکزی CSS یا JavaScript زیرا باعث کاهش درخواست HTTP می شود.
- فشرده سازی کد های HTML ،JavaScript و CSS
سئو یا تولید محتوا
یک اصل مهم در طراحی هر وب سایت وجود مطالب مربوط به آن سایت است. اگر این موضوع با صبر و حوصله نباشد یا کمبود مطلب در وبسایت وجود داشته باشد خود باعث فراموش شدن آن سایت توسط گوگل است. اما کیفیت هم مهم است. اصل اول را بر کیفیت صداقت محتوا بگذارید.
اصولی که باید در تولید محتوا رعایت کرد شامل موارد زیر می شود.
- موضوع درست و مربوط به سایت با عنوان خوب
- خانا بودن مطلب
- خلاصه نویسی
- عنوان بندی های درست با اجرای سلسله مراتب و ترجیحا رنگی
- استفاده از تصاویر و کلیپ
- استفاده از کلمه کلیدی در متن
- استفاده از تصاویر و متن ALT
- لینک های داخلی
- لینک های خارجی
افزونه های وردپرس می توانند در کیفیت مطالب شما را کمک و راهنمایی کنند.
دیزان سایت
شامل هر آنچه که بصری می باشد پالت و ست رنگ استفاده از لوگوی سایت، بنر ها و عناصر رنگی جذاب تصاویر آیکن ها و رنگ منو و نوع و رنگ فونت وطرح یا تصویر زمینه سایت شما بسیار در جذاب شدن آن موثر است.
بیشتر این مباحث مربوط به سئو و گرافیک تصاویر کار شده در تولید محتوا می باشد اما باید با کد نویسی مچ باشد به عنوان مثال اگر یک سری تصاویر حرکتی آلبومی با کد جاوا اسکریپت داریم باید اندازه و کیفیت آن خوب باشد.
معماری داخلی
دقیقاً مانند اتاق های یک خانه، اتصال صفحات به یکدیگر باید درست متصل شوند. برای این کار، حتما پیوند های داخلی را بین صفحات بگذارید.
در نهایت قانون دو کلیک را دنبال کنید( بازدید کنندگان برای دسترسی به هر صفحه از سایت، شما نباید بیش از یک بار کلیک کنند.)
رنگ ها
همانطور که در روانشناسی رنگ می بینیم، رنگ تأثیر زیادی بر روان انسان می گذارد، همین امر باعث می شود تا این وسیله برای بازاریابی مهم شود. قانون اصلی قانون سه سایه برای ست کردن های گرافیکی و طراحی ها است.
- یک رنگ اصلی (60٪ مخلوط)
- یک رنگ ثانویه (30٪)
- یک رنگ مکمل (10٪)
برای ساختن این سه ترکیب رنگی مناسب، با برخی از این ژنراتور های پالت رنگی رایگان مشورت کنید و یا برای الهام گرفتن به برنامه های رنگی وب سایت موفق مراجعه کنید.
منو
توصیه می شود که به دنبال یک منوی ثابت بروید (که وقتی بازدید کنندگان از صفحه پایین می روند) قرار بگیرد، به طوری که برای یافتن آن نیازی به ادامه راه ندارند.
برای منوی تلفن همراه خود، تعداد دسته ها را به حداقل برسانید تا از اضافه بار صفحه کوچک جلوگیری کنید.
سازگاری با تلفن همراه
با توجه به استفاده روز افزون از گوشی های هوشمند، تبلت ها و فبلت ها، نزدیک به 90 درصد کاربران از این وسایل استفاده می کنند.
در نتیجه طراحی وب باید برای این دستگاه ها هم کارآمد باشد. اگر طراحی وب سایت شما از تمام اندازه های صفحه ها پشتیبانی نکند، در رقابت با سایت های دیگر عقب می افتد.
سایت های طراحی وب مشخصی وجود دارد که به صورت خدماتی یا هزینه ای، می توان اندازه نمایش را برای همه دستگاه ها هم تبدیل کرد.
مدیریت وبسایت
مدیریت سایت به دو دسته داینامیک و استاتیک تقسیم می شود که داینامیک به وبسایت هایگی فته می شود که داری تصاویر متحرک و چشمک زن هستند و همواره درحال بروز رسانی محتوا هستند.
این وب سایت ها با استفاده از کد های برنامه نویسی و بانک های اطلاعاتی و مدیریت روزانه محتوا گذاری منظم و ویرایش محتوا می توانند خود را همیشه در جستجو های مخاطبان و حافظه گوگل حفظ کنند.
ارتباطات
یک سایت واقعی در مورد خودش و اهدافش به مخاطب اطلاعات می دهد پس بخش درباره ما را فراموش نکنید. همچنین سایت پویا دارای راه ارتباطی و پاسخگویی به نظرات و سوالات و پیشنهاد های کاربرانش است.
علاوه بر این بهتر است بخش تلفن و آدرس و شماره پستی را هم در پایین وبسایت ها قرار دهید یا ارتباط از طریق شبکه های اجتماعی را روی سایت به صورت آنلاین اضافه کنید تا کاربر زودتر به هدف خود برسد.
بررسی بازخورد سایت
می توانید از سایت های مربوطه که گوگل در اختیارتان می گذارد استفاده کنید تا متوجه شوید نتیجه طراحی وب سایت شما چه بوده است.
- Google Analytics: نشان می دهد چند بازدید کننده به صفحه شما آمدند؟ با چه آی پی هایی وارد شدند یا کجایی هستند؟ یا چه مدت در سایت بوده و مطالب را خوانده اند.
- گوگل سرچ کنسول: اگر کنجکاو هستید که ببینید صفحات شما در موتور جستجوی پیشرو چگونه رتبه بندی می شوند، این بستر مناسب برای استفاده است. در اینجا تمام جزئیات مربوط به ترافیک ارگانیک خود را از کلمات کلیدی برای رقابت با آن ها، تا پیشرفت خود در طول زمان دریافت می کنید.
- Heatmaps: با استفاده از یک کد رنگی دقیق، نقشه های گرم به شما نشان می دهند که قسمت هایی از بازدید کنندگان صفحات شما به دنبال چه چیزی هستند و روی آن کلیک می کنند. این ابزار ارزشمند می تواند در بهبود طراحی و محتوا به شما کمک کند.
