التخطي إلى المحتوى الرئيسي

نصائح مهمة لكل من يريد البدء بتصميم المواقع


ان عملية تصميم المواقع هي عملية ممتعة حقا فهي دمج بين برمجة الموقع وطرق تفاعله مع المستخدم من جهة وتصميم شكله الخارجي وتنسيق الوان الموقع والصور من جهة اخرى ، لكن السؤال الاهم (كيف ابدأ؟) ربما الوقت مبكرا للإجابة عن هذا السؤال لكن مايهم حقا هو طريقة تخطيطك الاولي للموقع الذي ستقوم بإنشاءه فهذا سيساعدك لانشاء افضل واجهة صديقة-للمستخدم (user-friendly) يمكنك بناءها، وهذا يعد العامل الاول لنجاح موقعك فمهما كنت بارعا في البرمجة سيكون موقعك لاقيمة له ان اهملت تصميم الواجهة الجذابة او لم تصممها بالشكل الامثل. 
من ناحية اخرى لو استطعت اظهار مهاراتك في التصميم وتنسيق الالوان في واجهة الموقع فلن يكون للبرمجة التاثير الكبير بحجم تأثير الواجهة ، على الاقل سيجذب موقعك بعض الزوار!
حتى الان عرفت ان تصميم واجهة جذابة يعد من العوامل الاساسية لنجاح موقعك لكن كيف ستقوم ببناء واجهة جذابة؟ 
تامل الكلمات التالية ( البساطه، التناسق، الثقة) .
البساطة:
لاشك انك قد زرت بعض المواقع التي تبدو كصحيفة مزدحمة! قد تحتاج لقراءة جميع النصوص للحصول على المقالة التي تبحث عنها! هكذا نوع من المواقع غنية بالمعلومات لكنها غير مبسطة اطلاقا، لذا في اغلب الاحيان تخرج من الموقع قبل قراءة اي كلمة!! نعم هذا صحيح ، مايفتقر اليه بعض مصممو المواقع هو التفكير الثنائي اي انت كمصمم مواقع يجب عليك التفكير كمصمم وكمستخدم في ان واحد حتى تصبح لديك نظرة شاملة لموقعك. 
قد تبدو فكرة الموقع المليء بالمعلومات فكرة جيدة لكن ماذا لو استطعت تبسيطها وجعلها اسهل وفي متناول المستخدم؟ ستكون فكرة رائعة حتما! لدي لك بعض النصائح عند تصميم موقع ما وهذه النصائح تفيدك في تبسيط موقعك:
- المقالات او الاخبار جميعها يمكن تقسيمها حسب الاهمية او حسب المسميات التوضيحية (مثلا: فئة مقالات رياضية) لاتحاول وضعها جميعا في صفحة واحده، الصفحات مجانية، يمكنك انشاء صفحات لكل قسم ولعدد لاينتهي .
- لاتقوم بحشر المواضيع جنب الى جنب كأنك تركن سيارتك في مرأب عمومي مجاني! ضع بعض المسافات بين مقالة واخرى او بين الصور والنصوص او بين عنوان الموضوع والموضوع نفسه.

- اجعل المواضيع الاهم في الصفحة الاولى وتابع مايهم المستخدمين وحاول جعل المواضيع الاكثر طلبا الاكثر سهولة للوصول.

- يجب ان تكون عناوين المواضيع دالة على الموضوع نفسه ومختصرة قدر الامكان .

هذه النصائح هي حقا مايتوقع المستخدم رؤيته عن دخوله لموقعك لذا لاتخيب ظنه.

التناسق:
اقصد بالتناسق هو الاستخدام الذكي للالوان وانماط تقسيم الصفحة فهذا يمكن ان يؤثر سلبا او ايجابا على زوار موقعك انت بالطبع لاتريد مستخدم يتصفح موقعك لمرة واحدة ! انت ماتريده هو جذب اكبر عدد من المستخدمين من خلال استخدام الوان وصور جذابة وترتيب المحتوى بطريقة تجعل من الممتع زيارة موقعك مرة اخرى، انا لا امنعك من استخدام اسلوبك الخاص واظهار ابداعاتك الشخصية لكن لدي بعض النصائح لك لتضيف عنصر الجاذبية لصفحاتك:

