Kodlayıcı Olmayanlar için Kodlama: Tasarımcılar Geliştiriciler Gibi Düşünebilir

Web siteleri yaptığımız sürece tasarımcılar ve geliştiriciler arasında bu yazılı olmayan ayrım var. İşleri iyi yapan insanlara karşı onu iyi yapan insanlara karşı. O günler bitti.

Her tasarımcı gelişimin dijital ortamda nasıl çalıştığını öğrenmelidir. Ve her geliştirici temel tasarım teorilerini anlamalıdır. Burada, tasarımcıların günümüz pazarında önemli bir beceri olan geliştiricilerin dilini daha iyi anlamalarına yardımcı olacağız. (Ek bir avantaj olarak, tüm tasarım örnekleri CSS çerçeveleri kullanılarak oluşturulur.)

Envato Elements'i keşfedin

Kullanıcı Arayüzleri ve Tasarımı

Her web sitesinin arkasındaki omurga 1s ve 0s dizesidir. Tasarım söz konusu olduğunda bu çok heyecan verici değil. Ancak gerçek arayüz ve bir kullanıcı ile bağlantı.

Her küçük ayrıntı, birisinin düğmelerden gezinme öğelerine, formlara, video izlemeye veya bir çift ayakkabı satın almaya kadar uğraşması gereken tasarım öğelerini içerir. Amaç güzel, çekici ve kullanımı kolay bir şey yaratmaktır. Tasarım ve geliştirmenin buluştuğu yer burası.

Bilmeniz gereken kelimeler:

• Ajax: Eşzamansız JavaScript ve XML kullanmak, web sitesinin kullanıcı ucunda yeni bilgilerin yenilenmeden doldurulabileceği etkileşimli bir deneyim yaratır. Yaygın bir örnek, kullanıcı bir Twitter sayfasında ilerlerken yayınların sürekli yüklenmesidir.
• API: Rutinler, veriler, nesne sınıfları ve değişkenler için özellikler sağlayarak ve Uygulama Programlama Arayüzü farklı web sitelerinin veya yazılımların birbirleriyle “konuşmasına” ve birlikte çalışmasına olanak tanır. Bunu sanal bir yapı taşı seti olarak düşünün.
• CSS: Basamaklı Stil Sayfaları, web sitelerini şekillendirmek ve HTML öğelerini görsel olarak görüntülemek için kullanılan dilin belkemiğidir.
• Medya sorgusu: Görsellerin nasıl oluşturulacağı söz konusu olduğunda belirli cihazlar için özel kurallar oluşturan bir CSS öğesi. (Aynı fotoğrafı bir masaüstü sitesinde ve bir mobil cihazda başka bir şekilde rasyon ve kırpma ile işleyen sihirdir.)
• Duyarlı web tasarımı (RWD): Tek bir web sitesinin birden çok cihaz boyutuna göre ayarlanması için esnek bir ızgara ve resimler, medya ve metin kullanan bir web tasarım tekniği. (Bu tartışmasız şu anda web tasarımında en önemli faktörlerden biridir.)
• Kullanıcı Arayüzü: Kullanıcı Arayüzü, kullanıcının bir tasarımda gördüğü ve etkileşimde bulunduğu her şeydir. Bu, web sitesini ve cihazı nasıl kullandıklarından ekrandaki her bir öğeye kadar her şey olabilir.
• UX: Kullanıcı Deneyimi, her bir kullanıcının siteyle olan etkileşimlerinden uzaklaştığı şeydir. Bu duygusal bir bağlantı olarak ifade edilme eğilimindedir ve algılanan toplam değer ile ilgilidir.

Sorularda Düşün

“Bu etkileşimlerin her biri, birbirlerine güvenen ve birbirlerinin güvenini hak eden iki kişi arasında bir konuşma gibi hissetmelidir.”

Bir web sitesinin her bölümü kullanıcılardan sitenin başka bir bölümüne katılmalarını veya bu sitelere katılmaya devam etmelerini istemektedir. İster oyun oynuyor, ister makale okuyor, ister hediye alıyor olun, her eylem sizi başka bir şeye götürür. Ama oraya nasıl gidilir?

Burada soru sorma devreye girer. Tasarım sürecinde sorular sorarsanız, eylemler arasında bağlantılar kurabilir ve mantıklı bir akışla daha sorunsuz bir tasarım oluşturabilirsiniz.

