Uygulamaların kapsamı, kullanım alanları ve kullanıcı tiplerinden bağımsız olarak temel de 3 tip ekran vardır. Bunlar ise; kayıtlı dataların gösterildiği Listeleme, Yeni kayıt girişi için form ve kayıtlı bir içeriğin detay gösterimi için kullanılan görüntüleme/display ekranıdır. 

Bu ekranlar yapılacak diğer ekranlar içinde hemen her anlamda referans niteliğindedir. Örneğin bir kullanıcı listesi ekranını ele aldığımızda çok benzer, hatta aynı ekrandan çoğaltıp sadece gösterilecek veri kaynağını ve verileri seçmek yeterli olacaktır. Benzer işlemler form ve görüntüleme ekranları içinde geçerlidir. 

Row elementi ile ekran tasarımına başlarız. Bu en temel container elementi arayüze yeni elementlerin eklenmesini sağlarken yatayda uçtan uca ebeveyni yapısı dahilinde yer kaplar. Row’un ebeveyn elementi bir ekran olabileceği gibi başka bir Row elementi içindeki bir Column elementi de olabilir. Hizalama ve Padding özellikleri Column elementi için de yapılabilir ve bu da hem ebeveyn Row'u hem içindeki elementleri etkiler.

Container bazında bir boyutlandırma için panel elementini kullanabilirsiniz. Büyük bir çoğunlukla elementler hem padding hem de genişlik ve yükseklik ile boyutlandırılabilirler.

Seçili element bazında Properties ve Styling özellikleri değişkenlik gösterir. Ortak bazı alanlar olsa da çoğunlukla elementin kullanımda ihtiyaç olan özelliklere göre değişmektedir.

Arayüz tasarımına başlamadan önce bir kağıt kalemle de olsa temelde nasıl bir ekran tasarlamak istiyorsanız buna ait bir eskiz hazırlayın. Böylece ekran tasarımında yeni stillendirme seçeneklerini denerken aklınıza gelen ilk ekran fikri uçup gitmeyecektir.

Row elementini ihtiyaç oldukça iç içe kullanın, yan yana veya dikeyde sıralı elementleri eklemek için Horizontal Stack elementini kullanabilirsiniz. Önemli bir noktadan bahsetmek gerekirse panel elementi arka planına renk veya görseli dinamik olarak datadan alabilir. 

Diğer önemli bir nokta ise özellikle form ekranlarında ekleyeceğiniz Input elementleridir. Örneğin E-posta adresi alınacak alanda mutlaka email elementi eklenmelidir. Benzer diğer elementlerde de son kullanıcı tarafından yapılan girişler kontrol edilir ve doğrulama hataları ile kullanıcıya doğru bilgi girebilmesi için uyarıda bulunur. Email elementinde standart olarak giriş yapılmış metinde (.) ve (@) karakterleri kontrol edilir. Ve kullanıcının istemeden de olsa yanlış bilgi girişi engellenmiş olur. Yine aynı elementten bir örnek daha verecek olursak bir mobil uygulamada kullanıldığını düşünürsek, son kullanıcının cihaz veya klavye dil seçiminden bağımsız olarak email elementi girişi esnasında ingilizce dilinde klavye gösterilir.

Hemen her uygulama içinde Listeleme, Form ve Gösterim ekranları sıklıkla kullanılır. Bu ekranlardan kapsamlı olanlardan biriyle başlamanız önemlidir. Böylece özellikle ekran veya Table, fontlar gibi elementlerin boyutlarını daha net bir şekilde ayarlamış olursunuz. Aynı tipte ekranları çoğaltarak hızla diğer ekranları da hazırlayabilirsiniz. 

Ekranları bağlı bulundukları ana menülere göre gruplandırabilirsiniz.

Uygulama oluşturduğunuzda ön tanımlı olarak gelen tüm stilleri düzenleyebilir ancak silemezsiniz. Bu stiller özellikle hem ekranlara eklenmiş elementler hem de yeni eklenecek elementeler üzerinde düzenleme yapabilmenize yardımcı olacaktır.

Veri bağlantısı yapılmış ekranlar üzerinde düzenlemeler yaparken dikkatli olmalısınız. Bir Numeric Input elementini silmiş ve sonrasında aynı kolon içine yeni bir Numeric Input atmış olsanız da element ID’leri tutmadığı için uygulamanızda hatalara neden olacaktır. Kapsamlı düzenlemeler için ilgili ekrandan çoğaltarak düzenlemelerinizi yapın.