نحوه طراحی صفحه محصول: راهنمای نهایی

نحوه طراحی صفحه محصول: راهنمای نهایی

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

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

web-design-contact

نحوه طراحی صفحه محصول

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

اهداف صفحه محصول

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

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

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

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

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

اهداف صفحه محصول و اهداف خریدار

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

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

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

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

 

محتوای یک صفحه محصول

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

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

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

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

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

دکمه Call-To-Action (CTA): این دکمه ای است که به صفحه خرید منتهی می شود. در نزدیکی CTA گزینه های خرید مانند مقدار یا اندازه گنجانده شده است.

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

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

تأیید همتایان: این شامل توصیفات، نظرات، و فهرست‌های برندها یا افرادی است که در گذشته از محصول استفاده کرده‌اند.

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

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

چگونه انواع مختلف محصولات بر محتوای صفحه محصول تأثیر می گذارند

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

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

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

اینها از بازدیدکننده سؤالاتی (سرگرم کننده اما استراتژیک) در مورد ترجیحات آنها می پرسند تا این احساس را ایجاد کنند که صفحه محصولی که در نهایت می بینند قبلاً برای آنها تنظیم شده است.

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

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

 

بهترین شیوه های طراحی صفحه محصول

اکنون که به اصول اولیه نحوه عملکرد یک صفحه محصول پرداختیم، نکات طراحی را مرور می کنیم و به چند نمونه نگاه می کنیم.

 

  1. از نرم افزار مناسب طراحی صفحه محصول استفاده کنید

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

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

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

 

  1. از رویکرد طرح بندی مبتنی بر الگو استفاده کنید

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

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

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

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

 

  1. طراحی با در نظر گرفتن بقیه سایت

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

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

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

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

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

 

  1. اطلاعات را به صورت انتخابی اولویت بندی کنید

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

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

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

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

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

یک تکنیک مهم برای اولویت بندی اطلاعات، فشرده سازی یا جمع کردن محتوای ثانویه است. این امر به ویژه در بخش سؤالات متداول رایج است، جایی که لیستی از سؤالات نمایش داده می شود و کاربر باید یک دکمه (اغلب نماد مثبت یا مثلث) را فشار دهد تا پاسخ را ببیند.

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

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

 

  1. داستانی با تصاویر بگویید

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

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

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

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

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

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

  1. محتوای تولید شده توسط کاربر را دست کم نگیرید

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

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

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

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

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

  1. تست، تجزیه و تحلیل و تکرار کنید

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

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

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

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

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

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

 

یک طراحی صفحه محصول عالی به یک طراح عالی نیاز دارد

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

منبع

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

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

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

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

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

هدف را مشخص کنید

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

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

هنگامی که هدف وب سایت خود را مشخص کردید، گام بعدی این است که مخاطبان هدف خود را تعیین کنید.

web-design-contact

مخاطب هدف خود را شناسایی کنید

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

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

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

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

 

ایجاد یک طرح

اکنون که هدف و مخاطبان وب سایت خود را می دانید، وقت آن است که برنامه ریزی کنید. آیا وب سایت خود را از طریق استخدام یک توسعه دهنده ایجاد می کنید یا سعی می کنید HTML، CSS و جاوا اسکریپت را کشف کنید؟ اگر نیستید، ناامید نشوید. سرویس‌هایی مانند Squarespace، Wix و WordPress وجود دارند که راه‌های بدون کد را برای ساختن وب‌سایتی که از پلتفرم‌های دسکتاپ و موبایل پشتیبانی می‌کنند، ارائه می‌دهند.

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

جستجو برای الهام

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

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

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

 

طراحی و ظاهر

شبکه ها و طرح بندی ها

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

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

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

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

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

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

سلسله مراتب بصری

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

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

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

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

جهت یابی

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

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

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

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

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

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

رنگ ها و فونت ها

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

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

 

رنگ های مکمل دو رنگ متضاد هستند.

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

رنگ های سه گانه ۳ رنگی هستند که در چرخه رنگ از هم فاصله دارند.

 

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

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

اکنون که می دانید کجا باید نگاه کنید، فقط چند نکته وجود دارد که هنگام انتخاب فونت خود باید در نظر داشته باشید:

 

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

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

محتوا

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

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

 

تصویرسازی

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

مثال زیر توسط DSKY به وضوح زیبایی شناسی نام تجاری lager را از طریق تصاویر در بر می گیرد. از تصاویر زیبا و پر جنب و جوش استفاده می کند که لحظه ای آرام و عالی را در یک محیط طبیعی به تصویر می کشد. تصاویر با هم کار می کنند تا یک نقاشی دیواری دیجیتال ایجاد کنند. این افکت بازدید کننده را دعوت می کند تا به پایین اسکرول کرده و با کپی و محتوای صفحه فرود درگیر شود. همچنین شایان ذکر است که Perfect Moment تصاویری از لاگرهای خود را به نمایش می گذارد.

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

 

عناصر تعاملی

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

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

تجربه کاربری وب سایت شما

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

اطمینان حاصل کنید که وب سایت شما از ۵ اصل قابل استفاده پیروی می کند: در دسترس بودن، وضوح، تشخیص، اعتبار و ارتباط. انجام اهداف و وظایف سایت خود را تا حد امکان برای کاربران آسان کنید. قبل از راه اندازی وب سایت خود، ایده خوبی است که تست قابلیت استفاده را انجام دهید. بزرگترین مشکلات کاربران با سایت شما چیست؟ قبل از استقرار سایت خود در جهان تا آنجا که ممکن است مشکلات را برطرف کنید. NNGroup یک نوشتن فوق العاده با بیش از ۱۰۰ نکته کاربردی برای وب سایت شما دارد.

 

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

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

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

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

 

