طراحی وب

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

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

برنامه ریزی در واقع می تواند بخشی از فرآیند طراحی وب باشد که با تعریف اهداف پروژه شما و درک مشکلات مشتری که در تلاش برای حل آنها هستید شروع می شود. به لطف تأثیر متدولوژی‌های توسعه نرم‌افزار Design Thinking، Lean Startup و Agile، آنچه قبلاً به مجموعه‌ای از مشخصات دقیق و تأییدات مرحله‌ای نیاز داشت، اکنون یک فرآیند مشارکتی و آزمایشی بسیار روان‌تر است. برخی حتی ممکن است آن را سرگرم کننده بنامند!

این راهنما با آگاهی از جنبه‌های این سه روش، گام به گام به شما نشان می‌دهد که چگونه یک طرح پروژه کاربر محور کارآمد و مؤثر طراحی کنید و دوره‌های کوتاهی از فعالیت‌هایی که برای تبدیل آن به عمل نیاز دارید.

 

۱- برنامه وب سایت خود را بر اساس اسپرینت سازماندهی کنید

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

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

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

برای دو مرحله آخر طرحمان، پیشنهاد می‌کنیم که یک سری اسپرینت طراحی انجام دهیم. طراحی اسپرینت که توسط طراح Jake Knapp در Google Ventures ایجاد شد، یک مرحله طراحی کامل تجربه کاربری – از ایده‌پردازی تا آزمایش کاربر – را در یک مرحله متمرکز می‌کند. فرآیند پنج روزه برای پاسخگویی به سوالات مهم تجاری از طریق طراحی، نمونه سازی اولیه و آزمایش ایده ها با مشتریان.”

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

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

 

وقتی برخی از استراتژی‌های اولیه را انجام دادید (به مراحل ۲-۴ زیر مراجعه کنید)، ممکن است برنامه پروژه خود را برای مراحل ۵-۶ در حلقه‌های طراحی پنج روزه سازماندهی کنید، همانطور که در جریان‌های کاربر اصلی وب‌سایت خود کار می‌کنید و قابلیت ها ما در این راهنما به روش دقیق طراحی اسپرینت نمی پردازیم، اما می توانید مجموعه سه قسمتی ما را در مورد نحوه عملکرد آنها بخوانید اینجا، اینجا، و اینجا. خوب، اکنون بیایید با تعیین اهداف پروژه خود شروع کنیم.

 

۲- نیازهای کسب و کار خود را ارزیابی کنید و اهداف پروژه خود را تعیین کنید

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

هفته اول اسپرینت: ارزیابی نیازهای پروژه و منابع موجود

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

در مورد پروژه وب سایت خود فکر کنید scope: چه ویژگی هایی برای یک محصول بادوام حداقل (MVP) در جدول وجود دارد، که قابل مذاکره است، و چه ویژگی هایی می تواند منتظر انتشار بعدی باشد.

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

تحقیق در مورد همکاران بالقوه و آژانسهایی که ممکن است بخواهید با آنها کار کنید و خدماتی که ارائه می دهند. به این فکر کنید که یک چت اکتشافی داشته باشید تا از نحوه کار آنها (و ساختار هزینه آنها) آگاهی پیدا کنید.

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

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

 

هفته دوم اسپرینت: ایجاد خلاصه پروژه

بودجه و جدول زمانی پروژه خود را توسعه دهید. بودجه شما باید هزینه‌های تمام هزینه‌های بالقوه، از جمله هزینه‌های مدیریت (به عنوان مثال، خرید نام دامنه، میزبانی وب، خرید نرم‌افزار)، هزینه‌های تیم داخلی، هزینه‌های همکاران خارجی، و سایر هزینه‌های خدمات (به عنوان مثال، مجوز پلت فرم فناوری) را تقسیم کند. ). مطمئن شوید که اتاق تکان دادن قابل توجهی را برای تطبیق با هزینه های پیش بینی نشده در نظر بگیرید. همچنین، هر گونه وابستگی خارجی، مانند یک نمایشگاه تجاری یا شاید بودجه دپارتمان، را در نظر بگیرید که در نتیجه شما تاثیرگذار است.

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

 

