طراحی شمای کلی وبسایت شما یا Wireframing از بخشهای اولی و اساسی پروسه طراحی سایته. در این مطلب یاد میگیرین که چطوری از ابتدا تا انتها کل وبسایت خودتون رو ببندید و با المنتور پیاده سازی کنین.
تجربه کاربری از ثبات، منطق و وضوح بهره میبره. موقع مشاهده هر وب سایت یا رابط کاربری، بازدید کنندگان انتظار تجربه طراحی بصری رو دارن که اندازه، چیدمان و قابلیت کلیک اونها رو تحت الشعاع قرار نده و به هیچ وجه اونها رو گیج نکنه.
به همین دلیله که Wireframing معنا پیدا میکنه. ما معتقدیم که با یادگیری مفهوم طراحی شمای کلی سایت و چگونگی پیاده سازی آنها در پروسه طراحی سایت، تواناییها و اعتبار شما به عنوان یک متخصص در زمینه طراحی وب بسیار بالاتر میره.
و مطمئن باشید ویرایشگر دراگ اند دراپ المنتور، تبدیل هر نوع وایرفریم و پروتوتایپ به یک سایت وردپرس رو آسون میکنه.
در حقیقت هرگز تکمیل کل مراحل طراحی شمای یک سایت به کمک المنتور هرگز آسونتر به این اندازه آسون نبوده.
Wireframe چیست؟
مثل تصویر بالا Wireframing مجموعه ای از اشکال هستن که شمای کلی یک وبسایت رو نشون میدن. این شکلها رو بدون رنگ میکشیم تا جانمایی موضوعات رو طرحریزی کنیم. موقع طراحی شما کلی وبسایت به این فکر میکنیم که کاربر چه نیازی در سایت ما داره و چطوری باید نیازش برطرف بشه.
در وایر فریم اندازه، چیدمان و مجاورت عناصر بصری یا متون سایت رو تعیین میکنیم. در این مطلب ما مراحلش رو بطورذ کامل براتون توضیح میدیم. در واقع Wireframe یه موجودیت در جهان یوایکس و طراحی وب هست که فقط مهم نیست بلکه بسیار مهمه.
چرا باید وبسایتمون رو wireframe کنیم؟
به عنوان یک طراح وب، از نتایج مهمی که Wireframe به دنبال داره طراحی کلی صفحه، ایده های طرح شما و محتوا رو ایجاد میکنه.
بعد از اینکه تصمیم گرفتین وبسایتتون رو Wireframe کنین، موارد زیر حتما درنظر بگیرین:
- طرح مطالب سایتتون رو تجسم کنید
- صرفه جویی در وقت و تلاش رو در فرآیند طراحی درنظر بگیرین
- مشکلات قابل پیش بینی رو تست و تصحیح کنین
- معماری اطلاعات خود را کامل کنین
- ناوبری را آزمایش و اصلاح کنین
- قابلیت تست و مصاحبه با کاربر رو آزمایش کنین
- نمونه سازی سریع برای هر عنصر صفحه رو انجام بدین
- نحوه استفاده از صفحه شما در UX و بهترین شیوه های طراحی رو ارزیابی کنین
یکی دیگه از مزایای مهم فرآیند وایر فریم اینه که نحوه سازماندهی اطلاعات بر روی سایت یا همون معماری اطلاعات صفحه بسیار شفاف تر و ملموستر میشه.
Wireframe پروسه طراحی وبسایت شما رو کامل میکنه
پروسه طراحی UX / UI یک فرآیند چند مرحله ایه و بعضی اوقات می تونه بسیار پیچیده و پرتحرک باشه. Wireframing یکی از اولین بخش های پروسه طراحی سایت شماست و یک ماده اساسی برای شفافیت تجربه کاربریه.
وقتی برای صفحه ای که ایجاد میکنین یه وایرفریم تولید میکنین به خودتون اجازه میدین گزینه های مختلف اندازه و چیدمان عناصر موجود در صفحه رو تجسم کنین. شما میتونین با جابجایی عناصر به بررسی چیدمان و ترتیبات مختلف بپردازین تا ببینین چه حالتی بهتره.
طراحی سایت به اینصورت نوعی عملگراییه چون شما فرآیند بصری یه جریان کار رو از ابتدا بر اساس رفتار کاربر ابداع میکنین. شما حتی میتونین چندین وایر فریم رو طراحی کنین و در انتها نتیجه بگیرین که کدومیک تجریبه کاربری بهتری داره.
آزمایش نسخه های مختلف وایر فریم یک صفحه، روشی عالی برای اطمینان از اینه که هر بخش از گردش کار طراحی شما تا حد امکان جامع و کاملاً فکری باشد.
وقتی رو طراحی شمای کلی اون صفحه وقت بیشتری گذاشتین معلومه که مرحله بعدی شما یه فرآیند آسونتر و بدون خطاتر میشه.
Wireframe پروسه طراحی وبسایت شما رو کوتاهتر میکنه
اگر چیزی روی Wireframe بنظر درست کار نکنمه براحتی میتونین تصحیح کنین. همچنین ایجاد چند نسخه متفاوت طراحی سایتتون از طریق وایر فریم بسیار ساده تر و کم هزینه تر از چند نسخه در حالت موکاپ یا طراحی اصلیه.
وقتی عملکرد یک قاب سیم را ارزیابی می کنید ، تأیید می کنید که چیدمان و ترتیب عناصر موجود در هر صفحه ، کاربران را قادر می سازد تا کارهای لازم را انجام دهند. وقتی این کار را روی یک دارایی بنیادی مانند قاب سیم انجام می دهید ، هنگام تمرکز روی عناصر اصلی که ممکن است نیاز به تغییر داشته باشند انجام این کار بسیار ساده تر است.
شناسایی یا اصلاحات لازم در یک تفسیر دقیق وفادار ممکن است ساده نباشد. این بدان دلیل است که احتمالاً در هنگام مرور صفحات و تصاویر بسیاری از طراحی ، اشتباهات در آن شکسته نمی شوند. بهتر است از پایه و اساس شروع کنید و براساس آن پیشرفت کنید زیرا هر مرحله از سفر کاربر را تحکیم می دهید.
تجدیدنظرها و تکرارها آسونه
در طی فرایند طراحی یک پروژه، کارفرما یا مشتری شما اغلب از شما میخواد که تغییراتی در طرح وارد کنین.
این تغییرات میتونه کم یا زیاد باشه. به عنوان مثال:
- اندازه دکمه
- اندازه قلم
- طرح ستون
- نوع منو (همبرگر ، کشویی و غیره)
- و غیره
معمولا در پروسه طراحی سایت، طراحان با کارفرما در تماس هستن و تأیید مشتری بخش مهمی در تصمیم گیریهای شماست. اعمال این تغییرات در مرحه وایرفریم بسیار راحت تره تا در سایت واقعی.
Wireframe به شما امکان میده نیازهای مشتری رو برآورده کنین
تأیید کارفرما یا مشتری شما همونطور که گفتیم یکی از مبناهای تصمیم گیری در طراحی سایته. فرض کنیم که مشتری به شما سفارش فروشگاه اینترنتی پوشاک رو داده. یکی از تصمیمهایی که میخواین بگیرین اینه که آیا کاربر بعد از خرید در سبد خرید قرار بگیره یا برگرده به آرشیو محصولات فروشگاه. شما میتونین یه پاپ آپ با المنتور برای کاربر ایجاد کنین.
اینجا دکمه برجسته رفتن به آرشیو محصولات فروشگاه هست اما شاید مشتری شما نظرش برعکس باشه یعنی بخواد کاربر روی یک محصول بدون فوت وقت به سبد خرید بره و مراحل خرید رو نهایی کنه. مثل پنجره زیر:
نشون دادن هر دو مورد علاوه بر اینکه از دوباره کاری و فوت وقت جلوگیری میکنه، شما رو حرفه ای تر نشون میده و مشتری متوجه میشه که شما به همه جوانب سایتش فکر میکنین. از اونجایی که ممکنه صحبت شما راجع به تصمیم گیری در قسمتهای مختلف سایتتون با مشتری جلسات زیادی نیاز داشته باشه بهتره قدری بیشتر به این جزئیات بپردازیم.
Wireframe سلسه مراتب اطلاعات شما رو در اولویت قرار میده
تفاوت این دو مثال از یک وب سایت خرید آنلاین که در بالا مورد اشاره کردیم، دقیقاً نشون میده که سلسله مراتب اطلاعاتی چیه؟
در مثال اول، هدف صاحب سایت ترغیب خریدار به مرور مجموعه و بازگشت به بایگانی محصوله. به همین دلیله که در پنجره اعلان مستقیماً بر بازگشت به فهرست محصولات بیشتر تأکید داره. دکمه ها همین نکته رو بیان می کنن. دکمه اصلی (در سمت راست، به رنگ تیره تر)، به آرشیو محصول میره.
البته هیچ اجباری در کار نیست، کاربر میتونه دکمه رفتن به سبد خرید رو هم انتخاب کنه. اما تأکید بر دکمه اصلی “ادامه مرور” کاربر رو تشویق می کنه که برعکس عمل کنه.
اندازه و موقعیت عناصر طراحی هم از شاخص های سلسله مراتب اطلاعاته. در صفحه اعلان فوق ، مهمترین پیام “مورد شما به صورت رسمی در سبد خرید شما قرار دارد!” هست. به همین دلیل دارای بزرگترین اندازه فونت و سنگین ترین وزن فونت روی پنجره هست و در بالای دکمه ها قرار داره. کاربر بطور خودکار میفهمه این اولین جمله ایه که باید بخونه.
پروسه های طراحی سایت: وایرفریم، موکاپ و پروتوتایپ
اصطلاحات طراحی میتونه گیج کننده باشه، در این مطلب تک تک این واژه ها رو براتون روشن میکنیم. میتونیم بگیم وایرفریم مثل یه طرح معماری سایته. هر کدوم هدف بسیار متفاوتی دارن، اما همه یک هدف مشترک دارن: بهسازی و استحکام بخشیدن به هر مرحله از روند طراحی.
Wireframe
همونطور که اول مقاله گفتیم، وایرفریم یک طرح کلی از سایت یک نمایش تصویری استاتیک و ساده هست.
سرانجام، بعضی از متغیرها ممکنه به عناصر گرافیکی واقعی یا متن واقعی تکامل پیدا کنن تا طراحان و توسعه دهندگان بتونن احساس بهتری نسبت به همه چیز متناسب با همدیگه داشته باشن.
وایر فریم از متغیرهای سیاه و سفید تشکیل شده که روی نمایان کردن قالب، چیدمان دقیق صفحه، فاصلهها، حاشیهها،سلسله مراتب اطلاعات و اندازه عناصر تمرکز دارن. بعد از نهایی شدن مدل، طراحان روع به انتخاب رنگ بندی و کل فرآیند طراحی بصری میکنن.
Wireframing فرصت طراحان در فرآیند طراحی برای تکمیل ساختار اصلی و عملکرد هر مؤلفه موجود در وبسایته.
در طراحی شمای کلی وبسایت یکسری دستورالعمل هم هست که چطوری عناصر مختلف طراحی رو نشون بدیم. مثلا برای ناوبری از دایره استفاده میکنیم، شما شکل هر عنصر رو نمیکشید و از مربع و دایره برای نمایش اونها در مکانهای نوردنظر استفاده میکنین.
علاوه بر اشکال شما باید جانگهدارهایی برای متون آماده کنین. ابهایی برای متن کشیده و از متنهای پیشفرض لورم ایپسوم استفاده میکنین. عناوین، پارگرافها، دکمه ها رو با اندازه مربوط به هر کدوم جایگذاری کنین.
بعد از اینکه اندازه اشکال و متون و چیدمان و فاصله ها رو تأیید کردین حالا به مرحله بعدی برین، مرحله موکاپ یا ایجاد مدل تبلیغاتی.
Mockup
مدلسازی با وایر فریم متفاوته. چون کاملا به طراحی نهایی نزدیک میشه و دیگه سیاه و سفید و دایره و مربع نیست. مدلها نمایشهای کامل ایستا از طراحی سایت هستن. وقتی که شروع به طراحی مدلها میکنین، لوگوها، تایپوگرافی و ساید عناصر UI طراحی کامل میشن. در مقایسه با وایر فریم، مدلها یا موکاپها واقعا شبیه محصول نهایی یا وبسایت شما هستن. موکاپ نقطه عطفی در روند طراحی شماست که از اونجا، رابط کاربری شما شروع به تجلی خودش به صورت ملموستر میکنه.
یک دیگه از تفاوتهای کلیدی بین وایرفریم و موکاپ اینه که کافیه یه مداد و کاغذ دستتون بگیرین و طرح کلی وبسایتتون رو بکشین. اما برای موکاپ شما از نرم افزارهای تخصصی باید استفاده کنین مثل Invision, Axure, Sketch, Figma یا موارد دیگر.
Prototype
پروتوتایپ نمایش نزدیکتری نسبت به دو مرحله قبل سایت شماست. پروتوتایپها الگوهای اولیه طراحی شما هستن.نکته جالب اینه که پروتوتایپها تعاملی هستن یعنی قابل کلیک. تمام جزئیات طراحی و ناوبری سایت در پروتوتایپ مشخصه. شما میتونین در مرحله Prototype طراحی سایت رو آزمایش کنین حتی رفتار کاربر رو بخوبی بسنجید.
طراحان و توسعه دهندگان ارزش یادی در پروتوتایپ میبینن. برای اینکه نقص طراحی و اشکالات سفر کاربر در سایت شما بخوبی مشخص میشه. مثلا:
- اندازه تصویر برای بخشی از سایت خیلی بزرگه
- سربرگها اندازه مناسب ندارن
- بعضی دکمه ها قابل کلیک نیستن یا به صفحه اشتباه پیوند دارن
یک مزیت دیگه که پروتوتایپها دارن اینه، توسعه دهندگان ارزیابی میکنن که آیا تمام جزئیات و. موارد بخوبی پیاده سازی یا کدگذاری میشه؟ همچنین میتونن زمان پیاده سازی رو هم بسنجن.
اما کارآیی فقط نیمی از نبرد ما در طراحی سایته، طراحان باید مطمئن بشن که کاربران هدفشون جذب سایت میشن و براحتی هر گزینه موردنیاز رو پیدا میکنن.
حالا که درک بهتری از این سه مرحله طراحی سایت پیدا کردین میتونیم عمیقتر به وایرفریم بپردازیم.
چطوری یک وبسایت رو وایرفریم کنیم؟
مراحل اساسی طراحی یک وبسایتی که میتونین براحتی با المنتور پیاده سازی کنین رو با هم مرور میکنیم.
گام اول: یک Wireframe ایجاد کنین
یکی از روشهای طراحی وایرفریمها استفاده از فریم ورک Sketch هست. این فریم ورک استاندارد دارای مؤلفه هایی مثل تصویر بالاست. هر عنصر به رنگ سیاه و سفیده و بر ساختار و چیدمان تمرکز داره.
برخی از قوانینی که در وایر فریم باید در نظر بگیرین:
- همونطور که هر قسمت وایرفریم رو طراحی میکنین، فکر کنین و یادداشت کنین که از کدوم ویجتها در المنتور باید برای این قسمت استفاده کنین.
- برای هر حالت یک Artboard یا قاب جداگونه ایجاد کنین مثلا فقط نویسین فرآیند ثبت نام برای هر مرحله مثل ثبت نام کنین، یک نام کاربری ایجاد کنین، رمز را وارد کنین و … یک آرت بورد جدا ایجاد کنین. اینکار باعث میشه هیچ قسمتی از قلم نیفته و باعث سردرگمی نشه.
- برای ابعاد تصمیم دقیق بگیرین بر اساس یه صفحه نمایش واقعی.
- وایرفریم خیلی به جزیلات نمیپردازه یه شمای کلی از سایتتونه.
- وایرفریم شامل رنگ، لوگو یا هر عنصر طراحی واقعی نیست، فکرتون رو در این مرحله معطوف به این چیزها نکنین.
بهترین ابزارها برای Wireframe
ابزارهای خوبی برای وایر فریم در ادامه معرفی میکنیم:
Pen and Paper
بسیاری از طراحان از جمله خود من فقط با قلم و کاغذ راحت هستن البته من که فقط با مداد و کاغذ. هیچ برنامه ای واقعا جای قلم دست گرفتن رو نمیگیره.
Adobe XD
Adobe XD ابزاری UX / UI مبتنی بر برداره که بخشی از Adobe Creative Cloud Suite هست. بر خلاف بسیاری از نرم افزارهای دیگر ادوبی میتونه به صورت رایگان و با محدودیت یک پروژه استفاده بشه. طراحان از Adobe XD برای ایجاد وایرفریم، پروتوتایپ و طراحی صفحه دیجیتالی مانند وب سایت ها و برنامه های دسک تاپ یا موبایل استفاده میکنن.
Sketch
Sketch یکی دیگه از ابزارهای طراحی دیجیتال مبتنی بر بردار (فقط مک) هست که برای طراحی وب سایت ها و کلیه رابط های دیجیتالی مثل وایرفریم، پروتوتایپ، وب سایت ها، برنامه ها و غیره استفاده میشه. Sketch با یک اشتراک مبتنی بر مجوز یک ساله اجرا میشه. این یک گزینه بسیار محبوب برای کاربران Mac هست که به دنبال جایگزینی سبکنر برای Photoshop یا Illustrator هستند.
Figma
کمی در بازار طراحی جدیدتره، Figma ابزاری برای طراحی UI مبتنی بر مرورگره (همچنین دارای گزینه برنامه Desktop). فیگما میتونه فایلهای sketch رو باز کنه و برای طراحان، توسعه دهندگان و همکارانی که به دنبال همکاری مشترک به عنوان یک تیم هستن، یک گزینه عالی هست.
Adobe Photoshop
با فتوشاپ هم که همه آشنا هستن یک ویرایشگر گرافیکیه که برای اینکار هم مناسبه.
گام دوم: تبدیل Wireframe به Mockup
حالا باید وایرفریم رو به موکاپ تبدیل کنیم و اینکار فقط برای اینه که یک فایل کپی از وایرفریممون داشته باشیم و طراحی اصل کاری نیست.
خب گامهای زیر رو اجرا کنین:
1.تصاویر
برای متغیرهای تصاویر، تصویرهای واقعی رو وارد کنین مثل لوگو، تصاویر مربوط به محصولات و …
2. متن و فونت
اگه از متنهای لورم ایپسوم استفاده کردین حالا وقتشه متون واقعی رو جایگزین کنین البته فونت و اندازه رو هم تنظیم کنین.
3.دکمه ها
طراحی و سایز دکمه ها رو کامل کنین.
4. طراحی دیداری
پالت رنگی و بقیه موارد مربوط به طراحی دیداری رو تنظیم کنین.
5. ترازبندی
ترازبندی، حاشیه ها، فاصله ها، عرض و ارتفاع رو مرتب کنین.
6. ویجتهای المنتور
مشخص کنین که کدوم ابزارک المنتور رو برای هر عنصر باید استفاده کنین.
گام سوم: حالا مدل تکمیلی موکاپ رو به مدل تعاملی پروتوتایپ تبدیل کنین
نوبت میرسه به تبدیل طراحی ایستای سایت شما به طراحی پویا و قابل کلیک در مرحله پروتوتایپ. میتونین در این مرحله رفتار کاربر رو رصد کنین و اشکالات احتمالی طرح رو از نظر یوآی / یوایکس برطرف کنین.
شما میتونین پروتوتایپ رو با المنتور به اجرا دربیارین و بعد صفحات تستی ایجاد شده رو به مشتری نشون بدین و بعد از اعمال تغییرات لازم جادوی خودتون رو با المنتور آغاز کنین.
Wireframing راهیه که برای طراحی یک وبسایت اصولی باید انجام بشه.
بخاطر داشته باشین که قبل شروع طراحی سایتتون باید نمایی کلی از سایتتون رو حداقل با قلم و کاغذ بکشید تا براتون کاملا مشخص بشه، کاربرتون چه نیازهایی داره. منتظر ؤالها، نظرات و پیشنهاداتتون هستم. اگه این مقاله براتون مفید بوده به اطلاع من برسونین.