37

تجربة: محاولة إعادة تصميم بعض عناصر واجهة مستقل

السلام عليكم

الموضوع التالي هو عبارة عن concept redesign شبيه بالأمور التي تراها في behance عادة

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


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

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

تم عمل التصميم بنسخة (عربية وانجليزية) لماذا تم عمل النسخة الانجليزية؟ لأني أحب تحسين عملي في كلتا الجهيتن

الآن بالنسبة للتصميم

http://im55.gulfup.com/BH9p... http://im55.gulfup.com/fb5S...

تم اختيار اسلوب البطاقات لتنظيم أفضل وصول أكثر للخيارات.

العنوان يكون بارزا وبلون الشعار

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

زر اكتشف يقودك هو أيضا لصفحة المشروع لتتعرف عليه أكثر

تم عرض الوسوم بشكل ألطف وأجمل ليتم أخذ فكرة أسرع عن متطلبات المشروع

بالنسبة للجهة السفلية، هنا تتمركز قوة التصميم. تم فصل الاوامر في جهة والمعلومات في جهة

تم عرض ميزانية المشروع بلون مغاير واضح وخط كبير داخل صندوق 50×100 لتسهل على العين رؤيته لكونه واحدا من أهم المقومات في قبول مشروع أو رفضه

مدة المشروع، أيضا تلعب دورا مهما في المشاريع

عدد العروض المقدمة، والضغط عليها يقودك لقسم العروض في المشروع

تأتي الأوامر على الجهة الأخرى

عند تمرير المؤشر فوق كل زر تظهر tooltip تخبرك بمهمته

http://im55.gulfup.com/GlV2... http://im55.gulfup.com/XyYM...

الزر الأول يستخدم للإضافة للمفضلة

الزر الثاني يستخدم لمشاركة المشروع عبر تويتر، فيسبوك، لينكدإن

الزر الثالث يستخدم لإضافة عرض للمشروع، الضغط عليه سيقودك لقسم إضافة عرض داخل صفحة المشروع،

في حال كنت أضفت عرضا من قبل، فستظهر إشارة X لحذف عرضك (في حال قدم مستقل هذه الخاصية)

في حال كانت العروض مغلقة، سبتم إعلامك بذلك

هذه هو شكل المشاريع في الرئيسية، مشروعين لكل صف بفراغ 30 بكسل بينهم

http://im55.gulfup.com/6Cn6... http://im55.gulfup.com/YFXI...

وكان هذا كل شيء، شكرا لقرائتكم.

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

قد أقوم بتجارب أخرى مستقبلا إن حصلت هذه التجربة على تفاعل جيد

هذه الملفات الخاصة بالعمل (PNG + PSD) لأن أراد الإطلاع أو التعديل عليها

http://goo.gl/74GL3R

تم استخدام أيقونات feather المجانية

http://colebemis.com/feather

في النسخة الانجليزية، تم استخدام خط roboto المجاني

في النسخة العربية، تم استخدام خط Neo sans arabic بالوزن المعتدل للعنوان، تستطيعون شرائه من linotype

تم استخدام خط DIN Next arabic بالوزن المعتدل للتحكمات (مثل زر استكشف، وtooltip وعدد العروض ومدة المشروع) تستطيعون شرائه من linotype

تم استخدام خط roboto في بقية الأمور (ميزانية المشروع، الوسوم)

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

التعليقات

أعجبني التصميم و فكرة بطاقات ولكن لم يعجبني مسافة 30px بين البطاقات تبدو مبالغ بها أعتقد أن 15px ستكون أفضل :)

يمكن الزيادة في حجم البطاقات دوما لتناسب المحتوى

أضن أن التصميم ينقصه header و footer ثم يمكنك بيعه كقالب متعدد الإستعمالات

ملاحظة: رمز $ أيمن الرقم في كلتا النسختين العربية والإنجليزية, إستخدم التنسيق العربي للأرقام مع كلمة دولاراً في النسخة العربية أو الرقم بالرمز على يساره بالتنسيق الإنجليزي.

انظر الي هذه الصورة :

الاسهم والصور ذات الوجه المتجه يمينا او يسارة خطيرة جدا وقد تغيير مسار الزائر وتجعله متضايقا

السهم المتوجه الي الخارج سيشتت النظر

اعلم ان الزوار ينظرون الي اتجاه رأس السهم وليس زيله لذا حول السهم ووجه نحو النص او قم باذالته

اذا اردت استخدام هذا السهم بهذا الاتجاه قم بتحويل زر اكتشف الي الاجانب الايمن

هلاّ وضحت أكثر؟

السهم المستخدم يعن أن الزائر سيغادر هذه الصفحة الحالية إلى صفحة أخرى، أو أنه سيستمر في شيء ما آخر وهو بقية شرح العمل

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

ولما السهم ؟ يمكن ان يكون زر بلون مميز بدون سهم !!

الزوار يربطون الازرار بـالتوجيه وفي الغالب توحي الازرار بــــ :

توجيه النظر - توجيه الصفحة

توجيه النظر :

اي ستجعل الزوار ينظرون الي المساحة البيضاء الفارغة باتجاه السهم (المنطقة المشارة باللون الازرق بالصورة علي الرابط اعلاه) وستشتت انتباههم

توجه الصفحة:

الزر في التصميم اعلاه يوحي بالرجوع للصفحة السابقة بالنسبة للمتصفحات الانجليزية ltr و بالتقدم للمتصفحات ذات اللغة العربية rtl (انظر الي الصورة علي الرابط اعلاه)

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

لما لا تفتح تطبيق انستغرام لديك لتري مالذي رسم علي زر الرجوع ؟

جميل شكرا لك، ماذا تنصح إذا؟ أفكر أن حذف السهم يبدو أفضل خيار

الـ ثلاثة نقاط كما قلت جيدة في حالة ان كان الموقع موقع مقالات اما هنا فلا داعي لزر مشاهدة المزيد نهائيا

فليجعل العنوان قابل للضغط فقط , يكفي !!

من الجيد اانه استخدم الازرق للعنوان , اللون الازرق يكفي ليخبر الزائر ان هذا رابط خصوصا اذا كان اللون المشع الوحيد

امر ايجابي : ان الموقع يتعامل مع طبقة من المبرمجين والمصممين فهذا يعني انهم ذو ثغافة عالية باويب و لن يتكلف المصمم كثيرا لانهم سيفهمون العناصر كيفما وضعت

انت هو المصمم !!

لم انتبه لكاتب الموضوع , اسف

لا داعي للاعتذار إطلاقا، لقد افدتني حقا

عمل رائع و لكن ماهي نسخة الفتوشوب التي تستعملها فلم تعمل معي ملفات الpsd

استعمل نسخة Creative Cloud 2014

لا تقلق ساعيد حفظ الملفات لتدعم نسخ اقدم من الفوتوشوب

أستعمل نسخة cs6 و لقد عرفت المشكل فهو ليس في الملفات بل في حاسوبي لا أدري حدث خطأ لم يعد أي ملف psd يعمل و آسف على الإزعاج

مجهول
  • حذف بواسطة المستخدم

جيد لكن الا ترى ان التصميم مستوحى وبشكل واضح من Treehouse؟

لا، لا أرى هذا

تصفحت موقع Treehouse ولم أجد التشابه الواضح، هل تستطيع إيضاحه؟