أحمد إسماعيل

جمعت لك مجموعة ضخمة من المواقع ذات تصميم مميز وسهلة الاستخدام التي سوف تلهمك، وتتكون هذه المجموعة من 50 موقع. اختيرت هذه التصاميم من زوايا مختلفة، من مواقع مشهورة مثل موقع National Geographic، أو Marni، أو The Winter Olympic Games، حتى أفكار المواقع التي لم تنشأ بعد أو مشاريع تصميم الويب الصغيرة التي وجدناها على موقع Behance. يجب على جميع مصممي الويب أن يُنشئوا مواقعهم واضعين بعين الاعتبار سهولة الاستخدام. ستفيدك هذه الميزة بإبقاء زوارك أكثر تفاعلًا، مما يجعلهم يمكثون وقتًا أطول في تصفح موقعك. ولكن في الحقيقة، ما الذي يجعل موقعك أكثر سهولة في الاستخدام؟ تصميمٌ متجاوب تمامًا، اجعل محتواك واضحًا، على سبيل المثال: القائمة، والأزرار المهمة، وكن حذرًا أيضًا من الخطوط التي تستخدمها والألوان.. إلخ. يجب عليك أيضًا أن تُبقي بعين الاعتبار وضع بيانات التواصل الخاصة بك، ووسائل التواصل الاجتماعي، استخدم قائمة ثابتة تظهر في جميع الأوقات. إضافةً لذلك، يجب عليك أن تفكر في قبول الطلبات عبر الإنترنت أو تضمين شريط بحث، كل هذا للتسهيل على الزائر عند تصفحه لموقعك. هذه المواقع السهلة الاستخدام أكثر من كونها جميلة فهي لديها مميزات أساسية ومفيدة للتصميم الكلي. تصفح هذه التصاميم الخاصة بمواقع سهلة الاستخدام وقم بدراستها. سوف تستفيد منها بالطبع وسوف تلهمك لتصنع تصاميم ويب فعالة وجميلة. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن National Geographic هذا الموقع رائع جدًا ولديه تركيب واضح، وقائمة ظاهرة، وخطوط جميلة، وصفحة رئيسية منزلقة فريدة من نوعها. Uncrate 2.0 فكرة الموقع الإلكتروني الرائعة هذه لديها تصميم متجاوب تمامًا، مما يشمل شريط بحث والمحتوى منظم بشكل جيد وظاهر تمامًا. كل هذه الميزات تُسهّل الاستخدام وتُظهر الموقع بشكل جيد لجميع الزائرين. Madewell ها هي فكرة موقع إلكتروني جميلة ولديها تخطيط سهل الاستخدام. احصل على إلهامك من هذا التصميم المذهل وانظر أي الميّزات الرائعة يمكنك اكتشافها. Sikora Ibizan Hounds هذا الموقع لديه تخطيط واضح بمعلومات مختصرة وصور عالية الجودة. يظهر كل من الشعار ومعلومات التواصل بسهولة. Aquawa on Behance هذا تصميم متجاوب تمامًا وسوف يقوم بمناسبة محتواه تلقائيًا بشكل مثالي مع أي حجم شاشة. WAVERIDER تصميم هذا الموقع هو أيضًا تصميمٌ بسيط ويشمل مميزات سهلة الاستخدام. حيث يتضمن قائمة ظاهرة وشعار، وتخطيط سريع الاستجابة 100%، وعناوين كبيرة بمعلومات دقيقة …إلخ. Kara فكرة التصميم هذه رائعة جدًا وتمتلك تصميمًا ملفتًا للانتباه والذي سوف يُبقي مستخدميك متفاعلين بكل تأكيد. Drew Watts هذا الموقع لديه رأس وذيل صفحة ثابتين واللذان يشملان كل المعلومات الضرورية للتصفح خلال موقعك. STP – Simple, Clean, Masonry يشتمل هذا التصميم على ميزة رائعة والتي تقوم بسحب رأس الصفحة والقائمة والشعار كلما قمت بالتمرير للأعلى. ويمتلك أيضًا تصميمًا متكامل ومنظم بشكل جيد مع صور عالية الجودة وجميلة. Nike: Tights of the Moment وهو موقع مليء بالألوان الجميلة ويحتوي على مميزات وتصميم يشد الانتباه. شريط التمرير في الصفحة الرئيسية فريدٌ من نوعه ولديه بعض حركات الانتقال الرائعة. Hireinfluence ترى هنا موقعًا ممتازًا ويمتلك تصميمًا جذابًا ومميزات رائعة. The French Cuisse يعد هذا التصميم بسيطًا بشبكة تخطيط منظمة جدًا، وسريع الاستجابة كليًا ويشمل مميزات رائعة تجعل منه سهلًا للاستخدام. The new Heroes & Pioneers فكرة موقع مذهلة بإمكانك استخدامها كمصدر إلهام. تفقد جميع مزاياه وحدد أي الأشياء الجديدة يمكنك تعلمها منه. Ok Kid – Grundlos Extended تصميم هذا الموقع هو تصميم دنيوي برسومات خفيّة. تعد التفاصيل البسيطة والتصميم الإبداعي من الأسباب التي تعطيه مظهرًا فريدًا من نوعه. Onlab – Font for the HBC تجدون هنا تصميمًا مذهلًا على شكل صفحة واحدة وهو ملفت للانتباه وسوف يشد انتباهك بكل تأكيد. يستخدم هذا التصميم قائمةً ثابتة تساعدك على التصفح خلال الموقع بسهولة. The Woman بإمكانك استخدام هذا التصميم الجميل كمصدر إلهام في مشاريعك المستقبلية. يعتبر التخطيط الخاص بالموقع سريع الاستجابة بمميزات أنيقة وتصميم مذهل. SocioDesign هذا الموقع مصمم بخبرة كبيرة وهو وكالة تخطيط مقرها في لندن. وهو موقع ممتاز بتخطيط منظم جيدًا. Tatte- Amanda Jane Jones احصل على إلهامك من فكرة التصميم المذهلة هذه واستخدم ما تتعلمه في مشاريعك المستقبلية. القائمة الرئيسية، الأزرار والمظهر الدنيوي مناسبين لهذا النوع من المواقع. Scotland Can Make It! Designed by Graphical House هذا تصميم موقع إلكتروني جميل بتخطيط سهل الاستخدام. وهو سريع الاستجابة تمامًا، ولديه أسلوب تصميم بسيط وأسلوب طباعة تم اختياره بشكل موفق. Ouur Collection هذا الموقع يملك تخطيطًا سريع الاستجابة والذي سوف يجعل محتواه يتناسب تمامًا مع أي حجم شاشة. يستخدم الموقع صورًا كبيرة لزيادة التأثير المرئي للتصميم. And And Web Design يستخدم هذا التصميم أفضل الصيحات في عالم تصميم الويب، والرسومات، والقوائم الإبداعية، والصور ذات الجودة العالية، والمزيد. Shotfolio PSD Theme ها هو نمط موقع إلكتروني مصمم بشكل جيد وبإمكانك تعديله بسرعة لجعله يتوافق مع متطلباتك. هذا التصميم سهل الاستخدام ويشمل ميّزات قوية. Marni يعتبر Marni موقعًا سهل الاستخدام فيه جميع المهام الضرورية للمتاجر على الإنترنت. أضاف المصمم العديد من الميزات الرائعة والتي سوف تسهل عليك التصفح في الموقع. Frú Frú يمكن قول الكثير عن هذا الموقع الجميل. يمتلك تصميمًا سريع الاستجابة، محتوى منظم جيدًا، وميّزات رائعة أخرى، يمتلك هذا الموقع تخطيطًا سهل الاستخدام ويجعل المستخدمين متفاعلين. World of Swiss استخدم هذا التصميم الجميل كمصدر إلهام لمشاريعك المستقبلية. يشتمل هذا التخطيط على تصميم متفاعل، صور عالية الجودة، والمزيد. Twiggy Bar هذا موقع جميل فيه محتوى منظم بشكل جيد بتصميم إبداعي سوف يضمن لك أن يلاحظه المستخدمون. تخطيط الموقع يشبه المجلة. Lala Berlin تصميم موقع مذهل ويحتوي أيضًا على متجر إلكتروني. اضغط على الرابط وألقِ نظرة على التصميم الكامل والميّزات. Bureau of Visual Affairs يمتلك هذا الموقع تصميم قائمة إبداعي، تأثيرات زَيْغ (تحريك الصور الثابتة)، رسومات أنيقة وتصميم مذهل. هذه الميّزات تجعل الموقع سهل الاستخدام وسهل الوصول لجميع الزوار. Johann Lucchini موقع رائع على شكل معرض بتصميم سهل الاستخدام. استعراض الأعمال يتم عرضه في شبكة منظمة تمكنك من رؤية الأعمال بشكل أفضل. Everlane بإمكانك استخدام هذا التصميم الجميل كمصدر إلهام لمشاريعك المستقبلية. هذا التخطيط لديه قائمة ثابتة تسهل عليك التصفح في الموقع. THISISPAPER أيضًا تصميم موقع رائع ولديه العديد من المزايا سهلة الاستخدام. هذه المزايا تشمل محتوى منظم، وتصميم أنيق، ومعلومات واضحة، وتصميم سريع الاستجابة، والمزيد. Brave People يمتلك هذا الموقع تصميمًا احترافيًا بميّزات قوية مثل تأثير الزّيْغ، ورسومات، وتخطيط كامل الشاشة ...إلخ. GC Watches في هذا الموقع، سوف تكتشف صورًا عالية الجودة، قائمة ملصقة، سريع الاستجابة بشكل كامل، جميعها مستخدمة بإتقان عالي واهتمام بالتفاصيل. هذا تصميم أنيق بشكل عام وفاخر. Escape Committee يستغل هذا الموقع المساحة البيضاء بشكل ممتاز، كون الصور محط الاهتمام في الموقع. تخطيطه سريع الاستجابة تمامًا ويمكنك من رؤية المحتوى بشكل ممتاز على أي شاشة عرض. Nixon هذا الموقع الإلكتروني الأنيق يحتوي على متجر تم تصميمه للساعات والاكسسوارات المميزة. خذ الإلهام من الطريقة التي يركز فيها هذا المتجر الإلكتروني على منتجاته بينما يمتلك تصميم UX رائعًا. Doug Aitken: The Source موقع إلكتروني جميل آخر بتصميم إبداعي. يحتوي التخطيط على مقابلات متعددة ومعروضة بطريقة فريدة من نوعها في رأس الصفحة. Crop the Block وهو موقع رائع بشاشة كاملة وله تصميم سهل الاستخدام. وسوف تجد أيضًا العديد من مقاطع الفيديو التي تجذب الانتباه والخطوط الجميلة. Castscarf يوجد العديد من الصور عالية الجودة والتي سوف تُذهل محبي الحيوانات في هذا المتجر الإلكتروني. وبالإضافة لتصميمه الرائع، فإن هذا الموقع أيضًا لديه تخطيط سريع الاستجابة بالكامل ويتوافق مع أي حجم شاشة عرض. Falve هذا التصميم الجميل للموقع الإلكتروني لديه تخطيط سهل الاستخدام. هذا يشمل، تصميمًا سريع الاستجابة، محتوى منظم بشكل ممتاز مع عناوين، وأزرار، والعديد من الميّزات الواضحة. Intersection التصميم الخاص بهذا الموقع سريع الاستجابة بشكل كامل، مما يجعله يُعرَض بشكل مثالي على أي جهاز. تندمج العناوين تمامًا مع صورة الخلفية الكبيرة. Harry’s تصميم الموقع الإلكتروني هذا هو تصميم شاشة كاملة مع تخطيط سهل الاستخدام. سوف تكتشف العديد من الصور المذهلة، الخطوط الجميلة، المحتوى المنظم جيدًا، والعديد العديد. Squarespace بالتأكيد قد سمعتَ عن Squarespace. استخدم هذا التصميم الأكثر من رائع كمصدر إلهام لمشاريعك المستقبلية. يستخدم التصميم رسومات تفاعلية، صور جميلة، والعديد من المميزات المخصصة. Jonathan Decosta يستخدم هذا الموقع شبكةً منظمةً لعرض صور مختلفة. وأيضًا، تمتلك القائمة موقعًا ثابتًا، فعند استخدامها، تقوم بفتح تركيب يغطي تقريبًا الشاشة بأكملها. IWC Schaffhausen موقع IWC Schaffhausen هو متجر إلكتروني بتصميم احترافي وتخطيط سهل الاستخدام. هنالك العديد من الفيديوهات في الخلف والتي سوف تشد انتباهك بكل تأكيد. Spotify وهو موقع مشهور جدًا ويحتوي على رأس صفحة ثابت مع خلفية شفافة. ويمتلك التصميم صور خلفية بألوان جميلة. هنالك العديد من خدع التصميم بإمكانك تعلُّمها من تخطيط هذا الموقع. Google Glass تصميم هذا الموقع بسيط ولكن فعال. اكتشف العديد من المميزات في هذا الموقع واستخدمها في تصاميمك. Jack Daniels بتأثير مظهر جميل، صور عالية الجوة وعلامة تجارية مشهورة، فإن هذا الموقع يجذب ويحافظ على مستخدميه. Symbolset يمتلك هذا الموقع خلفية بألوان متغير تشُد الانتباه وأسلوب طباعة مرسوم. Simone Marcarino ها هي صفحة رئيسية مرسومة بشكل تفاعلي والتي تشجعك على الانخراط في الموقع. هذا التصميم لديه تخطيط دنيوي وبسيط ويتفاعل فجأة عندما تقوم بالتمرير من فوقه. Pulse هذا التصميم معقد بعض الشيء ويشمل عدّة ميزات رائعة وتصميم مدروس كليًا مع ألوان جميلة ورسومات مذهلة. الخلاصة تعد عملية صنع تصميم سهل الاستخدام مهمًا جدًا لعدد من الأسباب. أولًا، سوف يقوم التصميم المشوش بإحباط المستخدمين وقد يغادرون الموقع بدون أن يقوموا بأداء ما أتوا للقيام به في موقعك (سواء كان شراء شيء ما، تعبئة نموذج، قراءة مقالة، أو أي شيء آخر). ثانيًا، تصميم الموقع المدروس جيدًا والمنفذ بشكل جيد سوف يضمن أن يعود المستخدمون من جديد لزيارته وهو شيء يريده جميع مالكي المواقع. لذلك، استخدم هذه الأفكار عند صنعك لموقعك الإلكتروني سهل الاستخدام في المستقبل. احصل على موقع إلكتروني مخصص لأعمالك أبهر زوارك بموقع احترافي ومميز بالاستعانة بأفضل خدمات تطوير وتحسين المواقع على خمسات أنشئ موقعك الآن ترجمة -بتصرف- للمقال ‎50 User-Friendly Website Designs That Work لصاحبه Iggy

هل تبحث عن أيقونات مصممة وفق التصميم المادي (Material Design Icons) ذات جودة عالية لإضافتها لمشاريعك؟ أنت في المكان الصحيح! لقد جمعت لك قائمة ضخمة من أيقونات مصممة وفقًا للتصميم المادي (Material Design Icons) التي يمكنك توظيفها في تصاميمك المستقبلية. تمتلك الأيقونات دورًا مميزًا في أي تصميم إذ تضفي انطباعًا بصريًا جميلًا للعديد من الحركات، والأدوات، والمنتجات، والخدمات ...إلخ. بإمكانك توظيف أيقونات التصميم المادي هذه في مشاريع متعددة، وإضافة لذلك، فإن تصاميمها تواكب آخر الصيحات. أثِر اهتمام مستخدميك بتصاميم الأيقونات الملفتة هذه. ستكتشف العديد من الأيقونات المتجهية مصممة بتصاميم يدوية وسلسة، ومصنوعة بأيدي مصممين خبراء. تحتوي هذه المقالة على مجموعة كبيرة جدًا ويوجد ما يناسب الجميع. قم بتحميلهم بعدة صيغ، حسب حاجتك. إضافة لذلك، فإن تصاميم هذه الأيقونات تغطي الكثير من الزوايا والمواضيع المختلفة. Material Design Icons Custom Shape هذه مجموعة كبيرة تضم 431 أيقونة تصميم من الفوتوشوب. يمكن تحميل هذه التصاميم واستخدامها بالمجان. Android L Icon Pack by Icons8 لديك هنا مجموعة ضخمة تحتوي على 840 أيقونة مصممة وفق التصميم المادي (Material Design Icons) وهي متاحة بصيغة PNG. وتشمل أيقونات التواصل الاجتماعي، والأسهم، والخدمات ...إلخ. Material Design Icon Grid صمَّم هذه الأيقونات المصمم Jiangping Hsu ويمكن تحميلها بصيغة ملفات PSD. بإمكانك استخدامها في أشرطة العمل كأيقونات بدء. Google Material Icons أيقونات جوجل هذه تم صنعها خصيصًا لتطبيق Sketch. ألق نظرة على كل شيء وحدد إذا ما كانت هذه التصاميم مفيدة لمشاريعك. Material Design Powerpoint & Keynote Icons يوجد هنا مجموعة كبيرة مكونة من 425 أيقونة بإمكانك استخدامها في برنامج Powerpoint و Keynote. بإمكانك تغيير الألوان حتى تناسب ما تريد وضعها معه. Isometric Material Icons وهي مجموعة رائعة تشمل أيقونات مصممة تصمميًا جيدًا. بإمكانك تحميلها بأكثر من صيغة ملف مثل PNG، و PSD، و AI. Material Design Icons with Bounds 250 أيقونة تصميم مادي (Material Design Icons) بإمكانها أن تندمج بداخل مشاريع Sketch الخاصة بك. تفقد هذه الأيقونات وحدد إن كنت تستطيع استخدامها في تصاميمك الحالية. Material Design Icon Templates سوف تجد هنا العديد من قوالب أيقونات التصميم المادي (Material Design Icons) المختلفة والتي بإمكانك استخدماها في تصاميمك الحالية أو المستقبلية. Material Icons Pack وهي مجموعة كبيرة أخرى مكونة من 435 أيقونة مصممة وفق التصميم المادي (Material Design Icons). بإمكانك تحميل هذه العناصر في برنامج Sketch وصيغة SVG. Material Design System Icons أيقونات النظام هذه تم صُنعها بواسطة Walmyr Carvalho. ستجد في الرابط الموجود بالعنوان 20 أيقونة جميلة بإمكانك استخدامها في كل من Sketch وبصيغة PNG. Material Design Icons by Google لديك 900 أيقونة مصممة وفق التصميم المادي (Material Design Icons) بين يديك وجاهزة للاستخدام فورًا. هذه الأيقونات لديها تصاميم بسيطة ولكن مذهلة وسوف تترك انطباعًا إيجابيًا لدى مستخدميك. Mprphing Material Design SVG Icons – SVG Morpheus يوجد هنا مجموعة رائعة من أيقونات SVG المرسومة والتي يمكنك استخدامها في تصاميمك. اضغط على الرابط المرفق بالأسفل لتشاهدها. Material Design Webfont Icons هذه مجموعة مميزة وتضم أكثر من 1900 أيقونة مصممة وفق التصميم المادي (Material Design Icons). هذه المجموعة تشمل تصاميم أيقونات متعددة الاستخدام ومتوفرة بعدّة صيغ وألوان وأحجام. Material Design Icons ألق نظرة على أيقونات التصميم هذه بصيغة PSD الرائعة والتي يمكنك تحميلها واستخدامها في مشاريعك مجانًا. هذه الأيقونات لديها تصاميم ذات تفاصيل مفعمة بالألوان وسوف تبدو رائعة في مشاريعك. Material Design Icon Templates ستجد هنا مجموعة رائعة من قوالب أيقونات التصميم المفيدة والتي بإمكانك استخدامها لصنع عناصرك الخاصة. Free Set of Server – Hosting Material Design Icons تشمل هذه المجموعة 12 أيقونة جميلة مصممة وفق التصميم المادي (Material Design Icons) والتي تتعلق بالخوادم والمستضيفات. بإمكانك تحميلها بصيغة PSD أو PNG ويمكنك أيضًا استخدامها في كلا المشاريع المجانية والتجارية. Google Maps & Streetview Icons تجد هنا بعض الأيقونات المرسومة الخاصة بخرائط جوجل (Google maps) ووضع رؤية الشارع (Streetview) والتي يمكنك استخدامها في مشاريعك الحالية أو القادمة. Angular Material Icons (eps) لديك هنا مجموعة رائعة من الأيقونات الزاويّة التي يمكنك تحميلها واستخدامها بالمجان. هذه العناصر لديها تصاميم مفصّلة بألوان جميلة. Material Design +420 Free Icons (SVG, EPS, PSD, PNG Files) أيقونات التصميم هذه متواجدة بصيغة vector مما يجعلها مثالية لأي مشروع، مهما كان حجمه. بإمكانك الاختيار بين أكثر من 420 أيقونة مجانية وتأتي بصيغة SVG، و PNG، و PSD وصيغ ملفات أخرى. ترجمة -بتصرف- للمقال ‎7000+ Material Design Icons - Ultimate Icon Roundup لصاحبه Iggy