خلاصه پروژه ارزش‌های اصلی برند و نحوه انعکاس آن‌ها در وب‌سایت شما را مشخص می‌کند. (منبع: سرخ سرخ)

خلاصه پروژه ارزش‌های اصلی برند و نحوه انعکاس آن‌ها در وب‌سایت شما را مشخص می‌کند. (منبع: سرخ سرخ)

 

۳- انجام تحقیقات مشتری + بازار

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

 

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

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

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

رویکرد “GOOB” (از ساختمان خارج شوید) را برای تحقیقات مشتری امتحان کنید. رفتارهای کاربران را در «طبع» مشاهده کنید تا ببینید که مردم چگونه نسخه‌های دنیای واقعی وظایفی را که وب‌سایت شما برای کمک به انجام آنها طراحی می‌شود انجام می‌دهند. صحبت کردن با مردم تا حد امکان فرصت‌های بسیار بهتری را برای کشف بینش‌های شگفت‌انگیز نسبت به خواندن مجموعه‌ای از داده‌های نظرسنجی ارائه می‌دهد.

هفته دوم اسپرینت: فضای فرصت وب سایت خود را شناسایی کنید

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

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

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

 

Strategyzer's بوم پیشنهادی ارزش یک مستقیم ایجاد می‌کند ارتباط بین پیشنهاد شما و نیازهای مشتری.

Strategyzer’s بوم پیشنهادی ارزش یک مستقیم ایجاد می‌کند ارتباط بین پیشنهاد شما و نیازهای مشتری.

 

۴- استراتژی UX وب سایت خود را تعریف کنید

استراتژی تجربه کاربر رویکرد خاص تیم شما در مورد اینکه چگونه وب سایت شما به هدف همراستایی اهداف تجاری شما (که در فاز ۱ مشخص شده است) با نیازهای کاربران و پویایی بازار (که در مرحله ۲ ذکر شده است) دست خواهد یافت. نتایج فعالیت‌های شما در این مرحله فرآیند طراحی وب‌سایت را هدایت می‌کند و تعیین می‌کند که چرا، چه چیزی و چگونه تیم شما تصمیم به ساخت و آزمایش می‌گیرد.

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

یک صفحه گسترده از تمام نیازهای کاربردی وب سایت خود ایجاد کنید: مواردی که خودتان به ذهنتان رسیده است، به علاوه هر ایده جدیدی که از تحقیقات مشتری و بازار جمع آوری شده است، و همچنین نظرات تیم و ذینفعان. برخی از اصول سازماندهی ساده را اعمال کنید، به عنوان مثال، گروه‌بندی ویژگی‌ها در دسته‌هایی مانند «نمایه کاربر» یا «صفحه اصلی». برای هر ویژگی، یک توضیح کوتاه و اساسی از آنچه که قرار است انجام دهد، ثبت کنید.

استراتژی تجربه کاربر رویکرد خاص تیم شما در مورد اینکه چگونه وب سایت شما به هدف همراستایی اهداف تجاری شما (که در فاز ۱ مشخص شده است) با نیازهای کاربران و پویایی بازار (که در مرحله ۲ ذکر شده است) دست خواهد یافت. نتایج فعالیت های شما در یک جلسه کارگاه دو قسمتی برای تیم خود برنامه ریزی کنید. شما به راحتی می توانید این کار را در یک روز اختصاص داده شده انجام دهید. دو ساعت برای هر جلسه محل خوبی برای شروع است. اولین بخش از روز کارگاه شما این است که تیم شما جزئیات ارزش پیشنهادی وب سایت شما را با زبانی واضح و مشخص که مهمترین اجزای پیشنهاد شما را به تفصیل بیان می کند، اصلاح کند. در اینجا باید به پرسونای خود اشاره کنید. این الگوی “ad-lib” راهی عالی برای آزمایش نسخه های مختلف تا زمانی که کلمات کلیدی مناسب را پیدا کنید، است.

