راهنمای کوتاهی برای مواردی که باید درباره فرآیند طراحی وب سایت حرفه ای بدانید
طراحی و ساخت سایت موفق برای اینکه به هدف خود برسد، به ارتباط خوب، برنامه‌ریزی و یک تیم بسیار ماهر در طراحی و پیاده سازی نیازمند است. بدون شک، این فرایندی آسان نیست، با این حال، داشتن یک فرآیند طراحی وب ثابت می تواند به شما کمک کند تا هر پروژه ای را به روشی بسیار روانتر تکمیل کنید.
به هر دلیلی که دوست دارید از فرایند طراحی الماس دوگانه ( یک چارچوب محبوب برای حل مسئله و طراحی است که به طور خاص برای طراحی وب و تجربه کاربری (UX) کاربرد دارد.) یا رویکرد تکراری استفاده کنید، داشتن یک فرایند طراحی به شما ساختار، تمرکز و هدایت در مورد چگونگی پیشرفت از یک مشکل مبهم به یک راه حل طراحی کامل می‌دهد.
به همین دلیل است که در این پست وبلاگ، فرآیند طراحی سایت حرفه ای 10 مرحله ای خود را به اشتراک خواهیم گذاشت که به شما کمک می کند وب سایت ها را سریعتر و کارآمدتر ارائه دهید.
اولین مرحله به تعیین هدف وب سایت و کاری که طراحی وب سایت باید برای رسیدن به آن هدف انجام دهد، اختصاص دارد. معمولاً در طول این فاز، مدیر پروژه یا طراح با ذینفعان مانند شرکت سفارش دهنده طراحی یا مشتری نهایی همکاری می کند.
مراحل تعریف پروژه شامل موارد زیر است:
هر فرآیند طراحی با وجود یک مشکل و حل آن آغاز می شود. طراحان قبل از اینکه راه حلی ایجاد کنند، باید مشکلی را که می خواهند حل کنند و اهدافی را که می خواهند به آنها برسند، درک کنند.
به عنوان مثال، اگر یک آژانس با شما تماس بگیرد و بخواهد وب سایت خود را دوباره طراحی کنید، در حال حاضر در نقطه شروع قرار دارید. این بدان معنی است که شما از مشکلی در طراحی فعلی آگاه هستید که باید در طراحی جدید آن را حل کنید.
این مرحله عمدتا یک مرحله تحقیقاتی است که در آن شما مصاحبه انجام می دهید، نیازهای کاربر را درک می کنید، رقبا را تجزیه و تحلیل می کنید و تمام داده های لازم را جمع آوری می کنید. هدف این مرحله تعریف پروژه با طوفان فکری در مورد هدف محصول و همچنین روشن کردن ارزش پیشنهادی آن، نحوه حل مشکلات کاربران و مزیت های رقابتی است.
سوالاتی برای پیشبرد بهتر:
این ما را به مرحله مهم بعدی سوق می دهد که تضمین کننده یک فرآیند طراحی موفق است.
تعریف و اندازه گیری اهداف قبل از شروع م یتواند از مشکلی به نام "افزایش دامنه پروژه" (Scope Creep) جلوگیری کند. تصور کنید که شما با یک هدف برای طراحی و کدنویسی یک وب سایت شروع می کنید، اما سپس مشتری تصمیم می گیرد یک برنامه، قالب های ایمیل سفارشی، یک صفحه فرود، اعلان های فشاری و غیره اضافه کند. این نه تنها برای طراحان که مجبورند کار بیشتری خارج از محدوده انجام دهند مشکل ایجاد می کند، بلکه انتظارات افزایش یافته، دیگر با چارچوب زمانی و بودجه مطابقت ندارد و در نهایت غیر واقعی می شود.
برای جلوگیری از چنین سناریویی، باید پس از پایان جلسه بررسی پروژه، همه ذینفعان در مورد اینکه نتایج کلیدی پروژه چیست به نتیجه برسند. این امر انتظارات ملموسی را برای محصول نهایی ایجاد می کند و به تعیین یک جدول زمانی واقع بینانه برای تکمیل پروژه کمک می کند.
مراحل تعریف محدوده پروژه شامل موارد زیر است:
با حذف خطر افزایش دامنه پروژه و سوءتفاهم، سرانجام بخش خوب کار فرا می رسد: برنامه ریزی و طراحی گرافیکی وب سایت.
یک رویه رایج این است که نوشتن متن وب سایت را برای آخرین مرحله بگذاریم. در اکثر موارد، برنامه نویس فقط وظیفه طراحی و کدنویسی تعدادی از صفحات خاص با الگوهای بخش و متن های جایگزی Lorem Ipsum (متنی ساختگی و بدون معنی ) را دارد که مشتریان بعدا آن را ویرایش، حذف یا کامل می کنند. با این حال، این رویه رایج به معنای یک رویه خوب نیست.
اگر صفحات را بدون قراردادن یک متن واقعی طراحی کنید، احتمالا بعدا مشکلاتی ایجاد می شود زیرا محتوا ممکن است به خوبی در طراحی و ساختار جای نگیرد و در نهایت نگهداری وب سایت را دشوارتر کند.
بیایید واقع بین باشیم. این موضوع بسیار نادر است که مشتری از قبل محتوا را به خصوص متن نوشتاری را برنامه ریزی کرده باشد. با این حال، هنوز راهی برای ایجاد یک ساختار کارآمد وجود دارد. در اینجا چند روش برای ساختار دادن به یک صفحه بدون داشتن محتوا آورده شده است:
الهام گرفتن: به موفق ترین وب سایت های رقیب نگاه کنید و سعی کنید برخی از تاکتیک های آنها را تقلید کنید.
ساختار: هنگام ساختار صفحات خود، همیشه به این فکر کنید که قرار است عناصر خاص محتوا را کجا و به چه ترتیبی قرار دهید.
همیشه از صفحه اصلی شروع کنید: صفحه اصلی به عنوان مهم ترین صفحه وب سایت، به شما اهرم فشار می دهد تا بازدیدکنندگان را به صفحات دیگر هدایت کنید. با دانستن اینکه صفحات داخلی چه نوع محتوایی دارند، اولویت آنها را نیز خواهید دانست و در نهایت، اینکه آنها را با چه سلسله مراتبی در صفحه اصلی معرفی خواهید کرد.
جایگزین: برخی از قطعات محتوا برای ساختار سایت حیاتی نیستند، بنابراین می توانید به راحتی از محتوای جایگزین برای پر کردن آنها در آینده استفاده کنید. این موارد معمولا شامل اطلاعات تماس، مطالعات موردی، منو، صفحات پرداخت، توضیحات محصول و غیره می شود.
این مرحله حول محور به دست آوردن درک روشنی از اینکه چه نوع محتوایی را در طراحی خود جای خواهید داد، می چرخد.
مرحله برنامه ریزی به تصمیم گیری هایی اشاره دارد که نقشه راه کل فرآیند طراحی شما را مشخص می کند. با استفاده از تمام اطلاعاتی که از شرح اولیه (Brief) با مشتریان خود جمع آوری کرده اید، اکنون می توانید استراتژی طراحی خود را ترسیم کنید.
برنامه ریزی شامل موارد زیر است:
نیازمندی ها: محدود کردن و اولویت بندی ویژگی ها؛ تعریف الزامات پروژه؛ و تجزیه و تحلیل داده ها از شرح اولیه.
نمودار گانت پروژه: این سند که تمام الزامات پروژه، نتایج نهایی، محدوده و همه چیزهایی که هر دو طرف توافق کرده اند را خلاصه می کند، تجزیه و تحلیل کنید. این به عنوان یک نقطه مرجع عمل خواهد کرد.
سلسله مراتب محتوا: برای ایجاد نقشه سایت و معماری اطلاعات، آنچه را که از مرحله قبل جمع آوری کرده اید تجزیه و تحلیل کنید و سلسله مراتب محتوای خود را برنامه ریزی کنید.
کسب اعتبارنامه های دسترسی لازم: اگر پروژه شما نیاز به دسترسی به سرور مشتری، پایگاه داده فایل ها یا هر کتابخانه دیگری دارد، مطمئن شوید که تمام اعتبارنامه های ورود، پیکربندی های پایگاه داده یا چارچوب های لازم را از قبل نصب کرده اید.
نرم افزار: نرم افزار اضافی مورد نیاز خود را تعیین کنید و در صورت نیاز مطمئن شوید که به بودجه پروژه اضافه شده است.
منابع: تمام منابع اضافی مانند تصاویر محصول، فونت ها یا هر منبع دیگری خارج از کتابخانه اولیه پروژه را تعیین کنید.
سازماندهی: فیلتر کردن و پالایش داده های جمع آوری شده به اصل مطلب.
ایجاد پروفایل کاربر.
حالا بیایید به سراغ طراحی وب سایت برویم.
وظیفه بعدی شما ایجاد یک سفر کاربر پسند (ناوبری کاربر) برای مخاطب هدف است. قبل از اینکه به سراغ طراحی بصری بروید تا وب سایت را جذاب، شهودی، قابل استفاده و پاسخگو کنید، کار شما شامل موارد زیر است:
اسکچ زدن: اسکچ زدن یا طراحی سریع (Sketching) در واقع ترسیم سریع و ساده ایده‌ها و مفاهیم با استفاده از خطوط، اشکال و سایه‌روشن‌ها است. این کار به طور معمول در ابتدای فرآیند طراحی انجام می‌شود و به عنوان ابزاری برای ایده‌پردازی، کاوش در راه‌حل‌های مختلف و برقراری ارتباط ایده‌ها با دیگران عمل می‌کند. با چند اسکچ سریع و طرح‌های ساده شروع کنید تا پیشنهادات خود را برای مفهوم نهایی تجسم کنید. این بیشتر یک جلسه طوفان فکری است که در آن تا حد امکان ایده پردازی می کنید، خلاقیت به خرج می دهید و ایده هایی را ثبت می کنید که بعدا می توانید به ذینفعان ارائه دهید.
وایرفریمینگ: این مرحله شامل طراحی نسخه‌های بسیار ساده شده‌ای از رابط کاربری است که بر روی چیدمان و عناصر اولیه تمرکز دارد. وایرفریم ها معمولا مینیمالیستی، سیاه و سفید و دارای جایگزین برای مهم ترین محتوا هستند. این وایرفریم ها برای انتقال ایده های اصلاح شده شما به ذینفعان و جمع آوری بازخورد ارزشمند عمل می کنند.
ایجاد معماری اطلاعات(IA) : با دریافت بازخورد کافی و اصلاح مفهوم طراحی، مرحله بعدی شما شامل ایجاد ساختار محتوای محصول نهایی است.
توسعه جریان های کاربری(User Flows) :فرآیند نقشه برداری نحوه پیمایش کاربر در محصول را تجسم می کند. این شامل توسعه سفرهای مختلف کاربر و تعاملات کاربر است.
تست کردن: تست به شما این امکان را می دهد تا طراحی اولیه خود را بهبود ببخشید و تمام مشکلات و دشواری های کاربر که قبلا پیش بینی نشده بود را از بین ببرید.
در همین حال، شما همچنین می توانید فرآیند طراحی UX، از جمله نحوه شروع یک پروژه UX و اینکه چه مراحل خاصUX را باید برای ارائه یک راه حل طراحی موفق انجام دهید، بررسی کنید. پس از تایید وایرفریم ها، ساختار و جریان های کاربری، به سراغ بخش بصری بروید.
این مرحله به طراحی ظاهر و عناصر بصری که کاربران هنگام تعامل با یک محصول تجربه می کنند، اشاره دارد. این موضوع شامل رنگ ها، شکل ها، تایپوگرافی، گرافیک، آیکون ها، دکمه ها و ریز تعاملات است. با تایید و نهایی شدن ساختار محتوا، جریان های کاربری و معماری اطلاعات، حالا به بخش خلاقانه می رسیم. وظایف شما در طول این مرحله عبارتند از:
تحقیق و تجزیه و تحلیل طراحی: این شامل تحقیق در مورد آخرین روند طراحی وب و یافتن الهام است.
طراحی بصری: برنامه ریزی و طراحی تمام عناصر بصری رابط کاربری. این شامل چیدمان صفحه، تایپوگرافی، فاصله گذاری، رنگ ها، گرافیک، آیکون ها، دکمه ها و غیره می شود.
انیمیشن ها و ریز تعاملات: ایجاد انیمیشن ها، جلوه های هاور و انتقال. همچنین عناصر تعاملی مانند دکمه ها، کلیدهای تبدیلی و منوها کشویی.
برندسازی: اجرای سبک بصری برند در محصول. این بدان معنی است که هنگام کار بر روی رابط کاربری، روی طرح های رنگی، تایپوگرافی و سایر عناصر بصری که با مفهوم کلی برند محصول مطابقت دارند، کار می کنید.
راهنماهای سبک: شما همچنین می توانید راهنماها و کتابخانه هایی ایجاد کنید که شامل تمام عناصر طراحی استفاده شده برای محصول و نحوه نمایش آنها باشد. این موارد برای مستندات نهایی پروژه ضروری هستند.
پروتوتایپ ها: ماکت ها و نمونه های اولیه با وفاداری بالا را برای تست کاربر آماده کنید.
همکاری: با توسعه دهندگان برای پیاده سازی طراحی در یک محصول کاربردی کار کنید. توسعه دهندگان باید مطمئن شوند که می توانند چیزی را که شما پیشنهاد می کنید بسازند.
حالا وقت آن است که تمام فایل های پروژه و دارایی های اضافی خود را آماده کنید. این شامل فایل های طراحی برای نسخه دسکتاپ و همچنین طرح های ریسپانسیو است که به تیم توسعه تحویل خواهید داد. این ما را به مرحله بعدی هدایت می کند.
در طول فاز کدگذاری، توسعه دهنده نمونه های اولیه شما را بازسازی می کند و شما باید به همکاری، اعمال تغییرات UI و بهبود عملکرد ادامه دهید.
این مرحله عمدتا برای توسعه دهندگان کاربرد دارد زیرا آنها باید وب سایت نهایی را برای مخاطبان داخلی روی یک سرور تولید قرار دهند. تست و بهبود شامل موارد زیر است:
تست سرور: توسعه دهندگان وب سایت را روی یک سرور داخلی برای مخاطبان محدود قرار می دهند تا مشکلات پیش بینی نشده ای را که باید قبل از راه اندازی برطرف کنند، پیدا کنند.
تست مرورگر: توسعه دهندگان همچنین وب سایت را در مرورگرها و دستگاه های مختلف بررسی می کنند تا ببینند آیا شکستگی رخ می دهد یا خیر.
تست کردن راه حل های طراحی: شامل تست قابلیت استفاده، تست کیفیت و تنظیم الزامات.
جمع آوری بازخورد کاربر و بررسی طراحی: بهبود طراحی اولیه خود و از بین بردن تمام مشکلات و دشواری های کاربر که قبلا پیش بینی نشده بود.
اعتبارسنجی راه حل: پس از اینکه ذینفعان نسخه نهایی وب سایت طراحی و کدنویسی شده را بررسی و تأیید کردند، شما برای راه اندازی آماده هستید.
هنگامی که وارد این مرحله می شوید، تیم شما و همه ذینفعان باید از قبل توافق کرده باشند که وب سایت برای راه اندازی آماده است، شما یک برنامه اضطراری برای مواقعی که مشکلی پیش می آید دارید و تیم بازاریابی مشتری برای کمپین آماده است.
مهم است به خاطر داشته باشید که راه اندازی یک وب سایت لزوماً به این معنی نیست که کار شما در اینجا تمام شده است. در اکثر موارد، تیم بازاریابی وظیفه به‌روزرسانی محتوای نوشتاری را بر عهده خواهد گرفت، با این حال، شما همچنان باید برای اضافه کردن عناصر جدید، صفحات جدید، تغییر طراحی و در نهایت بهبود وب سایت، آماده شوید.
با راه‌اندازی و موفقیت وب‌سایت، تیم توسعه همچنان باید به رفع برخی باگ‌های کوچک‌تر اضافی یا رفتارهای غیرمنتظره بپردازد. با این حال، در مورد طراحی، توجه داشته باشید که نیازهای کاربران و روندها و شیوه های طراحی وب با گذشت زمان تغییر می کند، بنابراین ممکن است نیاز به برخی تنظیمات نیز داشته باشید. پس از راه اندازی شامل موارد زیر است:
به روز رسانی ها: بروزرسانی محتوا، عملکرد، طراحی و نرم افزار در دراز مدت
رفع اشکال: اعمال رفع اشکال، ایجاد تغییرات در انتهای کار و رفع لینک های شکسته.
کمی درگیر شدن در فرآیند پس از راه اندازی، گام اضافی است که هرگز نادیده گرفته نخواهد شد و همان چیزی است که شما و تیم شما را خاص می کند. البته، به طور کامل مسئولیت نگهداری یک وب سایت را بر عهده گرفتن چیز دیگری است و باید به عنوان یک سرویس اضافی در نظر گرفته شود.
جمع بندی (To Sum Up)
فرآیندهای طراحی وب دوره‌ای هستند زیرا به بازخورد، آزمایش و بهبود وابسته‌اند، بنابراین اگر نیاز به تکرار برخی از مراحل دارید، دلسرد نشوید، این موضوع عادی است. نکته مهم این است که اطمینان حاصل کنید که یک گردش کار طراحی وجود دارد که در آن همه ذینفعان همسو باشند و برای رسیدن به نقاط عطف به طور مشترک حرکت کنند. همچنین برای جلوگیری از اشتباهات رایج زیر:
فراموش کردن همکاری با توسعه دهندگان:ارتباط ضعیف با توسعه دهندگان می تواند بر تکمیل موفق پروژه تأثیر بگذارد. توسعه دهندگان باید مطمئن شوند که می توانند طراحی شما را در یک محصول کاربردی پیاده کنند.
فراموش کردن فراخوان به عمل(Call to Action - CTA) :طمئن شوید که کاملاً واضح بیان می کنید که می خواهید بازدیدکنندگان چه کاری انجام دهند. اگر راه آشکاری برای بستن معامله وجود نداشته باشد، کل طراحی می تواند بی فایده شود.
فراموش کردن در دسترس بودن(Accessibility) : به اندازه فونت، استایل ها و رنگ های خود توجه کنید تا طراحی برای کاربرانی که دچار اختلالات بینایی هستند در دسترس باشد. شما همیشه می توانید یک قدم اضافی بردارید و ویدجت های بسیار بزرگ XL، گزینه تغییر کنتراست، لینک های برجسته، توقف انیمیشن ها، تنظیم ارتفاع خط، تغییر تراز متن، سازگاری متن با خوانش پریشی (dyslexia) و غیره را اضافه کنید.
وب سایت شما برای موبایل عالی نیست:ریسپانسیو بودن یک نیاز آشکار است، با این حال، با توجه به اینکه استفاده از موبایل برای خرید و بازدید از استفاده از دسکتاپ پیشی گرفته است، یک قدم فراتر بردارید. برخلاف طراحی ریسپانسیو، در این رویکرد، شما به طور خاص برای دستگاه های تلفن همراه طراحی می کنید و بعدا آن طراحی را برای نمایشگرهای بزرگتر تطبیق می دهید.
