پيام خصوصي نقل قول تشکر کنيد حذف تشکر

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

گرایش طراحی سایت به

سرعت تغییر می کند. طراحی های مختلفی به اصطلاح برای دورۀکوتاهی مد می شوند و سپس

از مد خارج می شوند. در سال 2016 وب سایت ها گرایشاتمتفاوتی را نسبت به سال گذشته

در پیش خواهند گرفت. به عنوان یک طراح سایت بهتر استکه در جریان این تغییرات و

نوآوری های دنیای طراحی

وب سایت قرار بگیرید. این آگاهی سبب میشود که از رقبای خود پیشی

بگیرید و همزمان با استانداردهای جهانی حرکت کنید.مطمئناً مشتریان تفاوت سبک طراحی

شما با دیگران را متوجه خواهند شد. به یاد داشتهباشید که قرار نیست این گرایش به

معنی \"جدید و تازه\" باشد.

بسیاری از این

گرایشات و نکات در طراحی از سلایق مختلف و ترجیحات شخصی طراحان وب سایت و کاربران

نشات می گیرند. عاملی که این تغییرات را ممکن می سازد،پیشرفت در تکنولوژی است.

تکنولوژی فاکتور مهمی در اعمال تغییرات به حساب می آید.برای اینکه متوجه شویم که

گرایش طراحی وب سایت در سال 2016 به چه سمتی می

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

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

درسال 2015

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

2015 نسبت به سال 2014 تغییرات بسیاری کرد. نکاتی که درطراحی وب سایت در سال 2015

بسیار رعایت می شد عبارت بودند از:

o طراحی مینیمال

o طراحی فلت

o اسلایدرهای ویدیویی

o بک گراند ویدئو

o CSS animation

o Hero Image (تصاویر

بزرگی که در بالای وب سایت به عنوانبنر یا در مرکز وب سایت قرار داده می شوند. این

تصاویر معمولاً اولین المانی هستندکه نظرکاربران را به خود جذب می کند)

o منوهای همبرگری

o ریسپانسیو یا واکنشگرا بودن وب سایت

o پاپ آپ های مرتبت با خبرنامه

o طراحی به شیوه ابتدا موبایل

o Front-End Framework

از بسیاری از این

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

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

شد.

روند طراحی وب

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

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

سال 2016 می تواند در دو حرف الفبای لاتین خلاصه شود:U و X. شاید بتوان

یککلمۀ دیگر به این لیست افزود که آن کلمۀ \"موبایل\" است. روند طراحی

سایتدر سال 2016 به گونه ای خواهد بود که بهترین تجربۀ کاربری را داشته باشد و

کاملابر اساس پلت فرم های موبایل باشد. در چند سال گذشته نیز UX و

موبایلمحور بودن وب سایت ها از اهمیت خاصی برخوردار بودند اما اکنون این دو در

مرکز توجهطراحان وب سایت قرار دارند.

امسال ما شاهد بهبود

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

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

MaterialDesign

Material Design جایگزینیبرای

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

گرداند. متریال دیزاین پکیجی از استانداردهای طراحی شرکت گوگل است که المانها را

بر اساس مفاهیم لایه ای که در نرم افزارهای ویرایش عکس وجود دارد، جدا

میکند. Material Design می تواند المان ها را بر اساس نیاز حذف کند

یااضافه نماید، حتی می توان به صورت دستی با آن انیمیشن نیز ساخت.

در واقع زبان طراحی

است که با دستور العمل های مشخصی کار حدسی را به واقعیتتبدیل می کند. نتایج حاصل

از آن نیز در پلت فرم های مختلف کاملا یکسان است.همچنین، از آنجاییکه این

استانداردها توسط گوگل طراحی شده است، پشتیبانی بسیار قویاز آن ها صورت می گیرد.

البته ممکن است این

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

چالشی برای بهبود خلاقیت در محدودیت دانست.

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

Material design باطراحی

فلت تفاوت های بسیاری دارد. طراحی فلت، طراحی برای نشان دادن UI و المانهای

گرافیکی است. طراحی فلت به سادگی المان های تصویری را به ساده ترین شکل نشانمی

