İnternet sayesinde grafik tasarım ve programlama gittikçe artan örtüşen alanlar haline geliyor.

Bir programcı olarak, kendimi sürekli Grafik Tasarım konusunda temel bir bilgiye ihtiyaç duymaya başlıyorum, ancak kapsamlı ancak özlü grafik tasarım öğrenme kaynakları bulmakta sıkıntı çekiyorum ve bunun yerine genellikle eldeki göreve uygun olan bit ve bilgi parçalarını buluyorum.

Deneyimlerinize göre, etkili ve kaliteli öğrenme materyalleri olan web tasarımına başlangıç ​​seviyesine genel bir bakış sunan bazı ipuçları önerebilir veya iyi kitaplar, öğreticiler, bloglar ve web siteleri önerebilir misiniz? Görüntü düzenleme araçlarının nasıl kullanılacağına dair ipuçları aramıyorum, ancak bunların temel bir kavrayışı varsayalım, hangi kaynakların ve tavsiyelerin yeni bir tasarımcının profesyonel görünümlü tasarımlar yaratmasına en iyi yardımcı olacağını düşünelim?

• Basit Kalın - İlk başta çok süslü veya maceracı bir şey yapmaya çalışmayın. Önce temelleri öğrenin, sonra denemeye başlayabilirsiniz. Star Trek bilgisayar arayüzünü taklit etmeye çalışmayın.
• Tutarlı Olun - Tutarlı bir tasarım, iyi bir tasarımın temelinin bir parçasıdır. Kenar boşluklarınızı, boyutlarınızı ve yerleşimlerinizi takip edin ve tasarım boyunca koruyun.
• Dağınıklığı Kaldır - Yalnızca tasarıma gereken öğeleri ekleyin. Her şeyi kaldır.
• Önceliklendirme - Tasarımın temel amacı nedir? Bu amacı vurgula. Açıkla.
• Boşluk Kullan - Uygun kenar boşluklarına izin ver. Kenar boşlukları az olan veya hiç olmayan büyük metin blokları çok okunaklı değildir. Diğer tasarım öğeleri için aynı.
• Renk Paleti Kullan - Toplamda 4-5'ten fazla renk kullanmamalısınız.
• Tutarlı Yazı Tipleri - Bir veya iki yazı tipine yapıştırın. Bunları tutarlı bir şekilde kullanın, genellikle başlıklar için, biri paragraf metni için. Tutarlı font boyutları, satır yükseklikleri ve satır aralığını hesaplayın ve koruyun. Kuduz velociraptor zombilerini ortadan kaldıramazsanız Comic Sans kullanmayın.
• Önce Tasarım - Tasarım sonradan olmamalı; planlama aşamasının birinci sınıf bir üyesi olmalıdır. Tasarım, kullanıcılarınızın programlamanızla etkileşime girme şekli olacaktır ve görüşlerini öncelikle ve büyük ölçüde tasarımınıza dayalı olarak oluşturacaktır. Tasarıma uygun önemini verin.

Kaynaklara gelince, aşağıdaki web sitelerinden birine göz atın:

• Smashing Dergisi
• PSD Tuts
• Abuzeedo
• UX Kabini
• Tipografi seviyorum
• Jason Santa Maria

Jim Krause'nin tasarım temelleri endeksi bana kompozisyon, renk ve tür temelleriyle ilgili çok iyi bir özet verdi. Kendi örneklerinin çoğunun büyük bir hayranı değildim, ancak puanlarını gerçekten iyi gösteriyorlar ve başka yerlerde çok fazla bahsetmediğim görmediğim birkaç değerli şeye dokunuyor. Ve belki de en önemlisi, onu okumak beni dışarı çıkıp tanıttığı fikirleri denemek için gerçekten heyecanlandırdı.

Bazen web geliştirme ve web tasarımı arasında hafif bir örtüşme olabilir, ancak web geliştiricilerin programlamayı öğrendikleri kadar çaba göstermeye istekli olmadıkça tam zamanlı tasarımcılar olmaları gerektiğini düşünmüyorum. Bu sadece hafta sonları başarabileceğiniz ve iyi olabileceğiniz bir şey değil.