(محصول/خدمات) ما به (بخش مشتری) کسانی که می خواهند (اهداف مشتری) با (افعال: اجتناب، کاهش) یک (نقطه درد مشتری) و (فعل: افزایش، بهبود و غیره) (به دست آوردن مشتری، ارزش) کمک می کند. بر خلاف (رقیب).

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

 

Sprint Week 2: برای مراحل طراحی و توسعه خود سازماندهی کنید

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

ماتریس اولویت بندی ویژگی 2x2 همانطور که توسط Paper Leaf پیشنهاد شده است

ماتریس اولویت بندی ویژگی ۲x2 همانطور که توسط Paper Leaf پیشنهاد شده است

 

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

سری های اولیه طراحی خود را برنامه ریزی کنید. لازم نیست خیلی دور برنامه ریزی کنید. بهتر است فقط دو تا سه دوی سرعت را در یک زمان برنامه ریزی کنید زیرا آنچه در آنها یاد می گیرید احتمالاً بر روی کار بعدی شما تأثیر می گذارد.

 

۵- ویژگی ها، عملکرد و صفحات کلیدی وب سایت Ideate + نمونه اولیه

ایده پردازی و نمونه سازی اساسا حلقه هایی برای تبدیل شدن به “چه می شود اگر؟” هستند. سوالاتی در مورد “چگونه می توانیم…” راه حل های ممکن برای ویژگی ها و جریان ها. قابل درک است که غیر طراحان می توانند فعالیت های مرتبط با طراحی را ترسناک بدانند. اما ابزارهایی مانند Uizard نقطه شروع قابل دسترسی هستند که فرآیند طراحی را دموکراتیک کرده اند. اگر فشار صفحه خالی بیش از حد دلهره آور است، قالب های وب سایت Uizard به شما یک خط پایه از ساختار و بهترین شیوه های UX تعبیه شده را ارائه می دهند که از آن می توانید مطابق با نیازهای پروژه خود سفارشی کنید.

Website templates in Uizard 1

 

برای این مرحله و مرحله بعدی، ما پیشنهاد می‌کنیم که برای انجام مراحل طراحی وب‌سایت، چند دوره طراحی پنج روزه را امتحان کنید. این راهنمای طراحی شگفت انگیز برای مبتدیان دوی سرعت توسط متخصصان AJ&Smart را بررسی کنید.

به جای تقسیم هر مرحله به هفته های ۱ و ۲ اسپرینت، در اینجا ارائه یک نمای کلی از فعالیت های طراحی کلیدی و قابل تحویل که شامل این مرحله از طرح پروژه طراحی وب سایت است، منطقی تر است.

 

فعالیت های کلیدی

  • کارگاه های ایده پردازی و خلق مشترک برای طوفان فکری ویژگی ها و عملکردها
  • Moodboards برای هویت برند و کاوش بصری رنگ، فونت، تصویرسازی و عکاسی
  • طرح ها و جریان های کاربر از عملکردهای کلیدی
  • قاب بندی صفحات وب سایت کلیدی برای نمایش طرح های ناوبری، سلسله مراتب اطلاعات و فراخوان برای اقدام
  • مدل‌های کاوش را برای اعمال تغییرات در برند و عناصر بصری در طرح‌بندی صفحه طراحی کنید
  • محتوای صفحه کپی‌نویسی برای سرفصل‌ها، ویژگی‌ها و مزایا پیام‌رسانی و فراخوان‌ها برای اقدام

نتایج/موارد قابل تحویل

  • معماری اطلاعات وب سایت (نقشه سایت) و طرح ناوبری
  • هویت برند و راهنمای سبک طراحی بصری (پالت رنگ، تایپوگرافی، نمادها و عناصر)
  • دستورالعمل های محتوا و سئو وب سایت کپی کنید
  • Wireframes و نمونه های اولیه تعاملی برای آزمایش با کاربران

 

 

۶- نسخه های UX و طراحی خود را تست + تکرار کنید

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

 

فعالیت های کلیدی

  • آزمایش کاربر از راه دور یا حضوری با کاغذ یا نمونه های اولیه تعاملی
  • تست A/B برای تغییرات پیام ها یا صفحات کلیدی
  • طراحی تجدید نظر و تکرار بر اساس بازخورد آزمایش

 