سواء كان عليك تصميم موقع إلكتروني، أو صنع غلاف مجلة، أو تعزيز معرض أعمالك، فستحتاج أولًا وآخرًا إلى اختيار خط أجنبي للغة الإنجليزية لتستخدمه في مرحلة ما. كما يعلم الجميع، فإن أسلوب الطباعة هو عنصر أساسي جدًا في أي عمل إبداعي أو مطبوع ويجب عليك أن تُبدي المزيد من الاهتمام في هذه الناحية. أسلوب الطباعة بإمكانه أن يترك تأثيرًا كبيرًا في نفس القارئ ولديه القدرة على جذبه أو تنفيره. عمومًا، فإن خطوط serif تعتبر الأنسب للأعمال المطبوعة، على سبيل المثال: فإن خط (sans-serif) يعد الأفضل في العناوين الرئيسية. جمعت لك في هذه المقالة قائمة من 20 من الخطوط الأجنبية الواضحة وضوحًا كبيرًا والتي يجب عليك تجربتها مرة واحدة على الأقل. العديد من هذه الخطوط الأجنبية مناسبة للملصقات الكبيرة، وأعمال التصميم، والتصميم الجرافيكي، وتصميم الويب، ومعارض الأعمال المعمارية، والمجلات وأيضًا الاستخدام التحريري مثل المجلات، والصحف والكتب. باستعراضك لهذه القائمة، بإمكانك الوصول لفكرة معينة حول كيفية استخدام هذه الخطوط ومتى، وكيف بإمكانك الاختيار بينها حسب نوع العمل الذي تقوم به. تمتلك الخطوط القدرة على نقل رسالة أو فكرة معينة ويجب عليك أن تعرف أولًا أي نوع من المشاعر تريد أن تعبر عنها. إن كنت طالب عمارة وتحتاج لتكوين معرض أعمال مقنع، يجب عليك أولًا أن تعرف القواعد العامة للتصميم، ومن ثم يمكنك إكمال الفكرة بخط يتناسب مع الجانب الجمالي لمعرض أعمالك. يصبح الخط الذي اخترته عاملًا أساسيًا في تصميمك ويساعد على إكمال الفكرة التي تحاول إيصالها ويعمل أيضًا كمساعد في صنع هوية العلامة التجارية الخاصة بك وتسليط الضوء عليها ليلاحظها الزائر. ومن الجوانب المهمة أيضًا والتي يجب عليك أخذها بالحسبان هي اختيارك لخط يسهل قراءته لأنك لا تود تنفير الزوار فقط لأنهم لا يستطيعون قراءة نصك. يعد الخط الواضح فعالًا وكما ذكرنا سابقًا، فهو يساعدك على إكمال العمل الإبداعي بغض النظر عن كونك فنانًا، مصمم ويب، مصمم جرافيكي أو معماريًا. لذلك، نأمل بأن نكون قد أثرنا اهتمامك، نحن ندعوك بكل لطف لكي تتفقد القائمة التالية ونحن متأكدون من أنك ستجد على الأقل خطًا واحدًا مثيرًا لاهتمامك بإمكانك استخدامه في أعمالك القادمة. Calendas Plus يعد هذا الخط أنيقًا وتقليديًا. أُحدِث عام 2010، ويمكن استخدامه عند إنشاء نصوص صغيرة الحجم، وقد خُصِّص آنذاك خصيصًا لمشروع تقويم زمني. Margot يعتمد خط Margot بشكل أساسي على الأشكال الدائرية والمنحنية وكان قد صُمِّم هذا الخط حتى يستخدم في المطبوعات الكبيرة الحجم مثل الإعلانات واليافطات، مع ذلك فهو مناسب أيضًا للمطبوعات الصغيرة الحجم. Bitter Ht وهو أحد الخطوط المجانية، وهو من خطوط serif بتصميم مميز. صُمِّم هذا الخط خصيصًا للكتب الإلكترونية مما يعني أنه تم تحسينه ليناسب القراءة. Fritz ويعتبر خط Fritz من خطوط serif ويأتي شكل هذا الخط بلمسة آلية (من الرجل الآلي) ويأتي بأربع خيارات حول الثخن. بإمكاننا استخدام هذا الخط في أي عمل إبداعي كمعارض الأعمال، واللافتات، والملصقات والتصميم الجرافيكي. Medio وهو أيضًا من ضمن خطوط serif ويأتي هذا الخط بتصميم أنيق. يمكن استخدامه بشكل مناسب في التصميم الجرافيكي وتصميم الويب وفي العديد من الأعمال الإبداعية الأخرى. Ainslie صُمِّم هذا الخط عبر برنامج Insigne Design في عام 2013، ويمتلك هذا الخط 42 نوعًا. يعتمد الخط بشكل أساسي على الأشكال المتدفقة أو الجارية وكان قد حُسِّن لتتم قراءته بشكل أفضل. يمكن استخدامه في التصميم الجرافيكي، ومعارض الأعمال وتصميم الويب. Korneuburg Slab وهو أحد خطوط serif، واستوحي هذا الخط من خط archways Korneuburg. يمتلك مظهرًا صارمًا ويمكن استخدامه في العناوين الرئيسية، المجلات وبعض الأعمال الإبداعية الأخرى. Aleo يأتي هذا الخط بستة خيارات، وهو أحد الخطوط التي تم تحسينها لتناسب القراءة. وهو مناسب لأي عمل إبداعي مثل اللافتات، والعناوين الرئيسية، و المجلات ومعارض الأعمال. Klinic Slab أيضًا أحد خطوط serif ويأتي بأربع خيارات خاصة بالحجم وهو مناسب لتصميم الويب، والتصميم الجرافيكي، والملصقات والمجلات. Tryst يمتلك هذا الخط تصميمًا عصريًا وأنيقًا معتمدًا على الأشكال المنحنية وهو مناسب تمامًا لتصميم الويب، والملصقات، والمنشورات، والمجلات ومعارض أعمال التصميم. Fenix STD من خطوط serif الرقيقة ويحتوي هذا الخط على منحنيات حادة ذات حواف فبالتالي تظهر بمظهر صارم. تصميم هذا الخط عصري وأنيق ويمكن استخدامه لمعارض الأعمال، والعناوين الرئيسية وتصميم الويب. Gaspar وهو أيضًا من أحد خطوط serif المصممة خصيصًا للاستخدام التحريري بواسطة "كارلوس ألونسو كوستا". صُمِّم لكي لا يكون سميكًا أو كثيفًا جدًا ويمكن استخدامه في الجرائد والمجلات والملصقات. Butler هذا الخط أنيق ومتناسق ويمتلك أيضًا مظهرًا عصريًا وهو مناسب تمامًا للمجلات، ومجلات الموضة أو الصيحات، والملصقات والأعمال الإبداعية الأخرى. لديه إمكانية عالية على القراءة بسبب أشكاله الواضحة والناعمة. Ethos Ethos هو عائلة خطوط من نوع serif ويأتي بـ 36 تنسيقًا مختلفًا، بالتالي فهو مناسب جدًا للعديد من الاستخدامات المختلفة. ومن المزايا الرائعة الأخرى لـEthos أنه يأتي مائلًا وبشكل متشابك لتحسين تجربة القارئ. Voga وهو خط من نوع Didone ويأتي بتصميم أنيق وعصري. لديه أشكال ناعمة وعالية الجودة ويمكنه أن يبدو رائعًا على غلاف أي مجلة تختص بالصيحات. Recia هو أحد خطوط serif ويأتي بخمسة أثقال وخيارات ميل. تم صنع هذا الخط بواسطة "كارلوس ديل تورو" وصُمِّم خصيصًا لأعمال الطباعة والعرض. Borgia Pro هذا الخط هو أحد خطوط serif ويأتي بثمانية أشكال. هذا الخط مناسب للطباعة، والكتب، والمجلات والعديد من الأعمال الإبداعية الأخرى. Lora خط Lora هو أحد خطوط serif الحديثة وقد صُمِّم خصيصًا لشاشات العرض الرقمية. يعتمد التصميم على الأشكال الرفيعة والحادة، وهو أيضًا مناسب للكتب الإلكترونية والمجلات. Calluna يعتمد خط serif هذا بشكل أساسي على الأشكال الغير منتظمة ويفتقد الثبات، بالتالي فهو مناسب للمطبوعات بمظهر أكثر حيوية ومتعة. Roboto Slab وهو خط يعتمد على الأشكال الهندسية، بالتالي فهو يمتلك شكلًا تقنيًا ولكن المظهر الكلي يمتلك بعض الملاحظات الأنيقة. يمكن لهذا الخط أن يكون مناسبًا للعديد من الأعمال الإبداعية ويمكن أن يُستخدم في تصميم صفحات الويب، والتصميم الجرافيكي، والمجلات ومعارض الأعمال. ترجمة -بتصرف- للمقال ‎20 Highly Legiable Fonts You Should Start Using لصاحبه Iggy

