UI-UX Uzmanı Olun - 4 ve 8 Izgara Sistemi

UI/UX konusunda şu ana kadar anlattığım en önemli konu diyebilirim.
Design system'ın temelini oluşturan 4 ve 8 ızgara sistemini anlattım.
Bu ızgara sistemini kullanarak buton, input, tipografi, boşluklar... vb design system'da yer alacak alanları nasıl oluşturabileceğinizi örneklerle göstermeye çalıştım.
Bu videoyu izledikten sonra konuya daha iyi hakim olabilmek için mutlaka alıştırmalar ve örnekler hazırlamanız gerekiyor.
Videoda atladığım veya anlaşılmayan bir şey olursa yorumlarda sormaktan çekinmeyin 🙂
👉🏻 instagram - / endertopaloglu
👉🏻 twitter - / ender_topaloglu
👉🏻 e-posta - [e-mail]
Sıfırdan Web Sayfa Tasarlıyoruz
bit.ly/3h0x4qn
UI/UX Uzmanı Olun
bit.ly/3f5Q4CR
Tasarımcının Alet Çantası
bit.ly/3oJ9Mrd
kariyer.net Redesign
bit.ly/2SeTdHI
Figma Dersleri
bit.ly/3hHLigE

[@xyalmmmdliyev1162]

Öncelikle Adobe XD, Figma gibi tasarım araçlarını öğrendim. Sonra gerçek bir proje üzerinde çalışdığımda hiçbir şey bilmediğimi anladım. Sonra sizin kanalı keşf etdim Gerçekten KZbin-de bir hazine bulmuş ola bilirim :D Teşekkürler hocam, Azerbaycandan izliyorum gerçekten eğlenerek ve çok değerli bilgiler elde ediyorum Umarım devamı gelecektir

[@endertopaloglu]

Çok teşekkürler. Elimden geldiğince bildiklerimi sizlerle paylaşmaya çalışıyorum. Devamı gelecek 👍🏻🙏🏻

[@israil.mecidli]

Salam . Necəsiz məndə əslində öyrənmişəm və özümü inkişaf etdirməyə çalışıram. Sizdə vəziyər necədir ux ui alanında işləməyə başladınızmı?

[@aybuks9]

an itibariyle seriyi bitirmiş bulunmaktayım. ux/ui alanında udemyden tut başka platformlarda bir sürü eğitim araştırmış ve bazılarına para vermiş biri olarak izlediğim en akıcı, sade ve keyifli video serisi budur. emekleriniz için teşekkürler!

[@MertKartalKolcuoglu]

Çok net söylüyorum. O kadar çok eğitim videosu izledim. Böyle bir anlatım görmedim. Çok çok çok güzel! Emeğine sağlık hocam.

[@laletanryakul]

Tüm seriyi izledim, emeğinize sağlık 🙏 bugüne kadar yaptığım web siteleri içime sinmiyordu, şimdi kafam netleşti. Yeni bir projeye başlayıp anlattıklarınızı uygulamak için sabırsızlanıyorum.

[@BlinkComedyCuts]

Hocam,Bu videolar kesinlikle çok eğitici. Yeni videolar ile sizleri tekrar görmek istiyoruz.

[@delfinozturk]

Bu serinin son videosunu da izledim :) Emekleriniz için teşekkürler, gerçekten çok güzel anlatıyorsunuz. Umarım ki bol bol video çekersiniz 🧝‍♀

[@aysunbat2751]

çalışmanız çok fayda sağladı bana. az önce bi makale okudum hemen hemen konuyla ilgili ama video izlemeye o kadar alışmışız ki öğrendiklerimiz bazen yer etmiyor. kanalınız çok güzel. teşekkürler.

[@endertopaloglu]

Faydalı olmasına sevindim, teşekkür ederim 😊

[@soneruzan2963]

Ender hocam anlatiminiz gercekten cok guzel . Devamini bekliyoruz.

[@SrpYlcnOzky]

Hocam verdiğiniz bilgiler için, size ve soru bankasına çok teşekkür ederim. Binlerce lira ateşleyip gidilen kurslar, getir götürünüzü bile yapamaz💜

[@endertopaloglu]

Çok teşekkür ederiz 😇 🙏🏻

[@wikipooriya]

bu arada ben irandan,tebriz şehrinden sizi takib ediyorum.yani sadece butun tanidigim eğitimciler ičerisinde en kapsamli,guzel,ve en ince detaylara kadar anlatani seizin gibisi yok.seviyoruz sizi hocam ❤

[@photosfromme]

Başka bir mükemmel seri daha. Teşekkürler hocam...

[@erkamsimsek]

Harika ! Böyle içeriklerin devamını bekliyoruzzz

[@endertopaloglu]

Teşekkürler, vaktim oldukça devam edeceğim :))

[@TugayKomut]

Ender bir insan olduğun isminden belli... Ellerine emeğine sağlık hocam çok güzel bir seri olmuş. Temel ilkelere çok güzel değinmişsiniz. Ui alanına yeni merak sardım sanırım buradan sonrada figmaya başlayacağım. Çok teşekkürler :)

[@endertopaloglu]

