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