چه اتفاقی بر سر وایر فریمینگ در طراحی سایت افتاده است
برای یافتن پاسخ این مسئله می بایست سری به تعاریف پایه ای طراحی وب برویم.
با نگاه کردن به ویکیپدیا طراحی وب به درک مراحلی است که هدف آن ساختن Front-End یک وبسایت همانند زبان Markup آن است.
خیلی از طراحان وب در وقت اغاز کار خود تنها به یک نرم افزار نوشتن متن همانند Notepad نیاز داشتند و مقدمات HTML و طراحی وبسایت را با همون ابزارهای ابتدایی فراگرفته اند. وقتی بعد CSSساخته شد و خیلی نیز با بکارگیری از همان ابزارهای ابتدایی آنرا یاد گرفته اند. چه نرم افزار دیگری لازم است؟
پاسخ خیلی راحت نیست. وبسایت ها هر روز عوض میشوند و تغییر پیدا میکنند. طراحان هم موقعه با افزایش پهنای باند اینترنت برای بهتر شدن ظاهری از گرافیکهای کامپیوتری استفاده میکردند. در طی بعد های تعاریفی همانند PHP، ASP، SQL، CMS، SEO، JavaScript و انیمیشنهای Flash همه قسمتی از طراحی وبسایتی که در دنیای مدرن امروز با آن آشنایی کامل داریم.
وایر فریمینگ در طراحی سایت
بکتارگیری فوتوشاپ برای رسم کردن وایرفریم ها بسیار عالی است و کار را به سرعت پیش میبرد. اما مشکل اینجاست که در استفاده کردن از فوتوشاپ سبب می شود که به مواردی که کمتر توجه میشود پرداخته شود که در مراحل طراحی وایرفریم آنها را لازم نداریم. توجه داشته باشید که این مرحله باید با زور باشد خصوصا اگر از چنین ابزارهایی برای آن استفاده می کنیم.
الهام گرفتن از وایر فریمینگ در طراحی سایت
در قبل از این که شروع به کشیدن طرح خود بر روی ورق کنید و نمایی کلی از سایت را رسم کنید ، به wireframeهای موجود در اینترنت نگاه کنید و از آنها الگو بگیرید تا بتوانید طراحی وبلاگ زیبا را شروع کنید.
گام دوم در وایر فریمینگ در طراحی سایت طراحی پردازش
طراحی وبلاگ زیبا در حقیقت یک پردازش باید بگویم و طراحان مختلف با طرح wireframeهای مختلف و کدهای متفاوت به نتایج متفاوتی می‌رسند. شکل زیر طراحی فرایندهای مختلف wireframe را به نحوه عالی بنمایش بدن.
خیلی از طراحان وب سایت به سمت استفاده از Framworkهایی مانند Bootstrap می‌روند که صفحه را به ۱۲ قسمت تقسیم کرده است و کار آنها را بدون اطلاع اندازه صفحه نمایش o,f و یک سایت responsive میسازد ، پیش میرود ، اما خیلی دیگر به سوی wireframe خود می‌روند و یک سایت با رعایت نکات سئو را تموم میکند. در بخش آموزش طراحی وبلاگ هانت می توانید به سادگی با اطلاعاتی که در مورد این حوزه نیاز دارید ، آشنا شوید.
برای طراحی وبلاگ این زمینه مهم در طراحی سایت قادر هستید از ILLUSTRATOR و یا PHOTOSHOP استفاده کنید چون آنها هم می‌توانند صفحه شما را به ۱۲ قسمت تقسیم کنند و دقت کار شما را بالا ببرند.
مزایای استفاده از ILLUSTRATOR
- قابلیت ذخیره سازی استایل type و objectها و استفاده دوباره از آنها مانند CSS.
- در این نرم‌افزار حرکت، تغییر و یا Scale به راحتی بر روی objectها صورت می‌گیرد.
- قابلیت انتقال فایل‌ها به نرم‌افزار فتوشاپ
Balsamiq در وایر فریمینگ در طراحی سایت
این وسیله میتواند سریع و کارآمد برای طراحی وب است و کاملا مدرن بوده و با version control می‌توانید ورژن‌های مختلفی از طرح خود را کنترل کند. با چند drag and drop راحت قادر هستید پلن خود راماده کنید. این نرم‌افزار از سیستم عامل‌های Mac, Windows and Linux پشتیبانی میکند و نسخه وب نیز دارد.
از دیگر ابزارهای ساخت شمایی کلی از سایت می‌توان، Omnigraffle، Axure، Flairbuilder، Keynote/Powerpoint، Adobe CS، Fireworks، Illustrator، Indesign و ProtoShare را نام برد.
کد نویسی در وایر فریمینگ در طراحی سایت
با یک دسته HTML هیچ چیزی کدنویسی را شروع می کنیم. کار را با کدنویسی و تایپ کردن قادر هستید شروع کرد ، برای نمونه قادر هستید یک مطلب را به شکل یک صفحه HTML درآورد و تایپوگرافی های زیادی را بر روی آن یک بار امتحان کرد. تا اینجا وبسایت هیچ المان دیگری همانند گرافیک ، سیستم ناوبری و سایر المان ها را شامل نیست و تمرکز اصلی بر روی نشون دادن محتوا در صفحات نمایش با اندازه های مختلف است.
زمانی که از تایپ کردیم راضی بودیم میتوانیم المان های دیگه ای را نیز به صفحات اضافه کنیم. مثل سیستم ناوبری ، لوگو و عکس پیش زمینه ، Header و Footer و سایر المان ها. باید در این مرحله این نکته را درک کنید که چیدمان المان ها در همه صفحات بایستی از یک الگو پیروی کنند. چیزی که در مرحله وایرفریم یا ساخت نمونه به آن بی توجه باشیم.
از خوبی های استفاده مستقیم از کد اینست که هرجا حس کنید که چیزی بدرد نمیخوره ، سریعا تغییرات را انحام دهید. به احتمال خیلی زیاد مشکلات را خیلی به زودی زود پیدا خواهید کرد چون بر روی محصول اخریی به صورت زنده کار می کنید که در طراحی وب نکته مهمی است.
