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

البته وایرفریم به دلیل نداشتن سبک، رنگ و گرافیک بیشتر شبیه یک قاب سیمی است که می تواند جزئیات را به حداقل برساند، روند طراحی را سرعت ببخشد و کمک کند تا طراحان UX به محل قرارگیری اطلاعات به توافق برساند.
بنابراین در وایرفریمینگ به عنوان یک تکنیک برای طراحی تجربه کاربری می توانیم ماکتی از ترتیب و چیدمان عناصر را دریافت کنیم و مجموعا یک صفحه با اندازه های مناسب ، عناصر برجسته ای از لحاظ بصری و متنی و درنهایت طرح منحصر به فردی داشته باشیم.
چرا باید از طراحی وایرفریم برای سایت خود استفاده کنیم
طراحی وایرفریم ارزش های کلیدی ایده های طرح بندی ، محتوا و طراحی کلی سایت را منتقل می کند تا بدون پیچیده شدن مسائل حداکثر توانایی خود را پیاده سازی کنید. در این گردش کار می توانید :
- طرح بندی محتوای خود را تجسم کنید.
- در وقت و تلاش خود برای طراحی سایت صرفه جویی کنید.
- همه مسائلی که ممکن است برای کاربرد عناصر وجود داشته باشد را امتحان کنید و آن را اصلاح کنید.
- معماری اطلاعات خود را کامل کنید.
- آزمایش و پیمایش ناوبری ( Navigation ) خود را انجام دهید.
- قابلیت های استفاده را برای کاربران تست کنید و پیش نمایش آن را دریافت کنید.
همچنین در این مرحله می توانید نحوه استفاده از طراحی صفحه UX خود را به کمک بهترین روش ها ارزیابی کنید و با تکرار کردن بخش هایی از طراحی، به جنبه های مهم تری مانند حضور برند و خلاقیت های بیشتر بپردازید. مثلا بازخورد مشتریان ، سلایق و خواسته های مشابه کمک می کند رابط کاربری بهتری را با دقت بالایی به طرح وارد کنید. پس باید این نکته را در نظر داشته باشید که طراحی وب چقدر می تواند بر نحوه درک مخاطب از برند تاثیر بگذارد و بازدیدکنندگان را در صفحه نگه دارد. چنین طراحی وب کمک می کند تا تبلیغات در صفحه منجر به گرفتن سرنخ شود و بر میزان فروش تاثیر بگذارد.
طراحی وایرفریم روند کار را کوتاه می کند
یکی از بهترین مزیت های وایرفریم مشخص کردن مواردی است که به خوبی کار نمی کند، ما متوجه آن نمی شویم. وایرفریم هر گونه اشتباهی یا مشکلی را در نمونه اولیه نشان می دهد و می تواند به طراحی سایت کمک کند تا با یافتن مشکلات خود زمان کمتری را برای رفع اشکال ها بگذارید.
برای آزمایش نسخه اولیه می توانید چندین نسخه ساده را به عنوان نمونه اولیه بررسی کنید تا مطمئن شوید اگر روی عناصر اصلی تمرکز داشتید در صورت نیاز می توانید تغییراتی را در کار خود ایجاد کنید و کیفیت بالای صفحات خود را تضمین کنید.
بنابراین زمانی که یک وایرفریم را ارزیابی می کنید، باید طرح و ترتیب عناصر را در هر صفحه بسنجید و از انجام اقدامات کاربران در سایت مطمئن شوید که اگر عنصری روی وایرفریم به درستی عمل نکرد شانس احتمال رفع مشکل را بالا ببرید.
وایرفریم کمک می کند نیاز های مشتری را برطرف کنید
همان طور که قبلا در موردش صحبت کردیم یکی از مراحل هر پروژه ایجاد صفحات وب با در نظر گرفتن مشتری ها ایست که در آن کسب و کار برخورد دارید. مشتریان بر اساس خواسته های خود رفتارهایی را در صفحه نشان می دهند مثلا کلیک بر روی مقاله علمی در موقعیت خاصی از صفحه یا خرید دسته خاصی از محصولات در بخش فروش ویژه. پس برای تصمیم گیری درست هر یک از اجزای صفحه می تواند بر موفقیت، فروش و نتیجه طراحی تاثیر گذار باشد.
وایرفریم سلسله مراتب اطلاعات شما را در اولویت قرار می دهد
یک سایت بر اساس هدفی که دارد سلسله مراتب اطلاعاتی را بر اساس پرسونای مشتری تدوین می کند تا بتوانید به سرعت تغییراتی را در محل قرار گیری محتوای متنی، عکس و دکمه ها بدون نیاز به صرف وقت زیاد ایجاد کنید.
مقایسه وایرفریم با Mockup و Prototype
ابزارهای مختلفی برای طراحی صفحات سایت وجود دارد که احتمالا نمی دانید هر کدام دقیقا در پایان چه طراحی به شما تحویل می دهند. در ابتدا نیاز به فریم ورک های اولیه برای تهیه ماکتی از ساختار و نمونه اولیه تهیه کنیم. ابزار های اولیه هر یک هدف بسیار متفاوتی را دنبال می کند و هر چند که همه آنها یک هدف مشترک دارند اما تصویه و تحکیم هر مرحله از فرآیند طراحی هستند.
وایرفریم ، Mockups و Prototypes نیز در مراحل مختلف طراحی صفحات سایت بکار می روند. Mockups نمونه اولیه ای از محصول نهایی را نشان می دهد در حالی که وایرفریم فقط ساختار و ترسیم اولیه ای را طرح را ترسیم می کند.
وایرفریم
وایرفریم یک نمایش بصری ایستا با کیفیت پایین و قابل اعتمادی را با اشکال ساده فراهم می کند که در نهایت بتوانید با اضافه کردن عناصر گرافیکی یا متن واقعی طراحی خود را تکمیل کنید. ساختار ساده وایرفریم برای طراحی برنامه نویسان دید بهتری از ترکیب موارد مختلف را دارد و با مکان یاب های سیاه و سفید تشکیل شده نمایش دقیقی از فرم و طرح صفحه وب از جمله فاصله ، حاشیه، سلسله مراتب اطلاعات و اندازه عناصر می دهد. در مرحله بعدی یعنی زمانی که وایرفریم تایید و نهایی شد، طراحان شروع به انتخاب طرح رنگی و کل مراحل بصری می کنند که می تواند مسیر رابط کاربری را در خود وارد کند.
وایرفریم فرصت طراحی را برای تکمیل ساختار اصلی و عملکرد هر یک از اجزای موجود سایت می دهد تا بتوانید در کنار طبقه بندی محتوا نمایش عناصر موجود را بهتر کنید و بهترین جایگذاری را برای لوگو برند انتخاب کنید. هر چند در وایرفریم نمی توانید جزئیات را در طرح های خود نشان دهید اما با ترسیم دایره و مربع یا هر شکل هندسی دیگر چیدمان متفاوتی داشته باشید و مثلا برای محصول نهایی یا نمونه اولیه محصول عنوان ، دکمه و غیره قرار دهید.
پس از تایید اندازه ، چیدمان و فاصله بین عناصر فریم وایر را کامل کنید و آماده وارد شدن به مرحله بعدی طراحی وب سایت خود باشید.
Mockups
ابزار موکاپ ( Mockups ) یک شبیه ساز سه بعدی برای طراحی الگوهای از پیش تعیین شده یک برنامه یا سایت است. این ابزار با حجم بسیار کمی به راحتی روی هر سیستمی قابل نصب است و می تواند خروجی با فرمت های متنوعی مانند PNG یا PDF ارائه دهد تا بتوانید بر اساس آن نمونه اصلی خود را طراحی و تولید کنید.
موکاپ برخلاف وایرفریم نمونه های اولیه تعاملی را به عنوان نمایش متوسط یا کیفیت بهتری شبیه سازی می کند که می تواند شامل تایپوگرافی، برند، شمایل نگاری و رنگ و سبک کلی باشد و در نهایت ماکتی شبیه محصول نهایی یا وب سایت را با نمای بصری سه بعدی ارائه کند. البته ویژگی خوب وایرفریم در مقابل موکاپ این است که ابزارهای گرافیکی را برای ترسیم شکل های مختلف ، جعبه های سیاه و سفید فراهم می کند و برای شروع کار گزینه ی مناسب و راحتی خواهد بود.
Prototype
نمونه های اولیه که در نرم افزار پروتوتایپ ( Prototype ) ایجاد می کنید به عنوان یک الگو پیش فرض برای ساخت یک شی جدید استفاده می شود، به همین خاطر هنگام طراحی با پروتوتایپ نیازی نیست هر بار برای شی کلاس جدیدی ایجاد کنید و سپس پارامترهای آن را تعیین کنید. این ویژگی کمک می کند، بسیاری از اشیایی که در برنامه نویسی تعریف کردید به طور کامل ویژگی های خصوصی آن را با کپی انتقال دهید.
بنابراین با تعریف Interface می تواند یک تابع تحت عنوان Clone ایجاد کنید و با استفاده از متد Constructor مقادیری که برای شی اصلی تعریف کردید را دریافت و به نمونه جدید ساخته شده انتقال دهید. بنابراین پروتوتایپ با ایجاد نمونه های اولیه سایت می تواند :
- درک اندازه تصویر برای بخشی از صفحه نمایش بزرگ تر دهد.
- دکمه های موجود در صفحه را بررسی کند که اگر لینک اشتباه است یا قابل کلیک نیست در تغییرات لازم انجام شود.
- اطمینان دهد که نمونه اولیه کیفیت بالایی را کسب می کند.
- ارزیابی لازم را برای امکان کدگذاری هر عنصری را داشته باشد و حتی کوچک ترین جزئیات طراحی را بررسی کند.
- امکان تعیین زمان لازم برای انجام پروژه و منابع پیش بینی شده را داشته باشد.
با مقایسه این سه ابزار در فرآیند طراحی، فایرفریم به عنوان اساسی ترین و بنیادی ترین ابزار برای ایجاد نمونه اولیه بسیار ارزشمند است و ابزار های چون موکاپ و پروتوتایپ در کنار این ابزار در مراحل بعدی می توانند راهکار فوق العاده ای برای طراحی سایت با جزئیات بالا باشند.
چگونه وایرفریم برای یک وب سایت ایجاد کنیم
یک سایت نیاز به لیستی از ابزار و امکانات انتخاب شده هر صفحه در اولین مرحله طراحی وایرفریم دارد تا نیاز به ویرایش را کمتر کند. سپس بدون توجه به محتواب طرح ، محل قرارگیری تصاویر یا متون را مشخص می کنیم و در مرحله نهایی با ایجاد پل ارتباطی بین وایرفریم و ودرپرس سایت سعی می کنیم فاصله یا شکافی بین فایل های PSD یا Sketch با سازنده صفحه ای مانند المنتور ایجاد کنیم.

