یکی از روشهای اصولی طراحی وبسایت، استفاده از وایرفریمینگ است. با استفاده از وایرفریمینگ میتوانید محل قرارگیری اجزای یک سایت را مشخص کنید. طراحان حرفهای مانند مهندسان ساختمانی، ابتدا طرح خود را روی کاغذ میکشند؛ این کار موجب میشود تا محل دقیق همه عناصر در سایت مشخص شود. شروع طراحی سایت با کدنویسی کار اشتباهی است. وایرفریم میتواند محل قرارگیری منوها، تعداد سطر و ستونها و بقیه موارد را مشخص کند.
طراحی وایرفریم چیست؟
یکی از ابزارهای مهم در طراحی وبسایت وایرفریم است، به نرم افزارهایی که میتوانند این کار را برای ما انجام دهند، نرم افزار UI میگویند. با استفاده از نرمافزار طراحی UI طراحان سایت میتوانند ایدههای خود را بهتر طراحی کنند. برای اینکه بتوان سایت را با رابط کاربری (UI) مناسب طراحی کرد، به ابزارهایی احتیاج داریم که بتوانند اینکار را برایمان راحتتر کنند. در این مطلب چند مقاله طراحی UI را به شما معرفی میکنیم و یکی از آنها را به صورت کامل به شما آموزش خواهیم داد.
مزایای استفاده از وایرفریمینگ در طراحی سایت
- استفاده از وایرفریمینگ روند کار را کوتاهتر میکند.
- در وقت و تلاش ما صرفهجویی میشود.
- موجب میشود تا قابلیتهای سایت خود را چک کرده و پیش نمایش را مشاهده کنیم.
- موجب ارزیابی طراحی UX میشود.
- موجب برطرف شدن نیازهای مشتریان میشود. این مورد از اهمیت بالایی برخوردار است؛ چون در هر کسب و کاری مشتریان حرف اول را میزنند. خواستههای مشتریان باعث میشود آنها رفتارهای خاصی را از خود نشان دهند. در موقعیتهای خاصی در صفحه سایت موجب خرید محصول یا کلیک روی لینکها میشود؛ بنابراین طراحی سایت و پیش نمایش اجزای آن از اهمیت بسیار بالایی برخوردار است که منجر به فروش بیشتر خواهد شد.
چگونگی ایجاد وایرفریم برای یک سایت
- اول از هر چیزی شما نیاز دارید تا یک لیست از همه ابزارها و امکانات سایت داشته باشید. این موضوع باعث میشود کار شما راحتتر شده و نیاز به ویرایش هم کمتر شود.
- بعد از آن محل قرارگیری متن و تصاویر را مشخص کنید. البته نیازی نیست که اینکار با توجه به محتوای سایت انجام شود، بلکه یک طرح کلی و جامع نیاز داریم.
- لازم است برای هر صفحه یک طراحی جداگانه داشته باشید. برای مثال صفحه لاگین و ورود کاربران و مدیران را در نظر بگیرید. شما باید به همه صفحات حتی صفحه فراموش کردن رمز عبور و … فکر کنید و طرح کلی آنها را در نظر بگیرید.
- باید هر صفحه و هر شی و متنی را که طراحی میکنید، از نظر اندازه با سایر اجزا تناسب داشته باشد؛ به عبارتی به طراحی UX مرتبط باشد.
- در مرحله ایجاد وایرفریم نیازی نیست که جزئیات زیادی را در نظر بگیرید.
- روشهای زیادی برای ایجاد وایرفریم وجود دارد که بعضی از آنها را به شما معرفی میکنیم.
ورق و مداد
بعضی از طراحان طرح اولیه خود را با استفاده از قلم و کاغذ انجام میدهند، این ابتداییترین کاری است که در وایرفریمینگ میتوان انجام داد. بعد از آن به صورت دیجیتالی طرح خود را انجام میدهند، به این صورت بهتر میتوانند کار خود را با ابزارهای طراحی وایرفریمینگ انجام دهند.
Adobe Xd
این ابزار بر پایه بردار است و امکاناتی را به صورت رایگان در اختیار شما قرار میدهد. این ابزار امکانات ویژهای دارد و به راحتی میتوان بین صفحات مختلف ارتباط برقرار کرد. با استفاده از Adobe XD دیگر نیازی به نرم افزارهای سنگین گرافیکی ندارید. با استفاده از آن میتوانید طراحیهای دیجیتالی برای وبسایت و اپلیکیشنهای موبایل انجام دهید، در کل ابزار مناسبی برای ایجاد وایرفریم است.
ویژگیها و مزایای ابزار Adobe XD
- بالا بودن سرعت نرم افزار
- استفاده راحت و مناسب همه کاربران
- امکان تعاملات راحت بین برنامه نویسان و طراحان
- سازگار بودن با انواع نرم افزارهای شرکت Adobe
- پشتیبانی از انواع سیستمهای عامل
- یادگیری راحت و عدم پیچیدگی
- مناسب طراحی UI و طراحی وایرفریم و ساختن پروتوتایپ
- امکان نمایش طرح به کارفرما به صورت آنلاین
- دارا بودن نسخه موبایلی
- قابلیت ذخیره فایل خروجی برای استفاده در نرم افزارهای فتوشاپ و افترافکت
- سازگار با ابزار برنامه نویسی Zeplin
معایب نرم افزار Adobe XD
- فقط امکان نصب نرم افزار روی ویندوز 10 و نسخه 64 بیتی را دارد.
- پلاگینهای کمتری را نسبت به ابزارهای دیگر طراحیUI پشتیبانی میکند.
- برخورداری از قابلیت کم پروتوتایپ و انیمیشن
اسکچ (Sketch)
این ابزار هم مبتنی بر بردار است. با استفاده از آن میتوانید برای وبسایت خود وایرفریم ایجاد کنید. طرح خروجی این ابزار به هیچ عنوان کیفیت خودش را از دست نخواهد داد.
مزایای اسکچ
- قابلیت استفاده آنلاین و آفلاین
- کاربری آسان و طراحی زیبا و کاربر پسند
- برخورداری از ابزارهای خاص برای طراحان سایت
معایب اسکچ
- فقط روی سیستم عامل مک قابل پیاده سازی است.
- اگر از پلاگینهای آن استفاده نکنید، قابلیتهای زیادی ندارد.
فتوشاپ
نرم افزار گرافیکی فتوشاپ در بین مردم شناختهشدهتر است. عملکرد اصلی آن برای ویرایش و تغییر در عکس است. اما در زمینه طراحی وبسایت هم توانسته به صورت کاربردی عمل کند. همچنین در فتوشاپ شما میتوانید اندازه و حجم تصاویر را خودتان با توجه به نیاز وبسایت تعیین کنید. علاوه بر آن امکاناتی برای کم کردن رزولوشن تصاویر، برای بهبود سرعت سایت هم وجود دارد؛ بنابراین میتواند ابزار موثری برای وایرفریمینگ در طراحی سایت باشد.
فیگما (Figma)
نرم افزار فیگما را میتوانید به صورت آنلاین و هم آفلاین استفاده کنید. در انواع سیستمهای عامل مانند ویندوز، مک، لینوکس قابل استفاده است. استفاده از فضای ابری کلود موجب شده تا کار به صورت گروهی و تیمی قابل انجام باشد. کاربران میتوانند با یکدیگر فایلها را به اشتراک بگذارند، آنها را ویرایش کرده و تغییر دهند.
ویژگیها و امکانات نرم افزار فیگما
- نرم افزار فیگما تحت وب اجرا میشود؛ بنابراین امکان انجام پروژهها از راه دور وجود دارد.
- انجام پروژه در فیگما به صورت تیمی هم امکان پذیر است.
- در فیگما میتوانید چندین شی را با هم ترکیب کنید. به این ویژگی اصطلاحا کامپوننت میگویند.
- ایجاد نمونه اولیه یا پروتوتایپ به راحتی امکان پذیر است.
- امکان ارسال کامنت توسط اعضا در حین انجام پروژه وجود دارد.
- بدون نیاز به کد نویسی می توان از نرم افزار فیگما استفاده کرد.
- امکان تغییر اندازه هنگام ساخت کامپوننت
- امکان مشاهده تاریخچه کارها روی یک پروژه مانند فتوشاپ وجود دارد.
- امکان استفاده از فونت و استایل کاربران دیگر به صورت پلاگین وجود دارد.
آموزش نرم افزار فیگما
قبلا در سایت افضلی وردپرس نرم افزار فیگما به صورت کامل آموزش داده شده است. شما میتوانید از اینجا این آموزش را مشاهده کنید اما در ادامه ما مواردی را به شما آموزش خواهیم داد تا بتوانید به راحتی نمونه اولیه سایت خود را طراحی کنید، پس با ما همراه باشید.
ما قبلا در سایت فیگما به آدرس www.figma.com اکانت ایجاد کردهایم. ساخت اکانت در فیگما رایگان است؛ بنابراین کافی است تا ایمیل و پسورد را وارد کنید تا صفحه اصلی این نرم افزار برایتان بیاید. حالا در صفحه اصلی این برنامه روی علامت + کلیک کنید تا یک صفحه پیش فرض برایتان باز شود. همچنین میتوانید در سمت راست این برنامه روی دکمه Create a new design page کلیک کنید.
بعد از آن باید یک فریم ایجاد کنید؛ چون قصد ساخت وایرفریم برای وبسایت را داریم، پس گزینه Desktop frame را انتخاب کنید.
برای ساخت فریم در ابعاد دلخواه از منوی بالا ابزار فریم را برداشته و اندازه آن را از پنل سمت راست انتخاب کنید.
در این قسمت از پنل سمت راست گزینه desktop را انتخاب کنید. مانند شکل زیر یک فریم کشیده میشود.
اضافه کردن ستونها و گرید در فیگما
به شما پیشنهاد میکنیم قبل از شروع کار طراحی در صفحه خود گرید ایجاد کنید. استفاده از گرید در طراحی موجب تراز شدن محتوا و دقیق شدن محل قرار گیری اجزا میشود. تعداد گریدها را خودتان میتوانید در نظر بگیرید.
برای اضافه کردن گرید به فریم خود باید ابتدا فریم مورد نظر را انتخاب کنید. از پنل سمت راست روی گزینه Layout Grid کلیک کرده و تعداد ستونها را تعیین کنید.
چگونه در فیگما از اشیاء استفاده کنیم؟
در برنامه فیگما همانطور که در آموزش قبلی هم آمده است، به راحتی میتوان اشیاء را وارد نمود. برای ایجاد طرح اولیه در هر برنامهای، ما نیاز به دایره، مربع، مستطیل و … داریم. در اینجا ما از قسمت اشیاء مستطیل را انتخاب میکنیم و با درگ کردن آن را به اندازه دلخواه ترسیم میکنیم.
چگونگی اضافه کردن تصاویر در فیگما
در فیگما هم مانند همه برنامههای گرافیکی، میتوان از تصاویر و عکسها از کامپیوتر شخصی استفاده کرد؛ چون تصاویر در طراحی UI نقش اساسی دارند. ما در اینجا میخواهیم یک لوگو به صفحه خود اضافه کنیم.
برای این کار روشهای زیادی وجود دارد؛ شما میتوانید با درگ کردن تصویر مورد نظر خود را به داخل فریم بکشید یا اینکه با استفاده از ابزار Shape image upload تصویر خود را وارد کنید.
بعد از اینکه تصویر را وارد کردید، حالا میتوانید اندازه آن را به دلخواه خود تغییر دهید و آن را در جای مناسب قرار دهید.
ما تا اینجا یک شی ساختیم، داخل آن عکس مورد نظر خود را قرار دادیم. حالا میخواهیم متن مورد نظر خود را هم اضافه کنیم.
اضافه کردن متن به طرح مورد نظر در فیگما
برای این کار ابزار متن را انتخاب کنید و در جای مناسب روی طرح خود قرار دهید. فونت و اندازه آن را در هر مرحلهای که باشید میتوانید تغییر دهید. برای این کار باید روی متن کلیک کرده و در پنل سمت راست از قسمت Font اندازه و نوع فونت را تغییر دهید. ناگفته نماند که اگر از نسخه تحت وب استفاده میکنید، امکان استفاده از فونتهای فارسی برای شما وجود ندارد. رفع مشکل آپلود فونت در وردپرس را بخوانید.
بعد از تمام شدن کار طراحی برای گرفتن خروجی در برنامه فیگما، میتوانید روی گزینه Export کلیک کنید تا خروجی برنامه برایتان ذخیره شود. این خروجی در قالب فایلهای JPG , PNG , PDF , SVG ذخیره میشود.
همانطور که مشاهده کردید، به راحتی توانستیم صفحه اصلی وبسایت را طراحی کنیم. این برنامه به شما اجازه میدهد تا از وایرفریمینگ در طراحی سایت بهره مند شوید. بعد از آن، کار برنامه نویسی و طراحی سایت خود را آغاز کنید؛ بنابراین امکان خطا در حین انجام پروژه به شدت کاهش پیدا میکند.
3 سوال پرتکرار مرتبط با موضوع:
1) منظور از وایرفریمینگ در طراحی سایت چیست؟
هر سازندهای قبل از انجام کاری طرح اولیه را روی برگه میکشد. در طراحی سایت هم میتوان با استفاده از نرم افزارها و ابزارهای UI طرح اولیه را ترسیم کرد.
2) موارد استفاده از وایرفریمینگ چیست؟
در موارد مختلف مانند طراحی اپلیکیشنهای موبایل و یا طراحی سایت میتوان از وایرفریمینگ استفاده کرد.
3) چگونه در فیگما میتوان از برنامه و اشیا آن خروجی فایلهای css گرفت؟
در برنامه فیگما اگر هر کدام از اجزا را انتخاب کنید، در پنل سمت راست آن میتوانید روی سربرگ Inspect کلیک کنید. با این کار کدهای برنامه در اختیار شما قرار خواهند گرفت.
خلاصه و نتیجهگیری
به صورت کلی شروع کار طراحی یک اپلیکیشن و یا وبسایت نباید بلافاصله با برنامه نویسی باشد، این کار میتواند ما را با مشکل روبرو کند؛ به همین دلیل اکثر طراحان قبل از انجام کار، ایده و نظر خود را روی کاغذ و سپس در برنامههای دیجیتالی پیادهسازی میکنند. اینکار میتواند موجب مطمئن شدن طراح از نتایج کار شود. نحوه چیدمان عناصر به صورت دقیق مشخص میشود؛ بنابراین با خیال راحتتری میتوان به سراغ برنامه نویسی و موارد پیچیدهتر رفت.
وایرفریمینگ در طراحی سایت امروزه نقش اساسی را دارد. خصوصا که میتوان خروجی این برنامهها را به خوبی مورد استفاده قرار داد. اگر شما طراح سایت هستید، با طراحی در برنامههای UI میتوانید کارفرما را از کلیات کار باخبر کنید. آیا شما تا کنون از وایرفریمینگ استفاده کردهاید؟ کدام ابزار را برای انجام وایرفریمینگ ترجیح میدهید؟ نظراتتان را با ما در افضلی وردپرس به اشتراک بگذارید.
اولین کامنت را شما بگذارید!