نتایج/موارد قابل تحویل

  • بینش از رفتارها و واکنش های واقعی مشتری
  • اولویت‌ها برای رفع اشکال، مشکلات قابلیت استفاده، و مناطقی که باید دوباره بازدید کنید
  • فهرستی از ویژگی‌ها و پیشرفت‌ها برای اضافه کردن به ماتریس ویژگی‌ها برای اولویت‌بندی

 

بعدش چی؟ راه اندازی کنید، یاد بگیرید و تکرار کنید

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

هنگامی که ایده های شما به اندازه کافی معتبر است، زمان آن رسیده است که سوئیچ را برگردانید و زنده شوید. اما ابتدا کمی وقت بگذارید و با تیم خود جشن بگیرید! آیا وقتی یک برنامه جمع می شود آن را دوست ندارید؟


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

امروز، ما بسیار هیجان‌زده هستیم که اعلام کنیم با مشارکت ماریانو سوارز-باتان، مدیرعامل و یکی از بنیانگذاران Mural، و سرمایه‌گذاران موجود توسط Founders، LDV Capital، مبلغ ۱۵ میلیون دلاری سرمایه‌گذاری سری A را از Insight Partners جمع‌آوری کرده‌ایم. و av8 Ventures.

“ما در Insight در مورد دیدگاه Uizard برای فعال کردن موج جدیدی از طراحان شهروند با استفاده از قدرت هوش مصنوعی در پلت فرم طراحی شهودی و قدرتمند برنامه‌سازی هیجان‌زده هستیم.”

Nikhil Sachdev، مدیر عامل Insight Partners

 

طراحی برای افراد غیر طراح

استارت‌آپ Canva اخیراً به یک هدف خیره‌کننده ۱۵ میلیارد دلار ، کمتر از یک سال پس از ۶ میلیارد دلار ارزیابی در سال ۲۰۲۰٫ این شرکت هر ماه به ۵۵ میلیون غیرطراح خدمت می کند تا به آنها در طراحی کمک کند. آگهی‌ها، پوسترها، پست‌های رسانه‌های اجتماعی، و اخیراً حتی پس‌زمینه‌های زوم.

آنچه Canva را قادر می‌سازد این است که طراحی گرافیکی را برای همه در دسترس قرار دهد – چیزی که از نظر تاریخی به سطحی از تسلط با نرم‌افزارهای پیچیده مانند Adobe Photoshop یا Adobe Illustrator نیاز داشت.

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

این جایی است که یویزارد وارد می‌شود، اما من وانمود نمی‌کنم که من و بنیان‌گذارانم از روز اول همه چیز را فهمیده‌ایم!

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

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

این موضوع زمانی واضح‌تر شد که وقتی ما در فوریه ۲۰۲۱ از نسخه بتا خصوصی راه اندازی شد.

در این پست وبلاگ، درباره این بحث خواهیم کرد که چرا مشتریان ما اغلب برای ما  “Canva برای طراحی برنامه‌ها و وب‌سایت‌ها” را توصیف می‌کنند و چرا معتقدیم که فناوری مبتنی بر هوش مصنوعی ما یک پله برای فعال‌سازی است. دموکراتیک کردن طراحی محصول دیجیتال.

uizard product overview 2 1

 

تغییر صنعت

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

“اگر محصولات و شرکت‌ها قبلاً با کد زندگی می‌کردند یا می‌میرند، اکنون با سواد طراحی و طراحی محصول خود زندگی می‌کنند یا می‌میرند.” پیتر لوین، شریک عمومی در Andreessen Horowitz

در نتیجه، شرکت‌ها سرمایه‌گذاری هنگفتی را در طراحی در اوایل دهه ۲۰۱۰ آغاز کردند. به عنوان یک مثال قابل توجه، یک نظرسنجی< /a> از تیم Figma تاکید کرد که IBM از نسبت ۱ طراح برای ۷۲ مهندس در سال ۲۰۱۲ استفاده می کرد و سپس به ۱ طراح برای ۸ مهندس در سال ۲۰۱۷ تغییر می کرد.

