با این قابلیتهای واکنشگرایی، گرافیک، رنگ و تایپوگرافی برجسته ای که اومده، امسال (1396) طراحی وب سایت برای طراحان و کاربرهای وب حتی از قبل هم جذابتر میشه. باید منتظر حضور انیمیشن، رنگهای جذاب و میکرواینتراکشن هایی در دنیای وب باشیم که تجربه ای به یاد ماندنی رو برای کاربر رقم میزنند. فناوریها و روشهای جدیدی که بوجود اومدند، کار طراحی رو برای طراحان سریعتر کرده اند و دیگه طراحها میتونن راحتتر از قبل قالبهای پیچیده رو طراحی کنند. از همه مهمتر اینکه با تغییرات امسال گوگل ادوردز، کاربرها هم میتونن خیلی راحتتر این وب سایتها احیا شده رو پیدا کنند. تو این مقاله شما رو با پویاترین روشهای جدید طراحی وب که امسال طرفدارهای زیادی پیدا کردند و کاربردشون افزایش پیدا کرده آشنا میکنیم.
دنیای طراحی واکنشگرا: روشهای قالب بندی وب سایت بهتر شده اند
ابزاری مثل Flexbox و CSS Grid تونستند تغییر خاصی در صنعت طراحی وب ایجاد کنند. واکنشگرایی بهتر شده و امکان دستکاری عناصر بوجود اومده، که اینها همه از مزایای ساخته شدن چنین ابزارهایی هستند. این قالبهای نسبتا جدید CSS سختی مشکلات طراحی های قدیمی وب رو کم کردند. این خودش نکته مثبتیه که طراحها رو ترغیب میکنه تا حداقل برای یکبار هم که شده این فناوریها رو امتحان کنند.
تصویرگری پویا از طریق ابزارهای پروتوتایپ سریع
سریع شدن پروتوتایپ میتونه توسعه محصول نهایی رو سرعت ببخشه. شرکتهای مدرن الآن دیگه با ابزارهایی مثل InVision ، Webflow ،Visio و Omni Gaffle کار میکنند تا سرعتشون بالاتر بره. حالا طراحان وب میتونن خیلی از عناصر رو با روشهای دینامیک و پویا بسازن و بروزرسانی کنند. حلقه بازخورد بین تیم های طراحی و توسعه وب کوتاهتر شده. ارتباطات بین شرکتهای طراحی وب و مشتریهاشون سریعتر شده و پروتوتایپ کردن به سرعت لحظه ای رسیده.
ظهور SVG ها
فرمتهای استاندارد فایلها رو یادتون میاد؟ مثل JPG ، PNG و GIF ؟ حالا به جاشون فرمت جدیدتری اومده به اسم SVG (کلمه اختصاری گرفته شده از Scalable Vector Graphics به معنی تصاویر برداری مقیاس پذیر). منظور از مقیاس پذیر اینه که این تصاویر در همه پلتفرم ها و دستگاهها عالی دیده میشن. علاوه بر این، چون SVGها نیازی به درخواست HTML ندارند، صفحات HTML سریعتر لود میشن.
طراحی قابل تطابق با دستگاه مقابل از طریق محدودیت ها
کاربرهای وب انتظار دارند با هر دستگاهی که به اینترنت وصل میشن، اوقات بی نظیری رو تجربه کنند. طراح ها باید قالبهایی بسازند که در همه دستگاه ها و با همه رزولوشن ها عالی دیده بشن. اینجاست که constraintها به کمک طراح ها اومدند. این ست جدید ابزارهای طراحی نمیذاره نظم عناصر وب سایت با تغییر اندازه نمایشگر بهم بریزه. برای این کار میتونید از ابزاری مثل Workflow و Figma استفاده کنید.
طراحی فلت
اگه استانداردهای طراحی وب رعایت شده باشه، وب سایتهای مدرن معمولا باید یه برنامه ریز طراحی یا planar design داشته باشند. گوشه های گرد شده، اشکال هندسی و الگوهای انتزاعی جهان اطراف ما رو زیبا میکنند. در اواخر 1395 استفاده از اشکال هندسی در تصاویر و عکسها وارد طراحی وب شد. امسال شاهد ادامه این روند هستیم، به علاوه این که استفاده از خطوط و الگوها هم بهش اضافه شده.
رنگهای درخشان و گرادیان های دوتایی
طراحی وب فلت باعث شد وب سایتها از حداقل رنگها استفاده کنند. اما گرادیان ها که ظهور کردند دوباره مد به عقب برگشت و یه سری از شرکتهای معروف و بزرگ مثل اینستاگرام (به لوگوی اینستاگرام دقت کنید) هم ازش استقبال کردند. در طراحی گرادیان، دو یا سه رنگ با هم ترکیب میشن تا در سراسر وب سایت یه رنگ درخشان ثابت داشته باشیم. رنگ میتونه وب سایت رو خاص کنه.
استفاده از انیمیشن های بیشتر
ویدئو و متن های روی وب سایتها دارن جای خودشونو به انیمیشن میدن. در روشهای قبلی که همون متن و فیلم باشه، کاربر باید با روشهای استاتیک از اطلاعات سایت استفاده میکرد، اما انیمیشن منبعی پویا محسوب میشه که میتونیم باهاش انواع محتوا (نمایشی، توضیحی و غیره) رو نمایش بدیم. کاربرهای وب هم از اینکه سرعت فهم مطلب از طریق انیمیشن نسبت به متن و فیلم بیشتره خیلی راضی ترند.
افزایش محبوبیت اسپرینت های طراحی
سال 1396 شاهد ظهور اسپرینت طراحی بود. اسپرینت طراحی یه روش با پروسه پنج روزه است که توسط سرمایه گذارهای گوگل تبلیغ شد. تو این روش، طی یه پروسه پنج روزه، اول روی یه نمونه اولیه از وب سایت از مشتریها بازخورد میگیرند تا ببینند آیا مشتریها از چیزی که قراره بعدا به صورت واقعی تولید بشه خوششون میاد یا باید تغییراتی داده بشه. به این ترتیب میشه بر اساس این پروسه پنج روزه، برای بلند مدت هدفگذاری کرد. برای برنامه ریزی طراحی نمونه اولیه یک جنبه از تجربه کاربری وب سایت تمرکز میشه. بعد از اون، نمونه اولیه طراحی و توسط گروه تست، آزمایش میشه. با این روش و با تمرکز بر نظرات کاربران، زمان و هزینه های بازاریابی وب سایت کاهش پیدا میکنه.
تصاویر در حرکت: سینماگراف
مثل وقتی که یه تصویر ثابت وجود داره و یه زیرنویس متحرک مدام تکرار میشه. به این حالت میگن سینماگراف که هم به صورت فایلهای GIF ساخته میشن و هم به صورت ویدئو. طراحان وب به کمک سینماگراف میتونن توجه کاربر رو به سمتی که میخوان معطوف کنند. شرکت Kraft در حال حاضر روی وب سایتش از سینماگراف استفاده کرده.
طراحی به سبک رترو (Retro)
طراحان برای تصویرگری، تایپوگرافی و هنر از سالهای پیش (به خصوص دهه های 50 و 60 شمسی) ایده گرفتند و با استفاده از الگوهای طراحی های قدیمی، وب سایتهای روشن و جالبی ساختند که درکشون هم برای کاربر خیلی ساده است. اما اگه میخواهید از این روش استفاده کنید باید حواستون باشه که یه وقت کیفیت رنگ و ظاهر رو فدای این طراحی نکنید و فقط در حدی که یکم حال و هوای نوستالژیک به وب سایتتون بدید ازش بهره ببرید.
میکرواینتراکشن ها
کاربرها دوست دارند که بتونن با وب سایت ارتباط برقرار کنند. حتی یه اقدام کوچیک مثل لایک کردن یه پست میتونه پیشرفت خیلی خوبی در تجربه کاربری وب سایت محسوب بشه. این اقدامات رو میکرواینتراکشن میگن، یعنی وقتی کاربر برای انجام کار خاصی با وب سایت ارتباط برقرار میکنه. برجسته سازی تغییرات، افزایش درخواست برای اقدام ها و ورودی های تصویری، همه نمونه هایی از میکرواینتراکشن هستند. انتظار میره محبوبیت میکرواینتراکشن ها در طراحی وب افزایش پیدا کنه.
- ۹۶/۰۸/۰۷