Ben teşekkür ederim Tugay beğenmene sevindim 😊

[@sedapektas4551]

Sizden o kadar çok şey öğrendim ki iyi ki varsanız 😊

[@endertopaloglu]

Çok teşekkürler 🙏🏻

[@user-ft7yw4jb8p]

Bu değerli bilgiler için çok teşekkürler, gerçekten harikasınız

[@muhammedtalay]

Muazzam bir seriydi.

[@wikipooriya]

allah razi olsun hocam.yani tatli anlatim şeklinizle,guncel oğretileriniz birlikte hergun birazdaha design ve ui ux,i sevmemize neden oluyor 🧡❤

[@mutfaktabiracemi3685]

Bir şey tasarlarken göz kararı yapan ben, 4:51’de resmen aydınlanma yaşıyorum 😂 Tane tane anlatışınız ve görsellerinizle başarılı bir video olmuş. Emeğinize sağlık 🙌🏻

[@olcayozgur8274]

Hocam video için çok teşekkürler. Çok faydalı bir ders oldu ne kadar teşekkür etsek azdır size👍👍👍👍

[@endertopaloglu]

Çok teşekkürler Olcay. Böyle güzel yorumlar aldıkça daha çok motive oluyoruz 🙏🏻🙏🏻🙏🏻

[@Jamesis07]

Teşekürler reis güzel baya seriyidi 💫

[@Furkan-qn7nj]

Hocam bir portfolyo oluşturma ile alakalı video çeker misiniz?

[@endertopaloglu]

Joincoin sayfa tasarımının son videosunda aslında porfolyoda nasıl çalışma paylaşılacağını gösterdim. Proje yaptıkça bu şekilde portfolyonuzda paylaşabilirsiniz.

[@ness6670]

teşekkürlerr çok faydalı bir seriydi

[@edaaktas8046]

Eğitim videoları için çok teşekkürler

[@endertopaloglu]

Çok teşekkür ederim 😊

[@mvk7154]

Hocam 2023' den geliyorum derslerin devamını halen bekliyoruz. :d

[@wikipooriya]

umud ediyorum bir gun sizinle konuşma onuru bana nasip olur ve yuz yuze konuşa bilirim.çunku sorucam okadar şey varki🤦🏻‍♂️😅inşaallh olur.kolay gelsin can hocam❤

[@GC9jxVoWMVr1vKR]

Bu adama sahip çıkın :)

[@gokselinaydemir4322]

muhteşem

[@sevdehoo4576]

videolarin devami gelecek mi

[@VahidaCabrailova]

Çox təşəkkür edirəm

[@sefaatasker8260]

Merhabalar, sıfırdan basladım. Ux/UI designer olmak istiyorum. Kanalinizi cok faydali buldum. Bu seriyi oynatma listesini yani bitirdikten sonra ne yapmamizi onerirsiniz? Bir sonraki video demissiniz ?

[@endertopaloglu]

Videoları yüklediğim sıraya göre izlemenizi tavsiye ederim. Kafanızdaki çoğu soruya bu şekilde cevap bulabilirsiniz

[@gozde455]

Hocam devamı gelecek mi?

[@endertopaloglu]

Her zaman 😊

[@abdulsamed7586]

Cemre Demirelin videoya konuk olması güzel olmuş

[@witmay4739]

hocam eğitim devamı gelecek mi ?yoksa bu eğitim videoları yeterli mi ?

[@endertopaloglu]

Fırsat buldukça yeni videolar çekmeye gayret ediyorum ama bunun sonu yok. Sektör çok dinamik ve sürekli öğrenmeye devam ediyoruz

[@photosfromme]

Hocam selamlar, bir sorum olacaktı. Derslerinizin tamamını izlemeye çalışıyorum fakat anlayamadığım bir nokta var. Buton tasarlarken dakika 4:00'da olduğu gibi font boyutunu 16 seçip, auto layout'da yukarıdan ve aşağıdan 8px boşluk bıraktığımda buton yüksekliği 32pxden fazla oluyor (35px). Butondaki textin çerçevesinde, figma otomatik olarak alt ve üstten boşluklar bıraktığı için, textin kendi frame boşluğu sebebiyle toplam yükseklik 32 pixeli aşıyor. Basit bir sorun ama bunu bir türlü çözemedim.

[@endertopaloglu]

Hakan merhaba, evet bunu hepimiz yaşıyoruz çünkü yazının kendine ait olan yükseliğinden kaynaklanıyor ve her fontta da farklı malesef. Bu hata gibi bir şey. O yüzden yukarıdan ve aşağıdan boşluk verirken bazen manuel vermek gerekiyor. Yani alttan 1px daha az veya fazla verince genel yüksekliğin 32'e tamamlanmasını sağlıyoruz.

[@photosfromme]

@@endertopaloglu anladım hocam teşekkür ederim bir türlü halledemedim kafayı yedirtecekti bana :) galiba bir güncellemeyle çözülmesi gerekiyor Figma'ya duyurulur :))

[@rabiaaktas7841]

hocam içerik için teşekkürler , shadow için uygun ölçüleri paylaşabilir misiniz örn, genişliği 92 yüksekliği 44

