ترند های طراحی وب سایت در سال ۲۰۱۸

ترند های طراحی وب سایت در سال ۲۰۱۸ 800 600 آرانیک وب

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

طراحی سایت

حرکات تعاملی در طراحی سایت

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

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

حرکات تعاملی در وب سایت

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

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

حرکات تعاملی در سایت

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

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

یکی از اسکریپ های مورد علاقه من Anime.js هستش که میتونید اینجا کلیک کنید و ببنید که چقد جذابه.

 CSS و جاوا اسکریپت در سایت

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

نمایش لوگو و برند در وب سایت

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

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

نمایش لوگو و برند در وب سایت

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

نمایش لوگو در سایت

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

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

استفاده از منحنی ها در طراحی وب سایت !

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

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

من این ترفند رو خیلی وقته دیدم و اگه بتونید با گرادیانت و بک گراند های جذاب هم مخلوطتشون کنید جذابیتشون چند برابر میشه.

 

یکی دیگه از تکنیک هایی که الان استفاده میشه استفاده از اشکال هندی چند ضلعیه

 اشکال چند ضلعیه در طراحی سایت

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

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

انیمیشین هایی مخصوص متون

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

انیمیشین هایی مخصوص متون

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

جاوا اسکریپ در طراحی سایت

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

پشتیبانی از صفحه نمایش های بزرگ

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

پشتیبانی از صفحه نمایش های بزرگ

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

 طراحی سایت پشتیبانی از صفحه نمایش های بزرگ

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

صفحات پهن یه به اصطلاح wide screen  برای وب سایت هایی که کار بلاگ و محتوایی می کنند مناسب نیستند چون هرچقد هر خط پاراگراف طولانی تر باشد خواننده رو خسته تر میکند. صفحات پهن اغلب برای وب سایت های شرکتی کاربرد داره که قرار نیست محتوای طولانی ارائه بدن.

دکمه های سه بعدی در طراحی وب

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

دکمه های سه بعدی در طراحی سایت

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

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

 

 

در دسترس بودن وب سایت!

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

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

از وقتی CSS3 معرفی شد امکانات زیادی بهش اضافه شد دو اپشن آخری که امسال زیاد استفاده شدند  flexbox   و css grid هستند.

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

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

سخن آخر!

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

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

طراحی سایت