Web Tasarımında İllüstrasyon Kullanımı
Şekil, tasarımda birçok farklı kullanım bulabilen inanılmaz derecede çok yönlü bir araçtır. Ve web tasarımı söz konusu olduğunda, çok çeşitli uygulamalar bulabiliriz.
Bugün bu aracın işe koyulmasının bazı önemli yollarını araştırmak istiyorum, böylece ürettiğimiz tasarımlara ilham vermek ve onlara meydan okumak için yeni fikirler çizebiliriz.
Basit bir tanımlamayla nadiren yaptığım bir yere başlayalım: Resimli: 1) Açıklamak gerekirse; 2) Vererek ya da örnek ya da örnek olarak sunarak açıklığa kavuşturmak ; 3) Açıklanması veya dekore edilmesi amaçlanan görsel özelliklerin sağlanması.
Görünen o ki, web tasarımının gerçek dünyasında, illüstrasyon her iki işlevi de aynı anda gerçekleştirme eğilimindedir. Açıkça güzelleşiyor. Ve eğer bunlardan sadece birini yapıyorsanız, neden kendinize sormanız gerekebilir. Belki de her iki rolün de yerine getirilmeye çalışılması için örnek vermek gerekirse, tasarım öğesinin tüm değere sahip olması için gerçekten bir kaldıraç oluşturmasıdır.
Bu elbette, bir tasarımın yalnızca birini veya diğerini ele geçirmesi durumunda başarılı olamayacağını söylemez; kesinlikle yapabilir. Ama işimizden en iyi şekilde faydalanmak için düşünmemize meydan okuyan her zaman yardımcı oluyor. Her zamanki gibi, bu görsel cihazla neler yapılabileceğini görmek için bazı örnek gruplarını inceleyelim. Yol boyunca, her yaklaşımın netlik veya dekorasyon ya da her ikisini de sağlayıp sağlamadığını düşünün.
Tematik illüstrasyon
Burada ele almak istediğim ilk yaklaşım, genel bir tematik yaklaşım üretmek için bu tarzın kullanılmasıdır. Bu durumda, genel bir tema oluşturmak için çizimler ortaya konmuştur. Dağlara tırmanıyor, uzay istasyonunu ziyaret ediyor ya da bir şirketin ofisini mi araştırıyoruz?
Bu yaklaşım bizi bir yere götürmek zorunda olmasa da, çoğunlukla yapar. Diğer durumlarda, stil, sitenin takip ettiği genel bir motif oluşturur.
Bununla ilgilenmemizin nedeni, genel tasarımı radikal bir şekilde sürmek için kullanılıyor olmasıdır. Resimde bazı küçük destekleyici unsurlar bulunmamaktadır. Bunun yerine, en göze çarpan tasarım elemanıdır ve tüm düzeni kontrol eder.
Patronumu North Cape'a götür.
Bu örnekte yaklaşım daha net olamazdı. Sitenin tasarımı açıkça en temel amacını yansıtır. Çizim, bireyin ne yapacağına dair görsel bir referans sağlar. Ve illüstrasyon tanımlamak açısından, sanat, sayfaya dekorasyon ve güzellik sağlar.
Bu durumda tema sitenin amacını sıkı bir şekilde kurar ve kullanıcının konsept üzerinde satın almasına yardımcı olur.
Lansman Takımı
Tematik bir yaklaşım, bir şekilde bu kadar kör olmak zorunda değildir. Bazen daha tipik olarak yapılandırılmış bir sitenin daha doğal bir parçası olabilir. Bu durumda, site düzeninde biraz benzersizdir ve tema roket gemilerine dayanarak bazı üst-üstü arayüzü zorlamaz.
Bunun yerine, tema, içeriğe müdahale etmeden dekoratif dokunuşlarını iletişim kuracak şekilde tasarıma dokunmaktadır. Burada resim süslemek için hizmet ediyor, ama çok açıklığa kavuşturmuyor. Bu hiç de şaşırtıcı değil ve elbette, izleyecek hiçbir formülün olmadığını gösteriyor.
Atölye Anonyme Tasarımı
Bu gibi diğer durumlarda, tematik illüstrasyon tam anlamıyla site IS. Destekleyici bir unsur değildir, aksine tamamen tasarımın kendisi olur.
Burada çizimin kullanımı açıkça bir süsleme rolünü oynar. Ama aynı zamanda ziyaretçiye büyük bir netlik sağladığını iddia ediyorum. Bu bir tasarım ajansı için bir web sitesidir. Bu sitenin tasarımı ve doğası ziyaretçilerine çok şey anlatıyor. Bu nedenle, müşteri tabanına büyük bir filtre olarak hizmet ettiğinden eminim. İster çizilip, hem de yaratıcı ve yaratıcı yaklaşımlarına bayılacaksınız, ya da tamamen onun tarafından kapatılacaksınız. Yani bu noktada, ajans ve onların zihniyeti hakkında büyük bir netlik sağladığını düşünüyorum.
Allure Grafik Tasarım
Bu sitede, illüstrasyon kullanımı da net bir tematik yaklaşım sergilemektedir. Site bazı standart düzen formülleri izlese de, tüm tasarım tematik bir düzende sarılmıştır. Bu elemanlar sadece sitenin tasarımını değil, aynı zamanda sitede kullanılan ana logo ve kopya ile birleşirler. Tema, sürükleyicidir ve sitenin sunduğu tüm iletiyi yönlendirir.
Ek tematik örnekler
Bir site için bir ortam veya tema oluşturmak için tematik çizimlerden yararlanan bazı ek siteler.
çizgili sincap
Drift Boys
Iutopi
Chandu4u
Maskotlar
En belirgin olanı gözden geçirmeden, illüstrasyonları kullanma fikrini nasıl örtebilirim: maskotlar? Bu görsel unsurla, tasarımcılar siteyi, ürününü veya amacını bir karakterle kişiselleştirme eğilimindedir. Böyle bir unsurun uygulanması sadece değişmekle kalmıyor, aynı zamanda arkasındaki güç ve akıl yürütmeyi de yapıyor.
inkFinder
Bu tasarımda resimli maskot oldukça net bir rol oynuyor. Ürünün adını eklediğinden emin olun. Bu tasarım için sadece bir yaşam sağlamakla kalmıyor, aynı zamanda ona bir yüz veriyor. Bu şekilde, izleyicilerin, beyninde yer açmak için biraz daha eşsiz bir şeyleri vardır. Umarım maskot, ürünün duyulmasından uzak durmasına yardımcı olacak daha akılda kalıcı ve eşsiz bir deneyim kazanmaya yardımcı olur.
Belki de bir maskotun ardındaki en güçlü amaç, bir şeyin öne çıkmasına yardımcı olmaktır. Bunun gibi resimli bir maskotla ilgili en iyi şey, bu ürünün tamamen özgün ve spesifik olabilmesidir. Bu tasarım için özel olarak yapıldığı varsayıldığında, bu kesin resmin mevcut olduğu tek yer olması gerekir.
The Evnt
İronik olarak, ahtapot benzeri bir başka maskotu (üç ayaklı deniz yaratığı nedir?) Başka bir şekilde resmederiz. Bu durumda maskot, gerçekte, gerçeklikten çok daha büyük bir adımdır: bir balonun içinde bir beyni olan üç ayaklı bir robot.
Garip bir seçim olsa da, etkinlik için güzel bir ayırt edici unsur sağlar. Bu eşsiz maskot, etkinliğe bağlanmak için harika bir görsel eleman sağlar. Kendine ait bir hayatı ele alır ve insanları somut bir şeyle bağlar. Sanırım bu tam olarak bir maskotun amacı.
Bu sitenin tasarımı güzel, ama bu çılgın maskotun yerinde ne kadar donuk olacağını düşünün. Böyle bir unsur üretmek kolay değildir, ancak bu durumda son derece etkilidir.
Büyük Göz Yaratıcı
Ahtapot olmayan bir maskot örneği için Büyük Göz Yaratıcı bir site. Burada maskot, tasarımda baskın bir rol oynar. Bununla birlikte, buna bir çok kişilik katıyor. Açıkçası, diğer çizimler ve sitenin genel tarzı daha az resmi bir sunum yapar. Ancak, logodaki maskot, site genelinde mevcut. Bu, hafif kalpli stilin tasarıma izin vermesini sağlar.
Ek maskot çizimler
İşte tasarımda birkaç maskot örneği var. Bir başka ahtapot dahil olmak üzere; Bu kullanmak için popüler bir şey gibi görünüyor.
Öncü Kayıt Yönetimi
Argyle Ahtapot
Coucou
Konsebt
Resimli dekorasyon
Göz önünde bulundurmak istediğim bir sonraki kullanım türü, tematik dekorasyon olarak adlandırdığım şeydir. Bu, illüstrasyonun, gerçekten belirli bir fiziksel referans sağlamayan dekoratif bir şekilde çalıştığı zaman ortaya çıkar. Örneğin, çoğu zaman resimde insanlar, hayvanlar, nesneler veya yerlerin resimleri bulunur. Ancak bu örnekte, illüstrasyon gerçekte hiçbir şeyi temsil etmemektedir, aksine, sadece tasarıma benzer bir şekilde tasarımı güzelleştirmek için dekorasyon sağlar. Her zaman olduğu gibi, bunu bazı örneklerle açıklığa kavuşturalım.
1000 WP Temaları
İlk örneğimiz için 1000 WP Temaları Web sitesi. Bu sitede, illüstrasyon kullanımı, site için temel bir çerçeve ve stil sağlar. Ama bunu en dekoratif olan şeyde yapar. Genel stil bir illüstrasyon gibi hissediyor, ancak tipik insancıl unsurlara sahip değil.
Şimdi kendimle tamamen çelişmek istiyorum. Tarzın ağırlıklı olarak dekoratif olduğunu düşünüyorum. Fakat aslında, sitenin bir düzeyde netlik sağladığını nasıl tartışabileceğimizi görebiliyorum. Tasarımın kullandığı stil belirli bir kitleye bağlanıyor. Sitenin tarzı ve üretebilecekleri temalar hakkında bir şeyler söylüyor. Birçok açıdan, resimli düzenlemenin kalitesi, bu sitede görmeyi beklediğiniz işlerin kalitesini gösterir. Bu şekilde, açıklık belki de yüzünüzde daha incelikli ve daha azdır, ancak yine de mevcuttur.
Coca-Cola Tarihçesi
Bu web sitesinde, illüstrasyon odaklı bir başka tasarım buluyoruz. Burada, gerçek şeyleri gösteren bazı resimli unsurlar vardır, ancak tematik yaklaşımın çoğu, saf dekorasyonla kurulmuştur. Bu örnek sadece yaklaşımı göstermekle kalmaz, aynı zamanda saf bir tarzda neredeyse hiç tekniğin kullanılmadığını gösterir. Gerçek şu ki, bu unsurları muhtemelen çeşitli yollarla birleştireceksiniz.
Metaphiziks
Dekoratif illüstrasyon için bu son örnekte bazı mükemmel arka plan öğeleri bulabilirsiniz. Bunlardan bazıları diğerlerinden daha somut, ama genel olarak stilist destek unsurları hakkında her şeyden daha çok. Güzel metinler, iyi seçilmiş renkler ve basit ikonlarla birleştirildiğinde bu kadar basit çizgi çizimlerin ne kadar güzel olabileceği dikkat çekicidir. Son sonuç burada fantastik ve son derece güzel.
Resimli dekorasyon ile daha fazla tasarım
Tasarımda bu tür illüstrasyonları tamamlamak için bazı ek örnekler.
Moo's Cupcakes
Teknik İşler
Piksel Stadyumu
Özel çanta hq
Resimli metin
El işlenmiş metin kesinlikle yeni bir kavram değildir ve kapsanan bir şeydir daha önce birçok kez . Bununla birlikte, hiç böyle bir yaklaşımı illüstrasyon perspektifi ile düşünmedim.
El oluşturma metni, resimli metnin popüler bir varyasyonu ve birçok reklam için harika bir çözümdür. Birincisi, tüm bu sanat okulu eğitimini işe koymanın harika bir yolu. İkincisi, benzersiz bir şey üretmek için harika bir yol. Sonuçta, bazı metni elinizde tutarsanız% 100 benzersiz olacaktır. Varolan bir yazıyüzünü çizseniz bile, yine de ayrı bir oluşturma olacaktır.
Rangus
Bu resimli tipin mükemmel bir örneğidir. Stil son derece muhteşem, tamamen benzersiz ve çok davetkar. Ama orası durmuyor. El işlenen tip aslında bireylerin yeteneklerini gösterir. Elleriyle sanat eserini yarattığını ve animasyon becerilerine mükemmel şekilde bağlandığını gösteriyor. Özellikle tema ve unsurları mükemmel bir şekilde birbirine bağladığından, hepsinin bir kara tahta temasına dayandığını seviyorum. Benim düşünceme göre bu site, birleştirici illüstrasyonun sitenin amacı ve mesajı ile nasıl olabileceğini göstermektedir.
Joey Lomanto
Bu durumda, resimli metin çok daha inceliklidir. Tasarımın tüm yönünü sürmek yerine, sadece güzel bir şekilde çalıyor. Aslında, ilk önce büyük ana sayfa metninin el işlenen stilini bile fark etmeyebilirsiniz. Verilen metin aslında bir yazı tipi olabilir, ancak sitenin stiliyle mükemmel bir şekilde birleşecek şekilde kullanılmıştır. Ne olursa olsun, stil güzel bir şekilde birleştirilmiştir ve illüstrasyon genel tasarımda birçok rol oynar.
Git canlı
Resimli metnin el yapımı olmasına gerek yoktur. Bu örnekte bulacağınız gibi, metin, metnin kendisini genel illüstrasyonun bitlerine çeviren çeşitli şekillerde stillenmiştir. Bu yaklaşımın güzelliği, metni diğer resimlerle birleştirmesidir. Bu, standart web tabanlı metne göre sadece çizimlere sahip olduğunuz daha az birleşik bir duyguyu önler. İkincisi işe yarayabilir, ancak bu durumda resimli metnin etkisi açıktır.
Resimli metnin ek örnekleri
Aşağıdaki örnekler bu kategoriye gevşek bir şekilde uymaktadır. Ben gevşek bir şekilde söylüyorum çünkü bazen ince bir şey olduğu zamanlarda söylemek zor. Bu örneklerin bazılarında metin sadece bir sanat eseri gibi hissediyor, bu yüzden onu bu koleksiyona yerleştirdim.
Kontrast İsyanı
fakta
La Web Mağazası
Bilgilendirici çizimler
Örneklemenin tanımına göre, amaçlarından biri açıklığa kavuşturmak ve açıklamaktır. Bu yüzden sadece resimlerin olağanüstü bir netlikle yapıldığı bazı örnekler buluyoruz.
kitapsever
İle başlayalım kitapsever bir site. Bu sıradışı düzende, resimlerin ana sayfa düzeninin çeşitli noktalarını çok net bir şekilde simgelediğini görüyoruz. Her bloğun sadece güzelleştirmekle kalmayıp daha da önemlisi onu açıklayan görsel bir öğesi vardır. Öyle ki bir okuyucu olarak neredeyse kopyayı okumak zorunda kalmam. Sol altta bulunan cihazlar, özellikle bunu gösterir.
Conferize
Daha az belirgin bir şekilde, bu tasarımdaki illüstrasyon aynı derecede bilgilendirici niteliktedir. Basit illüstrasyon, tek başına sitenin konusunu gösterir. Bu mesajla kafanızın üzerinden geçemez, ancak sitenin amacını güzelce yansıtır.
etkinleştirmek
Bu tasarımdaki illüstrasyon sadece temsil ettiği olay hakkında bilgi iletmekle kalmaz, aynı zamanda olayın amacını da yansıtır. Bu özel olay, teknolojiden ayrılma etrafında dönüyor. Teknolojiyle dolu insanların debriyajlarından kaçma şansı.
Buradaki illüstrasyon bize katılımcıların ne yapacağını gösteriyor, bu yüzden bilgilendirici. Ve doğası gereği, illüstrasyon teknolojiyle çatlıyor ve kendini tamamen organik bir hisle köklendiriyor, sitelerin amacını iletmek için son derece harika bir yol.
Daha bilgilendirici çizimler
Bu ekstra siteler, bizi bilgilendiren illüstrasyonlar fikrini de göstermektedir. Bazıları küçük ve basit simgeler, diğerleri ise içeriği tam olarak tanımlayan ve temsil eden sürükleyici öğelerdir.
Canlılık Şehri
Uklizenodoma.cz
Qubiq
Teknolojik bir panzehir
Son örnekle birlikte etkinleştirmek site) sonra göz önünde bulundurmak istediklerime adım attım, şeylerin teknoloji odaklı duygusu ile kırmak için illüstrasyon kullanımı. Bazen, web'in teknolojik temellerinden kopmak ve çok organik bir his ortaya koymak gerekir. İllüstrasyon böyle bir fikri başarmak için en güçlü araçlardan biridir.
Gönderi Uygulaması
Bu anlaşılır gelecek sayfa, olağanüstü bir şey değildir. Ve açıkça onun güzelliğini nasıl başardığını kökten basittir. Tek bir büyük illüstrasyon, bizi bir web sayfası olduğu gerçeğinden tek başına dağıtır. Daha küçük bir etkileşimli öğeye sahip olan bir sanat eseri gibi görünüyor, kesinlikle kullanıcılar üzerinde büyük bir etki yaratmak ve unutulmaz bir imaj oluşturmak için harika bir yol.
Muziekpark
Bu site oldukça radikal bir yaklaşımı kullanmıyor olsa da, illüstrasyon düzeni hala büyük ve belirgindir. İşte animasyonlu görüntüler sayfadaki hayatı soluyor. Bunu yaratıcı ve sıra dışı bir düzenle birleştirin ve onu çalıştıran teknolojiden tamamen bağımsız hissedin. Belki de normal bir siteye benzememesi gerçeği bu konuda da güçlü bir rol oynar. Ayrıca, buradaki çizimin, sitenin temasını bize bildirmeye gerçekten yardımcı olduğunu düşünün.
Egopop
Başka bir atipik düzende, bu resimde işe başlandığını görüyoruz. Buradaki sanat eseri bize sadece sitenin temsil ettiği birey hakkında değil, aynı zamanda bir ziyaretçinin sahip olabileceği normal web zihniyetinden de kopuyor. Yine, bir web sitesinden daha interaktif bir sanat eserine benziyor. Bu sizin hedefiniz ve ihtiyaçlarınızsa, bu düşünmek için harika bir yaklaşımdır.
Zaarly
Önceki örneklerle karşılaştırıldığında, Zaarly site tam karşıtlık içinde duruyor. Her ne kadar tasarım tek bir büyük resim tarafından yönetiliyor olsa da ve bu resim site için bir ton oluşturmaya yararsa da, alttaki işlev diğer örneklerden çok daha karmaşıktır.
Bu site, kullanılması amaçlanan bir uygulamadır. Ve illüstrasyon belirli bir takım beklentiler oluşturmaya yardımcı oluyor. Açıkça organik ve doğal bir his olan hafif kalpli, insani bir his verir. Bunu hiç kimsenin olmadığı yarı minimalist uygulamaların aksine düşünün. Tasarım, siteye bir ulaşılabilirlik duygusu veriyor ve beklentilerimizi değiştiriyor.
Sonuç
Tasarımda illüstrasyon kullanımı, eski bir uygulamadır ve web'e uygulanması açıktır. Herhangi bir tasarım öğesinde olduğu gibi, amacını ve kullanımını yeniden gözden geçirme sürecinden keyif alıyorum. Böyle bir çaba ile kaçınılmaz olarak, nasıl çalıştığının, amaçlanan bir amaç için faydalanmanın yollarını ve nihayetinde bazı taze ve ilham verici fikirleri daha iyi anladığımı fark ettim.
Web tasarımında çizimi nasıl kullanıyorsunuz? Lütfen aşağıda kendi deneyimlerini paylaşın….