close
تبلیغات در اینترنت
Wireframe چیست و چگونه برای سایت خود بسازیم؟
loading...

ناب اسکریپت

قبل از طراحی و پیاده سازی یک وب سایت، داشتن اطلاعاتی کامل از جزئیات طرح الزامی است. به طور کلی Wireframe یک راهنمای تصویری کامل از وب سایت قبل از شروع طراحی است که چهارچوب کلی سایت را مشخص می کند و معمولا طراحان حرفه ای سایت این مورد را از مشتریان خود می خواهند. بعنوان مثل اگر بخواهیم…

Wireframe چیست و چگونه برای سایت خود بسازیم؟

admin بازدید : 189 پنجشنبه 10 مرداد 1392 نظرات ()

قبل از طراحی و پیاده سازی یک وب سایت، داشتن اطلاعاتی کامل از جزئیات طرح الزامی است. به طور کلی Wireframe یک راهنمای تصویری کامل از وب سایت قبل از شروع طراحی است که چهارچوب کلی سایت را مشخص می کند و معمولا طراحان حرفه ای سایت این مورد را از مشتریان خود می خواهند. بعنوان مثل اگر بخواهیم یک وب سایت خبری طراحی و پیاده سازی کنیم، ابتدا باید بدانیم اطلاعات کاملی از این سایت خبری داشته باشیم تا بتوانیم طرح را پیاده کنیم. مواردی مثل: طول سایت، محل قرارگیری سربرگ، تعداد بلوک های سایت، مکان قرار گیری آخرین اخبار، تعداد ستوی های سایت و… هستند که در ادامه به جزئیات آن همراه با نمونه هایی از Wireframe و نحوه ساختن آنها بیشتر می پردازیم.

 Wireframe چیست و چگونه برای سایت خود بسازیم؟

 

در یک Wireframe نباید نهایت گرافیک را به کار برد! با یک قلم و کاغذ معمولی ویا با نرم افزار Point ویندوز هم می توان Wireframe را ایجاد کرد. این کار باعث می شود تا به قول خودمان دست طراح را برای زدن طرح بیشتر باز کنیم!

 

مزایای استفاده از Wireframe قبل از شروع به کار:

  • صرفه جویی در وقت.
  • عدم سردرگمی طراح برای پیاده سازی طرح.
  • داشتن یک پیش نمایش از سایت قبل از شروع به طراحی.
  • مشخص کردن عناصر قرار گرفته برروی طرح.
  • تغییر و تنظیم عناصر کاربری.

 

 از کجا شروع کنیم؟

برای کشیدن یک Wireframe نیاز به ابزار خاصی نیست و راه های زیادی برای این کار وجود دارد. استفاده از برنامه های گرافیکی، نرم افزار Photoshop, Point و…

ویا حتی استفاده از یک قلم و کاغذ معمولی!

وب سایت هایی هم برای ساختن Wireframe وجود دارد که از معروف ترین آنها میتوان به: wireframe.ccgomockingbird.comcacoo.com و lumzy.com اشاره کرد که بنده به شخصه سایت: wireframe.cc رو پیشنهاد می کنم :)

 

نمونه ای از Wireframe های سایت های معروف:

5 Years of Firefox

5 Years of Firefox

LinksLinks

NationWide / NASCARNationWide / NASCAR

GEOINT2009GEOINT2009

Coastal Capital PartnersCoastal Capital Partners

New LocalNew Local

Vimeo Profile Page IdeaVimeo Profile Page Idea

BPgraphicsBPgraphics

CartoonityCartoonity

Librespeak interface sketchLibrespeak interface sketch

Original Twitter Concept

Original Twitter Concept

 

منبع: ایران 98

مطالب مرتبط
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
تبلیغات
Rozblog.com رز بلاگ - متفاوت ترين سرويس سایت ساز
اطلاعات کاربری
نام کاربری :
رمز عبور :
  • فراموشی رمز عبور؟
  • نویسندگان
    آرشیو
    آمار سایت
  • کل مطالب : 142
  • کل نظرات : 1
  • افراد آنلاین : 1
  • تعداد اعضا : 3
  • آی پی امروز : 22
  • آی پی دیروز : 32
  • بازدید امروز : 155
  • باردید دیروز : 46
  • گوگل امروز : 2
  • گوگل دیروز : 2
  • بازدید هفته : 1,669
  • بازدید ماه : 3,315
  • بازدید سال : 3,315
  • بازدید کلی : 162,376