منتدى روضة القرآن - نصائح لتصميم مواقع بسيطة وجميلة

نصائح لتصميم مواقع بسيطة وجميلة للغاية

في السنوات القليلة الماضية, تأثر عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]الالكتروني بالعديد من الإتجاهات المختلفة التي تتغير باستمرار, ولكن هناك العديد من الامور التي تؤثرعلى التصميم والتي لا يمكن ان تزول مع الوقت, واحدة من هذه الاتجاهات هي البساطة Minimalism ,وذلك لان هذا المفهوم لطالما كان له شعبية كبيرة في مختلف الوسائط على مر العصور.
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
نسمع الكثير من الشكاوي من مستخدمي الانترنت ان بعض المواقع معقدة جدا و يصعب التعامل معها مما يحد من تفاعل المستخدم في الموقع. البساطة في عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] الالكترونية تعمل على تعزيز تجربة المستخدم للموقع, بالإضافة الى تحسين شكل الموقع العام.في عالم البساطة Minimalism ، يعتبر مبدأ “الأقل ، أفضل” من أكثر المبادئ شهرة, خاصة عند تطبيقه على عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]الاكتروني في القرن الواحد والعشرون, لذلك سوف نقوم بشرح 6 نصائح مذهلة تمكنك من تطبيق نظرية البساطة في عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] الاكترونية.

1. استخدام التصميم المسطح (Flat Design)
التصميم المسطح (Flat Design) ، هو اتجاه جديد في عالم تصميم الويب, يستوحي أفكاره من المحاكاة الفيزيائية للأجسام سكيمورفيزم skeuomorphism, كأننا نصمم واجهة كتابة ملاحظات بشكل مشابه تماماً لدفتر الملاحظات الحقيقي. و يمتازالتصميم المسطح ببساطته و الابتعاد عن الامور التي كانت تعد جماليه مسبقا مثل تأثيرات الثلاثيه الابعاد ,استخدام الظلال والتدرجات اللونيه فهو يعتمد على لونين او 3 بالاكثر وتكون متناسقه ومتناغمة مع بعضها البعض. بدأت كبرى الشركات بالتوجه إلى أسلوب التصاميم المسطحة مثل مايكروسوفت ,جوجل وآبل, فقد طرحت شركة آبل تصميم واجهة مستخدم فلات في التحديث الأخير ISO 7 , وقامت مايكروسوفت بتطبيقه على واجهة ويندوز 8 ميترو الجديدة.
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

يمكنك أن ترى روعة التصميم المسطح عند دخولك الى موقع مايكروسوفت الرسمي, سوف تُلاحظ أن الايقونات والرسومات التوضيحية لها مظهر ثنائي الابعاد اي بدون ظلال ومؤثرات حتى تبدوا مسطحة تماما, وأيضا تم التركيز على التيبوغرافي لما لها من اهمية بالغة في ابراز جمال واناقة التصميم المسطح.

2. استخدام وتوزيع المساحات البيضاء في صفحات موقعك
المساحات البيضاء (المعروفة أيضاً باسم المساحات السلبية) هي تلك المساحات التى لاتشغل حيزها بعنصر كنص او صورة او اى عنصر مرئى وتوزع هذه المساحات بشكل منسق وصحيح يجعل التصميم قابلا ًللقراءة بشكل أسرع ومريح للعين, و هي من المعايير الأساسية التي تجعل تصميمك يتسم بالبساطة والأناقة.
هناك واحد من المواقع الكبرى التي تستخدم المساحات البيضاء و لكننا نغفل عن ملاحظته لاننا تقوم باستخدامه باستمرار, هذا الموقع هو محرك بحث جوجل الشهير والذي لا يحتوي إلا على مستطيل بحث ومجموعة روابط تحته ومساحة بيضاء كبيرة, بما ان الهدف من الموقع هو البحث فإن هذه المساحات البيضاء تجعل تركيز المستخدم موجها فقط على شريط البحث.المساحة البيضاء في التصميم هي العمود الفقري لبساطة التصميم Minimalism وهي إحدى الأدوات المتنوعة و الفعالة التي يمكن أن تضيف ميزة خاصة لتصميمك, فعند استخدامها بشكل جيد يمكن لتلك المساحات أن تساعد على تحقيق التوازن في التصميم، وتلغي الفوضى فيه، وتساعده على التنفس!
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

3. ابتعد عما هو غير ضروري
فكر فيما هو مهم للمحتوى الذي تقدمه أو للوظيفة الخاصة بموقعك ، ثم ركز فقط على هذه الأشياء و حاول أن تلغي أي شيء آخر لا يساهم بشكل مباشر في هذا المحتوى أو هذه الوظيفة.
تذكر أن هذه العناصر التي ستبقيها ستؤثر على قابلية القراءة و قابلية الإستخدام لموقعك ، لذلك دعها فقط اذا كانت ضرورية. حتى تتأكد من ان الاشخاص الذين يزورون موقعك يقومون بإجراء معين حددته مثل عملية شراء عبر الإنترنت أو مكالمة هاتفية أو تعبئة فورم معين, عليك ان تقلل الخيارات المتاحة امامهم حتى يكون تركيزهم مسلط على الخدمة التي تقدمها, فلذلك تقليل الخيارات و الابتعاد عما هو غير ضروري يعتبر مثال اخر على البساطة في التصميم Minimalism .
واحد من المواقع الالكترونية التي تأخد بنصيحة تقليل الخيارات بشكل رائع هوموقعGengoوالذي يقدم خدمات ترجمة محترفة. اذا نظرت الى الصورة في الاسفل يمكنك ان ترى landing pagالخاص به, انظر كيف ان عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]البسيط و الابتعاد عن وضع خيارات عديدة يجعل تركيز المستخدم مسلطا فقط على الخدمة الذي يقدمها الموقع و هي كتابة او تحميل نص حتى يتم ترجمته. بهذه الطريقة فإن موقع Gengoيقوم بتحويل مستخدمي الموقع الى زبائن يقومون بطلب الخدمة مما يزيد من عائدات الموقع.
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

