طراحی وب سایت در سال 2016 به چه شکل خواهد بود

گرایش طراحی سایت ادوردز نوینبه سرعت تغییر می کند. طراحی های مختلفی به اصطلاح برای دورۀ کوتاهی مد می شوند و سپس از مد خارج می شوند. در سال 2016 وب سایت ها گرایشات متفاوتی را نسبت به سال گذشته در پیش خواهند گرفت. به عنوان یک طراح سایتگوگل ادز بهتر است که در جریان این تغییرات و نوآوری های دنیای وبلاگ بازاریابی اینترنتی قرار بگیرید. این آگاهی سبب می شود که از رقبای خود پیشی بگیرید و همزمان با استانداردهای جهانی حرکتت کنید. مطمئناً مشتریان تفاوت سبک طراحی شما با دیگران را متوجه خواهند شد. به یاد داشته باشید که قرار نیست اینن گرایش به معنی \"جدید و تازه\" باشد.

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

روند طراحی سایت در سال 2015

طراحی سایت در سال 2015 نسبت به سال 2014 تغییرات بسیاری کرد. نکاتی که در طراحی وب سایت در سال 2015 بسیار رعایت می شد عبارت بودند از:

• طراحی مینیمال
• طراحی فلت
• سئو سایت
• اسلایدرهای ویدیویی
• بک گراند ویدئو
• CSS animation
• Hero Image (تصاویر بزرگی که در http://www.novin.com/seo​ به عنوان بنر یا در مرکز وب سایت قرار داده می شوند. این تصاویر معمولاً اولین المانی هستند که نظرکاربران را به خود جذب می کند)
• منوهای همبرگری
• ریسپانسیو یا واکنشگرا بودن وب سایت
• پاپ آپ های مرتبت با خبرنامه
• طراحی به شیوه ابتدا موبایل
• Front-End Framework

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

روند طراحی وب سایت به چه سمتی حرکت می کند

روند طراحی سایت در سال 2016 می تواند در دو حرف الفبای لاتین خلاصه شود:U و X. شاید بتوان یک کلمۀ دیگر به این لیست افزود که آن کلمۀ \"موبایل\" است. روند طراحی سایت در سال 2016 به گونه ای خواهد بود که بهترین تجربۀ کاربری را داشته باشد و کاملا بر اساس پلت فرم های موبایل باشد. در چند سال گذشته نیز UX و موبایل محور بودن وب سایت ها از اهمیت خاصی برخوردار بودند اما اکنون این دو در مرکز توجه طراحان وب سایت قرار دارند.

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

Material Design

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

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

البته ممکن است این دستور العمل ها مانع بروز خلاقیت در بین طراحان وب سایت شود اما می توان آن را چالشی برای بهبود خلاقیت در محدودیت دانست.

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

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

طراحی فلت می تواند به راحتی در دستگاه های قابل حمل خوانده شود. این نوع طراحی کاملاً عملی است و به خوبی کار می کند. همچنین بسیار سریع بارگزاری می شود. اما مشکلی که وجود دارد این است که ظاهر برای آن در درجۀ دوم قرار دارد. طراحی فلت رنگ هایی که شما می توانید استفاده کنید را محدود می کند و برخی اوقات وب سایت شما را بیش از حد ساده می کند.

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

Material design بر اساس سه بعدی ایجاد شده است و برای افرادی مناسب است که می خواهند وب سایت شان طراحی گرافیکی با سبک و سیاق داشته باشد. Material design برخی از المان های قدیمی و منسوخ را نیز در اختیار شما قرار می دهد و شما می توانید بر خلاف طراحی فلت، از رنگ های مختلف و انیمیشن نیز استفاده نمایید.

Material design بر روی طراحی سازگار با موبایل تمرکز دارد به این علت که امروزه تعداد افرادی که از موبایل یا تبلت خود از اینترنت استفاده می کنند، در حال افزایش است. Material design وب سایت را یک پارچه می کند و سرعت آن را افزایش می دهد. انتظار می رود که در سال 2016 Material design به استاندارد طراحی وب سایت تبدیل شود.

تایپوگرافی

بالا رفتن رزولوشن دستگاه ها و تصاویر و همچنین، ریسپانسیو شدن وب سایت ها سبب بهبود تایپوگرافی شده است. به همین علت مجبوریم که از این مورد در روند طراحی سایت نام ببریم. تایپوگرافی می بایست رنگارنگ و واضح باشد تا خواننده در نگاه اول متوجه آن بشود. دو نوع فونتی که معمولاً در تایپو گرافی (معمولاً به زبان انگلیسی) استفاده می شوند فونت های خانوادۀ Serifs و Hand-Writing هستند. که از هر کدام در موارد خاص استفاده می شود.

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

مطلبی که باید در نظر بگیرید این است که امروزه بیشتر کاربران محتوای شما را بر روی دستگاه های موبایل دریافت می کنند. متاسفانه برخی از این دستگاه مانند تبلت Fire HD 10 صفحۀ نمایشی با روزلوشن پائین دارند. یکی از راه حل ها این است که تاپیوگرافی مورد نظرتان بر اساس رزولوشن نمایشگرها نشان داده شوند. به این معنی که فونت های serifs و handwriting بر روی دستگاه های موبایل با رزولوشن بالا نمایش داده می شوند در حالیکه دستگاه هایی که رزولوشن پائین تری دارند فونت هایی مناسب با رزولوشن خود دریافت می کنند. البته سرعت سرورها و زمان لود شدن نیز باید در نظر گرفته شوند.

تجربۀ کاربری موبایل UX

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

Touch به یکی از مهم ترین المان ها تبدیل می شود. سایت های بسیاری از پلاگین هایی برای کنترل عکس ها به صورت Tap و Swipe هستند. این کار نه تنها باعث ریسپانسیو شدن وب سایت ها می شوند، بلکه آنها را وادار می کند نسبت به اندازه انگشتان، نوع صفحه نمایش، فشار وارد شده بر نمایشگر و ... واکنش نشان دهد. دکمه ها و فضای بین شان باید به اندازه کافی بزرگ باشند و فضای کافی بین شان باشد تا به طور اشتباهی لمس نشوند. این مسئله ما را به موضوع Mobile Layouts می کشاند.

Mobile Layouts

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

اسلاید شو ها، تصاویر، دکمه ها، المان ها، منو ها و ... باید با در نظر گرفتن موبایل ساخته شوند. خوشبختانه، Material Design المان های تصویری را دوباره به طراحی وب سایت باز می گرداند تا وب سایت ها دیگر خشک و ساده به نظر نرسند.

همچنین، شما می تواند یک تصویر را در سایزها یا رزولوشن های مختلف و بر اساس سایز صفحه نمایش رندر کنید. این کار سبب افزایش سرعت در لود شدن وب سایت می شود و تصاویر همچنان کیفیت بالای خود را حفظ خواهند کرد.

تصاویر بیشتر، نوشته های کوتاه تر

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

امروزه مرورگرها سریعتر از گذشته تصاویر را رندر می کنند. این تصاویر می توانند بزرگتر از گذشته و با رزولوشن بالاتری باشند. انتظار می رود که در سال 2016 بروی تصاویر با اندازه و رزولوشن بالا تاکید بیشتری شود.

تایل ها (کاشی ها) جای خود را به کارت می دهند

در سال 2015، طراحی های کاشی محور بسیاری را مشاهده کردیم. می توان گفت وب سایت Pinterest این نوع طراحی سایت را مرسوم کرد. کارت ها طراحی وب سایت با اضافه نمودن عملکرد و تعامل، طراحی وب سایت را به یک مرحله بالاتر ارتقا داده اند. کارت ها، المان طراحی فوق العاده ای هستند که با تمرکز بروی تصاویر و با استفاده از ابزارهای گوناگون محتوای مطالب را در یک نگاه در اختیار مخاطبان قرار می دهند. آنها اساساً در حالیکه محتوا را مینیمایز می کنند، Grid Layouts ایجاد می کنند.

داستان گویی پویا یا Dynamic Storytelling

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

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

تمرکز بیشتر بروی دیدگاه کاربران

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

تمرکز بیشتر بر محتوا و تمرکز کم تر بروی تبلیغات

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

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

مطمئناً شما نیز پلاگین های سایت سازی را دیده اید که از طریق Drag & Drop به کاربران امکان می دهد که وب سایت خود را ایجاد نمایند، اما بهتر است بدانید که همۀ پست های یک وب سایت نیازمند طراحی Layout هستند. سیستم هایی که اجازه طراحی Layout را به کاربران می دهد بسیار محبوب خواهند شد چرا که کاربران می توانند از طریق فضای ویجت ها لایه ایجاد کنند و ماژول های خود را در وب سایت خود قرار دهند. این کار به وب سایت شان ظاهر شیک و زیبایی می دهد.

ابزارهای طراحان

در سال 2016 ابزارهای طراحی وب سایت متفاوتی معرفی شدند که که به طراحان وب سایت کمک می کنند تا به خوبی نمونۀ اولیه وب سایت های خود را ایجاد کنند. برخی از این نرم افزارهای عبارتند از:

Adobe Project Comet

نرم افزار Adobe Project Comet امسال به بازار عرضه خواهد شد. Adobe Project Comet نرم افزاری چند منظوره برای طراحی UX وب سایت از ابتدا تا انتها می باشد. این نرم افزار دارای ابزاری برای طراحی بصری، Wire Framing، طراحی تعاملی، نمونه سازی و ... می باشد. همچنین شما می توانید آن را بروی هر دستگاه مشاهده نمایید. Adobe Project Comet با نرم افزارهای فوتوشاپ و ایلاستریتور به خوبی کار می کند و می توان با نصب پلاگین های مختلف قابلیت های آن را گسترش داد.

Sketch

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

نتیجه گیری

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

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