Menü Tasarımı

Web Arayüz Tasarımına Giriş

About this lesson

Bu öğrenme içeriğinde, Master Screen yapısını kullanarak uygulama içindeki navigasyonu sağlayan Menü tasarımını nasıl hazırlayacağımızı öğreneceğiz. 

Önce, menünün en üstünde bulunacak uygulama logosunu içeren bir Image ekleyeceğiz. 

Ardından, kullanıcıların Dashboard, Öneri Listesi, Kullanıcı Listesi ve Departman Listesi ekranlarına yönlendirilmesini sağlayacak temsili ikonları ekleyeceğiz. Bu adımları takip ederek, menü tasarımını adım adım birlikte oluşturacağız. 

Şimdi, bu süreci detaylı bir şekilde uygulayarak hazırlayalım.

  1. Screens Paneli aracılığıyla bir Master Screen oluşturun. 
  2. Açılan ekranda Master Screen’e bir isim verin. İsimlendirmeyi yaratıcılığınız doğrultusunda yapabilirsiniz.
  3. Master Screen'in Properties paneli aracılığıyla sadece Sol Layout’un kalacağı şekilde diğer Layout'ları kaldırın.
  4. Ardından Sol Layout içine bir Row Sürükleyip bırakın ve tek kolona dönüştürün.
  5. Kolon içerisine bir Image elementi ekleyin ve geçici bir resim yükleyin.
  6. Image elementi seçiliyken Image64 stilini seçin.
  7. Ardından Border alanından Radius stilini seçin.
  8. Image Elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.
  9. Sol Layout içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
  10. Kolon içerisine bir Menu elementi ekleyin.
  11. Menu elementi seçiliyken Properties paneli aracılığıyla Sub-Menuleri silin ve iki tane daha menü öğesi ekleyin.
  12. Menü öğelerinin her birini tek tek seçerek isimlendirme ve ikon seçme işlemlerini yapın.
  13. Ardından Menu elementini seçin ve Properties paneli aracılığıyla Collapsed Switch’ini aktif hale getirip, Collapsible Switch’ini pasif hale getirin.
  14. Menu elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.

Bu işlemlerle birlikte Menü tasarımınız hazır. Artık ihtiyaç duyduğunuz ekranlarda Master Screen’i seçerek hazırladığınız menü tasarımını kullanabilirsiniz.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Bu öğrenme içeriğinde, Master Screen yapısını kullanarak uygulama içindeki navigasyonu sağlayan Menü tasarımını nasıl hazırlayacağımızı öğreneceğiz. 

Önce, menünün en üstünde bulunacak uygulama logosunu içeren bir Image ekleyeceğiz. 

Ardından, kullanıcıların Dashboard, Öneri Listesi, Kullanıcı Listesi ve Departman Listesi ekranlarına yönlendirilmesini sağlayacak temsili ikonları ekleyeceğiz. Bu adımları takip ederek, menü tasarımını adım adım birlikte oluşturacağız. 

Şimdi, bu süreci detaylı bir şekilde uygulayarak hazırlayalım.

  1. Screens Paneli aracılığıyla bir Master Screen oluşturun. 
  2. Açılan ekranda Master Screen’e bir isim verin. İsimlendirmeyi yaratıcılığınız doğrultusunda yapabilirsiniz.
  3. Master Screen'in Properties paneli aracılığıyla sadece Sol Layout’un kalacağı şekilde diğer Layout'ları kaldırın.
  4. Ardından Sol Layout içine bir Row Sürükleyip bırakın ve tek kolona dönüştürün.
  5. Kolon içerisine bir Image elementi ekleyin ve geçici bir resim yükleyin.
  6. Image elementi seçiliyken Image64 stilini seçin.
  7. Ardından Border alanından Radius stilini seçin.
  8. Image Elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.
  9. Sol Layout içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
  10. Kolon içerisine bir Menu elementi ekleyin.
  11. Menu elementi seçiliyken Properties paneli aracılığıyla Sub-Menuleri silin ve iki tane daha menü öğesi ekleyin.
  12. Menü öğelerinin her birini tek tek seçerek isimlendirme ve ikon seçme işlemlerini yapın.
  13. Ardından Menu elementini seçin ve Properties paneli aracılığıyla Collapsed Switch’ini aktif hale getirip, Collapsible Switch’ini pasif hale getirin.
  14. Menu elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.

Bu işlemlerle birlikte Menü tasarımınız hazır. Artık ihtiyaç duyduğunuz ekranlarda Master Screen’i seçerek hazırladığınız menü tasarımını kullanabilirsiniz.

Kuika Platformunda yeni bir kullanıcı arayüzüne geçiyoruz ve Kuika Akademi kurslarımızı ve videolarımızı mümkün olan en kısa sürede güncelliyoruz.

Bu öğrenme içeriğinde, Master Screen yapısını kullanarak uygulama içindeki navigasyonu sağlayan Menü tasarımını nasıl hazırlayacağımızı öğreneceğiz. 