Eğer öyleyse, kendi web tasarımcınız olmayı öğrenebilirsiniz (yani üzerinde çalıştığınız tüm siteler için kendi web tasarımınızı yapın), o zaman gerçekten resmi bir eğitim almanızı öneririm (sadece birkaç üniversite tasarım dersi alıyor olsa bile) Görsel tasarım ve kompozisyonun temellerini öğrenmek. Damon'ın gönderdiği kitap gibi bir kitap tasarımı yardımcı olabilir, ancak kitaptaki bütün alıştırmaları yapmanız ve materyali anladığınızdan emin olmanız gerekir. Ancak en önemlisi, bakmak (çevrimiçi tasarım galerilerine göz atmak, dergilerde ve dergi reklamlarında vb. Gezinmek) ve tasarımları oluşturmak için çok fazla zaman harcamanız gerekir (bazı pratik tasarım özetlerini çevrimiçi indirin veya çevrimiçi tasarım yarışmalarına katılın).

Çalıştığınız web / grafik tasarımcılarla iletişim kurmanıza yardımcı olacaksa, size kelime bilgisini öğreten bir kitap almak (örneğin tipografi kavramları) ve kullanılabilirlik , erişilebilirlik ve UX tasarımına odaklanmak muhtemelen zamanınızın en iyi kullanımıdır. Bu şekilde, projenin yaratıcı yönünde yer alabilir ve arayüzlerin tasarlanmasına yardımcı olabilirsiniz, ancak tasarımcı sitenin "görünüşünü" ya da estetiğini yaratan tasarımcıdır.

Virtuosi Media, birçok iyi kaynağı listeler (Tutsplus ağı genel olarak harika ve Smashing Magazine de eklemek istediğim bir web geliştiricisi / tasarımcısı için mutlaka okunması gereken):

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - ilham almak için pek çok birinci sınıf tasarımcının portföyünü barındırıyor.

Ben kendim ve benim için çok yardımcı olan aşağıdaki kitapları kendim için bir programcıyım:

• Tasarımcının Tasarımcısı Robin Williams'ın Tasarım Kitabı: Bu kitap grafik tasarımın temellerini kapsar.
• Beyin Sağ Tarafında Çizim Betty Edwards: Çizim becerilerinizi geliştirmek için kitap.
• Jef Raskin'in İnsani Arayüzü: Bu kitap, kullanıcı arayüzü tasarımı hakkında bazı düşünceler uyandırmaktadır.

Belki de tüm durumlarla alakalı değildir, ancak web programcıları için, göze çarpan en büyük şeylerden biri, aradaki boşluğu biraz daraltıyor, iyi tasarlayabilmenin hiçbir anlamı olmadığı için, içeride ve dışarıda CSS öğrenmek. eğer onu yarattığınız projenize entegre edemezseniz.

2004'te kendimi hayatımın çoğunda olduğu gibi iki dünya arasında da yarı yolda buldum - nokta-com-günlerde HTML 3.2'den beri web yapıyorum; Bir Apple ile birlikte yetiştirilen (beni koreograf ve eğitimci olan) ebeveynler tarafından yetiştirdi ve beni sanatla çok fazla zaman geçirmeye teşvik etti. Tasarım sanat değildir ve aslında daha algoritmik kalıplarından bazıları, ister webde ister başka bir şekilde programlama ile güzel bir şekilde hizalanır.

• Bookshelf Histogram - lisansüstü okulda hem design-y, hem de developer-y yaptığım bir baskı.

Ama evet, 2004: Lisansüstü okula gittiğimde, ilk önce birinci sınıf tipografik bir eğitim aldığım ve sonra keşfetme enlemindeki farkımı böldüm; bu süre zarfında, geekier eğilimlerim kullanışlı oldu.

Bu yüzden belki de yüksek öğretimi düşünün, ya da her neyse, sizin için her şeyi tüketen bir şekilde meşgul. Her iki şekilde de iyi şanslar.

Tipografi hakkında çok şey öğrenin.

Gönderen klasikleri ...

^{Jan Tschichold}

Palyaçolar değil ...

^{David Carson}

Stratejik ve etkili tipografi bu alanda en yaygın olan niteliklerden biridir (ve her zaman olmuştur).

Tipik olarak tamamen kullanım biçimlerinden yola çıkarak bir tasarımcıyı işe alabilirim. Hikayenin yaklaşık% 80'i özgeçmiş kurulumunda haklı.

İyi (ücretsiz) başlangıçtır bu detaylı adaptasyon ait temel kaynak dokuya uygulanabilecek Robert Bringhurst dan.

^{Tipografik Tarzın Öğeleri, Bringhurst}

Bu, tür ve düzen etkileşimi ile ilgilenen daha geniş bir husustur .

^{Grafik Tasarımda Izgara Sistemleri, Brockmann}

1. Çevrenizdeki tasarlanmış nesneler hakkında eleştirel düşünün

   Neredeyse insan yapımı ortamdaki her şeyin arkasında, bir grafik, web sitesi veya bir moda aksesuarı olsun, bir tür tasarım vardır.

   Tasarımın, amaçlanan amacı için ne kadar iyi çalıştığına ve nasıl göründüğüne dikkat edin.

