UI ve UX Tasarımcılar İçin Detaylı Wireframe Eğitimi [FİGMA]

Kağıt üzerinde ve dijital ortamda(Figma) masaüstü, tablet ve mobil cihazlara uygun wireframe oluşturma

Ratings 4.83 / 5.00

UI ve UX Tasarımcılar İçin Detaylı Wireframe Eğitimi [FİGMA]

What You Will Learn!

Wireframe nedir, neden önemlidir?
Kağıt üzerinde wireframe oluşturma
Wireframe oluştururken nelere dikkat edilmelidir?
Farklı ekran çözünürlükleri için Figma ile wireframe oluşturma

Description

Merhaba sevgili tasarım sever arkadaşlar,
UI ve UX Tasarımcılar İçin Detaylı Wireframe Eğitimi'ne hoş geldiniz.

Eğitim setinin ilk bölümünde wireframe hakkında temel bilgilere sahip olacaksınız. Böylece bir proje düzeninin önce ana yapısını, sonra parçalarını oluşturmanızı sağlayan, tasarım süreçlerimizi kolaylaştıran “wireframe”in temelde ne olduğunu ve nasıl yapıldığını öğreneceksiniz. Ayrıca wireframe oluştururken dikkat etmeniz gereken önemli ipuçlarını da keşfedeceksiniz. Tasarım sürecinde elde ettiğiniz verilerinizi farklı akışlarda kullanıcıya sunabilirsiniz. Kısaca wireframe'leri, üreteceğiniz tasarım alternatiflerinin eskizleri olarak tanımlayabiliriz.

Her tasarım sürecinde olduğu gibi eskizler tasarımın son halini oluşturmamıza yardımcı olur. Bir proje üzerinde çalışırken fikirlerinizi ekip arkadaşlarınıza, patronlarınıza, müşterilerinize sunmanız, onların geri bildirimlerini almanız ve projeyi ona göre ilerletmeniz gerekecek. Böyle durumlarda wireframe'ler, ortaya koyduğunuz tasarım fikirlerini karşı tarafa net bir şekilde anlatır.

Wireframe'ler üzerinde çalışırken renk ve font gibi unsurları ön planda tutmayız, dikdörtgen, daire gibi en temel şekiller kullanarak ekranlarımızı oluştururuz. Wireframe'leri oluştururken öncelikli olan kullanıcının bizim sunduğumuz bilgiyi nasıl bir akışta alacağı, ekranda neler göreceği, kısacası deneyimidir. Bu nedenle wireframe'leri oluştururken kullanıcının alması gereken temel bilgilere akışta sunduğumuzdan ve kullanıcının sayfa üzerinde hareket edebilmesi için gerekli olan temel bileşenlere yer verdiğimizden emin olmalıyız. Bu bileşenlere, navigasyon barı, çeşitli butonlari text girişleri(geri dön, kaydet, satın al vb.), arama kutucukları örnek olarak verilebilir.

* Wireframe hakkında temel bilgileri edindikten sonra elimizdeki dökümantasyona göre ilk önce kağıt üzerinde wireframe'i oluşturacağız.

* Grid sistem kullanarak mobil, tablet ve masaüstü versiyonlar olmak üzere dijital ortamda Figma ile wireframe çizimini gerçekleştireceğiz.

* Bu çizimi gerçekleştirirken önceden hazırladığımız ui elemanlarını kullanacağız. Renk kullanımı, tipografi, component, auto layout gibi kriterleri dikkate alarak işlemleri gerçekleştiriyor olacağız.

Kursu belirtilen ders sırasına göre izlemeniz faydalı olacaktır.

Herhangi bir sorunuz olduğunda soru cevap kısmından veya özel durumlar için mesaj atarak benden cevap alabileceksiniz. Temel düzeyde Figma bilgisi bu eğitimi almanın ön şartlarından birisidir.