دسترسی

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

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

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

 

بهینه سازی

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

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

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

 

با کاربران ارتباط برقرار کنید

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

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

برای ساخت وب سایت خود آماده اید؟

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

منبع

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

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

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

 

حامیان ادعا می‌کنند که طراحی را تقویت می‌کنند و خلاقیت‌ها را آزاد می‌کنند تا کارهای بهتری تولید کنند. منتقدان می گویند که طراحان را از کار رها می کنند و مسابقه ای را به سمت پایین آغاز می کنند. پس حق با چه کسی است و ML و AI چه ارتباطی با طراحی گرافیکی دارند؟

 

تفاوت بین هوش مصنوعی و یادگیری ماشینی چیست؟

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

 

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

 

ماشین‌ها نه تنها در حال افزایش هستند، بلکه در حال خلاقیت هستند

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

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

 

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

 

طراحی هوش مصنوعی چگونه کار می کند

یک مسیر معمولی برای برنامه های متن به تصویر عبارت است از:

 

کاربر هوش مصنوعی را با یک پیام متنی ارائه می کند

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

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

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

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

 

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

اشکال؟ برخی از نسخه‌هایی که به راحتی در دسترس هستند، تصاویر کاملاً خام تولید می‌کنند، مانند تولیدکننده متن به تصویر با استفاده رایگان DeepAI. سایرین، مانند Midjourney پیچیده تر، در بتا باقی می مانند. و فوتورئالیسم پیشرفته Dall-E و DALL·E 2 Open AI و Imagen گوگل به طرز وسوسه انگیزی برای اکثر طراحان دور از دسترس باقی مانده است – Dall E-2 لیست انتظار طولانی دارد و Imagen برای عموم بسته است. Stable Diffusion ممکن است فقط یک تغییر دهنده بازی باشد – منبع باز است و به کاربران اجازه می دهد تا بر اساس کد آن بسازند، و فیلتر نشده، به این معنی که هیچ تصویری از جدول خارج نمی شود.

 

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

همانطور که می بینیم، هوش مصنوعی و ML در حال حاضر دو کاربرد کلیدی در طراحی دارند:

 

به عنوان یک ابزار نسبتاً اساسی برای شکل دادن به آرم ها و طرح های چاپی یا دیجیتالی اولیه

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

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

 

یادگیری ماشینی برای طراحان همچنین به خلاقان انسان هدیه زمان می‌دهد و به طراحان این امکان را می‌دهد که استراحت کنند، کارهای بیشتری انجام دهند یا ایده‌های مختلف را آزمایش کنند، در حالی که نرم‌افزار کار غرغر را انجام می‌دهد. اعلان‌های تبدیل متن به هنر نیز طراحی را به روی افرادی باز می‌کند که ممکن است ایده‌های عالی داشته باشند، اما مهارت طراحی برای تحقق آنها را ندارند. هنرمند Benjamin Von Wong می‌گوید: «DALL·E یک ابزار فوق‌العاده برای کسی مثل من است که نمی‌تواند نقاشی کند. “به جای نیاز به ترسیم مفاهیم، من به سادگی می توانم آنها را از طریق عبارات مختلف ایجاد کنم.”

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

 

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

 

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

 

اما هوش مصنوعی و ML تنها بخشی از تصویر هستند

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

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

 

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

 

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

 

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

فرآیند طراحی UX چیست: ۵ مرحله برای کاربران شادتر

فرآیند طراحی UX چیست: ۵ مرحله برای کاربران شادتر

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

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

 

طراحی UX چیست؟

UX مخفف “تجربه کاربر” است و به طراحی یک محصول به روشی راحت، شهودی و سرگرم کننده برای کاربر اشاره دارد. تجربه کاربر خود نشان دهنده احساس کاربر هنگام تعامل با محصول شما با هر کلیک و نگاه است – آیا این یک تجربه خوب است یا یک تجربه بد؟

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

چرا طراحی UX اینقدر مهم است؟ طراحی UX نیازها و علایق کاربران شما را حتی قبل از ورود به سیستم پیش‌بینی می‌کند و باعث می‌شود سایت یا برنامه شما بیشتر با اولویت‌های خاص آن‌ها هماهنگ شود. مطمئناً، هر کاربر منحصر به فرد است، اما بیشتر محصولات مخاطبین هدفی دارند که تمایل به رفتار یکنواخت دارند، مانند “زنان ۱۸ تا ۲۶ ساله با فناوری”. اگر بتوانید جلوه‌های بصری و رابط کاربری خود را به شکلی که می‌خواهند، مخصوصاً جزئیات دقیق، ارائه دهید، آن‌ها از محصول شما بسیار لذت خواهند برد و از آن قدردانی خواهند کرد.

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

 

مرحله ۱: برنامه ریزی از قبل

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

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

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

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

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

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

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

 

مرحله ۲: برنامه ریزی

اگر مرحله ۱ در مورد پاسخ دادن به سؤالات تصویر بزرگ است، مرحله ۲ در مورد جزئیات است. شما از قبل می‌دانید که چه کسی را هدف قرار می‌دهید و کدام وظایف را باید در اولویت قرار دهید، بنابراین اکنون زمان آن است که در مورد آنچه کاربران شما می‌خواهند و چگونه کارهای اصلی خود را آسان‌تر کنید، غواصی کنید.

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

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

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

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

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

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