2. Tasarımı bir ihtiyacı doldurmanın ya da bir sorunu çözmenin bir yolu olarak düşünün

   İşlerin iyi görünmesi için çaba sarf etse de, tasarım pratik bir uygulamaya sahip olması nedeniyle diğer sanat türlerinden farklıdır.

   Örneğin bir logo, bir markanın veya şirketin hızla tanınmasını sağlayan bir grafik tasarım türüdür.

   Bir giyim eşyası, kullanıcının daha çekici görünmesini sağlamanın yanı sıra, vücudu kapama amacına da hizmet eder.

3. Görsel iletişim kurmayı pratik edin.

   Tasarımcıların, onları incelemek ve tasarım meslektaşları ve üreticiler gibi diğer insanlara açıklamak için çizimleri veya tasarımlarının diğer temsillerini yapabilmeleri gerekir.

   Çizim, tasarımcılar için güçlü bir araçtır, ancak fotogerçekçi çizemiyorsanız endişelenmeyin. Tasarımcıların çizimleri başyapıt olmak zorunda değildir, sadece bitmiş ürüne yol açacak fikirleri hızlıca yakalamanın bir yoludur. İzleme de tamamen kabul edilebilir.

   Çizimlere ek olarak, tasarımcılar tasarımlarını görselleştirmek için maketler, prototipler ve bilgisayar görüntüleme gibi şeyleri de kullanırlar.

4. İşlerin nasıl yapıldığını keşfedin

   Bir tasarımcı olarak çalışırken, sadece göze hoş gelenin ne olduğunu düşünmek zorunda kalmazsınız, aynı zamanda tasarımınızın nasıl uygulanacağını da düşünmelisiniz.

   Bir cep telefonu kılıfı gibi bir nesne için, endüstriyel tasarımcıların ne tür plastik ve kalıplama işlemlerinin kullanılacağını ve her bir parçanın nasıl birleştirileceğini düşünmeleri gerekir.

5. İyi bilgi kaynakları bulun

   Tasarım dergilerine ek olarak, tasarım süreci, ilkeleri ve yöntemleri hakkında kitap arayın.

   Hazır giyim yapımı, üretim yöntemleri ve çeşitli el sanatları teknikleri için ders kitaplarına ve teknik videolara bakmayı deneyin.

   Tasarım hakkında bilgi, moda okumak ve dekorasyon dergilerinden daha derine iner, ancak bunlar mevcut eğilimler için iyi bir kaynaktır.

6. Tasarım becerilerinizi geliştirmek

   Eğitim ve pratik iyi, ama tasarımınızı gerçekten bir üst seviyeye taşıyacak olan şey gerçek dünya deneyimi.

7. Hızlıca hata yap

   çok fazla hata yapacaksınız ve ne kadar hızlı geçerseniz o kadar iyi.

8. Her zaman fikirleri yakalamaya hazır olun.

   Her yerde ilham ara. İlham başka tasarımlardan veya tasarım trendlerinden gelmek zorunda değildir - genellikle doğadan veya kazayla olan şeylerden gelebilir.

Kitaplar ve materyaller

http://www.alistapart.com

http://webdesignledger.com

Smashing Dergisi

PSD Tuts

Abuzeedo

UX Kabini

Akılda tutulması gereken birkaç nokta:

1. Her tasarım bir sorunu çözer

Tasarım hakkında "Bunu nasıl güzelleştirebilirim?" Diye düşünmeyi bırak. ve “Bunu insanca mümkün olduğu kadar kullanımı nasıl kolaylaştırabilirim?” terimleriyle düşünmeye başlayın.

Web siteleri yaparken, bunun anlamı, en geniş anlamda, bir işletme sorununu çözdüğünüz anlamına gelir .

Bir iş hedefi gerçekleştirmek için bir web sitesi var .

Bir web sitesinin kullanıcıları da kendi hedeflerini göz önünde bulunduruyorlar - bir şey satın almak, ürünleri karşılaştırmak, bir konuyu okumak, vb.

İş hedefini mümkün olduğunca çok kullanıcının gerçekleştirmesini sağlamak ve kullanıcıların kendi hedeflerini gerçekleştirebilmeleri için web sitesinde gezinmelerine yardımcı olmak için işinize yardımcı olmak tasarımcı olarak sizin işiniz .

