Chapter 2: Design System

Kuwait Airways design system ve component oluşturma süreçlerimiz.

Renkler

Müşteri tarafından paylaşılan style guide’daki renkleri temel alarak, bir Design System oluşturma sürecine başlandık. Renklerin tonları belirlendikten ve isimlendirildikten sonra, her tonun detaylı bir şekilde tanımlandığı bir sistem oluşturulduk.

Bu tanımlamalar sayesinde, tasarımcılar ve geliştiriciler arasında hızlı ve tutarlı bir anlayış oluşturmayı amaçladık. Renklere anlamlı isimler vermek, belirli tonları hızlıca anlamalarına ve uygulamalarına olanak tanıdı.

Componentler

Uçak Componentleri

Kuwait Airways için uçak componentini oluştururken marka renklerini kullanarak, marka kimliğine uygun olması birinci önceliğimizdi. Farklı özellikte koltukları farklı renklerde kullanmaya özen göstererek koltuk varyantlarını oluşturduk. premium özellikli koltuklara icon ekleyerek standart koltukları ise sade iconsuz tutarak farklılaştırmaya çalıştık 🛋️

Takvim

Takvim günlerinin varyantlarını oluştururken bir çok durumumuz vardı. İlk gün seçili olan, son gün seçili olan, hover gösterimi, son seçili olan, period gösterimi, en düşük bilet fiyatı günü gösterimi vs. En düşük fiyata ait günü göstermek için bir icon kullandık, seçili günler için primary rengimizi kullandık, period kısmında ise açık tonlar tercih ettik.

Bilet

Bilet componentlerini oluşturduktan sonra biletlerin varyantlarını belirledik. Bu varyantlar arasında üç farklı durum bulunmaktadır. İlk olarak, direkt uçuş olan bilet varyantı bulunmaktadır. İkinci varyant ise duraklı veya aktarmalı bir uçuşun bileti olarak tanımlanmıştır. Son olarak, bilet üzerine tıkladığımızda açılan ve paket seçeneklerini içeren bir varyant oluşturduk.

Rezervasyon Formu

Rezervasyon formunun componentini oluştururken en gerekli bilgilerin alınmasına, input alanların olmasına özen gösterdik. Karmaşıklıktan uzak durup seçtiğimiz iconları marka renklerine uygun kullandık.

Rezervasyon formunun componentini oluşturduktan sonra bu formun varyantlarını oluşturmaya başladık , sekiz farklı varyantımız vardı bunlar; Uçak rezervasyonu, Online check-in yapma veya manage booking ikisini aynı kısımdan yönetebiliyoruz, uçuş saatleri, otel rezervasyonu ve araç kiralama. Diğer ikisinide çoklu uçuş yani birden fazla uçuş yapmak isteyen yolcular için tasarlandı.

Tasarladığımız componentler, farklı ekran boyutlarına otomatik olarak uyum sağlamak üzere tasarlandı. Bu sayede kullanıcılar, küçük ekranlı mobil cihazlarda bile formun ve içeriğin rahatlıkla görüntülenebilmesini sağlıyoruz.

Butonlar ve diğer etkileşim elemanları dokunma hareketlerine uygun olarak tasarlandı. Bu, kullanıcıların rahat bir şekilde formu doldurmasını ve işlemleri gerçekleştirmesini sağlar.

Mobil kullanıcılar genellikle kısa süre içinde bilgiye erişmek ister. Bu nedenle, içeriklerin düzeni ve sunumu mobil kullanıcıların ihtiyaçlarına uygun olarak optimize edildi.

Input alanları, seçim kutuları ve diğer form elemanları, mobil cihazlarda rahatça kullanılabilecek şekilde düzenlendi. Bu, kullanıcıların bilgilerini hızlı ve hatasız bir şekilde girmelerine yardımcı olur.