مرحله اول : وایرفریم سایت را ایجاد کنید
برای ایجاد وایرفریم از طریق ابزار Sketch و یا سایت https://wireframe.cc نمونه دلخواه را بسازید و سعی کنید وایرفریم خود را مطابق شکل بالا در استاندارد مشخصی طراحی کنید و قوانین زیر را در نظر داشته باشید.
- زمانی که وایرفریم خود را ایجاد می کنید به ابزارک هایی فکر کنید که قرار است در المنتور برای ایجاد آن قسمت استفاده کنید.
- برای هر صفحه خود طراحی جداگانه ای داشته باشید. مثلا برای صفحه ثبت نام با در نظر گرفتن مراحل، به چگونگی ترسیم مواردی چون ایجاد اکانت کاربری، ایجاد رمز عبور و غیره فکر کنید تا از سردرگمی یا فراموش کردن عنصر ها جلوگیری شود.
- ابعاد هر قسمتی که طراحی می کنید با مقیاس بندی کل صفحه و اجزایی دیگر برای طراحی وب و UX متناسب باشد.
- وایرفریم ها نباید جزئیات زیادی داشته باشند.
- رنگ ، فونت ، گزینه های نوشتاری مثل ایتالیک یا بولد ، آرم یا عناصر طراحی به ساختار سایت اضافه نشوند.
برای طراحی وایرفریم ابزار های متنوعی وجود دارد که پیشنهاد می کنیم از روش های زیر برای طراحی بهتر استفاده کنید.
قلم و کاغذ
بسیاری از طراحان در مرحله اول تنها با یک کاغذ و مداد طراحی وایرفریم خود را آغاز می کنند، سپس شروع به ترسیم اسکچ و ایجاد وایرفریم دیجیتالی خود می کنند. شروه کار با طرح های دستی راهی برای کشیدن یک طرح پایه با اضافه کردن همه خلاقیت های ممکن است.
Adobe XD
Adobe XD ابزار منتی بر بردار در زمینه طراحی UX/UI سایت است که می تواند برخلاف نرم افزار های دیگر Adobe یک پروژه رایگان ایجاد کند و با امکانات متنوع طراحی را آسان و قابلیت لازم را برای ارتباط بین صفحات داشته باشد.
این نرم افزار برای طراحی تخصصی رابط کاربری به وجود آمده تا طراحان بتوانند رابط کاربری به روز ، ساده ، کارآمدی و حرفه ای داشته باشند و نیازی به استفاده از نرم افزارهای گرافیکی سنگین مثل فتوشاپ پیدا نکنند. در نهایت با استفاده از ادوبی XD وایرفریم، پروتوتایپ و طراحی های دیجیتالی را مانند وب سایت ، اپ دسک تاب یا موبایل را ایجاد کند.
اسکچ
اسکچ ( Sketch ) یکی دیگر از ابزارهاب طراحی دیجیتالی مبتنی بر بردار ( طرح وکتور، در ابعاد مختلف کیفیت خودش را از دست نمی دهد ) است که برای طراحی وب ها و همه رابط های دیجیتال مانند وایرفریم فقط در سیستم عامل مک استفاده می شود. اسکچ با یک اشتراک یک ساله
فیگما
فیگما ( Figma ) یک ابزار طراحی UI مبتنی بر مرورگر است که می تواند در سیستم عامل های مختلفی چون Linox ، Windows و Mac قابل استفاده باشد و بر اساس فضای ابری کلود عملکرد و ویژگی های مشابه اسکچ داشته باشد. تفاوت فیگما با کلود ، همکاری بهتر و فرآیند طراحی ساده تر برای دسته گسترده ای از کاربران است که می توانند فایل های فیگما را باز ، ویرایش کنند و به اشتراک بگذارند.
فتوشاپ
فتوشاپ ( Photoshop ) به عنوان یک ویرایشگر شناخته شده گرافیکی تخصص خود را بیشتر در عکس نشان داده اما می تواند برای طراحی صفحات وب سایت نیز به کار برود. با وجود اینکه گرافیک وب سایت اهمیت بالایی دارد، فتوشاپ می تواند به نحو احسنت قدرت کدنویسی شما را به نمایش بگذارد. فقط باید تنظیماتی در فتوشاپ انجام دهید تا رزولوشن محیط وب حفظ شود و حجم فایل خروجی زیاد بزرگ نشود و در نهایت بتوانید با ترفند هایی مثل تکرار بخش هایی از سایت طراحی خود را انجام دهید.
مرحله دوم : وایرفریم خود را به موکاپ تبدیل کنید
زمانی که وایرفریم به مرحله پایانی می رسد باید بتوانید نمونه اولیه را به محصول نهایی خود تبدیل کنید بنابراین نیاز است تا به کمک نرم افزار موکاپ مراحل زیر را انجام دهید:
جایگذاری تصاویر
همه تصاویر اعم از لوگو ، نماد و تصویر دیگری که قصد استفاده از آن را دارید را در جاهایی که قبلا در وایرفریم مشخص کردید قرار بدهید.
فونت و قلم
با وجود اینکه قبلا جای متن ها مشخص است ولی احتمال دارد متن آماده شده متناسب نباشد، پس باید تغییراتی که در فونت و قلم خود می دهید استاندارد لازم را برای خوانایی و زیبایی صفحات داشته باشد.
دکمه ها
معمولا بعد از اینکه تصاویر و متن در صفحه مشخص شدن ، دکمه های CTA ، لینک و غیره را جا می دهیم.
طراحی بصری
هر صفحه از سایت نیاز به فرم هایی دارد که بتواند آن را از دو بعدی فراتر ببرد و به کمک انیمه و اشکال دیگر جذابیت برای کاربران داشته باشد.
ترازبندی صفحه
هر صفحه از وب نیاز به سنجش بسیاری در فواصل بین اجزا وعناصر، حداقل ارتفاع، حداقل عرض و تمام جزئیات مربوط به تقارن دارد تا در نهایت بتواند از لحاظ ظاهری دلنشین و از لحاظ کاربری ساده باشد.
عناصر المنتور
ستون ، هیدینگ و موارد بسیار دیگر عناصر یا ویجت هایی هستند که می توانید به عنوان موارد پایه در المنتور تعریف کنید و با اضافه کردن باکس تصویر، آیکن، شورتکات، سایدبار و غیره همه امکانات لازم را برای سایت خود طراحی کنید.
مرحله 3 : موکاپ را با قابلیت اطمینان بالا به نمونه اولیه تعاملی تبدیل کنید.
نمونه اولیه تعاملی همانطور که از اسمش پیداست می تواند بر اساس مدل ساختگی با اضافه کردن اهداف کلیک به طرح، پاسخ هر تعامل را در صفحات تعیین کند. هدف ایجاد این نمونه بالا بردن اطمینان از اقداماتی است که کاربران در سایت انجام می دهند و با عملکرد کلی سایت آزمایشات را انجام می دهند.
تست کاربر مرحله ای از فرآیند طراحی است که می تواند نمونه اولیه را آزمایش کند یا با پیدا کردن کاربران
نمونه تعاملی که در نهایت برای خود انتخاب کردید، همچنین مواردی که تردید داشتید را بازنگری کردید با تاییدیه مشتری خود را دریافت کردید.
جمع بندی
بعد از اینکه درک کاملی از طراحی وایرفریم و ماکت خود پیدا کردید تا حد زیادی می توانید انتظارات خود را در المنتور برآورده کنید. ویجت های که در المنتور انتخاب می کنید، با روش هایی را که برای طراحی کمک می کند تا خلاقیت بیشتری به وب سایت خود بدهید و بتوانید با تمرکز بیشتر به اولویت بندی محتوا، ویژگی های موجود و رفتار های مورد نظر را در وب سایت فراهم کنید