Etkinlik Bileti Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Bir etkinlik uygulaması tek bir şey satar: dışarıda bir gece. Aşağıdaki ilk taslakta doğru etkinlikler var, ama onları gömüyor. 50 karakterlik bir arama ipucuyla, sekiz renkli kategoriyle, fotoğrafın üstünde 8 px sokak adresiyle ve her satırda altı bilgiyle açılıyor. Düzeltme etkinlikleri ve fotoğrafları koruyor, ama onları fotoğrafların parlamasını sağlayan koyu bir zemine oturtuyor.

Ekranın tamamı, önce ve sonra

Junior taslak

Düzeltilmiş

Solda ekranın beş bölümü var ve hiçbiri yıldız değil: iki ikonlu bir başlık, sekiz daire, fotoğrafında dört şey olan bir kart ve bir liste. Sağda başlık sorunun kendisi, fotoğraf kartı yıldız ve liste sadece bir liste. Her şey aynı 20 px kenardan başlıyor, bölümler arasında 16 px var.

Düzeltme 1: büyük iki satırlık başlık ve tek arama alanı

Önce

Sonra

Küçük bir şehir etiketi, bir zil ve bir sepet; karşısında ekranın ne işe yaradığını söyleyen büyük bir başlık.

Taslağın üst çubuğu bir araç çubuğu: küçük kalın yazıyla şehir, bir zil, rozetli bir sepet, ardından 50 karakterlik bir ipucu olan arama alanı, "Search events, artists, venues, teams and more...", ve bir filtre ikonu. Kişiye nerede olduğunu söylüyor ve ona araçlar veriyor.

Düzeltme ona bir cümle veriyor. "Tonight in" beyaz, "Los Angeles" küçük bir okla macenta, yani şehir hâlâ değiştirilebiliyor. 28 pt ile ekrandaki en büyük yazı bu.

Arama alanı "Artists, venues, events" diyor ve filtre ikonunu koruyor. Zil ve sepet başlıktan çıktı; bu yeniden tasarım nereye gittiklerini çizmiyor.

Tekrar kullanılacak kural: ana ekranın üstü, ekranın ne işe yaradığını kelimelerle söylemeli.

Düzeltme 2: sekiz daire tek sıra hap oluyor

Önce

Sonra

Sekiz farklı renkte iki sıra; karşısında tek stilde, seçili hapın dolu olduğu tek sıra.

Taslağın sekiz dairesi pembe, mavi, sarı, mor, yeşil, turuncu, açık mavi ve gül rengi; açık modun pastelleri siyah bir ekranda olduğu gibi bırakılmış. İki sıra yer kaplıyorlar ve henüz hiçbir etkinlik gösterilmeden kişiden seçim yapmasını istiyorlar.

Düzeltme tek sıra hap. Concerts marka macentası #D6246E ile dolu, geri kalanlar düz koyu haplar. Sıra kayıyor, bu yüzden "Come..." bilerek kenardan kesiliyor ve kişiye sağda daha fazlası olduğunu söylüyor.

More sonda sabit, yani tam liste hep bir dokunuş uzakta. Kategori listesi sekizden yedi hapa indi, kalanı More'un arkasında.

Tekrar kullanılacak kural: filtreler filtre gibi davranmalı. Tek sıra, tek seçili durum, tek renk.

Düzeltme 3: tek butonlu tek öne çıkan kart

Önce

Sonra

Etiketli bir fotoğraf, uzun bir başlık, küçük detaylar ve iki buton; karşısında büyük bir fotoğraf, bir ad ve tek bir buton.

Taslak fotoğrafın üstüne dört şey koyuyor: kırmızı bir "SELLING FAST!!" etiketi, bir kalp, büyük harflerle "NEON NIGHTS LIVE: THE WORLD TOUR 2026" başlığı ve 8 px ile tarih, saat, mekan ve sokak adresi satırı. Altında ücretlerle birlikte bir fiyat ve büyük harflerle iki buton var, "BUY TICKETS" ve "SHARE". Fotoğrafın çoğu yazıyla kaplı.

Düzeltme fotoğrafı 228 px yüksekliğinde yapıyor ve sahnenin görünmesine izin veriyor. Ad, başlığın altında 0'dan %78'e giden yumuşak bir siyah gölgenin üzerinde duruyor, böylece beyaz yazı fotoğrafın her yerinde okunuyor. Beyaz bir tarih çipi, "OCT 24", küçük satırdaki tarihin yerini alıyor.

Mekan ve saat "Marlow Theatre · Sat 8 pm" olarak kısalıyor. Fotoğrafın altında solda "From $45" ve "312 going", sağda tek buton "Get Tickets" duruyor. Etiket, sokak adresi ve Share butonu gitti.

Tekrar kullanılacak kural: tek kart, tek eylem. Kartın işi dokunuş almak, o yüzden ona tek bir tane ver.

