20 نکته کلیدی در طراحی سایت (قسمت سوم)
در دو مقاله قبل درباره 13 نکته کلیدی در طراحی سایت سخن گفتیم. امروز نیز در ادامه این مقاله قصد داریم به 7 فاکتور کلیدی دیگر اشاره کنیم.
14. تجربه کاربری را در اولویت قرار دهید
تجربه کاربری فقط برای طراحان UX نیست. هرکسی که می‌خواهد مخاطبانش در وب‌سایتشان اقدامی انجام دهند (خواه اشتراک در لیست پستی باشد یا خرید چیزی) باید به سفر مشتری توجه کند. خبر خوب این است که این لزوماً نباید یک فرآیند پیچیده یا بسیار فنی باشد. این صرفاً در مورد آسان کردن هرچه بیشتر مخاطبان برای برداشتن مراحل مورد نظر است.
این وب سایت برای کتاب و سفر، طراحی ساده UX را در بهترین حالت خود به نمایش می گذارد. آنها دقیقاً می‌دانند که مخاطبانشان برای چه چیزی در آنجا هستند - برای جستجو و رزرو پرواز و محل اقامت - بنابراین آنها این قابلیت را مستقیماً در صفحه اصلی خود قرار داده‌اند. این یک دستگاه بیش از حد پیچیده نیست، اما مطمئناً یک دستگاه مؤثر است!
جهت سفارش طراحی سایت خبری و آگاهی از هزینه بازطراحی سایت به وبکده مراجعه کنید.
15. استفاده از سیستم های شبکه ای را در نظر بگیرید
استفاده از طرح‌بندی شبکه‌ای یک راه اشتباه برای اینکه وب‌سایت شما مرتب، منظم و حرفه‌ای به نظر برسد، است. در اصل، اینها خطوط افقی و عمودی متقاطع هستند که به عنوان راهنما برای قرار دادن و تراز کردن عناصر در ترکیب شما عمل می کنند. این یک ابزار بصری قدرتمند است که یکپارچگی و نظم را در طراحی شما ایجاد می‌کند - که می‌تواند به ویژه در زمانی که اتفاقات زیادی در جریان است مفید باشد!
در این مفهوم وبلاگ برای The Hilgart، طراح Ruslan Siiz از یک چیدمان مبتنی بر شبکه استفاده کرده است تا اساس چیدمان خود را تشکیل دهد. در حالی که برخی از عناصر نامتقارن و ستون های مختلف در سراسر این صفحه اصلی وجود دارد، این باعث می شود که ظاهری مرتب و ساختار یافته داشته باشید.
می توانید با قالب Canva’s Pink Advocacy Portfolio به جلوه ای مشابه دست پیدا کنید. طرح شبکه ای آماده آن به شما کمک می کند تا تعادل بصری را در طراحی وب سایت خود ایجاد کنید.
این وب سایت برای شرکت مالی Alpha Blue Ocean نشان می دهد که چگونه برای ایجاد تأثیر جدی به متن زیادی نیاز ندارید. آنها بلافاصله هدف برند خود را تنها در چند کلمه به نمایش گذاشته‌اند (با استفاده از یک حروف سفید واضح که در برابر پس‌زمینه آبی پر جنب و جوش برجسته می‌شود) با این حال، آنها همچنین به کاربر این امکان را می‌دهند که با استفاده از پیمایش در سمت چپ، اطلاعات بیشتری درباره آنها نشان دهد.
قالب وب‌سایت فروشگاه اینترنتی Canva’s Teal Books and Publishers دارای تمام عناصر بصری است که برای انتقال ساده و مؤثر پیام برند خود به آن نیاز دارید. به سادگی عنوان و عنوان فرعی را با عنوان خود تغییر دهید!
17. از عدم تغییر استفاده کنید
اصل تغییر ناپذیری زمانی است که شما یک گزینه متفاوت را در میان یک گروه همگن قرار دهید. این می تواند یک ابزار ضروری برای طراحی جداول قیمت در وب سایت شما باشد.
این جدول قیمت از تم وب سایت Envato Modern Bootstrap 4 نمونه ای عالی از این اصل در عمل است. در حالی که اکثر گزینه ها دارای یک کادر سفید با متن سیاه و یک دکمه قرمز هستند، رنگ آمیزی برای بسته "شرکتی" معکوس شده است. به طور طبیعی، چشم انسان مستقیماً به سمت دیگری می رود که متفاوت است - وقتی می خواهید توجه را به یک گزینه خاص یا پیشنهاد ویژه جلب کنید، می تواند به نفع شما باشد! زمانی که می‌خواهید کاربر را به انجام یک اقدام خاص تشویق کنید، می‌توان از تغییر ناپذیری در منوهای پیمایش استفاده کرد.
18. قانون هیک
در خارج از دنیای طراحی، این اصل به طور کلی به عنوان "خستگی تصمیم گیری" نامیده می شود. به نام روانشناسان بریتانیایی و آمریکایی ویلیام ادموند هیک و ری هیمن، این ایده وجود دارد که "با هر انتخاب اضافی زمان لازم برای تصمیم گیری افزایش می یابد." ، هرچه بیشتر کاربر خود را با گزینه های بسیار زیاد بارگذاری کنید (خواه دکمه ها یا گزینه های منو) بیشتر طول می کشد تا آنها را برای انجام اقدام ترغیب کنید. و از آنجایی که شما معمولاً فقط یک فرصت بسیار باریک برای تأثیرگذاری دارید، این چیز خوبی نیست! به همین دلیل است که بسیار مهم است که تماس‌های خود را محدود کنید و آن‌هایی را که استفاده می‌کنید تا حد امکان مؤثر کنید.
این وب سایت برای شرکت برق Green Mountain Energy به وضوح با در نظر گرفتن قانون هیک طراحی شده است. به کاربر تنها دو فراخوان برای اقدام اصلی داده می‌شود (که به لطف دکمه نارنجی به وضوح برجسته می‌شوند) که هدف بسیار مهم شناسایی خانه یا کسب‌وکار بودن آنها است. غذای آماده؟ فراخوانی برای اقدام بیشتر از آنچه مطلقاً نیاز دارید درج نکنید.
19. از تقارن استفاده کنید
در حالی که زمان و مکانی برای طرح‌های انتزاعی و نامتقارن وجود دارد، نمی‌توانید با تقارن اشتباه کنید. با اشاره به زمانی که دو نیمه از یک کل کاملاً یکدیگر را منعکس می کنند، این یک راه آسان است که بلافاصله طراحی وب سایت شما متعادل تر، مرتب و حرفه ای تر به نظر برسد.
این مفهوم طراحی برای یک شرکت کوله پشتی ثابت می کند که تقارن نباید خسته کننده باشد. طراح Gabe Becker با قرار دادن تصویر دختر در وسط هدر به تقارن عمودی و افقی دست یافته است. این با ردیفی از کیسه‌های کاملاً تراز شده در زیر منعکس شده است. این تکنیک بصری موثر حسی ساختار یافته به یک طراحی پر جنب و جوش و "صدا" می دهد.
آیا می خواهید در طراحی وب سایت خود به تقارن دست یابید؟ قالب وب‌سایت تجاری تبلیغات و بازاریابی نارنجی سیاه Canva همه کارهای سنگین را برای شما انجام داده است! تنها کاری که باید انجام دهید این است که رنگ ها، فونت ها و متن برند خود را اضافه کنید تا آن را متعلق به خودتان کنید.
20. طراحی هم برای وب و هم برای موبایل
اگر فقط به یک اصل طراحی وب سایت توجه می کنید، آن را به این یکی تبدیل کنید! گوشی‌های هوشمند راه به جایی نمی‌برند، در واقع، آنها به طور فزاینده‌ای به محبوب‌ترین روشی برای مصرف محتوا تبدیل می‌شوند. به همین دلیل است که طراحی با در نظر گرفتن دسکتاپ و موبایل بسیار مهم است. این بدان معناست که اطمینان حاصل کنید که سرصفحه‌ها و پاراگراف‌های شما در هر دو دستگاه به خوبی کار می‌کنند، هیچ تصویر یا سایر عناصر بصری قطع نشده است و استفاده از دکمه‌های شما در یک صفحه کوچک آسان است. همچنین شامل اطمینان از بارگیری سریع وب سایت شما در هر دو دستگاه است.
طراحی کوله پشتی موبایل توسط Gabe Becker از طریق Dribbble
بهینه سازی وب سایت خود برای تلفن همراه گاهی اوقات به معنای استفاده از طرح بندی های مختلف برای دسکتاپ است. این را می توانید در نسخه موبایل فرندل مثال بالا مشاهده کنید. در اینجا، آنها از یک تصویر تمام صفحه و طراحی شبکه ای به طور خاص برای بهبود تجربه تلفن همراه استفاده کرده اند. این نشان می دهد که چرا باید طراحی برای موبایل و وب را به عنوان دو نهاد مجزا در نظر گرفت.
رعایت این اصول طراحی باعث نمی شود که به قوانین پایبند باشید. این به سادگی تضمین می کند که شما یک پایه قوی دارید، بنابراین می توانید ریسک کنید و در جایی که مهم است آزمایش کنید.
منبع: https://www.canva.com/learn/20-web-design-principles-follow/