Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Fatih Kadir Akın tarafından sunulan bir eğitim içeriğidir. Fatih, Protel'de yazılım geliştiricisi olarak çalışmakta, C: Istanbul Org topluluğuna üyesidir ve "Modern JavaScript" adlı bir kitabın yazarıdır.
- Video, atomik tasarım kavramını, tasarım tarihindeki gelişim sürecini ve Brad Frost'un bu kavramı sistematikleştirmesini anlatmaktadır. İçerikte atomik tasarımın temel prensipleri (atom, molekül, organizma, şablon), style guide kavramı ve tasarım dilinin önemi detaylı olarak ele alınmaktadır. Ayrıca, React, Vue.js ve Angular gibi farklı framework'lerde komponent yapısının nasıl uygulanabileceği ve dosya dizin yapısının nasıl ayarlanacağı konuları da işlenmektedir.
- Videoda ayrıca tasarım analizi süreci Instagram örneği üzerinden gösterilmekte, kendi şirketinde geliştirilen bir style guide örneği paylaşılmakta ve atomik tasarımın iş akışını nasıl değiştirdiği anlatılmaktadır. Son bölümde ise Suat Bey ile yapılan bir teknik sohbet formatında dosya dizin yapısı hakkında bilgiler paylaşılmaktadır.
- 00:27Atomik Tasarım Konusuna Giriş
- Konuşmacı, atomik tasarım ve atomik arayüz mimarisinde kod tasarımı konusunu ele alacak.
- Atomik tasarım, yeni bir konsept değil, ancak standartlaşması ve isimlendirilmesi yeni bir süreç.
- Konuşmacı Fatih Kadir Akın, Protel'de yazılım geliştirici olarak çalışmakta ve C: Istanbul Org topluluğuna üye.
- 02:41Atomik Tasarımın Ortaya Çıkışı
- Atomik tasarım, zaman içinde ortaya çıkan bir konsept olup, neden böyle bir şey doğdu diye sorgulamak önemlidir.
- Photoshop'ta slice sliting gibi tasarımlar, imajları kesip parçalara ayırıp content alanını boş bırakarak PHP ile içerik eklemek şeklinde çalışıyordu.
- PNG şeffaf alfa kanalı imaj türü ortaya çıktığında, imajları üst üste bindirmek ve paralaks efektleri oluşturmak kolaylaştı.
- 04:59Bootstrap ve Komponentler
- Bootstrap, hızlı bir şekilde tasarım yapmayı sağlayan bir style guide ve framework olarak hayatımıza girdi.
- Bootstrap ile custom dizaynlar yapmak zorlaştı, bu da mindsetlerin değişmesine neden oldu.
- Komponent yapısı, aynı kodu tekrar tekrar yazmak yerine web components ve React View gibi yaklaşımlarla ortaya çıktı.
- 06:31Atomik Tasarımın Temel Kavramları
- Brad Frost adlı geliştirici ve yazar, atomik tasarım kavramını isimlendirip bir kitap yazdı.
- Atomik tasarım, maddenin en küçük parçası atomdur ilkesine dayanıyor.
- Atomlar molekülleri, moleküller organizmaları oluşturur ve bu seviyeden sonra şablonlar elde edilir.
- 07:47Atomik Tasarımın Uygulanması
- Bir input, tasarımdaki en küçük parçalardan biri olarak atom olarak adlandırılır.
- Input ve label bir araya getirildiğinde form grubu oluşturulur, bu molekül seviyesinde bir yapıdır.
- İki form grubu bir araya getirildiğinde login formu oluşturulur, bu organizma seviyesindeki bir yapıdır.
- 09:40Tasarım Analizi Süreci
- Tasarım analiz sürecinde önce organizmalara (gruplara) ayrılır.
- Gruplar daha küçük parçalara ayrılır ve en küçük yapılar (ikonlar, avatarlar) bulunur.
- Style guide oluşturulduktan sonra, front-end developer geliştirme sürecinde bu parçaları geri monte ederek birleştirme işini yapar.
- 11:27Tasarım Dili ve Style Guide
- Tasarım dili, bir ürünün veya web sayfasının tasarım kültürünü belirleyen bir star guide'dır.
- Tasarım dilinde font, buton gibi öğelerin en fazla iki tür olması gerekir, aksi takdirde farklı fontlar kullanıldığında gözünüzde batar ve rahatsız edersiniz.
- Flat design ve material design gibi tasarım dilleri, tasarım dilinin bir parçasıdır ve bu dil içinde olmayan öğeler (örneğin border radius, gölge ve gradyan) tasarım diline yabancı görünür.
- 13:05Style Guide'ın Önemi
- Style guide, tasarım dilinin bir parçasıdır ve Türkiye'deki şirketlerde çok bulunmasa da yurt dışındaki şirketlerde yaygın olarak kullanılmaktadır.
- GitHub, Facebook gibi büyük şirketlerin mutlaka bir style guide'ı vardır ve bu guide'da boşluklar, gradyanlar, ana renkler ve fontlar gibi detaylar belirtilir.
- Atomik dizayn, style guide'ı periyodik tabloya benzetir; her sitenin ve ürünün kendi periyodik tablosu olması gerekir.
- 14:54Atomik Dizayn Örneği
- Atomik dizayn örneğinde, input'un farklı durumları (küçük, orta, büyük, price, dolar, ikon, disabled) ve butonların tüm state'leri (çerçeveli, outline, disabled, loading) listelenir.
- Tasarımcı dizayn verirken, front-end ekibi bu dizayndan state'leri çıkarır ve bazen designer'dan hover state gibi ek bilgileri ister.
- Tasarımcı tarafından gönderilen tüm ikonlar style guide'a eklenir ve tekrar tekrar kullanılabilir.
- 17:14Atomik Dizayn ve İş Akışı
- Atomik dizayn, yapboz parçalarını bir araya getirip yeni şeyler elde etmek üzerine kuruludur.
- Bu yaklaşım, designer-developer arasındaki sürtüşmeyi minimuma indirir ve iş akışını daha düzgün hale getirir.
- Yeni iş akışında "mizanpaj" terimi kullanılır; mizanpaj, sayfa içerisindeki öğelerin nerede olacağı bilgisini ifade eder.
- 19:48Mizanpaj ve Tasarım Süreci
- Atomik dizayn olduğu için designer her sayfayı tekrar tekrar dizayn etmez, çünkü elinde komponentleri vardır.
- Tasarımcı sadece mizanpaj (dizilim) yapar ve UX'ine karar verir, wireframe bile gönderse olur.
- Tasarımcı mutlu çünkü yeni bir şey icat etmek zorunda kalmaz, sadece mevcut kuralları kullanır.
- 20:49Front-end Tasarım Süreci
- Front-end tasarımcılar artık sadece dizilim yapıyor çünkü elinde style guide ve template'i var.
- Tasarımcılar artık tepeden aşağı bakmıyor, sayfada daha önce kullanılmayan inputları ve mizanpaj değişikliklerini fark ediyor.
- Front-end tasarımcılar, tasarımcıya giderek yeni elementlerin (örneğin disable radyo butonu) tüm state'lerini (disable, hover, seçili) öğreniyor ve bunları önden tasarlıyor.
- 22:45Sketch Kullanımı ve Avantajları
- Sketch kullanan tasarımcılar, sembolleri kullanarak component atom ve molekül yapılarını dosyada tutabiliyor.
- Sketch'te bir yerde sembolle dizayn değiştirildiğinde, bütün sayfalarda dizayn değişiyor ve tasarım dilini koruyor.
- Tasarımcılar sadece mizanpaj yapıyor, insert symbol ile design'ı yerleştiriyor.
- 24:09Front-end Tasarım Araçları
- Front-end tasarımcılar için komponent yapısı geliştirilmiş bir yapı olarak sunuluyor.
- Bu yapı React, Vue, Angular gibi framework'lerde kullanılabilir ve web component'ler oluşturabilir.
- Komponent yapısı, elementleri paketleyerek yeni elementler oluşturmayı sağlıyor.
- 25:39Atomik Komponentler
- Atomik komponentler (örneğin magnify glass, icon view, buton view) kendi başına bağımsız hareket edebiliyor.
- Atomik komponentleri tamamen değiştirdiğinizde kodbase'iniz hala temiz kalabiliyor.
- Stillerini ayırdığınızda (style components) sadece o komponenti komple yeniden dizayn etmek istediğinizde kodunuz temiz kalıyor.
- 28:15Molekül ve Template Kavramları
- Molekül, üç farklı komponentin birleşimi olarak düşünülüyor (örneğin search input).
- Template, sayfanın yerleştirmesini yapıyor ve mizanpajı oluşturuyor.
- Template ile sayfa arasında fark var: template şablon, sayfa ise veriyi bağladığımız kısım.
- 31:21Dinamik Template Kullanımı
- Home view gibi bir component çağrıldığında, kullanıcı login olmuşsa gerçek bir datayı alıyor.
- Template'e kadar hiçbir gerçek data yoksa tamamen dizayn üzerine kurulmuş yapı, sayfa ise dizaynının direkt bağlı olduğu yer.
- Dinamik olarak hangi template'i göstereceğini switch ederek içeriye content basıyor.
- 32:37Dosya Dizin Yapısı
- Flat bir dosya yapısı tercih edilebilir, iç içe klasörler yerine dosyalar karışık olarak tek bir yapıda tutulabilir.
- Organizma, atomik gibi kavramlar sadece mindset olarak kafamızda bilmemiz gereken şeylerdir.
- Daha düzenli olmak isteyenler için atomlar, moleküller, organizmalar gibi klasörler oluşturulabilir.