این می تواند به شما کمک کند محصول نهایی را با ترسیم طرح های ابتدایی تجسم کنید، اما این ضروری نیست.

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

 

مرحله ۳: قاب سیمی  (وایر فریم)

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

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

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

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

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

برای ساخت یک Wireframe تعاملی، باید نرم افزار UX مناسب را انتخاب کنید. AdobeXD، Moqups و Lucidchart برخی از انتخاب های محبوب هستند.

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

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

مرحله ۴: نمونه سازی

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

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

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

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

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

 

مرحله ۵: نهایی کردن

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

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

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

منبع : https://99designs.com/blog/web-digital/ux-design-process/

طراحی وب سایت رستوران که می توانید از آن لذت ببرید

طراحی وب سایت رستوران که می توانید از آن لذت ببرید

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

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

فقط از دیگران در صنعت بپرسید. بر اساس نظرسنجی اخیری که انجام شده، اکثریت (۸۹%) از صدها نفر از رهبران کسب‌وکار کوچک در مهمان‌نوازی در سرتاسر آمریکای شمالی، بریتانیا، استرالیا و نیوزلند معتقدند که برندسازی برای موفقیت کلی آنها مهم است، با ۸۳٪. می‌گویند که به رشد درآمد کمک می‌کند. از همین گروه، ۸۷ درصد گزارش کرده اند که نام تجاری آنها به جذب مشتریان جدید کمک می کند و ۹۳ درصد می گویند که به ایجاد اعتماد کمک می کند.

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

کاری که طراحی سایت رستوران عالی انجام می دهد-

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

web-design-contact

چرا؟

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

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

بسیاری از رستوران ها فراتر از نشان دادن مارک ها و پیشنهادات خود هستند و وب سایت های خود را تعاملی می کنند. این اغلب در مورد وب‌سایت‌های سریع معمولی که برای سفارش تلفن همراه راه‌اندازی شده‌اند، مانند Chipotle، صادق است.

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

رزرو میز

بررسی وضعیت سفارش

مشاهده زمان انتظار فعلی

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

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

عناصر کلیدی طراحی وب سایت رستوران

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

اما عناصر کلیدی برای طراحی یک وب سایت رستوران موفق نیز وجود دارد و این موارد عبارتند از:

روی غذا تمرکز کنید

مهمترین بخش هر رستورانی غذا است! غذا باید جلو و مرکز وب سایت شما باشد. به همین دلیل است که عکس‌های بزرگ، با وضوح بالا و از نظر بصری جذاب یکی از ضروریات طراحی وب‌سایت هر رستورانی است.

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

ناوبری را به یک تکه کیک تبدیل کنید

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

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

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

تمام اطلاعات حیاتی را ارائه دهید

به عنوان یک صاحب رستوران، احتمالاً به همه این سؤالات اغلب پاسخ می‌دهید، احتمالاً حتی روزانه:

موقعیت مکانی شما کجاست؟

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

شماره تلفن شما چیست؟

از کجا می توانم منوی شما را ببینم؟

موارد ویژه شما چیست؟

چگونه می توانم رزرو کنم؟

در منوی شما چیست؟

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

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

وب سایت شما همچنین باید منوی شما را در یک نقطه برجسته نشان دهد.

ما نمی توانیم تضمین کنیم که این کار تمام تماس ها را با سؤال متوقف می کند … اما در حالت ایده آل، صدای آنها را کاهش می دهد.

از این طرح های وب سایت رستوران ها لذت ببرید-

بار ایزابل

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

میچی رامن

سادگی چیز بزرگی در مورد وب سایت Michi Ramen است. پس از گذشتن از عکس دل‌انگیز یک کاسه رامن، تصویری سریع از نحوه سفارش کاسه خود دریافت می‌کنید. اگر قبلاً هرگز رامن نخورده‌اید (یا اگر هرگز رامنی نداشته‌اید که قبلاً در بلوک انجمادی عرضه نشده باشد)، این گرافیک سفارش را از Michi Ramen بسیار ساده می‌کند.

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

باتارد

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

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

کلارو;

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

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

کیکونوی

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

مالایی

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

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

طراحی وب بسیار خوب است، شما آن را به درستی انجام خواهید داد

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

منبع : https://99designs.com/blog/web-digital/restaurant-website-design/

طراحی وب چیست، چگونه آن را به درستی انجام دهیم و بهترین مهارت ها کدامند ؟

طراحی وب چیست، چگونه آن را به درستی انجام دهیم و بهترین مهارت ها کدامند ؟

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

آیا تا به حال به این فکر کرده اید که معنای طراحی وب چیست و چه تکنیک هایی در این فرآیند وجود دارد؟

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

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

در این مقاله یاد خواهید گرفت:

طراحی وب چیست؟

چرا طراحی وب سایت مهم است؟

در طراحی سایت به چه نکاتی توجه کنیم؟

بدترین اشتباهات طراحی وب چیست؟

مهمترین مهارت های یک طراح وب چیست؟

آن را بررسی کنید!

آیا تا به حال به این فکر کرده اید که معنای طراحی وب چیست و چه تکنیک هایی در این فرآیند وجود دارد؟

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

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

در این مقاله یاد خواهید گرفت:

طراحی وب چیست؟

چرا طراحی وب سایت مهم است؟

در طراحی سایت به چه نکاتی توجه کنیم؟

