Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Ender adlı bir eğitmen tarafından sunulan Figma programında landing page tasarımı eğitim içeriğidir. Eğitmen, izleyicilere adım adım web sayfası tasarımı yapma sürecini göstermektedir.
- Video, wiframe tasarımının tasarıma dönüştürülmesi sürecini kapsamlı şekilde ele almaktadır. İçerikte header oluşturma, logo yerleştirme, menü ekleme, buton tasarımı, konteyner alanları, responsive tasarım, görsel mockup yapma, komponent oluşturma ve varyasyonları gibi konular adım adım anlatılmaktadır.
- Eğitimde ayrıca Freepik platformundan vektör görseller indirme, Figma'nın varyant özelliğini kullanma, gölge ve blur efektleri uygulama, kılavuz çizgilerini kullanarak öğeleri sabitleme ve komponent oluşturma sırasında dikkat edilmesi gereken hatalar gibi pratik bilgiler de paylaşılmaktadır.
- 00:04Landing Page Tasarımına Başlangıç
- Ender, soru bankasıyla birlikte landing page tasarımına başlıyor.
- Wiframe kısmını çıkardıktan sonra tasarıma dökmeye başlıyor.
- Tasarım hazırlama şekli herkesin farklı olabilir, ancak frame kullanmanın mantığı detaylı anlatılacak.
- 00:16Header Alanı Oluşturma
- Header alanı için frame tool aracıyla 90 piksel yüksekliğinde bir alan oluşturuluyor.
- Header alanına logo ekleniyor ve konteyner alanına hizalanıyor.
- Frame kullanmanın faydası, logo yüksekliğini değiştirdiğinizde otomatik olarak ortalanması.
- 02:44Menü Ekleme
- Header alanına menü ekleniyor: "Hakkımızda", "İletişim" ve "Ücretsiz Üye Ol" butonları.
- Menü öğeleri Ctrl+D tuş kombinasyonu ile çoğaltılıyor.
- Menü öğeleri konteyner alanına hizalanıyor ve responsive tasarım için uygun şekilde düzenleniyor.
- 04:18Buton Oluşturma
- Buton oluşturmak için Shift+A tuş kombinasyonu ile yeni bir öğe ekleniyor.
- Butonun boyutları 8x16 piksel olarak ayarlanıyor ve zemin rengi primer kalıyor.
- Yazı tipi bold olarak seçiliyor ve buton yüksekliği manuel olarak ayarlanıyor.
- 05:25Web Tasarımında Konteyner ve Frame Kullanımı
- Konteyner alanının frame olduğu için dikeyde hizalama yapıldığında kayma olmaz.
- Buton boyutu 43 piksel ideal olarak belirlenmiş ve zoom yapıldığında shift tuşuna basarak yüzde yüz boyutta görüntülenebilir.
- Butonlar arasındaki mesafe 40 piksel olarak ayarlanmış, istenirse 45 piksel olarak değiştirilebilir.
- 06:24Banner Alanı Oluşturma
- Banner alanı için frame aracı oluşturulmuş ve yüksekliği 500 piksel olarak belirlenmiş.
- İki frame seçip shift+a tuşuna basarak otele yaparak arasındaki mesafe sıfırlanabilir ve kayma olmaz.
- Konteyner alanına yazı eklendiğinde, dikeyde hizalama yapıldığında yazı otomatik olarak ortalanır.
- 08:30Clay Mockup Kullanımı
- Clay Mockup plugini kullanılarak bilgisayar görseli eklendi ve içeriği daha sonra değiştirilebilir.
- Option+shift tuşlarına basarak orantılı bir şekilde görsel küçültülüp ortalayarak yerleştirilebilir.
- Mockup özelliği sayesinde açı ve içerik değiştirilebilir, hazır değer girilmeden tasarım tekrarlanabilir.
- 10:17Görsel ve Yazı Düzenlemesi
- Görselin üzerine zemin rengine yakın bir renk eklenerek tasarımla uyumlu hale getirildi.
- Görsel değiştirildiğinde, edit mockup seçeneği ile ayarlar korunarak içerik güncellenebilir.
- Konteyner alanının dışına çıkabilen görseller için sorun yoktur, ancak yazıların konteyner alanına bağlı kalması önemlidir.
- 12:56Figma'da Görsel Düzenleme
- Zemin rengi değiştirilip, açık tonu gölge efekti için kullanılıyor.
- Laptop imajı efekti için layer blur uygulanıyor ve opacity değeri ayarlanıyor.
- Klip content özelliği devre dışı bırakılarak görselin dışarıya taşması sağlanıyor.
- 13:48Gölgelendirme ve Vitrin Tasarımı
- Laptop'a drop shadow efekti uygulanarak üç boyut kazandırılıyor, ancak çok abartılmamalı.
- Gölgeler için zemin renginin koyu tonları kullanılıyor ve opacity değeri ayarlanarak estetik bir görünüm sağlanıyor.
- Vitrin alanı, kullanıcıyı yakalamaya çalışılan canlı ve dinamik bir alan olarak tasarlanmalı.
- 15:11Görsel Kaynakları Bulma
- Freepik.com sitesinden ücretsiz vektör imajlar aranıyor.
- Tasarım bütünlüğünü sağlamak için aynı imaj seti kullanılması öneriliyor.
- İndirilen EPS formatındaki görseller, firmada açılabilmesi için SVG formatına dönüştürülüyor.
- 17:29Figma'da Varyant Kullanımı
- İndirilen görseller komponent olarak oluşturulup, varyant özelliği kullanılarak farklı boyutlarda kullanılabilir.
- Figma'nın beta sürümü, hala hazırlık aşamasında olduğu için hata çıkabilir ve sorun olabilir.
- Varyant özelliği için mail adresi ile talep oluşturulabilir ve bir iki gün içinde kullanıma sunulabilir.
- 18:49Gölgelendirme ve Son Düzenlemeler
- Laptopun altına elips eklenerek gölge efekti uygulanıyor.
- Gölgelerin boyutu, açısı ve opacity değeri ayarlanarak gerçekçi bir görünüm sağlanıyor.
- Sol tarafta boş kalan alana "world dots" araması yapılarak yeni bir görsel ekleniyor.
- 21:31Figma'da Gruplama ve Düzenleme
- Figma'da yüzlerce şekil seçildiğinde, bunları gruplamak için Shift+CMD+G tuş kombinasyonu kullanılır.
- Gruplanan şekiller tek bir vektör haline getirilir ve tek bir parça gibi hareket eder.
- Gruplanan dünya haritası, dijital paranın altına yapıştırılır ve konumlandırılır.
- 23:53Komponent Oluşturma
- Buton tasarımı yapıldıktan sonra, komponent olarak oluşturulabilir.
- Komponent oluşturmak için Ctrl+Option+K kısayolu kullanılır.
- Komponentler, farklı varyasyonlar (default, hover, ghost) olarak oluşturulabilir.
- 25:48Komponent Kullanımı ve Hatalar
- Asset kısmından ücretsiz butonlar komponente sürüklenerek kullanılabilir.
- Komponentlerin farklı varyasyonları (default, ghost, hover) tasarımda kullanılabilir.
- Komponent oluştururken, iç içe geçmiş komponentler oluşturmak yerine, detach instance (Option+CMD+B) kullanarak ayrı komponentler oluşturulmalıdır.
- 30:24Responsive Tasarım
- Dünya haritası gibi imajlar, responsive tasarım için sabitlenmelidir.
- İmajları sabitlemek için dikeyde ortalama ve sola hizalama yapılır.
- Bu şekilde, tasarım boyutu değiştirildiğinde imajlar otomatik olarak hizalanır.