در حال نمایش 1 نوشته (از کل 1)
  • نویسنده
    نوشته ها
  • #33164

    academyit
    مشارکت کننده

    طرح دستی وب سایت یا wireframing یک قدم مهم در پروسه طراحی صفحه است. در مرحله اول به شما اجازه می دهد یک سلسه مراتب اطلاعاتی برای طرح خودتون درست کنید ، در حقیقت یک راه ساده برای شما می باشد که بتوانید مسیر پردازش اطلاعات را برای کاربران خود برنامه ریزی کنید. اگر شما به فکر کار با wireframing همیشه بودید وقتشه که شروع کنید.
    بیاید دیگه شروع آموزش خودمون رو شروع کنیم!

    راهنمایی برای تازه کار ها در ضمینه طرح دستی وب سایت

    مثل یک طراحی معماری میمونه ؛ شما قبل اینکه بخواین طرح خونه رو به طور کامل بکشین و بفهمین قراره طرحتون چظوری بشه اولش با همون خطوط سیاه و سفید دو بعدی شروع می کنید.
    طراحی صفحات وب سایت هم به همین ترتیب می باشد یعنی شما نمیتونید همون اول پیکسل به پیکسل طراحی خودتون رو در photoshop پیش ببرید یا شروع به نوشتن بلاک ها کد بکنید ، چیزی که شما نیاز دارین بدونین اینه که کد نویسی شما مسیری و هدفی داشته باشه!
    بخوام عمیق تر بررسی کنم ، wireframing در نحوه ی ارتباط برقرار کردن کاربران با صفحه های وب هم تاثیر زیادی دارد. به طور مثال ، میتونه wireframe شما شامل شکل های متنوع ای از منو و همینطور دکمه ها را شامل شود.

    راهنمایی برای تازه کار ها در ضمینه طرح دستی وب سایت
    Wireframing مهم است زیرا به شما اجازه می دهد تا بدون اینکه با رنگ ها و انواع تایپ ها سررم بشین و به این ها توجه کنید ؛ به نحوه ی ارتباط برقرار کردن کابران و همینطور برنامه ریزی برای طرح بپردازید.
    من به مشتری های خودم سعی می کنم توضیح بدم که اگر طراحی سیاه و سفید کاربرانی که قرار است با سایت شما در ارتباط باشند را جایی نبرد ، رنگ ها هم در نهایت قرار نیست کار بکنند!
    به طور مثال دکمه هایی که استفاده می کنید صرف نطر از شکلی که دارند باید کاملن واضح باشند.
    درست مثل سساختن خونه است! وقتی شما میخواین یه خونه رو تکمیل کنید قبل این که بخواین براش رنگی انتخاب کنین باید از زیر بنای خانه اطمینان داشته باشید.

    قدم اول : الهام گرفتن

    قبلا از اینکه وارد جزییات بشیم میتونین نگاهی به Wireframe های آنلاین بندازید تا یه کم با این دنیا اشنا بشین و یک پیش زمینه ای در ذهنتون ایجاد بشه. و ببینید که چگونه طراحان این پروسه wireframing را طی می کنند.

    راهنمایی برای تازه کار ها در ضمینه طرح دستی وب سایت

    پیشنهاد من به شما اینه که به سایتی به اسم Wirify هم سر بزنید تا با ورژن “wiredrame-d” هر سایتی رو به طور زنده ببینید.

    راهنمایی برای تازه کار ها در ضمینه طرح دستی وب سایت
    در واقع شما با سر زدن به این سایت ها و دیدن کار بقیه ی طراحان یک تصویر ذهنی برای خودتون ایجاد می کنید که ببینین باید از کجا شروع کنید و همینطور دلیل مهم تر این است که کمک می کند بفهمین که چطوری اطلاعات رو در صفحه ی خودتون ساختار بندی کنید.

    قدم دوم: روند خود را طراحی کنید

    طراحی یک روند طبیعی است و بدین ترتیب خیلی از طراحان به 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 می باشد ولی ازونم بهتره ! کنترل کردن استایل ها بهتره ، حمایت های خوبی از صفحه ها دارد و کار های تعاملی هم میشه راحت انجام داد!
    ادامه مطلب

در حال نمایش 1 نوشته (از کل 1)

کاربر گرامی برای پاسخ به این موضوع اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.