بدترین اشتباهات طراحی وب چیست؟

مهمترین مهارت های یک طراح وب چیست؟

آن را بررسی کنید!

این پست را با وارد کردن ایمیل خود در زیر دانلود کنید

ایمیل خود را اینجا وارد کنید

نگران نباشید ما اسپم نمی کنیم.

طراحی وب چیست؟

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

با استفاده از کد HTML برای برنامه‌نویسی وب‌سایت‌ها و CSS برای استاندارد کردن زبان بصری آن، متخصصان طراحی وب مسئول ایجاد تجربیات دیجیتالی برای استفاده عموم هستند. هدف ارائه یک تجربه با کیفیت به مخاطب و کمک به کسب و کار در رسیدن به اهداف خود است.

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

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

طراحی گرافیک وب

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

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

طراحی رابط

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

ایده ارائه یک رابط ساده، شهودی و سازگار با ویژگی های مخاطب هدف است.

طراحی تجربه کاربری

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

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

بهینه سازی موتور جستجو

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

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

چرا طراحی وب سایت مهم است؟

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

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

چندین جایگزین موجود با قابلیت های مختلف، از Photoshop گرفته تا Dreamweaver.

ابزارهای تخصصی نیز وجود دارند که بر روی کارهای خاص تمرکز می کنند، مانند Sketch که بر عناصر رابط کاربری برداری تمرکز دارد و InVision که به شما کمک می کند کار طراحی وب خود را به مشتری یا مافوق ارائه دهید.

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

ارتباط

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

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

HTML/CSS

دانش برنامه نویسی برای کار در طراحی وب مورد نیاز است. زبان‌های ضروری اصلی HTML و CSS هستند که هر کدام کار متفاوتی را انجام می‌دهند.

HTML (زبان نشانه گذاری فرامتن) و CSS (برگ های سبک آبشاری) نحوه نمایش عناصر در صفحات وب را هماهنگ می کنند. یک طراح وب ماهر می تواند طراحی برنامه ریزی شده را با استفاده از برچسب ها و مقادیر مناسب هنگام نوشتن در HTML و CSS به دقت اعمال کند.

UX/UI

از آنجایی که طراحان وب با رابط ها کار می کنند، باید در UX/UI مهارت داشته باشند. علیرغم اینکه معمولاً در کنار هم استفاده می شوند، مفاهیم متفاوتی هستند.

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

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

بهینه سازی موتورهای جستجو (SEO)

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

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

مدیریت زمان

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

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

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

فقط آنچه را که در اینجا آموخته اید در مورد اینکه ساخت یک استراتژی مناسب و کار با طراحان واجد شرایط چقدر ضروری است را به خاطر بسپارید.

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

 

منبع : https://rockcontent.com/blog/web-design/

طراحی وب چیست؟ راهنمای نهایی برای طراحی وب سایت [۲۰۲۳]

طراحی وب چیست؟ راهنمای نهایی برای طراحی وب سایت [۲۰۲۳]

طراحی وب چیست؟

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

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

در این مقاله به موارد زیر خواهیم پرداخت:

یافتن الهام

انتخاب ابزار طراحی وب سایت

عناصر بصری

عناصر عملکردی

انواع طراحی وب سایت: تطبیقی در مقابل واکنش گرا

یافتن الهام

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

Behance

پینترست

Awwwards

الهام بخش طراحی وب سایت

سایت الهام بخش

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

انتخاب ابزار طراحی وب سایت

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

  1. برنامه های دسکتاپ

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

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

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

  1. سازندگان وب سایت

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

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

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

عناصر طراحی وب سایت

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

عناصر بصری

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

کپی مکتوب

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

فونت ها

فونتی را انتخاب کنید که طراحی کلی شما را تحسین کند. فونت باید با طرح رنگ، گرافیک، تصاویر شما جفت شود و لحن کلی وب سایت شما را تقویت کند. ابزارهایی مانند Canva’s Font Combinator می توانند به شما کمک کنند تا یک تطابق کامل با فونت خود پیدا کنید. ابزارهای طراحی وب مانند سالوک وب حتی شامل جفت فونت های متعدد در برنامه خود می شوند.

رنگ ها

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

چیدمان

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

شکل ها

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

فاصله گذاری

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

تصاویر و نمادها

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

تصاویر و آیکون های رایگان

پیکسل ها

Unsplash

IconMonstr

تصاویر و نمادهای برتر

شاتر استوک

ویدیوها

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

عناصر عملکردی

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

جهت یابی

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

تعاملات کاربر

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

هرگز صدا یا ویدیو را به صورت خودکار پخش نکنید

هرگز زیر متن خط نکشید مگر اینکه قابل کلیک باشد

مطمئن شوید که همه فرم‌ها سازگار با موبایل هستند

اجتناب از پاپ آپ

از Scroll-jacking خودداری کنید

تصاویر متحرک

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

سرعت

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

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

ساختار سایت

ساختار یک وب سایت نقش مهمی در تجربه کاربری (UX) و بهینه سازی موتور جستجو (SEO) دارد. کاربران شما باید بتوانند به راحتی در وب سایت شما بدون مواجهه با مشکلات ساختاری حرکت کنند. اگر کاربران هنگام تلاش برای پیمایش در سایت شما گم می شوند، به احتمال زیاد “خزنده ها” نیز هستند. خزنده (یا ربات) یک برنامه خودکار است که در وب سایت شما جستجو می کند و می تواند عملکرد آن را تعیین کند. ناوبری ضعیف می تواند منجر به تجربه کاربری و رتبه سایت ضعیف شود.