دهد. کاری که با المان های تصویری می کند در واقع تقلید جهان واقعی می باشدمانند

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

پرت می کند را کاهش می دهد و میزان اطلاعاتی که مخاطبان باید مطالعهکنند را کم می

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

باشد.

طراحی فلت می تواند

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

خوبی کار می کند. همچنین بسیار سریع بارگزاری می شود.اما مشکلی که وجود دارد این

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

استفاده کنید را محدود می کند و برخی اوقات وب سایت شمارا بیش از حد ساده می کند.

با این حال، طراحی

فلت به زودی از جهان وب خارج نخواهد شد. در واقع طراحیفلت علاوه بر مینیمال بودن و

ریسپانسیو بودن کاملاً با متریال دیزاین سازگاریدارد. طراحی فلت کاملاً بر روی

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

توان بین این دو تعادلی را برقرار ساخت. طراحیفلت لزوماً حوصله سر بر نیست.

Material design براساس

سه بعدی ایجاد شده است و برای افرادی مناسب است که می خواهند وب سایت شانطراحی

گرافیکی با سبک و سیاق داشته باشد. Material

design برخیاز

المان های قدیمی و منسوخ را نیز در اختیار شما قرار می دهد و شما می توانید برخلاف

طراحی فلت، از رنگ های مختلف و انیمیشن نیز استفاده نمایید.

Material design برروی

طراحی سازگار با موبایل تمرکز دارد به این علت که امروزه تعداد افرادی که ازموبایل

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

را یک پارچه می کند و سرعت آن را افزایش می دهد. انتظار می رود که در

سال2016 Material design به استاندارد طراحی وب سایت تبدیل شود.

تایپوگرافی

بالا رفتن رزولوشن

دستگاه ها و تصاویر و همچنین، ریسپانسیو شدن وب سایت هاسبب بهبود تایپوگرافی شده

است. به همین علت مجبوریم که از این مورد در روند طراحیسایت نام ببریم. تایپوگرافی

می بایست رنگارنگ و واضح باشد تا خواننده در نگاه اولمتوجه آن بشود. دو نوع فونتی

که معمولاً در تایپو گرافی (معمولاً به زبان انگلیسی)استفاده می شوند فونت های

خانوادۀ Serifs و Hand-Writing هستند. که از هر کدام در موارد خاص استفاده

میشود.

o فونت های Serifs بسیارخوانا و رسمی هستند. در گذشته به دلیل

پایین بودن رزولوشن تصاویر و دستگاه ها ازاین نوع فونت ها استفاده نمی شد. امروزه

رزولوشن صفحات نمایش و اندازه آنها در حالافزایش است. همچنین، طراحی لایه ها را

نیز تمیز تر می کنند و فضای بیشتری را دراختیار فونت های خاص قرار می دهند. به

زودی این نوع فونت ها همه جا را اشغالخواهند کرد.

o فونت های Handwriting شخصیتر هستند. اگر از آنها به درستی استفاده

شود، به وب سایت تان زیبایی خاصی می بخشدو آن را در نگاه مخاطبان بسیار خاص می

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

های شما در مانیتورهای کوچک خوانا باشند.فونت های Handwriting به

زودی در لوگوها، هدر ها، عناوین مطالب، منوها، کارت های تجاری و ... استفاده می

شوند.

مطلبی که باید در

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

موبایل دریافت می کنند. متاسفانه برخی از این دستگاه مانندتبلت Fire HD 10

صفحۀ نمایشی با روزلوشن پائین دارند. یکی از راهحل ها این است که تاپیوگرافی مورد

نظرتان بر اساس رزولوشن نمایشگرها نشان دادهشوند. به این معنی که فونت های serifs و handwriting بر

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

که رزولوشن پائین تری دارند فونت هاییمناسب با رزولوشن خود دریافت می کنند. البته

سرعت سرورها و زمان لود شدن نیز بایددر نظر گرفته شوند.

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

نه تنها تایپوگرافی

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

ها و Navigation نیز دستخوش تغییر می شوند. استفاده از تصاویر

به نوعی تغییر خواهد کرد. اگر تصاویر برایافکت ها و متون استفاده می شدند، در

آینده CSS و فونت هایجذاب برای افکت و تکست فقط برای تکست

استفاده خواهد شد. این کار سبب کاهش زمانبارگزاری وب سایت می شود.

Touch به یکی

ازمهم ترین المان ها تبدیل می شود. سایت های بسیاری از پلاگین هایی برای کنترل

عکسها به صورت Tap و Swipeهستند. این کار نه تنها باعث ریسپانسیو شدن وب سایت ها می شوند، بلکه

آنهارا وادار می کند نسبت به اندازه انگشتان، نوع صفحه نمایش، فشار وارد شده

برنمایشگر و ... واکنش نشان دهد. دکمه ها و فضای بین شان باید به اندازه کافی

بزرگباشند و فضای کافی بین شان باشد تا به طور اشتباهی لمس نشوند. این مسئله ما را

بهموضوع Mobile Layouts می کشاند.

MobileLayouts

طراحی مینیمال حاکم

دستگاه ها موبایل است. هنگامی که یک وب سایت از طریقتلفن همراه مشاهده می شود این

امکان وجود دارد که برخی از آپشن های نسخه دسکتاپنمایش داده نشوند. باقیه المان ها

بر اساس نوع و اندازه نمایشگر تنظیم می شوند.این کار باعث می شوند که متون وب سایت

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

سایت خود کاهش دهید تا وب سایت خود را بامحتوایی کامل بروی تلفن های همراه نشان

دهید.

اسلاید شو ها،

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

خوشبختانه، MaterialDesign المان هایتصویری را دوباره به طراحی وب سایت

باز می گرداند تا وب سایت ها دیگر خشک و سادهبه نظر نرسند.

همچنین، شما می

تواند یک تصویر را در سایزها یا رزولوشن های مختلف و براساس سایز صفحه نمایش رندر

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

بالای خود را حفظ خواهند کرد.

تصاویر بیشتر،

نوشتههای کوتاه تر

خریداران و مصرف

کنندگان یک محصول ترجیح می دهند بیشتر تصاویر و ویدئو هایشما را مشاهده کنند تا

اینکه وقت خود را صرف مطالعه محتوای شما کنند. این کار بین SEO و UX وب سایتشما

تعادل ایجاد می کند. موتورهای جستجوگر متونی را ترجیح می دهند که بتوانند آنهارا

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

از محتوای تصویر محور در صفحۀ نخست استفاده شود. اگر صفحۀ نخست شما به متناحتیاج دارد

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

قرار دهید و سپس به موتورهای جستجوگر اهمیت دهید.

امروزه مرورگرها

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

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

رزولوشن بالا تاکید بیشتری شود.