بمجرد حصولي على ساعة آبل Apple Watch، كنت قد رسلت للجميع رموزًا تعبيرية منذ اليوم الأول، لقد كنت مسحورًا بها. شعرت أيضًا بالإلهام كمصمم. لم أصمم من قبل لشاشات صغيرة جدًا، وقد جذبتني فكرة صنع شيء في مساحة تملك مجموعة فريدة من الحدود والميزات. قررت صنع تطبيق لساعة آبل كمشروع ثانوي، و كنقطة انتقال لتصميمي. نظرت لتطبيق الهاتف الذي استعمله لمراقبة استهلاك الكهرباء الخاص بي ودفع فاتورة البلدية الشهرية، بدى كأن بعض ميزات هذا التطبيق بإمكانها بالفعل أن تعمل بشكل جيد على الساعة. مقارنة استهلاك الأشهر، وإضافة دفعات، ومهام أخرى تُعرض بسهولة على الهاتف أو الجهاز اللوحي قد تشكل تحديًا مثيرًا عند عرضها على الساعة. وها هي نظرة عن قرب على أول محاولاتي في صنع نموذج لشاشة صغيرة جدًا. معالجة الوحش الصغير جدًا إن قمت من قبل بتصميم تطبيق iOS أو Android، فقد لاحظتَ بأنه من المهم تذكر تركيبهم المعروف وأخذه بالحسبان. مثلًا: علامات التبويب في الأعلى بالنسبة لـAndroid وفي الأسفل بالنسبة لـiOS. هكذا يتوقع المستخدمون أن يجدوهم. لا يمكنك إعادة صنع تطبيق هاتف محمول لساعة آبل. يجب أن يكون تطبيق الساعة امتدادًا لتطبيق الهاتف، كصديقٍ صغير الشاشة يساعد في تحسين تجربة الهاتف. مثل iOS و Android، ساعة آبل لديها نوعها الخاص من اللغة البصرية وطرقها التي يفترض على المستخدم أن يجربها. أردتُ أن أكون صادقًا بتجربة ساعة آبل، لذلك قرأت بعناية عبر مستندات تصميم آبل. أردت أن أعرف أي نوع من الانتقالات والتحكمات كانت تتميز بها ساعة آبل، وكل النواحي التقنية التي أحتاج لمعرفتها. خلال بحثي، اكتشفت بأن شركة آبل لديها انتقالات وأنماط تنسيق معينة ومصممة لمنصة الساعة. تمّ تصميم الأنماط مع التفكير المعمق في السيناريوهات التي سوف تستخدم فيها. تفصيل سريع: اللمحات السريعة: مجموعات قابلة للتصفح من اللحظات الوقتية والسياقية من التطبيقات المفضلة للمستخدم. نظرات قصيرة: إشعارات تظهر بشكل سريع وتعطي المستخدم وقتًا كافيًا لرؤية عن ماذا يدور الإشعار وأي تطبيق قام بإرساله. نظرات طويلة: تزوّد تفاصيل أكثر عن إشعار قادم. تظهر النظرة الطويلة عندما يبقى معصم المستخدم مرفوعًا أو عندما ينقر المستخدم على النظرة القصيرة. الانتقال القائم على الصفحة في مواجهة الانتقال الهرمي: يعتمد الانتقال القائم على الصفحة على السحب أو التحريك بشكل أفقي خلال الصفحات. لديه نفس السلسلة الأفقية من النقاط التي تراها في أسفل الصفحة الرئيسية في هاتف iPhone. أما الانتقال الهرمي فهو طريقة للنزول للأسفل للوصول للمعلومات. نقرك على عنصر قائمة رئيسية يأخذك للصفحة التالية. هنالك الكثير من الفروق البسيطة بين هذه التراكيب: اللمحة السريعة، والنظرة القصيرة، والنظرة الطويلة، والانتقال الهرمي والانتقال الأفقي. ومثل الهاتف المحمول، هنالك لحظات حيث تكون كل من هذه التراكيب مناسبةً، وإن استخدمتها في السياق المناسب فسوف يتعامل معها المستخدم بسهولة وبشكل بديهي. خلال محاولة فهم كيفية الانتقال في الأجهزة القابلة للارتداء، نصيحتي لك كالتالي: لا تقم بإعادة اختراع العجلة! أي لا تقم بمحاولة التصميم من الصفر. هذه الأنواع من الانتقالات وشاشات البيانات تم تصميمها لسيناريوهات معينة. اكتشف كيف بإمكانها التعامل مع المعلومات التي تحتاج أن توصلها للمستخدم. البحث بمجرد وصولي للفهم الأساسي لكيفية عرض ساعة آبل للمعلومات، بدأت التجريب بكيف يمكن تصوير او تجسيد البيانات في السيناريوهات المعروفة. على سبيل المثال، أي نوع من المعلومات يتم تجاهلها، بالمقابل أي المعلومات يتم ملاحظتها؟ لقد أضفت العديد من تطبيقات الساعة لكي أستطيع العبث بها ورؤية كيف قام الآخرون بحل مزايا الانتقال من الهاتف المحمول للصيغة الجديدة على الساعة. الجولة الأولى اعتقدت بالبداية بأنني أريد أن أصنع انتقالًا هرميًّا، باعتباره الطريقة التي وُضع فيها تطبيق الهاتف المحمول. وبالرغم من أنه ساهم في عمل تطبيق متكامل، أدركت بأنه لم يكن يعمل بالطريقة التي أردتها، فكان ينقصه الحياة والبهجة. بدى وكأنه مثقل بالنص على عكس كونه قادرًا على عرض المعلومات بسرعة. أدركت بأنه يجب علي أن أتبنى "رؤية آبل" في ساعة آبل: عرض رائع للبيانات بدون وجود الكثير من النص. قمت بعرض النموذج الأولي على فريق التصميم، حيث علمت بأن هناك تغييرات يجب عملها. حصلت على الكثير من ردود الفعل: "لا يبدو كثيرًا كتطبيق ساعة. لم لا تجرب أمثلة تصميم مبنية على البيانات؟" لقد كان فريق التصميم على حق. لذلك بدأت من جديد. عليك أحيانًا أن تفكك كل شيء وتبدأ من الصفر كنت قد اصبحت تائهًا في رسم تخطيط واحد لواحد (1:1 mapping) لمزايا من التطبيق للساعة الذكية، ولم أتّبع خطوات عمليتي الخاصة. يبدأ المشروع عادةً بقائمة من المزايا أو متطلبات العمل، ومنها أقوم تاليًا بتوليد تدفقات (flows) وإطارات شبكية (wireframes) ثم في النهاية أنتقل إلى التخطيط الشامل Comps (Comprehensive Layout) وإلى النمذجة (prototyping). لم أقم في محاولتي الأولى بتكوين خط أساسي لـMVP (المنتج الأدنى القابل للنمو لجعل تطبيقٍ ما فعالًا ومفيدًا). كل ما أردته هو الفحص ورؤية ما يحدث. وما حدث كان باهتًا وغير واضحًا. لم أكن لأتعامل مع عمل زبون هكذا، لذلك أخدت هذه المرة خطوةً للخلف وخططت منتج MVP. تعاونت مع مطورين لوضع مجموعة MVP حقيقية من الميزات للتصميم. ثم أخذت تلك القائمة، أمسكت بدفتر ملاحظاتي، وبدأت العمل. لدي كلمة بشأن الرسم التخطيطي: أنصح به بشدة كأسلوب حل مشاكل أولي. وأنا لا أتحدث تلك الرسومات المثالية والرائعة الموجودة في دفاتر مولسكين (Moleskines) الجلدية والتي تراها عادةً في منشورات المصممين على مدوناتهم. أنا أتحدث عن الرسومات القبيحة، السريعة والتي يمكن التخلص منها. تلك الرسومات التي تخاف من أن يراها الناس أو من الممكن أن يقولوا: "ظننت بأنك قلت أنك ذهبت لكلية الفنون؟" العمل بسرعة على سبورة بيضاء أو على دفترك يكوّن مجموعة من الميّزات. اجمع البيانات المتشابهة والأعمال سويًا. ارسم إطارات شبكية (wireframes) وتدفقات (flows) بسيطة. ليس من الضروري أن تكون مثالية. وبمجرد أن تستثمر جهدك في جعلها مثالية، ستكون أقل قابلية لأن تستغني عنها أو تتخلص منها وتبدأ من جديد في حال وجدت خطأً ما أو أردت أن تُجري تغييرًا. في النهاية أقوم بإنتاج نسخ جميلة في ما بعد لعرضها على العملاء وعادةً بشكل رقمي. المرور بكل تفصيل صغير يساعدني على رؤية طرق مختلفة لتجميع الميزات سويًا لتطبيق مبني على الصفحة (page-based). أقوم بتحليل وتجزئة الميّزات إلى مهام على شكل حبيبات، ثم أقوم بتجميعها سويًا في شاشات. لقد عملت بشكل حر وسريع لأنه بالأصل، هذه كانت مجرد لائحة بقالة (أداة تساعدني على ترتيب الميزات والمحاسبة عليها). الإلهام لقد كنت مفتونًا بالطريقة التي يستحضر فيها تطبيق الطقس في ساعة آبل واجهة ساعة بوساطة عرض بيانات الطقس بشكل دائري. حاولت أن أوضح بعض قصص المستخدمين سويًا في تنسيق دائري، كالأيام المتبقية حتى موعد دفع الفاتورة. إنّ استخدام التقويم وعرضه بأسلوب دائري أو تحويل شريط مقارنة لتصوير بياني دائري الشكل هو تحدٍ مثير. اغسل بالصابون، اشطف، كرر اعادة التفكير بالتطبيق واعتباره مبنيًا على الصفحة (page-based) مكنني من دمج العديد من القطع المختلفة من البيانات ونقاط الانطلاق المحتملة بشاشة واحدة. مكنني أيضًا من جعله مختصرًا وبصريًا بشدة. جعل التصفح (Paging) خلال تطبيق ساعة ذكية استخدام التطبيق أكثر سرعة وأكثر متعةً في الاستخدام وجعله أيضًا أكثر متعة بالتصميم. الدروس المستفادة أحد أكثر الدروس التي تعلمتها أهمية: انغمس ولا تتردد. ابنِ تصميمك من قصص المستخدمين. التدفق (flow)، الإطار الشبكي (wireframe)، النموذج (prototype). لن تتعلم إلا بهذه الطريقة. إن كنت تقدر على الحصول على ردود فعل من مبدعين آخرين ومن مطوري iOS فقم بطلبها. سوف يساعدوك باكتشاف أشياء تجاهلتها مسبقًا وسوف تصنع نموذجًا أفضل من عملك. بجانب ذلك، فإن امتلاكي لميّزات MVP واقعية ساعدني على تحديد ما احتجت ان أقضي وقتي فيه وما احتجت أن اركز عليه بشكل أفضل. قم بتجربة الأشياء، أعد تقييم عملك ولا تكن خائفًا من ترك شيءٍ ما عندما ترى خللًا. إبقاؤك لنسخة من الشاشات السابقة بإمكانه أن يكون ذو فائدة عندما تحتاج لعرض عملك على الزبائن أو على فريقك. حتى وإن لم يكن هنالك زبون يدفع لك مقابل تصميمك لتطبيق ساعة ذكية، فإن إكمال تصميم كهذا بوصفه تدريبًا سوف يعود عليك بالفائدة في المستقبل. بإمكانه أن يكون منشور على مدونة حول موضوع جديد ومثير يبيّن للزبائن المستقبليين بأنك على إطّلاع على كل ما هو جديد. بإمكانه أن يكون إضافةً رائعة لمعرض أعمالك الذي يُظهر كيف تتعامل مع المشروع. بالإضافة لذلك، فإنه فرصة لنقل مهارات تفكيرك الحساس والذي أراه نادرًا عندما أراجع طلبات التوظيف. بالرغم من أن هذا المشروع لم يكن لزبون، فقد استخدمت هذا التصميم لعرض على الزبون المستقبلي كيف تعاملت مع تجربة المستخدم وكيف قُمتُ بالتصميم باعتبار المنصة والمستخدم وقمت بالتفكير بكيف يمكن لتطبيق ساعة ذكية أن يندمج مع تطبيق هاتف محمول موجود بالفعل. وفي حال كنت تتساءل: لقد حصلت على العمل. ترجمة -بتصرف- للمقال ‎Prototyping for a tiny screen لصاحبه Marc Nischan

التعامل مع الألوان هي مهمة تستغرق الكثير من الوقت بالنسبة لمصممي الويب، بدايةً، يجب عليك أن تختار لوحة ألوان لتصميمك المفعم بالألوان، ومن يجب عليك تذكر جميع أنواع قيم الشيفرة وتحويلها من الرمز الست عشري إلى RGBa. ولتسريع الأمور وجعل حياة المصمم أكثر سهولة، هنالك بضع الأدوات المفيدة متوفرة على الإنترنت. تساعدك أدوات الألوان هذه في انتقاء، اختيار وتحويل لونك بسهولة لمشروع تصميم الويب المستقبلي. أدوات لوحات ومخططات الألوان هل أردت يومًا أن تستخدم لونًا معينًا ولكن لم تستطع معرفة اسمه أو الرمز الست عشري الخاص به؟ باستخدام مولدات الألوان هذه، بإمكانك إيجاد اللون الذي تبحث عنه بالضبط. هناك عدة خيارات سوف تساعدك في الحصول على اللون الذي ترغب به. يمكنك مثلًا أن تختار لونًا مشابهًا للون الذي تريده ومن ثم التنقل بين الظلال المتنوعة للون. بإمكانك أيضًا أن تعدّل درجة اللون، تشبع اللون وسطوعه حتى تصل للنتيجة المرضية لك. بعد كل هذا التغيير، سوف تحصل على الرمز الست عشري وعلى اسم اللون ومن ثم استخدامها في تصاميمك. هذا بسيط، أليس كذلك؟ إن كنت تبدأ عادةً بالتصميم من الصفر بدون أي خطوط ارشادية موسومة او فكرة مسبقة للون ما فقد يكون من الصعب وضع استراتيجية لون فعالة. هنالك مواقف عديدة تكون فيها مولدات لوحة الألوان مفيدة. رغم أنها غالبًا ما تُستخدم في مشاريع تصميم الويب، فإن مولدات لوحات الألوان بإمكانها أن تكون مفيدة في العديد من المشاريع المتعلقة بالتصميم. إليك بعض أدوات الألوان التي ستساعدك في تكوين مجموعة ممتازة من الألوان المضمون عملها. ColourLovers هو موطن الملايين من لوحات الألوان المقدمة من قبل المستخدمين. تصفح المجموعة وانتقِ اللوحات التي تعجبك أو قم بإيجاد ألوان أخرى بدرجة مناسبة لعملك. هذا الموقع بإمكانه أن يفيدك في المستقبل. Adobe Color CC هذا أيضًا مولد لوحات ألوان رائع بإمكانك استخدامه لصنع لوحات ألوان جميلة. بإمكانك أيضًا الولوج وحفظ لوحاتك للاستخدامات المستقبلية. هذه أداة قوية تمكنك فقط من التصفح وتقييم المجموعات الموجودة مسبقًا، ولكنها تضم أيضًا أدوات لصٌنع لوحات الألوان الخاصة بك من الصفر. Pictaulous هل تبحث عن إحساس أو أسلوب أو سياق معين من لوحة الألوان الخاصة بك؟ إليك Pictaulous الذي هو أداة ذكية تمكنك من انتقاء الألوان من الصور التي ترفعها له. Paletton ألق نظرة عن قرب على مولد لوحات الألوان الرائع هذا والذي يمكّنك من صُنع تراكيب مختلفة من الألوان. Color Hunt مولد لوحات ألوان أنيق يشتمل على لوحات ألوان متعددة لتختار منها. بإمكانك أيضًا حفظ اللوحات المفضلة لديك واستخدامها لاحقًا عندما يتطلب الأمر. Sip هو تطبيق رائع يعمل بشكل ممتاز على هواتف iPhone وأجهزة Mac. يمكّنك هذا التطبيق من توليد مخططات الألوان بسرعة من الصور ومن ثم حفظ، تنظيم ومشاركة اللوحات التي تصنعها. Palettr Color Paletter Generator لديك هنا مصدر رائع يمكنك إيجاد لوحات ألوان متعددة فيه والتي يمكنك صنعها من الصور. بإمكانك أيضًا البحث عن أي مخطط أو كلمة وستحصل على نتائج مذهلة. Color Combs بإمكان هذه الأداة أن تساعدك بسهولة في صنع لوحات ألوان مدهشة من الصفر. ألق نظرة عليها، واكتشف مزاياها واعرف ما الذي تعرضه. Colrd Color Palette Generator هو موقع رائع يمكنك استخدامه لصُنع لوحات ألوان رائعة. تشتمل هذه الأداة على مُنشئ تدرجات رائع وأداة بحث أيضًا. أدوات انتقاء الألوان يمتلك برنامج Photoshop نافذته الافتراضية لانتقاء اللون والتي متأكد من أن جميع المصممين على دراية بها، ولكن فكّر بعدد المرات التي احتجت للتغيير والتنقل بين التطبيقات لتنسخ أو تلصق أو تحفظ قيم الألوان. من المفترض أن هنالك طريقة أفضل! في الواقع، هناك طرق أفضل. Color Picker من WebpageFX هذا مصدر ممتاز يمكنك استخدامه لصُنع لوحات ألوان. اضغط على العنوان وانظر أي تراكيب الألوان بإمكانك صُنعُها. Colour Code وهو مولدُ ممتاز أخر وهو يعتمد على مؤشر الفأرة. بإمكانك استخدامه لصُنع لوحات ألوان متعددة ومن ثم تصديرها بعدّة صيَغ للملفات مثل: SCSS، أو LESS، أو PNG. Color Supply لديك هنا لوحة مذهلة لدرجات الألوان والتي يمكنك استخدامها لصُنع أمزجة مختلفة من الألوان. هذه الموقع مناسب تمامًا لأي مصمم ويب أو أي عقل مبدع آخر. Color.hailpixel.com أداة بسيطة ولكن مفيدة بشكل كبير، يمكنك هذا الموقع من استعراض نافذة المتصفح بحثًا عن أي ألوان مناسبة، ومن ثم نسخ الرمز الست عشري الخاص باللون بنقرة واحدة. CSS Color Names إذا لم تكن تحب التعامل مع الأسماء العشوائية للألوان، ربما تكون هذه القائمة المكونة من 147 اسم لون وصفي أسهل بعض الشيء في تذكرها في صفحات النمط الخاصة بك. استعرض الألوان جميعها دُفعة واحدة أو بإمكانك رؤية قيمة عشوائية مع كل نقرة فأرة. أدوات نظرية الألوان هل تذكر تعلم كل شيء عن عجلة وتماثلات الألوان والألوان المكملة والثلاثية في درس الفنون؟ بإمكانك استعمال نظرية الألوان بمساعدة أدوات مخططات الألوان هذه لصنع لوحات تعمل بالفعل ومفيدة. Sphere أداة نظرية اللون المتخيّل والمسماة بالكرة (Sphere) تُعطيك واجهة بسيطة لتختار فروقات وصبغات على عجلة الألوان. انتقي أسلوبك المفضل من اللوحة لتحدد اختيارك اللوني ولتُناسق القيم. Color Scheme Designer صمم مخططك اللوني الخاص باستخدام هذه الأداة. قم بتدوير وتعديل عجلة الألوان لاختيار لونك الأساسي، ثم لاحظ القيم الناتجة تلقائيًا حسب نوع اللوحة الخاصة بك. أدوات CSS لإنشاء الألوان وفرت أحدث تحسينات CSS3 إمكانية صُنع ألوان متعددة مباشرةً بوساطة الشيفرة، ولكن صياغة CSS أكثر صعوبة للعمل معها من عجلة الألوان المرئية. هنا بالضبط تصبح أدوات التوليد مفيدة، لتقديم الشيفرة المطلوبة لصُنع تأثيراتك التي تريدها. CSS Drive هذا الموقع هو أيضًا مولد لوحات ألوان رائع وبإمكانك استخدامه لتوليد لوحات متعددة حسب صورك الخاصة. مولد تدرجات CSS المطلق يُعرَف عن تدرجات CSS3 بأنها صعبة الكتابة في الشيفرة. فلا تحتاج فقط لمعرفة القيم المختلفة للألوان، بل تحتاج أيضًا لإضافة بادئات رقمية مختلفة لتضمن عملها في أكثر من متصفح. يُسهِّل مولد تدرج CSS المطلق عملك من خلال إعطائك واجهة شبيهة بالفوتوشوب لكي تضبط تدرجك اللوني ومن ثم إعطاؤك الشيفرة لنسخها أو لصقها. Hex 2 RGBA Color Calculator ليس من الصعب تحويل قيمة الرمز الست عشري إلى RGBa ولكنه يعد مملًا عندما تعطى كل قيمة على حدى، مما يعني أن عليك النقر المتتالي 3 مرات لنسخ الأعداد. تقوم حاسبة Devoth’s Hex 2 RGBA بتسهيل العملية بقيمة CSS الكاملة حيث يتم نسخها بنقرة واحدة فقط. اقتراحات القراء حصلت على عدّة اقتراحات وتوصيات لأدوات جيدة للألوان من القرّاء منذ نشر المقالة لم أكن على دراية بها، لذا اطلعت عليها وأضفت أفضلها إلى هذه القائمة لتطلع عليها أنت أيضًا علّك تستفيد منها في مشروع القادم. 0to255 هنالك معيار محدد عند حالة المرور فوق الروابط الخاصة بك، وهو أن تختار درجة مُعتمة من نفس اللون. موقع 0to255.com يجعل هذه العملية أكثر سهولة، فقط اختر اللون وسوف ترى مجموعة متكاملة من الخيارات، مما يجعله مثاليًا للمرور فوق الرابط، التدرج اللوني والحدود. Color Hexa وهو شبيه بموسوعة خاصة بالألوان! أدخل اللون الذي ترغب به بأي قيمة تشاء وسوف يقوم بعرض وصف خاص به بالإضافة لبعض المعلومات المفيدة. ومن الفوائد الأخرى لمصممي المطبوعات هي التحويل المباشر من الرمز الست عشري أو RGB لأقرب درجة من CMYK. Material Palette من المولدات الممتازة التي تقوم بإنشاء لوحات الألوان التي بإمكانك تحميلها وحفظها لتصاميمك المستقبلية. امتلاكك لأداة اختيار اللون المناسبة بالإضافة لمولد لوحات الألوان بإمكانه أن يُنجح مشروعك أو يُفشله. ترجمة -بتصرف- للمقال Color Picker Tools: HTML, CSS, RGB, Color Palettes and More لصاحبه Iggy

واصل فريقي الوقوع في نفس النقطة مرارًا وتكرارًا في المراحل الأولى من كل مشروع. حتى عندما ملكنا مُحلِّلًا خاصًّا بسهولة الاستخدام بين أيدينا، لازلنا نعتمد في النهاية على الإحساس وصنع قرارات مبنية على العلم. أعطانا تحليل البيانات صورةً واضحةً عن ما كان يحدث ولكنه جعلنا نخمن، لماذا كان يحدث أصلًا. كنا قد حصلنا على ردود فعل هائلة من فحص سهولة الاستخدام، ولكننا شعرنا وكأن ردود الفعل لم تكن جديرة بالثقة حيث أن المستخدمين يتصرفون بشكل مختلف عندما يدركون بأنه تتم مراقبتهم. لذلك قمنا بصنع Jaco، وهي أداة تمكنك من رؤية ما يفعله الناس على موقعك أو تطبيقك. مهما كان تطبيقك معقدًا أو أيًا كان إطار العمل الذي تستعمله، فإن Jaco بإمكانه إعادة عرض كل جلسة مستخدم على شكل فيديو. خلال عملية تطوير Jaco، تعلمنا الكثير عن حالة الاستخدام لقدرة كهذه، واستخدمنا في الحقيقة Jaco لتطوير نفسه. التالي هو قصة حول كيف أضفنا Jaco لخط عملنا التقليدي وعن القيمة الإضافية التي ربحناها منه. بناء نسخة تجريبية لم يكن لدينا أدنى فكرة عن إذا ما كان Jaco شيءً يريده أو يحتاجه الناس، لذلك قمنا ببناء نسخة تجريبية لاختبار ردة الفعل. وكان هذا بتطوير إثبات عن الفكرة POC، وقررنا أن نشرك صفحتين أساسيتين فيها: صفحة الجلسات (لوحة التحكم الخاصة بنا) والتي تعرض قائمة بكل الجلسات المسجلة والأداء الوظيفي الأساسي لتصفية الجلسات حسب التاريخ، واسم المستخدم ورابط الصفحة الإلكتروني (بداخل الجلسة). صفحة المشغّل، حيثما يمكنك عرض تسجيل فيديو لمستخدمين حقيقيين ومشاهدتهم يتفاعلون مع موقعك. كل تفاعل خاص بمستخدم يتم ادراجه في نسخة على الجانب الأيمن من الصفحة ويتم أيضًا نقله للمخطط الزمني. الهدف الوحيد هنا كان أن تقدر على تخزين ومن ثم عرض جلسات المستخدم. لم يكن أي مصمم يعمل معنا وقمنا بإعطاء اهتمام قليل لتجربة المستخدم في ذلك الوقت. جعل الزبائن يستخدمون منتجاتنا الأساسية بعد أن أصبح لدينا شيءٌ يعمل فعليًا، كان قد حان الوقت للحصول على أول مختبرين لنسختنا التجريبية. وبما أن هدفنا كان إيجاد شركات ناشئة في مراحل متعددة لكسب فهم أفضل عن التناسب السوقي لمنتجنا، فكرنا في أفضل الأماكن التي يمكننا الذهاب إليها لإيجادهم، لذلك قمنا بحضور مقابلات ومحادثات موجهة نحو الشركات الناشئة واستطعنا أن نجد مختبري نسخة تجريبية متحمسين. قام أول المختبرين بتسليمنا قائمة بطلبات عن المزايا وأعطونا ردود فعلة ثمينة وملخّصة بالأسفل: الشركات الناشئة في المراحل المتقدمة: "على الرغم من أننا نتعلم شيئًا جديدًا من كل جلسة نشاهدها، لدينا أسئلة معينة نود تحريها باستخدام Jaco ولكن ينقص علينا الأدوات اللازمة لعمل ذلك." أخبرنا هذا بأننا احتجنا إلى إضافة المزيد من الفلاتر أو عوامل التصفية وإلى عمليات التكامل للسماح لزبائننا الذين يملكون حركة اتصالات كثيرة بأن يستخدموا Jaco. الشركات الناشئة في المراحل المبكرة: "مشاهدة تفاعل مستخدمينا مع منتجاتنا قام بإقصاء التخمينات من عملية صنع القرارات الصعبة." هذا أخبرنا بأن الشركات الناشئة في المراحل المبكرة يكتسبون الكثير من القيمة باستخدام Jaco. في ذلك الوقت، كنا شركة ناشئة في المراحل المبكرة، لذلك قررنا أن نجرب دراسة حالة على منتجنا الخاص واستخدام Jaco لمراجعة التسجيلات الخاصة بمختبري النسخ التجريبية. استخدام تسجيلات العملاء لتحسين Jaco لاحظنا نمطًا مرتبطًا بالطريقة التي يستخدم فيها عملاؤنا صفحة المشغّل. عندما يبدأ مستخدم جديد باستخدام منتجنا، فهو يقضي الوقت في مشاهدة مقاطع الفيديو المجمعة من البداية للنهاية. بعد فترة معينة، يبدأ المستخدم بمشاهدة المقاطع بسرعة مضاعفة 3 أضعاف، ولاحقًا، بينما يصبح على دراية أكبر بالمنتج، يبدأ باستخدام نسخة طبق الأصل لفحص محتوى الجلسة، يقوم أيضًا بالبحث عن مزايا في المخطط الزمني. بناءً على ما أظهر لنا Jaco، صنعنا ثلاثة تغييرات على ميزة النص: قمنا بتحريكها للجهة اليسرى حيث أصبحت مرئية أكثر بحثنا بالأصل عن السلوك في المخطط الزمني (وليس في النص)، لكن بما أننا لاحظنا أن العديد من المستخدمين يقومون بالضغط على فعالية ما في النص قبل أن يضغطوا على العلامة المترابطة في المخطط الزمني، قررنا أن نضيف هذا السلوك للنص أيضًا. أضفنا أيقونات وألوان مختلفة لكل نوع من أنواع الفعاليات في النص، بجانب سلوك التمرير التلقائي لجعل هذا العنصر ينبثق ويحث على تفاعل المستخدم. خلال يومين، 73% من مستخدمينا أصبحوا خبراء في صفحة المشغّل: بدأوا باستخدام النص لفحص الجلسة والبحث عن أجزاء معينة من التسجيلات، واستخدموا ميزة البحث لرؤية الأجزاء الأكثر صلة فقط من التسجيل. أنشأ هذا التغيير ردود فعل إيجابية من عملائنا، وبدأنا بالتفكير بطرق نستطيع من خلالها تطبيق ما تعلمناه في صفحة المشغّل على بقية Jaco. فكرنا بأخذ المخطط الزمني للجلسة من صفحة المشغّل ونسخها في صفحة الجلسة، وبالتالي مساعدة عملائنا على البحث بشكل أسرع في أكثر من جلسة واحدة على حدة. قمنا بتجسيد أفكارنا واختبارها بواسطة العديد من جلسات واحد لواحد مع عملائنا. بعد هذه العملية السريعة، صممنا النماذج بالأسفل: استثمرنا معظم تركيزنا في صنع إصدار أصغر من المخطط الزمني، وأضفنا المعلومات من النسخة طبق الأصل. عرض المخطط الزمني في صفحة الجلسات أعطى عملاءنا القدرة على فهم الإيقاع والمستوى الخاص بارتباط المستخدم في الجلسة بنظرة سريعة فقط. بعد ذلك، صنعنا نموذجًا تجريبيًا سريعًا. بعد اختبار فكرتنا الجديدة مع عملائنا، استنتجنا بأنه بينما كانت ردود الأفعال المتعلقة بفكرة هذا العنصر موجبة، بعض عملائنا شعروا بأن عملية التصفية الخاصة بنا كانت واهنة ومعقدة. أدركنا بأنه على الرغم من أن هذا الحل هو خطوة جيدة في الإتجاه الصحيح، كان لا يزال هنالك عمل يجب القيام به. أنشأنا نماذج جديدة مع اعتبار ردود الفعل، مما أدى للتصميم التالي: وبجانب عوامل التصفية الواهنة، أردنا حلًا يعطي الجدول مساحة أفقية أوسع والمزيد من الفراغ للمعلومات. قررنا أن نزيل العمود الأيسر وبناء واجهة جديدة كليًا للشرائح وميزة التصفية. بدت الواجهة الجديدة لعوامل التصفية أكثر بديهية، مرونة وأسهل في الاستخدام. استخدمنا عوامل تصفية JIRA كمرجع. أحببنا كيف يسمح JIRA باختيار كيفية إدخال استعلام أو قسم. بما أن سلسلة عملائنا الأساسية تتضمن مصممين ومالكي منتجات على طرف، وقراصنة على الطرف الآخر، فإن هذا حل مثالي لنا. وها هو التصميم النهائي: الملخص بمجرد إكمالنا دراسة الحالة الخاصة بنا، تعلمنا بأن Jaco يعود علينا بالفائدة بشكل أفضل عند إضافته لخط العمل الخاص بنا بالطرق التالية: بعد تحليل كل معلوماتنا من تحليلات جوجل Google Analytics لمعرفة حالتنا، نستخدم Jaco لتحديد كيف يجب علينا تحسين الأشياء. بعد كل نشر، نستخدم Jaco لرؤية الجلسات التي تم فيها استخدام ميزتنا الجديدة لكي نسبق المنحنى ونتنبأ بأداء الإعلان الجديد. هذا يمكننا من أن نتحقق من الفاعلية بدون الحاجة للانتظار لكمية كبيرة من حركة الاتصالات الخاصة بالتحاليل. مكنتنا هذه الطريقة من أن نكون معتمدين على البيانات خلال مرحلتنا المبكرة عندما لم تكن حركة الاتصالات الخاصة بنا كثيفة بشكل كافي ليتم تجميعها، وهذه الطريقة تساعدنا الآن بالتحرك بشكل أسرع وأن نكون معتمدين على البيانات بشكل أكبر حيث أننا نحصل على ردود فعل مباشرة من عملاء حقيقيين في غضون ساعة بعد أي طرح جديد. يقضي Jaco حاليًا آخر أسابيعه في مرحلة النسخة التجريبية المجانية، ونحن نعمل بحيوية لإضافة المزيد من التكاملات وعوامل التصفية المتقدمة. ننوي في المستقبل القريب بأن نضيف المزيد من الأدوات التي تسمح لمالكي المنتجات بأن يحصلوا على بيانات مجتمعة متعلقة باستخدام منتجهم من قبل كل من الجلسات وجوانب المستخدمين. ترجمة -بتصرف- للمقال ‎Creating a tool that records user interactions لصاحبه Ran Klein

إذا أردت يومًا ما أن ترسم رسمةً ولكن لم يكن لديك أي أدنى فكرة عن كيفية البدء، فإن هذا الشرح التوضيحي مناسبٌ جدًا لك. في هذا الشرح، سوف نتعلم كيفية ضبط مستند في Illustrator وصنع رسومات ذات جودة عالية، وهذا الشرح سهل أيضًا للمبتدئين. عليك الانتباه لكل جزء من الشرح لأن كل جزء مهم جدًا لإنتاج رسومات رائعة. لاحظ بأن كل شيء سوف تتعلمه في هذا الشرح هو باستخدام نظام Windows وبرنامج Adobe Illustrator CC 2017، لذلك قد تختلف عمليتك بعض الشيء إن كنت تستخدم نظامًا آخر أو إصدار برنامج آخر. الخطوة الأولى: التخطيط تعد هذه الخطوة مخادعةً قليلًا للبعض، فالعديد منا ليس جيدًا بما فيه الكفاية في الرسم على الورق، ولكن بالإمكان عمله إن بذلت بعض الجهد ومارست قليلًا. أحضر ورقةً وقلم وأخرج إبداعك على الورقة. بإمكانك القيام برسمتك الخاصة، ولكن إن أردت أن تتعلم الجزء الرقمي من الرسمة في الحال فبإمكانك استخدام الرسمة بالأسفل. قم بتحميل الرسمة السابقة واحفظها على جهاز الحاسوب الخاص بك. سوف نستخدم هذه الصورة في الخطوة التالية. الخطوة الثانية: تجهيز Adobe Illustrator للعمل في هذه الخطوة، سوف تحتاج لتشغيل برنامج Illustrator، ومن ثم الضغط على قائمة File في الزاوية العلوية لليسار، ثم اختر ملف جديد New أو قم بالضغط على Ctrl+N لإنشاء مستند جديد. والآن استخدم الصورة التي نزلتها مسبقًا وضعها على مستند Illustrator الذي أنشأتَه وسوف تبدو كالتالي. اختر أداة الشكل البيضوي (Ellipse Tool) واصنع شكلًا رفيعًا كالتالي: حدِّد هذا الشكل واسحبه لقائمة الفُرَش في الشريط على اليمين. بعد سحبك للشكل إلى قائمة الفُرَش (brushes)، سوف تظهر لك النافذة التالية، قم باختيار (Art Brush) ثم اضغط موافق. سوف تظهر لك نافذة جديدة بخيارات إضافية. اترك كل شيءٍ كما هو، فقط قم بتغيير الأسلوب (method) لـ(Tints) ثم اضغط موافق. رائع! إن قمت نفذت الخطوات السابقة بشكل صحيح، بإمكاننا الآن الانتقال للخطوة التالية. الخطوة الثالثة: رسم الشكل رقميًا اختر أداة فرشاة الرسم (Paintbrush Tool) واضبط الخيار "Stroke" على القيمة "‎0.25 pt" واختر الفرشاة التي قمتَ بصنعها سابقًا. أنت تسير على الطريق الصحيح. والآن، لنرسم فوق الصورة التي أمامنا. اعد رسم الصورة بعناية بمساعدة أداة فرشاة الرسم، واحرص على أن تتقاطع الخطوط كما هو موضح. سوف نزيل لاحقًا هذا الخطوط المتقاطعة ولكنّها ضرورية جدًا لرسمنا. ارسم باستخدام أداة فرشاة الرسم وأكمل الصورة، وسوف تبدو كالتالي: والآن، فإن أساس رسمنا أصبح جاهزًا، لنتحرك للخطوة التالية. الخطوة الرابعة: ضبط وتحسين الرسم الابتدائي بإمكانك الآن أن تزيل الرسمة على الورقة واتّباع الخطوة التالية. علينا الآن أن نزيل أي خطوط متقاطعة إضافية من رسمنا. قم بتحديد كل شيئ باستخدام أداة التحديد (Selection Tool) كما هو موضح بالصورة: اختر القائمة (Object) من الأعلى في برنامج Illustrator، ثم اختر تمديد الشكل (Expand Appearance). بعد أن تم تمديد الرسم، قم بالضغط على قائمة (Object) مجددًا واختر الرسم الحي (Live Paint) ثم اضغط على (Make) كما هو موضح: ثم اختر قائمة (Object) مرةً أخرى، واختر تمديد (Expand) كما هو في الأسفل: والآن، اضغط على أداة التحديد المباشر (Direct Selection Tool). قم بالضغط المستمر على زر Shift واختر الخطوط المتقاطعة، تمامًا كما هو في الصورة أسفل: اضغط على زر مسح (backspace) على لوحة المفاتيح وسوف تزول كل التقاطعات الإضافية ويصبح الشكل كالتالي: رائع! فقط بعض الخطوات الإضافية وسوف تحصل على رسم الزومبي المخيف. ننتقل للخطوة التالية. الخطوة الخامسة: إضافة اللمسات السحرية بالألوان اختر كل شي على اللوحة باستخدام أداة التحديد. والآن، اختر أداة دلو الدهان (Live Paint Bucket) من القائمة الجانبية كما هو موضح: افتح لوحة الألوان وابدأ بتلوين أجزاء مختلفة من الوجه بألوان مختلفة. بإمكانك أيضًا أن تضيف تدرجًا لونيًا للوجه للحصول على نتائج أفضل. اختر أداة دلو الدهان (Live Paint Bucket) ثم اختر أي لون تريد أن تطبقه، ثم اضغط على جزء معين من الوجه وسوف يتم اضافة اللون بسلاسة. لقد أضفت ألوانًا متعددة وبعض التدرجات لوجه الزومبي الخاص بي، ويبدو رائعًا. إن كنت لا تصدقني، بإمكانك إلقاء نظرة! هنالك احتمالات لانهائية يمكنك الحصول عليها باستخدام هذه الطريقة. بإمكانك صنع الكثير من رسوم الكارتون والحيوانات اللطيفة. قم بالممارسة لفترة من الزمن وأنا متأكد بأنك سوف تحصل على نتائج مذهلة من هذا الشرح. ترجمة -بتصرف- للمقال How to draw a scary zombie illustration in Adobe Illustrator using brush tool

أُعَد حاليًا مصمم تجربة المستخدم الأساسي في شركة DNV GL Energy. وهي شركة عالمية تقدم نصائح متخصصة وخدمات الشهادات لقسم الطاقة المتجددة حول العالم. نقوم كجزء من عملنا بتقديم منتجات وخدمات برمجية ومصنوعة بأيدي فريق التطوير الخاص بنا. مجال الطاقة المتجددة، وبمشاريعه ذات التركيز التقني والمخاطر العالية، لا يرتبط عادةً بعمل تجربة المستخدم ولكن البحث والتصميم على الصعيد الآخر يعتبران مهمين جدًا في عملية البرمجيات الخاصة بنا. يتوقع مستخدمونا الذين يعملون في هذا المجال بأن تتمكن أدواتهم البرمجية من مواكبة آخر التطورات في التكنولوجيا وبأفضل استخدام وأن يكون عملهم قادرًا على التعامل مع الهندسة والفيزياء المعقدة بعض الشيء. لذلك من المهم جدًا أن يفهم فريق التطوير الخاص بنا ما يحتاجه المستخدمون، فيعتبر بحث المستخدم واحدًا من أكثر الأنشطة المهمة لدينا في الشركة. يعتبر دور الباحث دورًا محوريًا كشخص يستطيع التعامل بشكل مباشر مع الأشخاص والكشف عن حاجاتهم، وحتى تلك الحاجيات التي لا يعرفون بأنهم يحتاجونها، ومن ثم يقوم الباحث بترجمة كل هذا على شكل تغذية راجعة لفريق التطوير حتى يستطيعوا العمل عليه فورًا. بعض أفضل تقدماتنا في العام الماضي كانت بشكل مباشر ناتجة عن المعلومات المتجمعة من خلال أنشطة البحث. على الرغم من أن عدد الشركات التي تدرك مدى الأهمية الموجودة في هذا النوع من العمل آخذ بالازدياد، يعتبر هذا من الصعب عمله على أية حال، خصوصًا إن كنت أنت وشركتك حديثي عهد لهذا التدريب. تأتي المهارة الحقيقية بالممارسة، ولكنني أؤمن بأن معرفتك لكيفية التصرف خلال مقابلة او موقف اختبار لتحصل على أكبر فائدة ممكنة، هي خطوة أولى ومهمة لكي تصبح باحث مستخدم. 1. سهِّل على الناس لن يعطيك المشاركون في البحث نتائجًا صادقة أو صريحة إن فقدوا الشعور بالراحة. قضاء الدقائق الأولى من الجلسة بالتحدث مع المشاركين وجعلهم يرتاحون بإمكانه أن يُحدث فرقًا شاسعًا بالنتائج. 2. قم بتهيئة الأجواء ابدأ الجلسة بتوضيح أهدافك، كن مباشرًا وصريحًا، لا تفترض بأن هنالك أي أحد يفهم المصطلحات البرمجية أو يعرف أي شيء عن مشروعك. لاحقًا، سوف تحتاج للرجوع للأهداف التي ذكرتها مسبقًا، لذلك قم بتدوينها. 3. اتّبع خطة معينة وليس سيناريو قبل بدء الجلسة، قم بتدوين ما تريد أن تعرفه والأسئلة التي تود سؤالها. كن جاهزًا للسير حسب الجلسة فسوف تحصل على مفاجآت كثيرة. على سبيل المثال: ليس من الغريب في عالم الطاقة المتجددة أن تجد مستخدمين يزيدون في المنتجات باستخدام أدوات الجداول (Spreadsheet tools) في حال لم يعجبهم البرنامج. تعلمك للمرونة وتغيير الأشياء سوف يأتي مع الخبرة. 4. عامل المستخدمين وكأنهم خبراء أنت موجود للاستماع وتقدير مستخدميك ووجهة نظرهم. عامل المشاركين في بحث تجربة المستخدم كخبراء واطلب نصيحتهم، سيكون المشتركون أكثر قابلية لإعطاء تغذية راجعة حقيقية إن جعلتهم يشعرون بأهميتهم أو اعطائهم الفرصة للتعبير عن خيباتهم واقتراحاتهم. 5. كن نزيهًا ليس من السهل على المصممين أن يبقوا غير متحيزين، ولكن يجب عليك ان تكون نزيهًا عند اختبارك لمنتجك. عادةً ما أقوم بالبداية بذكر أنني لم أحصل على المشاركة الكافية في التصميم، لذلك بإمكان المستخدمين أن يكونوا صريحين معي. يحتاج الناس لأن يشعروا بأنه من المقبول أن لا يعجبهم شيء ما أحيانًا وأنه لن تتم إهانة أي منهم إن تحدث عن ما يجول في عقله. 6. ادعُ إلى الانتقاد لا تقم بالدفاع عن منتجك. كن متقبلًا للانتقاد، سوف يساعدك هذا على المدى البعيد. إن كان شيءٌ ما ليس على ما يرام، فمن الأفضل أن يتم معرفته بينما لا يزال هنالك وقت لتعديله. 7. اسأل أسئلة صريحة وليست غامضة قم دائمًا باختيار أسئلتك بعناية تامة وتجنب الدفع بأفكارك المسبقة على الآخرين. بدلًا من ذلك، قم بدعوة مستخدميك لتشكيل اجاباتهم الخاصة، حيث أن الأسئلة الصريحة والمفتوحة لديها فرصة أكبر لجعلك تكتشف أشياء جديدة. وبدلًا من سؤالك: "هل ذهبت لتلك الشاشة لإكمال مشروعك؟"، اسأل: "لماذا ذهبت لتلك الشاشة؟". وبدلًا من سؤالك: "هل أعجبتك هذه الميزة الجديدة؟"، اسأل: "هل بإمكانك إخباري عن رأيك بالميزة التي جربتها للتو؟". 8. قم بالسؤال باستخدام "لماذا؟" و"كيف؟" عندما يحدث أمر مثير للاهتمام وتريد أن تعرف المزيد عنه، قم بالسؤال. هذه فائدة وجود خطة بحث تمكنك من أن تكون مرنًا في حال قام مستخدمك بعمل شيء غير متوقع ومثير للاهتمام. أسئلة بسيطة مثل: "لماذا فعلت ذلك؟" أو "هل يمكنك أن تخبرني المزيد عن ذلك؟" تكفي لكشف المزيد من المعلومات المفصلة. 9. أبقِ سَير الجلسة حسب المخطط أحيانًا، تحتاج المحادثة لدَفعات خفيفة لتبقى على المسار، خاصًة بوجود وقت محدود والعديد من الأشياء المهمة لتحرّيها. إن كنت قد هيأت الأجواء مسبقًا في البداية، بإمكانك دائمًا أن تعرّج على الأهداف التي قمت بذكرها حتى تتمكن من معرفة أي الأشياء ذات صلة بالأهداف. وتذكر مجددًا أن تبقى منفتحًا للأشياء الجديدة في حال أراد مستخدمك أن يعبّر عن شيء مهم بالنسبة له، وحاول أن تخلق وقتًا إضافيًا لذلك. 10. اسأل السؤال ليتم توضيحه وليس ليتم قوله فقط تقريبًا، من المفضل دائمًا أن تشاهد الناس يستخدمون منتجك بالفعل، فسوف ترى أشياءً لم يكونوا يعتقدون بأنها مهمة أو أشياء قد نسوا ذكرها. سوف تجد أيضًا أشياءً بارزة وأكثر سهولة للفهم بفضل هذا السياق. 11. ابحث عن الأشياء الغير متحَدّث عنها الباحث الجيد يلاحظ ردود الفعل الغير مفصح عنها، حيث أن ما يقول أو يفعل الناس قد يكون مختلفًا جدًا، لا يمكنك أن تعتمد فقط على كلمات المشاركين. 12. قم بالانتقال والتوثيق بشكل خفيف كن كذبابة على الحائط وحاول قدر المستطاع أن لا تشوش على أجواء الناس. محاولة التسهيل على الناس وأخذ الملاحظات في نفس الوقت صعب جدًا، لذلك أوجد طريقةً لأخذ ملاحظات قصيرة وفعّالة بنفس الوقت أو قم بطلب المساعدة من زميلٍ لك. ابتعد عن شاشة الحاسوب إن أمكن وقم بالنظر إلى الناس وجهًا لوجه، حيث أنك تريد أن تختلط معهم وتسهّل الأمور عليهم. 13. اكتب تلخيصًا بالنتائج في أسرع وقت ممكن لأنك سوف تنسى بسرعة، قم بكتابة ملخص عن نتائجك بينما لاتزال المعلومات جديدة في عقلك. 14. اكتب استنتاجات مختصرة وقابلة للمشاركة يعتبر بحثك عقيمًا، ما لم يستطع الأخرون من فهم توصياتك والتصرف بها، لذلك خذ بعين الاعتبار كل من جمهورك، أصحاب المصلحة، مدراء المنتج، المطورون ...إلخ، وقم بإعطائهم ردود فعل مختصرة بلغة يسهل عليهم فهمها. ترجمة -بتصرف- للمقال How to conduct yourself in a UX research session‎ لصاحبه Matt Corrall

كثيرًا ما سمِعتَ بأنك تستطيع صنع مجموعتك الخاصة من الأيقونات في فوتوشوب، او بإمكانك البحث عنها على الإنترنت، ولكن ماذا إن أخبرتك بأنك تستطيع الوصول إلى مكتبات كبيرة من الأيقونات مباشرةً في فوتوشوب؟ نود اليوم أن نقدم لك هذه الإضافة في فوتوشوب. أولًا: مجموعة FlatIcon أكثر من 10,000 شكل متجه تضاف مباشرةً إلى فوتوشوب. ثانيًا: مجموعة Pixel 2 Vector تعرّف على أكبر مجموعة من الأيقونات المستخدمة في فوتوشوب بالمجان! ثالثًا: مجموعة Creative Market الوصول المباشر لمحتوى التصميم المميز من Creative Market. بإمكانك إيجاد المزيد على موقع blogging.com، وبإمكانك إيجاد مكونات إضافية اكثر من المتجهات في فوتوشوب: هذه القائمة تحتوي على أفضل الإضافات لفوتوشوب: تصميم المواقع الإلكترونية، والفُرَش، وأنماط الرسم، وتعديلات الألوان، وسير العمل، والفلترة، والمؤثرات الخاصة والتحجيم. ترجمة -بتصرف- للمقال ‎Access vector icons لصاحبه Zsolt Mathe

إن كنت مصممًا، فلا شك بأنك تعاملت عدة مرات من قبل مع صفحات تنسيق CSS، وربما قد سمعت زملاءك يتحدثون عن مدى أهميتها في تنسيق المواقع، أو تقليل وقت تحميل الصفحة، أو توفير الوقت على المطورين. (فهي بالتأكيد أقل تعقيدًا من تنسيق كل صفحة على حدى في شيفرة HTML). بإمكان CSS أن تنقذك عندما تريد إعادة تصنيف موقعك الإلكتروني بالكامل، حيث أن تحديث صفحات النسق الخاصة بالموقع سوف يطبّق التغييرات على المنصة ككل. وبإمكان CSS أن تكون ذات أهمية عالية جدًا لكل من المصممين والمطورين عندما يعملون سويًا لصنع مواقع جميلة وحيوية. ولكن إن كنت لا تزال تتساءل: "كيف بإمكان معرفتي بـ CSS أن تفيدني في العمل الخاص بي؟" أو أنك ببساطة غير متأكد من كيفية استخدامها. إذًا استمر بالقراءة خطوة بخطوة عبر الدليل الإرشادي حول CSS، وكيفية ابقاء صفحات التنسيق الخاصة بك منظمة ومرتبة لتستفيد في تصاميمك ولتفيد العملاء أيضًا. 1. واكب الصيحة- استخدم إطارات العمل (Frameworks) تمامًا كما توضح رموز الموضة انطباعًا عن ما سيتوفر من صيحات هذا الموسم، فإن الصيحات التقنية تؤثر على تنسيق آلاف المواقع. كيف ذلك؟ ينشئ وينشر مطورو الويب "إطارات العمل"، وهي مجموعة من القوانين للعناصر المشتركة في الموقع. فإن هذا يعطي المطورين نقطة انطلاق لتصميم الموقع. بإمكان إطارات العمل"Frameworks" أن تساعد على الحصول على موقع بشكل لائق مستعد للعمل بسرعة. تخيل مثلًا أن تكون واثقًا من أنك ستبدو رائعًا بارتدائك لأي شيء على الرف في متجر للملابس الأنيقة، لذلك لا ترغب لموقعك بأن يكون غريبًا كارتدائك لقميصٍ أخضر فاقع مع حذاء أرجواني. إطار العمل هو قاعدة جديرة بالثقة، ولكن لا يزال عليك الاختبار. قم بتعديل الألوان قليلًا، والخطوط...إلخ. ما يدريك؟ ربما ستصبح صفحات النسق الخاصة بك الإطار الأكثر شهرة. وفي النهاية، من كان يظن بأن سراويل الجينز قد تعود مجددًا؟ أو أن تصبح صيحة؟ أليس كذلك؟ 2. اسعَ في سبيل البساطة ستجد بأنه كلما كبر الموقع، سوف تحتاج لتطوير قائمة طويلة جدًا من العناصر المختلفة وقواعد CSS. وبعض هذه القواعد قد تتداخل أو تتقاطع في بعض الأحيان (في هذه الحالة، سوف تتفوق القاعدة الأكثر تفصيلًا). وقد تضطر لعمل شيفرة أكثر مما كنت تتوقع، خصوصًا باعتبار التغيرات المتعددة التي تحتاجها لقاعدةٍ ما لمتصفحات وأحجام شاشة مختلفة. سرعان ما ستشعر كأنك تسبح في برك من شيفرات CSS، وتصارع من أجل إيجاد القاعدة المطلوبة للقسم المطلوب الذي تريد تعديله. من الجيد أن تتأكد قبل إضافتك لقاعدة تنسيق جديدة، فقد تُغنيك قاعدةٌ موجودة مسبقًا ولا تحتاج لأي إضافة. 3. قم ببناء حياتك هنالك عدّة طرق بإمكانك استخدامها لإعادة تحليل شيفرة CSS الخاصة بك لتسهيل استخدام الموقع والانتقال فيه. بعض أسهل الطرق تعد أكثرها فاعلية ولديها الفائدة الأكبر. ها هي بعض أسرع الطرق: حافظ على المسافات: حفاظك على التباعد بين القواعد بداخل البيانات في ملفك يجعلها أسهل في القراءة. استخدم الدلالات أو أسماء المعرفات أو الأصناف (class/id names) المألوفة: بدلًا من استخدام اسم صنف مثل "bottom_menu"، حاول أن تستخدم أسماء الوسوم الدلالية مثل "footer". أما عندما يكون لديك صورة في قسم الاتصال "contact"، تأكد من استخدامك للصنف في الصورة، مثل "contact_image". طبِّق مبدأ DRY (ابتعد عن التكرار): أنت ترغب عادةً في تكرار الشيفرة الخاصة بك ولو قليلًا. هل ترى بأن التنسيق "background-color: #000" متكررًا في ملف CSS الخاص بك؟ فكر بكتابة هذا التنسيق مرة واحدة بدلًا من التكرار، واستخدم عدة محددات (selectors) على التنسيق الواحد. اختر ترتيبك باستخدام هذه الأدوات: شغل ملف CSS الخاص بك من خلال CSS Lint أو W3C، سوف يساعدك هذا في تحليل ملف CSS الخاص بك بشكل صحيح وتحديد مناطق الخطأ. وتعتبر أدوات المطور (developer tools) الموجودة في متصفح الويب مفيدة جدًا في تحديد عناصر معينة في موقعك الإلكتروني واستخدام المنطقة كحقل تجارب لاختبار تنسيقات وأوضاع مختلفة. 4. تخطى مرحلة الأساسيات إن كنت تملك بعض مهارات البرمجة، فبإمكانك استخدام خيارات CSS متقدمة أكثر مثل (SASS) أو (LESS). مع هذه الخيارات التي تسبق المعالجات (pre-processors)، بإمكانك الاستفادة من خيارات برمجة أكثر تعقيدًا كالمتغيرات (variables)، والتشعبات (nesting)، والمخاليط (mixins) والدوال (functions) لتنظيف ملف CSS الخاص بك بشكل إضافي وتجنب التكرار. تعدُّ CSS أداةً مهمة جدًا لتطوير طريقة عرض موقعك الإلكتروني. هذه المرئيات هي ما تصنع شعارك الخاص وهويتك، وهي ما يؤثر في تجربة المستخدم UX الخاصة بموقعك. ولكن، كلما زادت القوة، زادت المسؤولية. تذكر بأن تبقي ملف CSS الخاص بك منظمًا، بالضبط كإبقاء الخزانة مرتبة مهمٌ جدًا لتستطيع إيجاد قميصك المفضل بسهولة، فإن إبقاء ملف CSS منظمًا سوف يساعد على تنفيذ أفكار التصميم الفورية بدون أي تأخير. ترجمة -بتصرف- للمقال How to avoid chaos in your style sheets لصاحبه Eric An

اصنع نموذج تصميم موقع تعليمي متكامل بدءًا ببناء التخطيط الأولي، ومن ثم الانتقال لتصميم العناصر الفردية للصفحة. والنتيجة هي نسق صفحةٍ إلكترونيةٍ عصرية وجذابة وناضرة وجاهزة للبرمجة. وبأخذ العبرة من العديد من التصاميم العصرية للمواقع الإلكترونية، سوف ننتج هذا التصميم الجذاب والناضر. تشمل المميزات الأساسية على الأشرطة الأفقية التي تقسّم المحتوى لمناطق محددة مثل أن تكون منطقة رأس الصفحة مفعمة بالألوان وتعرّف عن الموقع، أو أن يكون هنالك رسالة ترحيبية بها أمثلة عن الأعمال الخاصة بالموقع، أو حتى نسق رئيسي ذو عمودين وذيل صفحةٍ مليء بالمصادر. البداية الأمثل لأي تصميم هي الرسم التخطيطي على ورقة، إذ أن التملك والتحكم بالقلم يساعد على تجسيد النسق الصعب بسهولة. إيجاد تخطيط شبكي (Wireframe) يساعد على تطوير شكلٍ هرمي، بالإضافة إلى إعطاء رؤية عن أفضل الأماكن للعناصر الأساسية في التصميم. أنشئ ملفًا جديدًا في فوتوشوب. بالنسبة لي، فأنا أميل لجعل حجم العمل الفني مشابهًا للحجم المتداول للشاشات الكبيرة، حيث أن هذا يعطي توضيحًا أفضل للشكل الكلي للموقع. ضع خطوطًا إرشادية بعرض "960 بيكسل " في منتصف صفحة الويب. واصنع شبكةً بسيطة لتساعدك على وضع عناصر الصفحة عليها. إبدأ بصناعة شريط رأس الصفحة، وارسم تحديدًا (Selection) يحيط بعرض الصفحة كلها ومن ثم املأها (Fill) باللون الأبيض. إضغط بشكلٍ مزدوج على الطبقة (Layer) لعرض تنسيقات الطبقة وقم بإضافة تغطية بالتدرج اللوني (Gradient Overlay) من اللون الأبيض للون الرمادي متدرج بشكل عمودي. فيما بعد، ارسم منطقة الرأس الأساسية حيث سيتم وضع المحتوى المميز فيها، وفي طبقة جديدة، ارسم تحديدًا (selection) ومن ثم أضف تدرجًا لونيًا باستخدامك للونين فاقعين، وقم أيضًا بإضافة ظل داخلي رقيق لإضفاء العمق على التصميم. اللمسات الرقيقة لنسيج التصميم بإمكانها أن تضيف الحياة للتصميم. وبينما يتم تحديد منطقة الرأس بواسطة قناع (Mask)، قم بالضغط على كل من أزرار CMD+SHIFT+C للقيام بنسخها بشكل مندمج وموحد، ومن ثم قم بإلصاقها على طبقة جديدة. ثم بالذهاب لقائمة "Filter>‏ Noise>‏ Add Noise" لخلق نسيج بسيط، ثم قم بضبط وضع المزج (Blending Mode) على الاختيار (Multiply) وقم بتقليل التعتيم حتى يصل للدرجة المناسبة. ألصق شعار الشركة، ومن ثم قم بتحريكه على الشاشة حسب الشبكة التي سبق أن أنشأتها. أضف بعض اللمسات من خلال خيارات نسق الطبقة (Layer Style Options) وأضف تدرجًا لونيًا ليتناسب مع ألوان قائمة الرأس المميزة، ومن ثم اصنع ظلًا داخليًا ناعمًا جدًا. استخدم أداة الكتابة (Type Tool) لانشاء نص على شريط التنقل الرئيسي للموقع، اجعل الخط بلون رمادي متوسط، بينما تقوم باستخدام درجة أغمق للرابط النشط. يعد رأس الصفحة البارز أو المميز منطقةً رائعة للتعريف عن الموقع، ومع ألوانٍ فاقعة في الخلف، فإنه يجذب التركيز الأكثر من المستخدمين. استخدم هذه المساحة لكتابة عنوان تقديمي مفاجئ وغير متوقع بخط معدل يتناسب مع العلامة التجارية للشركة. استمر بتجسيد المحتوى التقديمي، ولكن هذه المرة استخدم خط (Arial) أو (Helvetica) حتى تتمكن من وضع النص بتنسيق "html" التقليدي وبدون أساليب استبدال الصور. ضع صورة حاسوب محمول في المنطقة المميزة (وهنا مجموعة من الأمثلة)، وهذا يتناسب بشكل تام مع طبيعة الشركة التخيلية، وتوفر منطقة مركزية ممتازة لعرض أمثلة على الأعمال على شاشة الجهاز المحمول. قم بلفت الانتباه والتأكيد على هذه المنطقة المركزية بوضعك لتدرج لوني دائري منبعث من خلف الحاسوب المحمول. فإن هذا يضيف تفصيلًا صغيرًا يبرز العنصر عن باقي الصفحة. أما أسفل المنطقة الرئيسية في الرأس، فقم بعمل تحديد جديد واملأه بتدرج لوني بين الأبيض والرمادي. قم بتجزئة القسم الأوسط من الصفحة لعمودين باستخدام خطوط الإرشاد حسب الشبكة التي قمت بعملها، بحيث يكون المحتوى الرئيسي في العمود الأيسر، بينما يحتوي العمود الأيمن على شريط جانبي أقل سماكة. وباستخدام أداة الكتابة، قم بإضافة محتوى وهمي. ثم قم بتغيير الحجم والاتجاه لتعطي قطعة من النص سهلة في القراءة والفهم. أسفل منطقة النص الرئيسي، بإمكانك صنع منطقة لعرض آخر منشورات المدونة. قسِّم العمود لعمودين آخرين وثم أنشئ تحديدًا لمثال عن واجهة المنشور. ويجب أن تكون روابط العنوان واضحة للمستخدم حتى يضغط عليها، لذلك غيّر ألوانها لجذب الانتباه. استخدم أداة المستطيل المدور (Rounded Rectangle Tool) لرسم صندوق في الشريط الجانبي. ولا يهم اللون الأساسي، إذ سنغيّره في المرحلة التالية. اضغط ضغطة مزدوجة على الطبقة وأضف مجموعة من تنسيقات الطبقة، بما فيها التدرج بين الأبيض والرمادي، والحد الخارجي (Stroke) وظل داخلي ناعم. استخدم هذا الشريط الجانبي لصنع قسم خاص للإعلان عن آخر المشاريع المميزة على الموقع. بإمكان العناصر أن تكون عبارة عن قصاصات صور صغيرة ونصوص. ارسم مستطيلًا دائريًا آخر ليتم استخدامه كزر، ثم قم بإضافة القليل من تنسيقات الطبقة مثل التدرج اللوني والحد الخارجي (stroke) لإعطاء تنسيق للزر يتناسب مع الشكل الكلي للصفحة ذو اللون الرمادي الجذاب. اصنع علامةً وصفية وقصيرة للزر الذي يدعوا المستخدم للاستمرار في تصفح الموقع ورؤية المشاريع والأعمال التالية. قم بالإشارة لنهاية المحتوى بواسطة رسم منطقة ذيل للصفحة، ثم قم بتعبئة المنطقة بلون رمادي باهت لتمييزها عن منطقة المحتوى الرئيسي. ارسم ستارًا دائريًا ومن ثم عبّئه بتدرج لوني دائري بين الأسود والشفاف. قم بالضغط على CMD+T لتستطيع التحكم بالتحديد، ثم قم بضغط أو تمديد التدرج اللوني للحصول على رسم شبيه بالظل. حرِّك الظل لمنتصف الشاشة، ثم احذف المنطقة الزائدة فوق ذيل الصفحة. سوف تحصل على ظل رقيق يبرز الصفحة الرئيسية ويضيف بعض التفصيل للتصميم. تعد منطقة ذيل الصفحة منطقةً مناسبة لعرض العناصر الثانوية للصفحة، على سبيل المثال: بإمكانك وضع بيانات تسجيل الدخول الخاصة بالعميل. قم بتجسيد التصميم باستخدام أداة الكتابة، ثم ارسم صندوقي إدخال صغيرين، وقم بتنسيق الصندوقين بظل داخلي خفيف. استخدم المنطقة الوسطى لذيل الصفحة لكي تعرض رسالة معينة عن الشركة. اضبط النص باستخدام نفس خطوط رأس وحاشية الصفحة. وفي النهاية، أضف بياناتٍ للتواصل في يمين المنطقة السفلية. هذه التفاصيل سوف تصبح مفيدة للمستخدم عند استخدامه للموقع. قم بإبراز أهم الجوانب من خلال الحجم أو اللون. يشمل التصميم النهائي على كل العناصر المطلوبة بعناية بداخل الصفحة من خلال إبقاء كل شيء حسب الشبكة التي أنشأناها في البداية. والنتيجة هي تنسيق منظم وجذاب مع الكثير من اللون الرمادي الرقيق لإضفاء العمق للموقع، وعندها يتم استخدام الألوان لتحديد المناطق المميزة والمحتوى المهم. ترجمة -بتصرف- للمقال ‎Create a Clean Modern Website Design in Photoshop

أنت كمصمم, إذا قمت يومًا ما بتسليم أعجوبتك المرئية لمطور فأنت تعرف تمامًا مدى الجدل الذي ينتج عن ذلك. هل ما تخيلته قابل للعمل عند النظر إليه من المنظور التطويري؟ هل يعلم المطور ما الآلية التي كانت تدور في عقلك؟ هل يقوم مطوّرك حقًا بالتطوير؟ القائمة تطول وتطول ولكن دائمًا ما يكون هنالك طرفين للقصة. وماذا عن المطور الذي ينتظر تصميمك؟ وللإجابة على هذا السؤال وعلى أسئلة أخرى قمنا بمقابلة فريقنا الخاص في KlientBoost للخروج بهذه الست نصائح لتعاون أفضل بين المطور والمصمم. كل هذا يبدأ بالتركيز على المستخدم يجب على كل من المطورين والمصممين أن يعملوا دائمًا وأن يُبقوا المستخدم في الحسبان. إن لم تكن التجربة أفضل للمستخدم فلا فائدة من تصميم او حتى بناء أي شيء أي أن جهودك المبذولة لن تكون متماثلة مع أهداف العمل. فإما إن كنت تصمم موقعًا جديدًا أو تطور خصائص جديدة للمنتج فيجب من البداية على فِرق التصميم والتطوير أن يكون لديها هدفًا مشتركًا لتطوير تجربة المستخدم. ولكن كيف بالإمكان أن نعرف ما هو أفضل للمستخدم؟ بالاختبار. وحسب "تن كادويك" من وكالة Five, فإن تجربة المستخدم واختبار المنتج يبدآن بمجرد بدء الأسبوع الأول من المشروع. والاختبار لتحسين تجربة المستخدم لا يتوقف أبداً خلال فترة حياة المشروع. تعطينا مجموعة Nielsen Norman قائمةً يجب على كل من المصممين والمطورين أن يتبعوها عندما يتعلق الأمر باختبار قابلية الاستخدام. وبمجرد اكتمال مرحلة ما قبل الاختبار, فإن فرق التصميم والتطوير تتقارب أكثر وتعلم بالضبط ما يجب التركيز عليه. كلما كان مبكرًا، كان أفضل لن تعلم فِرق التطوير أي شيء عادةً عن المشروع حتى تصلهم ملفات التصميم. وإذا كانت هذه الملفات من الصعب جدًا تنفيذها, فإن هذا يعني بأن المصمم أهدر وقته وأن عليه الآن العودة منذ البداية. ولتجنب حدوث هذا, فإن المصممين والمطورين يحتاجون للعمل سوياً منذ البداية. والانخراط منذ المراحل الأولى يضمن بأن تبقى كل الأطراف متوافقة سوياً ولديها نفس التركيز طوال الوقت. وجدت دراسة في قسم الهندسة الصناعية والإدارة في جامعة "أولو" بفنلندا بأن التعاون المبكر في مشروع ما بين جميع الأطراف يؤدي إلى: فرصة ضئيلة في تطوير تصاميم ركيكة. رضى أكبر بكثير عن عمل المنتج واستخدامه من قبل المستخدم. خلق مساحة للحلول الإبداعية والتبادل المكثف للأفكار قبل فوات الأوان. ولا يختلف المصممون والمطورون في هذا الشأن. أنظمة أقوى تعني عمليات أفضل. عندما تمتلك كل الفرق الأدوات والمعرفة المطلوبتين لإنجاز شيء ما فهي عادةً ما تنجح في انجازه. ولكن أحد الأخطاء الشائعة التي ستجدها بين المصممين والمطورين هي أحياناً أشياء بسيطة مثل: معايير التسمية. الأحجام. الهوامش. الحشوات. الشبكات. ولكن وجود ترتيب موحد من العمليات وطريقة معينة للتعامل معها يساعد على تسريع الأمور, وذلك لأنه لن يتم اهدار الوقت في الإجابة على أسئلة من السهل الإجابة عليها. وهذا يساعد على الوصول لهدف موحد لكل من المصممين والمطورين والذين لن يتعثروا بالمشاكل اللوجستية. وعندما يتعلق الأمر بالأنظمة والعمليات, فإنه هنا تحديداً يجب عليك الحصول على قائمة مفصلة يتّبعها كل فريق من الفرق قبل الانتقال للمرحلة التالية من المشروع. مما يؤدي إلى... ما قبل التسليم بتتبعك لكل نصائحنا حتى هذه النقطة فإنك بالتأكيد تدرك مدى أهمية تسليم مشروعك جاهزًا وبدون أي نقص للتحرك للمرحلة التالية. وبينما يقترب المصممون من إكمال أعمالهم, فإنه من المهم أن تعرج على الأهداف الرئيسية للمشروع للتأكد من اجتيازه للفحص. أسئلة مثل المذكورة بالأسفل ستساعدك على أن تجد تحديثات يجب أن تحدث قبل تمرير المشروع لفريق التطوير: هل جودة التصميم عالية وهل أنت راضٍ عنها؟ هل يحسّن التصميم تجربة المستخدم؟ هل تم اختبار التصميم من قِبل الزبائن الواقعيين؟ بالإجابة بنعم على كل الأسئلة السابقة, فإنك تقلل من فرصة عمل أي إعادة تصميم أو إعادة عمل. سيكون من الصعب عليك أن تجري أي تعديلات على التصميم بمجرد وصوله لأيدي المطور. كيف تسير الأمور؟ 10 مرات بإمكانك قراءة نبرة صوت أحد أو لغة جسده عندما تقابله, ولكن هل هذا كله يختفي عند قراءتك لنص أو لبريد إلكتروني؟ هذا هو نفس الشيء الذي يحدث مع المصممين والمطورين. بمجرد مرور المشروع من مرحلة ما لأخرى, فإن هنالك فرصة كبيرة بأن ترجمة المشروع سوف تختلف من عضو فريق لآخر. هل قصدت أن تعمل هذا لتصميمك أم ذاك؟ وبالفحص المتكرر بين المصممين والمطورين, يمكن للمشروع أن يستمر بالتحرك وذلك بفضل إزالة مشاكل التواصل والتفسير. التواصل الواقعي كلما عمل المصممون والمطورون سويًا على مشاريعك, زادت فرص التوتر. ومع فرقنا في KlientBoost, وجدنا بأنه من سرعان ما نسينا بأننا نعمل كفريق واحد للوصول لنفس الهدف. أما بوجود الوعي الذاتي والإيثار عند التواصل مع أعضاء الفريق الآخرين ستكون قادرًا على إيجاد حل منطقي لأي مشكلة قد تحدث وبسرعة. وباتّباع ال5 نصائح السابقة, بإمكانك وضع أساسات صلبة للتواصل تمنع المشاكل من التصاعد في المقام الأول. والآن حان دورك الفرق التي تتواصل بشكل منفتح وبشكل متكرر تبني منتجات أفضل. جرب هذه النصائح الستة في مؤسستك ونؤمن بأنك ستجد المشاريع أكثر سلاسة وسرعة وسيحظى الناس بالمزيد من المرح أيضًا. ترجمة -بتصرف- للمقال ‎6 tasty ways for designers and developers to collaborate better لصاحبه Johnathan Dane

تعد Univision شبكة القنوات المتحدثة باللغة الإسبانية الأولى على العالم. وباستهداف اللاتينيين في الولايات المتحدة، فهي تركز بشكل رئيسي على المسلسلات التلفزيونية والبرامج المتنوعة والرياضية. وفي عام 2015، أعدنا تصميم موقع Univision.com بشكل كامل حيث أن آخر مرة كان قد أُعيد تصميمه كانت في عام 2011، ولكن حان الوقت لإصلاح التنقُّل المعقَّد بداخل الموقع والأشكال الغير متناسقة، وفي النهاية، جعله موقعًا سريع الاستجابة. استمر بالقراءة لأخذ فكرة عن ما قمنا به. المشاكل التي تم التخلص منها في إعادة التصميم التنقل المعقد التنقل في الموقع كان ولا يزال أحد أكبر مشاكلنا. كيف يتنقَّل الزوار عبر موقع Univision.com وما الذي يبحثون عنه؟ ومنذ إعادة التصميم التي تمت في عام 2011، فقد عانى الموقع في ما يتعلق بهويته (هل هو شبكة أم بوابة إلكترونية؟) وكان الانتقال قد تضمن المزيد والمزيد من الأجزاء المتراكمة خلال الفترة ما بين 2011-2015. وتعد هذه مشكلةً بالنسبة للزوار الجدد للموقع، بينما يعرف زوار موقع Univision الدائمين طريقهم لما يبحثون عنه مثل الأبراج وآخر الإشاعات والقصص الحديثة. الأشكال غير المتناسقة للقوالب نتجت هذه الأشكال غير المتناسقة عن مجموعة من التجارب الفاشلة على مر السنين حيث أن الفرق الصغيرة في مؤسستنا حاولوا أن يوسموا أنفسهم على الموقع وقام كل فريق من فرق النشر بإضافة أزرار الانتقال حسب الحاجة لمساعدة الزوار بإيجاد المحتوى وأدى هذا إلى وجود 3 أزرار انتقال في كل صفحة وما يقارب 11 عنصرًا في كل زر. في النهاية، كان من الصعب إيجاد أي شي، لأنه لم يتم التخلص من الأشياء الغير مهمة، وبسبب صعوبة إيجاد الأشياء، كان يجب إما وضعها في القمة أو تكرارها مرتين وثلاثة. وعلى سبيل المثال، فإن القسم الترفيهي من الموقع كان يشمل: 9 عناصر انتقال رئيسية 4 رؤوس انتقال فرعية 16 رابطاً إضافيًا لم يكن الموقع متجاوبًا 80% من مستخدمي موقع Univision.com يستخدمون إصدار الأجهزة المحمولة. ولعدة سنوات، كان الناشرون والمحررون مطالبين بصنع المحتوى ليناسب جهاز الحاسوب ومن ثم نشر المحتوى مرة أخرى ليناسب الجهاز المحمول في سلسلة مختلفة من العمل. أو كان بإمكانهم اختيار محتوى معين لكي لا يتم نشره على "التجربة المبسطة" للجهاز المحمول مما حرم معظم جمهورنا من التجربة الكاملة للموقع. التنقل المبسط بشكل مفرط كان أيضًا من العوائق: قمنا باستعراض التنقل الرئيسي والثانوي بجانب بناء صفحات المحتوى الخاصة بنا أولاً (مقالات وفيديوهات وشرائح عرض). عملية التصميم الخاصة بنا قمنا بالعمل بشكل سريع جدًا خلال فترات قصيرة أسبوعيًا، وبالتزامن مع الفريق الذي كان يبني نظام إدارة المحتوى CMS من الصفر بالإضافة لإنشائه للتجربة الخاصة بالموقع. هذه العملية لم يكن من السهل مواكبتها وذلك لاحتوائها على انتقادات يومية للتصميم بين الفرق الصغيرة وتكرارات يومية للتفاعلات المعقدة والقوالب المتجاوبة هذا وبالإضافة لانتقادات أصحاب المصلحة والتي قد تتطلب مراجعات ومواصفات متأخرة جدًا ومكتوبة، كل هذا في أسبوع واحد. ولكن الجانب المشرق الوحيد من وراء هذا كان بأن فريقنا صنع قراراتٍ بشكل سريع وتقدم للأمام بدون إهدار الوقت في محاولة جعل كل شيء مثاليًا. الأدوات استخدامنا لبرنامجي Sketch و InVision جعل عمليتنا تتم بسلاسة كبيرة. تسليم التصاميم وفي نهاية كل أسبوع، كنا نسلم مجلدًا بالملفات النهائية وصفحات المواصفات التي قد تضاف لمجلد التنسيقات في برنامج Dropbox لفريق البرمجة. وكانت الملفات النهائية تتضمن مستندات Sketch لعناصر التصميم والمراجع المرئية بالإضافة لملف Omnigraffle مع شرح مرئي عن كيفية تغير التنسيقات عند نقاط مختلفة. وعند التسليم الأولي للتصاميم، كنا نتلقى انتقادًا على الملفات المسلّمة وكنا نجيب على أي أسئلة لدى فريق التطوير. ومنذ ذلك الحين، وبعملنا بنظام سريع على فترات قصيرة على مدار أسبوعين، سلّمنا ملفات عن طريق صناعة مستويات في برنامج JIRA لتعيين المهام. راجعنا، وسجلنا الملاحظات، واختبرنا. التحسينات التي أجريت نظام تنقّل عام مبسط ب7 عناصر: انتقال عاملي موحد لجميع خصائص Univision وتقليل عدد القوائم المنسدلة وتبسيط كيفية إيجاد المستخدم للمحتوى. تنقّل متجاوب للهاتف المحمول: جعل تجربة الهاتف المحمول والحاسوب هي نفسها مما يسمح للمستخدمين بإيجاد المحتوى في نفس المكان بالرغم من الجهاز المستخدم. ترك المساحات في القوائم المنسدلة والتي تمكن من الترويج للأحداث المميزة: وذلك يعني الترويج للأحداث في مساحة كافية مما يسهل على المستخدمين إيجادها بشكل متكرر خلال عرض هذه الأحداث مباشرةً على التلفاز. التنقل التفصيلي الذي يساعد المستخدم: وبسبب كثرة مراحل التنقل وخاصةً في القسم الرياضي، فإن مستخدمينا قد احتاجوا لطريقة لإرجاعهم للخلف لرؤية الفرق الرياضية والدوريات الأخرى. الدروس المستفادة أيقونة المزيد "Más" غير مفهومة: حاولنا في تصفح الهاتف المحمول أن نستخدم هذه العلامة لمساعدة المستخدم على إظهار المزيد من عناصر التنقل ولكن المستخدمين لم يفهموا هذه العلامة. بعض الوظائف لم نستطع إنشائها كما هي مصممة (مثل اللافتات الرأسية والانتقال التفصيلي): بسبب محدودية القالب، فإن الصور من نوع full-bleed (أي عدم وجود حاشية بين حافة الصورة وحافة الشاشة) و full-browser-width (أي امتداد العرض على كامل نافذة المتصفح) لم تعمل. واحتاج الانتقال التفصيلي لوقت أكثر للتنفيذ بناءًا على كيف تم انشاء الصفحات بالتسلسل الهرمي. لم يكن المحررون يستخدمون القائمة كما هو مخطط: استخدم المحررون والناشرون عناوين لم تلتزم بالحد الأقصى للأحرف واستخدموا عمود التنقل على اليسار كوصلة للصفحة الرئيسية مما أدى لخلل عند استخدام التنقل على الهاتف المحمول. بالإضافة للنظر في كيفية نجاح انتقالنا، فقد رجعنا للخلف ونظرنا إلى ما كان يعمل وما لم يكن يعمل في عمليتنا: دليل تصميم InDesign مسطح أصبح بحجم 189 صفحة. أدركنا بأن تعديل وتحديث هذا الملف كان مربكًا لنا وللمستفيدين من المشروع والمطورين بالإضافة لضمان الجودة Quality Assurance. كانت المواصفات غير واضحة مطلقًا مما أدى للحصول على منتج مختلف عن ما تم تصميمه. انجازات التصميم المسطح لم تكن مثالية. الملف ونقل المعرفة لم يشاركوا نفس الغرض. لذلك قمنا بتكرار عمليتنا كما قمنا أيضاً بتكرار المنتج. أفكار ما بعد إعادة التصميم طرحنا موقعنا على الإنترنت ولكننا لا نزال نجري بعض التحسينات عليه. وعمليتنا الجديدة تتضمن الفحص الشهري بشكل موحد مع عمليات التطوير السريعة وفريق المصممين والمطورين الذين يختبرون كيف يبدو المنتج. نعمل الآن بانتظام على شكل فترات مكونة من اسبوعين سريعي الإيقاع بجانب الفرق الأخرى ونقدم تصاميم مرئية على برنامج Sketch وأيضًا ملفات المواصفات بواسطة Frontify بالإضافة إلى نماذج تجريبية للمطور. استغرقنا الأمر بعض التصاميم السريعة بينما كان المستفيدون من المشروع يراجعون نموذج تجريبي متجاوب ولكننا أصدرنا نظام انتقال محدث ليتم اختباره عن طريق مستخدمينا. تحسينات على نظام التنقُّل الخاص بنا: تقليل ارتفاعه حتى يأخذ مساحة أقل. استخدام الاسلوب التفصيلي كعنصر انتقال ما هو مصمم في البداية. إظهار المزيد من الانتقال للمستخدم على الهاتف المحمول بينما قمنا بإزالة علامة "المزيد". استبدال لافتات العلامات التجارية بشعارات أكثر أناقة وجودة. خلال اختبار ردود الفعل القيمة والمعطاة، كانت قد أظهرت لنا بأنه لايزال لدينا بعض العمل لنقوم به والمزيد من الاختبار وإعادة التصميم بشكل أساسي. ما وصلنا له في التصميم والمعالجة يعتبر بالفعل نجاحاً لنا وبجلبنا لجمهور عالمي ولشركة كبيرة بجانبنا، فأنا أعتقد بأن هذا بنفسه يعد إنجازاً. ترجمة -بتصرف- للمقال Redesigning Univision.com لصاحبته: Jenna Marino

ثورة الأجهزة المحمولة ليست فقط اختراعًا تكنولوجيًا يمكننا من الابتعاد عنه بأي وقت، فلا يمكننا الابتعاد عن الهواء الذي نتنفسه أو عن الأقدام التي تحملنا. وعلى نفس الصعيد، فلا نستطيع الابتعاد عن أجهزتنا المحمولة وما عليها. لأنها تعد امتدادًا لشخصياتنا. وبالنسبة للشركات، هذا يعني التركيز على إسعاد الزبون بتجربة رائعة على الهاتف حيث يوجد السياق والخصوصية. كن لحوحًا: إما إسعادهم أو لاشيء آخر يستطيع معظمنا ببساطة البقاء بعيدًا عن التكنولوجيا. فعندما نريد عزل أنفسنا، نبتعد ببساطة عنها بمغادرة المكتب أو المصنع في نهاية اليوم مع إطفاء الحاسوب أو التلفاز. ولكن ماذا عن برامج ومنتجات الأجهزة المحمولة؟ هل نبتعد عنها كما نبتعد عن وسائل التكنولوجيا الأخرى؟ نتمنى بأن نستطيع إقفال هواتفنا المحمولة ببساطة، ولكن قليل منا من يستطيع فعل هذا. وفي الحقيقة، قد أظهرت الإحصائيات بأن 2 من أصل 3 أشخاص يضعون أجهزتهم المحمولة على المنضدة بجانب أسرّتِهم. إنها آخر ما نضعه قبل نومنا وأول ما نتفقّده عند استيقاظنا. أسعد المستخدمين أو اترك كل شيء لا نستطيع النوم وأجهزتنا المحمولة بعيدة عنا قليلًا، فنحن لا نرغب بالانفصال عنها فقد أصبحت ما يسمى بالتكنولوجيا اللصيقة (sticky technology) حيث أصبحنا مرتبطين بشكل قوي بأجهزتنا المحمولة وأصبح استخدامنا لها عادةً مستمرة وتقريبًا بدون إدراك. وازن هذا بالحقيقة القاسية بأن نصف تطبيقات الأجهزة المحمولة في متجر "آبل" للتطبيقات ليس لديها أي مستخدمين على الإطلاق. يجب على الشركات التي ترغب بالنجاح في نطاق الأجهزة المحمولة أن تتأكد من أنها تنشئ تجربة مستخدم تتوافق تمامًا مع التوقعات العالية للجمهور. تحدث بالأمور الشخصية: سياق الكلام يهم ومع ثورة الأجهزة المحمولة، فإن هنالك من البيانات عن كل شيء وكل شخص أكثر بكثير من أي وقت سابق، وهذا الشيء لا تراجع عنه. خذ على سبيل المثال شركة "فيسبوك"، فخلال فترة عملي هناك، أجرى فريقي اختبارًا لتحديد قابلية المستخدمين لتقبل الإشعارات المنبثقة، فقمنا باختيار مجموعة من المستخدمين الذين لم يرغبوا في استقبال الإشعارات المنبثقة وقمنا بعرض شاشة لهم بعدما قاموا مباشرة بإرسال رسالة فورية مما وضح لهم أهمية الإشعارات المنبثقة. الشيء الذي كان مخادعًا لنا خلال فحصنا هو كم استغرق المستخدمين حتى يكون ناجحًا، وكان قد احتاجوا ل5 خطوات لتغيير إعداداتهم. وعادةً ما تخسر شركات الأجهزة المحمولة 90% من مستخدميها مع كل خطوة لذلك لم نكن متفائلين. ولكن تفاجأنا بأن تقريبًا 1 من أصل كل 4 مستخدمين قام بالفعل بتغيير خصائصه. والشيء الذي وجدته مشوقًا حول هذا، هو كيف تطور سلوك المستخدم بسرعة على الأجهزة المحمولة. وتقريبًا بمدة 6 أشهر قبل أن نجري الاختبار، كان هنالك أغلبية من مستخدمي "فيسبوك" مشككين بالإشعارات المنبثقة لذلك رفضوا استقبالها. هم لم يكونوا متأكدين تمامًا من طبيعة هذه الاشعارات المنبثقة أو اذا كان لها أي قيمة على الإطلاق. وشعر بعضهم بالانتهاك من قِبل هذه الإشعارات، وفجأةً أدرك الناس بأن الإشعارات المنبثقة مكّنتهم فورًا من معرفة عندما ينشر أحد الأصدقاء صورةً لهم أو عندما يرسل لهم رسالة أو يشير لهم في منشور. لذلك أرادوا الإشعارات المنبثقة وما كان ملائمًا من قبل أصبح غير طبيعي. كمية البيانات المتاحة لشركات الهاتف المحمول تعني بأنهم يستطيعون تخصيص التجربة لكل واحد من المستخدمين حسب مزاجه، موقعه وسياقه. والشركات التي تحقق هذا سوف تربح. أظهر الاحترام ماذا لو كان جهازنا المحمول المفضل هو ساعة بدلاً من هاتف؟ زوج من العدسات اللاصقة؟ الرقعة الذكية؟ حبة دواء ذكية؟ نهاية عصبية رقمية؟ وكلما تصغر الأجهزة المحمولة تندمج أكثر وأكثر بأغراضنا اليومية التي تحيطنا وتصبح مترسخة بشكل عميق بداخلنا. المعلومات الغزيرة التي تجمعها أجهزتنا المحمولة مفيدة لنا غالبًا بالرغم من أنها تكشف حياتنا الشخصية أحيانًا بشكل يهدد مستوى راحتنا. مستوى الإفصاح الغير مسبوق للحياة الشخصية الذي تحتاجه ثورة الأجهزة المحمولة حتى تعمل بشكل صحيح مجهول لحد ما ولذلك سنحتاج لوضع حدود ولتوازن. عندما كان للحكومة وصول سهل لمعلوماتنا الشخصية في الماضي نتج عن ذلك عواقب وخيمة: الدول المراقبة، قوائم الأعداء واضطهاد المنشقين وفي مناطق مثل الصين هذا لا يزال قائمًا حتى يومنا هذا. ونفس الشيء ينطبق على التحكم التجاري لبياناتنا الشخصية. والجدل الأوروبي حول "الحق في أن تُنسى" يعد مثالاً على الديمقراطية في التصرف وعلى طلب الناس للمزيد من السيطرة على أتباعهم الرقميين. وضياع الخصوصية في الحقيقة هو موضوع مفرق للأجيال. معظم الشباب لا يعتقدون بأن هناك شيء يسمى خصوصية: ومعظم الناس كثيري الإنجاب يعتبرونه حقًا من حقوقهم. يعد الإطلاق المخيب للآمال لنظارات Google Glass مثالاً على ما قد يحدث عندما يفشل منتج من منتجات الأجهزة المحمولة في الوصول إلى التوقعات المتعلقة بالخصوصية. فقوة هذه النظارات تم اعتبارها مخيفة وخارجة عن أيدي المستخدمين. وشعر الناس بأنه تم صنعها لخدمة مصالح شركة Google الشخصية، وبأنه تم تصميمها لجمع البيانات لمصلحة هذا الوحش التقني بدلاً من خدمة احتياجات المستخدمين. فتم الطلب من الناس الذين يرتدون نظارات Google Glass بأن يغادروا الحانات، مسارح السينما والأماكن الحساسة. وتم سحب المنتج من الأسواق في بداية عام 2015. ترجمة -بتصرف- للمقال ‎3 ways to be just pushy enough on mobile لصاحبته SC Moatti

هل تواجه شركتك بعض المشاكل في تحديد مدى أهمية تجربة المستخدم؟ لا تقلق، فقد قام "جوزيف توث"، كبير مستشاري واجهة المستخدم أو تجربة المستخدم UX/UI في شركة فايزر "Pfizer" بإجمال بعض أقوى الإحصائيات المتعلقة بتجربة المستخدم. 1- التمرير المستمر والذي هو خاصية تحميل المحتوى كلما مررت بالصفحة لأسفل بإمكانه أن يخفض عدد الزوار لموقعك، فنسبة الزوار لموقع Time.com كانت قد انخفضت بمقدار 15% بعد أن قاموا باستخدام خاصية التمرير المستمر. المصدر 2- استثمار بقيمة 10 آلاف دولار في الشركات المتخصصة بالتصميم قد يعود خلال 10 سنوات بربح بنسبة 228% أكثر من نفس قيمة الاستثمار في البورصة الأمريكية "S&P". المصدر 3- زادت إيرادات موقع ESPN.com بقيمة 35% بعد أن استمعوا لجمهورهم وللاقتراحات المتعلقة بتصميم صفحتهم الرئيسية. المصدر 4- اختيار درجة معينة من اللون الأزرق والتخلي عن بعض الدرجات الأخرى نتج في زيادة الأرباح السنوية بمقدار 80 مليون دولار لشركة Bing. المصدر 5- قيمة الربح العائدة على كل 1 دولار يتم إنفاقه على التسويق عبر البريد الإلكتروني هي بمعدل 44.25 دولار. المصدر 6- 88% من المستهلكين عبر الإنترنت قد لا يعودون لزيارة موقعًا إلكترونيًا ما بعد تجربة سيئة. المصدر 7- المواقع التي تستغرق وقتًا أطول في التحميل تكبد تجار التجزئة عبر الإنترنت خسائر تقدر بـ 2.5 مليار دولار سنوياً. المصدر 8- الحكم على مصداقية الموقع تعتمد بنسبة 75% على المظهر الكلي للموقع والكماليات. المصدر 9- الانطباع الأول عن الموقع تعتمد بنسبة 94% على التصميم. المصدر 10- 85% من الأشخاص البالغين يعتقدون بأن نسخة الأجهزة المحمولة لموقع إلكتروني خاص بشركة يجب أن يكون بنفس جودة نسخة الحاسوب إن لم يكن أفضل منها. المصدر 11- في تقييم لـ200 موقعًا إلكترونيًا خاصًا بشركات صغيرة، وُجد بأن 70% منها لم تعرض حثًا واضحًا للتفاعل على صفحاتها الرئيسية كالعروض الخاصة والنشرات الإخبارية عبر البريد الإلكتروني والأدلة الإرشادية والنسخ التجريبية والأدوات التفاعلية. المصدر 12- 90% من الأشخاص يستخدمون شاشات متعددة بشكل متعاقب. المصدر 13- هنالك فرصة بأن تتسلق قمة إيفرست 279.64 مرة على أن تضغط على لافتة إعلانية! المصدر ترجمة -بتصرف- للمقال ‎13 Impressive statistics on user experience لصاحبه: Jozef Toth

بإمكانك إضافة ثلاث تغييرات بسيطة لمحتواك لإضفاء بعض المتعة عند قراءته، وهذه النصائح لا تنطبق فقط على التصميم، بل بإمكانك تطبيقها على المحتوى النصي أيضًا. الأسماء الخاصة بكل مبدأ قد تكون صعبة بعض الشيء، أما فهمها واستخدامها فهو سهل جدًا. جزء من ملخص رواية البؤساء لتوضيح النص الغير منسق. ملاحظة مهمة: يختلف كل نوع من الخطوط عن الآخر, لذلك عليك القيام بتعديل قياساتك إذا كان المحتوى لا يبدو بالشكل الصحيح، وتذكر بأن ما يهم هو أن يحصل القارئ على قراءة مريحة وأن تبدو القراءة مناسبة للعين. استخدم التسلسل الهرمي للطباعة لإعطاء فهم أوضح لتركيب الصفحة والتسلسل الهرمي هو تسلسل النص على شكل هرم في داخل الصفحة. لك أن تتخيل كتابًا، فيه العنوان الرئيسي أو عنوان الفصل يكون بارزًا أكثر من العنوان الفرعي والذي بدوره أكثر بروزاً من المحتوى الرئيسي أو الحشوة. يجب استخدام هذا المبدأ في التصميم أو المحتوى النصي. يجب أن تكون أحجام الخطوط كلها مشتقة من النص الرئيسي أو الحاشية حيث أنها أكثر ما يتم قراءته في كل صفحة. وهذه بعض الخطوات التي بإمكانك اتباعها لعمل التسلسل الهرمي: النص الرئيسي: بإمكانك تكبير أو تصغير الخط حتى تراه مريحًا للقراءة (نستخدم الحجم 22 نقطة في هذا المقال). العنوان الرئيسي: يجب أن يكون أكبر بنسبة 180% حتى 200% من النص الرئيسي، (بين 40-44 نقطة في حالتنا). العنوان الثانوي: يكون %130 حتى 150% من الحاشية، (بين 29-33 نقطة). وهذا هو شكل الصفحة بعد إتباع الخطوات السابقة: ملاحظات إضافية: هذه الدرجات لم تكن ضرورية لهذا المقال ولكن يجب عليك الأخذ بالحسبان استخدام عنوان ثالث ونص وصفي للصور. العنوان الثالث بإمكانه أن يكون من 100% حتى 125% أكبر من الحاشية, (بين 22-28 نقطة) وصف الصورة يتراوح بين 70% حتى 75% من الحاشية, (بين 15-17 نقطة) استخدم التباعد العمودي لجعل النصوص أسهل في القراءة. هذا يعني التباعد بين الأسطر خلال تمرير القارئ للصفحة، ويجب علينا أن نجعل التباعد بين الأسطر وبين الفقرات مناسبًا ليسمح للعين والعقل بقراءة الحروف والكلمات بشكل مناسب. التباعد بين الفقرات جعل تباعد بين الفقرات سهلُ ولكنه مختلف جدًا عن ما نقوم به في مستندات وورد بالضغط مرتين على زر "سطر جديد"، حيث انه الضغط مرتين على الزر سوف يجعل التباعد بين الفقرات كبيرًا جدًا بحيث لا نستطيع تحديد إذا ما كانت الفقرة التالية تتبع السابقة أم أنها قسم جديد من المحتوى. في أغلب الحالات يجب أن يكون التباعد بين الفقرات مساويًا لحجم الخط الرئيسي للنص، فمثلًا لو كان حجم النص 16 نقطة نقوم بعمل التباعد بين الفقرات على حجم 16 نقطة أيضًا. في تطبيقات التصميم وتنسيقات CSS فإن هذا يشبه وضع الهامش السفلي للفقرات على حجم 16 بكسل أو 1 em. في المستندات مثل وورد، حدد قيمة ما بعد الفقرة على نفس حجم النص. التباعد بين الأسطر التباعد بين الأسطر يجب أن يكون تقريباً 120% حتى 160% من حجم النص، وكلما كان النص أصغر، كان التباعد بين الأسطر أكبر، لإعطاء كل كلمة مساحة كافية. إذا كان حجم النص 22 نقطة فإن ارتفاع السطر لهذا النص يجب أن يكون بين 26-35 نقطة. في CSS, بإمكانك عمل هذا باستخدام الوحدة em أو عبر قيم لا بعدية مثل 1.2، ولكن هذا قد يتطلب بعض التعديل لجعله مناسبًا. في المستندات مثل وورد، ارتفاع السطر يكون بالكسور العشرية حيث أن 1.2 تساوي 120% من النص الذي يتم تعديله. عدل عرض السطر لجعله مريحًا في القراءة الأسطر العريضة من النصوص صعبة في القراءة بينما الأسطر الأقل عرضًا أسهل. ويعَد الحد المثالي من الأحرف لكل سطر هو 65-75 كلمة، ويجب أن يتم تحديد العرض بالرجوع للنص الرئيسي وليس للعنوان الرئيسي أو الفرعي. نصيحة: سطر من الأحرف والأرقام يتكون من 62 حرفاً ورقماً، وهذا مقياس بسيط لصنع عرض مريح. وعندما تكون قد وضعت 65-75 حرفاً في السطر, قلل عرض النص حتى يكون على وشك الالتفاف، وعندها ستجد العرض مريحًا. النتيجة النهائية بمجرد اتباعك لهذه الخطوات، فإن إمكانية قراءة محتواك سوف تتطور بشكل كبير كما هو موضح أسفل. ضبط الكتابة ليس بمهارة صعبة، بإمكانك اتباع بعض الخطوات البسيطة لجعل كل جزء من النص سهل القراءة ومريحًا للعين. ابق على هذا الجزء من صناعة محتواك مستمرًا دائمًا وسوف يحصل القارئون على أفضل النتائج. ترجمة -بتصرف- للمقال Typography tips for a more comfortable read لصاحبه Luke Jones