سازگاری بین مرورگرها و بین دستگاه ها

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

انواع طراحی وب سایت: تطبیقی در مقابل واکنش گرا

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

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

وب سایت های تطبیقی

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

  1. بر اساس نوع دستگاه سازگار می شود

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

  1. بر اساس عرض مرورگر سازگار می شود

به‌جای استفاده از «عامل کاربر»، وب‌سایت از پرسش‌های رسانه‌ای (یک ویژگی CSS که صفحه وب را قادر می‌سازد تا با اندازه‌های مختلف صفحه نمایش سازگار شود) و نقاط شکست (اندازه‌های عرض معین) برای جابه‌جایی بین نسخه‌ها استفاده می‌کند. بنابراین به جای داشتن نسخه دسکتاپ، تبلت و موبایل، نسخه های ۱۰۸۰ پیکسلی، ۷۶۸ پیکسلی و ۴۸۰ پیکسلی را خواهید داشت. این انعطاف پذیری بیشتری را هنگام طراحی ارائه می دهد و تجربه بهتری از مشاهده را ارائه می دهد زیرا وب سایت شما بر اساس عرض صفحه تطبیق می یابد.

طرفداران

ویرایش WYSIWYG (آنچه می بینید همان چیزی است که دریافت می کنید)

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

سازگاری بین مرورگرها و بین دستگاه ها

صفحات با بارگذاری سریع

منفی

وب‌سایت‌هایی که از «نوع دستگاه» استفاده می‌کنند، وقتی در یک پنجره مرورگر کوچک‌تر روی دسک‌تاپ مشاهده می‌شوند، ممکن است شکسته به نظر برسند

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

وب سایت های واکنش گرا

وب‌سایت‌های واکنش‌گرا می‌توانند از طرح‌بندی شبکه‌ای انعطاف‌پذیر استفاده کنند که بر اساس درصدی است که هر عنصر در کانتینر خود می‌گیرد: اگر یک عنصر (به عنوان مثال یک سرصفحه) ۲۵٪ از ظرف آن باشد، آن عنصر بدون توجه به تغییر اندازه صفحه در ۲۵٪ باقی می‌ماند. . وب‌سایت‌های واکنش‌گرا همچنین می‌توانند از نقاط شکست برای ایجاد یک نمای سفارشی در هر اندازه صفحه استفاده کنند، اما برخلاف سایت‌های تطبیقی که فقط زمانی که به نقطه شکست می‌رسند، سازگار می‌شوند، وب‌سایت‌های واکنش‌گرا به طور مداوم بر اساس اندازه صفحه تغییر می‌کنند.

طرفداران

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

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

هزاران الگوی موجود برای شروع

منفی

نیاز به طراحی و آزمایش گسترده برای اطمینان از کیفیت (هنگام شروع از ابتدا)

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

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

سازندگان وب سایت تطبیقی

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

Wix از سال ۲۰۰۶ وجود داشته است و از آن زمان طیف گسترده ای از ویژگی ها و قالب ها را متناسب با تقریباً هر نیاز تجاری ایجاد کرده است. امروزه یکی از ساده ترین ابزارها برای مبتدیان در نظر گرفته می شود.

اگرچه انتخاب برنده در این دسته سخت است، اما در اینجا چند نکته وجود دارد که باید در نظر داشته باشید:

اگر به دنبال قابل تنظیم ترین تجربه هستید، سالوک وب را انتخاب کنید.

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

اگر به دنبال کار با یک توسعه دهنده هستید، سالوک وب را انتخاب کنید.

اگر گزینه های قالب زیادی می خواهید، Wix را انتخاب کنید.

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

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

سازندگان وب سایت واکنش گرا

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

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

طرفداران

امکان ایجاد سایت های ریسپانسیو سفارشی بدون نیاز به نوشتن کد

کنترل بی نظیر بر روی هر عنصر در صفحه

امکان صادرات کد به هاست در جای دیگر

منفی

ابزارهای پیچیده با منحنی های یادگیری شیب دار

روند طراحی کندتر از سازندگان وب سایت تطبیقی

تجارت الکترونیک

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

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

مراحل بعدی

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

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

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

منبع: https://www.pagecloud.com/blog/web-design-guide

نحوه ایجاد یک وب سایت: راهنمای نهایی برای طراحی وب سایت

نحوه ایجاد یک وب سایت: راهنمای نهایی برای طراحی وب سایت

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

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

راهنمای نهایی ما برای طراحی وب شما را در فرآیند ایجاد یک وب سایت گام به گام راهنمایی می کند:

آنچه برای شروع باید بدانید

کی کیه

نام دامنه و هاست

ساختار و محتوا

عملکرد

CMS ها

چگونه وب سایت خود را ایجاد کنیم

قالب ها

راه حل های سفارشی

راه حل های ترکیبی

چگونه یک وب سایت سفارشی در ۷ مرحله طراحی کنیم

آنچه را که نیاز دارید مشخص کنید و یک طراح استخدام کنید

با وایرفریم ها شروع کنید

ظاهر و احساس را طراحی کنید

برای تمام صفحات قالب ایجاد کنید

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

مطالب را پر کنید

تست کاربر انجام دهید

آنچه برای شروع باید بدانید

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

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

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

