10

للقضاء على الملل قمت بتصميم واجهة مدونة بسيطة

السلام عليكم

أصبت قليلا بالملل وأردت ان افعل شيئاً حيال ذلك ، ولكني لم أرد تضييع وقتي في شيء لا فائدة منه لذلك قررت ان اقوم بتصميم واجهة مدونة ، ومع انني الى الان لم استفد شيئا من كل تلك التصاميم ( ما عدا التدرب على التكويد وصقل مهارات CSS & HTML لدي ، فقد بدأت منذ شهر تقريبا بتعلم هاتين اللغتين ولم أكن بحاجة للبحث عن تصاميم جاهزة للتدرب عليها ) الا أنني أحب ذلك فعلا ومستعد لقضاء معضم وقتي في تصميم الواجهات .

اعتقد أني تكلمت كثيرا :P ، على العموم ها هو الرابط

http://im89.gulfup.com/tk9C...

سأقوم باذن الله بتكويده حالما يتاح لي ذلك وسأريكم النتيجة اذا كان ذلك يهمكم .

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

لي الملاحظات التالية:

الـslider :

  • الخط أراه غير مناسب، حاول اختيار خط من دون حواف.

  • الضبابية/الشفافية حول الصورة أكثر من اللازم، أيضا، ربما ستكون أفضل من دون ضبابية (أقول ربما لأنه لا يمكنني تجربة ذلك) أو تظهر الضبابية عند مرور المؤشر.

  • أظن أنه يجب إضافة بعض المساحة بين مربعات التنقل (لست جيدا في التسمية) والصور، أحس أن المكان ضيق.

الشريط الجانبي:

  • border-radius:0 أفضل

  • التسمية/العنوان للأداة ستكون أوضح إن كانت أسمك

أداة Popular :

  • بعض المساحة بين الصورة والعنوان

  • تغيير الخط

  • بعض المساحة بين السطر وما أسفله

  • تأطير للصورة

المشاركات:

  • كالعادة تغيير الخط

  • خط سميك للعنوان

  • أزل الظفرين بعد continue reading وأظف بعض المساحة بعدها

  • الوصف اجعله متوازن justify مع إضافة مساحة 1.5 بين الجمل

عمل جميل :)

شكرا عماد على ردك فأنا احب هذا النوع من الردود :D ( بصراحة ذكرتني بردود الاخ نذير )

ومع انني اختلف معك في بعض الامور ولكن سأحاول غدا تطبيق كل ما ذكرته في تعليقك وأضع الصورة هنا باذن الله

لم أصمم منذ 6 أشهر :3 لذلك أتمنى أن تكون النتيجة النهائية، لآراء مصمم لم يصمم منذ نصف سنة، جميلة :D

ها هو التصميم بعد تعديله حسب طلبك ، أكثر شيء اعجبني في التعديل هو جزء الpopular فالمساحة بين السطر وما اسفله جعلت التصميم اجمل واريح للعين.

ولكن الشيء الذي كان فظيعا ولم تكن موفقا به هو " الوصف اجعله متوازن justify مع إضافة مساحة 1.5 بين الجمل " ، فخاصية justify لا تعمل دائما بالشكل المطلوب ، ايضا المساحة بين السطور كانت كبيرة نوعا ما .

وقل لي ما رأيك في السلايدر بعد ازالة الظل من وراء الصور ؟ الا تعتقد ان وجود الظل كان اجمل ؟

هل لديك نسخة أخف من الصورة؟

  • الـ slider جميل.

  • خط العنوان، هل هو ubuntu؟ مازالت هناك مشكلة في العنوان، ويحتاج بعض التنسيق: خط أفضل OpenSans، إجعله الحروف كبيرة Uppercase

  • الوصف : خط Opensans مع تقليص المساحة قليلا.

الخط المستعمل هو open sans

لم أتصور يوما أن خط OpenSans سيكون بهذا السوء... حاول جعل الحروف كبيرة، مع تكبير قليل في الحجم.

اجعلها uppercase ؟ صدقني ذلك سيجعل التصميم يبدو سيئا

تأكد من الاعدادات

لا تستعمل justify للمحتوى، ولكن إذا كنت مجبرا استعمل Hyphenate

لم استعمل justify في تصاميمي من قبل ولا انوي ذلك في المستقبل ، فقط اردت ان ارى كيف يبدو التصميم مع التعديلات التي طلبها عماد.

بالمناسبة أين كنت طيلة اليوم والبارحة ، قل لي ما رأيك في التصميم

لم أملك شيئا لأضيفه

التصميم بشكل عام جيد ولكنه ضيق ولا يوجد الكثير من المساحة للتنفس، مثلا لا يوجد مساحة فارغة بين حواف البطاقة ومحتواها (لكل تدوينة) مما يجعل النص مضغوطا مع الحواف، لذا وسع من الفراغ

