ماندن در روند طراحی وب سایت برای موفقیت وب سایت شما بسیار مهم است. ما در شرکت طراحی وب سایت و سئو دارکوب در این 15 ساله فعالیت خود متوجه محبوبیت طراحی، تصاویر، به روز رسانی الگوریتم ها (برای سئو) و بهترین شیوه های طراحی سایت شده ایم و می بینیم که هر سال تغییر می کند.
یک وب سایت که امروز با ظرافت و مدرن به نظر می رسد می تواند در عرض چند ماه قدیمی و معمولی شود. به همین دلیل دانستن تفاوت بین یک روند در صنعت و یک مد گذرا بسیار مهم است. هنگام طراحی وب سایت شما می خواهید اطمینان حاصل کنید که طراحی شما برای چندین سال عالی به نظر می رسد و نه یادآور وب سایت های قدیمی باشد.
سال 2019 همه چیز در مورد ارائه تجربه کاربری (User Experience) است: روند طراحی وب به سرعت و طراحی تلفن همراه، طرح های ساده چشم نواز با طرح های نامتقارن، انیمیشن و غیره اولویت می دهد.
سرعت وب سایت
فکر می کنید چقدر زمان می برد تا بر روی مشتری بالقوه تاثیر خوب بگذارید؟ اگر به تعامل آنلاین با بازدید کننده سایت خود امید دارید، بدانید که شما کمتر از 3 ثانیه فرصت خواهید داشت.
انسان ها تمایل به پرواز و بی صبری دارند. اگر اینترنت واقعا یک سیستم است که ماهیت انسانی را مشاهده می کند، مطالعات آن نشان می دهد که ما دوست نداریم انتظار بکشیم. در مطالعات انجام شده توسط Akamai و Gomez.com، پنجاه درصد از کاربران انتظار دارند که هنگام کلیک بر روی یک سایت، صفحه آن ها در دو ثانیه یا کمتر بارگذاری شود و اگر یک یا چند ثانیه بیشتر طول بکشد، سایت را ترک خواهند کرد.
همانطور که می بینید، یک سایت فقط زیبا کافی نیست، اگر طراحی حجم زیادی داده داشته باشد که بارگیری آن طول بکشد، ممکن است شما درآمد زیادی را از این بابت از دست بدهید و هیچ کس به سایت شما علاقه مند نباشد. حتی بدتر از آن، با به روز رسانی Google Speed که در ژوئیه 2018 به اجرا گذاشته شد، گوگل اولویت رتبه اول را برای سایت هایی که سریعتر از دیگران بارگیری می شوند آغاز کرده است و احتمالا موتورهای جستجو دیگر به زودی از آن پیروی خواهند کرد.
همه این ها بدان معنی است که وب سایت ها باید سریعتر بارگذاری شوند، بنابراین سرعت وب باید در طول فرایند طراحی اولویت بندی شود. طراحان وب نمی توانند به توسعه دهندگان تکیه کنند تا کار خود را به چیزی تبدیل کنند که هم خوب به نظر رسد و هم رتبه خوبی کسب کند – سرعت باید یک پارامتر طراحی باشد.
روزهای عکس های غول پیکر، فیلم های فشرده نشده و جاوا اسکریپت پر حجم به سر آمده است. در حالی که تصاویر و ویدیوهای بزرگ از طراحی وب حذف نمی شوند، در سال 2019 آنها به گونه ای گنجانده می شوند که سرعت بارگذاری صفحه را کاهش نمی دهد.
طراحی تخت Flat Design
در سال 2017، طراحان و توسعه دهندگان وب سایت های ساده را برای عملکرد بهتر تلفن همراه ایجاد کردند. از آن به بعد، تعداد جستجوهای تلفن همراه تا کنون افزایش یافته است و طراحی موبایل-اول برای وب سایت ها ضروری است، نه فقط یک گزینه. وب سایت ها با تصاویر سنگین به آرامی بارگذاری می شوند و تجربه کاربران تلفن همراه را مختل می کنند.
طرح های تمیز، مینیمالیستی و یا طرح های تخت با سرعت بارگذاری می شوند و در حال حاضر به دو دلیل مهم و مرسوم هستند. اولا هر دو کاربران تلفن همراه و مرورگرهای دسکتاپ می توانند وب سایت های سریع را تجربه کنند. ثانيا، آنها مي توانند ارزش بالای سئو را حفظ نمایند. طراحی تخت به سایت کمک می کند تا مقدار زیادی از نیازهای سرعت موتورهای جستجو را فراهم کند. به همین دلیل طراحی مسطح محبوب شد و تا سال 2019 مرسوم تر می شود.
طراحی تخت به این معنا نیست که همه چیز به دو بعد کاهش می یابد بلکه همه چیز در مورد مینیمالیسم و قابلیت استفاده است. این یک زیبایی شناسی در طراحی است که از هرج و مرج خلاص می شود و به بخش های مهم وب سایت شما تمرکز می کند. با استفاده از رنگ های روشن، لبه های تمیز و سخت، و فضای باز زیاد. طراحی مسطح تغییر تازه ایی از طرح های مبتنی بر تصویر با رزولوشن بالا، گیج کننده و آهسته است.
به رغم مینیمالیستی بودن، این به این معنا نیست که طراحی Flat خسته کننده است. متناسب با رنگ های روشن و تصاویر و فونت های صاف، مجموع قطعات طراحی مسطح همراه با هم به ارائه یک تجربه کاربری عالی، جذاب و چشم نواز رسیده اند.
از آنجایی که طراحی فلت به عکس ها برای جذاب بودن وابسته نیست، در زمان مرور وب سایت توسط کاربر فاقد مقدار زیادی اطلاعات اضافی برای بارگیری است. این به معنای دو چیز واقعا عالی برای صاحبان وب سایت ها است: اول این است که مشتریان و بازدیدکنندگان، بدون توجه به اینکه آیا در حال مرور در تلفن همراه هستند یا نه، تجربه ای لذت بخش و سریع در وب سایت دارند. دوم، این طرح های سبک و سریع، سرعت بهینه سازی صفحات را بسیار بالا می برد، که از نظر موتورهای جستجو، Bing و تقریبا هر موتور جستجوی دیگر مطلوب است. همانطور که در بخش سرعت بحث کردیم، زمان بارگذاری سریعتر به این معنی است که سایت شما احتمالا به خوبی رتبه بندی می شود و کاربران با طراحی مناسب و راحت می توانند در سایت شما باقی بمانند و همچین از میزان درصد بیشتری از کابران به مشتری تبدیل شوند.
طراحی موبایل-اول
سرعت تنها فاکتوری نیست که گوگل برای امتیاز دهی به وب سایت از آن استفاده کرده است. در سال 2015، جستجوهای تلفن همراه به طور کلی ازجستجوی دسکتاپ پیشی گرفت. مطابق با این، روش فهرست کردن وب سایت ها توسط گوگل تغییر کرده است، اکنون سایت های سازگار به موبایل را بر سایت های دیگر اولویت می دهد.
با توجه به اینکه سایت های تلفن همراه اولویت بیشتری نسبت به سایت های دسکتاپ گرفته اند، جای تعجب نیست که طراحی تلفن همراه یک روند با اولویت است. طراحی موبایل-اول، تغییر در شیوه اساسی طراحی وب سایت است. استاندارد مورد استفاده برای این بود که یک سایت فقط برای یک رایانه رومیزی یا لپ تاپ طراحی شده و یک طراحی واکنش گرا Responsive برای تلفن همراه اضافه شود. اما طراحی موبایل-اول برعکس است: ابتدا با طراحی سایت برای کاربر تلفن همراه شروع می شود.
باز هم، این فشار به سمت طراحی موبایل-اول، فقط بر اساس عوامل رتبه بندی یا جستجوگرها نیست. نتیجه بصری چیزی است که اول و مهم تر تجربه کاربری وب سایت را در دستگاه کاربر افزایش می دهد که احتمالا کاربر از آن جستجو انجام می دهد. این روند طراحی، پاسخگویی به تقاضا است که کاربران تلفن همراه به آن نیاز دارند و احتمالا روند آن برای مدت طولانی است.
شبکه شکسته و طرح های نامتقارن
در سال 2019، روند طراحی وب به سوی تفکر فاصله از روش معمول منظورم Grid است. شبکه های شکسته Broken Grid و طرح های نامتقارن به عنوان یک روند بزرگ در صنعت طراحی وب به چشم می خورند. به رغم فشار بسیاری از طراحان وب به سمت طراحی مسطح، سریع و مینیمالیستی، طراحان زیادی نیز از طرح های شکسته حمایت می کنند.
هنگامی که ما در مورد شبکه های شکسته یا طرح های نامتقارن صحبت می کنیم، منظور سیستم شبکه ای Grid System است که برای چندین دهه در انواع طرح ها، از صفحات وب تا روزنامه ها برای چاپ و تبلیغات در فضای باز استفاده می شود. یک سیستم شبکه کمک می کند تا طراح به راحتی هماهنگی و یکپارچگی را در هنگام اضافه کردن محتوا – تصاویر، سرفصل ها، مقالات، CTA ها هر وسیله ای که در آنها کار می کنند را حفظ کند، حفظ ساختار شبکه در طرح اولیه، در حالی که به طور کلی حفظ تقارن نیز هست.
از لحاظ تاریخی، استفاده نکردن از یک شبکه موجب شده است که بسیاری از آن طرح های ناپایدار یا منحرف شده را دنبال کنند که کاربر را از تمرکز بر مهمترین بخش های صفحه باز دارد. با این حال، طراح های نامتقارن و شبکه های شکسته محبوبیت بیشتری به دست آورده اند. احتمالا به این دلیل است که راهی پیدا کرده اند که شبیه بسیاری از طرح های دیگر طراحی نشده باشد، در حالی که در عین حال منحرف و یا غافلگیر کننده نباشد.
طراحان می توانند با دقت و تفکر به شکستن الگوی شبکه و ایجاد سلسله مراتب با همبستگی برنامه ریزی شده، دست یابند. استفاده از جایگاه های غیر معمول، لایه بندی با رنگ ها و بافت های مختلف، تکرار الگوهای نامنظم، استفاده از فضای سفید و استفاده خلاق از تایپوگرافی باعث ایجاد حس عمقی می شود که معمولا در پوسته های مبتنی بر شبکه یافت نمی شود.
این طرح ها قابل توجه هستند، به کاربران کمک می کنند تا آن ها به سمت مهمترین بخش وب سایت هدایت شوند، اما نه به دلیل الگوهای طراحی تکراری و منظم. در عوض، استفاده خلاق از سلسله مراتب بصری چشم را بر جایی که باید نگاه کند هدایت می کند. طراح با استفاده از رنگ ها، اشکال، بافت، استفاده بصری از نوع و تصاویر پویا، می تواند توجه کاربران را به یک شیوه جدید و جذاب به سمت محتوا یا CTA هایی که کاربران می خواهند پیدا کنند، هدایت نمایند.
شکل های هندسی در طراحی وب
به عنوان یک روند میانی بین مینیمالیسم طراحی مسطح و هرج و مرج کنترل شده شبکه شکسته، روند طراحی با شکل های هندسی قرار می گیرد. این طراحی به اشکال هندسی ساده و اقلیدسی اشاره دارد، که در مدرسه مانند مثلث، شش گوش و حلقه ها یاد گرفته اید.
اشکال می توانند شکاف بین شبکه مسطح و شکسته را به دلیل اینکه به راحتی می توان آنها را به یک طرح ادغام کرد پر کنند. اشکال هندسی ساده با رنگ های روشن می توانند لبه های جالبی ایجاد کند و بارگیری سریع آن ها را جذاب می نماید. طرح هایی که از ترکیب عکاسی و نوعی شکل یا اشکال با الگوهای تکراری ایجاد می شوند، می توانند دینامیک و عمق در شبکه های شکسته یا طرح های نامتقارن را ایجاد نمایند.
این تردستی دلیل آن است که چرا شکل ها به یک روند در سال 2019 تبدیل شده اند. به واسطه ریاضی هندسه به ایجاد احساس تعادل در یک وب سایت کمک می شود حتی زمانی که تصاویر ممکن است عدم تقارن داشته باشند. اغلب اشکال هندسی به راحتی در هم یا در کنار هم هم قرار می گیرند، به سرعت سازمان یا سلسله مراتب را تشکیل می دهند.
اشکال مانند رنگ هستند که افکار و احساساتی در آن ها وجود دارد که مردم به طور طبیعی با هر یک از آنها ارتباط برقرار می کنند. مستطیل نشان دهنده ثبات، دایره وحدت، و مثلث ها نشان پویایی هستند. استفاده خلاقانه از اشکال خاص یا ترکیبی از اشکال می تواند برای ایجاد احساسات که شما می خواهید در بازدیدکنندگان وب سایت خود ایجاد کنید، کمک می کند.
آنها را می توان به طور چشمگیر یا با صرفه جویی استفاده کرد – این به سادگی به زیبایی شناسی برند شما بستگی دارد. اشکال به راحتی به شما کمک می کند که سلسله مراتب بصری را ایجاد کنید و به بخش هایی از یک صفحه که مایلید بازدیدکنندگان خود را متوجه آن کنید، توجه کنید، حتی زمانی که سایت شما از یک طراحی شبکه سنتی دور شده است. به همین دلیل طراحان دارکوب انتظار دارند که ما همچنان شاهد شکل های هندسی در طراحی وب در سال 2019 باشیم.
میکرو انیمیشن ها
یک روند ظریف اما قابل توجه در سال 2019 در طراحی وب، میکرو انیمیشن است. میکرو انیمیشن ها یک راه قدرتمند برای ارائه یک تجربه بصری و رضایت بخش به کاربر خود در هنگام مرور وب سایت هستند. این کار از طریق انیمیشن های کوچک انجام می شود که به کاربر در درک سایت کمک می دهند. مانند تغییر رنگ یک دکمه زمانی که مکان نما روی آن حرکت می کند، یا یک منو همبرگری گسترش یافته وقتی که روی آن کلیک می کنید.
اکثر کاربران این میکرو انیمیشن ها را همیشه در هر دو سیستم عامل مرورگر دسکتاپ و موبایل تجربه می کنند. در حال حاضر در مرورگر ها بسیار پرطرفدار هستند و عجیب است اگر آن ها را تجربه نکرده باشید. این انیمیشن ها به کاربر می گویند که در مسیر درستی از سایت در حال حرکت هستند. آیا دکمه ارسال را روی فرم فشار داده اید؟ رنگ آن را هنگام کلیک تغییر می دهد. چگونه صفحه را به سرعت رفرش کنید؟ با پایین کشیدن صفحه انیمیشن نشان می دهد که عملیات رفرش در حال انجام است.
به یاد داشته باشید که چگونه اشیاء متحرک مانند فیلم ها به حفظ و توجه کاربر کمک می کنند؟ این حرکات، حتی اگر آنها انیمیشن های کوچک هستند، به جلب توجه چشم کاربران کمک می کنند و برای آنها به عنوان یک تجربه غنی شده در پیمایش سایت کمک می کنند. به نوبه خود، استفاده مناسب از میکرو انیمیشن ها یک سلسله مراتب بصری در صفحه وب ایجاد می کند، بازدیدکنندگان را به سمت نقاط تبدیل هدایت کرده با تکمیل فرآیند به آن ها پاداش می دهند.
ممکن است خیلی ساده یا احمقانه به نظر برسد که یک میکرو انیمیشن می تواند یک کاربر را برای کلیک کردن بر روی فرم ارسال تشویق کند، اما به Captchaی خسته کننده که از بسیاری از فرم ها استفاده می شود فکر کنید. اگر شما خوش شانس باشید، همه چیزیی که باید انجام دهید این است که بر روی کادر تأیید کلیک کنید، اما اگر شما باید از طریق فرآیند انتخاب تصاویر یا تایپ کردن دنباله رشته ای از شماره و حروف بروید، هیچ چیز لذت بخش تر تماشای چرخش دایره به نشانه صحیح بودن نیست. همانطور که در سال 2019 ملاحظه می کنید، میکرو انیمیشن ها آماده اند که در صنعت وب باقی بمانند.
کلام آخر
ما در دارکوب همیشه به دنبال روند های جدید در روش های و تکنولوژی های طراحی وب و عملکردهای الگوریتم های گوگل بوده ایم. دنیای تکنولوژی سریع حرکت می کند، ما نیز با دانش روز و تجربه مان سعی می کنیم وب سایت هایی تولید کنیم که بهترین بازدهی را داشته باشند. چون همین به روز بودن رمز بقا در بازارهای رقباتی است.