عالم التصميم عالم جميل زاخر بالألوان ، و لأن مشكلة جميع المصممين تكمن في صعوبة اختيار الأدوات المناسبة التي تخلق إحساسًا فنيًا راقيًا ، و تطبع التصميم بطابع الإبداع ،

1 -أدوات تنسيق الألوان :

" اِن المصمم الحقيقي هو ذلك الشخص الذي يمتلك القدرة على وضع اللون المناسب في المكان المناسب .. "

ومن أجل الوصول الى ذلك يحتاج أي مصمم اِلى مجموعة من الأدوات التي تساعده على التعامل مع الألوان ، وهذه قائمة بأهم الأدوات في هذا المجال :

Adobe Kuler

يتيح لك اختيار الألوان المتناسقة مع بعضها البعض ، بل أنه يتيح لك تحميل صورة من جهازك أو من موقع ( Flickr ) لاقتباس الألوان منها ، كما يمكن اِضافته الى برنامج الفوتشوب.

الذهاب الى الموقع : /kuler.adobe.com

Pictaculous

يساعدك على معرفة المخطط اللوني الكامل لأي صورة و يمكنك بعد ذلك من نسخ الأكواد الخاصة بكل لون ، كما يعطيك مخططات لونية مقاربة للمخطط اللوني المستخرج عبر موقع ( KULER )

الذهاب للموقع : www.pictaculous.com

ColorZilla

ColorZilla هي أضافة لمتصفحي الفاير فوكس وكروم تساعد المصمم على اِلتقاط وانتقاء الألوان من أي موقع يريد ..

الذهاب الى موقع الاضافة : www.colorzilla.com

Dribbble

Dribbble هي شبكة اجتماعية للمبدعين . التسجيل فيها يمنحك حق الإجابة على سؤال: كيف أبدأ تصميمي ومن أين ؟ وذلك برفع لقطات لتصاميمك ومشاركة أصحاب الخبرة آراءهم حولها.

أما إن لم تملك القدرة الإبداعية على تصميم الإعلانات، صفحات الويب، واجهات البرامج وحتى الرسم، فإن الموقع يمكنك من تسجيل الدخول باستخدام حساب تويتر لمتابعة من تريد، واستلهام الأفكار من أعمال الآخرين. مع ميزة البحث عن صورة أو تصميم حسب اللون الذي تريد .

رابط الموقع:

http://dribbble.com

2 - أدوات الـ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.com

Foundation 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

سنتحدث في مقال آخر عن أداوت أخرى

اي استفسارات مرحبا بها