Web Prototip Hazırlama

Web UI Prototipleme

About this lesson

Bu öğrenme içeriğinde ekran tasarımlarını hazırladığımız bir fikrim var web uygulamasının prototiplemesini gerçekleştireceğiz. Öğrenme içeriği boyunca, Kuika Low-code platformunun sunduğu çeşitli sistem aksiyonlarından faydalanacağız. Bu sayede, fikirlerinizi hızlı ve etkili bir şekilde gerçeğe dönüştürmenin yollarını keşfedeceksiniz. 

Prototiplemeye başlayalım.

  1. Master Screen’i açın. 
  2. Dashboard ekranı temsil eden Menü öğesini seçin. Navigate aksiyonunu ekleyin.
  3. Açılacak ekran olarak Dashboard ekranını seçin ve ekran açma biçimi olarak Current seçimi yapın.
  4. Şimdi aynı işlemi diğer menü öğeleri için de uygulayın.

Master Screen içerisinde çalışmaları tamamladıktan sonra Dashboard ekranını açın.

  1. Item Tree aracılığıyla Content Menu’yü seçin.
  2. Profile öğesini seçin ve Navigation aksiyonu ekleyin.
  3. Profile ekranını seçin ve ekran açılma tipi olarak Drawer’ı, yön olarak Right’ı seçin.
  4. Ardından Logout öğesini seçin ve Authorization aksiyonları içerisinde yer alan Logout aksiyonunu ekleyin.
  5. Dashboard'a ekranda yer alan fikirlere yönelik detay ekranına erişmek için GalleryView içinde yer alan Kolon'u seçin ve Navigate aksiyonu ekleyin.
  6. Yönlendirilecek olan SuggestionDetail ekranını seçin ve Drawer seçimini yapın.
  7. Fikirlerin listelendiği alanda Vote ve Comment ikonlarına ilgili ekranlara yönlendirmeyi sağlayan Navigate Aksiyonunu ekleyin, ekran açılma biçimlerini seçin ve ekran boyutlarını düzenleyin.

Dashboard ekranında yer alan sistem aksiyonu bağlama işlemlerini gerçekleştirdik.

  1. Şimdi Kullanıcı listeleme ekranını açın.
  2. Item Tree aracılığıyla Content Menu’yü seçin.
  3. Tıpkı Dashboard ekranında olduğu gibi Profile öğesini seçin ve Navigation aksiyonu ekleyin.
  4. Profile ekranını seçin ve ekran açılma tipi olarak Drawer’ı, yön olarak Right’ı seçin.
  5. Ardından Logout öğesini seçin ve Authorization aksiyonları içerisinde yer alan Logout aksiyonunu ekleyin.
  6. Tablo’da bulunan göz ikonunu seçin. Navigate aksiyonu ekleyin.
  7. Açılacak ekran olarak UserDetail seçimini yapın ve ekran açılma tipini Drawer seçin.
  8. Açılma yönü olarak Right seçin.

Liste ekranından sonra Form ekranı ile devam edelim.

  1. Yeni fikir ekleme ekranını açın.
  2. Header’da yer alan ikonu seçin.
  3. GoBack aksiyonunu ekleyin.

Aynı işlemi UserDetail ekranı için de gerçekleştirelim.

  1. UserDetail ekranını açın.
  2. Header’da yer alan kapatma ikonunu seçin ve GoBack aksiyonunu ekleyin.

Web uygulama için tasarımlarını birlikte hazırladığımız ekranların prototiplemesini tamamladık. İsterseniz RUN butonunu tıklayarak prototipinizi test edebilirsiniz.

