وبلاگ کاسپید

10 گرایش معقول برای طراحی سایت

10 گرایش معقول برای طراحی سایت

 گرایشات طراحی سایت باید متناسب با نیازهای کاربر باشد. به عبارتی دیگر باید معقول باشد. یک اصل در حوزه طراحی وجود دارد، تحت عنوان «فرم تابع عملکرد» که بر مبنای این اصل، طراحان معمولا وسوسه می شوند تا سایت را بر اساس ویژگی های نرم افزار مرورگر، طراحی نمایند. هر چند که این امر در جای خود، یک تلاش برای طراحی وب سایت مناسب محسوب می شود اما فرم باید تابعی از احساست و نیازهای روانی کاربران باشد.

بنابراین آن گرایشاتی که صرفا به دنبال زیبایی و چشم نواز بودن هستند را کنار بگذارید. زیرا هدف ما این است که وب سایتی طراحی کنیم تا برای کاربران سودمند باشد. امسال عصر سودمندگرایی است. در اینجا 10 مورد از مهم ترین گرایشات طراحی سایت را ذکر می کنیم:

1.کاهش لینکهای منو

در سال 2016 بسیاری از سایت ها، طراحی وب سایت خود را با کاهش لینکهای ناوبری اولیه تغییر دادند که این امر به یک گرایش طراحی سایت در سال 2017 تبدیل شد. منوهای اصلی که قبلا 5 تا 7 لینک داشتند، به 3 تا 4 لینک کاهش یافتند. یکی از دلایل آن، این است که زیادبودن تعداد لینکهای منو، موجب دشوار سازی فرایند انتخاب می شود. در صورتی که اگر تعداد لینکها کمتر باشد، کاربر به راحتی می تواند لینک مورد نظر خود را انتخاب نماید و به چیزی که در جستجوی آن بوده، دست یابد.

2. خداحافظی با منوهای همبرگری (Hamburger Menu)

منوهای همبرگری به شکل (☰) هستند. با منوهای همبرگری خداحافظی کنید. زیرا این منوها از نماد استفاده می کنند در حالی که کاربران اغلب نماد را تشخیص نمی دهند و برای آنها کاملا قابل مشاهده نیست. مهمتر از همه، منوهای همبرگری، دارای مفهوم عمیق و گسترده ای هستند که خارج از دید و ذهن کاربران است و هیچ راهنمایی به آنها ارائه نمی دهد که در نهایت موجب خروج آن ها از سایت می شود.

3. افکت Duotones

یک جستجوی تصویری گوگل برای نمونه های Duotones انجام دهید تا نمونه های زیادی را ببینید. در زیر، من یک تصویر از Capital One Labs را به شما نشان می دهم که از این افکت برای افزایش سطح کیفی صفحه اصلی خود استفاده میکند. این افکت برای ایجاد تعادل در یک وبسایت کوچک و شلوغ (پربازدید) استفاده می شود. تصاویر را میتوان به این طریق در وبسایت گنجانید، بدون اینکه چشم کاربر را از پیامهای کلیدی یا ناوبری منحرف نماید و موجب دیده نشدن پیام ها و منوها توسط کاربر بشود.

از این تصاویر به جای زمینه های با رزولوشن بالا یا برای ایجاد سازگاری در زمانی که چندین تصویر با هم نمایش داده می شوند، استفاده می گردد.


افکت تصاویر در طراحی سایت

4. طراحی Tactile

گوگل شیوه طراحی مواد (Material Design) خود را در سال 2016 معرفی کرده است که این شیوه به یک گرایش در میان طراحان وب سایت در سال 2017 تبدیل شده است. بطور خلاصه، طراحی مواد دارای بسیاری از ویژگیهای طراحی تخت (flat design) است از قبیل بلد بودن (bold)، گرافیکی بودن و استفاده از رنگ های زیاد. امابا این تفاوت که از مواد به عنوان یک شبیه سازی استفاده میکند و شامل ویژگی های لمسی مانند سطوح ولبه ها (edge) و همچنین فضای منطقی و واقعی است. هدف این سبک طراحی، یکپارچه سازی تجربه کاربر (UX) درتمامی سیستم عاملها و دستگاه ها با ابعاد مختلف است. در واقع بر تجربه کاربر (UX) متمرکز است.


طراحی tactile

5. خداحافظی با اسکرول پارالاکسparallax scrolling

اسکرول پارالاکس نوعی گرایش در طراحی سایت است که هدف آن تحت تاثیر قرار دادن مخاطب است نه ارائه خدمت به وی. این سبک از پس زمینه و پیش زمینه هایی استفاده میکند که با سرعت های مختلف حرکت می کنند، که هدف آن اضافه کردن عمق به صفحه است. بسیاری از سایت ها از سبک scroll jacking استفاده می کنند، این ویژگی برای برخی از کاربران آزاردهنده و گیج کننده است زیرا اسکرول ماوس با حرکت صفحه مطابقت ندارد.

ایراد دیگر اسکرول پارالاکس، به غیر از به اشتباه انداختن کاربران، سئوی ضعیف و زیاد بودن زمان برای لود یا بارگیری صفحه است. درسال 2016، تصور بر این بود که متحرک بودن (انیمیشن) می تواند روش خوب و استانداردی برای طراحی وب سایت باشد، اما تمرکز این سال بر روی عملکرد بوده و نشان داده است که اسکرول پارالاکس، برای کاربر، بیش از حد مزاحم و آزاردهنده است.

