Geliştiriciden Tasarımcıya yol: Nasıl Yapılır

Tasarımcı olmak isteyen bir geliştirici olarak, web siteleri, mobil uygulamalar, vb. .

Nereden başlamalıyım? Güzel web siteleri ve arayüzler oluşturmayı nasıl öğrenirim?

Tasarımcı olmuş eski bir geliştirici olarak, önerebileceğim birkaç şey var. Her şeyden önce tasarımlar üzerinde çalışmaya başlayın! Yeteneğiniz varsa, zaten bir UI / UX tasarımcısı olan bir danışman bulun ve onlarla projelerde çalışmaya başlayın. Aslında projeler üzerinde çalışarak ve yıllardır bunu yapan insanlardan bir kitap okuduğumdan daha fazla bilgi alarak öğrendim.

UI / UX / vb. Okumak istiyorsanız, şu mükemmel konuya bir göz atarım: Kullanıcı Arabirimi Kitabı okumalı mı? Benim kişisel favorim Steve Krug'un "Beni Düşünme" olduğunu düşünüyorum - ama sonunda kendi favorinizi bulacağınızdan eminim.

Son olarak, Photoshop, Illustrator vb.Gibi araçlarla ilgili olarak ... endişelenmeyin! Sonuçta sizin için en uygun araçları bulacaksınız. Şahsen, kalem ve kağıt maketlerle başlıyorum, sonra projeye bağlı olarak Balsamiq veya Axure'da bir şeye geçeceğim veya bazen düz HTML ve CSS - gerçekten projenin boyutuna, kapsamına vb. sizin için en rahat. Günün sonunda önemli olan tek şey, bunu yapmak için kullandığınız aracı değil tasarımınızı vizyonunuzla açıkça iletmektir.

Tasarım ve geliştirmeyi uzun zamandır karıştırıyorum. Ancak ilk günlerde düzenleme araçlarını öğrenmek için iyi bir tasarım yapandan daha fazla zaman harcadım. Photoshop, Illustrator, Fireworks, vb.'nin nasıl kullanılacağını öğrenmek için bulunacak çok sayıda öğretici vardır. Bu hala daha iyi olmak istediğim bir şey.

İlhamlarımdan biri Robby Ingebretsen adında bir adam, çünkü hem geliştirme hem de tasarımı son derece iyi yapıyor. Web sitesi nerdplusart.com adresinde .

Ondan bakacağım birkaç şey var ...

• Tasarımcıları İçin Kitapları Zorunlu (Çok) Kısa Listem
• Geliştiriciler için Tasarım Temelleri
• Bir Tasarım Problemine Saldırmanın ve Kazanmanın Dışına Çıkmanın 10 Yolu

Tüm sunumlarında bahsederken, tasarımlarınız için ilham bulmanın kritik olduğunu düşünüyorum. En iyi tasarımcılar bile bu şeyleri ince havadan çıkarmazlar. Yer işaretlerimden biri , çoğunlukla baskı işlerinde görülen "Yeni Grafik Tasarım" ın bir koleksiyonudur . Çoğu çok basittir, genellikle tipografinin kendisini ana grafik öğeleri olarak kullanır. Göründüğü kadar basit, sadece böyle şeylere göz atmak tasarımınızı şekillendirmenize yardımcı olabilir.

Visual Studio'yu öğrenmenin de iyi bir yazılım geliştiricisi yapmadığı gibi, Photoshop'u öğrenmek de iyi bir UI tasarımcısı yapmaz.

Eğer resmi rotaya gitmek istiyorsanız, Sanat / Grafik Tasarım, İnsan Faktörleri, Psikoloji, Bilgi Mimarisi / kütüphane bilimleri alanında eğitim görmeniz gereken yerler olacaktır.

Gayri resmi olarak, işe koyulun! ;) Öğrenmenin en iyi yolu sadece yapmaktır.

Resmi olarak eğitilmiş bir grafik tasarımcıyım ve işte yazılım geliştirme becerilerini geliştirdim. Saf bir zorunluluktan yola çıktım.

Şahsen, en iyi UX ekibi üyelerinin her iki yeteneğin bir karışımı olan kişiler olduğunu düşünüyorum. Sanırım doğru yoldasınız.

Watrall & Siarto'nun (O'Reilly tarafından yayınlanan) "Head First Web Design" kitabını okumaya başladım . Bu oldukça saçma, sindirimi kolay ve bir tasarımcının göz önünde bulundurması gereken her şeyde size yol gösteriyor. Derinlemesine bir çalışma değil, ancak bir sonraki soruya cevap vermeniz gereken soruları öğrenmeye başlar. Gezinme, organizasyon, düzen, yazma, renk ve erişilebilirliği kapsar.