Bu öğrenme içeriğinde, Master Screen yapısını kullanarak uygulama içindeki navigasyonu sağlayan Menü tasarımını nasıl hazırlayacağımızı öğreneceğiz. 

Önce, menünün en üstünde bulunacak uygulama logosunu içeren bir Image ekleyeceğiz. 

Ardından, kullanıcıların Dashboard, Öneri Listesi, Kullanıcı Listesi ve Departman Listesi ekranlarına yönlendirilmesini sağlayacak temsili ikonları ekleyeceğiz. Bu adımları takip ederek, menü tasarımını adım adım birlikte oluşturacağız. 

Şimdi, bu süreci detaylı bir şekilde uygulayarak hazırlayalım.

  1. Screens Paneli aracılığıyla bir Master Screen oluşturun. 
  2. Açılan ekranda Master Screen’e bir isim verin. İsimlendirmeyi yaratıcılığınız doğrultusunda yapabilirsiniz.
  3. Master Screen'in Properties paneli aracılığıyla sadece Sol Layout’un kalacağı şekilde diğer Layout'ları kaldırın.
  4. Ardından Sol Layout içine bir Row Sürükleyip bırakın ve tek kolona dönüştürün.
  5. Kolon içerisine bir Image elementi ekleyin ve geçici bir resim yükleyin.
  6. Image elementi seçiliyken Image64 stilini seçin.
  7. Ardından Border alanından Radius stilini seçin.
  8. Image Elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.
  9. Sol Layout içine bir Row daha sürükleyip bırakın ve tek kolona dönüştürün.
  10. Kolon içerisine bir Menu elementi ekleyin.
  11. Menu elementi seçiliyken Properties paneli aracılığıyla Sub-Menuleri silin ve iki tane daha menü öğesi ekleyin.
  12. Menü öğelerinin her birini tek tek seçerek isimlendirme ve ikon seçme işlemlerini yapın.
  13. Ardından Menu elementini seçin ve Properties paneli aracılığıyla Collapsed Switch’ini aktif hale getirip, Collapsible Switch’ini pasif hale getirin.
  14. Menu elementinin ebeveyni kolonu seçin, yatayda ve dikeyde ortalayın.

Bu işlemlerle birlikte Menü tasarımınız hazır. Artık ihtiyaç duyduğunuz ekranlarda Master Screen’i seçerek hazırladığınız menü tasarımını kullanabilirsiniz.

Dosyalar

Sözlük

No items found.

Ödev

E-Posta Tasarımı
Email Builder Temelleri
Şablonların Kullanımı
Yeni Email Tasarımı
Mobil Arayüz Geliştirme
Mobil Ekran Tasarımlarına Giriş
Tabbar Tasarımı
Dashboard Ekran Tasarımım
Form Ekranının Tasarlanması
Listeleme Ekran Tasarımım
Detay Ekran Tasarımı
Mobile UI Prototipleme
Web UI Prototipleme
Aksiyonlarla Çalışmak
Navigasyonlarla Çalışma
Ekran Gösterim Tipleri
Web Prototip Hazırlama
Notify Ekleme
Preview Alma
Web Arayüz Tasarımına Giriş
Web Ekran Tasarımlarına Giriş
Registration Ekran Tasarımı
Header Tasarımı
Master Ekranlarla Çalışma
Menü Tasarımı
Dashboard Ekran Tasarımı
Listeleme Ekran Tasarımı
Form Ekran Tasarımı
Display Ekran Tasarımı
Elementler
Container Elementler
Date and Time Input Elementler
Display Elementler
Text Input Elementler
Numeric Input Elementler
Select Input Elementler
Data Elementler
Navigation Elementler
Interactive Elementler
Chart Elementler
Kuika'da Arayüz Tasarımına Giriş
Kuika Platformu'nda Kullanıcı Deneyimi
Uygulama Arayüz Tasarımı Süreci
Renklerle Çalışma
Boşlukların Tanımı
Yazı Stilleriyle Çalışma
Kompleks Stillerle Çalışma
Mock Data ile Çalışma
Konsept Tasarımı
Wireframe İlk Fikrin Görselleştirilmesi
Konsept Tasarımlarının Hazırlanması
UX Tasarımı
Kullanılabilirlik İlkeleri
Temel Tasarım İlkeleri
Bilgi Mimarisi
Ekranlar Arası Akış
Analiz ve Planlama
Proje Kapsamını ve Hedeflerini Tanımlama
Analiz Dokümanının Okunması
Örnek Diagramlarla Akış Okuma ve İhtiyaçların Tanımlanması
Projenin Planlanması
Designer Eğitim Seti Giriş
Low-Code Nedir?
Kuika Nedir?
Kuika ile Neler Yapabilirsin?
Platform Arayüzünü İnceleyelim
Öğrenim Sürecini Anlamak