ایجاد وایرفریم یکی از اولین گام هایی است که باید قبل از طراحی وب سایت بردارید.
Wireframe به شما کمک می کند عناصر و محتوا را در یک وب سایت سازماندهی و ساده کنید و ابزاری ضروری در فرآیند توسعه است.
فریم سیمی اساساً نمایش بصری طرح‌بندی محتوا در طراحی وب‌سایت است.
Wireframe به عنوان یک نمونه اولیه عمل می‌کند که محل قرارگیری ویژگی‌های صفحه، مانند سرصفحه، پاورقی، محتوا، نوارهای جانبی و پیمایش را نشان می‌دهد.
همچنین قرارگیری عناصر در این حوزه‌های محتوا را مشخص می‌کند. اگر می‌خواهید سایتی ایجاد کنید که دقیقاً با نیازهای مشتری مطابقت داشته باشد و بازبینی‌های پروژه را به حداقل برسانید، Wireframing شما را در مسیر درست نگه می‌دارد.
مزایای Wireframing
ایجاد یک قاب سیمی به مشتری، توسعه‌دهنده و طراح این فرصت را می‌دهد تا نگاهی انتقادی به ساختار وب‌سایت بیندازند و به آنها اجازه می‌دهد تا در مراحل اولیه به‌راحتی اصلاحات را انجام دهند.
Wireframing مزایای کلیدی زیر را به همراه دارد:
- به مشتری یک نمای اولیه و نزدیک از طراحی سایت (یا طراحی مجدد) می دهد.
- می‌تواند الهام بخش طراح باشد و در نتیجه فرآیند خلاقانه‌تری ایجاد کند.
- به توسعه دهنده تصویر واضحی از عناصری که برای کدنویسی نیاز دارند می دهد.
- دعوت به اقدام در هر صفحه را واضح می کند.
- سازگاری با آن آسان است و می‌تواند طرح‌بندی بسیاری از بخش‌های وب‌سایت را نشان دهد.
ابزارهای توسعه Wireframe
هنگام ایجاد یک قاب سیمی ابزارهای زیادی برای انتخاب دارید:
- طراحی دستی روی کاغذهمیشه نقطه شروع خوبی برای هر طراح است. این یک راه سریع و آسان برای تمرکز و سازماندهی فراهم می کند. اگر در طراحی بسیار دقیق هستید، حتی می توانید از آن به عنوان وایرفریم نهایی خود استفاده کنید. (شکل 1 را ببینید.)
- نرم افزار فلوچارت یا نقشه ذهنی، مانند Visio. این گزینه‌های نرم‌افزار دارای عناصر از پیش بسته‌بندی شده‌ای هستند که به شما امکان می‌دهند به راحتی نمایش‌های نمودار جریانی از وایرفریم خود ایجاد کنید.
- نرم افزار نمونه سازی وب، مانند Gliffy یا بالسمیق. ابزارهایی مانند اینها به‌ویژه برای تولید فریم‌های سیمی ایجاد شده‌اند و قابلیت‌های نمونه‌سازی آسان برای استفاده دارند.
- نرم افزارهای گرافیکی، مانند Photoshop یا Illustrator. مزیت استفاده از این ابزارها این است که وایرفریم می تواند مستقیماً به یک ماکت گرافیکی از طراحی وب سایت تبدیل شود. با این حال، نقطه ضعف این است که شما باید تمام عناصر را با دست ایجاد کنید.
- (X)HTML تقریباً مانند خود سایت‌های واقعی هستند. می‌توانید قبل از اعمال استایل‌ها، وایرفریم را با کد بچینید، یا می‌توانید یک طرح‌بندی کاملاً سبک و با وفاداری بالا ایجاد کنید که بسیار شبیه به طرح نهایی است. (شکل 2 را ببینید.)
وایرفریم‌های
در نهایت، توسعه‌دهنده یا طراح باید ابزاری را که ترجیح می‌دهند انتخاب کند. من شخصاً از فتوشاپ استفاده می‌کنم زیرا روشی را که این فرآیند را سازماندهی می‌کند و اینکه چگونه می‌توانم فایل را به یک ماکت تبدیل کنم دوست دارم.
مثال Wireframe
سطح جزئیات در یک قاب سیمی به عوامل مختلفی بستگی دارد، از جمله: میزان جهت و محتوایی که مشتری ارائه کرده است، چقدر محتوا پیچیده است، تا چه حد در این فرآیند هستید و چقدر جزئیات را می خواهید. شامل شود.
در اینجا نمونه‌هایی از وایرفریم‌هایی هستند که با استفاده از ابزارهای مختلف ایجاد شده‌اند و سطوح مختلفی از جزئیات و رنگ‌ها را نشان می‌دهند:
شکل 1: از این طرح قاب ساده برای وب‌سایت Coast Capital Partners (که اکنون به Broad Reach Retail Partners تغییر نام داده است) استفاده شده است. برای ایجاد موکاپ های گرافیکی و در نهایت طراحی نهایی. توسط مایک رود.
شکل 2: فریم HTML بسیار کم وفاداری. برای نشان دادن اینکه یک سایت قبل از اضافه شدن یک ظاهر طراحی شده چگونه خواهد بود مفید است. برای کاربران کم بینا بسیار مفید است.
شکل 3: قاب سیمی با وفاداری پایین برای انجمن Embrace Pet، توسط Jesse Bennett-Chamberlain از 31Three .
شکل 4: یک مدل اولیه از ابزار کنفرانس اجتماعی ساخته شده بر روی Tiddlywiki برای استفاده در Le Web 3. یادداشت های همراه آن در tiddleleweb هستند .tiddlyspot.com. Wireframe توسط فیل هاکس‌ورث<.>
شکل 5: این یکی بر اساس استفاده پیشرفته از سیستم انتشار وبلاگ (وردپرس) است. توسط Mattheiu Mingassson یا Activeside Internet استراتژی ها و مشاوره.
شکل 6: یک قاب سیمی برای جامعه حیوانات خانگی در آغوش، توسط جسی بنت-چمبرلین از 31Three.
شکل 7: یک قاب سیمی با رنگ و تصاویر. Wireframe صفحه نویسنده توسط بوخاندل.
شکل 8: یک قاب سیمی دیگر با رنگ. توسط Mattheiu Mingassson از استراتژی ها و مشاوره اینترنتی Activeside.
بهترین شیوه‌ها
برای دستیابی به نتایج بهینه، در اینجا چندین نکته مهم وجود دارد که باید هنگام توسعه یک وایرفریم در نظر داشته باشید:
- سادگی. نکته کلیدی این است که آن را به اندازه کافی ساده نگه دارید تا برای مشتری واضح باشد و برای طراح انعطاف پذیر باشد، اما به اندازه کافی دقیق باشد تا برنامه نویس را راهنمایی کند. همانطور که گفته شد، می توانید یک قاب سیمی با وفاداری بالا ایجاد کنید، اما انجام این کار در اوایل فرآیند توسعه می تواند برای مشتری گیج کننده باشد، که ممکن است آن را با پیش نویس نهایی اشتباه بگیرد.
- در مقیاس خاکستری کار کنید. هنگام ایجاد عناصر برای یک قاب سیمی، بهتر است در مقیاس خاکستری کار کنید تا بتوانید بدون اینکه طراحی حواس‌تان را پرت کند، روی طرح‌بندی تمرکز کنید. اگر یک لوگوی تمام رنگی به شما داده شده است، آن را به مقیاس خاکستری نیز تبدیل کنید. برای تمایز بین و دسته بندی عناصر مختلف، اشکال و خطوط را در سایه های مختلف خاکستری نشان دهید.
- از وایرفریم ها در کنار نقشه سایت استفاده کنید. وایرفریم نمایش تصویری یک نقشه سایت خوب است، نه جایگزین. نقشه سایت یک ابزار مفید برای هر وب سایتی است و قطعاً مراجعه به آن در طول فرآیند توسعه مفید خواهد بود.
- روی نتیجه دلخواه تمرکز کنید. درک روشنی از نحوه پاسخ مشتری شما به صفحه قبل از ایجاد Wireframe خود داشته باشید. فراخوان ها برای اقدام باید به سادگی از نگاه کردن به قاب سیمی بسیار واضح باشد.
- یک Wireframe در اندازه کامل ایجاد کنید. این دقیق ترین نمایش صفحه واقعی را ارائه می دهد.
- عناصر را با ایمن‌سازی محتوا از قبل برنامه‌ریزی کنید. در بهترین حالت، مشتری شما قبلاً عناصری را که باید در هر صفحه ظاهر شوند، مانند لوگو، تبلیغات، به شما ارائه کرده است. ، پخش کننده های فلش یا ویدیو، ویژگی ها، بخش های پیمایش و عناصر نوار کناری، سرصفحه و پاورقی. اگر هنوز این اطلاعات را ندارید، با مشتری خود ملاقات کنید و یک نقشه سایت دریافت کنید (یا ایجاد کنید). اگر در حال طراحی مجدد عناصر موجود هستید، می توانید آنها را از بررسی دقیق وب سایت جمع آوری کنید. در این سناریو، حتماً ابتدا با مشتری خود تأیید کنید که نیازی به افزودن یا حذف عناصر نخواهید داشت، زیرا نداشتن درک واضح از انتظارات آنها باعث کند شدن روند کار می شود.
اگر برای یک وب‌سایت است،
مقیاس خاکستری در مقابل رنگ
هنگام ایجاد یک قاب سیمی، کار در مقیاس خاکستری به حفظ تمرکز بر عملکرد اصلی فرآیند کمک می‌کند، که نهایی کردن طرح‌بندی است، نه طرح (شکل 3 را ببینید. ). خطر دیگر کار در رنگ این است که مشتری ممکن است Wireframe را با مدل نهایی اشتباه بگیرد.
با این حال، رنگ می تواند هنگام نشان دادن مکان هر تماس برای اقدام مفید باشد. از آنجایی که یک صفحه ممکن است حاوی چندین فراخوان برای اقدام باشد، اولویت بندی آنها مهم است. Wireframes می‌تواند به تعیین اینکه ابتدا توجه کاربر را به سمت کدام فراخوان باید جلب کند کمک کند.
من اخیراً روی پروژه‌ای کار کردم که دارای لوگوی بسیار پر جنب و جوشی بود، که در آن مورد، دعوت اولیه برای اقدام بود زیرا نشان‌دهنده یک مجله تازه راه‌اندازی بود.
هنگامی که از رنگ استفاده می‌کنید، راحت‌تر می‌توانید تشخیص دهید که آیا عناصر خاصی بر فراخوان اولیه غلبه دارند یا خیر. این فرآیند به جای طراحی ماکت، همچنان در حوزه Wireframing قرار می گیرد، زیرا مکان عناصر هنوز در حال تعیین است.
رنگ را می‌توان به تدریج با پیشرفت پروژه به وایرفریم اضافه کرد که کارآمدتر از حرکت با ماکت‌ها قبل از قفل شدن مکان عناصر است. در انجام این کار، نرم‌افزار گرافیکی می‌تواند به شما کمک کند در صورت آماده شدن، مستقیماً به یک مدل تغییر دهید.
از چه چیزهایی باید اجتناب کرد
مانند سایر جنبه‌های فرآیند توسعه‌تان، وایرفریم‌سازی نیز اگر به‌درستی انجام نشود، می‌تواند مشکلات خود را داشته باشد. در اینجا چند نکته در مورد مواردی که برای دستیابی به موثرترین نتایج باید اجتناب کرد وجود دارد:
- خیلی زیاد در صفحه اتفاق می‌افتد. فضای سفید کافی بگذارید تا طرح خیلی شلوغ یا درهم به نظر نرسد.
- تاکید بر رنگ و طرح. Wireframing برای تصمیم گیری در مورد چیدمان و مکان عناصر است. حتی اگر یک قاب سیمی می‌تواند بر طراحی تأثیر بگذارد، افزودن گرافیک و رنگ احتمالاً فقط هدف آن را منحرف می‌کند.
- جزئیات بیش از حد. همیشه می‌توانید جزئیات بیشتری را بعداً اضافه کنید، اما اگر در ابتدا بیش از حد اضافه کنید، مشتری ممکن است فریم سیمی را برای مدل نهایی اشتباه بگیرد.
اگر علاقه مند به کسب اطلاعات بیشتر در مورد وایرفریم هستید، مجله Wireframe منبع خوبی است که نمونه ها را به اشتراک می گذارد، تکنیک ها را مورد بحث قرار می دهد و مشکلات مربوط به معماری اطلاعات را حل می کند.
ایجاد قاب سیمی برای وب‌سایت مشتری شما ابزار ارتباطی مؤثر را برای همه طرف‌های درگیر فراهم می‌کند.
حتی ساختن یک وایرفریم ساده در درازمدت باعث صرفه جویی در زمان می شود و روند توسعه را برای طراح، توسعه دهنده و مشتری آسان می کند.
نوشته شده به طور انحصاری برای WDD توسط اریک شافر.
آیا از وایرفریم برای طراحی خود استفاده می کنید؟ برخی از بهترین راه ها برای ایجاد وایرفریم های موثر کدامند؟
بدون دیدگاه