ارزش طراحی در نرم افزار هرگز به خوبی درک نشده است و مهمتر از آن، کمیت شده است. در سال ۲۰۱۸، McKinsey & Company برآورد که شرکت‌های دارای قوی ترین تعهد و اجرای اصول طراحی، ۳۲ درصد درآمد بیشتر به دست آورد و ۵۶ درصد بیشتر را به سهامداران خود بازگرداند. طراحی UI و طراحی UX مناسب برای موفقیت یک محصول دیجیتال کاملا ضروری است.

«تجربه مشتری میدان نبرد هر کسب‌وکاری است و تجربه مشتری اکنون روی صفحه‌های نمایش اتفاق می‌افتد. نرم افزار به تنهایی دیگر یک مزیت رقابتی نیست. نرم افزار عالی نیاز به طراحی عالی دارد. اندرو رید، شریک Sequoia

با نزدیک شدن نسبت طراح به توسعه‌دهنده به ۱:۱، افراد بیشتری در سازمان‌ها شروع به مشارکت در طراحی می‌کنند. شرکت‌های توسعه‌یافته مانند Airbnb موافق هستند که باز بودن و جامع بودن کلید در فرآیندهای طراحی موفق است و اینکه افراد از همه بخش‌ها و پیشینه‌ها باید درگیر شوند — به‌ویژه افرادی که بیشتر مشتریان را درک می‌کنند. به‌عنوان مثال، اگر می‌خواهیم تجربه کاربر از جریان اشتراک برای یک سرویس پخش آنلاین موسیقی را بهبود بخشیم، ایده خوبی است که در مورد طوفان فکری و ایده‌پردازی  —  نه فقط با تیم طراحی  —  بلکه با افرادی از تیم تجاری نیز فکر کنیم. رئیس محصول، و همچنین افرادی از تیم پشتیبانی مشتری که مستقیماً با بازخورد کاربر مواجه می‌شوند.

“از آنجایی که شرکت‌های بیشتر و بیشتری محصول را هدایت می‌کنند، سرعت و دقت یک شرکت نیازهای مشتریان جدید را شناسایی می‌کند و محصول را ارسال می‌کند، در نهایت موفقیت آن را تعیین می‌کند.” جنیفر لی، شریک Andreessen Horowitz

uizard product overview 1 1

 

فراگیر بودن طراحی

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

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

«طراحی ذاتاً متقابل است. باید در مرکز هر سازمان قرار گیرد.» Dylan Field، یکی از بنیانگذاران و مدیر عامل شرکت Figma

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

  • پهنای باند: کارکنان طراحی و فناوری شرکت در حال حاضر مشغول کار روی پروژه‌های دیگر هستند. در واقع، متخصصان خلاق کاملاً بیش از حد کار می کنند.
  • استخدام سخت است: بسیاری از استعدادهای طراحی و فناوری به هدایت می شوند پنج غول فناوری، بنابراین جذب استعدادهای برتر برای دیگر شرکت‌های بزرگ و استارت‌آپ‌ها سخت می‌شود. علاوه بر این، کمبود استعدادهای طراحی و فناوری رو به وخامت است. در سال ۲۰۱۸، Korn Ferry تخمین زد که تا سال ۲۰۳۰، کمبود استعدادها باعث از دست رفتن فرصت درآمدی نزدیک به ۸٫۵ تریلیون دلار در سراسر جهان می شود.
  • ابزارسازی پیچیده است: ابزارهای طراحی و نمونه سازی موجود برای غیر طراحان بدون آموزش گسترده بسیار پیچیده هستند. تمام ابزارهای حرفه ای طراحی محصول دیجیتال فعلی تاکنون منحصراً برای کمک به طراحان خبره ایجاد شده اند (مانند Adobe Creative Suite، Sketch، Figma، InVision Studio و غیره).

