Bu ilk dersimizde tasarımımızda kullandığımız Inter fontunu Webflow projemize dahil edeceğiz. Inter fontu Google Fonts dizininde yer aldığı için işimiz oldukça kolay olacak. Figma: https://www.figma.com/file/UfQCGxHdRA8kSzJkoxsCja/UIDESIGN-ROADMAP-(Comunity) Notion: https://omur.notion.site/UI-Design-Roadmap-5f0f7c22a328484cba5091792bea1776 Sonrasında projemiz için temel tipografi ayarlarını Webflow Designer ekranı üzerinden yapacağız. Ders sırasında Webflow'un özelliklerine ve kısayollarına dair bazı küçük bilgiler de paylaşacağız. UI Design Roadmap tasarımına Figma üzerinden ulaşmak için yukarıda paylaştığım bağlantıyı kullanabilirsiniz. Tasarım üzerinde daha rahat hareket edebilmek ya da videodaki Figma görünümlerinin aynısını deneyimleyebilmek için tasarımın Figma üzerinde kendinize ait bir kopyasını oluşturarak işlem yapabilirsiniz.
Bu dersimizde aşağıdaki üç başlık için yardımcı sınıflar oluşturacağız; - Tipografi - Gölge - Renk Bu dersin sonunda tasarımınızda bulunan yazı tiplerini, gölgeleri ve renkleri Webflow'da kolayca uygulayabileceğiniz yardımcı sınıflar/araçlar olarak kurgulamayı ve oluşturmayı öğrenmiş olacaksınız.
Bu dersimizde bir düğme bileşenini, tüm state'leri ve tüm varyasyonları ile birlikte oluşturacağız. State'ler; - Hover - Active - Focus - Visited - Disabled Renk Varyasyonları; - Primary - Secondary - Tertiary - Quaternary Boyut Varyasyonları; - Large - Small İkon Varyasyonları; - With left icon - With right icon Genişlik Varyasyonları; - Block Sosyal Varyasyonlar; - Google - Twitter - Facebook Bu dersin sonunda "state", "variation" ve "symbol" kavramlarını öğrenmiş ve projenizin ilk bileşenini oluşturmuş olacaksınız.
Bu dersimizde bir düğme bileşenini, tüm state'leri ve tüm varyasyonları ile birlikte oluşturmaya devam edeceğiz. State'ler; - Hover - Active - Focus - Visited - Disabled Renk Varyasyonları; - Primary - Secondary - Tertiary - Quaternary Boyut Varyasyonları; - Large - Small İkon Varyasyonları; - With left icon - With right icon Genişlik Varyasyonları; - Block Sosyal Varyasyonlar; - Google - Twitter - Facebook Bu dersin sonunda "state", "variation" ve "symbol" kavramlarını öğrenmiş ve projenizin ilk bileşenini oluşturmuş olacaksınız.
Bu dersimizde de bir düğme bileşenini, tüm state'leri ve tüm varyasyonları ile birlikte oluşturmaya devam edeceğiz. State'ler; - Hover - Active - Focus - Visited - Disabled Renk Varyasyonları; - Primary - Secondary - Tertiary - Quaternary Boyut Varyasyonları; - Large - Small İkon Varyasyonları; - With left icon - With right icon Genişlik Varyasyonları; - Block Sosyal Varyasyonlar; - Google - Twitter - Facebook Bu dersin sonunda "state", "variation" ve "symbol" kavramlarını öğrenmiş ve projenizin ilk bileşenini oluşturmuş olacaksınız.
Bu derste yeni bileşenlere geçeceğiz. Bileşenler ne kadar basit olursa, derse de o kadar fazlası sığıyor olacak :) Progress bileşeninin bir kısmı bu derse sığdı; sonraki derste devam edip, onu da tamamlıyor olacağız.
Merhaba, Bu derste bir önceki derste yarım kalan progress bileşenimizi tamamlayacağız. Derste bahsi geçen bağlantılar aşağıdaki gibidir: Add web animations with After Effects & Lottie https://university.webflow.com/courses/after-effects-lottie-in-webflow After Effects Tutorial | QUICK TIP | Circular Progress Bars https://www.youtube.com/watch?v=Ng2uzwUkocs Keyifli izlemeler :)
Merhaba, Bu derste üç yeni bileşen ekleyeceğiz. Keyifli izlemeler :)
Merhaba, Bu derste aşağıdaki bileşenleri oluşturacağız: - Profile - Profile + Dropdown - Icon List Item - Icon List - Card - Level / Normal Bu bileşenlerde kullanılan küçük parçaları geçtiğimiz derslerde hazırladığımız için çok takılmadan, hızlı bir şekilde hazırlayabildik. Umarım bundan sonraki derslerde de bu şekilde hızla ilerleyip, bir an önce uygulamamızı finalize edebiliriz. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Bu derste aşağıdaki bileşenleri oluşturacağız: - Level / Locked - Source Box Bugünden itibaren seriye her gün yeni bir bölümü ilk gösterim tarihi olmadan on-demand olarak eklemeyi planlıyorum, umarım başarabilirim. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 2. gününe hoşgeldiniz :) Bu derste aşağıdaki bileşenleri oluşturacağız: - Stack - Bookmark Dersin sonunda border-radius ile ilgili bir konuya değindim. Bu konuda fikirlerinizi duymayı isterim. Sizce hangi versiyon daha iyi görünüyor? Belki de ikinci versiyonda kartın padding değerini biraz kısmalıyız, ne dersiniz? Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 3. gününe hoş geldiniz. Bu derste Person bileşenini oluşturacağız. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 4. gününe hoş geldiniz. Bu derste aşağıdaki bileşenini oluşturacağız: - Container - Page - Header Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 5. gününe hoş geldiniz. Bu derste aşağıdaki bileşenini oluşturacağız: - Cursor - Highlighted Layer Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 6. gününe hoş geldiniz. Bu derste aşağıdaki bileşenini oluşturacağız: - Highlighted Dimensions - Hero Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 7. gününe hoş geldiniz. Bu derste aşağıdaki bileşenini oluşturacağız: - Subpage Header - Example Box - Navigation Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 8. gününün ilk videosuna hoş geldiniz. Bu derste unhosted projelerdeki 2 sayfa sınırını ücretsiz olarak nasıl arttırabileceğinizi göreceğiz. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 8. gününün 2. videosuna hoş geldiniz. Bu derste Home sayfasını oluşturacağız. Önceki derslerde bu sayfada kullanılan bileşenlerin neredeyse tamamını oluşturduğumuz için, aslında işimiz büyük ölçüde kopyalayıp yapıştırmaktan ibaret olacak. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 9. gününe hoş geldiniz. Bu derste önceden hazırladığımız Dropdown bileşeninin Profil adının üstüne gelindiğinde animasyonlu bir şekilde görünmesini ve fare imleci uzaklaştığında tekrar gizlenmesini sağlayacağız. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 10. gününe hoş geldiniz. Bu derste Login sayfasını oluşturacağız. Ayrıca ders sırasında ihtiyaç duyduğumuz Hidden in Editor Mode yardımcı sınıfını oluşturacağız ve tasarım öğelerini pozisyonlarken işimizi kolaylaştıracak bir yöntem deneyeceğiz. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 11. gününe hoş geldiniz. Bu derste Level 1 sayfasını oluşturacağız. Dersin tamamı kopyala yapıştırla geçti 😄 Kalan sayfaları Level 1'in neredeyse aynısı olduğu için onları önden oluşturup, bir sonraki derste sayfalarımızın responsive'lerini oluşturmaya başlayabiliriz. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 12. gününe hoş geldiniz. Son dersten sonra yapacak pek bir şey kalmadı :) O yüzden bu derste ufak tefek düzenlemeler, linklemeler yapacağız. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 13. gününe hoş geldiniz. Projemiz için tasarım ve içerik güncellemesi beklerken, mümkün olduğunca faydalı bilgiler vermeye çalışacağım. Bu derste bir düğmenin mouse hover anında bir lottie animasyonu görünmesini ve mouse hover out anında da ilgili lottie animasyonunun önce reverse ile, sonra da fade out ile kaybolmasını sağlayacağız. Videoda bahsedilen kaynaklar aşağıdaki gibidir: Webflow University'nin resmi lottie animasyon kursu: https://university.webflow.com/courses/after-effects-lottie-in-webflow Figma frame'lerini After Effects programına gönderen eklenti: https://aeux.io/ AEUX eklentisini öğrendiğim eğitim videosu: https://lottiefiles.com/course/a-beginners-guide-to-lottie Hazır lottie animasyonları bulabileceğiniz bir web sitesi: https://lottiefiles.com/ Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 14. gününe hoş geldiniz. Bu derste Webflow'un CMS özelliğinden bahsedeceğiz. Oluşturacağığımız koleksiyon isimleri aşağıdaki gibidir: - Levels - Tasks - Source Boxes İsimlerinden de anlayabileceğiniz üzere, projemizdeki dinamik alanları CMS üzerinde kurgulayarak, yönetimlerini kolay bir hale getireceğiz. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.
Merhaba, Mücadelenin 15. gününe hoş geldiniz. Bu derste Memberstack servisini kullanarak Level sayfalarımıza sadece giriş yapan üyelerin erişmelerini sağlayacağız. Arada elimiz değmişken sayfalamanın da çalışmasını sağlayacağız. Eğer sorularınız olursa Superpeer üzerinden bana mesaj gönderebilir ya da https://bio.link/hayatbiralem adresindeki kanallardan size uygun olanı kullanarak sorularınızı bana ulaştırabilirsiniz. Sevgiler.