Bu öğrenme içeriğinde yer alan işlemleri daha önce ödev olarak size sunulan form ekranları, detay ekranları ve profil ekranları için de gerçekleştirmenizi bekliyoruz.

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 ekran tasarımlarını hazırladığımız bir fikrim var web uygulamasının prototiplemesini gerçekleştireceğiz. Öğrenme içeriği boyunca, Kuika Low-code platformunun sunduğu çeşitli sistem aksiyonlarından faydalanacağız. Bu sayede, fikirlerinizi hızlı ve etkili bir şekilde gerçeğe dönüştürmenin yollarını keşfedeceksiniz. 

Prototiplemeye başlayalım.

  1. Master Screen’i açın. 
  2. Dashboard ekranı temsil eden Menü öğesini seçin. Navigate aksiyonunu ekleyin.
  3. Açılacak ekran olarak Dashboard ekranını seçin ve ekran açma biçimi olarak Current seçimi yapın.
  4. Şimdi aynı işlemi diğer menü öğeleri için de uygulayın.

Master Screen içerisinde çalışmaları tamamladıktan sonra Dashboard ekranını açın.

  1. Item Tree aracılığıyla Content Menu’yü seçin.
  2. Profile öğesini seçin ve Navigation aksiyonu ekleyin.
  3. Profile ekranını seçin ve ekran açılma tipi olarak Drawer’ı, yön olarak Right’ı seçin.
  4. Ardından Logout öğesini seçin ve Authorization aksiyonları içerisinde yer alan Logout aksiyonunu ekleyin.
  5. Dashboard'a ekranda yer alan fikirlere yönelik detay ekranına erişmek için GalleryView içinde yer alan Kolon'u seçin ve Navigate aksiyonu ekleyin.
  6. Yönlendirilecek olan SuggestionDetail ekranını seçin ve Drawer seçimini yapın.
  7. Fikirlerin listelendiği alanda Vote ve Comment ikonlarına ilgili ekranlara yönlendirmeyi sağlayan Navigate Aksiyonunu ekleyin, ekran açılma biçimlerini seçin ve ekran boyutlarını düzenleyin.

Dashboard ekranında yer alan sistem aksiyonu bağlama işlemlerini gerçekleştirdik.

  1. Şimdi Kullanıcı listeleme ekranını açın.
  2. Item Tree aracılığıyla Content Menu’yü seçin.
  3. Tıpkı Dashboard ekranında olduğu gibi Profile öğesini seçin ve Navigation aksiyonu ekleyin.
  4. Profile ekranını seçin ve ekran açılma tipi olarak Drawer’ı, yön olarak Right’ı seçin.
  5. Ardından Logout öğesini seçin ve Authorization aksiyonları içerisinde yer alan Logout aksiyonunu ekleyin.
  6. Tablo’da bulunan göz ikonunu seçin. Navigate aksiyonu ekleyin.
  7. Açılacak ekran olarak UserDetail seçimini yapın ve ekran açılma tipini Drawer seçin.
  8. Açılma yönü olarak Right seçin.

Liste ekranından sonra Form ekranı ile devam edelim.

  1. Yeni fikir ekleme ekranını açın.
  2. Header’da yer alan ikonu seçin.
  3. GoBack aksiyonunu ekleyin.

Aynı işlemi UserDetail ekranı için de gerçekleştirelim.

  1. UserDetail ekranını açın.
  2. Header’da yer alan kapatma ikonunu seçin ve GoBack aksiyonunu ekleyin.

Web uygulama için tasarımlarını birlikte hazırladığımız ekranların prototiplemesini tamamladık. İsterseniz RUN butonunu tıklayarak prototipinizi test edebilirsiniz.

Bu öğrenme içeriğinde yer alan işlemleri daha önce ödev olarak size sunulan form ekranları, detay ekranları ve profil ekranları için de gerçekleştirmenizi bekliyoruz.

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 ekran tasarımlarını hazırladığımız bir fikrim var web uygulamasının prototiplemesini gerçekleştireceğiz. Öğrenme içeriği boyunca, Kuika Low-code platformunun sunduğu çeşitli sistem aksiyonlarından faydalanacağız. Bu sayede, fikirlerinizi hızlı ve etkili bir şekilde gerçeğe dönüştürmenin yollarını keşfedeceksiniz.