اساساً، این بدان معناست که کارشناسان حوزه، رهبران کسب‌وکار و تصمیم‌گیرندگان قادر به تجسم، برقراری ارتباط و آزمایش ایده‌های خود نیستند، زیرا ابزار برای استفاده بسیار پیچیده است، تیم طراحی آنها در حال حاضر بسیار شلوغ است، و استخدام سخت اغلب، نرم افزارهایی مانندGoogle Slides، PowerPoint، یا Keynote جایگزین ابزارهای طراحی برای مدیران، رهبران و به طور کلی غیر طراحان می شوند.

اگر شرکت های توسعه یافته طراحی و ارائه دهندگان ابزار طراحی موافق باشند که فرآیندهای طراحی موفق باید مشارکتی، باز، در دسترس و فراگیر باشد، پس ما به راه حلی برای طراحی محصولات دیجیتالی نیاز داریم که واقعاً برای همه بدون توجه به پیشینه فنی/طراحی آنها قابل استفاده باشد. . این دقیقاً همان مشکلی است که Uizard سعی در حل آن دارد!

Picture Timeline 1

 

دموکراتیک کردن طراحی

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

عکس‌ها همه جا هستند! در سال ۲۰۲۰، هر روز بیش از ۱۰۰ میلیون عکس و ویدیو در اینستاگرام آپلود می‌شد. سفر به سمت دموکراتیک کردن عکاسی در سال ۱۸۸۸ زمانی که کداک اولین دوربین تجاری خود را عرضه کرد آغاز شد، اما دموکراتیزه شدن تا همین اواخر اتفاق نیفتاد. این دموکراسی‌سازی فقط به این دلیل اتفاق نیفتاد که دوربین‌ها تبدیل به یک چیز شدند. این به این دلیل اتفاق افتاد که فناوری تخصصی، قابل دسترسی، استفاده آسان و هوشمند شد.

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

“بیشتر مردم می توانند از دموکراتیک کردن طراحی استفاده کنند تا از مکینتاش.” گای کاوازاکی، انجیلی ارشد در Canva و رئیس پیشین اوانجلیست در اپل

اگر دموکراسی‌سازی زمانی اتفاق بیفتد که فناوری‌ها تخصصی، قابل دسترسی، استفاده آسان و هوشمند شوند، چگونه است آیا شما غیر طراحان را قادر به طراحی محصولات دیجیتال می‌کنید؟

ما فکر می‌کنیم به این دلیل است که Uizard با پارادایم‌های متفاوتی از پیشینیان خود کار می‌کند، مشابه روشی که پارادایم Canva با Adobe Photoshop متفاوت است.

Tool Timeline 1 1

Uizard تخصصی است

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

زمانی که Sketch در سال ۲۰۱۰ راه اندازی شد، دنیای طراحی تحت سلطه دو ابزار طراحی گرافیکی همه منظوره بود: Adobe Photoshop و Adobe Illustrator. Sketch اولین ابزار تخصصی مبتنی بر برداری برای طراحی صفحه نمایش شد. این برنامه مخصوص طراحان رابط کاربری حرفه ای است که به یک نرم افزار اختصاصی برای طراحی محصولات دیجیتالی مانند وب سایت ها و برنامه های تلفن همراه نیاز دارند.

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

Uizard قابل دستیابی است

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

با الهام از موفقیت Google Suite، Figma اولین ابزار طراحی مشارکتی مبتنی بر وب شد که می‌توانست روی هر سیستم عاملی اجرا شود. این یک معامله بسیار بزرگ است و Adobe و Sketch هنوز در تلاش هستند تا به Figma برسند تا ابزارهای خود را واقعاً قابل دستیابی کنند. وقتی کووید شیوع پیدا کرد، همکاری در محل کار بلافاصله مجازی شد و شرکت‌هایی مانند Figma برنده شدند.

زمانی که Uizard را ساختیم، این کار بیهوده بود: باید یک نرم افزار آنلاین قابل دسترسی در هر مرورگر وب مدرنی باشد. Uizard کاملاً مشارکتی است و امکان همکاری در زمان واقعی را فراهم می‌کند، چه تیم‌ها در قاره‌ها و مناطق زمانی پراکنده باشند یا در یک دفتر کنار یکدیگر بنشینند.

 

