Geliştiriciler İçin İlk On Ön Uç Tasarım Kuralı

Front-end geliştiricileri olarak bizim işimiz, esasen tasarımları kod aracılığıyla gerçeğe dönüştürmektir. Tasarımı anlamak ve bu konuda yetkin olmak bunun önemli bir bileşenidir. Ne yazık ki, ön uç tasarımını gerçekten anlamak, söylemekten daha kolay. Kodlama ve estetik tasarım, oldukça farklı beceriler gerektirir. Bu nedenle, bazı ön uç geliştiriciler, tasarım açısından olması gerektiği kadar yetkin değildir ve sonuç olarak çalışmaları zarar görür.

Amacım, bir ön uç geliştiriciden diğerine, tasarımcılarınızın üzerinde çok çalıştıklarını (veya muhtemelen hatta kendi projelerinizi iyi sonuçlarla tasarlamanıza bile izin verir).

Elbette bu kurallar, bir makaleyi okumak için geçen sürede sizi kötüden muhteşeme götürmez, ancak bunları işinize uygularsanız, büyük bir fark yaratmaları gerekir.

Bir Grafik Programında Bir Şeyler Yapın

Bir projeyi tamamlamanız ve tasarım dosyalarındaki her bir estetik mutasyonu korurken baştan sona gitmeniz gerçekten nadirdir. Ve ne yazık ki, tasarımcılar her zaman hızlı bir düzeltme için koşacak durumda değiller.

Bu nedenle, herhangi bir ön uç işinde, estetikle ilgili bazı ince ayarlar yapmak zorunda kaldığınız bir nokta her zaman gelir. Onay kutusunu işaretlediğinizde görünen onay işaretini yapmak veya PSD'nin gözden kaçırdığı bir sayfa düzeni oluşturmak olsun, ön uçlar genellikle bu küçük görünen görevlerin üstesinden gelir. Doğal olarak, mükemmel bir dünyada durum böyle olmazdı, ancak henüz mükemmel bir dünya bulamadım, bu yüzden esnek olmamız gerekiyor.

Bu durumlar için maketler için her zaman bir grafik programı kullanmalısınız. Hangi aracı seçtiğiniz umurumda değil: Photoshop, Illustrator, Fireworks, GIMP, her neyse. Sadece kodunuzdan tasarlamaya çalışmayın. Gerçek bir grafik programını başlatmak ve nasıl görünmesi gerektiğini bulmak için bir dakikanızı ayırın, ardından koda gidin ve bunu gerçekleştirin. Uzman bir tasarımcı olmayabilirsiniz, ancak yine de daha iyi sonuçlar elde edeceksiniz.

Tasarımı Eşleştirin, Yenmeye Çalışmayın

İşiniz, onay işaretinizin ne kadar benzersiz olduğunu etkilemek değil; senin işin onu tasarımın geri kalanıyla eşleştirmek.

Çok fazla tasarım deneyimi olmayanlar, projede küçük görünen ayrıntılarla kolayca iz bırakabilirler. Lütfen bunu tasarımcılara bırakın.

"Onay işaretim harika görünüyor mu?" "Onay işaretim tasarıma ne kadar uyuyor?" diye sormalısınız.

Odak noktanız her zaman tasarımla çalışmak olmalı, onu aşmaya çalışmak değil.

Tipografi Tüm Farkı Yaratır

Bir tasarımın son görünümünün ne kadarının tipografiden etkilendiğini bilseniz şaşırırsınız. Tasarımcıların buna ne kadar zaman harcadıklarını öğrenince siz de aynı şekilde şaşıracaksınız. Bu bir “al ve git” çabası değil, bunun için ciddi bir zaman ve çaba harcanıyor.

Tipografiyi gerçekten seçmek zorunda olduğunuz bir durumla karşılaşırsanız, bunu yapmak için yeterince zaman harcamalısınız. Çevrimiçi olun ve iyi yazı tipi eşleşmelerini araştırın. Bu eşleştirmeleri denemek ve proje için en iyi tipografiyi elde ettiğinizden emin olmak için birkaç saat harcayın.

Bir tasarımla çalışıyorsanız, tasarımcının tipografi seçimlerini uyguladığınızdan emin olun. Bu sadece yazı tipini seçmek anlamına da gelmiyor. Satır aralığına, harf aralığına vb. dikkat edin. Tasarımın tipografisine uymanın ne kadar önemli olduğunu gözden kaçırmayın.