[@endertopaloglu]

Rabia merhaba, ne demek istediğini anlamadım açıkçası biraz daha detaylandırabilir misin?

[@rabiaaktas7841]

@@endertopaloglu Merhaba, genişliği 92 yüksekliği 44 olan bir input için uygun shadow ölçüleri ne olur sizce(mobil uygulama için)

[@endertopaloglu]

@@rabiaaktas7841 Rabia merhaba, bunun net bir doğrusu yok ki :) Zeminde kullandığın renge ve tasarımın bütününe bakarak karar verebilirsin ancak

[@sevgiyleyasariz]

''Pixel boyutu ailesi'' diyebilir miyiz konunun özetine?

[@endertopaloglu]

Sen böyle diyebilirsin tabii ama sekördeki adı grid sistemi 😄😄

[@sevgiyleyasariz]

Şu açıdan dedim abi, kavramsal olarak kafamda otursun diye :D yoksa sektör ne diyorsa ben ona tabiyim :D. Videoların ilaç gibi 💊

[@endertopaloglu]

@@sevgiyleyasariz Çok teşekkürler 😊

[@serdariset8864]

Hocam shift + option yaparken boşluk görünmüyor sadece mouse ile hareket ettirirken görünüyor çözümü nedir acaba ??

[@endertopaloglu]

Açıkçası option tuşuna bastığınızda mouse'u sürekli hareket ettirmenize gerek yok. Figmayı indirip mi kullanıyorsunuz yoksa tarayıcı üzerinden mi? Hiç başıma gelmedi böyle bir şey. Tarayıcıdan kaynaklı olabilir. Veya uygulama üzerindense farklı bir tarayıcıdan açın. Bug gibi bir şey olmuş olabilir.

[@serdariset8864]

@@endertopaloglu uygulamayı indirdim, çözümünü araştırdım bulamadım

[@morpheus5871]

Hocam ben yaptığım tasarımları hiç beğenmiyorum. Silip silip baştan yapıyorum sonra yine beğenmeyince yeni projeye geçiyorum. Bu bir süreç mi yoksa ben mi beceriksizim :)

[@endertopaloglu]

Yaptığın tasarımları silme, sürekli yan yana farklı versiyonlarını yap. Tasarım yapmak bir süreçtir. Ben de ilk yaptığım tasarımı beğenmiyorum ve gözüme batan yerleri tek tek değiştiriyorum. Ama bir öncekini silmiyorum. Finalde tasarım bittiğinde dönüp ilk haline bakınca gelişimi ve değişimi anlıyorsun :)) Kimse ilk seferde çok iyi iş çıkaramaz, doğru yoldasın

[@gecenuit]

Abi Allah aşkına bana yardımcı ol. 11i bitirdim mf olarak ancak 12 de bölüm değiştireceğim. Sözelde görel iletişim ve tasarım okumak mı yoksa dilden mi gitmek doğru karar veremiyorum(en az 2 dil öğrenmek istiyorum) . Bu mesleği (ve bunun gibi meslekleri) gerçekten çok istiyorum ama önce ünide dil bölümüne gidip ünideyken bu programları kendi çabamla mı halletsem, yoksa sözelden girip dili mi kendim öğrensem. Hangisi daha mantıklı sence?

[@endertopaloglu]

Şu an senin yaşında olsaydım ve illa tasarım veya yazılım yapacak olsaydım. Dil olayını hallederdim. Bu mesleği kendi çabanla çok çok rahat öğrenebilirsin çünkü yeterli zamanın olacak. Kendini iş olarak geliştir, sosyal yeteneklerin (iletişim kurma vs.) konularında ilerle. Yabancı dili de öğrendikten sonra sana bütün kapılar açılır.

[@gecenuit]

@@endertopaloglu yani sence dil okumak daha mı mantıklı, bu mesleği ünide dil okurken halledebilir miyim?

[@endertopaloglu]

@@gecenuit Halledersin tabii ki

[@gecenuit]

@@endertopaloglu cevapladığın için çok sağol :) son bir soru soracaktım. Sence peki ünide görsel iletişim ve tasarım seçip, dili kendim öğrensem, daha mı avantajlı olur. Yoksa diğer türlü mü?

[@endertopaloglu]

@@gecenuit Ben senin yetkinliğini, yatkınlığını neyi daha çok sevip neyden usanacağını hiç bilmiyorum. Bunlar çok özel sorular bunları ancak sen bilebilirsin. Ben olsam derken gerçekten ben ne istediğimi bilerek söyledim. Başkası için bu yöntem doğru olmayabilir. Ben üniversite kazanıp okumadım çünkü benim için üni zaman kaybı. Türkiyede adı duyulmuş bir üni de okumuyorsan iş bulmanda diğerlerinin katkısı %10'dan fazla olmaz. Ben yine "BENCE" diyorum. Sen kendin araştır, gitmek istediğin ünide okuyanlara mezunlara sor. Hangi işi yapmak istiyorsan sektördeki insanların cvlerini incele vs. Yoksa kimse sana "bunu yap" diyemez.

[@hamzadervisgur8587]

Dayı iyi ha.