UI tasarımından uygulamaya kadar basit bir uygulamanın dökümü, kodlamanın tasarımcılar için neden sihirli bir araç olduğunu gösterir.
Figma, Adobe XD, Photoshop, Wacom tablet, eskiz defteri … arayüzler ve web tasarımcıları için tüm araçlar, değil mi? 2 dakikanızı ayırın ve neden tasarımcı olmak istediğinizi ve neden tasarlamayı sevdiğinizi hatırlamaya çalışın.
Muhtemelen yaratmayı sevdiğiniz içindir; yaratıcı bir insansın. Belki çocukken sanatsal bir deneyimle başladınız ve sonra bu yaratıcı enerjiyi problem çözmeye dönüştürdünüz ve onu görsel olarak ifade etmeye devam ettiniz: bir tasarımcı, yaratıcı bir problem çözücü oldunuz.
Bugün size, sıfırdan gerçek bir SVG üreteci oluşturarak problem çözmeye yönelik yaratıcı bir zihniyeti ifade etmek için kodlamanın küçümsenmiş bir araç olduğunu göstermeye çalışacağım. Hadi başlayalım!
Adım 1: Fikri anlamayın; çözmek
Burada derin iş konularına girmedik, ancak karşılaştığınız sorunları görmek ve bunları kendiniz düzeltmeye karar vermek, başlamak için harika bir yoldur.
Bir müşteriyle çalışırken, örnek olarak SVG dalgalarına ihtiyacım vardı. Bu yüzden bir dalga üreteci arıyordum: parametrik girişleri olan tonlarca dalgalı renkli dalga üreteci vardı, ancak basit, mükemmel sinüs dalgası üreteci yoktu. Bunu GeoGebra matematik aracımda çizmeye ve ardından SVG’ye aktarmaya karar verdim.
Tamam, ama hızlı değil. Ve işimizi çabuk bitirmeyi seviyoruz. Ama bekleyin… Neden mükemmel sinüs dalgası üretecini yapmıyoruz? Açılacak denklem ve sıkıcı matematik yazılımı yok, sadece bir eğri ve bir dışa aktarma düğmesi. Anladın mı, şimdi tasarlayalım.
Hızlı İpuçları: Bir sorun arıyorsanız, alanınızdaki memleri arayın. Her zaman derin, acı verici, iyi bilinen bir sorun gösterirler.
Adım 2: Çözümü olabildiğince basit bir şekilde tasarlayın
İki ana kural: İlk kural, onu kimin kullanacağını düşünün; ikinci kural, nasıl çalıştığından ne bekleyeceğinizi tahmin edin. Kim? Ön uç geliştiriciler. Onlar ne için bekliyorlar? Doğrudan geri bildirim ve dışa aktarma düğmesi ile düzenlenebilen eğri.
Tel kafes tasarımı
Yüksek Fi Projesi
Hızlı İpucu: Daha teknik tasarım ipuçları için Figma App Design’ı indirebilirsiniz.
3. Adım: Gerçek olarak oluşturun
Bir tasarımcının ikinci adımda durması sorun değil. Ama tasarladığınız şeyi inşa edebileceğinizi hayal edin! İstediğiniz her şeyi yaratabileceğinizi zaten biliyorsunuz.
Kodlamayı, kesinlikle herkesin kullanabileceği bir .com uygulamasıyla sonuçlanacak olan kullanıcı arayüzünüzü çevirmenin bir yolu olarak görebilirsiniz. Bu nedenle, “en iyi diller” önemli değildir; kodlama sadece yaratıcılığınızı ifade etmek ve başkaları için bir şeyler yaratmak için bir araçtır. Ve bir tasarımcı, yaratıcı bir insan olarak kulağa ilginç gelebilir.
İşlevsel uygulama için kullanıcı arayüzü
Her web uygulaması arayüzü, HTML / CSS / JS kullanılarak UI tasarımından koda çevrilebilir. Bu 3 “dilin” her birinin rolünü şu şekilde görebiliriz:
HTML: bir düğme istiyorum.
CSS: Düğmemin yuvarlak görünmesini istiyorum.
JS: Bir düğmeye tıkladığımda bir şey olmasını istiyorum.
Uygulamamızı oluşturmak için Svelte kullanacağım. Svelte, üç “dili” tek bir yerde kullanmamıza izin veren bir JavaScript derleyicisidir. Şimdi kodun kullanıcı arayüzümüzü nasıl işlevsel öğelere çevirebileceğini görelim.
HTML düğme kodu
“Hey tarayıcı, “exportButton” adlı bir düğme ve “downloadSVGpath” adlı bir işlevdeki her şeyin biri düğmeye tıkladığında yapılmasını istiyorum 🙂 Teşekkürler”
CSS stili düğme kodu
“Hey tarayıcı, bu stil kurallarını temel HTML düğmeme uygulamanı istiyorum: Güzel bir 16 piksel yuvarlak köşe istiyorum, fareyle üzerine gel, kenarlık istemiyorum ama arka plan rengi olarak hoş bir degrade rengi istiyorum . Ardından, düğmenin içindeki yazı tipinin renginin #fcfcfc olarak ayarlanmasını ve Inter yazı tipini (lütfen kalın) kullanmasını istiyorum. Figma projem gibi ben de düğmedeki öğeleri ortalamak ve dolgu eklemek istiyorum. Oh, ve ince bir gölge ekleyin 🙂 Teşekkürler. “
SVG eğrisi çizme işlevi
“Hey web tarayıcısı, kaydırıcımız her hareket ettiğinde, bu işlevi çalıştırmak istiyorum: HTML kodumda tanımladığım bir çerçevenin içine bir eğri çizmenizi istiyorum.” Ayrıca eğrilik konturumun her başlıkta yuvarlak görünmesini ve değişkenlerde tanımladığım renk ve genişliğe sahip olmasını istiyorum. Sinüs fonksiyonunun parametreleri, kaydırıcıların kaydedilen değerlerinden alınacaktır. Son olarak x değişkeniniz çerçevemizin x ekseninde toplam genişliğe ulaşmamışken sinüzoidal denklemin y eksenindeki noktanın konumunu çözecek ve eğrisini çizeceksiniz 🙂 Teşekkürler.
Hızlı İpuçları: Görüntülemek için uygulamanın kaynak kodu dosyalarını indirebilirsiniz.
özet
- Kodlama sadece görsel metaforlarımızı herkesin kullanabileceği bir şeye çevirmemize izin veren bir araçtır. Bu ne kadar harika?!
- Kodlama, tasarım hedeflerimizi görselleştirmemize yardımcı olur ve bizi görsel kapsamın ötesine bakmaya zorlar: düğmem nasıl çalışmalı? Hover’da nasıl görünüyor? Pop-up modelimi mobil için nasıl tasarlayabilirim?
- Kodlama, portföyümüze “kişisel proje” etiketi altında bir tasarım vaka çalışması koymak yerine “sadece eğlence için” tasarladığımız garip bir fikir yaratmamızı sağlıyor.
- Kodlama, tasarladığımızı elde etmek için ne kadar çalışma gerektiğini bize gösterir. Bu, proje müşterilerimizin ihtiyaçlarını, zorluklarını ve kaynak yönetimini daha iyi anlamamızı sağlar.
- Kodlama esnektir. Saf HTML / CSS, Vue Framework veya başka herhangi bir web yapısı ile bir Netflix web sitesinin bir pikselini mükemmel bir şekilde çoğaltabilirsiniz.
.