طراحان UX (تجربه کاربر) یا UI (رابط کاربری) بر این موضوع تمرکز می کنند که طراحی چیدمان شما چگونه بر کاربران شما تأثیر می گذارد. به عنوان مثال، آنها به شما کمک می‌کنند تا تصمیم بگیرید که دکمه‌ها را کجا قرار دهید تا افراد بیشتری روی آنها کلیک کنند، یا اینکه چگونه ناوبری خود را ساختار دهید تا سایت شما تا حد امکان یکپارچه جریان یابد. (بین UX و UI تفاوت وجود دارد. این مقاله به خوبی آن را توضیح می دهد.) اغلب اوقات، بین طراحان UX/UI و طراحان وب همپوشانی وجود دارد. اگر به دنبال صرفه جویی در هزینه هستید، استخدام یک فریلنسر که هر دو مجموعه مهارت را دارد، چندان دشوار نیست.

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

توسعه دهندگان فرانت اند در مواردی که هنگام نگاه کردن به یک وب سایت می بینیم (مانند رندر کردن تصاویر، متن، انیمیشن ها، منوهای کشویی، طرح بندی صفحه و غیره) تخصص دارند.

از سوی دیگر، توسعه دهندگان Back end در آنچه در پشت صحنه می گذرد تخصص دارند و اگر وب سایت شما نیاز به برقراری ارتباط با پایگاه داده داشته باشد، ضروری هستند. (اگر می خواهید سبد خرید، نمایه های کاربری داشته باشید، یا بخواهید بتوانید هر محتوایی را به تنهایی آپلود کنید، به یک پایگاه داده نیاز دارید.)

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

یک نام دامنه و میزبانی خریداری کنید

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

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

نام دامنه شما همان چیزی است که افراد در مرورگر خود تایپ می کنند تا به سایت شما برسند (به عنوان مثال salookweb.com). معمولاً این نام تجاری شماست. برای دریافت نام دامنه، آن را با یک ثبت کننده دامنه ثبت می کنید. برای خرید و حفظ نام باید هزینه کمی بپردازید (معمولاً کمتر از ۱۰ دلار در سال). اکثر خدمات میزبانی به عنوان ثبت کننده دامنه نیز عمل می کنند. این به طور کلی بهترین گزینه برای شماست، زیرا راه‌اندازی آن آسان‌ترین است.

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

به ساختار فکر کنید و محتوا را برای وب سایت خود جمع آوری کنید

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

برای ساختار باید به صفحاتی که نیاز دارید فکر کنید، موارد رایج عبارتند از:

صفحه نخست

درباره صفحه و/یا صفحه تماس

وبلاگ

فهرست محصولات

صفحات تک محصولی

شرایط و ضوابط

آلبوم عکس

صفحات فرود / صفحات بازاریابی برای تبلیغات

هر یک از این نوع صفحات نیاز به چیدمان و طراحی دارند و هر کدام باید محتوایی در آن داشته باشند.

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

نکته حرفه ای: طراح شما (به خصوص اگر تجربه UX/UI داشته باشد) ممکن است ایده های خوبی برای محتوا و ساختار داشته باشد که فکرش را نکرده اید. احتمالاً ارزش دارد که در اوایل فرآیند با آنها بحث کنید.

مشخص کنید به چه عملکردی نیاز دارید

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

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

درک کنید که CMS چیست و تصمیم بگیرید که آیا به آن نیاز دارید یا خیر

CMS (سیستم مدیریت محتوا) یک پایگاه داده و برنامه تحت وب است. اساساً به کاربران (مانند شما و همکاران/کارمندانتان) اجازه می‌دهد تا محتوا را برای رفتن به قسمت‌های مختلف سایتتان آپلود کنند. اگر می خواهید بتوانید به طور منظم متن را ویرایش کنید یا عکس ها را در وب سایت خود تغییر دهید و نمی دانید چگونه کدنویسی کنید، به یک CMS نیاز دارید!

گزینه های CMS زیادی وجود دارد. گزینه های خارج از جعبه فوق العاده ای برای موارد استفاده رایج وجود دارد (مانند وردپرس برای وبلاگ نویسی، Shopify برای میزبانی یک سایت تجارت الکترونیک، شش برای ایجاد یک نمایه). اما اگر به عملکرد پیشرفته نیاز دارید (مثل اینکه امیدوارید فیس بوک یا اوبر یا طرح های ۹۹ بعدی را بسازید) باید آن را به صورت سفارشی توسعه دهید.

چگونه وب سایت خود را ایجاد کنیم

سایت های قالب و سازندگان

پلتفرم های قالب وب DIY در دهه گذشته محبوبیت زیادی پیدا کرده اند. احتمالاً حداقل نام چند مورد از آنها را شنیده اید. نام های محبوب عبارتند از: Squarespace، Shopify، Wix و Weebly. هر کدام تخصص خاص خود را دارند (به عنوان مثال، Shopify بر روی سایت های تجارت الکترونیک تمرکز می کند) و مجموعه ای از قالب های خاص خود را دارد که می توانید از بین آنها انتخاب کنید.

طرفداران:

کم هزینه ترین گزینه

همه آنها CMS هایی هستند که به شما امکان می دهند آنچه را که در سایت شما وجود دارد کنترل کنید

اشکالاتی:

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

فریلنسرها را برای یک راه حل سفارشی استخدام کنید

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

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

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

طرفداران:

دقیقاً ظاهر و عملکرد مورد نظر خود را دریافت کنید

هزینه های معقول (اگرچه بدیهی است که به فریلنسر و نیازهای خاص شما بستگی دارد)