Ayrıca, doğru yazı tiplerini doğru yerde kullandığınızdan emin olun. Tasarımcı Georgia'yı yalnızca başlıklar için ve Open Sans'ı gövde için kullanıyorsa, Georgia'yı gövde için ve Open Sans'ı başlıklar için kullanmamalısınız. Tipografi estetiği kolayca yapabilir veya bozabilir. Tasarımcınızın tipografisine uyduğunuzdan emin olmak için yeterince zaman ayırın. İyi harcanan zaman olacak.

Ön Uç Tasarımı Tünel Görüşüne Müsamaha Göstermiyor

Muhtemelen genel tasarımın küçük parçalarını yapacaksınız.

Devam ettiğim bir örnek, özel onay kutuları içeren bir tasarımın işaretli gösterilmeden onay işareti yapmak. Yaptığınız parçaların genel bir tasarımın küçük parçaları olduğunu hatırlamak önemlidir. Çeklerinizi, bir sayfadaki bir onay işaretinin görünmesi gerektiği kadar önemli hale getirin, ne eksik ne fazla. Küçük bir parçanız hakkında tünel vizyonu almayın ve olmaması gereken bir şey haline getirmeyin.

Aslında, bunu yapmak için iyi bir teknik, programın veya o ana kadarki tasarım dosyalarının ve içindeki tasarımın, kullanılacağı bağlamda ekran görüntüsünü almaktır. Bu şekilde, sayfadaki diğer tasarım öğelerini nasıl etkilediğini ve rolüne tam olarak uyup uymadığını gerçekten görürsünüz.

İlişkiler ve Hiyerarşi

Tasarımın hiyerarşiyle nasıl çalıştığına özellikle dikkat edin. Başlıklar metnin gövdesine ne kadar yakın? Üstlerindeki metinden ne kadar uzaktalar? Tasarımcı, hangi öğelerin/başlıkların/metin gövdelerinin ilişkili olduğunu ve hangilerinin olmadığını nasıl belirtiyor? Bunları genellikle ilgili içeriği bir araya getirerek, ilişkileri belirtmek için değişen beyaz boşlukları kullanarak, ilgili/ilgisiz içeriği belirtmek için benzer veya zıt renkler kullanarak vb.

Tasarımın ilişkileri ve hiyerarşiyi gerçekleştirme yollarını tanıdığınızdan ve bu kavramların son ürüne yansıtıldığından emin olmak sizin işinizdir (özel olarak tasarlanmamış içerik ve/veya dinamik içerik dahil). Bu, iyi bir iş çıkardığınızdan emin olmak için fazladan zaman ayırmanın önemli olduğu başka bir alandır (tipografi gibi).

Boşluk ve Hizalama Konusunda Seçici Olun

Bu, tasarımlarınızı geliştirmek ve/veya başkalarının tasarımlarını daha iyi uygulamak için harika bir ipucu: Tasarımda 20 birim, 40 birim vb. boşluklar kullanılıyor gibi görünüyorsa, her boşluğun 20 birimin katı olduğundan emin olun.

Bu, estetikten anlamayan birinin hızlı bir şekilde önemli bir iyileştirme yapması için gerçekten çok basit bir yoldur. Öğelerinizin piksele kadar hizalandığından ve her öğenin her kenarının etrafındaki aralığın mümkün olduğunca eşit olduğundan emin olun. Bunu yapamayacağınız yerlerde (hiyerarşiyi belirtmek için fazladan boşluğa ihtiyaç duyduğunuz yerler gibi), bunları başka bir yerde kullandığınız aralığın tam katları yapın, örneğin bir ayrım oluşturmak için varsayılan değerinizin iki katı, daha fazlasını oluşturmak için üç katı , ve bunun gibi.

Pek çok geliştirici bunu tasarım dosyalarındaki belirli içerik için başarır, ancak içerik ekleme/düzenleme veya dinamik içerik uygulama söz konusu olduğunda, ne uyguladıklarını gerçekten anlamadıkları için boşluk her yere gidebilir.

Tasarımcının boşlukları nasıl kullandığını anlamak için elinizden gelenin en iyisini yapın ve yapınızda bu kavramları takip edin. Ve evet, buna zaman ayırın. İşinizin bittiğini düşündüğünüzde, geri dönün ve her şeyi mümkün olduğunca hizaladığınızdan ve eşit aralıklarla yerleştirdiğinizden emin olmak için aralığı ölçün, ardından esnek olduğundan emin olmak için çok sayıda değişen içerikle kodu deneyin.

Ne Yaptığınızı Bilmiyorsanız Daha Azını Yapın

