في المدرسة، إذا نظرت إلى ورقة زميلك وأردت أن تنقل ما كتب من معلومات إلى ورقتك يسمى هذا الفعل غشاً، وإذا أمسكك المراقب الامتحان متلبساً بجرمك فإنك تعاقب بالحرمان من النجاح في الامتحان، وربما يتم فصلك في بعض الحالات، وربما يتظاهر المراقب بأنه لم يلاحظ غشك خصوصاً إن كنت من أصحاب العضلات المفتولة أو الأجسام الممتلئة! لكن في الحياة، لن يعاقبك أحد إن تأملت وتعلمت من الآخرين وقلدتهم في البداية.
في سلسلة من 5 حلقات فقط، سننظر إلى بعض المواقع، ونرى ما هي مميزاتها ونحاول أن نتعلم منها.
الاسم: Element Computer
الموقع: http://www.elementcomputer.com/store/
التخصص: مؤسسة تبيع منتجات الحاسوب
التصميم
يستخدم الموقع ثلاثة ألوان فقط، الأسود والأبيض والرمادي المائل إلى الأزرق، أما نظام تصفح الموقع فهو بسيط وسهل، الإيقونات ذات تصميم جميل وأنيق ومتميزة وتستخدم نفس الألوان التي يستخدمها الموقع، الأسود والأبيض، شخصياً عندما رأيتها أعجبتني لأنني لم أرى مثل هذا التصميم كثيراً أو ربما لم أرها من قبل، بينما هناك مواقع كثيرة تستخدم إيقونات ورسومات تستخدم في العديد من المواقع الأخرى، وهذا التقليد يقلل من شأن أي موقع بالنسبة لي.
عودة إلى نظام تصفح الموقع، في البداية ننظر إلى العمود الأيسر الذي يحوي إيقونات المنتجات، كل ما على الزائر هو النظر فقط ولا يحتاج إلى تفكير طويل لكي يفهم أن هذه هي المنتجات التي يقدمها الموقع، وإلى الأسفل منها تجد محرك البحث، ثم بعض المحتويات مثل "No Windows Policy" وروابط لبعض أقسام الموقع، وهنا أرى أن هذه الروابط كان يجب أن توضع في مكان أوضح من هذا، خصوصاً "Shipping & Returns" و "Contact us" لأن الزبون يحتاج إلى أن يعرف سياسات شحن المنتجات ويحتاج إلى الاتصال بأصحاب الموقع، وهذه خدمات ومعلومات مهمة بالنسبة له، لذلك يجب أن توضع في مكان أوضح، أما باقي الروابط فربما لا يهتم بها الزائر كثيراً.
في الأعلى هناك عدة روابط، Shopping Cart و Log In، عربة التسوق في أي موقع تجاري يجب دائماً أن تكون في هذا المكان، في الأعلى وفي مكان غير مزدحم بحيث تكون بارزة للزائر، ثم تأتي روابط أخرى مثل Home و My Account، بعد العمود الأيسر والمساحة العلوية نأتي للمساحة الرئيسية والتي تضم المحتويات الرئيسية، لا يوجد شيء فيها يستحق التعليق إلا لون الخط الرمادي والذي دائماً أنصح ألا يستخدم، لا بد أن يكون الخط واضحاً لذلك أنصح باستخدام اللون الأسود، كما أن اللون الأحمر المستخدم لبعض الكلمات أرى أنه مؤذي للعين، ويجعل تركيز الزائر مشتتاً بين قراءة النص أو التركيز على الكلمات الحمراء.
التصميم يستخدم شريط علوي وعمودين، وشخصياً تعجبني المواقع التي تستخدم هذا الهيكل للتصميم، لأن التصاميم التي تستخدم ثلاثة أعمدة أو أكثر تشعرني بالتشتت والضياع، ويبقى أن ألخص أهم النقاط في التصميم:
1) استخدام ثلاثة ألوان فقط.
2) إستخدام رسومات أنيقة ومميزة.
3) الروابط المهمة للزائر يجب أن تكون في مكان واضح أمامه.
4) لون المحتويات الرئيسية يجب أن يكون دائماً واضح ليسهل قراءة المحتويات.
5) توفر محرك بحث مهم لمواقع المؤسسات.
6) عرب التسوق في المواقع التجارية يجب أن تكون في مكان واضح وعادة في أعلى الموقع.
المحتويات
بما أن الموقع تجاري فربما لن نستطيع التعليق كثيراً على محتوياته، المؤسسة تبيع الحواسيب وما يتعلق بها من منتجات، لديها بعض المنتجات المتميزة، وهذا أمر مهم لأي مؤسسة، يجب أن تقدم شيئاً يميزها عن باقي المؤسسات، وأيضاً هذه الشركة تتبع سياسة "No Windows" وتشرح الأسباب لهذه السياسة، وتتيح لزبائنها الاختيار، ويبدو أنها تقدم نسخة مجانية من نظام Lycoris Desktop/LX (وهو بالمناسبة لينكس)، هذه السياسة تقلل من سعر الحاسوب بدرجة كبيرة، وهذه ميزة ثالثة، لنلخص نقاط تميز هذه الشركة:
1) منتجات متميزة.
2) سياسة "No Windows" وإعطاء حق الاختيار للزبون لكي يختار نظام التشغيل المناسب له.
3) السعر المنخفض لبعض منتجاتها.
التقنيات
يستخدم الموقع HTML 4.01 وكذلك CSS، والتصميم تم إنشاءه باستخدام الجداول، لم ألاحظ أي استخدام للجافاسكربت، ولغة البرمجة في الموقع هي PHP البرنامج المستخدم لإدارة الموقع هو osCommerce، حجم الصفحة الرئيسية 24 كيلوبايت وحجم الرسومات وملف css يبلغ 100 كيلوبايت والمجموع 124 كيلوبايت وهذا كثير، باستخدام CSS للتصميم يمكن تخفيض حجم الصفحة الرئيسية إلى النصف.
مواقع:
http://www.lycoris.com/
http://www.oscommerce.com/
هكذا انتهينا من تشريح أول موقع لنا، هل تريدون إكمال السلسلة أم ترون أنها غير مفيدة؟
