أحدث الأخبار
Loading...

لتصميم واجهة المستخدم

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

1. اعرف مستخدمينك

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

2. انتبه إلي الأنماط

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


3. البقاء متناسق

“بقدر ما صحت توقعات المستخدمين ، بقدر ما سوف يشعروا بالسيطرة علي النظام وبقدر ما سوف يرغبوا به.” _ جاكوب نيلسون
المسخدمون يحتاجوا للتناسق. هم بحاجة لمعرفة أنه بمجرد تعلم فعل شيئ، سيكونوا قادرين علي فعله مرة أخري. اللغة ، التخطيط، والتصميم ليست سوي عدد قليل من عناصر الواجهة التي تحتاج للتناسق. واجهة متناسقة تمكن المستخدمين من أن يكون لديهم فهم أكبر لكيف تعمل الأشياء، وزيادة كفاءتها .

4. استخدام التسلسل الهرمي البصري

“المصممين يمكنهم إنشاء الطبيعة من الفوضي. يمكنهم بوضوح تواصل الأفكار من خلال التنزين والتلاعب بالكلمات والصور.”_جيفري فين, فن وعلم تصميم الويب
تصميم واجهتك الخاصة بطريقة اسمع للمستخدم للتركيز علي ما هو أهم. الحجم واللون ووضع كل عنصر من عناصر العمل معا، مما ينشئ مسار واضح لفهم واجهتك. التسلسل الهرمي الواضح سيقلل التعقيد في الواجهة بشكل كبير جدا.(حتي عندما تكون الإجراءات معقدة بحد ذاتها).

5. تقديم ملاحظات

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

6. كن متسامح

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

7. تمكين مستخدمك

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

8. التحدث بلغتهم

 “اذا كنت تعتقد أن كل بكسل، كل أيقونة، كل نوع خط يهم، فانك تحتاج أيضا إلي التصديق بأن كل حرف مهم.”
كل الواجهات تتطلب مستوي معين من الكتابة. الإبقاء علي التخاطب، ليس الاحساس. تقديم تسمييات واضحة وموجزة عن الإجراءات وإبقاء رسائلك بسيطة. سيقدر مستخدمينك ذلك.

9. الحفاظ علي البساطة

أفضل تصاميم واجهة المستخدم غير مرئية.فهي لا تحتوي علي عناصر غير ضرورية, بدلا من ذلك، العناصر الضرورية تكون موجزة وذات معني. وكلما كنت تفكر باضافة مميزات جديدة أو عناصر لواجهتك، اسأل نفسك، “هل يحتاج المستخدم هذا؟” أو لماذا يريد المستخدم هذه الصورة المتحركة؟ هل تضيف عناصر لأنك تحب اضافتها أو تريدها؟ لا تدع غرور واجهة مستخدمك يسرق العرض.

10. واصل المضي قدما

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





المصدر

أكمل القراءة Samer Najada | 6:07 ص |

موقع imcreator الرائع

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

موقع imcreator الرائع 

اسئلة على الموقع :
ما هذا الموقع ؟
هو موقع يقدم الكثير من تصميم واخبار جديدة ويهتم بي هو يقدم لك كثير من صور يمكن استفادة منها لتضعها في تدوينة
بماذا يهتم ؟

يهتم بي :

1- 
قوالب 
2-الناس
3-العمل
4-ايقونات 
5- تكنولوجيا 
___________________________
 والكثير سوف تكتشفه 

افضل تصاميم الموقع : 
___________________________________________________________________2
_______________________________________________________________________
wpid-Featured_Picture.jpg
___________________________________________________________________

أكمل القراءة Samer Najada | 6:07 ص |

شعارات منتشرة رجاء (تجنبهم!)

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

99gen_arc  99gen_towers 99gen_swooshyman 99gen_swoosh 99gen_sphere 99gen_satisf 99gen_initials 99gen_houses 99gen_gear 99gen_ethno 99gen_drop 99gen_dots 99gen_circlepeople 99gen_circlein 99gen_circle 99gen_car
هذه مجموعة صغيرة مما يمكنك أن تجده في بعض المجتمعات الإبداعية، لإعطائك فكرة ، 90% منهم تباع بالفعل:
شعارات القوس
generic_logotypes1
generic_logotypes2

اسم الشركة ضمن دائرة ملونة
generic_logotypes3
استخدام خط “Satisfaction”
generic_logotypes4
اختصار اسم الشركة في مربعات
generic_logotypes5

الرسوم البيانية والأبراج وخطوط النمو
generic_logotypes10

أسطح المباني
generic_logotypes7

الشعارات التالية أقل انتشارا، ربما أكثر جودة قليلا، ولكنها مستهلكة مثل الآخرين:
أشكال مثل هذا المثال
generic_logotypes6
سيارات
generic_logotypes8
أشجار جذورها أشخاص أو يدين
generic_logotypes9a
generic_logotypes9b
دائرة قوس قزح
generic_logotypes9c
generic_logotypes11
generic_logotypes12a
فقاعات ونقاط موصولة
generic_logotypes13
تروس
generic_logotypes14
generic_logotypes_mix



أكمل القراءة Samer Najada | 6:07 ص |

أفضل 10 اتجاهات حديثة في تصميم الويب لاتباعها