Düzeltme 4: tarih, mekan ve fiyatlı trend satırları

Önce

Sonra

Tek gri satırda altı bilgi ve iki ikon; karşısında bir tarih, bir ad, bir mekan ve bir fiyat.

Taslaktaki her satır adı, tarihi, saati, mekanı, yaş sınırını, fiyat aralığını ve ilgi sayısını 8 px yazıyla tek ve taşan bir satırda taşıyor. Her satırda ayrıca bir kalp ve bir paylaş ikonu var. Birlikte okunduklarında bir paragraf oluyorlar.

Düzeltme her bilgiye bir yer veriyor. Tarih üstte, marka renginde, büyük harflerle: "FRI, OCT 30". Ad altında kalın, onun altında mekan gri, fiyat ise sağda yuvarlak bir çipte, "$25", yani taslaktaki "$25-$40" aralığının başlangıç fiyatı.

Fotoğraf kare bir küçük resim olarak kalıyor. Yaş sınırı, ilgi sayısı, kalp ve paylaş ikonu satırdan çıktı; tam bir uygulamanın hâlâ bunlara bir ev bulması gerekir.

Tekrar kullanılacak kural: bir satırda çok bilgi varsa onları sırala ve ilk dördüne kendi yerini ver.

Daha küçük düzeltmeler

• Siyah olmayan koyu bir zemin. Taslak saf #000000 üzerinde duruyor ve açık mod pastelleri içinde kalmış. Düzeltme, kartların zeminden ayrılması için iOS koyu yüzeyleriyle #1C1C1E ve siyaha yakın #0B0B0F kullanıyor.
• Tek vurgu ve yazı için daha açık bir ton. Marka macentası #D6246E seçili hapı ve butonları dolduruyor. Daha açık bir ton, #EC4F88, koyu zeminde macenta yazı ve ikonlar için kullanılıyor, çünkü temel macenta orada iyi okunamayacak kadar sönük.
• Tek sol kenar. Taslak solda 14 px, sağda 12 px kullanmış. Düzeltme iki yanda 20 px ve bölümler arasında 16 px kullanıyor.

Kendi etkinlik uygulamanı denetle

Figma dosyasını al

Ücretsiz dosyada iki ekran bileşen olarak, her düzeltme önce ve sonra çifti olarak, renk değişkenleri ve iOS yazı stilleri var.

Ücretsiz Figma dosyası

Etkinlik bileti ana ekranı, önce ve sonra

İki ekran ve düzeltilen her parça Figma bileşeni olarak. Ücretsiz, sadece görüntüleme, taslaklarına kopyala.

Figma'da aç

SSS

Bir etkinlik bileti uygulamasının ana ekranı önce ne göstermeli?

Ekranın ne işe yaradığını söyleyen bir başlık, örneğin "Tonight in Los Angeles", ardından tek bir arama alanı ve bir sıra kategori hapı. Öne çıkan etkinlik hemen arkasından gelir.

Öne çıkan etkinlik kartı nasıl tasarlanır?

Tek büyük fotoğraf, yumuşak bir gölge üzerinde etkinliğin adı, çip olarak tarih, fiyat ve tek bir buton. Sokak adresini, etiketleri ve paylaş butonunu etkinlik sayfasına sakla.

Bir etkinlik uygulaması kaç kategori göstermeli?

Tek kaydırmalı sırada yedi civarı hap; seçili olan dolu, More sonda sabit. İki sıra halinde sekiz renkli daire kişiden çok erken seçim yapmasını ister.

Bir etkinlik uygulaması karanlık mod kullanmalı mı?

Etkinliklere yakışır, çünkü sahne ve kalabalık fotoğrafları koyu zeminde parlar. Açık mod renkleri kalmış saf siyah yerine #0B0B0F gibi siyaha yakın bir ton ve daha açık yüzeyler kullan.

Bir listede etkinlik detayları nasıl gösterilir?

Sırala: önce vurgu renginde tarih, sonra ad, mekan ve fiyat. Yaş sınırını, ilgi sayısını ve ekstra ikonları detay sayfasına bırak.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Etkinlik adları, mekanlar ve sokak adresi uydurmadır; tarihler 2026 takvimine göre kontrol edildi.
• Fotoğraflar Pexels üzerinden: Thibault Trillet (iki ekranda da öne çıkan sahne), Sid Dalal, julio cesar resendiz resendiz, Maor Attias ve Martin Lopez.
• Kontrast, WCAG 2.2 kontrast formülü ile kontrol edildi: #D6246E üzerinde beyaz yazı 4,8:1, koyu zeminde #EC4F88 ise 5,7:1; #D6246E orada 4,1:1 olurdu.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• İlk olarak App Brainy üzerinde carousel olarak yayımlandı.