Örneğin, bir e-ticaret mağazası tasarlıyorsunuz: Buradaki iş hedefi, ürünleri satmaktı. Ve kullanıcıların hedefi, tam olarak ne almak istediklerini, mümkün olan en kısa sürede bulmak ve mümkün olduğunca hızlı bir şekilde kontrol etmektir.

Tasarım sürecinin büyük bir kısmı sorunu çözmeye, kullanıcının profilini oluşturmaya, iş hedefini nasıl gerçekleştireceğini vb. Düşünmeye gider.

Renkler, yazı tipleri, düzen, verdiğiniz her tasarım kararı web sitesinin amacı tarafından belirlenir .

2. İşlerin güzel görünmesini sağlayan tekrarlamadır .

Bu tutarlılık ile ilgili.

Örneğin, yazı tipi eşleştirme. Yazı tipleri, ayrıntıların tekrarlanmasında benzer özelliklere göre eşleştirilir.

İşte bir eşleşme: Farnham ve Benton Sans.

Buradaki 2 yazıya göre bu iki yazı uyuşuyor çünkü:

[...] yüzler, belirgin şekilde kısa yükselişe ve alçaltıcıya sahip olan küçük harflerinin gıcırtılığına benzer. [...] Her ikisinin de küçük harfleri geniştir.

Belirli özelliklerin tekrarı bu 2 fontun birlikte iyi çalışmasını sağlar. Onları burada bir web sayfasında görebilirsiniz 3 .

Tekrarlama, tasarımda uyumu beraberinde getirir. Ve uyum, tasarımın güzel görünmesini sağlar.

Fakat gördüğünüz gibi, Farnham ve Benton Sans da kontrast oluşturuyor: Farnham bir serif yazı tipi ve Benton sansf serif.

Kontrast için neden ihtiyaç var? Bir tasarımdaki benzerlikleri tanıtmak istiyoruz, değil mi?

Evet, ama çok fazla tekrar yapmak, tasarımlarınızı sıkıcı ve kullanımı zor hale getirir .

Tedavi kontrasttır.

3. Kontrast, kullanıcının yolunu bulmasına yardımcı olur

Farklı unsurları birbirlerinden ayırt etmelerine yardımcı olur. Başlıklar, gezinme, düğmeler gibi temel öğeleri bulmalarına yardımcı olur.

Element ne kadar önemli olursa, çevresi ile o kadar fazla kontrast oluşturması gerekir.

Tasarımlarınızı tutarlı hale getirmek için tekrarı kullanın. Diğerlerinin dediği gibi - 2 yazı tipi sınırlı bir renk paleti vb.

Gerisini diğerlerinden ayırmanız gerektiğinde kontrastı kullanın.

Bunları bilmek güzel, ama ... hala bir sonraki web siteni tasarlamana yardımcı olmuyor, değil mi?

Eh, bunun için bir çözümümüz var da.

Web tasarımında daha iyi olmanın ilk adımı, başkalarının çalışmalarını gözlemlemek ve özümsemek . Birçoğu. "İlham" nereden geliyor.

Beğendiğiniz yüzlerce tasarıma bakın, onları analiz edin ve desenleri görmeye başlayın. Beyniniz bu kalıpları kendi tasarımınızla birleştirmenize yardımcı olacak, bu da gördüğünüz tüm benzer tasarımların bir değişkeni olacaktır. "Benzersiz" bir şey yaratmanıza gerek yok.

Özet: Bir dahaki sefere yan projeni tasarlamaya başladığında

Bir düzine benzer web sitesinden / web uygulamasından geçin ve tasarımlarını hızlıca çizin. Hangi iş akışını kullandıklarına dikkat edin. Neden kullandılar? Hangi şekilleri, renkleri ve yazı tiplerini kullandıklarını not edin.

Ardından kendi tasarımınızı oluşturmak için bu işlemi uygulayın:

1. Projeyi tanımlayın. Kendinizi projenin içine sokun ve bu konuda daha fazla bilgi edinin:

   1. Amacı, amaçlanan çıktıları

   2. Onun (gelecekteki) kullanıcıları
   3. Kullanıcıları / ziyaretçileri için tasarlanan deneyim
   4. Projenin arkasındaki marka
2. Gerekli kaynakları edinin. Ellerinizi (örnek) içeriğe alın (benzer sitelerden ödünç alın)

