وب دیزاینر چه می‌کند؟ کدنویسی یاد می‌گیرد و یک سایت را براساس خواسته‌ها و نیازهای کارفرما (صاحب سایت) می‌سازد و آن را تحویل می‌دهد و تمام؟ طراح سایت همه‌ی سایت‌ها را یک‌جور دیزاین می‌کند؟ یعنی یک سایت فروشگاهی را دقیقا همان‌طور طراحی می‌کند که یک سایت خبری را؟ آیا طراحی سایت اصول و قواعدی دارد؟ منظورم اصول وب دیزاین حرفه ای است که وب دیزاینر در طراحی تمامی سایت‌ها باید رعایت کند؟
طراحی وبسایت کار ساده‌ای نیست. فقط نوشتن چندین‌هزار خط کد هم نیست. وب دیزاینر به مجموعه‌ای از مهارت‌ها نیاز دارد و باید به نکات و جزئیات زیادی توجه کند. همه‌ی سایت‌هایی که یک طراح می‌سازد سایت‌های خوب و موفق و کاربرپسندی نیستند. هر سایت باهدف مشخصی دیزاین می‌شود و طراحی سایت باید به‌گونه‌ای باشد که رسیدن به آن هدف را تسهیل کند. طراح سایت باید آن هدف را درذهن داشته باشد و با‌توجه به آن سایت را توسعه دهد و بسازد.
پس طراحی سایت و تمام المان‌های هر صفحه درخدمت هدف سایت است و اگر نتوانند سایت را به هدفش برسانند، طراحی سایت موفق و موثر نبوده است. به‌همین‌دلیل و برای کمک به وب دیزاینرها مجموعه‌ای از اصول و قواعد برای طراحی سایت موفق تعریف شده است. طراح برای طراحی هر سایتی باید براساس آن اصول پیش رود.
در این مقاله شما را با اصل هایی که با رعایت‌کردن آنها هر طراح وبسایتی می‌تواند وب دیزاینی حرفه‌ای و موفق و موثر انجام دهد، آشنا می کنیم. با پلتفرم حافظ همراه باشید.
مراحل پیاده سازی اصول وب دیزاین حرفه ای
۱- نیازسنجی
مرحله اول، اهدافی را که باید وب سایت به آن برسد مشخص می نماید. مشخص بودن اهداف علاوه بر اینکه به طراح کمک می کند در حداقل زمان، کار را به پایان برساند. موجب می شود نیازهای اساسی سیستم نیز مشخص شده و محصول نهایی بیشترین میزان رضایت مندی را در پی داشته باشد.
عمده ترین موارد قابل طرح در این بخش شامل :
- مصاحبه با فرد سفارش دهنده و کارکنان و تعیین نیازمندی ها
- بازدید از روند فعالیت در سیستم و شناخت مراحل آن
- شناخت مخاطبین
- انتخاب سرویس مورد نیاز برای کنترل و اجرای وب سایت (PHP,ASP,….)
- انتخاب بانک اطلاعاتی مورد نیاز برای نگهداری اطلاعات
- امکانات لازم برای سیستم که شامل تصویر،صوت،انیمیشن،فرم و …
- مستند سازی اولیه از اطلاعات بدست آمده
- فناوری های مورد نیاز مانند پراخت اینترنتی و …
امکان استفاده از فناوری ها، معمولا در وب سایت های پویا وجود دارد که موضوع طراحی صفحات وب پیشرفته است. در وب سایت های پویا، از پایگاه داده و سرویس دهنده های مخصوصی استفاده می شود، که باید در مراحل قبل از پیاده سازی وب سایت، نیازمندی های آن را در این زمینه ها بررسی نمود.
۲- معماری اطلاعات
در این مرحله براساس نیازسنجی های انجام شده در مرحله قبل و نتایج بدست آمده، آن را در قالب یک ساختار داده ای طراحی و چیدمان آن را مشخص می نماییم.
تعدادی از این موارد عبارتند از :
انتخاب نام دامنه برای وب سایت : نام و پسوند دامنه باید متناسب با نام سازمان و نوع عملکرد آن باشد.
تعیین عناوین صفحات : عنوان باید مناسب و متناسب با محتوی صفحات، انتخاب گردد.
طراحی ساختار سایت : ساختار زیر بنایی صفحات یک وب سایت باید دنباله رو عملیات آن باشد که در مرحله نیازسنجی با توجه به فعالیت های انجام شده تعریف شده اند. طراحی ساختار و مشخص نمودن نحوه ارتباط صفحات با یکدیگر، پیاده سازی عملی، طراحی و پیاده سازی صفحات وب را ساده می نماید.
۳- طراحی
در این مرحله، ساخت و پیاده سازی وب سایت براساس ساختار کلی تعیین شده، آغاز می شود. طراح وب هنگام شروع عملیات طراحی سایت، باید یک طرح و نقشه کلی در زمینه نوع منوها، دکمه ها و نحوه ارتباط با صفحات دیگر و همچنین محل و اندازه اشیاء موجود در صفحه وب داشته باشد.
نکات بسیاری وجود دارد که باید در طراحی کلی وب سایت و یا در طراحی صفحات به صورت مجزا در نظر گرفته شوند.برخی نکات مهم در طراحی کلی وب سایت عبارتند از :
در صورت وجود انیمیشن در صفحه اول امکان صرف نظر کردن از مشاهده آن وجود داشته باشد.
هدف از راه اندازی و پیاده سازی وب سایت برای بازدیدکنندگان کاملا مشخص باشد.
نقشه سایت در کلیه صفحات موجود باشد.
دسترسی به صفحه اصلی از تمام صفحات سایت امکان پذیر باشد.
در صورت چند زبانه بودن سایت آیکونی معین برای تغییر زبان در نظر گرفته شود.
محل قرارگیری آیکن های اصلی در کلیه صفحات مشخص و یکسان باشد.
امکان انتقال اطلاعات سایت به بازدید کننده وجود داشته باشد.
در صورت نیاز به نرم افزاری خاص برای مشاهده محتویات سایت، امکان دسترسی به نرم افزار مورد نظر برای بازدید کنندگان وجود داشته باشد.
مشاهده صفحات سایت در حالات مختلف نمایش، بدون اشکال باشد(مفهوم رسپانسیو بودن صفحات).
امکان جستجو در مطالب وب سایت و اتصال به آن فراهم باشد.
تدابیر بهینه سازی برای موتور های جستجو (مفهوم سئو SEO ) برای سایت اندیشیده شود.
امکاناتی برای آگاهی بازدید کنندگان از موقعیت جاری آنها در وب سایت وجود داشته باشد.
امکاناتی برای دریافت نظرات، انتقادات و پیشنهادات بازدیدکنندگان موجود باشد.
اطلاعاتی در مورد سازمان و مشخصات سفارش دهنده در سایت موجود باشد.
اطلاعات مربوط به تهیه کننده و زمان تهیه وب سایت موجود باشد.
امکان ارسال پرسش برای بازدیدکنندگان وجود داشته باشد.
مهم ترین اصول وب دیزاین حرفه ای
قبل‌از پرداختن به اصول وب دیزاین، به این نکته باید اشاره کنم که تعداد اصول طراحی وبسایت اختلافی است. یعنی در منابع از اصول مختلفی نام برده شده است. درادامه، مهم‌ترین اصول که در بیشتر منابع ذکر شده و برای طراحی وبسایت موفق و حرفه‌ای لازم است، معرفی می‌شود.
۱. در تمامی مراحل وب دیزاین اهداف سایت باید درنظر گرفته شود
همان‌طور که اشاره کردم، هر سایتی رسیدن به اهدافی را دنبال می‌کند. بعضی‌از اهداف مشترک بین همه‌ی سایت‌ها هستند (جذب‌کردن بازدیدکننده و ساختن تعامل رضایت‌بخش). بعضی اهداف دیگر براساس موضوع سایت مشخص می‌شود:
- اگر سایت سرگرمی و ویدئویی باشد، هدفش این است که تا می‌شود بازدیدکننده را در سایت نگه دارد.
- اگر سایت فروشگاهی است، هدفش تبدیل‌کردن بازدیدکننده به مشتری و افزایش فروش است.
- اگر سایت برای یک برند خاص طراحی می‌شود و قرار است آن کسب‌وکار و برند را معرفی کند، هدف سایت حفظ اعتبار و جایگاه برند و همچنین معرفی کامل و درست آن کسب‌وکار است.
۲. اصول وب دیزاین حرفه ای، سایت را نباید با هر محتوایی پر کرد
سایت اگر جذاب‌ترین دیزاین را داشته باشد اما از محتوای مفید و کاربردی برای بازدیدکننده (یعنی محتوایی که برای کاربرش مهم است و کاربر برای دیدن و پیدا‌کردن آن به سایت می‌آید) تهی باشد، موفق نخواهد شد. محتوای هر سایت بخشی از سایت است و درنتیجه طراح سایت باید به این موضوع هم توجه کند که در سایت محتوای درست و مناسب باهدف آن قرار گیرد. دراینجاست که اصل اول به طراح کمک می‌کند: محتوای سایت باید مناسب باهدف سایت و همچنین کاربران سایت باشد. محتوای سایت فروشگاهی با سایت خبری فرق دارد، چون هدف و مخاطبان سایت فروشگاهی و خبری باهم فرق دارند.
۳. اصول وب دیزاین حرفه ای، طراحی سایت باید ساده و اصیل باشد
وقتی طراح سایت متوجه شد قرار است با طراحی به چه‌چیزی برسد و نوع و کیفیت محتوای سایت را نیز مشخص کرد، باید درباره‌ی دیزاین کلی و ساختار کلی سایت تصمیم بگیرد. برای این تصمیم‌گیری طراح سایت باید به‌یاد داشته باشد که اولا از سایت‌های مشابه تقلید نکند و دوما ساختاری ساده و نه‌چندان پیچیده را برای سایت درنظر بگیرد.
درست است که بیشتر سایت‌های فروشگاهی یا خبری قالب مشابهی دارند، اما وب دیزاینر باید خلاقانه از قالب و دیگر سایت‌های مشابه و رقیب فاصله بگیرد.
۴. وب دیزاین باید براساس اصول طراحی رابط کاربری و طراحی تجربه کاربری باشد
فلسفه‌ی طراحی رابط کاربری و تجربه کاربری در سایت این است که سایت براساس ترجیحات کاربر و آن‌طور که او تعامل و فهم راحت‌تر و ساده‌تری با یک سایت و بخش‌های مختلف آن دارد، دیزاین شود. برای مثال، سیستم Navigation یا ناوبری در سایت بسیار اهمیت دارد. چون مستقیما به این مربوط می‌شود که کاربر چطور قسمت‌های مختلف سایت را پیدا کند. اگر ناوبری در سایت و منوها گیج‌کننده طراحی شده باشند، کاربر چیزی را که می‌خواهد پیدا نمی‌کند و ناراضی سایت را ترک می‌کند. وب دیزاینر می‌تواند باکمک‌گرفتن از طراح رابط کاربری و تجربه کاربری به‌راحتی ناوبری سایت را طراحی کند. درواقع:
طراحی UI/UX راه را برای طراح سایت باز می‌کند و به او نشان می‌دهد که برای دیزاین بصری و انتخاب و استفاده از المان‌های بصری سایت ازجمله رنگ‌ها، آیکون‌ها، دکمه‌ها، CTAها، فضاهای خالی، عکس‌ها و گرافیک‌ها، و همچنین طراحی منوها، دسته‌بندی محصولات یا بخش‌های مختلف سایت، طراحی سلسله‌مراتب بصری و حتی متن‌ها چگونه باید عمل کند تا تعامل کاربر با سایت به بهترین شکل انجام شود.
۵. بااستفاده‌از سیستم گرید در طرح‌بندی صفحات سایت هارمونی و نظم ایجاد می‌شود
مغز و چشم انسان هارمونی، نظم، تقارن و تناسب میان چیزها (المان‌ها) را درک می‌کند و دوست دارد. از مهم‌ترین موضوعات در طرح‌بندی صفحات سایت (Page layout) این است که محتوا و دیگر المان‌های بصری چگونه درکنار یکدیگر چیده شوند تا همه‌چیز ساختارمند و منظم به‌نظر برسد.
طرح‌بندی صفحه و شیوهای که وب دیزاینر برای آن استفاده می‌کند علاوه‌بر هارمونی و نظم بخشیدن به صفحه، خواندن محتوا را برای کاربر راحت می‌کند. ازطرف دیگر، دیزاین اصولی سایت به سئو سایت هم کمک می‌کند. برای گوگل، طرح‌بندی سایت آن‌قدر مهم است که الگوریتمی به نام Page Layout دارد.
طراح سایت از شیوهای مختلفی برای طرح‌بندی صفحات سایت می‌تواند استفاده کند. اما بهترین گزینه این است که از سیستم گرید (Grid based layout) کمک بگیرد. در سیستم گرید، صفحه به مجموعه‌ای از ستون‌ها و ردیف‌ها تقسیم می‌شود. در هر ستون و ردیف هم Containerهایی برای قرارگرفتن المان‌ها وجود دارد. طراح سایت می‌تواند در هر Container المان‌ها را درکنار یکدیگر بچیند.
۶. سایت باید سازگار با نمایش در دستگاه‌های مختلف دیزاین و سریع بارگذاری شود
۱۰ سال پیش برای طراحان سایت مهم نبود سایتی که طراحی می‌کنند در دستگاه‌های مختلف (موبایل، تبلت، تلویزیون‌های هوشمند، لپ تاپ و …) و مرورگرهای مختلف خوب و درست نمایش داده شود. چون اساسا دستگاه‌های زیادی وجود نداشت. اگر در آن زمان وب دیزاینر سایت را برای دسکتاپ و متناسب با اندازه‌ی اسکرین آن طراحی می‌کرد، امروز برای طراحی و توسعه‌ی سایت اولویتی وجود دارد به‌نام موبایل فرست دیزاین.
صفحات سایت و تمام المان‌ها نه‌تنها باید در اسکرین‌های مختلف درست و کامل نمایش داده شود (یعنی سایت باید واکنش‌گرا طراحی شده باشد)، بلکه طراح سایت ازاول باید بادرنظرگرفتن کاربران موبایل و اسکرین‌های بسیار کوچک موبایل سایت را طراحی کند. علاوه‌بر این‌ها، بارگذاری محتوا و المان‌های صفحات سایت باید سریع باشد. کاربر صبر نمی‌کند تا صفحه‌ای کاملا لود شود و معمولا سایت را ترک می‌کند. پس، طراح نباید صفحات سایت را با گرافیک‌ها، تصاویر یا ویدئو‌ها خیلی سنگین کند. البته، وب دیزاینر نباید کیفیت تصاویر و عکس‌ها (یعنی جذابیت بصری سایت) را فدای سرعت کند.