ايضا في كل تصاميمي السابقة كنت استعمل خاصية auto hyphenation ولكن اعتقد اني سأتوقف عن ذلك لأني اريد تكويد كل ما اصممه واعتقد ان تلك الخاصية ستكون بلا فائدة .

تلك الخاصية موجودة في CSS

رغم قلة الدعم

لا اصدق عيني ie يدعمها وchrome لا ، هل انا احلم ام ماذا xD

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

ذكرتني بقريب لي جاء عندي البارحة ، يقول لي أنه لا يستعمل الا ie لأنه لا يرتاح الا معه ، فنظرت اليه تلك النظره الحاقدة وطلبت منه ان يتوقف عن استخدامه فهو بفعله ذاك يرتكب جريمة بحق مطوري الويب ولا يدري حجم معاناتهم مع هذا المتصفح xD

في الواقع ie مظلوم بنسخه القديمة فحسب، عدى هذا الاصدار 10 يدعم معظم الأشياء التي يمكن ان تستخدمها ولا تحتاج لتعديل شيء، إصدار 9 تستطيع العمل معه بطريقة كلاسيكية بشكل عادي مع flexbox ايضا، ستواجه بعض المشاكل مع 8 فحسب ولكنه اصدار منسي لذلك لا مشكلة فيه

ie9 يدعم الflexbox ؟؟

أمم بعد التأكد مجددا يبدو أني كنت مخطأ، IE9 لا يدعم flexbox

IE10 يدعم flexbox الاصدار الثاني

IE11 يدعم الاصدار الثالث (الاكثر حداثة)

هههههه فاجأتني عندما قلت انه يدعمه ، فلو كان كذلك لرأينا جميع المطورين والمواقع يستخدمونها ولا داعي لوجع الرأس مع float و display

justify للوصف فقط، حيث لا تبدو لي متناسقة إذا كانت هناك فراغات في سطر وزوائد في السطر الذي أسفله. ربما مسألة ذوق؟ (للتو كنت أقوم بكتابة ورقة بحثية في اللغويات، وجعلت كامل النص justify ... )

justify لا تعمل بشكل جيد في بعض الاحيان وتعمل بشكل رائع في احيان اخرى

وعليكم السلام ورحمة الله وبركاته

أممم، التصميم جميل، لكن يبدو لي أن هناك العديد من الأشياء المستهلكة والاعتيادية في التصميم، ولا يعني هذا أن التصميم سيء، لكنه بحاجة إلى القليل من الإبداع والتغيير.

  • بدايةً من الشريط العلوي، برأيي -المتواضع- من المفترض أن يكون عصرة قد ولى، بإمكانك الاستغناء عنه تماماً ببعض الطريق الأخرى.

  • أيقونات الشبكات الاجتماعية، لقد وضعتها في ثلاثة أماكن مختلفة مع أن وضيفتها واحده، ما الفائدة من وضعها في الشريط العلوي، وفي أسفل الصفحة، بالإضافة إلى العمود الجانبي. يكفي أن تضعها في مكان واحد فقط.

  • أيضاً، نفس الكلام ينطبق على الاشتراك بالبريد.

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

بعدها عليك الاستغناء عن أسم الكاتب لأن طول الشريط سيقل، وأيضاً، أجعل "اقرأ المزيد" على شكل زر وليس نص فقط، أو على الأقل اجعله بلون آخر غير الأبيض فهذا أفضل.

  • فيما يخص POPULAR ، بإمكانك الاستغناء عنها واستبدالها بأحدث التعليقات فهي أكثر أهمية.

  • بخصوص أسفل الموقع، "اختيار المحررين" لا تقدم فائدة كبيرة للزائر، فمن المفترض أن تكون المواضيع المتحركة في الأعلى هي أحدث ما أختاره المحررين.

  • و "مشاركات عشوائية" مجرد ملئ فراغ لا أكثر.

  • النبذة عن الموقع، لا تناسب أن تكون في هذا المكان فالموقع عبارة عن مدونة، ووضعها في صفحة مستقلة أفضل بكثير.

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

  • حسناً، إذا لاحظت فإنني أحاول أن أفرغ المساحة التي في أسفل الموقع لكي تستخدمها بشكل أفضل، بإمكانك الآن أن تضع فيها بعض العناصر (مثل: عن الموقع، اتصل بنا، الرخصة، وما إلى ذلك ...).

  • المواضيع المتحركة، غير متناسق مع الموقع، فالموقع يبدو مسطحاً، لكن عند النظر إليه تلاحظ أنها تمتلك العديد من الطبقات، أزل الطبقات البيضاء في الأسفل وأكتفي بواحدة فقط، وأزل التغبيش المحيط بالصور لكي لا تبدو وكأنها تطفو على الصفحة البيضاء. هذا سيجعلها مسطحه ومتناسقة أكثر مع التصميم.

  • بإمكانك أيضاً إخفاء أسهم التنقل في المواضيع المتحركة وجعلها تظهر فقط عند مرور الفأرة عليها.

  • المساحات بحاجة لبعض التعديل، كما تلاحظ المساحة بين المواضيع تبدو ضيقة، حاول زيادتها قليلاً لتصبح على الأقل بنفس حجم مساحة التباعد بين عناصر العود الجانبي.

