پیش بینی روند طراحی وب در سال ۲۰۱۷

پیش بینی روند طراحی وب  در سال ۲۰۱۷ :  روند طراحی سایت به سرعت در حال تغییر است . وب سایت های امروزی به دنبال روش های متفاوتی حتی نسبت به یک سال پیش هستند .
به عنوان یک طراح وب ، دانستن روش های امروزی و روش های در پیش رو مفید خواهد بود . چرا که می تواند به شما در باقی ماندن در رقابت و تأمین نیازهای مشتریان کمک کند . بخاطر داشته باشید که ” روند”  لزوما معنای “جدید” نمی دهد .
بسیاری از روندهای طراحی جدید از سلیقه و ترجیحات کاربران و طراحان در طراحی و کارایی می آیند . چه چیزی این تغییرات در تکنولوژی را ممکن می سازد؟
تکنولوژی یک نیروی محرک عظیم است و همیشه به حرکت رو به جلوی طراحی کمک می کند .

 

 

طراحی سایت در سال 2017

 
برای کمک به درک جایگاهی که امروز داریم ، اجازه دهید نگاهی به جایی که بوده ایم بیندازیم .

جایگاهی که روند طراحی وب داشته است :

روند طراحی وب سایت در سال ۲۰۱۵ با اعمال بسیاری از اصلاحات ، روی روش های موجود در سال ۲۰۱۴ ایجاد شد  .

در سال های اخیر روش هایی وجود داشته از جمله:

  1. طراحی Minimal
  2. طراحی فلت
  3. اسلایدر ویدئو
  4. پس زمینه های ویدئویی
  5. انیمیشن CSS اسکرول طولانی
  6. تصاویر بسیار قوی
  7. منو های همبرگری
  8. واکنش گرایی
  9. نسخه های تلفن همراه
  10. پاپ آپ های عضویت در خبرنامه
  11. چارچوب Front-end

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

طراحی وب سایت در سال ۲۰۱۶

روش های طراحی وب ۲۰۱۶ احتمالا می تواند در دو حرف خلاصه شود : U و X . و شاید یک کلمه دیگر : mobile . این روند بهترین روش ها را برای UX و پلت فرم موبایل دنبال می کند .  UX و موبایل  در چند سال گذشته بیشتر در دید بودند . ولی امروزه آنها در تمرکز اصلی طراحان وب سایت با یک رابط کاربر منظم هستند .
امسال ما پالایش و استاندارسازی بیشتری بر روی روش های موجود خواهیم دید. خواهیم دید که مفاهیم از فقط ایده آل به سمت استاندارها پیش می روند . از یک قاعده جدید به یک روش معمول .

Material Design

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

در مقایسه با طراحی فلت 

Material Design از طراحی فلت متمایز است . طراحی فلت ، طراحی بر اساس نمایش رابط کاربر و عناصر گرافیکی است . طراحی فلت همه چیزهای زرق و برق دار که باعث انحراف از موضوع  شده راحذف می کند و میزان اطلاعاتی است که خواننده مجبور است با آن مواجه شود را کاهش می دهد. این طراحی رنگ های solid لبه های تیز و خطوط نازک دارد .
طراحی تخت برای خواندن روی دستگاههای موبایل مناسب و آسان است و به خوبی کار می کند .  به سرعت بارگذاری می شود . مشکل  این است که این ظاهر ثانویه است که میزان رنگ ها یی که شما می توانید استفاده کنید را محدود می کند و گاهی بسیار عمومی و معمولی به نظر می آید .
طراحی تخت جایی نمی رود . این روش در واقع با Material Design سازگار شده و خاصیت واکنش گرایی و حداقل سازی را خواهد داشت . تمرکز روی خاموش کردن آنچه که نیاز نیست ، می باشد بطوری که آنها می تواند روی چیزهایی که نیاز است متمرکز شوند . این روش توازن کامل بین این دو را پیدا خواهد کرد .
Material Design بر مبنای ۳d است . این انتخاب بهتری برای کسانی است که برخی از طراحی های بصری شیک را می خواهند . Material Design برخی ازعناصر طراحی را به شما می دهد . شما تنها با داشتن رنگ و بدون انیمیشن گیر نخواهید کرد .
Material Design روی دستگاههای موبایل تمرکز بیشتری دارد چرا که مصرف کنندگان بیشتر در حال استفاده از تلفن ههای هوشمند و تبلت ها  نسبت به دستگاههای اصلی هستند . ساده سازی و بالابردن سرعت در این روش مدنظر است . انتظار می رود طراحی مواد تبدیل به استانداردی در طراحی وب شود .

تایپوگرافی در طراحی سایت