Nicole Fenton ve Kate Kiefer Lee'nin yazdığı “Nicely Said” web için bir yazma el kitabı. Ayrıca web tasarım deneyiminin her parçası için çalışan bir soru çerçevesi sağlar.

Yol boyunca sorulması gereken sorular (artı kitabın kaynak rehberinden daha fazlası):

• Kullanıcılar bu içeriği veya özelliği şimdi nasıl kullanıyor?
• Burada kim konuşuyor?
• Hangi sorunları çözmeye çalışıyoruz?
• Bu içerik hedeflerimize nasıl hizmet ediyor? Amacı nedir?
• Web sitesinin özellikleri nelerdir? Nasıl davranıyor?
• Son biçim nedir?
• Herhangi bir teknik kısıtlama veya karakter sınırlaması var mı?

Fenton, web sitelerinin her zaman “sorduğu” diğer sorular hakkında daha fazla şey yazdı. Kullanıcıların etkileşime girdikleri sitelerle ilişki kurmalarına yardımcı olan kişisel ayrıntılardan bahsediyoruz. “Bu etkileşimlerin her biri, birbirlerine güvenen ve birbirlerinin güvenini hak eden iki kişi arasında bir konuşma gibi hissetmeli” diye yazıyor.

Bu sorulardan bazıları:

• Nasıl yardım edebiliriz?
• Şu anda neredesin?
• Bunun için ödemeye hazır mısınız?

Bu soruların cevabı arayüz-kullanıcı ilişkisinin doğasını belirler ve tasarımı büyük ölçüde etkiler. Bunu şu şekilde düşünün: Bir kullanıcı size konumunu bildirmek istemiyorsa, tasarım ve kullanıcı arayüzü coğrafi konumlandırmaya dayalıysa etkili olmaz; tasarım kullanıcıya başka bir şekilde yaklaşmalıdır.

Sadelik ve Yönü Düşünün

Web siteleri bir araya geldiğinde, her şey bir harita üzerinde bir yere düşme eğilimindedir. Kursu bir kullanıcı etkileşiminden diğerine çizebilirsiniz. (Bu görsel düşünürler için harika.) Tasarım / geliştirme sürecini A ve B açısından düşünün: Bir sonraki adım nedir, A veya B?

Her elementin tanımlaması ve tanımlaması kolay basit bir amacı olmalıdır. (Oynatmak için tıklayın; kaydırmak için tıklayın.) Eğer bir cümleyle anlaşılır hale getiremezseniz, tasarım stratejisini yeniden düşünmek isteyebilirsiniz.

Kodu Öğrenin

Artık bir geliştiricinin metodolojisindeki şeyleri düşündüğünüze göre, dışarı çıkmanız ve bazı kodlama becerileri geliştirmeniz gerekiyor. Bu, bir ana kodlayıcı olmanız gerektiği anlamına gelmez, ancak basit değişiklikler yapmanın ve diğer tasarımcılarla ve geliştiricilerle tutarlı bir şekilde konuşmayı yeterince anlamanız gerekir. (Ayrıca, yukarıdaki gibi bazı harika efektler oluşturabilirsiniz.)

Şahsen, küçük bir HTML ile amaçlı başladım. Nasıl yapılacağını bilmek istediğim şeylerin bir listesini yaptım ve bunları içten dışa öğrendim (yani, bir renk seçicideki bir kutuyu tıklamak yerine CSS'de bir HEX değeri kullanarak bir site öğesinin rengini nasıl değiştireceğim.) çevrimiçi derslerden ve öğreticilerden, bölgenizdeki yüz yüze eğitim için birçok araç bulunmaktadır. Tek yapmanız gereken kaydolmak ve başlamak.

Kod geliştiren dört harika kaynak:

1. Tuts +
2. CodeAcademy
3. Kod Okulu
4. Khan Academy

Sonuç

Web geliştirmeyi öğrenmek sadece çerçeve ve kodları öğrenmek değildir. Düşünce süreci ile ilgilidir. Tasarımcılar, başarılı bir web sitesi oluşturma yolunda geliştiriciler gibi düşünebilirler. Sadece bu fikre açık olmalısınız.

Bazı düşünce süreçlerinin benzer olduğunu anlamak - görsel düşünme ve tartım çözümleri ve sonuçları - herhangi bir tasarım veya geliştirme projesinin bir parçasıdır. Bugünün pazarında hepimiz tasarımcı / geliştiriciyiz.

Görüntü Kaynağı: Marjan Krebelj.