6. موشن معنادار (Meaningful motion)

یکی از اصول طراحی مواد، ارائه موشن های معنادار است. یک مورد برای بهبود موشن یا حرکت در صفحات وب و برنامه ها وجود دارد که گوگل آنرا به خوبی بیان کرد و گفت که حرکت باید معنی دار و مناسب باشد و موجب حفظ تمرکز و توجه شود و استمرار داشته باشد. در این سبک، بازخورد حرکت، ظریف اما واضح است و حالت گذر و انتقال (Transition) نیز کارامد و هماهنگ می باشد.

7. خداحافظی با تصاویر استوک کم ارزش (crappy stock)

در حال حاضر، تصاویر باکیفیت بالا در دسترس همه ما قرار دارد. نکته ای که می توان به آن اشاره کرد این است که وب سایت شرکتهایی که کاربر محور و در حال تحول دیجیتالی هستند، نباید از تصاویر استوک کم ارزش، بی معنا، غیر مرتبط و خنثی استفاده کنند. وبسایت شرکت ها باید جذاب باشد و ارزشهای کسب و کار را منعکس نماید. این امر با استفاده از تصاویر استوک کم ارزش، امکان پذیر نیست.

8. اپلیکیشن های کمتر، PWA های بیشتر

با توسعه PWA ها یعنی وب اپلیکیشن های پیش رونده، در سال 2016، میزان استفاده از سبک طراحی سایت با الهام از اپلیکیشن ها (APP) افزایش یافت. PWAها(progressive web apps) ازتکنولوژی مرورگر HTML5 استفاده می کنند و با استفاده از جاوا اسکریپت به پنهان کردن «پوسته برنامه یا اسکریپت ها» در اولین بازدید، ارائه قابلیتهای آفلاین و همچنین ارائه نوتیفیکیشن و آیکون صفحه اصلی می پردازند.

9. فونت های گوگل

مجموعه فونتهای منبع باز (open source) توسط گوگل در سال 2010 ارائه شد. درسال 2016،گوگل علاوه بر کار کردن بر روی طراحی مواد، خدمات گوگل فونت را نیز اصلاح کرد. پیش نمایش این فونتها سریعتر و آسانتر است. قابلیت پیش نمایش فونتها در یک نمونه کامل از رنگهای پس زمینه وجود دارد. این امر، کانفیگ یا پیکربندی فونتها را نیز آسانتر میکند و مجموعه فونت Featured Collection نیز برای سبک طراحی مواد (Material Design) مناسب هستند. همچنین، گوگل یک فونت رایگان با نام Noto را ارائه داده است که از 800 زبان مختلف در دنیا پشتیبانی می کند و برای ایجاد یک پلتفرم مشترک و سازگار این فونت را ارائه داده است. به طوریکه در هنگام تغییر تنظیمات زبان یا استفاده از چند اسکریپت در کنار هم، یکپارچگی و انسجام متن، حفظ خواهد شد. انتظارمی رود که طراحان، بیشتر از فونت های گوگل استفاده نمایند.

10. مینیمالیسم (سبک طراحی مینیمال)

این گرایش شامل چندین مورد است. مینیمالیسم به معنی تاکید بر عملکرد (سرعت) و تجربه کاربری منظم (uncluttered UX) است. این گرایش با حرکت به سمت طراحی وب سایت های واکنش گرا (یا ریسپانسیو) آغاز شد که هدف، ایجاد وبسایت هایی بود که درصفحه نمایش تلفن همراه، قابل مشاهده و قابل اسکرول باشند. زیرا کاربران انتظار ندارند که همه محتویات در بالای صفحه قرار بگیرند. در این گرایش، تایپوگرافی، کنتراست و فضا همگی دارای اهمیت هستند.

27 مهر 1396
برخی برند های طرف قرارداد با کاسپید
  • زعفران سحرخیززعفران سحرخیز
  • شرکت نیک کالاشرکت نیک کالا
  • صنایع غذایی مارینصنایع غذایی مارین
  • شرکت تهران داروشرکت تهران دارو
  • شرکت زرین غزال (بستنی دایتی)شرکت زرین غزال (بستنی دایتی)
  • شرکت پاکسانشرکت پاکسان
  • فدراسیون فوتبالفدراسیون فوتبال
  • بیمه رازیبیمه رازی
  • چیچکچیچک
  • بهریزانبهریزان
  • برنج آوازهبرنج آوازه
  • پخش قاسم ایرانپخش قاسم ایران
  • لینا نیکلینا نیک
  • عطر بیکعطر بیک
  • امرسانامرسان
  • صنایع غذایی هانیصنایع غذایی هانی
  • نوین زعفراننوین زعفران
  • صنایع غذایی شام شامصنایع غذایی شام شام
  • شرکت ایران گلابشرکت ایران گلاب
  • هتل مارینا پارک کیشهتل مارینا پارک کیش
  • شرکت ایرانکو (سونی)شرکت ایرانکو (سونی)
  • شرکت ساپکوشرکت ساپکو
  • چینی زرینچینی زرین
  • پمپ ایرانپمپ ایران
  • مارگارینمارگارین
  • صنایع غذایی ب.آصنایع غذایی ب.آ
  • جهان ترابر ماهانجهان ترابر ماهان
  • کیش ایرکیش ایر
  • خانه و آشپزخانهخانه و آشپزخانه
  • پارمیداپارمیدا