- القاعدة الاولى العامة (استخدم الوانا متقاربة) ربما هذه القاعدة مبهمة قليلا او ربما تقول حسنا ( الاحمر الفاتح والبرتقالي الفاتح الوان متقاربة) لكن ماذا بعد؟ مثلا لو قررت استخدام الوان القوائم لديك باللون الاخضر الباهت فاستخدم نفس اللون او لون يختلف بالتدرج عنه في الاعمدة الفاصلة مثلا ، او استخدم لون اغمق قليلا في عناوين المواضيع، في حالة التنويع يمكنك استخدام لون قوائم اصفر فاتح مع عناوين ازرق فاتح ايضا .

- في حالة الالوان لاتستخدم الوان كثيرة ولاتستخدم الوان غامقة او غير مريحة للنظر كاللون الاحمر والازرق معا، كما لا انصحك باستخدام لون واحد ، كن معتدلا وميالا نحو الالوان الباهته فهي اكثر جاذبية ولاتؤثر على النص الذي فوقها.

- ان كنت تستخدم جداول فضع قيمة الحدود = 0 ، حدود الجداول ليست محبذة كما تعتقد .

- لا تضع صورة او لون كخلفية لموقعك فان افضل خلفية هي الافتراضية (البيضاء) .

- اجعل شعار موقعك متناسقا مع الوان وتصميم الموقع نفسه بحيث لن يتمكن المستخدمون من تمييزه بل لن يصدقوا انك انشأت شعارك في برنامج مختلف كليا!! 

- افضل لون يمكن وضعه للنص هو الاسود غير الغامق اي اختر لون اسود مع درجة قليلة من الابيض ليعطي لونا فضيا غامقا.

- في حالة الصور استخدم مقاسات صغيرة بالحجم الذي تريده ولا تضع صورة ذات حجم ٤٠٠*٤٠٠ وتقوم بتصغيرها من خلال HTML الى ١٠٠*١٠٠ فهذا يؤدي الى بطئ تحميل الصفحة.

- استخدم صور من نوع png او gif  قدر الامكان فهي انواع صور تكون قليلة الحجم.

اذن حتى الان وضعنا اسسا لتسير عليها عند تصميم موقعك حتى الان وعند التزامك بهذه القواعد ستتمكن من تحسين مستوى موقعك الى مرحلة متقدمة صدقني ستكون منبهرا بما انجزته انت نفسك!

الثقة: 
ليس هناك اكثر مايسيء لموقعك اكثر من عدم ثقتك بما صممته فتراك تعود وتغير الالوان والتصاميم وقد لاتعجبك ايضا فتحاول تمسح بعض الجداول وتغيير مواضع القوائم وقد ينتهي بك المطاف وقد حذفت قوالب موقعك وجلست حائرا.. دعني اخيب ظنك قليلا، لاتتوقع ان تصمم موقعا كاملا من حيث الواجهة ابدا!! في كل موقع صممته انا شخصيا اجد فيه عيوبا هنا وهناك وهذا هو جوهر التطور، دع العيوب تظهر لاتحاول ان تغير شيئا خططت لاجله من قبل ، ليكن هناك النسخة الاولى من تصميمك ولهذا هناك ستكون نسخة ثانية وثالثة ، هذا هو معيار الارتقاء فهو فهم العيوب ومحاولة اصلاحها في نسخة اخرى لاتخجل عندما يكون مستوى تصنيف موقعك منخفضا جدا بالمقارنة مع المواقع الاخرى، فلكل منا بدايته وانت حتما لم ترى بداية اغلب المصممين وها انت تعتقد انهم ولدوا مصممين بارعين!! حتى هذه اللحظة عند رؤيتي النسخة الاولى من مشروع المصادر الحرة فانه رغم بساطته وبدائيته الا انني اكن له كل الاحترام فلولا النسخة الاولى لم تكن هنالك نسخة ثانية والتي اعتبرها قفزة نوعية في تصميم وهيكلية المشروع رغم انني مقتنع كليا ان الاصدار الثاني من المصادر الحرة ليس بالمستوى المطلوب اطلاقا وهذا مايبقيني على المضمار، واتمنى ان يبقيك انت ايضا :)

تحياتي

تعليقات

‏قال تصميم مواقع
موضوع مميز منك فواجهات المستخدم عامل مهم ومؤثر قد يترتب عليه زيادة او قلة معدل زيارات موقعك
‏قال Unknown
من أكثر المواضيع العربيه المميزه التي قراتها تتحدث عن تصميم المواقع وكيف يجب أن يكون

سوف أكتب عنك فى مدونة شركتنا المتخصصة فى تصميم مواقع الإنترنت
‏قال Unknown
مشكور على هذه المعلومات المفيدة فى تصميم مواقع وننتظر المويد من المعلومات التى تقدمها

