یه تنفس عمیق و بعد همه چیز رو راجع بهش بخون

راحیل دست پیمان

راحیل دست پیمان

پر امید وانگیزه ادامه بده. موفق میشی. من بهت قول میدم.

Share on facebook
Share on twitter
Share on linkedin
Share on telegram

طراحی سایتت رو به‌راحتی با قالبهای آماده شروع کن

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

Wireframing یک وبسایت فقط در 3 مرحله آسان

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

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

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

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

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

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

Wireframe چیست؟

what-is-wireframe

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

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

چرا باید وبسایتمون رو wireframe کنیم؟

low-fidelity-vs-high-fidelity-wireframes-just-in-mind

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

بعد از اینکه تصمیم گرفتین وبسایتتون رو Wireframe کنین، موارد زیر حتما درنظر بگیرین:

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


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

Wireframe پروسه طراحی وبسایت شما رو کامل میکنه

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

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

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

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

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

Wireframe پروسه طراحی وبسایت شما رو کوتاهتر میکنه

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

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

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

تجدیدنظرها و تکرارها آسونه

در طی فرایند طراحی یک پروژه، کارفرما یا مشتری شما اغلب از شما میخواد که تغییراتی در طرح وارد کنین. 

این تغییرات میتونه کم یا زیاد باشه. به عنوان مثال:  

  • اندازه دکمه
  • اندازه قلم
  • طرح ستون
  • نوع منو (همبرگر ، کشویی و غیره)
  • و غیره

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

Wireframe به شما امکان میده نیازهای مشتری رو برآورده کنین

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

encourage-browse

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

encourage-cart

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

Wireframe سلسه مراتب اطلاعات شما رو در اولویت قرار میده


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

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

البته هیچ اجباری در کار نیست، کاربر میتونه دکمه رفتن به سبد خرید رو هم انتخاب کنه. اما تأکید بر دکمه اصلی “ادامه مرور” کاربر رو تشویق می کنه که برعکس عمل کنه.

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

پروسه های طراحی سایت: وایرفریم، موکاپ و پروتوتایپ

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

Wireframe

وایرفریم سایت

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

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

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

Wireframing فرصت  طراحان در فرآیند طراحی برای تکمیل ساختار اصلی و عملکرد هر مؤلفه موجود در وبسایته.

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

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

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

Mockup

موکاپ

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

یک دیگه از تفاوتهای کلیدی بین وایرفریم و موکاپ اینه که کافیه یه مداد و کاغذ دستتون بگیرین و طرح کلی وبسایتتون رو بکشین. اما برای موکاپ شما از نرم افزارهای تخصصی باید استفاده کنین مثل Invision, Axure, Sketch, Figma  یا موارد دیگر.

Prototype

پروتوتایپ

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

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

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

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

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

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

 

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

wireframe-sample

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

گام اول: یک Wireframe ایجاد کنین

wireframe-components

یکی از روشهای طراحی وایرفریمها استفاده از فریم ورک 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 راهیه که برای طراحی یک وبسایت اصولی باید انجام بشه.

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

شاید مقاله‌های زیر رو هم دوست داشته باشی بخونی

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

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