كمصمم أو مطور يب ، ربما تزور آلاف  المواقع كل شهر لتتعرف علي التصاميم الجيدة وما الجديد وما يمكن انجازه بالتكنولوجيات الجديدة.
صفحة المعايير الأساسية ل W3C تكبر باستمرار، وتتزايد وتزدهر: يرجع ذلك بسبب حقيقة أن المجتمع يشارك في تطوير الويب.
والأن، ساقوم بعرض أحدث الاتجاهات الجديدة في تصميم مواقع الويب لاتباعها.

1. واجهة مستخدم فلات (Flat UI)

Flat-UI
واجهة المستخدم الفلات هي مزيج من البساطة ، ولكن بمفهوم تصميم تفاعلي، والذي يستخدم ألوان ناعمة ويجلب السعادة والحياة لموقع وتطبيق الويب. طرحت شركة آبل تصميم واجهة مستخدم فلات في التحديث الأخير ISO 7 ، مايكروسوفت قامت بتطوير واجهة المستخدم مترو لفترة طويلة نسبيا.
أعتقد أن التصميم الفلات سيستمر بالنمو بشكل أكبر، وسينجح في أن يكون من أفضل الاتجاهات في تصميم الويب في السنوات القليلة المقبلة.
مقالات مرتبطة ما هو التصميم المسطح flat design ومتى بدأ …؟!  , كيف يمكنك عمل تصميم مسطح ….؟

2. تصميم الويب المتجاوب (Responsive Web Desig)
responsive-web-design

التصميم المتحاوب هو مفهوم منتشر منذ سنوات حتي الأن ، ويكبر هذا المفهوم يوما بعد يوم حيث لا يوجد بديل آخر للتوافق مع جهاز الهاتف النقال. والهاتف المحمول والذكي يثبتوا وجودهم يوميا بشكل كبير ومعظم الناس الأن يتصفحوا مواقع الويب من أجهزتهم المحمولة  بدلا من حاسبهم ، وأصبح من الضروري جدا أن يتبع موقع الويب اتجاه التصميم المتجاوب.
مقالات مرتبطة  [انفوجرافيك]تصميم الويب المتجاوب/responsive بشكل مبسط  –   30 اضافة جي كويري لإنشاء مواقع متجاوبة – responsive

3. البساطة (Minimalism)

minimalist-design
شاهدنا التصميم الفلات، حيث يمكننا التفكير في البساطة كتصميم بسيط، فقط دون كل الألوان المبهرجة. تصميم الويب البسيط نشأ بالفعل ، وأحد الاسباب الرئيسية لذلك هو التركيز الضخم علي المحتوي، ولا شيئ آخر غير المحتوي.
مباشرة إلي نقطة تصميم مواقع الويب في المستقبل، الناس لن يقضوا أكثر من دقيقة للعثور علي شيئ مخفي.

4. محتوى الفيديو (Video Content)

video-background
الأن وسائل الإعلام التفاعلية غنية بالمحتوي مثل الفيديوهات وأصبج من السهل الوصول إليها وانتاجها رخيص . حتي الأن المستخدمين أكثر ميولا لرؤية المعلومات من خلال الفيديوهات بدلا من النصوص. كما أنه فعال جدا عندما يتعلق الأمر بتقديم الأعمال التجارية (أو نفسك) إلي العالم.
هذا ينطبق أيضا علي فيديوهات الخلفية ، القي نظرة علي هذه الصفحة Spotify .

 5. تيبوغرافي العلامة التجارية (Branded Typography)

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

6. تمرير الصفحة الواحدة(One-Page Scrolling)

one-page-scrolling
في هذا الاتجاه يمكنك تقديم كل محتوي موقعك في صفحة واحدة، بالتمرير العمودي الطويل. وهو اسلوب آخر لجعل المستخدم متشوق لمعرفة محتواك وجعله أكثر تفاعلا. مثال

7. التصفح الثابت (Fixed Navigation)

fixed-navigation
الناف بار الثابت مفيد لمواقع الويب، والذي يمكن أن يحتوي علي البحث ، الأيقونات الاجتماعية ، خيار عربة التسوق. فهو يجعل التجربة أكثر سهولة. لذلك الكثير من مواقع الويب الأن تستخدم هذا الاتجاه، وسوف نشهد تقدم كبير في هذا المجال في المستقبل القريب.
من الصعب شرح هذا الاتجاه في صورة لذلك القي نظرة علي هذه الصفحة لرؤية المثال كاملا.الناف بار الثابت ظهر مؤخرا كثيرا وبسرعة، وهناك الكثير من الاستخدامات الإبداعية له.

8. الشريط الجانبي المدمج (Compact Sidebars)

ولت أيام اظهار الشريط الجانبي في كل صفحة. الأن، نحن قادورن علي التركيز أكثر علي المحتوي الكامل بعرض الصفحات (full-width ) .
لن يكون ممكننا دون الجافا سكربت أو الجي كويري – ولكن رغم ذلك، تنفيذه بسيط ويعطيك مساحة أكبر للعمل معه.

9. البارالكس (Parallax)

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

10. رسوم SVG متحركة (SVG Animation)

SVG-Animation
الأيقونات المتجهة SVG متواجدة منذ فترة ، ولكن الأن حققت تقدم كبير وملحوظ والمزيد من مصممي الويب المحترفين بدأوا بالاهتمام بها . و SVG سهلة التحجيم ، وحجمها صغير.
مقالات مرتبطة ادوات ومصادر لإنشاء SVG باحترافيه وسهوله  ،  مميزات وعيوب الأيقونات الخطية Font Icons والمتجهة SVG







أكمل القراءة Samer Najada | 6:04 ص |
يتم التشغيل بواسطة Blogger.