افزایش کیفیت و طراحی واکنش گرا (طراحی سایت ریسپانسیو) باعث بهبود تایپوگرافی شده است . به همین دلیل تایپوگرافی یکی از روش های طراحی وب شده است که ما باید آن را مدنظر قرار دهیم .
تایپوگرافی می تواند دارای رنگ و برجسته باشد . می تواند یک بیانیه یا اعلامیه را ایجاد کند . دو روشی که من با تایپوگرافی دیده ام استفاده از serifs و  hand-writing بوده است . که هرکدام کاربرد خاص خود را دارند .
Serifs به بهبود خوانایی کمک می کند . آنها قبلا به دلیل صفحه نمایش با وضوح پایین تر و اندازه صفحه کوچکتر حذف شده بودند .
وضوح صفحه نمایش و سایز صفحه نمایش بزرگتر شده است . همچنین طراحی layout  خلوت تر است و فضای بیشتری برای فونت های زیبا وجود دارد . انتظار می رود طراحان در آینده  بیشتر از serifs در محتوای خود استفاده کنند .
Hand-writing شخصی تر است . اگر به درستی استفاده شود زیباست و حس تاثیرگذاری بیشتری به سایت می دهد . درست مثل serifs مشکل نگه داشتن سبک خوانا  و قابل خواندن بر روی صفحه نمایش های کوچک است . Hand-writing بیشتر در لوگوها عنوان پست ها ، هدر ، منوها ، کارت های ویزیت  و غیره استفاده می شود .
چیزی که باید مدنظر قرار بگیرد این است که کاربران بیشتری مصرف کنندگان محتوا روی دستگاههای موبایل هستند . متاسفانه دستگاههای موبایل پایینی مانند Fire HD 10  وضوح تصویر پایینی دارند .
این موضوع روی صفحه نمایش های بزرگتر به دلیل داشتن تراکم پیکسل کمتر با همان وضوح بیشتر قابل توجه است . یک راه حل نمایش تایپوگرافی بر مبنای وضوح صفحه نمایش است . به این معنی که روی دستگاههای موبایل از صفحه نمایش با وضوح بالا تا صفحه نمایش با وضوح پایین تر فونتی را که برای آن وضوح مناسب تر است را نمایش دهند .  البته سرعت سرور و زمان بارگذاری باید در نظر گرفته شود .

Mbile UX  :

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

Mobile layout

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

تصاویر بیشتر ، متن کمتر :

مصرف کنندگان تمایل بیشتری به دیدن عکس و ویدئو دارند و کمتر تمایل به دیدن متن دارند  . این امر یک تعادل بین SEO  و UX ایجاد کرده است . موتورهای جستجو متن را ترجیح می دهند . این می تواند باعث انتقال محتوای متنی غنی به زیر صفحات و محتوای عکسی غنی به صفحه اصلی شود . اگر در صفحه اصلی نیاز به متن دارید سعی کنید آن را تحت یک تصویر قرار دهید . هدف در درجه اول کاربران و در درجه دوم موتورهای جستجو هستند .
مرورگر ها در ارائه تصاویر سریع تر می شوند . این بدان معناست که عکس ها می توانند بزرگتر با وضوح بالاتری نسبت به قبل باشند . انتظار می رود در آینده تاکید بیشتری روی عکس  با کیفیت بالاتر و آثار هنری ایجاد شود .

کارت ها  جایگزین کاشی :

ما طراحی های زیادی بر مبنای کاشی در سال ۲۰۱۵ دیدیم . Pinterest  این طراحی محبوب را ایجاد کرد . کارت ها سطح عمیق تری  از طراحی را بوسیله اضافه کردن قابلیت ها و تعامل نیاز دارند . آنها می توانند اطلاعات بیشتری را با استفاده از Hover و با کوچک شدن یا یزرگ شدن کارت و … تولید کنند . کارت ها عنصر طراحی فوق العاده ای برای تمرکز روی تصاویر و ارائه یک راه حل قابل استفاده و کمک به ایجاد محتوای آسان است که قابل دیدن در یک نگاه است  .

داستان گویی پویا در طراحی سایت:

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

تمرکز بیشتر روی کامنت های اجتماعی

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

پلاگین های وجو دارد که به راحتی با drag  و  drop آنها می توان صفحات اصلی را ایجاد کرد . اما گاهی اوقات نیاز به یک طراحی جدید برای  پستهایمان  داریم . سیستم های طراحی که اجازه خلق طرح های جدید برای پست ها را می دهند و طراح می تواند با طرح بندی مناطق و ماژول ها ، سایت دلخواه خود را ایجاد کنند محبوب خواهند شد .

ابزار طراحی سایت :

برخی ابزارهای جالب برای کمک به طراحان برای وب سایت های نمونه و طراحی Layout در این سال عرضه خواهد شد .

نمونه هایی از این ابزارها که انتظار می رود در ساال ۲۰۱۷ متدوال شوند عبارتند از :

•    Adobe Project Comet

برنامه  Adobe Project Comet امسال عرضه می شود . این نرم افزار یک اپلیکیشن طراحی پلت فرم UX از آغاز تا پایان است . این برنامه ابزارهایی برای wireframing ، طراحی بصری ، طراحی تعاملی ، نمونه سازی و … دارد . شما می توانید آن را روی هر دستگاهی پیش نمایش کنید . این برنامه با فتوشاپ و IIIustrator کار میکند و می تواند از طریق پلاگین های جامع ساخته شده ، توسعه داده شود .

•    Sketch

Sketch یک برنامه برای مک است که محیط کاری زیبا و خوبی دارد و مخصوص طراحی وب و موبایل طراحی شده است و ویژگی هایی از قبیل Layer style ، افکت متن ، ابزار برای ایجاد عناصر وکتور و …. دارد .

منبع : طراحی سایت و سئو سایت وب نوش