أتمنى أن تكون نصائح مفيدة، وليس بالضرورة أن تكون صحيحة فهذا مجرد رأي شخصي يحتمل الخطأ قبل الصواب.

تحياتي

مشكور اخي على هكذا رد فأنا احب هذا النوع من الردود كما قلت مسبقا ، ولكني سأقوم بالتعقيب على نقاطك :

بدايةً من الشريط العلوي، برأيي -المتواضع- من المفترض أن يكون عصرة قد ولى ...

عصره قد ولى ؟! مممم لا ادري عن اي عصر تتحدث ;)

ايقونات الشبكات الاجتماعية، لقد وضعتها في ثلاثة أماكن مختلفة مع أن وضيفتها واحده ...

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

أيضاً، نفس الكلام ينطبق على الاشتراك بالبريد.

نفس التعليق في الاعلى

الشريط الأحمر في المواضيع يستهلك مساحة أكبر من اللازم...

جعلته كبيرا لتكون عملية تكويده اسهل وايضا ليكون تجاوبه مع التصميم المتجاوب افضل وحتى لا تكون المساحة بين " تابع القراءة " ومعلومات المدونة ضيقة ، ولكن مع ذلك سأجرب هذا الاقتراح وأرى ما الافضل بالنسبة للتصميم ككل.

فيما يخص POPULAR ، بإمكانك الاستغناء عنها واستبدالها بأحدث التعليقات فهي أكثر أهمية.

بصراحة لا اعتقد ان احدث التعليقات اهم ولكن لا بأس فلكل منا وجهة نظره

بخصوص أسفل الموقع، "اختيار المحررين" لا تقدم فائدة كبيرة للزائر...

حسن بالنسبة لهذه النقطة فأنا اتفق معك نوعا ما ( بصراحة اكره الفوتر واريد دائما ان انهيه بأسرع وقت ممكن :P )

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

المواضيع المتحركة، غير متناسق مع الموقع ...

جربت كلى الامرين ( بدون ظل خلف الصورة ومع ظل ) ولكن الظل كان افضل واعطى السلايدر مظهراً اجمل

بإمكانك أيضاً إخفاء أسهم التنقل في المواضيع المتحركة وجعلها تظهر فقط عند مرور الفأرة عليها.

نعم لا بأس في ذلك

المساحات بحاجة لبعض التعديل...

نعم قد تكون بعض المساحة الاضافية جيدة ولكن لا ادري فأنا اراها جيدة

شكرا جزيلا مرة أخرى واتمنى ان ارى المزيد من هذه الردود في التصاميم القادمة باذن الله

بالمناسبة ، هل انت مصمم ؟

عصره قد ولى ؟! مممم لا ادري عن اي عصر تتحدث ;)

أقصد بأن التوجه الجديد لتصاميم الويب التصميم المسطح ولم نعد نشاهد هذا الشريط بهذه الطريقة في تلك لتصاميم

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

نعم هي مهمة، لذا يكفي أن تضعها في مكان واحد فقط (مثلا في العمود الجانبي)

بالمناسبة ، هل انت مصمم ؟

نعم :)

وعليكم السلام ورحمة الله وبركاته

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

حاول تقليل حجم الصورة باستخدام أحد المواقع المتخصصة في ذلك.

هذا أحدها:

لسبب ما أو لأخر كرهت تصميمات Header الإعتيادية و مكررة مثل هذه و أعتذر لو ألمتك بهذا الكلام :(

صورة لتوضيح:

لهذا أحاول عمل تصاميم مختلفة ﻟ Header في أعمالي،

ولكن عمل جميل :)

قمت بتعديل بسيط على الheader فاللون كان داكن جدا ولم انتبه لذلك

سأقوم باذن الله بتكويده حالما يتاح لي ذلك وسأريكم النتيجة اذا كان ذلك يهمكم .

بالتأكيد يهمني

نعم يهمني

متى ستقوم بتكويد القالب :] ؟؟

انتهيت منه تقريبا ولكني واجهة مشكلة وابحث لها عن حل

اطلعني عليها .. لربما أستطيع مساعدتك