راهنمایی برای تازه کار ها در ضمینه طرح دستی وب سایت
طرح دستی وب سایت یا wireframing یک قدم مهم در پروسه طراحی صفحه است. در مرحله اول به شما اجازه می دهد یک سلسه مراتب اطلاعاتی برای طرح خودتون درست کنید ، در حقیقت یک راه ساده برای شما می باشد که بتوانید مسیر پردازش اطلاعات را برای کاربران خود برنامه ریزی کنید. اگر شما به فکر کار با wireframing همیشه بودید وقتشه که شروع کنید.
بیاید دیگه شروع آموزش خودمون رو شروع کنیم!
مثل یک طراحی معماری میمونه ؛ شما قبل اینکه بخواین طرح خونه رو به طور کامل بکشین و بفهمین قراره طرحتون چظوری بشه اولش با همون خطوط سیاه و سفید دو بعدی شروع می کنید.
طراحی صفحات وب سایت هم به همین ترتیب می باشد یعنی شما نمیتونید همون اول پیکسل به پیکسل طراحی خودتون رو در photoshop پیش ببرید یا شروع به نوشتن بلاک ها کد بکنید ، چیزی که شما نیاز دارین بدونین اینه که کد نویسی شما مسیری و هدفی داشته باشه!
بخوام عمیق تر بررسی کنم ، wireframing در نحوه ی ارتباط برقرار کردن کاربران با صفحه های وب هم تاثیر زیادی دارد. به طور مثال ، میتونه wireframe شما شامل شکل های متنوع ای از منو و همینطور دکمه ها را شامل شود.
Wireframing مهم است زیرا به شما اجازه می دهد تا بدون اینکه با رنگ ها و انواع تایپ ها سررم بشین و به این ها توجه کنید ؛ به نحوه ی ارتباط برقرار کردن کابران و همینطور برنامه ریزی برای طرح بپردازید.
من به مشتری های خودم سعی می کنم توضیح بدم که اگر طراحی سیاه و سفید کاربرانی که قرار است با سایت شما در ارتباط باشند را جایی نبرد ، رنگ ها هم در نهایت قرار نیست کار بکنند!
به طور مثال دکمه هایی که استفاده می کنید صرف نطر از شکلی که دارند باید کاملن واضح باشند.
درست مثل سساختن خونه است! وقتی شما میخواین یه خونه رو تکمیل کنید قبل این که بخواین براش رنگی انتخاب کنین باید از زیر بنای خانه اطمینان داشته باشید.
قدم اول : الهام گرفتن
قبلا از اینکه وارد جزییات بشیم میتونین نگاهی به Wireframe های آنلاین بندازید تا یه کم با این دنیا اشنا بشین و یک پیش زمینه ای در ذهنتون ایجاد بشه. و ببینید که چگونه طراحان این پروسه wireframing را طی می کنند.
http://academyit.net/uploads/2016/10/14771154063.png
پیشنهاد من به شما اینه که به سایتی به اسم Wirify هم سر بزنید تا با ورژن “wiredrame-d” هر سایتی رو به طور زنده ببینید.
http://academyit.net/uploads/2016/10/14771154174.jpg
در واقع شما با سر زدن به این سایت ها و دیدن کار بقیه ی طراحان یک تصویر ذهنی برای خودتون ایجاد می کنید که ببینین باید از کجا شروع کنید و همینطور دلیل مهم تر این است که کمک می کند بفهمین که چطوری اطلاعات رو در صفحه ی خودتون ساختار بندی کنید.
قدم دوم: روند خود را طراحی کنید
طراحی یک روند طبیعی است و بدین ترتیب خیلی از طراحان به wireframing روی می آورند تا بتونن اون رو با راه های مختلفی به طور کد های عینی در بیارن. شما باید روندی رو پیدا کنید که بیشتر از همه باهاش راحت هستید و کنار میاین و همینطور توانایی شما رو نمایان می کند.
در زیر برای شما یک سری از فرآیند های معمول را آورده ایم :
دلیلی که من از illustrator را به عنوان ابزار برای wireframing استفاده می کنم 3 دلیل عمده است:
استایل ها – شما می توانید نوع و استایل های اشیا را مشخص کنید و همینطور دوباره ازشون استفاده کنید – درست مانند css
تغییر ، جا به جایی و مقیاس بندی کردن اشیا راحت می باشد
به راحتی قابل تبدیل به photoshop می باشدتوجه داشته باشید که بر اساس کاری که می خواهید انجام بدین می توانی از ابزار های دیگری هم استفاده کنید.
قدم 3: ابزار خود را انتخاب کنید
در اینجا باچند ابزار معروف آشنا می شوید :
Balsamiq
یک ابزاری است که به شما به طور واضح مشخص می کند که wireframe ها کار های تمام شده نیستند و در حال پیشرفت اند .همینطور کتابخونه های مختلفی داره که میتونین ازشون برای طراحی راحت استفاده کنید.
شما می توانید این ابزرا با در هر platform ای که می خواهید استفاده کنید که برای تقریبا همه ی سیستم عامل ها تعبیه شده است.
علاوه بر اون ورژن وب آن هم برای شما قابل استفاده است.
Omnigraffle
که همینطور حمایت زیادی از کتابخانه ی قابل استفاده، به اسم Graffletopia که کامپوننتی هست دارد .
ازونجایی که به عنوان یک برنامهی دیاگرام کردن تولید شد ، Omnigraffle از ویژگی های مختلفی از جمله automatic layout ، custom object style support ، راهنمایی های هوشمندانه و ابزار های گراف بهره می برد.
البته در ابزار ی مثل Adobe CS suite هم برخی از این خصوصیات وجود دارد ولی شما به راحتی می توانید از Omnigraffle استفاده کنید.
Axure
یه طوری مانند پدربزرگ ابزار های wireframing می باشد . در اصل یکی از اولین های حرفه ای بود که به عنوان ابزار های wireframing و prototyping ازش استفاده میشد.
تا امروز فقط شما در Windows می توانستید از این ابزار استفاده کنید. من به شخصه خیلی از این ابزار استفاده نکردم ولی ابزار ی پر استفاده در طراحان صنعتی بشمار می رود.
Flairbuilder
این ابزار حمایت قوی ای از interaction ها دارد!
همچنین کتابخانه های بزرگی دارد و همینطور طراحی شما به طور آنلاین قابل مشاهده است.
Online applications
اگر نرم افزار های دسکتاپ برای شما راحت نیست می توانید از ابزار هایی مانند : mockfloa , hotgloo و mockingbird استفاده کنید.
Keynote/Powerpoint
این ابزار برای شما به سرعت برنامه ارایه ی مورد علاقه تان را به یک برنامه طراحی راحت برای درست کردن پیکرنماهای وب یا دسکتاپ یا موبایل تبدیل می کند.
اگر شما نیاز دارین تا سریعا یک prototype برای موبایل بسازید از ابزار keynote kungfu استفاده کنید.
Adobe CS
برای کسانی که تا حالا با Adobe suit کار کرده اند ، Fireworks و Illustrator و Indesign ابزار های خوبی برای نقاط ضعف و قوت آن ها می باشد.
Fireworks
شما می توانید تمامی مراحل روند خود را با Fireworks ها پیاده سازی کنید از همان ابتدای wireframe تا انتها که به قسنت های دیداری برسد. همینطور میتوانید template های قابل استفاده ای هم باهاش بسازین و همینور از کتابخونه های متنوع ای که داره استفاده کنید. و همینطور طرح های اولیه ی تعاملی ای به سرعت ، بسازید.
Illustrator
یکی از ابزار های مورد علاقه است که بیشتر طراحان هم باهاش کار می کنند . اگ کاری رو بخواهیم با سرعت و پیچیده بدون در نظر گرفتن کار های تعاملی انجام بدیم از این ابزار استفاده می کنیم.
امکان خروج یک psd که لایه های آن قابل ویرایش می باشد باعث شده که این ابزار برنده باشد!
Indesign
تقریبن مانند Illustrator می باشد ولی ازونم بهتره ! کنترل کردن استایل ها بهتره ، حمایت های خوبی از صفحه ها دارد و کار های تعاملی هم میشه راحت انجام داد!
ادامه مطلب http://academyit.net/articles/77