اشکالاتی:

ممکن است لازم باشد چندین نفر را استخدام کنید (طراح وب، طراح UX/UI، توسعه دهنده)

نیاز به زمان و اطلاعات بیشتری از شما دارد

طراحان مستقل را برای یک راه حل ترکیبی استخدام کنید

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

یکی از محبوب ترین گزینه ها برای این کار ساخت یک وب سایت در وردپرس است. در حالی که وردپرس به عنوان یک پلتفرم وبلاگ نویسی شروع به کار کرد، به محبوب ترین CMS در کل اینترنت تبدیل شده است (تقریباً ۳۰٪ از همه سایت ها را تامین می کند). کاملاً قابل تنظیم است و می تواند با کسب و کار شما رشد کند. هزاران و هزاران الگو وجود دارد، اما می‌توان الگوی خود را نیز ایجاد کرد و آن را به یک راه‌حل ترکیبی عالی تبدیل کرد.

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

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

طرفداران:

به شما امکان می دهد عملکردهای پیشرفته تری (که با پلتفرم هایی مانند وردپرس یا Shopify داخلی ارائه می شود) با هزینه کمتر داشته باشید.

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

اشکالاتی:

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

یک آژانس برای یک راه حل نهایی می باشد.

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

طرفداران:

کمترین سردرد؛ شما در حال کار با کارشناسانی هستید که شما را در کل فرآیند راهنمایی می کنند

اشکالاتی:

شما احتمالاً به قیمت بالایی نگاه می کنید

چگونه یک وب سایت سفارشی در ۷ مرحله طراحی کنیم

  1. آنچه را که نیاز دارید مشخص کنید و یک طراح استخدام کنید

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

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

  1. با وایرفریم ها شروع کنید

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

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

شما باید برای همه انواع صفحه اصلی خود (به عنوان مثال صفحه اصلی، لیست محصولات، مقالات وبلاگ و غیره) وایرفریم انجام دهید.

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

  1. ظاهر و احساس را طراحی کنید

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

لوگوی شما

رنگ های برند شما (در صورت امکان کدهای هگز دقیق)

لیستی از فونت ها

هر درخواست سبک دیگری (مثلاً “سرگرم کننده و دوستانه” یا “تاریک و مجلل”)

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

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

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

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

  1. برای تمام صفحات قالب ایجاد کنید

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

با فرض اینکه طراح شما نیز توسعه دهنده شما نیست، در این مرحله آنها باید فایل های تصویری لایه ای را در اختیار شما قرار دهند که می توانید آنها را به توسعه دهنده خود ببرید. (استاندارد صنعت فایل های Adobe Photoshop است، اگرچه Sketch روز به روز محبوب تر می شود.)

  1. برای کدنویسی طرح خود با یک توسعه دهنده کار کنید

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

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

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

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

  1. تمام مطالب را پر کنید

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

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

  1. تست کاربر را انجام دهید

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

قانون کلی من هنگام گرفتن بازخورد این است که اگر دو نفر مختلف (که با یکدیگر صحبت نکرده‌اند) یک یادداشت را به من بدهند، احتمالاً درگیر چیزی هستند.

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

آیا برای ایجاد یک وب سایت عالی برای کسب و کار خود آماده هستید؟

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

 

حالا بروید و یک وب سایت شگفت انگیز ایجاد کنید!

منبع : https://99designs.com/blog/web-digital/web-design-how-to

تصاویر استوک چیست؟ (و نحوه استفاده صحیح از آن.)

تصاویر استوک چیست؟ (و نحوه استفاده صحیح از آن.)

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

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

در این مقاله نحوه استفاده از عکس های استوک و مهمتر از آن نحوه استفاده نکردن از آنها را توضیح خواهیم داد.

تصاویر استوک چیست؟

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

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

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

آیا تصاویر استوک موثر هستند؟

اونها می تونند … باشند. اگر تصاویر استوک را تغییر دهید و شخصی سازی کنید، قطعاً همه کاره تر می شوند. واقعیت این است که تصاویر استوک زمانی موثرتر هستند که شبیه تصاویر استوک نباشند.

چند سال پیش، وبلاگ آزمایش‌های بازاریابی عملکرد عکس‌های استوک را در مقابل عکس‌های سفارشی آزمایش کرد. آنها دریافتند که وقتی یک تصویر عمومی از یک زن را با عکسی از بنیانگذار واقعی (و عنوانی با نام او) عوض کردند، شاهد افزایش ۳۵ درصدی در تبدیل ها بودند.

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

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

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

چند نوع مجوز  برای عکسهای استوک وجود دارد؟

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

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

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

توسعه یافته یا ارتقا یافته: این ویژگی آزادی های بیشتری را برای یک مجوز استاندارد، از جمله استفاده های متعدد از تصویر و مجوز برای فروش مجدد و استفاده تجاری (مانند تی شرت) فراهم می کند.

برای اطلاعات بیشتر در مورد مشخصات مجوزهای stock، راهنمای میدانی ما برای صدور مجوز تصویر stock را بخوانید.

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

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

web-design-contact

اسناد استاندارد: استفاده رایگان از تصویر تا زمانی که به هنرمند اعتبار داده شود.

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

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

مشابه غیر تجاری: نمی توان از تصویر برای مقاصد تجاری یا فروش مجدد استفاده کرد.

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

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