4. استخدام الخطوط الكبيرة
اذا كنت تريد أن تقدر حقا مفهوم البساطة Minimalism في عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]الالكترونية, عليك ان تُلقي نظرة على موقع الخاص بـ Brian Danaher , وهو مخرج فني, رسام ومصمم. كما ترى فإن الموقع يعتمد بشكل أساسي على أمرين: خطوط عريضة كبيرة والتي تساعدك على سهولة قراءتها و تنسيق الصفحة الذي يعتمد على عمود وحد (single-column layout) , يمكن ان يعتبر بعض الاشخاص ان تصميم هذا الموقع يتميز بالبساطة الى حد مبالغ فيه, لكنه لا يزال يحقق هدفين في غاية الأهمية وهما:
1. بما ان تنسيق الصفحة يعتمد على عمود واحد فقط, فإن Brian قادرا على توجيه تركيز المستخديم نحو الهدف الذي حدده للموقع, من يكون Brian Danaher ,وكيف يمكن للاشخاص التواصل معه.
2. نجح Brian في استخدام التباين في الوان الخطوط والخلفية مما أضفى على الموقع طابعا خاصا و رائعا.

عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

5-. سهولة التصفح
يقوم البعض بغض النظر عن قائمة التصفح Navigation Menu عند تصميمهم لموقعهم الالكتروني, ولكنه يمكن ان يكون له تأثير كبير في اضفاء لمسة من البساطة على موقعك الالكتروني, فإن قائمة التصفحة المندمجة باسلوب جميل مع خلفية الموقع لها اهمية كبيرة في جعل الموقع يتسم بالبساطة Minimalism.
اذا نظرت الى الموقع الالكتروني الخاص بالمصور والمصممCristian Ordonez, فإنه بامكانك ان ترى بساطة قائمة التصفح المستخدمة بالموقع وكيف أنها لا تمتد عبر عرض الصفحة الرئيسية كاملة ولكنها مصممة بالزاوية اليمنى للموقع. بالإضافة إلى انها مُصممة بحيث لا يوجد قائمات فرعية حتى لا تكون هناك طبقات مختلفة او اضافية للتصفح. واذا امعنت النظر, سوف ترى ان الوان القائمة مندمجة ببراعة مع الوان الخلفية.

6. استخدم الالوان للفت النظر
يمكنك ان تقوم باضافة بعض الالوان في بعض المناطق المحددة في موقعك مما يجعل الموقع يتسم بالبساطة Minimalism بالإضافة الي انه يصبح من السهل على المستخدم ان يركز على الاشياء المهمة بأي صفحة من صفحات الموقع. من خلال اضافة بعض الالوان هنا وهناك في موقعك, سوف تقوم في لفت انظار المستخدمين الى امور محددة ذات اهمية كبيرة.واحد من المواقع الالكترونية التي تجسد هذا الاستخدام الذكي للألوان, هو موقع 960 Grid System, والذي يعمل على تنظيم عملية تطوير المواقع الالكترونية. سوف تلاحظ على الفور استخدام اللون الأصفر على روابط view demo, download, وايضا سوف يجذب انتباهك اللون الأزرق في شعار تويتر على الزاوية اليسار للموقع, والذي ازا ضغطت عليه سوف يأخذك مباشرة إلى صفحة توتير الخاصة بالمصمم والمالك للموقع.اذا قمت باتباع هذه النصائح فإنك سوف تطبق مفهوم البساطة Minimalism بشكل رائعفي بعض الاحيان, عندما تقوم بذكر كلمة البساطة Minimalism لبعض المصممين فلن يعجبهم الأمر وذلك لأنهم يعتقدون بشكل خاطئ أن الموقع الالكتروني البالغ البساطة سوف يكون غير جذاب. كما يتبين من الأمثلة التي ذكرناها, فإن تفكيرهم بعيد كل البعد عن الحقيقة.اذا قمت بتطبيق جميع القواعد والنصائح بشكل جيد, فإنك سوف تكون قد طبقت مفهوم البساطة بحذافيرها, والتي سوف تساعد على زيادة عائدات الموقع ما اذا قمت بتقليل الخيارات امام المستخدم حتى يتسنى له ان يركز انتباهه على الخدمة التي تعرضها. بشكل عام, فإن تصميمك البسيط للموقع سوف يجعله منظما, أنيقاو نظيفا وبالتالي يُصبح تصفح المستحدم اسهل. وهذا اكبر سبب يجعلك تستخدم هذا التوجه الجديد في تصميم مواقعك.
هذا المقال منقول من توب لاين لتقديم افضل معلومات التقنية من اجلكم

عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]