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.

Web UI Prototipleme

Web Prototip Hazırlama

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.