Her projede minimalist tasarım kullanılması gerektiğini düşünen insanlardan değilim, ancak tasarım becerilerinizden emin değilseniz ve bir şeyler eklemeniz gerekiyorsa, o zaman daha azı daha fazladır.

Tasarımcı ana şeylerle ilgilendi; sadece küçük dolgular yapmanız gerekir. Tasarımda çok iyi değilseniz, o öğeyi çalıştırmak için mümkün olduğunca az miktarda yapmak iyi bir bahistir. Bu şekilde, tasarımcının çalışmasına kendi tasarımınızdan daha az şey katar ve onu mümkün olduğunca az etkilersiniz.

Bırakın tasarımcının işi ön planda olsun ve sizin eseriniz arka planda kalsın.

Zaman Hepimizi Aptallaştırıyor

Size tasarımcılar hakkında bir sır vereceğim: Aslında kağıda veya Photoshop tuvaline yazdıklarının yüzde 90'ı (veya daha fazlası) o kadar da iyi değil.

Gördüğünüzden çok daha fazlasını atarlar. Bir sonraki bölmedeki adamın işlerini görmesine izin verecekleri noktaya getirmek için çoğu kez birçok revizyon ve tasarımla uğraşmak gerekir, asıl müşteriyi boşver. Genellikle tek adımda boş bir tuvalden iyi bir tasarıma geçmezsiniz; arasında bir sürü yineleme var. İnsanlar bunu anlayana ve süreçlerinde buna izin verene kadar nadiren iyi işler yaparlar.

Peki bunu nasıl uyguluyorsunuz? Önemli bir yöntem, sürümler arasında zaman ayırmaktır. Hoşunuza giden bir şeye benzeyene kadar çalışın ve sonra kaldırın. Birkaç saat verin (gece boyunca bırakmak daha da iyidir), sonra tekrar açın ve bir göz atın. Taze gözlerle ne kadar farklı göründüğüne şaşıracaksınız. İyileştirme için hızlı bir şekilde alanlar seçeceksiniz. O kadar net olacaklar ki, ilk etapta onları nasıl gözden kaçırdığınızı merak edeceksiniz.

Aslında, tanıdığım en iyi tasarımcılardan biri bu fikri çok daha ileri taşıyor. Üç farklı tasarım yaparak başlayacaktı. Sonra en az 24 saat bekler, tekrar bakar ve hepsini bir kenara atar ve dördüncüsünde sıfırdan başlardı. Ardından, daha iyi ve daha iyi hale geldikçe her yineleme arasında bir gün izin verir. Sadece bir sabah açtığında ve tamamen mutlu olduğunda ya da en azından bir tasarımcının tamamen mutlu olabileceği kadar yakın olduğunda, müşteriye gönderirdi. Yaptığı her tasarım için kullandığı süreç buydu ve ona çok iyi hizmet etti.

O kadar ileri gitmenizi beklemiyorum, ancak “gözler tasarımın üzerinde” olmadan zamanın ne kadar yararlı olabileceğinin altını çiziyor. Tasarım sürecinin ayrılmaz bir parçasıdır ve sıçramalar ve sınırlarda iyileştirmeler yapabilir.

Piksel Önemlidir

Bitmiş programınızdaki orijinal tasarımı son piksele kadar eşleştirmek için elinizden gelen her şeyi yapmalısınız.

Bazı alanlarda mükemmel olamazsınız. Örneğin, harf aralığı üzerindeki kontrolünüz tasarımcınınki kadar kesin olmayabilir ve bir CSS gölgesi bir Photoshop gölgesiyle tam olarak eşleşmeyebilir, ancak yine de mümkün olduğunca yakın olmaya çalışmalısınız. Tasarımın birçok yönü için gerçekten mükemmel piksel hassasiyeti elde edebilirsiniz. Bunu yapmak, sonuçta büyük bir fark yaratabilir. Burada ve orada bir piksel çok fazla görünmüyor, ancak genel estetiği düşündüğünüzden çok daha fazla etkiliyor ve etkiliyor. Bu yüzden gözünüz üzerinde olsun.

Orijinal tasarımları nihai sonuçlarla karşılaştırmanıza yardımcı olan bir dizi [araç] vardır veya her bir öğeyi olabildiğince yakından karşılaştırmak için ekran görüntülerini alıp tasarım dosyasına yapıştırabilirsiniz. Sadece ekran görüntüsünü tasarımın üzerine koyun ve farklılıkları görebilmeniz için yarı şeffaf hale getirin. O zaman onu yakalamak için ne kadar ayarlama yapmanız gerektiğini bilirsiniz.