uizard multiplayer 1

 

استفاده از Uizard آسان است

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

Canva اولین ابزار طراحی بود که از پارادایم پیکسل/بردار خلاص شد و از الگوها و طرح‌بندی‌ها برای کارهای طراحی همه منظوره (مانند پست رسانه‌های اجتماعی، اسلایدهای ارائه، کارت ویزیت) خلاص شد.

به طور مشابه، Uizard با اجازه دادن به کاربران برای ایجاد برنامه‌ها و وب‌سایت‌ها با استفاده از مؤلفه‌ها و قالب‌ها: دکمه‌ها، فیلدهای ورودی، فرم‌های ورود، نوارهای پیمایش، بخش پرداخت تجارت الکترونیک و غیره، یک تجربه طراحی آسان را امکان‌پذیر می‌کند. پیکسل‌ها و بردارها انتزاع می‌شوند و هسته اصلی بلوک های ساختمانی به راحتی قابل درک، دستکاری و جمع آوری هستند.

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

uizard wireframe scan 1

 

Uizard باهوش است

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

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

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

دستیار طراحی با هوش مصنوعی Uizard می تواند چند کار جادویی انجام دهد! می تواند به طور خودکار خط خطی های کشیده شده با دست را به طرح های قابل تنظیم تبدیل کند. این می تواند به طور خودکار سبک هر منبع الهام (مانند اسکرین شات، عکس، مودبورد، URL و غیره) را در یک پروژه خاص استخراج و اعمال کند. این می تواند به طور خودکار سبک طراحی یک پروژه را با یک کلیک تغییر دهد و در عین حال سلسله مراتب اطلاعات را حفظ کند. و این تازه اولشه!

uizard theme generation 1

 

دهه طراحی اینجاست

امیدواریم، این پست وبلاگ نمای کلی خوبی از نحوه ارائه ارزش Uizard به غیرطراحان و اینکه چگونه می‌تواند پله‌ای به سوی دموکراتیک کردن طراحی باشد، ارائه دهد.

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

“اکنون، ما در حال حرکت به دهه طراحی هستیم. امروزه افراد بیشتری——نه تنها طراحان——اکنون باید در برقراری ارتباط پیرامون طراحی مسلط باشند.” پیتر لوین، شریک عمومی در Andreessen Horowitz

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

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

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

نیازی به گفتن نیست که ما در مورد آینده نزدیک و همکاری با تیم درخشان Insight Partners بسیار هیجان زده هستیم!

team picture series a 1 1


۵ ترند آینده طراحی وب برای سال ۲۰۲۲

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

 

وقتی دنیای بیرون دستخوش تغییراتی می شود که می تواند زندگی روزمره را دشوارتر یا کمتر قابل پیش بینی کند، مردم به دنبال ثبات و تعادل هستند. دنیای ما در حال حاضر به این شکل است و میل به احساس ثبات و آرامش بیشتر چیزی است که در ترند طراحی وب سال ۲۰۲۲ منعکس شده است.

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

اگر وب‌سایت‌های مشتریان خود را با جدیدترین ترندهای طراحی وب طراحی می‌کنید، به آنها کمک می‌کنید توجه مشتریانی را که به دنبال برندهای پیشرفته هستند جلب کنند. در اینجا پنج ترند جدید برای سال ۲۰۲۲ وجود دارد که باید از آنها آگاه باشید و مشتریان شما از آنها قدردانی خواهند کرد.

 

۱٫ طراحی تصویر فراگیر می تواند مشتریان را برای خرید بیشتر ترغیب کند

بر اساس وب سایت Statista – و همانطور که ممکن است خودتان متوجه شده باشید – مردم در سراسر جهان هر روز بیش از ۲ ساعت و نیم را با تلفن های هوشمند خود و ½ ساعت دیگر را در دسکتاپ خود می گذرانند.

statista website

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

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

اگر وب سایتی دارید یا در حال ساختن هستید که یک محصول یا یک تجربه واقعی را می فروشد، باید کمی به این موضوع فکر کنید. موثرترین راه برای فروش چیزی این است که اجازه دهید مصرف کننده آن را “احساس” کند.

