12 مورد از داغترین روند طراحی وب وردپرس در سال 2020
در میان درخشش ، زرق و برق و حیاط نوعی پارچه ابریشمی در نمایشگاه باند هفته مد - خواه در میلان ، پاریس ، یا اپل بزرگ - دو چیز قطعی است:
ویرایشگر Vogue عینک آفتابی را در داخل خانه خواهد پوشید.
برخی از طرح ها به بالاترین سطح صعود می کنند و محصول جدیدی را برای فصل آینده ایجاد می کنند.
تروجان وردپرس تفاوتی ندارد. خوب ، به جز ویرایشگر قسمت Vogue .
برای اینکه سایت خود را در لبه پیشرفت و توسعه وب قرار دهید ، باید درک کنید که محبوبیت در انجمن وردپرس چیست . مهمتر از همه ، باید درک کنید که چرا بعضی از روندها ، خوب ، مد روز می شوند.
حتی اگر به نظر برسد ، آنچه محبوب است ، بندرت خودسرانه است. با درک زمان و چرا پیاده سازی عناصر اصلی طراحی ، شما بهتر می توانید یک سایت وردپرس ایجاد کنید که زیبا ، مدرن و کاربردی باشد.
بیایید با نگاهی به 12 روند جالب امروز در طراحی وب شروع کنیم. سپس ما به شما نشان می دهیم که چگونه می توان آنها را در وب سایت وردپرس خود پیاده سازی کرد.
1. سازندگان وب سایت
حتی با وجود هزاران مضمون موجود ، می توان یک طراحی وب سایت را ایجاد کرد که واقعاً مورد نظر شما باشد. با این حال ، این الگوی به آرامی در حال تغییر است ، زیرا طراحی وب دموکراتیک تر می شود.
این تا حدی نتیجه افزایش محبوبیت برای سازندگان وب سایت است . اینها از رابط آنچه می بینید همان چیزی است که شما می توانید استفاده کنید (WYSIWYG) که به همه کاربران امکان می دهد به سرعت صفحات وب خود را تنظیم کنند. سازندگان وب سایت آستانه طراحی وب را پایین می آورند ، حتی به کاربران بی تجربه امکان ایجاد سایت های جالب و منحصر به فرد را می دهند - سریع.
برای همگام شدن با رقبا ، وردپرس بیشتر روی این نوع عملکردها تمرکز دارد. سازندگان محبوب WYSIWYG وجود دارند که صریحاً برای وردپرس ایجاد شده اند که مدتی است مانند Beaver Builder و Elementor وجود دارند .
وردپرس در سال 2018 با انتشار کامل مقیاس Block Editor وارد عمل شد . این ویرایشگر اخیراً به عنوان بخشی از هسته وردپرس منتشر شد. این جایگزین ویرایشگر مبتنی بر TinyMCE به که به مدت طولانی بومی CMS بوده است.
با الهام از دیگر سازندگان WYSIWYG ، Block Editor دارای یک رابط کشیدن و رها کردن است که به شما امکان می دهد تا بطور آزاد مناطق مختلف یک پست یا صفحه را به صورت رایگان تنظیم کنید. این یک سازنده صفحه نیست - به طور مثال به شما امکان نمی دهد تم ها را شخصی سازی کنید - بلکه تحت تأثیر طبیعت پویا و کاربرپسند رابط های سازنده قرار دارد.
این تغییر بر روی تجربه وردپرس تأثیر گذاشت و پروژه جنجالی بود . حتی با این وجود ، به نظر می رسد که سازندگان صفحه راه آینده هستند و ما احتمالاً شاهد هستیم که آنها در سالهای آینده در حال تکامل و رشد هستند.
2. مینیمالیسم تکامل یافته است
طراحی آپارتمان مدتی است که پرطرفدار است و به نظر نمی رسد به هر جایی برود. این نوع طراحی مینیمالیستی ضمن استفاده از رنگهای صاف ، وضوح و فضای سفید زیادی روی سادگی متمرکز است.
این امر نه تنها تمرکز خود را بر نمایش مطالب شما نشان می دهد ، بلکه این اطمینان را می دهد که سایت شما سریع بارگذاری می شود و از نظر همه دستگاه ها خوب به نظر می رسد. این نوع مینیمالیسم را می توان در مضمون آرنولد مشاهده کرد ، که با هدف خلاقیت ساخته شده و از فضای سفید استفاده عالی می کند تا متن و تصاویر هر دو درخشش پیدا کنند.
این روند ممکن است یک پایه اصلی باشد ، اما این بدان معنا نیست که روند رو به رشد کاهنده است. در حقیقت ، طرح ها در حال تحول هستند تا شیب ها ، سایه ها و تصاویر را تا حد قابل توجهی تر بگنجانند. این باعث ایجاد عمق بیشتر در صفحه می شود و می تواند منجر به برخی از طرح های چشم نواز شود.
نمونه کامل این اثر Hue است که باعث می شود از فونت های بزرگ ، شفاف و رنگ های شیب دار برای ایجاد سبک های به یاد ماندنی استفاده کنید.
استفاده از عکاسی و ویدئویی بزرگ ، که توجه زیادی را به خود جلب می کند ، نیز محبوبیت خود را افزایش می دهد ، زیرا اتصال سریعتر اینترنت عادی تر می شود. مضامین هایی مانند Kalium از این مزیت استفاده می کنند ، یک طراحی کلی حداقلی را با هدرهای تمام عرض جفت می کنند.
با استفاده از این رویکرد کمتر و بیشتر برای طراحی ، می توانید وب سایتهایی ایجاد کنید که از هم متمایز باشند. به علاوه ، این می تواند به بهبود سرعت بارگذاری سایت شما کمک کند و اطلاعات لازم را برای بازدید کنندگان آسانتر کند.
مرتبط: نحوه انتخاب موضوع مناسب وردپرس برای وب سایت شما
3. اشباع زیاد و رنگهای پر جنب و جوش
روزهای "شما می توانید هر رنگی را که دوست دارید داشته باشید ، تا زمانی که سیاه باشد" از بین رفته است. امروزه ، رنگ های جسورانه و ترکیب های متضاد امری عادی است. افراد نسبت به رنگ واکنشهای احشایی زیادی دارند ، بنابراین انتخاب رنگ شما می تواند تاثیری در نحوه درک یک مارک یا وب سایت داشته باشد. در حقیقت ، طبق گفته بافر ، 90? ارزیابی ما وقتی صحبت از محصولات می شود فقط بر اساس رنگ ساخته می شود.
این دلیل بر این است که استفاده از ترکیبی چشمگیر از رنگها راهی مناسب برای پاپ سایت شما است. طراحان وردپرس نیز روی این روند نخوابیده اند. بسیاری از تم ها تمرکز رنگ محور دارند.
به عنوان مثال ، موضوع Skin به شما امکان می دهد دو رنگ را انتخاب کنید ، و یک طرح شیب برای سایت شما ایجاد می کند. همچنین می توانید شیب های مخصوص خود را ایجاد کرده و الگوی و بافت اضافه کنید.
یکی دیگر از این روند ، و موردی که اخیراً محبوب تر می شود ، استفاده از تضادهای تند است . استفاده از رنگ های متضاد به سایت شما سرگرمی ، زیبایی هنری می بخشد و همچنین می تواند در دسترس بودن به شما کمک کند .
یکی از موضوعاتی که این چاه را از بین می برد Piñata است ، با رنگ های پر جنب و جوش آن که کاملاً قابل تنظیم است.
این باورنکردنی است که برخی از کاربردهای خلاقانه رنگ می توانند انجام دهند تا طراحی ساده ای از صفحه انجام شود. همانطور که با موضوع Piñata می بینید ، نگه داشتن یک رنگ بندی مداوم در سایت شما ، از جمله در تصاویر ، می تواند آن را به چیزی فراموش نشدنی تبدیل کند.
4- چیدمان های نامتقارن و شکسته
مینیمالیسم و ??طرح های تخت همه خوب و خوب هستند ، اما گاهی اوقات شما می خواهید برعکس یک ظاهر تمیز و مرتب باشد. طراحان با ایجاد شبکه های شکسته و طرح های نامتقارن شروع به فشار به مرزها می کنند.
یکی از مباحثی که این چاه را محقق می کند ، آلبرت است . از تصاویر کشویی ، عناصر با هم همپوشانی و ظاهری پیچیده استفاده می کند که چشم شما را به خود جلب می کند و شما را مجبور به توجه می کند.
یکی دیگر از تغییرات این روند در قالب موضوع Overlap به وجود آمده است که از عناصر همپوشانی و طراحی شبکه شکسته برای ایجاد ظاهری منحصر به فرد استفاده می کند.
کشیدن این نوع طراحی دشوار است. این امر شما را ملزم می کند که بین بازداشت بصری و استفاده سایت و استفاده غیرقابل استفاده از سایت ، یک خط خوب قدم بگذارید. حتی اگر محتوا به روشهای غیر متعارف در سراسر صفحه پخش شود ، همه چیز هنوز هم باید به طور واضح قابل مشاهده و امکان خواندن با یک نگاه باشد.
از این گذشته ، شما نمی خواهید به سایتی شیک بپردازید که کسی نفهمد چگونه از آن استفاده کند.
5. شبکه های CSS
طراح وب ، هوی جینگ چن ، شبکه های CSS را به عنوان "وب سرانجام گرفتن گواهینامه راننده خود" توصیف کرد. به عقیده وی ، طراحی وب به مدت طولانی به چاپ استانداردها پایبند بوده است ، و او شبکه های CSS را گامی بزرگ به دور از این محدودیت خود تحمیلی می داند. بنابراین شبکه CSS دقیقاً چیست؟
به طور خلاصه ، این یک نوع شبکه پاسخگو است که بسته به مکانی که نمایش داده می شود ، به صورت پویا تغییر می کند. احتمالاً بیشتر در دستگاه های تلفن همراه با این نوع طراحی روبرو شده اید. عناصر صفحه بر اساس اندازه پنجره کوچک می شوند و سازماندهی مجدد می شوند. همین کار را می توان در مرورگرهای استاندارد نیز انجام داد ، جایی که با تغییر اندازه پنجره ، در هنگام واقعی سازی صفحه تغییر می کند.
این شرط عادلانه ای است که طراحی های شبکه CSS همچنان محبوب تر خواهند شد. برخی از مضامین وردپرس در حال حاضر از آنها استفاده می کنند ، از جمله موضوع کوهن ، که می توانید در اکشن بالا مشاهده کنید. توجه کنید که با افزایش و کوچک شدن پنجره ، تصاویر ، متن و ستون ها در زمان واقعی تغییر می کنند؟
این یک فریاد دور از طرح های ایستا و با الهام از چاپ است.
6. طرح های سازگار با موبایل
صحبت از طرح های پاسخگو ، اجازه دهید در مورد دستگاه های تلفن همراه صحبت کنیم. در سال 2016 تعداد کاربران اینترنت در دستگاه های تلفن همراه برای اولین بار از تعداد کاربران رومیزی فراتر رفت . این یک نقطه عطف استفاده وب بود و این مسئله را روشن ساخت که ایجاد سایتهایی که به دستگاه های تلفن همراه پاسخگو هستند از هر زمان دیگری اهمیت بیشتری دارد.
قبلاً در مورد چگونگی بهینه سازی سایت وردپرس شما برای کاربران تلفن همراه صحبت کرده ایم .
یکی از راه های انجام این کار با بارگیری افزونه WPtouch است که بر اساس وب سایت خود یک تم موبایل ایجاد می کند که می توانید طبق دلخواه خود آن را شخصی سازی کنید. این افزونه توسط گوگل توصیه می شود و اطمینان حاصل می کند که موضوع تلفن همراه شما با استانداردهای موتور جستجو مطابقت دارد (البته لازم به یادآوری است که بررسی های آن کمی مختصر است).
همچنین می توانید از افزونه Jetpack استفاده کنید تا به سرعت یک تم موبایل برای سایت خود ایجاد کنید.
با DreamPress بیشتر کسب کنید
کاربران DreamPress Plus و Pro می توانند بدون هیچ هزینه اضافی به Jetpack Professional (و 200+ تم برتر) دسترسی پیدا کنند!
برنامه خود را انتخاب کنید
افزونه دیگری که اهمیت زیادی را به سازگاری در بین دستگاه ها می بخشد Elementor است . این ابزار چند منظوره به شما امکان می دهد بسته به دستگاه صفحه نمایش ، عرض پویا را تنظیم کرده و عناصر صفحه جداگانه را پیکربندی کنید.
این سازنده صفحه با هر موضوع قابل استفاده است. همچنین می توانید سایت خود را در تلفن ها ، رایانه های لوحی و دسک تاپ تقلید کنید ، بنابراین می توانید بدون توجه به نحوه مشاهده ، مطمئن شوید که از نظر ظاهری عالی خواهد بود.
مرتبط: 30 بهترین برنامه وب برای مشاغل کوچک در سال 2020
7. ریزگردها
طراحی همه چیز در مورد جزئیات است. روند رو به رشد microinteractions در این جزئیات کوچک تمرکز دارد و به طور فزاینده مردمی در طول چند سال گذشته تبدیل شده است. همانطور که از نام آن پیداست ، این مفهوم به نحوه پاسخ دهی عناصر موجود در سایت به روش های مختلف به تعامل های کوچک اشاره دارد.
نمونه ای از این مفهوم در عمل زمانی است که اگر روی یک آیکون کلیک کرده یا روی آن بکشید ، انیمیشن کوتاه پخش می شود. شما احتمالاً خودتان این مسئله را پیدا کرده اید ، مانند ایموجی های واکنش فیس بوک.
ریزگردها به سایت شما حس زندگی و لامسه می دهد. آنها احساس می کنند شما واقعاً با صفحه در تعامل هستید - نه اینکه به یک دیوار استاتیک اطلاعات خیره شوید.
با Animate It می توانید جلوه ای مشابه به سایت خود اضافه کنید ! پلاگین . این افزونه به شما امکان می دهد تقریباً به هر محتوا ، از جمله تصاویر و متن ، انیمیشن اضافه کنید. همچنین می توانید تعیین کنید که انیمیشن چه موقع شروع می شود ، تصمیم بگیرید که چند بار تکرار شود و یک نقطه شروع و خروج را تعیین کنید.
به مثال زیر نگاهی بیندازید ، درصورتی که مکان نما روی مکان خود نشانگر روی یک تصویر "پاپ" اجرا شود.
Microinteractions فقط برای انیمیشن ها و تصاویر نیست. این تکنیک همچنین می تواند به شما امکان دهد از متون جالب استفاده کنید.
به عنوان مثال ، برخی از صفحات گزینه برجسته کردن متن و سپس به اشتراک گذاری آن را در رسانه های اجتماعی به شما می دهند. می توانید این افزونه را با افزونه Highlight و Share که از شبکه های معروف مانند Facebook ، Pinterest و LinkedIn پشتیبانی می کند ، به سایت خود اضافه کنید .
اینها تنها چند نمونه از چگونگی استفاده از ریزگردها برای احساس زنده ماندن و پاسخگوتر شدن سایت شماست.
8- شیب و قطعه
به نظر می رسد که سایت شما به صورت غیرقانونی به نظر برسد بهترین ایده به نظر نمی رسد ، اما در واقع یکی از سریعترین روند طراحی است . خطوط شیب دار و شکاف های مورب نه تنها به سایت شما احساس مدرن می بخشند بلکه به رهبری چشم در صفحه کمک می کنند. این به خصوص در طرح های یک صفحه ای خوب کار می کند و هر بخش را به روشی بصری از هم جدا می کند.
چندین مضمون وردپر
قالب هاستینزا 15 ابزار جستجوگرها برای بهینه سازی وب سایت خود بر