3. İçeriğe şekil verin

   1. İçeriği dizeceğiniz bir yazı tipi seçin (sitenin havasına ve mesajına uyan birini seçin)
   2. Gövde kopyası için yazı tipi boyutunu seçin
   3. Gövde kopyasının yazı tipinden bir modüler ölçek (orantılı harmonik boyutları tablosu) oluşturun (Type Scale - A Visual Calculator kullanarak)
   4. Proje gerekliliklerine göre farklı düzenler çizin
   5. Düzeni (HTML ve CSS'de) modüler ölçek yardımıyla oluşturun: sütun genişliği, satır yüksekliği, başlık boyutları, alt kenar boşlukları, sütunlar (gerekirse)
   6. Marka kılavuzuna göre renk uygulayın

Şunları yapabilirsiniz buraya bu süreçten her adımda hakkında daha fazla bilgi .

Biraz daha:

1. Fikir için ilham verici web sitesi koleksiyonlarına göz atın. Bir Koleksiyon İlham Verici Web Sitesi Koleksiyonları Ana Sayfa , bir kaç koleksiyonu listeler. Diğer iki iyi site siiimple.com ve minimalsites.com .

2. Virtuosi Media'nın 'Dağınıklığı Kaldır' önerisi kesin bir idealdir, ancak yeni başlayanlar için dağınıklığı olan bir site, yeni başlayanlar tarafından yapılan minimalist bir siteden daha iyi görünür. Dağınıklık, içeriğe dikkatini dağıtarak, diğer zayıf tasarım öğelerini kamufle eder. Neredeyse tüm şablonlarda olduğu gibi tipik iş sitesi çok fazla karışıklığa sahip, ancak yine de yeterince profesyonel görünüyor.
   
   Nefes alıp veren gerçekten iyi tasarlanmış, verimli bir yer oluşturmak için yazı tipleri, kontrast, negatif alan, renklendirme, yoğunluk, akış, ... ile yakın bir bağlantı kurar.

3. Her şey biraz zorlaşırsa, bir şablon satın almayı düşünün.

Sadece UI tasarımına ilgi duyan bir programlama geçmişinden gelen insanlar için birkaç bağlantı daha eklemek için.

• Hackerlar İçin Tasarım (basılı kitap)
• Kullanıcı Arabirimi Tasarımı İlkeleri (site)
• Adım UI Tasarım Adım Adım (ebook)
• Tasarım Şekli (ücretsiz çevrimiçi versiyon)

Başlangıçta bazı şeyler yolunda gitmeyeceğinden sorunla karşılaşacaksınız. Fakat sabırlı olmanız ve çok fazla pratik yapmanız gerekecek. 4 yıl önceki çalışmamı tasarlamaya ve geriye bakmaya başladığımda, bu işi yaptığıma inanamıyorum.

Gerçekten diğer harika tasarımcıların işlerini aramanız gerekir. Bunun için Dribbble'da harika tasarımcıları izlemelisin . Ayrıca çok çok önemli olan şey, www.minimalistgallery.com veya diğerleri gibi css galeri sitelerinde en son tasarımları izlemek .

En iyisini dileğiyle !!!

Günlük bültenler için http://sidebar.io/ adresine abone olun . Her makale bir şekilde veya başka şekilde yardımcı olacaktır. Tasarımlar hakkında kendi kendine öğrenmenin bir başka harika yolu da top sürme .

Bu oldukça genel bir ipucu olabilir, ancak bana göre birinin iyi bir tasarımcı olup olmadığını gerçekten söyleyen bir şey var:

Boşluklar, kenar boşlukları ve hizalama.

Kaygan, profesyonel görünümlü tasarımlar yaratmanın anahtarıdır. Bir çeşit 'nefes alan' yaratırlar ve tasarımınızın bir araya getirilip bakılmayacağını gerçekten belirleyebilirler. Yazı tiplerinde olduğu gibi, mizanpajın temiz görünmesini sağlamak için belirli bir kenar boşluklarına / boşluklara bağlı kalmak istersiniz.

Bu gibi şeyleri takip etmek için, tasarım yapmak için bir ızgara veya kılavuz kullanmak çok yararlı olabilir.

Sorunuz "Bir tasarımcı olarak sürekli kendimi Uygulama Programlama konusunda temel bilgilere ihtiyaç duyan buluyorum" gibi. Her ikisi de geniş alanlardır, birbirlerini gerektiren üst üste binmiş bölgeler bulunur. İyi haber: onların önemini merak ediyor ve anlıyorsunuz. Kötü haber: İyi bir tasarım yapmanın neye mal olduğunu, uygun bir kurs veya metodoloji olmadan tam olarak anlamanın kolay bir yolu yoktur. AMA ilk adımlar için, bu kitap bir şekilde güvenli bir şekilde mantıklı görsel sistemler oluşturmaya başlamak için iyi bir tanesidir.

Sigara Tasarımcıları Tasarım Kitabı