چطور این کار را انجام می دهید؟

با محصولات، سخت نیست. شاید زمانی که دستگاه‌های دستی درگیر می‌شوند بیشتر از این اتفاق بیفتد، اما هنوز آنقدرها هم سخت نیست. راه های زیادی وجود دارد که می توانید یک محصول را به نمایش بگذارید که به مشتری اجازه می دهد آن را “احساس” کند.

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

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

 

Surfing2 استراتژی مشابهی را به کار می گیرد. در این مثال، سبک ترین قسمت تصویر اقیانوس به طور یکپارچه در پس زمینه وب سایت ترکیب شده است.

16395344513

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

 

۲٫ تغییر تایپوگرافی توجه را به محتوا جلب می کند

تغییرات در اندازه، رنگ و سبک تایپوگرافی وب سایت اغلب به عنوان استراتژی های جلب توجه به کار گرفته می شود. در سال ۲۰۲۲، شاهد اضافه شدن حرکت به متن نیز خواهیم بود.

حرکت در یک محیط آرام یا ساکن همیشه قابل توجه است، و حرکت استراتژیک و به موقع اعمال شده روی محتوا واقعاً می تواند یک وب سایت را در میان بقیه متمایز کند.

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

BeDietShop این کار را به طور موثر در تصویر قهرمان خود با توجه به مواد غذایی خوشمزه انجام می دهد.

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

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

 

۳٫ پس‌زمینه‌های هنر خطی می‌توانند به عنوان راهنمای مفید استفاده شوند

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

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

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

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

16395348246

 

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

BeAgency6 سایت دیگری است که از پس زمینه های خط هنر به طور موثر استفاده می کند.

16395348807

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

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

۴٫ گرافیک های تعاملی، زمینه اضافه شده را برای کاربران فراهم می کند

بیشتر طراحی‌های وب تجاری سه هدف اساسی را دنبال می‌کنند: جذب بازدیدکنندگان، درگیر کردن آنها با محتوا، و تبدیل آنها به مشتری.

جذب بازدیدکنندگان مستلزم جلب توجه آنها است و راه های درست و غلطی برای انجام آن وجود دارد.

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

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

یکی از نمونه‌های مجاب کردن بازدیدکننده به توقف این است که محتوایی را که معمولاً اسکرولی است انتخاب کنید و آن را با یک تجربه نمایش اسلاید جایگزین کنید – همانطور که BeInterior6 در بالای صفحه اصلی خود انجام می‌دهد.

16395350798

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

سایت از پیش ساخته شده BeDentist4 تصاویر “قبل” و “پس از” را با این ویژگی منحصر به فرد جایگزین کرد.

به همان خوبی که تصاویر “قبل” و “پس از” کنار هم می توانند داستان را بیان کنند. بازدیدکننده را درگیر می‌کند و راه‌اندازی آن سرگرم‌کننده‌تر و سرگرم‌کننده‌تر است.

 

۵٫ از پالت های رنگی مثبت برای ارسال ارتعاشات مناسب به بازدیدکنندگان استفاده کنید

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

بر کسی پوشیده نیست که یک رنگ خاص با توجه به زمینه ای که در آن استفاده می شود می تواند احساسات خاصی را برانگیزد، اما نظریه اساسی چیست؟

حقیقت این است که چندین عامل دخیل هستند، مانند سایه رنگ، تضاد آن با سایر رنگ‌های وب‌سایت، فرهنگ ناظر و زمینه‌ای که در بالا ذکر شد که در آن ظاهر می‌شود.

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

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

163953536210

ممکن است انتظار داشته باشید که سایت BePizza5 کاملاً متفاوت باشد، اما با نگاه دقیق‌تر متوجه خواهید شد که از یک پالت رنگی تا حدودی خنثی استفاده می‌کند، از سبز غبارآلود تا صورتی غبارآلود، با رنگ‌های بژ در میان.

163953540911

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

 

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

 

منبع : ۵ Upcoming Web Design Trends for 2022


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