أساسيات تصميم جرافيك المواقع

29 04 2007
يحاول دائمآ كل من يصمم جرافيك للمواقع أن يجعل موقعه أجمل ما يكون و لكنه يفاجأ فى نهاية التصميم انه هناك شىء ما ناقص أو انه هناك خطأ ماسألقى الضوء فى هذة المقالة على أهم الأساسيات التى يغفل هنها معظم المصممين … بصفتى هاو قديم للرسم اليدوى وجدت انه هناك تشابه كبير بين رسم المواقع و الرسم اليدوى و تنطبق عليهما نفس القواعد تقريبآلنناقش أولآ خطوات التصميم ثم نلقى الضوء على بعض الأخطاء
خطوات تصميم المواقع
– أسكتش يدوى :
قبل ان (تدب صباعك فى الماوس ) يجب عليك أولآ ان تأخذ ربع ساعة تتخيل فيها شكل الموقع الألوان و الشعار و خطوط الكتابة و التعامل مع الصفحات و المناطق المخصصة للإعلانات .. أكاد أسمعك تقول ان كل هذا كلام فارغ و اننى سوف أصممه (على طول ) على الكمبيوتر ، و لكن أنا قولت من الأول ان معظم المصممين يغفلون هذة النقاط فلا تقاطعنى ( والنبى ) بعد مافكرت وقررت الشكل بتاعك أعمل سكتش يدوى لتخيلك حتى لا تفقد تخيلك هذا مع عمل ملاحظات بالألوان و المناطق المفتوحة
2-مراجعة التصميم مع صاحب الموقع :
بعد رسمك للموقع و تصميمك له على الكمبيوتر تفاجأ ان صاحب الموقع أو العميل لايعجبه التصميم و أنه لايريد هذا اللون أو أن هذا الجزء غير مطلوب لذلك يجب دائمآ مراجعة التصميم و يستحسن ألا يكون تصميم واحد الذى تعرضه حاول دائمآ ان تتخيل أكثر من تصميم أو تحضر بعض التصميمات القديمة التى رفضها عميل آخر فقد يعجب بها العميل الحالى
3-أختيار ألوان الموقع :
يجب أن تكون ألوان موقعك من درجات متقاربة أو ألوان تليق على بعضها مثل الوردى و البنفسجى أو البرتقالى و الأصفر أو الأزرق و الأصفر أو الأخضر و السماوى , و أحيانآ يلجأ مصمميى المواقع لحيلة معروفة و هى أختيار لكل الموقع لون بدرجاته و هى أسهل طريقة ,بعد أخذك لقرار الألون قم بعمل لوحة ألوان جديدة توجد بها جميع الألوان الى تحتاجها و طبعآ لاتخلو من الأبيض و الأسود و عند التصميم تجاهل أى لوحة ألوان أخرى4
– التصميم الفعلى :
بعد كل هذة الأعدادات التى رأيتها كأننا ندخل حربآ …هجومقم بإستعراض عضلاتك فى الرسم بالبرنامج الذى يريحك مع مراعاة أن تصمم كل مايخص الموقع فى صورة واحدة تمثل الموقع بأكمله كما تخيلته و بعدها قم بتجزأة الموقع كما تريد و لا تنسى ان الموقع يجب ان يحتوى على شعار,الأبواب الخاصة بالموقع , المحتويات,أعلانات,التذييل قم بإضافة صور خارجية لإستغلالها فى الموقع و حاول أن تتركها كما هى لاتقم بتغيير الألوان بالطريقة التى يحبها الجميع hue saturation لأنها بألوانها المتعددة تعطى أنباع جيد جدآ كأنك رأيت صورة أبيض و أسود بها جزء ملون (فى حالة أستخدام لون بدرجاته )أحيانآ يلجأ المصممين لحيلة جيدة و هى خروج الشعار عن مقدمة الصفحة ليأخد جزء من الجسم الأساسى و كأنه يخترق الصفحة و هى تعطى أنطباع بالجموح فى المواقع الشبابية و الترفيهية فلا مانع من إستخدامها
هذة هى الخطوات التى يتبعها (البنى آدم ) لتصميم جرافيك موقع , بعد ان عرفت ما هى الخطوات يجب عليك ان تتعرف على الأخطاء التى تجعل التصميم على غير مايرامالأخطاء الغير متوقعة و الخطوط العريضة
1- لأى تصميم أيآ كان يجب توافر منطقة مفتوحة يمكن تمديدها لتسع أى محتوى و هى مثل منطقة الأخبار بموقه ياهو أو الجزء التلى لمكان البحث فى موقع إم إس إن أو المكان الذى يظهر فيه النص الآنعدم توافر هذة المنطقة يؤدى لتحديد حجم المعلومات التى يتم وضعها فى الموقع 2
– لأى موقع شعار …. إليك كلمة خلاصة : ( الصفحة التى ليس لها شعار ليست موقع بل ( لعب عيال ) ) يحاول دائما معظم المصممين العرب ان يكون الشعار الخاص بموقعه شعار معقد و متعدد الألوان و التجسيمات و الكائنات و لكنه خطآ شائع , يجب ان يكون شعار موقعك بسيط و لا يحتوى على ألوان كثيرة و حاول ان تستخدم درجة من الالوان لم تستخدم من قبل و ليس بالضرورة ان تختار لون تحبه انت يجب ان يكون الشعار من البساطة بحيث يمكن للشخص العادى رسمه باليد : تخيل مثلآ ان أحد زوار موقعك حاول الإستدلال على الموقع لصاحبه سيقول التلى فى الحالتين :
*إذا كان الشعار معقد : – شعار الموقع اللى بقولك عليه عامل شبه سماعة الدكتور داخلة فى حاجة شبه القلب و وراهم ثعبان براسين
*إذا كان الشعار بسيط : – شعار الموقع اللى بقولك عليه فراشة مكونة من 4 ألوانطبعآ فى الحالة الأولى ستقف على رأسك و لا تعرف انه شعار احد المواقع الطبية أما فى الحالة الثانية فقد عرفت طبعأ أنه شعار إم إس إن لذلك لاحظ ان معظم المواقع الناجحة شعاراتها بسيطة جدآ : شركة فودافون : دائرة بداخلها (,)شركة ياهو : كلمة ياهو! شركة ميكروسوفت : كلمة ميكروسوفت شعار جنوم : قدم , إنترنت إكسبلورر : حرف E
3- يجب ان يتواجد مكان موحد لإقسام الموقع و لا تشتت الزائر بين لينكان الصفحة
4- يجب ان تكون أجزار الصفحة مترابطة و ليس كل جزء كأنه طائر على الصفحة
5- حاول ان تكون معظم الصفحات متشابهة ماعدا الجزء القابل للتمدد يتغير حسب محتوى الصفحة كما ترى فى المدونة

الإجراءات

Information

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s




%d مدونون معجبون بهذه: