عالم التصميم عالم جميل زاخر بالألوان ، و لأن مشكلة جميع المصممين تكمن في صعوبة اختيار الأدوات المناسبة التي تخلق إحساسًا فنيًا راقيًا ، و تطبع التصميم بطابع الإبداع ،
1 -أدوات تنسيق الألوان :
" اِن المصمم الحقيقي هو ذلك الشخص الذي يمتلك القدرة على وضع اللون المناسب في المكان المناسب .. "
ومن أجل الوصول الى ذلك يحتاج أي مصمم اِلى مجموعة من الأدوات التي تساعده على التعامل مع الألوان ، وهذه قائمة بأهم الأدوات في هذا المجال :
Adobe Kuler
يتيح لك اختيار الألوان المتناسقة مع بعضها البعض ، بل أنه يتيح لك تحميل صورة من جهازك أو من موقع ( Flickr ) لاقتباس الألوان منها ، كما يمكن اِضافته الى برنامج الفوتشوب.
الذهاب الى الموقع : /kuler.adobe.com
Pictaculous
يساعدك على معرفة المخطط اللوني الكامل لأي صورة و يمكنك بعد ذلك من نسخ الأكواد الخاصة بكل لون ، كما يعطيك مخططات لونية مقاربة للمخطط اللوني المستخرج عبر موقع ( KULER )
الذهاب للموقع : www.pictaculous.com
ColorZilla
ColorZilla هي أضافة لمتصفحي الفاير فوكس وكروم تساعد المصمم على اِلتقاط وانتقاء الألوان من أي موقع يريد ..
الذهاب الى موقع الاضافة : www.colorzilla.com
Dribbble
Dribbble هي شبكة اجتماعية للمبدعين . التسجيل فيها يمنحك حق الإجابة على سؤال: كيف أبدأ تصميمي ومن أين ؟ وذلك برفع لقطات لتصاميمك ومشاركة أصحاب الخبرة آراءهم حولها.
أما إن لم تملك القدرة الإبداعية على تصميم الإعلانات، صفحات الويب، واجهات البرامج وحتى الرسم، فإن الموقع يمكنك من تسجيل الدخول باستخدام حساب تويتر لمتابعة من تريد، واستلهام الأفكار من أعمال الآخرين. مع ميزة البحث عن صورة أو تصميم حسب اللون الذي تريد .
رابط الموقع:
http://dribbble.com2 - أدوات الـTypography
في العصور السحيقة عندما كان إنترنت إكسبلورر المتصفح المهيمن على الويب، كان الجميع مضطر بالالتزام بخطوط المشهورة أو كما تسمى خطوط الويب الآمنة Web Safe Fonts لضمان ظهور الموقع بنفس الشكل لدى جميع المستخدمين.
لكن مع تطور الويب والتخلص بشكل كبير من بؤرة الشر المسمى إنترنت إكسبلورر، أصبح استخدام خاصية @font-face شائعاً هذه الأيام. ولمن لا يعرف تلك الخاصية هي إحدى خصائص CSS التي تسمح بتضمين خطوط الويب في المواقع بحيث تستطيع استخدام خطوط في موقعك حتى إذا لم تكن موجودة لدى من يشاهد الموقع.
Google Webfonts
خدمة خطوط الويب من جوجل هي حزمة هائلة من الخطوط توفرها الشركة مجاناً لأصحاب المواقع وتستطيع تثبيت أي خط تشتهي منها في موقعك بدلاً من خطوط الازمنة الحجرية .
رابط الموقع: google.com/webfonts
Font Squirrel
اِذاكنت تبحث عن خطوط لاثينية مجانية وفاخرة وعالية الجودة لتعطي تصاميمك لمسة من الاحترافية ..
فستجد ضالتك في Font Squirrel
رابط الموقع: www.fontsquirrel.com
Typecast
Typecast يوفر لك مجموعة من الأدوات لتحرير خطوط الويب والتعديل عليها وتثبيتها على موقعك .. ويحتوي أكثر من 23000 خط !
رابط الموقع: typecast.com
5 - أداوات الـ Mockup و Wireframing
الموك اب ببساطه او الويرفريم هو عبارة عن رسم نموذج تخيلي لتوزيعة ومكونات ومحتويات صفحة الويب ليقوم المصمم بعد ذلك بجعلها صفحة ويب حقيقية بنفس طريقة التوزيع والمحتويات .
ولقد لاحظت للأسف الكثير من الاخوة المصممين إن لم يكن السواد الأعظم منهم يقومون بسكب الألوان وتنسيق الموقع اثناء الشروع في التصميم ، وهذا في حد ذاته خطأ كبير يؤدي الى الفشل غالبا .
Balsamiq
" الحياة قصيرة .. لا تضيعها في التطبيقات الفاشلة ! "
هذا شعار مؤسسي موقع وتطبيق Balsamiq .. لعمل موك آب لمشاريعك و تجربة توافقها مع الأجهزة المختلفة ، أيضا يساعد على العصف الذهني للوصول لانتاجية أعلى وتخطيط احترافي.
رابط الموقع: www.balsamiq.com
moqups
moqups هو بديل مجاني للموقع أعلاه ، يتميز بواجهة Html5 بسيطة ومريحة مع اِمكانية الرسم عليها.
رابط الموقع: moqups.com
Mockflow
Mockflow خدمة سحابية لوايرفريمات سريعة مع نظام ملاحظات ممتاز والمزيد من الميزات الاجتماعية كالدردشة والتعليقات وغيرها ..
الذهاب للموقع : www.mockflow.com
6 - اِطارات العمل والنماذج :
" اطارات العمل والمنصات علمتنا الكسل ، لكن بالمقابل وفرت علينا الوقت والجهد من أجل ابداع أكثر وانتاجية أكبر "
وهذه أكثر اِطارات العمل شيوعا عند مجتمع المطورين :
960 Grid
The 960 خدمة مجانية توفر للمصمم موسوعة من المصادر التالية :
CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository
أحصل على نسختك مجاناً :
http://960.gs http://960.gs/
Bootstrap
الـ Bootsrap هو اِطار عمل يعتمد أساسا على أكواد Html ,Css و Javascript قام بتطويره فريق عمل موقع تويتر وكان الهدف منه هو مساعدة االمبرمجين في تطوير تطوير تطبيقات الويب حتى صار الإعتماد عليه من طرف المصمم شبه كلي ، ولا يكاد يخلو تصميم الآن من الـ bootsrap.
LessFramework 4
Less هو اِطار عمل صغير لعمل grid layouts متوافقة مع جميع الأجهزات ودقـّات العرض المختلفة .
رابط الموقع : lessframework.com
Skeleton
Skeleton اِطار عمل ممتاز للمبتدئين ومنصة جيدة لاِطلاق تصاميم متعددة الواجهات خفيفة و سهلة التحميل ،
الموقع : /www.getskeleton.com
http://www.getskeleton.comFoundation by Zurb
Foundation by Zurb اِطار عمل لتقنية css الرائع فيه أنه يدعم العربية (أتجاة اللغة) ، هو كذلك مشروع مجاني تحت رخصة MIT .
الذهاب للموقع : oundation.zurb.com
Reset CSS
أداة مهمة لضبط والتأكد من توافقية css الخاص بك مع مختلف متصفحات الانترنت ومعرفة أخطاء العرض .
الذهاب للموقع :
http://meyerweb.com/eric/to...7 - تطبيقات مفيدة وأكشنز ومصادر ..
" المصادرة الجيدة بمثابة الصفقة الرابحة .. لا تتوقف عن جمع الأشياء الرائعة -حتى اِن لم تكن بحاجة اليها- ..! "
GuideGuide
GuideGuide اِضافة عملية للفوتشوب فائدتها تقسيم مساحة التصميم وترتيبها الى وحدات grids
موقع الاضافة :
iOS Photoshop Actions & Workflows
bjango.com موقع رائع لتحميل أكشنات الفوتشوب الخاصة بمصممي تطبيقات الآيفون ولألعاب .
الذهاب للموقع : bjango.com
الذهاب الى bjango.com
By People
معرض لمجموعة من الأزرار والقوائم وغيرها من الأدوات الجذابة جاهزة للتحميل مجانا .
الذهاب للموقع :
اذهب الى
/
Temboo
Temboo يترك للمطور مساحة للتركيز على ما يجعل برامجه متميزة ، تنظيم الأكسس الى مجموعة من APIs وقواعد البيانات عبر السحابة وأشياء أخرى اكتشفها بنفسك ! خدمة مجانية غايتها توفير الوقت واِعطائك مساحة أوسع للابداع .
الذهاب للموقع :www.temboo.com
LittleIpsum
هل أنت مصمم ويب على نظام الـMac وتعمل على مواقع أجنبية، حمل هذه الخدمة ولن تندم ! أعدك أنك ستستعملها يوميا !
الذهاب للموقع : littleipsum.com
الذهاب الى littleipsum
awesome-fontstacks
fontstack أداة خفيفة لدمج خطوط الويب واستكشاف مظهرها ، والحصول على كود css جاهز لخطك .
الذهاب للموقع : awesome-fontstacks.com
الذهاب الى awesome-fontstacks.com
سنتحدث في مقال آخر عن أداوت أخرى
اي استفسارات مرحبا بها
