طراحی وایرفریم وب + پروژه کامل

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

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

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

طراحی low fidelity و high fidelity

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

طراحی اسکچ – Sketch

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

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

طراحی اسکچ در ui با استفاده از قلم و کاغذ

طراحی وایرفریم – Wireframe

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

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

طراحی وایرفریم در فیگما

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

وایرفریم در چه مرحله ای از فرآیند UX طراحی می‌شود؟

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

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

طراحی وایرفریم برای صرفه جویی در زمان

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

صرفه جویی در زمان با طراحی وایرفریم و اسکچ

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

5/5 - (12 امتیاز)

29 پاسخ

  1. سلام استاد خوبین؟ خیلی خوشحالم که ما دانشجو های شما هستیم و می‌تونیم از دریای علم و مهارتتون بهره ببریم
    من یک مشکلی دارم توی طراحی وایرفریم موبایل قسمت مشاوره دقیقا مثل شما طراحی میکنم و با همون اندازه ها اما وقتی میارمش توی فریم موبایل فاصله اش با بالایی 0.85 اعشار میگیره هر کاری هم برای درست شدنش کردم اما نمیدونم چرا درست نمیشه مثلا فاصلش به جای 80 پیکسل میشه 79.85پیکسل و اگرم ی جوری اینو رند کنم سمت راست منو عدد قسمت y توی فیگما 0.15 اعشار میگیره. بنظرتون مشکل از کجاست؟

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

      موفق باشید.

  2. سلام استاد امیدوارم عالی باشین
    یادمه توی یکی از ویدیوها یاد دادین که چجور یک آیکن یا لایه رو بدون اینکه بر روی آتولایت یک فریم تاثیر بزاره به اون اضافه کنیم و یادمه گفتین مث هلیکوپتر هرجا بزاری همونجا وایمیسه. می‌خواستم ببینم چیو باید فعال میکردیم که این حالتی بشه؟ توی ایام امتحانات دانشگاه هست حافظم یاری نکرد و یادم نیست تو کدوم ویدیو بود. ممنون:)

    1. درود بر شما. وقت بخیر
      این مورد زمانی رخ می‌دهد که ما یک فریم را Auto Layout کرده‌ایم اما قصد داریم یک یا برخی از عناصر داخل آن را به صورت دلخواه هر قسمتی که خواستیم قرار بدهیم. اصطلاحاً در CSS Positioning به آن Absolute می‌گوئیم. در فیگما هم قبلا اسمش Absolute Position بود که اخیرا اسم آن در نرم‌افزار شده Ignore Auto Layout که یک آیکن هست که در سایدبار سمت راست قرار دارد.

      موفق باشید.

    2. مرسی استاد، فقط با این وجود آتو لیوت لایه زیری از بین میره مشکلی پیش نمیاد؟

    3. درود بر شما. وقت بخیر
      خیر مشکلی رخ نمی‌دهد. چون عنصری که ignore Auto Layout شده کاری به عناصر Auto Layout شده داخلی ندارد و به صورت شناور کنار آنها قرار دارد.

      موفق باشید.

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

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

      موفق باشید.

  4. درود استاد بنده این جلسه رو هم تموم کردم و خیلی لذت بخش بود با اموزش شما. ممنون از‌ زحماتتون.
    فقط یک سری سوالات مبهم ذهن منو درگیر کرده و همش به اینا فکر میکنم چون تابحال در این زمینه اصلا کار نکردم.
    شما برای قسمت راهکار ها چهارتا کادر ایجاد کردید. از کجا فهمدید که باید چهارتا کادر بدید در اون قسمت چرا سه تا درست نکردید؟ کارفرما میگه که مثلا چندتا خدمات ارائه میده و ما بر اساس اون درست میکنیم؟
    یا مثلا یک سری متن نوشتید در مورد داستان تشکیل پویا
    یا متنهای زیر هدر و یا شعاری که زیر اژانس خلاقیت پویا نوشتید این متنارم باید ما پیدا کنیم و بنویسیم یا اینکه کارفرما میگه چی بنویسیم؟
    بعدش در قسمت بلاگ پویا سه تا کادر ایجاد کردید و عنوان مقالات سایت رو اونجا نوشتید. ما از کجا بدونیم باید سه تا کادر واسه مقالات اماده کنیم یا اینکه عناوین مقالاتی که قراره در سایت قرار داده بشه چی هست؟ یا کارفرما میگه مثلا واسه سه تا مقاله با فلان عناوین سه تا محل مناسب درست کنید؟
    سوال اخرم اینکه در قسمتی که زدید preview رو نشون بده باید رو کدوم حالت بزاریم حالت نمایش رو؟ در حالت actual size(100%) مارجین هارو به خوبی نشون نمیده و از سمت راست میچسبه به مانیتور. ولی در حالت fit width درست نشون میده.
    خیلی شرمنده زیاد شد.

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

      موفق باشید.

  5. سلام و خسته نباشید استادگرامی.

    یه سوال داشتم وقتی ما در این ویدیو و تمرین دکمه‌های مختلف رو با سایز یکسان (در اینجا small) استفاده کردیم ولی متنش رو یا آیکون رو عوض کردیم عرض دکمه زیاد و کم شد؟ مگه نباید همون سایز small بمونه؟

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

      موفق باشید.

  6. سلام استاد خسته نباشید.
    در ویدیو دوم وقتی دکمه تیم ما رو ساختیم (متنش رو از آموزش ها به تیم ما تغییر دادیم) چرا عرض دکمه کوچیک تر شد؟ مگر نباید ثابت بمونه؟

    1. درود بر شما. وقت بخیر خانم اعدلیان
      در جلسه ساختن کامپوننت و uikit مربوط به دکمه‌ها، اگر خاطرتان باشد ارتفاع‌ها را به صورت نسبت 8 وارد کردیم. یعنی مقادیری همچون 32 و 40 و 48 و 56 و… دلیل آن هم این هست که فونت‌ها، گاهی line-height ها باهم متفاوت هستند. ترجیحاً باید ارتفاع دکمه‌ها مقادیری زوج و مشخص باشند. اما در عرض دکمه چنین چیزی وجود ندارد. چون مشخص نیست که متن دکمه چقدر طولانی هست. مثلا یک کلمه هست یا دو کلمه. (یک استثنا هم وجود دارد. گاهی 2 دکمه وقتی کنار هم قرار می‌گیرند، حتی عرض آنها را هم به صورت یکنواخت یا هم‌اندازه می‌گذارند اما به حالت پیشفرض، موقع طراحی uikit مربوط به دکمه‌ها، صرفاً ارتفاع را دستی وارد می‌کنیم و عرض را می‌گذاریم همان به صورت Hug بماند).

      موفق باشید.

  7. با سلام و وقت به خیر
    در ویدئو سوم این بخش دقیقه 4:07 وقتی دارم قسمت بلاگ پویا، اون کامپوننت ها رو درست میکنم مثل شما پیش رفتم اما وقتی اتولایوت میزنم همه چی متاسفانه بهم میریزه دلیلش چیه؟

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

      موفق باشید.

  8. سلام حضور محترم استاد گرامی
    میشه لطفا بفرمایید فونت استفاده شده در هدینگ ها چه فونتی هست؟
    منظورم همین فونتی هست که شما در ساخت وایر فریم استفاده کردید

  9. سلام
    توی ویدیو اول وقتی هدلاین و پاراگراف و دکمه ها رو درست میکنم هیچ مشکلی نیست اما وقتی همه رو با هم auto layout میکنم دوتا دکمه کنار هم با پاراگراف بالا قاطی میشه

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

      موفق باشید.

  10. سلام
    استاد من موقعی که شماره تلفن رو در قسمت مشاوره رایگان دارم مینویسم، از سمت چپ اول 2729 میشینه و بعدش021. با راست چین ،چپ چین شدن هم درست نشد!

    1. درود بر شما. وقت بخیر
      اشکالی نداره. برای من هم همینطوری هست. ابتدا 2729 را بنویسید و بعد خط فاصله بگذارید و سپس 021 را بگذارید. اینطوری مشکل حل می‌شود.

      موفق باشید.

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

    1. درود بر شما. وقت بخیر
      سپاس از شما.

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

      حتی می‌توانید دوره وردپرس رو ببینید و برای این موضوع سایت هم راه‌اندازی کنید. اما خب این کار کمی سخت‌تر هست و می‌توانید در قدم اول ابتدا روی dribbble و linkedin و instagram پروژه‌های خودتون رو موکاپ کنید و منتشر کنید.
      موفق باشید.

  12. سلام خسته نباشید و ممنونم از اینکه این دوره رو رایگان در اختیار ما قرار دادید
    یه سوال داشتم من میتونم wireframe رو اینجوری نسازم و شکل skeleton اگه درست نوشته باشم از اون طریق بسازم و اسم بخش هارو موقع high-fi از طریق اسمی که براشون توی low-fi انتخاب کردم بفهمم و تو high-fi ازش استفاده کنم ؟ یا نه این روش وایرفریم که شما رفتید بهتره ؟
    و اینکه تو شرکت بهم میگن از کدوم روش برم یا نه خودم انتخاب میکنم که وایرفریم از این طریق بسازم یا یه طریق دیگه؟
    در نهایت بازم ممنونم

    1. درود بر شما دوست گرامی، وقت بخیر.
      سپاس از لطف شما.

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

      موفق باشید.

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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