در دنیای طراحی وبسایت همواره یکسری قواعد وجود دارند که می‌شود آن‌ها را روی هر پروژه‌ای اجرا کرد. من نام آن‌ها را گذاشته‌ام «دستورات طراحی وب».
مهم نیست که پروژه‌تان در چه اندازه‌ای باشد، اگر بتوانید این قواعد را روی آن‌ها اجرا نمایید می‌توانید به یک طراحی خوب دست پیدا کنید. پیروی کردن از چنین قواعدی باعث می‌شوند که با خطاها و مشکلات مختلف مواجه نشوید و بتوانید به درستی کار را جلو ببرید. بیایید این قواعد را بررسی کنیم.
۱. استوار و نامتناقض باشید
طراحی که همخوانی زیادی در بین اجزای مختلف آن وجود داشته باشد استفاده‌پذیری و درک‌پذیری بسیار بالایی را خواهد داشت. ساده بودن امر استفاده‌پذیری به کاربر این اجازه را می‌دهد تا بتواند به خوبی با وبسایت و قسمت‌های مختلف آن تعامل داشته باشد و بتواند چیز عالی را بسازد.
نامتناقض بودن به این معناست که باید رنگ دکمه‌ها، روش تعامل با آن‌ها، تایپوگرافی که استفاده می‌شود، اندازه‌ها و… در تمام طراحی شما یکسان بوده و تناقضی در آن‌ها نباشد. سعی نکنید در برگه اول برای قسمت عنوان از یک فونت و در برگه دیگری برای همان عنوان از فونت دیگری استفاده کنید. این کار باعث بهم ریختن طراحی و گنگ بودن آن می‌شود.
برای رنگ‌ها بهتر است یک جعبه رنگی منحصر به فرد را طراحی کنید. داشتن چنین جعبه رنگی این کمک را به شما می‌کند تا بتوانید یک‌دست عمل کنید و المان‌های بی‌مربوط را وارد طراحی‌تان نکنید. باید سعی کنید که از چنین فرمولی برای دیگر المان‌ها نیز استفاده نمایید. برای مثال سعی کنید یک گستره مشخص شده از اندازه‌ها را در نظر بگیرید. اجازه ندهید که یک المان معمولی با اندازه کاملا متفاوت از دیگر بخش‌ها در وبسایت‌تان نمایش داده شود.
سازگار بودن المان‌ها با همدیگر باعث می‌شود تا استفاده‌پذیری کلی وبسایت‌تان بالا برود و انجام تعامل با طراحی‌تان ساده‌تر شود.
۲. از فضاهای خالی استفاده کنید
افزودن فضای خالی به اطراف المان‌های یک طراحی باعث می‌شود تا استفاده کردن و مطالعه آن المان بسیار ساده شود.
لازم نیست که تمام المان‌ها را به همدیگر متصل کنید، می‌توانید با استفاده از فضاهای خالی یک ریتم و هارمونی زیبا را در وبسایت بوجود بیاورید. انجام چنین کاری به کاربران این کمک را می‌کند تا بتوانند بهتر وبسایت شما را ناوبری کرده و محتوای‌تان را مشاهده کنند.
استفاده کردن از فضاهای خالی در صفحاتی با اندازه کوچک‌تر این کمک را می‌کند تا جداسازی المان‌های داخل صفحه ساده‌تر شده و خواندن آن‌ها آسان‌تر شود. در یک صفحه موبایلی باید این موضوع را در نظر داشته باشید که چگونه می‌توانید دسترسی‌پذیری المان‌ها را بالاتر ببرید. اگر یک دکمه در یک صفحه موبایلی به اندازه کافی فضای خالی در اطراف خود داشته باشد مطمئنا لمس کردن آن ساده‌تر خواهد بود.
اگر مطمئن نیستید که در چه جاهایی باید فضای خالی را در اطراف المان‌های خود استفاده کنید، این نکات را مطالعه نمایید:
- در اطراف دکمه‌ها و یا دیگر المان‌های تعاملی.
- در بین خطوط و پاراگراف‌های یک محتوا، به اندازه‌ای که خوانایی راحتی داشته باشد.
- بین المان‌هایی که ارتباط معنایی مستقیمی با هم دارند. برای مثال متن توضیحات یک تصویر.
- بین فیلدهای مختلف یک فرم.
- بین تمام المان‌هایی که کاربر نیاز به گذاشتن فوکوس روی آن‌ها دارد.
۳. از Grid استفاده کنید
داشتن یک گرید یا لایه شبکه‌بندی شده مناسب پایه اصلی تجربه کاربری است. زمانی که از گرید استفاده می‌کنید، محل قرارگیری المان‌های وبسایت شما سازگارتر و منعطف‌تر خواهند بود.
گریدها به صورت افقی و عمودی قابل تنظیم هستند. بنابراین می‌توان برای پیاده‌سازی ایده‌های مختلف از آن استفاده کرد. اگر در قراردهی المان‌های مختلف مشکل دارید بهتر است از یک سیستم شبکه‌بندی شده مانند گرید بهره بگیرید.
۴. الگوهای کاربری را فراموش نکنید
کاربران همواره از طریق یک الگوی مشخص کارهای‌شان را انجام می‌دهند. برای آنکه تا جای ممکن بتوانید طراحی سازگار با خواسته‌های کاربران ایجاد کنید باید الگوهای کاربران را پذیرفته و آنان را دنبال نمایید. اینگونه مردم به خوبی می‌دانند که چگونه یک طراحی کار می‌کند.
الگوهای مرسوم کاربری شامل موارد زیر می‌شود:
- ترتیب نمایش اطلاعات مربوط به فرم‌ها از نام و ایمیل شروع شده و در نهایت با دکمه ثبت یا ارسال پایان می‌یابد.
- محل قرارگیری منوها باید در بالای وبسایت باشد.
- آيکون سبد خرید باید در کنار منو قرار بگیرد.
- شیوه کار رویدادها باید روال مرسوم خود را داشته باشد.
- آیکون جستجو در کنار منو قرار بگیرد.
الگوهای کاربری لیست بسیار بزرگی از جزئیات کاربران است که می‌توانید آن‌ها را در این لینک مطالعه نمایید.
۵. در تعاملات رابط کاربری شباهت‌هایی را ایجاد کنید
المان‌هایی که از یک نوع هستند باید یک شیوه از تعامل را در قسمت‌های مختلف وبسایت داشته باشند. این المان‌ها باید یک شکل از هویت بصری نیز داشته باشند تا کاربران دقیق‌تر بدانند که بعد از تعامل با المان چه اتفاقاتی امکان وقوع را دارند.
گروه‌بندی کردن المان‌های بصری نیز راهکار دیگری‌ست که می‌تواند به ایجاد یک هویت بصری کمک کند.
۶. از تایپوگرافی بدرستی استفاده کنید
یک قدم به عقب برگردید و ببینید که آیا کلمات شما به راحتی خوانده می‌شوند یا خیر. نیازی نیست که برای تشخیص چنین موضوعی یک متخصص در زمینه تایپوگرافی باشید. در هر صورت شناخت چنین موضوعی بسیار سخت نیست.
بخش حیاتی از کارایی وبسایت به میزان خوانایی مطالب آن مربوط می‌شود. شما باید مطمئن شوید که به درستی تایپوگرافی خودتان را انتخاب کرده‌اید. رعایت کردن کنتراست نیز یکی دیگر از عواملی است که به شما برای خوانا نگه داشتن متون کمک می‌کند. شما باید مطمئن شوید که رنگ قلم با رنگ پس‌زمینه به میزانی اختلاف دارد که متن به خوبی خوانده شود یا خیر.
۷. صفحات رتینا را فراموش نکنید
یک موضوع مهم که به عنوان طراح وبسایت باید به آن دقت داشته باشید شیوه نمایش پروژه نهایی‌تان در صفحاتی با اندازه‌های مختلف است. تصاویر و المان‌هایی که بیشترین تعامل را با امر رندرینگ دارند بسیار مهم هستند. شما باید مطمئن شوید که این المان ها به خوبی در یک صفحه نمایش نشان داده خواهند شد.
۸. صادق باشید
با طراحی که انجام میدهید صادقانه برخورد کنید. طراحی دیگران را ندزدید، از تصاویری که حق استفاده از آن‌ها را ندارید استفاده نکنید و برای بالا بردن ترافیک وبسایت از کلمات کلیدی نامربوط استفاده نکنید.
استفاده کردن از الگوهای تاریک نیز یکی دیگر از اتفاقاتی است که صداقت شما را خدشه‌دار می‌کند. کاربران نباید فکر کنند که گول می‌خورند و یا با وبسایتی سر و کار دارند که اعتماد کردن به آن دشوار است.
۹. دسترسی‌پذیری را نادیده نگیرید
وبسایت شما باید توسط حداکثر افراد در دنیا استفاده شود. شاید به نظر کار سختی باشد اما آنقدرها هم پیچیده نیست.
در وبسایت راکت مجموعه مقالات بسیار زیادی را برای نوشته‌ایم که به شما در پیاده‌سازی این امر کمک می‌کند. می‌توانید این مقالات را در این لینک مطالعه نمایید.
۱۰. وبسایت شما باید واکنشگر باشد
به نظر نمی‌رسد که گفتن چنین موضوعی در سال ۲۰۱۹ چندان واجب باشد چرا که همگان این موضوع را می‌دانند اما باز هم باید روی این موضوع تاکید شود. تمام طراحی‌ها باید روی تمام دستگاه‌ها به خوبی کار بکنند.
در پایان
داشتن یک مجموعه قواعد برای کار کردن می‌تواند به شما این کمک را بکند تا پروژه‌های‌تان را سریع‌تر و همخوان‌تر ایجاد کنید. نکته مهم موضوع اینجاست که هیچکدام از قواعد بالا به شما نمی‌گویند که ظاهر وبسایت شما باید به چه شکلی باشد، آن‌ها اصول و قواعد مهم وبسایت شما را هدف می‌گیرند.
آیا شما نظر متفاوت یا اضافه بر این موارد دارید؟ خوشحال می‌شویم با ما به اشتراک بگذارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید