اسحب للاستكشاف. مرّر أو استخدم إصبعين للتكبير. افتح المساعدة لعرض اختصارات لوحة المفاتيح.

Yan
متاح
للمشاريع
لنتحدث
Yan Fontão Boring view
All work

Case 051تصميم الويب والتفاعل

Gypsy — Tickets

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

دوري
تصميم الواجهة والنظام البصري وبناء النماذج الأولية التفاعلية
حالة المشروع
تمرين تصميم · نموذج أولي تفاعلي
تسجيل من النموذج الأولي أثناء تشغيله: انفتاح الستارة، واختيار التاريخ والعرض، وطرق الحجز، والأسئلة الشائعة. ونص الأسئلة الشائعة هو النص المؤقت الخاص بالتمرين.

01

مساهمتي

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

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

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

02

من لافتة المسرح إلى الواجهة

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

ينظم المشروع الألوان والخطوط والمسافات والحركة في رموز التصميم المشتركة (design tokens). وتمنح عناوين Antonio المضغوطة والنص الأساسي بخط هندسي واللمسات المخطوطة القسم الرئيسي والتقويم والأقسام الداعمة أدوارا متمايزة ضمن النظام البصري نفسه.

تقويم لشهرين ولوحة العرض المحدد؛ جدول عروض توضيحي.
تقويم لشهرين ولوحة العرض المحدد؛ جدول عروض توضيحي. ملف تصدير أصلي من تمرين التصميم.

03

اختيار التاريخ ثم العرض

يبقي شهران متجاوران الجدول ظاهرا في عرض واحد. وتحمل التواريخ المتاحة علامات صغيرة للعروض؛ وعند اختيار تاريخ تتغير اللوحة أدناه لتعرض يومه ومكان العرض وخيارات العرض النهاري أو المسائي.

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

مسارات شباك التذاكر والهاتف والقرعة مع نصوص مؤقتة خاصة بالتقييم.
مسارات شباك التذاكر والهاتف والقرعة مع نصوص مؤقتة خاصة بالتقييم. ملف تصدير أصلي من تمرين التصميم.

04

صفحة تنفتح كخشبة مسرح

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

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

أكورديون من ثلاثة أسئلة وإجابة واحدة مفتوحة ونصوص مؤقتة.
أكورديون من ثلاثة أسئلة وإجابة واحدة مفتوحة ونصوص مؤقتة. ملف تصدير أصلي من تمرين التصميم.

05

مداخل أخرى، وإجابات قريبة

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

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

000

التعليمات

Yan Fontão
لمسة
تفتح شاشة
نقرة
تفتح شاشة
سحب
يتجوّل في اللوحة
العجلة
الفأرة تكبّر، ولوحة اللمس تحرّك، وإصبعان يكبّران
− +
تراجع لرؤية اللوحة كاملة، أو اقترب
الأسهم
في دراسة الحالة: ↑↓ لتبديل الدراسة، ←→ لتبديل الوسائط. في اللوحة: للتحريك
مسافة
تفتح أو تعود
Enter
يفتح
Esc Backspace
رجوع
Home
العودة إلى الوسط، ثم إلى المقدمة
PgUp PgDn
القناة السابقة أو التالية
Tab
يتنقل بين المشاريع والروابط
R
مشروع عشوائي
0–9
اكتب رقم القناة، 1–61
?
هذه الصفحة
الاختصارات

موسيقى اللوحة

الملفات مضغوطة وموحّدة الصوت للويب.

متاح
للمشاريع
لنتحدث

رسالة جديدة إلى يان

أخبرني من أنت وسأرد عليك.

000

عن يان

مرحبًا، أنا يان

مصمم منتجات/ مهندس تصميم

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

  • 2018بداية تطوير البرمجيات
  • UI + codeالتصميم والتنفيذ

عملت مع Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

البرازيل · عن بُعد أو هجين أو حضوريًا

صورة يان فونتاو جالسًا بسترة خضراء ونظارة ويمسك ميكروفونًا.
متاح
للمشاريع
لنتحدث
متاح
للمشاريع
لنتحدث
000

قناة مقفلة

بموجب اتفاقية عدم إفصاح

أدخل الرمز

اطلب الرمز من يان ↗
متاح
للمشاريع
لنتحدث
YAN FONTÃO دراسات الحالة

القناة 51 تصميم الويب والتفاعل

Gypsy — Tickets

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

دوري
تصميم الواجهة والنظام البصري وبناء النماذج الأولية التفاعلية
حالة المشروع
تمرين تصميم · نموذج أولي تفاعلي
تسجيل من النموذج الأولي أثناء تشغيله: انفتاح الستارة، واختيار التاريخ والعرض، وطرق الحجز، والأسئلة الشائعة. ونص الأسئلة الشائعة هو النص المؤقت الخاص بالتمرين.

مدخل مسرحي لاختيار عرض

تسجيل من النموذج الأولي الأصلي، بجداول عروض توضيحية ونصوص مؤقتة.

مساهمتي

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

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

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

من لافتة المسرح إلى الواجهة

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

ينظم المشروع الألوان والخطوط والمسافات والحركة في رموز التصميم المشتركة (design tokens). وتمنح عناوين Antonio المضغوطة والنص الأساسي بخط هندسي واللمسات المخطوطة القسم الرئيسي والتقويم والأقسام الداعمة أدوارا متمايزة ضمن النظام البصري نفسه.

اختيار التاريخ ثم العرض

يبقي شهران متجاوران الجدول ظاهرا في عرض واحد. وتحمل التواريخ المتاحة علامات صغيرة للعروض؛ وعند اختيار تاريخ تتغير اللوحة أدناه لتعرض يومه ومكان العرض وخيارات العرض النهاري أو المسائي.

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

تقويم لشهرين ولوحة العرض المحدد؛ جدول عروض توضيحي.
تقويم لشهرين ولوحة العرض المحدد؛ جدول عروض توضيحي. ملف تصدير أصلي من تمرين التصميم.

صفحة تنفتح كخشبة مسرح

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

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

مداخل أخرى، وإجابات قريبة

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

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

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