Ayrıca, Photoshop'a, Adobe Illustrator'a veya herhangi bir şeye atlamadan önce, güzel görünmesi için fazladan zaman ayırmadan önce her şeyin doğru yerde olduğundan emin olmak için tasarımınızı tel kafes yapın. Kağıt veya beyaz tahta üzerine çizebilir veya bir araç kullanabilirsiniz. Bu adımda gerçekten yardımcı bulduğum bir araç Balsamiq Maketleri . Öncelikle site organizasyonu ve düzeni hakkında düşünmenizi sağlar.

Aslında UX Designer'dan UI Developer'a karşı olan yaklaşımı aldım, ancak Design'ı seçerken başlamak için birkaç alan öneriyorum:

"Beni Düşünme" kitabına bir göz atarım. Steve Krug tarafından yazılan ve web üzerinde tasarım için harika bir kitap olduğunu düşünüyorum.

SmashingMagazine.com ve PSDTuts.com da dahil olmak üzere, tasarım ve web teknolojisi dünyasında harika güncel makaleler veren tonlarca harika web kaynağı var.

Ayrıca , özellikle bir UX Tasarımcısı olmak istiyorsanız, HCI prensiplerini anlamaya da bakarım .

İyi şanslar ve mutlu tasarımlar!

Web siteleri, mobil uygulamalar vb.İçin üst düzey kullanıcı arayüzü oluşturmayı öğrenmekle gerçekten ilgileniyorum.

Tamam, bu geniş bir konu. "Güzel", "birinci sınıf", profesyonel görünümlü "web siteleri oluşturmak istiyorsunuz, bu yüzden insanların bir şeyi" güzel "olarak algılamasını sağlayan şeyleri bilmelisiniz, değil mi? Neyse ki sizin için güzellik gerçekten öznel değil.

Güzel bir görsel tasarımın anahtarlarından biri uyumdur .

Tasarımların amatörleşmesini sağlayan şey uyum eksikliği.

Ve en iyi şey görsel uyumun matematiğe gelmesidir. Bağırsak hissi vermekle ilgili değil.

Diğerlerinin işaret ettiği gibi, web sitelerini kendi başınıza tasarlamanızı tavsiye ederim. Hazır bir çerçeve kullanmak yerine öğrendiğiniz tasarım ilkelerini uygulamaya çalışın. Başlangıçta zor olabilir, ancak daha iyi olmanıza yardımcı olacaktır.

Bir web sitesi tasarımına uyum nasıl yerleştirilir

Aşağıda pratik bir örnek ve şimdi yapabileceğiniz eğlenceli küçük bir egzersiz var.

Kişisel olarak tercih ettiğim bir yol , web sitesi öğelerini uyumlu oranlarda boyutlandırmak için modüler bir ölçek kullanmaktır . Modüler ölçek oluşturmanıza yardımcı olabilecek bir web sitesi şudur: modularscale.com

Modüler bir ölçek kullanmanın yararı, boyutlandırma kararlarını ölçekden bir sayı seçmek kadar kolay hale getirebilmesidir.

Örneğin, bir web sitesinin başlıklarını boyutlandıralım (görsel hiyerarşiyi iletmek için).

Diyelim ki, seçtiğim 19px gövde yazı tipi boyutuna (19px kullandığım yazı tipiyle en iyi şekilde göründüğü için bu modüler ölçeğe sahibiz, ancak bu adımı atlayıp varsayılan 16px boyutuyla gidebilirsiniz) ve 1.412 oranına (Hayır Neden bu oranı seçtiğimi ayrıntılarına girmeliyim.Herhangi bir oran projeleriniz için orandan daha iyi olamaz.):

Ona baktığımda, H1'i 2.815em, H2'yi 1.994em ve H3'ü 1.412em olarak seçerdim. Gövde yazı tipi boyutundan daha büyük ilk 3 sayı. Kolayca bezelye, değil mi? Gövde metni 1em olacaktır (benim durumumda 19px). Daha sonra, 1em'de H4-H6'yı boyutlandırır ve vücut metninden ayırmak için kontrast (farklı yazı tipi ağırlığı veya stili) kullanırdım.

Şimdi şunu deneyin:

1. Kendi modüler ölçeğinizi oluşturun
2. Düz bir HTML belgesi edinin (gerçek içerik, lütfen Lorem Ipsum yok)
3. Başlıkları boyutlandırmak için ölçeği kullanın.
4. Ardından ölçeği diğer boyutlandırma kararları (kenar boşlukları, dolgular vb.) İçin kullanmayı deneyin

Bu, daha iyi tasarımlara doğru küçük bir adım, ancak umarım size yardımcı olacaktır.

Bunu yararlı bulduysanız, HTML ve CSS bilen yeni başlayan web tasarımcıları için diğer 7 ipucu listemi okuyabilirsiniz.

PS: Gerçekten yapacak çok şey var

Diğerlerinin söylediği gibi okuyun:

• Grafik Tasarım Öğeleri Alexander White
• Tipografik Tarzın Unsurları by Robert Bringhurst
• Beni Düşünme - Steve Krug

Ayrıca, burada göz önünde bulundurulması gereken bloglar ve topluluklar gibi çok sayıda çevrimiçi kaynak listesi: enboard.co/webdesign/