المشاركات الشائعة من هذه المدونة

الفرق بين unlocked و locked في الهواتف المحمولة

في بعض الاحيان تلاحظ وجود كلمة unlocked بعد اسم المنتج على علبة الهاتف المحمول, او ربما يسألك البائع اذا ماكنت تريد الهاتف لشبكة اتصالات معينة ام حرا... في بعض الهواتف كهاتف iphone يتوافر نوعان منه locked و unlocked حيث الهاتف المقفل locked   يكون متاحا ويعمل على شبكة اتصالات محددة في بلدك تختارها انت بنفسك ويكون سعر الهاتف المقفل بقدر ربع السعر الحقيقي للهاتف الغير مقفل, وهذا النظام هو صفقات توقع بين شركات الهاتف وشركات الاتصالات, ومن مساوء هذه الاجهزه هو حالما تسافر الى بلد اخر سيتوقف الجهاز عن العمل تماما ولا يمكنك تشغيله على بطاقة شريحة SIM اخرى, لذا سيكون الهاتف عديم الفائدة, اما الهواتف الغير مقفلة unlocked فهي هواتف عادية تعمل على اي نوع من شبكات الاتصالات ويكون سعرها باهض جدا مقارنة بالهواتف المقفلة. 

انشاء صفحة تسجيل دخول

مستوى الدرس:  متوسط اللغات المستخدمة:   PHP ,  SQL, HTML  كما أفترض ان لديك معرفة مسبقة بأساسيات لغة SQL والقليل من PHP   . البرامج المستخدمة:  مخدم  WAMP ، برنامج Adobe Dreamweaver CS5 او اي محرر "كود" برمجي . الصفحات التي سوف ننشئها :   Index.html   process.php   welcome.html ان انشاء صفحة تسجيل دخول حقيقية ليست بالصعوبة التي تتصورها فكل الية تسجيل دخول تتشابه بالاساسيات وربما تختلف من ناحية الجرافكس او شدة الاجراءات الوقائية, في النهاية كلها تتألف من ثلاث مراحل (ادخال البيانات, التحقق من وجود البيانات في قاعدة البيانات, التصرف في حال وجودها ام عدمه) لاشيء اخر وكلها في غاية السهولة!! تابع معي: الخطوة الاولى يجب ان ننشىء جدول في قاعدة البيانات يحتوي على جدول مكون من ثلاثة حقول (id, user, pass) وسندخل بعض المعلومات عن اسماء مستخدمين وكلمات السر كما هو موضح في الصورة: لقد ادخل معلومات مستخدم واحد كما هو موضح , والان لننتقل الى الخطوة التالية: الخطوة الثانية انشاء الصفحات الثلاث (صفحة استقبال المعلومات, صفحة معالجة المعلومات والتحقق من وجودها في قاعدة الب

انشاء نموذج الاتصال بنا

مستوى الدرس:  متوسط اللغات المستخدمة:   PHP ,   HTML  كما أفترض ان لديك معرفة مسبقة بأساسيات لغة PHP   . البرامج المستخدمة:  مخدم  WAMP ، برنامج Adobe Dreamweaver CS5 او اي محرر "كود" برمجي . الصفحات التي سوف ننشئها :   contact.php process.php ان من الصفحات الاساسية في كل موقع هي صفحة تمكن الزائرين من الاتصال بصاحب الموقع, او المدونة او الشركة او غيرها.حيث غالبا هذه الصفحات تتكون من نماذج اتصال مثل (نموذج دردشة, نموذج ارسال رسالة) وغيرها , كما تحتوي على معلومات اتصال اخرى. نماذج الاتصال تستخدم صفحات ديناميكية لمعالجة طلب الاتصال فمثلا لو كان نموذج دردشة مع خدمة الزبائن فمن خلال الصفحة الديناميكية يتم التأكد ما ان كان الموظف متواجد ام لا وعلى هذا الاساس يتم تفعيل صفحة برنامج الدردشة والذي غالبا يكون بلغة  JavaScript . لنركز على نموذج الاتصال الشائع والذي من خلاله يمكنك ارسال رسالة تحتوي على اسمك وبريدك الالكتروني ومحتوى الرسالة الى بريد الشركة او الموقع بدون استخدام خدمات البريد التقليدية... فكيف يعمل؟ سنقوم في هذا الدرس بأنشاء صفحة (اتصل بنا) تحتوي على