shadishiri65
New member
هر طراح وب سایت به یک سری ابزار درست و مفید برای کارخود احتیاج دارد .
برای ایجاد یک طرح خوب ، مطمئننا شما به الهام و انگیزه احتیاج دارید .
رنگ : Color
Adobe Kuler (free) ابزار
یک ابزار بسیار عالی که توسط شرکت Adboe ارائه شده است . و به کاربران اجازه آپلود ، ایجاد و ویرایش طرح های مختلف رنگی را به انتخاب خودشان می دهد
Pictaculous (free) ابزار
سازندگان mailchimp یک ژنراتور پالت رنگ (color palette generator ) را ارائه کرده اند،که با بقیه فرق های زیادی دارد .
تصویر و رنگهای مورد نظر خود را با تصویری که به عنوان نمونه انتخاب کرده اید آپلود کنید تا یک طرح رنگ سفارشی داشته باشید
Colorzilla (free) ابزار
Colorzilla یک افزونه برای گوگل کروم است که به توسعه دهندگان وب و طراحان گرافیک در زمینه رنگ کمک می کند و برای هر دوپایه مبتدی و پیشرفته می باشد
Colorzilla شامل این موارد و ابزار ها می باشد : Color Picker, Eye Dropper, GradientGenerator و خیلی ابزار های پیشرفته دیگر در زمینه رنگ
Dribbble.com (free) ابزار
بسیاری از طراحان برای گرفتن الهام و انگیزه به سایت dribbble.com مراجعه می کنند .
شما می توانید به صورت معمولی هم جستجو کنید ولی اگر با کلمه رنگ یک جستجو در سایت انجام دهید به نتایج جالبی می رسید .
سایت dribbble.com را مشاهده کنید و برروی منوی Explore در بالای صفحه یا همان تاپ منو کلیک کنید سپس رنگهای مورد نظر خود را انتخاب کنید تا طرح های الهام بخش را مشاهده کنید.
Typography
تایپوگرافی ( فن نگارش )
Google Webfonts (free) ابزار
گوگل ، فونت های متعددی را برای هر طراح وب سایتی ارائه می دهد که می توان از آنها استفاده ی خیلی خوبی کرد
این فونت ها رایگان هستند و به صورت خیلی آسان می توانند در پروژه شما بکار روند .
Font Squirrel (free) ابزار
FontSquirrel بهترین منبع رایگان شما می باشد ، از امکانات آن می توان به (hand-picked, high-quality ) ، کیفیت بالا ، دسترسی آسان ، فونت تجاری ، استفاده در ابزار های مختلف و غیره ..اشاره کرد.
Wireframing
وایرفریم
در ابتدا یک توضیح مختصر درباره وایرفریم می دهیم و سپس به معرفی ابزارهای آن می پردازیم :
Wireframes = ( وایر فریم ها ، ابزار های مهم طراحی هستند که در توسعه وب بکار می روند . این یک ابزار تجسمی برای ارائه هدف تابع ها ، ساختار و محتوای یک صفحه وب و یا وب سایت است . )
Wireframing یا نمونه سازی بخش مهمی از فرآیند طراحی است که اغلب هم توسط با تجربه ترین طراحان نیز نادیده گرفته می شود. ترسیمWireframe می تواند دقیقا بخش های مختلف و عناصر به کار گرفته شده را به صورت خام یا بصری به نمایش درآورد و کار را برای خود طراح و کارفرمای پروژه آسانتر نماید و ارتباط بین طراح و مشتریان را دو چندان کند.
wireframe چیست ؟
اگر بخواهیم در فرآیند طراحی وب سایت یک گزینه را اول انتخاب کنیم ، آن فقط بخش ترسیم اسکچ و وایرفریم ها است که برای نمایش کلیات طرح به مشتری و به اعضای تیم توسعه مورد استفاده قرار می گیرد.
اسکچ یعنی طراحی سریع. اسکچ یا وایرفریم تکنیکی است که توسط طراحان برای پروژه‌های وب و طراحی گرافیک استفاده میشود. وقت هایی که حس می کنید در روند طراحی یک وب سایت گیر کرده اید و کار جلو نمی‌رود، یک کاغذ و مداد می‌تواند کمک بزرگی برای شما باشد.
Wireframe : تصاویر اولیه از ساختار و اجزای یک صفحه وب است که به طور کلی اولین گام در فرآیند طراحی هستند.
مزایای استفاده از Wireframe:
• صرفه جویی در وقت طراح
• عدم سردرگمی طراح برای پیاده سازی طرح کلی
• داشتن یک پیش نمایش از وب سایت قبل از شروع طراحی
• مشخص کردن عناصر و المان های قرار گرفته بر روی طرح
• تغییر و تنظیم راحت عناصر و بخش های مختلف
طراحی از طریق Wireframes می تواند یک راه حل بسیار عالی برای طراحی وب سایت و ایجاد یک نمونه اولیه از یک طرح کلی باشد که بدون استفاده از فتوشاپ یا برنامه نویسی ایجاد می شود. به هیچ وجه از Wireframing یا ایجاد یک طرح اولیه چه بر روی کاغذ یا با استفاده از برنامه های آنلاین یا دسکتاپی نترسید و شاید در نگاه اول یک چیز غیرعادی به نظر برسد ، اما می توانید با این روش در وقت و کار خود صرفه جویی نمایید و خلاقیت خود را هر چه بیشتر در کارهایتان لحاظ کنید
Balsamiq (from $79) ابزار
Balasmiq یکی از ابزارهای سریع وایرفریم می باشد که برای تولید mockup ها از تجربه کاربر بکار می رود .
Mockups : به طور کلی استفاده از Mockups برای طراحی بصری و عناصر گرافیکی سایت استفاده می شود مثل گرافیک ، تایپوگرافی و چیزهای دیگر که بیشتر فایل های تصاویری را هدف قرار می دهند.
طراحی UI (User Interface یا رابط کاربری ) طرح آنها پذیرای این واقعیت است که آن را یک ابزار برای طوفان فکری و تفکر انتقادی است ، که آن را به طراحی با کاربران در ذهن می آید.
گزینه های طراحی برای وب، تلفن همراه، و قرص همه وجود دارند و آسان به پیاده سازی
UI بیشتر مربوط به مهندسی نرم افزار میشود. به این معنی که User Interface یا رابط کاربری به نحوی باشد که برای کاربر کار با محیط نرم افزار راحت تر باشد. مثلا اینکه دکمه ها و لینکها در محیط سایت مشخص باشند یا اطلاعات مناسب در جای مناسب نمایش داده شوند.
moqups (free) ابزار
moqups یک اپلیکیشن یا برنامه HTML5 است که برای ایجاد وایرفریم ها ، مک آپ ها یا مفاهیم رابط کاربری (wireframes, mockups or UI ) استفاده می شود .
سبک و ویژگی های موجود در این ابزار بسیار شبیه ابزار balsamiq می باشد . همه ی اینها به این بستگی دارد که شما در استفاده با کدام ابزار راحت تر هستید .
Mockflow (from free) ابزار
Mockflow یک ابزار وایر فریم آنلاین می باشد مانند دو ابزار قبلی که در بالا اشاره شده است .
از ویژگی های شسته و رفته این ابزار ، همکاری کالیبره ( collabration ) آن است .
معنی collaboration : عملی که با همکاری شخص دیگری برای تولید یا سخت چیزی انجام می شود
شما می توانید یادداشت هایی بنویسید تا به کاربران دیگر اجازه دهید که تغییرات شما را ببینند . و یا همانند چت با یکدیگر نظرات خود را در باره رابط های کاربری و توابع مختلف به اشتراک بگذارید .
Google Drawing (free) ابزار
یک ابزار ارزشمند که بسیاری از طراحان وب ، آن را در نظر نمی گیرند یا توجهی نمی کنند .
با اینکه این ابزار ، ویژگی هایی که در balsalmiq و moqups گفته شده است ارائه نمی کند .
اما یک سرویس کاملا رایگان است و به شما امکان ذخیره سازی به صورت آنلاین برروی هارد گوگل می دهد. و تنها چیزی که شما برای شروع کار احتیاج دارید یک اکانت جی میل است .
Photoshop/Indesign/Fireworks (from $49.99 per month) ابزارهای
این ابزارها که عموما با آنها آشنایی دارید ، یک از ساده ترین راه حل ها برای یک شروع از ابتدا می باشند.
[h=2]LAYOUT AND BOILERPLATESلایه و فریم ورک boilerplates
یک توضیح مختصر درباره فریم ورک boilerplates
HTML5 boilerplate به شما فریم ورک برای ایجاد صفحات html5 و همچنین المان های مختلف را می دهد.
این سیستم با مرورگرهای مختلف سازگاری کامل دارد, به طور مثال با نسخه های قدیمی تر اینترنت اکسپلورر, که به شما امکان استفاده از تگ های html5 نظیر <article>, <aside> and <header> را می دهد.
سیستم همچنین ابزاری برای بهینه سازی سایت برای موبایل دارد, که به شما امکان ایجاد صفحه سازگار با انواع مرورگرها و ابزارها را به گونه ای ساده می دهد. این ابزار همچنین ابزارهای بسیاری نظیر ابزار .htacess برای استفاده از gzip جهت بهینه سازی سایت و سرعت آن دارد
960 Grid (free) ابزار
960 gird یک معیار در وب حساب می شود .
هر طراح وب خوبی باید اهمیت درک استفاده از یک شبکه اساسی (foundationalgrid ) را برا طرح و لایه خود بداند . چون این امر طراحی وب را خیلی بیشتر برای کاربر نهایی قابل استفاده می کند .
اکشن های مختلفی از فتوشاپ در این ابزار برای دانلود موجود است باعث صرفه جویی در زمان شما برای تراز بندی موضوعات مختلف می شود .
Bootstrap (free) ابزار
اگر شما به دنبال یک تجربه از پیش ساخته شده توسط کاربران خلاق می گردید ، پس Bootstrap بهترین دوست شما خواهد بود
ویژگی های متعددی همراه با این فریم ورک می آیند که کاملا قابل انطباق و جذاب به نظر می رسند .
LessFramework 4 (free) ابزار
Less یک فریم ورک اختصاصی است که برای ساختن وب سایت های کاملا سازگار بکار می رود . و تقریبا برای هر دستگاهی که در بازار است قابل استفاده است .
Skeleton (free) ابزار
Skeleton به سادگی می تواند یک شروع بسیار عالی برای هر وب سایتی می باشد .
با ساختار سبک و ساده ای که دارد ، برای آن دسته از افرادی که با فریم ورک آشنایی ندارند ، بسیار سودمند خواهد بود .
[h=3]
Foundation by Zurb (free) ابزار
ابزار Foundation که بر اساس گفته ی شرکت سازنده پیشرفته ترین فریم ورک رسپانسیو در دنیا می باشد.
با بسیاری از ویژگی های جدید اضافه شده و قالب های بسیار جذاب برای شروع کردن کار خود . و من یکی از طرفداران واقعی آن هستم . همین امروز این ابزار را تست کنید .
Reset CSS (free) ابزار
بدون شک این ابزار تشخیص سازگاری CSS با کلیه مرورگرهای بین المللی که به رسمیت نیز شناخته شده است می تواند برای هر طراح وبی در ارائه طرح خود در هر پلتفرم و یا مرورگری بکار آید .
برای ایجاد یک طرح خوب ، مطمئننا شما به الهام و انگیزه احتیاج دارید .
رنگ : Color
Adobe Kuler (free) ابزار
یک ابزار بسیار عالی که توسط شرکت Adboe ارائه شده است . و به کاربران اجازه آپلود ، ایجاد و ویرایش طرح های مختلف رنگی را به انتخاب خودشان می دهد
Pictaculous (free) ابزار
سازندگان mailchimp یک ژنراتور پالت رنگ (color palette generator ) را ارائه کرده اند،که با بقیه فرق های زیادی دارد .
تصویر و رنگهای مورد نظر خود را با تصویری که به عنوان نمونه انتخاب کرده اید آپلود کنید تا یک طرح رنگ سفارشی داشته باشید
Colorzilla (free) ابزار
Colorzilla یک افزونه برای گوگل کروم است که به توسعه دهندگان وب و طراحان گرافیک در زمینه رنگ کمک می کند و برای هر دوپایه مبتدی و پیشرفته می باشد
Colorzilla شامل این موارد و ابزار ها می باشد : Color Picker, Eye Dropper, GradientGenerator و خیلی ابزار های پیشرفته دیگر در زمینه رنگ
Dribbble.com (free) ابزار
بسیاری از طراحان برای گرفتن الهام و انگیزه به سایت dribbble.com مراجعه می کنند .
شما می توانید به صورت معمولی هم جستجو کنید ولی اگر با کلمه رنگ یک جستجو در سایت انجام دهید به نتایج جالبی می رسید .
سایت dribbble.com را مشاهده کنید و برروی منوی Explore در بالای صفحه یا همان تاپ منو کلیک کنید سپس رنگهای مورد نظر خود را انتخاب کنید تا طرح های الهام بخش را مشاهده کنید.
Typography
تایپوگرافی ( فن نگارش )
Google Webfonts (free) ابزار
گوگل ، فونت های متعددی را برای هر طراح وب سایتی ارائه می دهد که می توان از آنها استفاده ی خیلی خوبی کرد
این فونت ها رایگان هستند و به صورت خیلی آسان می توانند در پروژه شما بکار روند .
Font Squirrel (free) ابزار
FontSquirrel بهترین منبع رایگان شما می باشد ، از امکانات آن می توان به (hand-picked, high-quality ) ، کیفیت بالا ، دسترسی آسان ، فونت تجاری ، استفاده در ابزار های مختلف و غیره ..اشاره کرد.
Wireframing
وایرفریم
در ابتدا یک توضیح مختصر درباره وایرفریم می دهیم و سپس به معرفی ابزارهای آن می پردازیم :
Wireframes = ( وایر فریم ها ، ابزار های مهم طراحی هستند که در توسعه وب بکار می روند . این یک ابزار تجسمی برای ارائه هدف تابع ها ، ساختار و محتوای یک صفحه وب و یا وب سایت است . )
Wireframing یا نمونه سازی بخش مهمی از فرآیند طراحی است که اغلب هم توسط با تجربه ترین طراحان نیز نادیده گرفته می شود. ترسیمWireframe می تواند دقیقا بخش های مختلف و عناصر به کار گرفته شده را به صورت خام یا بصری به نمایش درآورد و کار را برای خود طراح و کارفرمای پروژه آسانتر نماید و ارتباط بین طراح و مشتریان را دو چندان کند.
wireframe چیست ؟
اگر بخواهیم در فرآیند طراحی وب سایت یک گزینه را اول انتخاب کنیم ، آن فقط بخش ترسیم اسکچ و وایرفریم ها است که برای نمایش کلیات طرح به مشتری و به اعضای تیم توسعه مورد استفاده قرار می گیرد.
اسکچ یعنی طراحی سریع. اسکچ یا وایرفریم تکنیکی است که توسط طراحان برای پروژه‌های وب و طراحی گرافیک استفاده میشود. وقت هایی که حس می کنید در روند طراحی یک وب سایت گیر کرده اید و کار جلو نمی‌رود، یک کاغذ و مداد می‌تواند کمک بزرگی برای شما باشد.
Wireframe : تصاویر اولیه از ساختار و اجزای یک صفحه وب است که به طور کلی اولین گام در فرآیند طراحی هستند.
مزایای استفاده از Wireframe:
• صرفه جویی در وقت طراح
• عدم سردرگمی طراح برای پیاده سازی طرح کلی
• داشتن یک پیش نمایش از وب سایت قبل از شروع طراحی
• مشخص کردن عناصر و المان های قرار گرفته بر روی طرح
• تغییر و تنظیم راحت عناصر و بخش های مختلف
طراحی از طریق Wireframes می تواند یک راه حل بسیار عالی برای طراحی وب سایت و ایجاد یک نمونه اولیه از یک طرح کلی باشد که بدون استفاده از فتوشاپ یا برنامه نویسی ایجاد می شود. به هیچ وجه از Wireframing یا ایجاد یک طرح اولیه چه بر روی کاغذ یا با استفاده از برنامه های آنلاین یا دسکتاپی نترسید و شاید در نگاه اول یک چیز غیرعادی به نظر برسد ، اما می توانید با این روش در وقت و کار خود صرفه جویی نمایید و خلاقیت خود را هر چه بیشتر در کارهایتان لحاظ کنید
Balsamiq (from $79) ابزار
Balasmiq یکی از ابزارهای سریع وایرفریم می باشد که برای تولید mockup ها از تجربه کاربر بکار می رود .
Mockups : به طور کلی استفاده از Mockups برای طراحی بصری و عناصر گرافیکی سایت استفاده می شود مثل گرافیک ، تایپوگرافی و چیزهای دیگر که بیشتر فایل های تصاویری را هدف قرار می دهند.
طراحی UI (User Interface یا رابط کاربری ) طرح آنها پذیرای این واقعیت است که آن را یک ابزار برای طوفان فکری و تفکر انتقادی است ، که آن را به طراحی با کاربران در ذهن می آید.
گزینه های طراحی برای وب، تلفن همراه، و قرص همه وجود دارند و آسان به پیاده سازی
UI بیشتر مربوط به مهندسی نرم افزار میشود. به این معنی که User Interface یا رابط کاربری به نحوی باشد که برای کاربر کار با محیط نرم افزار راحت تر باشد. مثلا اینکه دکمه ها و لینکها در محیط سایت مشخص باشند یا اطلاعات مناسب در جای مناسب نمایش داده شوند.
moqups (free) ابزار
moqups یک اپلیکیشن یا برنامه HTML5 است که برای ایجاد وایرفریم ها ، مک آپ ها یا مفاهیم رابط کاربری (wireframes, mockups or UI ) استفاده می شود .
سبک و ویژگی های موجود در این ابزار بسیار شبیه ابزار balsamiq می باشد . همه ی اینها به این بستگی دارد که شما در استفاده با کدام ابزار راحت تر هستید .
Mockflow (from free) ابزار
Mockflow یک ابزار وایر فریم آنلاین می باشد مانند دو ابزار قبلی که در بالا اشاره شده است .
از ویژگی های شسته و رفته این ابزار ، همکاری کالیبره ( collabration ) آن است .
معنی collaboration : عملی که با همکاری شخص دیگری برای تولید یا سخت چیزی انجام می شود
شما می توانید یادداشت هایی بنویسید تا به کاربران دیگر اجازه دهید که تغییرات شما را ببینند . و یا همانند چت با یکدیگر نظرات خود را در باره رابط های کاربری و توابع مختلف به اشتراک بگذارید .
Google Drawing (free) ابزار
یک ابزار ارزشمند که بسیاری از طراحان وب ، آن را در نظر نمی گیرند یا توجهی نمی کنند .
با اینکه این ابزار ، ویژگی هایی که در balsalmiq و moqups گفته شده است ارائه نمی کند .
اما یک سرویس کاملا رایگان است و به شما امکان ذخیره سازی به صورت آنلاین برروی هارد گوگل می دهد. و تنها چیزی که شما برای شروع کار احتیاج دارید یک اکانت جی میل است .
Photoshop/Indesign/Fireworks (from $49.99 per month) ابزارهای
این ابزارها که عموما با آنها آشنایی دارید ، یک از ساده ترین راه حل ها برای یک شروع از ابتدا می باشند.
[h=2]LAYOUT AND BOILERPLATESلایه و فریم ورک boilerplates
یک توضیح مختصر درباره فریم ورک boilerplates
HTML5 boilerplate به شما فریم ورک برای ایجاد صفحات html5 و همچنین المان های مختلف را می دهد.
این سیستم با مرورگرهای مختلف سازگاری کامل دارد, به طور مثال با نسخه های قدیمی تر اینترنت اکسپلورر, که به شما امکان استفاده از تگ های html5 نظیر <article>, <aside> and <header> را می دهد.
سیستم همچنین ابزاری برای بهینه سازی سایت برای موبایل دارد, که به شما امکان ایجاد صفحه سازگار با انواع مرورگرها و ابزارها را به گونه ای ساده می دهد. این ابزار همچنین ابزارهای بسیاری نظیر ابزار .htacess برای استفاده از gzip جهت بهینه سازی سایت و سرعت آن دارد
960 Grid (free) ابزار
960 gird یک معیار در وب حساب می شود .
هر طراح وب خوبی باید اهمیت درک استفاده از یک شبکه اساسی (foundationalgrid ) را برا طرح و لایه خود بداند . چون این امر طراحی وب را خیلی بیشتر برای کاربر نهایی قابل استفاده می کند .
اکشن های مختلفی از فتوشاپ در این ابزار برای دانلود موجود است باعث صرفه جویی در زمان شما برای تراز بندی موضوعات مختلف می شود .
Bootstrap (free) ابزار
اگر شما به دنبال یک تجربه از پیش ساخته شده توسط کاربران خلاق می گردید ، پس Bootstrap بهترین دوست شما خواهد بود
ویژگی های متعددی همراه با این فریم ورک می آیند که کاملا قابل انطباق و جذاب به نظر می رسند .
LessFramework 4 (free) ابزار
Less یک فریم ورک اختصاصی است که برای ساختن وب سایت های کاملا سازگار بکار می رود . و تقریبا برای هر دستگاهی که در بازار است قابل استفاده است .
Skeleton (free) ابزار
Skeleton به سادگی می تواند یک شروع بسیار عالی برای هر وب سایتی می باشد .
با ساختار سبک و ساده ای که دارد ، برای آن دسته از افرادی که با فریم ورک آشنایی ندارند ، بسیار سودمند خواهد بود .
[h=3]
Foundation by Zurb (free) ابزار
ابزار Foundation که بر اساس گفته ی شرکت سازنده پیشرفته ترین فریم ورک رسپانسیو در دنیا می باشد.
با بسیاری از ویژگی های جدید اضافه شده و قالب های بسیار جذاب برای شروع کردن کار خود . و من یکی از طرفداران واقعی آن هستم . همین امروز این ابزار را تست کنید .
Reset CSS (free) ابزار
بدون شک این ابزار تشخیص سازگاری CSS با کلیه مرورگرهای بین المللی که به رسمیت نیز شناخته شده است می تواند برای هر طراح وبی در ارائه طرح خود در هر پلتفرم و یا مرورگری بکار آید .