Bu öğrenme içeriğinde ekran tasarımlarını hazırladığımız bir fikrim var web uygulamasının prototiplemesini gerçekleştireceğiz. Öğrenme içeriği boyunca, Kuika Low-code platformunun sunduğu çeşitli sistem aksiyonlarından faydalanacağız. Bu sayede, fikirlerinizi hızlı ve etkili bir şekilde gerçeğe dönüştürmenin yollarını keşfedeceksiniz. 

Prototiplemeye başlayalım.

  1. Master Screen’i açın. 
  2. Dashboard ekranı temsil eden Menü öğesini seçin. Navigate aksiyonunu ekleyin.
  3. Açılacak ekran olarak Dashboard ekranını seçin ve ekran açma biçimi olarak Current seçimi yapın.
  4. Şimdi aynı işlemi diğer menü öğeleri için de uygulayın.

Master Screen içerisinde çalışmaları tamamladıktan sonra Dashboard ekranını açın.

  1. Item Tree aracılığıyla Content Menu’yü seçin.
  2. Profile öğesini seçin ve Navigation aksiyonu ekleyin.
  3. Profile ekranını seçin ve ekran açılma tipi olarak Drawer’ı, yön olarak Right’ı seçin.
  4. Ardından Logout öğesini seçin ve Authorization aksiyonları içerisinde yer alan Logout aksiyonunu ekleyin.
  5. Dashboard'a ekranda yer alan fikirlere yönelik detay ekranına erişmek için GalleryView içinde yer alan Kolon'u seçin ve Navigate aksiyonu ekleyin.
  6. Yönlendirilecek olan SuggestionDetail ekranını seçin ve Drawer seçimini yapın.
  7. Fikirlerin listelendiği alanda Vote ve Comment ikonlarına ilgili ekranlara yönlendirmeyi sağlayan Navigate Aksiyonunu ekleyin, ekran açılma biçimlerini seçin ve ekran boyutlarını düzenleyin.

Dashboard ekranında yer alan sistem aksiyonu bağlama işlemlerini gerçekleştirdik.

  1. Şimdi Kullanıcı listeleme ekranını açın.
  2. Item Tree aracılığıyla Content Menu’yü seçin.
  3. Tıpkı Dashboard ekranında olduğu gibi Profile öğesini seçin ve Navigation aksiyonu ekleyin.
  4. Profile ekranını seçin ve ekran açılma tipi olarak Drawer’ı, yön olarak Right’ı seçin.
  5. Ardından Logout öğesini seçin ve Authorization aksiyonları içerisinde yer alan Logout aksiyonunu ekleyin.
  6. Tablo’da bulunan göz ikonunu seçin. Navigate aksiyonu ekleyin.
  7. Açılacak ekran olarak UserDetail seçimini yapın ve ekran açılma tipini Drawer seçin.
  8. Açılma yönü olarak Right seçin.

Liste ekranından sonra Form ekranı ile devam edelim.

  1. Yeni fikir ekleme ekranını açın.
  2. Header’da yer alan ikonu seçin.
  3. GoBack aksiyonunu ekleyin.

Aynı işlemi UserDetail ekranı için de gerçekleştirelim.

  1. UserDetail ekranını açın.
  2. Header’da yer alan kapatma ikonunu seçin ve GoBack aksiyonunu ekleyin.

Web uygulama için tasarımlarını birlikte hazırladığımız ekranların prototiplemesini tamamladık. İsterseniz RUN butonunu tıklayarak prototipinizi test edebilirsiniz.

Bu öğrenme içeriğinde yer alan işlemleri daha önce ödev olarak size sunulan form ekranları, detay ekranları ve profil ekranları için de gerçekleştirmenizi bekliyoruz.

Dosyalar

No items found.

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