Geri bildirim almak

“Tasarım için bir göz” kazanmak zor. Bunu kendi başınıza yapmak daha da zor. Nasıl iyileştirmeler yapabileceğinizi gerçekten görmek için başkalarının girdilerini aramalısınız.

Komşunuzu alıp tavsiye almanızı önermiyorum, yani gerçek tasarımcılara danışmalı ve işinizi eleştirmelerine ve önerilerde bulunmalarına izin vermelisiniz.

Bunu yapmak biraz cesaret ister, ancak sonuçta kısa vadede projeyi geliştirmek ve uzun vadede beceri seviyenizi geliştirmek için yapabileceğiniz en güçlü şeylerden biridir.

İnce ayar yapmanız gereken tek şey basit bir onay işareti olsa bile, size yardım etmeye istekli birçok insan var. İster tasarımcı bir arkadaş, isterse çevrimiçi bir forum olsun, kalifiye kişileri arayın ve geri bildirimlerini alın.

Kulağa zaman alıcı gelebilir ve siz ve tasarımcılarınız arasında sürtüşmeye neden olabilir, ancak büyük şemada buna değer. İyi ön uç geliştiriciler, duymaktan hoşlanmadıkları bir şey olsa bile tasarımcılardan gelen değerli girdilere güvenirler.

Bu nedenle, tasarımcılarınızla yapıcı bir ilişki kurmak ve sürdürmek çok önemlidir. Hepiniz aynı gemidesiniz, bu yüzden mümkün olan en iyi sonuçları elde etmek için yolun her adımında işbirliği yapmalı ve iletişim kurmalısınız. Herkesin daha iyi bir iş çıkarmasına ve her şeyi zamanında yapmasına yardımcı olacağından, tasarımcılarınızla bağ kurma yatırımı buna değer.

Çözüm

Özetlemek gerekirse, ön uç geliştiriciler için kısa bir tasarım ipuçları listesi:

• Bir grafik programında tasarım. Küçük şeylerden bile koddan tasarım yapmayın.
• Tasarımı eşleştirin. Orijinal tasarımın bilincinde olun ve onu geliştirmeye çalışmayın, sadece eşleştirin.
• Tipografi çok büyük. Doğru olduğundan emin olmak için harcadığınız zaman, önemini yansıtmalıdır.
• Tünel görüşünden kaçının. Eklemelerinizin yalnızca gerektiği kadar öne çıktığından emin olun. Onları siz tasarladığınız için daha önemli değiller.
• İlişkiler ve hiyerarşi: Doğru şekilde uygulayabilmeniz için tasarımda nasıl çalıştıklarını anlayın.
• Boşluk ve hizalama önemlidir. Onları piksele göre doğru yapın ve eklediğiniz her şeyde eşit hale getirin.
• Becerilerinize güvenmiyorsanız, eklemelerinizi olabildiğince minimal tarzda yapın.
• Revizyonlar arasında zaman ayırın. Tasarımınızın yeni gözlerle çalıştığını görmek için daha sonra tekrar gelin.
• Mükemmel piksel uygulaması, mümkün olan her yerde önemlidir.
• Cesur ol. İşinizi eleştirmek için deneyimli tasarımcıları arayın.

Her ön uç geliştirici harika bir tasarımcı olmayacak, ancak her ön uç geliştirici en azından tasarım açısından yetkin olmalıdır.

Neler olup bittiğini belirlemek ve tasarımı son ürününüze uygun şekilde uygulamak için tasarım konseptlerini yeterince anlamanız gerekir. Bazen, kapsamlı bir tasarımcınız varsa (ve gerçekten piksel piksel kopyalayacak kadar ayrıntı odaklıysanız) kör kopyalamadan kurtulabilirsiniz.

Bununla birlikte, büyük projelerin birçok içerik çeşidinde parıldamasını sağlamak için tasarımcının kafasından neler geçtiğini biraz anlamanız gerekir. Sadece tasarımın nasıl göründüğünü görmeniz gerekmez, neden öyle göründüğünü de bilmeniz gerekir ve bu şekilde işinizi etkileyecek teknik ve estetik sınırlamalara dikkat edebilirsiniz.

Bu nedenle, bir ön uç geliştirici olarak bile, düzenli kişisel gelişiminizin bir parçası her zaman tasarım hakkında daha fazla bilgi edinmeyi içermelidir.