UI/UX Web Designer

UI/UX Tasarımın Tüm Detaylarını Uçtan Uca Öğrenerek Profesyonel Seviyeye Erişin!

Mezunlarımızın Çalıştığı Şirketler

Eğitim programlarımız lider şirketlerle kurduğumuz ortaklıklar ile güçlendirilmiş ve inovatif ekipler tarafından kullanılmaktadır.

Program hakkında ayrıntılı bilgi edinin

Kurs 16 Saat

UI/UX Web Designer

Figma’yı başlangıç seviyesinden ileri seviyeye kadar öğreneceğiniz bu eğitimle birlikte, UI/UX tasarım prensiplerini öğrenip, bunu gerçek uygulamalar yaparak hayata geçireceksiniz.

Müfredatı gizle

Figma’ya Giriş

Bu bölümde, genel anlamda UI ve UX kavramlarına hakim olduktan sonra, Figma arayüzüne giriş yapacak, Figma'nın temel konularını ve araçlarını öğreneceksiniz. Bir tasarımı oluştururken kullanmanız gereken tüm bu araçları örneklerle anlayacaksınız. Ayrıca, Figma'da resimlerin kullanımı, eklentilerle çalışma, maskeleme gibi konuları da ele alarak, giriş seviyesinde Figma bilgisine ulaşacaksınız.

Bölümü ayrıntılı incele

UI ve UX Kavramlarına Genel Bakış
Figma Nedir, Ne İşe Yarar, Kimler Kullanır, Avantajları Nelerdir?
Figma Arayüzüne Giriş ve Toolbox Kullanımı
Aligment ve Boolean Operations
Resim Dosyaları ve Vektör Objelerin Figma Üzerinde Kullanımı
Figma’da Maskeleme
Renk ve Tipografileri Kütüphaneye Ekleme
Plugin Kurulumu ve Sıkça Kullanılan Pluginler

Temel Figma Özellikleri

Bir tasarımı oluşturmaya başlarken yapısal özellikleri önceden belirlemek büyük bir öneme sahiptir. Figma’nın yapısal özelliklerini öğreneceğiniz bu bölümde, çalışmalarınızda nasıl bir grid yapısı oluşturmanız gerektiğini, responsive tasarımı yaparken hangi kuralları bilmeniz gerektiğini öğrenecek ve otomatik yerleşim düzeni hakkında detaylı bilgi sahibi olacaksınız.

Bölümü ayrıntılı incele

Effects Kullanımı
Layout Grid Kullanımı
Component ve Master Component Oluşturma
Variant Oluşturma
Component Properties
Constraints (Kısıtlamalar)
Tüm Yönleriyle Auto Layout V4

Prototype ve Interaction

Bu bölümde, yaptığınız tasarımları geçiş animasyonları ve linkler ile etkileşimli hale getirebileceksiniz. Uygulayacağınız prototiplerde değişkenleri ve gelişmiş prototipleme özelliklerini kullanarak tasarımlarınızı daha hızlı ve efektif hale dönüştürebileceksiniz. Aynı zamanda tasarım sistemlerinizi modüler olarak oluşturma yönünde ilk adımınızı atmış olacaksınız.

Bölümü ayrıntılı incele

Örneklerle Interactive Components
Prototip Oluşturma
Advanced Prototype Özelliği (Mantıksal ve Şartlı İfadeler)
One Page (Anchor Link) Tekniği ile Sayfa Oluşturma
Variables ve Tokens
Variable Mode Kullanım

Dinamik Olarak Verilerin Figma’da Kullanımı

Bu bölümde, uzak veri tabanındaki verileri Figma içine çekerek çalışmalarınızda harici verilerin kullanımını gerçekleştirebileceksiniz. Figma Mirror uygulaması ile yaptığınız tasarımları mobil cihazınızda deneyimleyebileceksiniz.

Bölümü ayrıntılı incele

Google E-Tabloların Figma ile Birlikte Kullanımı
Airtable ile Uzak Veritabanından Verileri Figma’ya Aktarma
Json Formatındaki Dosyaların Figma Componentler ile Kullanımı
Figma Mirror Kullanımı

Design System’a Giriş

Bu bölümde, bir projeye başlarken o projeye hangi adımlar ve yapı ile başlanması gerektiğini öğreneceksiniz. Tasarım boyunca kullanılacak olan yapıları modüler bir şekilde öğrenip farklı projeler için uygulayabileceksiniz. Design System ve UI Kit arasındaki farkı kavrayarak bunları ne zaman kullanmanız gerektiği bilgisini edinmiş olacaksınız.

Bölümü ayrıntılı incele

Design System Nedir, Ne İşe Yarar?
HTML ve CSS Nedir, Tasarımcılar İçin Gerekli Midir?
Grid Sistem
Butonlar ve Özellikleri
Tipografi
İnputlar ve Özellikleri
İkonlar ve Özellikleri
4 ve 8’li Boşluk Sistemi
Renk Mimarisi Oluşturma ve Kütüphaneye Ekleme
Atomic Design System ile Buton Seti Oluşturma

Sıfırdan Web Sitesi Tasarımı

Bu bölümde, projeye başlamadan önce özellikle UX (Kullanıcı Deneyimi) çerçevesi altında yapılması gereken adımları öğrenip daha sonra bunları UI (Kullanıcı Arayüzü) tasarımına aktaracaksınız. Tüm eğitim boyunca edindiğiniz bilgileri kullanarak, tasarım sistemine uygun bir web projesini yazılım ekibine teslim edebileceksiniz. Ayrıca, tasarım öncesi wireframe çalışmalarını oluştururken nelere dikkat etmeniz gerektiğini ve bu çalışmaların nasıl yapılması gerektiğini de öğreneceksiniz.

Case Study: Finans Sektörü için One Page Web Ui Design

Bölümü ayrıntılı incele