تایل ها (کاشی

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

در سال 2015، طراحی

های کاشی محور بسیاری را مشاهده کردیم. می توان گفت وبسایت Pinterest این نوع

طراحی سایت را مرسوم کرد. کارت هاطراحی وب سایت با اضافه نمودن عملکرد و تعامل،

طراحی وب سایت را به یک مرحلهبالاتر ارتقا داده اند. کارت ها، المان طراحی فوق

العاده ای هستند که با تمرکزبروی تصاویر و با استفاده از ابزارهای گوناگون محتوای

مطالب را در یک نگاه دراختیار مخاطبان قرار می دهند. آنها اساساً در حالیکه محتوا

را مینیمایز می کنند، Grid

Layouts ایجادمی

کنند.

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

Storytelling

داستان گویی پویا از

طریق تصاویر به همراه نوشتار انجام می پذیرد. این روشاز طراحی وب سایت چند سالی

است که محبوبیت خاصی بین طراحان ایجاد کرده است. ایننوع طراحی بازدیدکنندگان را

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

محصول یا خدمات، تاریخچۀ یک شرکت یا هرچیزی را کهمی خواهید مخاطبانتان بدانند

درباره شما و شرکت تان بدانند را به شکل خوبی به آنهانشان دهد. داستان گویی پویا

می تواند از طریق یک ویدئو در وب سایت صورت گیرد یااینکه مخاطبانتان می تواند با

کلیک و استرولینگ به مطالعۀ داستان شما بپردازند.

هرچند داستان گویی

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

اجرا شود. برای اینکه بتوانید داستان گویی پویا را بهبهترین شکل در وب سایت خود

اجرا نمایید می بایست محتوای وب سایت خود را به درستیبشناسید، از استوری برد

استفاده نمایید و بدانید که باید پیام خود را به بهتری شکلبه مخاطبان خود انتقال

دهید. در داستان گویی پویا مزایا و امکانات شما باید بهگونه ای هایلایت شوند که

تعادل بین متون و تصاویر به هم نریزد. اگر این تعادل درطراحی وب سایت لحاظ نشود

تجربه کاربری بدی را به مخاطبانتان ارائه می کند.

تمرکز بیشتر

برویدیدگاه کاربران

سیستم ورد پرس دارای

سیستم کامنت گذاری بسیاری قوی است، اما بیشترخوانندگان ترجیح می دهند برای مطالب

در شبکه های اجتماعی دیدگاه بگذارند تا برویمطالب خود وب سایت. برای اینکه بتوانید

دیدگاه های بیشتری بروی شبکه های اجتماعیبدست آورید، می بایست از سیستم دیدگاه های

شبکه های اجتماعی استفاده کنید تا خودسیستم نظردهی وردپرس. این باعث می شود که

مخاطبان شما بتوانند از طریق شبکه هایاجتماعی مختلف بروی مطالب وب سایت شما نظر

دهند.

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

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

طی چند سال گذشته،

خوانندگان دیگر توجهی به تبلیغات کناری وب سایت توجهنشان نمی دهند. صفحات نخست وب

سایت ها از مکانی برای قرار دادن بنرهای تبلیغاتی به Landing Page هاییبا

گرفیک تصویری فوق العاده تبدیل شده اند. صفحات وب سایت ها دارای بیشتر از

متوندارای تصاویر بیشتری هستند و تبلیغات به درون محتوا منتقل شده اند. این

کارنیازمند فضای زیادی برای Layout ها می باشد که ما را هدایت می کند به ...

تمرکز بیشتر بر

لایههای متون

مطمئناً شما نیز

پلاگین های سایت سازی را دیده اید که از طریق Drag & Drop به

کاربرانامکان می دهد که وب سایت خود را ایجاد نمایند، اما بهتر است بدانید که همۀ

پست هاییک وب سایت نیازمند طراحی Layout هستند. سیستم هایی که اجازه طراحی Layout را

بهکاربران می دهد بسیار محبوب خواهند شد چرا که کاربران می توانند از طریق فضای

ویجتها لایه ایجاد کنند و ماژول های خود را در وب سایت خود قرار دهند. این کار به

وبسایت شان ظاهر شیک و زیبایی می دهد.

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

در سال 2016

ابزارهای طراحی وب سایت متفاوتی معرفی شدند که که به طراحان وبسایت کمک می کنند تا

به خوبی نمونۀ اولیه وب سایت های خود را ایجاد کنند. برخی ازاین نرم افزارهای

عبارتند از:

AdobeProject

Comet

نرم افزار Adobe Project Comet امسال

به بازار عرضه خواهد شد. Adobe

Project Comet نرمافزاری

چند منظوره برای طراحیUX وب سایت از ابتدا تا انتها می باشد. این

نرمافزار دارای ابزاری برای طراحی بصری، WireFraming،

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

دستگاه مشاهدهنمایید. Adobe

Project Comet با نرم

افزارهای فوتوشاپ و ایلاستریتور به خوبیکار می کند و می توان با نصب پلاگین های

مختلف قابلیت های آن را گسترش داد.

Sketch

Sketch نرم

افزاریبرای سیستم عامل مکینتاش است که بسیاری از افراد به جای فوتوشاپ از آن

استفاده میکنند. این نرم افزار دارای محیط بسیار جذابی است و به طور اختصاصی برای

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

جهت ساخت المان ها وکتور و ... می باشد.

طراحی سایت شرکتی،طراحی سایت شخصی ،طراحی سایت پزشکی،طراحی سایت بیمه