حسب موقع smart insights فإن 80% من مستخدمي الإنترنت يمتلكون هاتفًا ذكيًا، هذا يعني ملايين الأشخاص الذين يتصفحون الإنترنت ويحاولون أن يجدوا منتجات ومعلومات خلال تصفحهم. ولإرضاء الزبائن المحتملين يجب على كل شركة أن تجعل موقعها الإلكتروني قابلاً للتصفح على الأجهزة المحمولة. ها هي بعض النصائح المستوحاة من تجربتنا الخاصة في شركة Sonifi لتساعدك على تصميم وبرمجة موقع إلكتروني متوافق مع الأجهزة المحمولة. النصيحة الأولى: كل المواقع الإلكترونية على الأجهزة المحمولة تحتاج للخاصية name="viewport"‎ في العنصر meta تذكر بأن ترفق الخاصية viewport من العنصر meta عند انشائك لموقع الكتروني خاص بالأجهزة المحمولة. حجم الإطار المعروض (viewport) هو عبارة عن حقل وهمي مستخدم من قِبَل محركات البحث لتحديد كيفية قياس وتحجيم محتوى الموقع الإلكتروني لذلك يعد تضمين الخاصية viewport ضروريًا جدًا عند بناء تجربة متعددة الأجهزة. حجم الإطار المعروض يخبر متصفح الهاتف بأنه يجب عليه أن يتوافق مع شاشة أصغر وبدونه فإن الموقع الإلكتروني ببساطة لن يعمل بشكل جيد على الأجهزة المحمولة. وبالرغم من أي إعدادات تقرر أن تستخدمها لتحديد ما يتحكم به منفذ العرض الخاص بك، تأكد من أن تضعه في العنصر head من الصفحة. "80% من مستخدمي الإنترنت يبحثون عن المنتجات عبر هواتفهم الذكية" النصيحة الثانية: الحجم مهم في المواقع المتوافقة مع الأجهزة المحمولة هل جربت من قبل أن تزور موقعًا إلكترونيًا واحتجت أن تضغط على زر معين ولكن الزر كان صغيرًا جدًا بحيث أنك ضغطت على زر أخر عن طريق الخطأ؟ أو هل جربت من قبل أن تكبِّر الشاشة لتقرأ شيئًا معينًا؟ هذا الأمر مزعجٌ جدًا ولذلك إنه من المهم أخذ الحجم بعين الاعتبار عند تصميم الموقع الإلكتروني، وليس فقط حجم الصفحة، بل أيضًا حجم الخطوط والأزرار. الخطوط حجم الخط للمواقع على الهواتف يجب أن يكون 14 بكسل على الأقل، وعلى الرغم من أن هذا الحجم قد يبدو أكبر مما تريد ولكنه يسهل على الزائر أن يقرأ الصفحة بدون أي تكبير للصفحة أو أي صعوبة. أما الخط الأصغر يمكن أن يستخدم في العناوين والنماذج وبإمكانك تقليصه حتى 12 بكسل. الأزرار دائمًا تذكر هذا الإختصار «أ.أ.أ»: أي «الأزرار الأكبر أفضل»،إذ أن الأزرار الكبيرة تقلل من احتمالية الضغط بشكل خاطئ على زر آخر. بالنسبة لرواد الهواتف المحمولة مثل شركة "آبل" فهم ينصحون بأن يكون حجم الأزرار على الأقل 44 بكسل × 44 بكسل من أجل تحسين تجربة المستخدم وزيادة التحويلات في مواقع التجارة الإلكترونية. النصيحة الثالثة: النوافذ المنبثقة لا يجب استخدامها في تصميم مواقع الإنترنت الخاصة الأجهزة المحمولة كَون المتصفحات الخاصة بالهواتف لا تدعم النوافذ المنبثقة، فإن وجود هذه النوافذ يسبب الكثير من التشتت والقلق لتجربة المستخدم بشكل كامل، وحتى أصغر النوافذ تسبب هذا التشتت لمستخدمي الهواتف. وعلى مدار عملية التصميم، احرص جيدًا على تجنب استخدام النوافذ المنبثقة للحصول على أفضل النتائج واحرص ايضًا على تجنب التحديث الدوري للصفحة وذلك لعدم امتلاء ملفات ذاكرة التخزين المؤقت في الهاتف بل أعطِ المستخدم حرية التحكم في هذه العملية. النصيحة الرابعة: قلّل من استخدام الحقول الخاصة بالكتابة في قائمة التنقل لأنه وكما تعلم، من الصعب بعض الشيء إدخال النصوص والكتابة عند تصفح المواقع على الهاتف فينصح باستبدال هذه الحقول بأزرار او قوائم مما يمكن المستخدمين من اختيار ما يريدون بسهولة وبدون الوقوع في أي اضطرابات. وعليك الأخذ بعين الاعتبار بأن مستخدمي الأجهزة المحمولة لا يستطيعون استخدام لوحة مفاتيح او فأرة، على عكس مستخدمي الكمبيوتر، لذلك احرص على ايجاد طرق ابداعية أكثر لجعل تجربتهم هي نفسها وبدون اللجوء لاستخدام لوحة مفاتيح صغيرة او التصفح بصعوبة. بعض الحلول تشمل: القوائم القوائم المنسدلة الأزرار -خيارات الصور النصيحة الخامسة: استخدم وضع تصفح ذكي في تصميمك قد أجريتَ بالتأكيد بالعديد من الأبحاث قبل بنائك للموقع الإلكتروني لمحاولة فهم جمهورك وما يتوقعون وجوده في الموقع، قم بمراجعة المعلومات ثانيةً عند تطويرك لنموذج خاص بالأجهزة المحمولة لتستطيع تحديد كيف سوف يتصفح هذا الجمهور موقعك على الهاتف. إن كان جمهورك المستهدف من المستخدمين يرغب برؤية محتوى متجدد بشكل مستمر فعليك وضع قائمة التصفح أسفل المحتوى الرئيسي مما سيترك مساحة كافية للمحتوى والعناوين لتظهر أكثر وبدون إعاقة لمظهر الصفحة. أما إن كان المتابعون يريدون الوصول الدائم للتصفح حسب الفئة، إذن يجب عليك وضع قائمة التصفح في أعلى الصفحة. النصيحة السادسة: قم بتبسيط تصميم موقعك الإلكتروني حاول بأن تتخلص من المحتوى الغير ضروري في موقعك وقم بتبسيط التصميم الخاص بالصفحة لجعل الاستخدام أفضل، وتذكر بأن التصميم الخاص بالأجهزة المحمولة يدور حول نظرية الحد الأدنى (minimalism)، وتبسيط التصميم يساعد على تحسين الاستخدام. أنشئ موقعك بحيث تسمح للمستخدمين بتصفحه دون أي صعوبات وذلك عن طريق تجنب الجداول والإطارات والصيغ الأخرى. ودائمًا أبقِ الحشوة على أقل مستوى لأنه كلما زاد عدد المستخدمين الذين يضغطون على الروابط كلما زاد انتظارهم للتحميل، واجعل موقعك بسيطًا لخلق توازن بين المحتوى والتصفح. النصيحة السابعة: قسّم الصفحة لأجزاء صغيرة عملية عرض المحتوى الذي يتناسب تمامًا مع الشاشات الكبيرة للكمبيوتر وتعبئتها في أجهزة صغيرة ومحمولة باليد تشبه كثيرًا عملية ادخال قطعة مربعة في فتحة دائرية. قسّم الصفحة لأجزاء صغيرة بوضع الأقسام الطويلة من النصوص في عدة صفحات بدلاً من وضعها في صفحة واحدة طويلة تجعل المستخدمين يمررون بشكل مستمر لرؤية المحتوى وبإمكانك التخلص من المحتوى الأقل أهمية وعمل عمود واحد من النص لتجنب التمرير الأفقي في الصفحة. النصيحة الثامنة: قياس الصور يصنع فرقًا كبيرًا لمستخدمي الأجهزة المحمولة لاحظ جميع الصور المستخدمة في المحتوى وفي الخلفية، وتأكّد بأن الصورة مقاسها صحيح عند التصفح بالوضع العمودي أو الأفقي، وإذا كانت الصور لا تحقق الأبعاد المناسبة فعليك تغيير تنسيق صفحات في CSS لجعل الصورة بعرض 100% أو بأن تجعل الصورة نفسها مناسبة بداخل الصفحة (خاص بصور الخلفية). وباتباعك لهذه النصائح السهلة بإمكانك التأكد من أن تصاميمك مناسبة لكل من الحاسوب والهاتف وبالتالي يمكن للزائرين أن يحظوا بأفضل تجربة ممكنة. ترجمة -بتصرف- للمقال ‎8 tips for designing mobile-friendly websites لصاحبته: Sarah Almond

في عام 2003، قرأت مقالةً في مجلة "نيويورك تايمز" كانت قد تضمنت هذا الاقتباس عن "ستيف جوبس": روعة هذا التعبير غيرت مهنتي كمبرمج بشكل كامل. في نهاية اليوم أنا من يكتب"الشيفرة" ومن ينشئ المنتج بيديه. فكيف لأحد آخر أن يحدد كيف يعمل المنتج في النهاية؟ الحقيقة الكامنة لكل المبرمجين هي أنهم غارقون في الخلف ولا يتعاملون بشكل مباشر مع المستخدم. فالمستخدم لا يتعامل مباشرةً مع عملهم بل يتعامل مع ما يصنعه المصممون. اختلاف المنظور هو ما يمنع المبرمجين من رؤية الصورة بشكل كامل فهم يفتقدون أهم جزء وهو المستخدم. أيها المبرمجون، تعَلُّم التصميم يجعل من الممكن أن تقوموا بتجميع كامل النظام في عقولكم، من كيفية تعامل المستخدم مع منتجكم وحتى آخر مرحلة حيث تقومون بتخزين المعلومات في قاعدة البيانات الخاصة بكم. هذا المسار المتكامل يمكنك من تطوير منتج أفضل من المنتجات المنافسة. كَوني مبرمجًا منذ أكثر من 15 سنة فإن تعلمي للتصميم قد طوّر أدائي تطويرًا جذريًا. كثيرًا ما نسمع بأنه يجب على المصممين أن يتعلموا البرمجة ولكنني أؤمن بالعكس, للحصول على منتجات رائعة فإن المبرمجين عليهم أن يتعلموا التصميم. فهم التصميم يؤدي لفهم المستخدم عندما بدأت بتعلم التصميم كانت إحدى أكثر اللحظات التي وقفت وتساءلت فيها هي أنه على الرغم من أنني أعمل في الخلفية إلا أن ما اصنعه يجب عليه أن يجعل حياة المستخدم أسهل، فمستخدموك لديهم العديد من المشاكل التي يحاولون حلها وإذا ركزت فقط على حل المشاكل التقنية فقد لا تستطيع التوصل لحل للمشكلة. إحدى أفضل الطرق للتأكد من أنك على المسار الصحيح لخدمة الاشخاص الذين سيستعملون منتجك بالفعل هي الانخراط مبكرًا في عملية التصميم، ويفضَّل أن يكون منذ اليوم الأول. وإدراكك لمشاكل المستخدم منذ البداية يمكنك من اتمام العمل بسلاسة وبشكل تام. صرّح الريادي المشهور ومؤسس شركة "Y Combinator"، "بول غراهام" بالتالي: كل شيء ليس كما يبدو عليه سوف أعيد القول بأنه تقريباً من المستحيل أن يمر يوم بدون رؤيتك لمقال عن إذا ما كان يجب على المصممين أن يتعلموا البرمجة. ما يجهله الناس هو أن المبرمجين قادرون على تعلم التصميم ويجب عليهم تعلم التصميم للعمل بشكل أفضل مع المصممين والحصول على منتجات رائعة حقًا. ولسوء الحظ, هنالك نوع من التنافسية بين المبرمجين والمصممين على من يمتلك الوظيفة الأصعب، ومن على صواب، ومن على خطأ، ومن يعرف أكثر والعديد من النقاط الأخرى، وهذا التنافر عن العمل سويًا لا يفيد بأي شكل من الأشكال. بمجرد تعلمك للتصميم ستلاحظ بأن عمل المصممين ليس سهلاً كما يبدو، ومن الناحية الأخرى، تعَلَّم البرمجة وسوف تدرك بأن المبرمجين ليسوا متجهمين وهدفهم ليس افساد تصاميمك. عندها، سوف يتمكن كل من المصممين والمبرمجين بتقدير عمل الآخر واحترام ما يقومون به مما يؤدي لعملهم سوياً كفريق. استمتع أكثر بأداء عملك بالنسبة لي، أفضل شيء بالنسبة لتعلم التصميم هو أنني أستمتع بعملي أكثر من السابق. أصبحت قادرًا على الانخراط في محادثات هادفة مع المصممين عن طريق التحدث بلغتهم التي يفهمونها مما أكسبني شعورًا كبيرًا بالرضى، بالإضافة لذلك, اصبحت متلهفاً أكثر كلما اقتربنا من الاعلان عن مشروع جديد وهذا لأن مشاركتي تخطّت الجوانب التقنية التي تحدث في الخفاء. أيضًا, تعلُم التصميم يساعد المبرمجين على خلق منتج يعادِل بين الإبداع والمنطق بدون "مستند خصائص التشغيل" ومن الممكن تجنب قوالب الفوتوشوب "PSD" وبرمجة تصاميمك وتنسيقاتك بطريقة فعالة خلال كتابتك لشيفرة البرمجة. وعندما تجد ثغرات في تصميمك و في صفحات النسق (style sheets) فبإمكانك إصلاحها فورًا وإنهاء عملك بدون أي تأخير او قلق. التأقلم هنالك تدفق كبير للأجهزة الحديثة التي يتم انتاجها يومياً بمختلف الأشكال والأحجام لذلك فإن القدرة على التأقلم بأسرع ما يمكن هي شيء أساسي. يجب على المبرمجين أن يعملوا بتصميم متوافق مع هذه المتطلبات والمواصفات، وهذا يعني بأنه من المهم أن يكون المبرمجون قادرون على ملاحظة وتحديد هذه التغييرات. كيف سيتصرف التصميم عندما تنتقل من جهاز الكمبيوتر للهاتف المحمول أو الساعة الذكية؟ سوف تتمكن بمعرفتك التصميمية من التعامل مع عملك بأسلوب مختلف عما كنت سوف تفعل عادةً, مما يعطيك ميّزة تنافسية كبيرة وسوف توفّر الكثير من الوقت عليك وعلى فريقك. كثيرًا ما يختلط التصميم بالبرمجة في شركتي، وعندما يكون المبرمج يعرف عن التصميم فإن النتائج تكون أفضل على صعيد كل من سرعة العمل والجودة فيما ننتجه. كيف تعلمتُ التصميم أولى خطواتي كانت على موقع "DesignLab" حيث ساعدني احد المرشدين طوال الوقت، وقمت أيضًا بالانتساب لبرنامج التصميم على موقع "BLOC" وكان كلا الموقعين رائعين حقًا, ولكن بالطبع لا شيء يغني عن الممارسة المستمرة لذلك يجب عليك الممارسة يوميًا حتى تصل للدرجة المطلوبة. ترجمة -بتصرف- للمقال Why developers should learn design لصاحبه Christian Rennella