علیرغم اینکه به نظر می رسد، عمومی خلاقانه بسته به نوع انتساب، تشریفات قانونی زیادی دارد. مطمئن شوید که دستورالعمل‌ها را دقیقاً دنبال می‌کنید، در غیر این صورت ممکن است تصویر stock «رایگان» شما منجر به هزینه‌های قانونی بیشتر شود.

از کجا می توانید تصاویر استوک را پیدا کنید؟

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

 

Adobe Stock: Adobe Stock به دلیل گستردگی و تنوع خود شناخته شده است. این بسیار مفید است، ما حتی یک راهنمای ۶ مرحله ای برای یافتن تصویر عالی روی آن نوشتیم.

Getty Images: یکی از شناخته‌شده‌ترین نام‌ها در تصاویر استوک، گتی عکس‌های استوک، تصاویر، ویدیوها و حتی موسیقی را ارائه می‌دهد. Getty تخفیف‌های قیمتی را برای بسته‌های ۵ و ۱۰ تایی ارائه می‌کند، که اگر از عکس‌ها یا ویدیوهای HD بزرگ استفاده می‌کنید، می‌تواند صدها ضرر شما را کاهش دهد.

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

Moose: Moose یک سایت عکاسی stock است که توسط Icons8 اداره می شود. تصاویر آنها برای استفاده شخصی و تجاری رایگان است تا زمانی که به وب سایت آنها پیوند دهید. همچنین می توانید مجوزی را خریداری کنید که نیازی به پیوند ندارد.

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

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

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

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

۲ نکته کلیدی برای استفاده از تصاویر استوک

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

  1. عکس‌های استوک را با عکس‌های سفارشی مخلوط کنید تا همه آنها سفارشی به نظر برسند (یعنی از استفاده از عکس‌های استوک برای هر عکس خودداری کنید)

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

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

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

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

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

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

  1. عکس‌های استوک خود را با یک ویرایشگر تصویر شخصی کنید (یعنی از عکس‌های استوک «خارج از جعبه» استفاده نکنید)

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

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

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

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

عکس های استوک: اصالت قرض گرفتن

به یاد داشته باشید، اگر یک تصویر stock واقعاً موفق باشد، نمی‌دانید کهstock است. هر اقدامی که می توانید برای شخصی سازی آن انجام دهید آن را مؤثرتر می کند، بنابراین از تبدیل تصاویر استوک به تصاویر سفارشی خودداری نکنید.

منبع : https://99designs.com/blog/tips/stock-imagery/

طراحی وب چیست (و چگونه آن را درست انجام دهم)؟

طراحی وب چیست (و چگونه آن را درست انجام دهم)؟

یک وبسایت یک وب سایت است، درست است؟ اشتباه. یک وب سایت قدیمی، گیج کننده یا خراب به برند شما آسیب می رساند. ما نمی گوییم که ممکن است به برند شما آسیب برساند، ما می گوییم که به آن آسیب می رساند.

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

طراحی وب چیست؟

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

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

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

طراحان وب :

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

توسعه دهندگان وب :

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

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

web-design-contact

چرا طراحی وب سایت مهم است؟

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

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

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

طراحی وب خوب چگونه به نظر می رسد؟

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

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

 

طراحی وب موثر چند عنصر مختلف را برای ارتقاء تبدیل به هم می آورد. این شامل:

 

استفاده قانع کننده از فضای منفی

انتخاب‌هایی که به وضوح برای کاربر ارائه شده است (هرچه کاربر انتخاب‌های کمتری داشته باشد، احتمال سردرگمی و سردرگمی او کمتر می‌شود)

فراخوان های آشکار و واضح برای اقدام

حواس پرتی محدود و سفر کاربر به خوبی فکر شده (یعنی فقط استفاده از تصاویر و متنی که ۱۰۰٪ با موضوع صفحه مرتبط است، فقط دکمه هایی را نشان می دهد که به اقدامات دلخواه منجر می شوند و استفاده از تغییرات فونت برای تأکید و فراخوانی برای اقدام، نه فقط به خاطر داشتن فونت های مختلف)

طراحی ریسپانسیو (طراحی که اندازه را تغییر می دهد و به صفحه کاربر تغییر جهت می دهد، وب سایت را برای استفاده در هر دستگاهی آسان می کند: تلفن، تبلت، لپ تاپ یا مرورگر دسکتاپ.

فونت‌هایی با اندازه مناسب که از یک سلسله مراتب پیروی می‌کنند (به «حواس‌پرتی محدود» مراجعه کنید)

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

تعادل بین مقدار متن و تصاویر در هر صفحه (متن بیش از حد می‌تواند بازدیدکننده را تحت تأثیر قرار دهد، متن بسیار کم می‌تواند به همان اندازه بی‌تفاوت باشد)

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

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

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

 

سایر اجزای سازنده یک طراحی وب موثر عبارتند از:

دکمه ها

فونت ها

پالت رنگ

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

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

 

طراحی وب: چیزی که کار نمی کند

ما به این موضوع پرداختیم که طراحی خوب چیست. حالا بیایید کمی در مورد آنچه که نیست صحبت کنیم.

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

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

در اینجا چند عنصر دیگر برای اجتناب وجود دارد:

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

طراحی غیر پاسخگو امروزه وب سایت شما به سادگی نیاز به پاسخگو بودن برای موبایل دارد.

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

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

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

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

چگونه طراحی وب سایت را انجام دهیم؟

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

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

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

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

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

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

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

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

ایجاد یک وب سایت که کار می کند

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

منبع : https://99designs.com/blog/web-digital/what-is-web-design/