bildirgec.org - msaygilar - beğendikleri

web tasarım ve geliştiricileri için 150 jquery

msaygilar — Thu, 07 Oct 2010 12:03:00 GMT

eskiden dinamik web sayfaları derken bunun server-side kısmını ele alırdık. ajax ile birlikte artık sadece kod değil görüntüde oldukça dinamik, yerinde düzenleme ile yapılan değişiklikler, kendini yenileyen div-ler ve benzer uygulamalar. hem programcının işini basitleştirdi, hem de ziyaretçinin daha hoş görünen bir sitede gezmesine sebep oldu. başlıktanda anladığınız gibi işimizi kolaylaştıracak ajax kütüphanelerinden neredeyse en ünlüsü olan jquery ile yapılmış örnekleri sizle paylaşmak istedim. bu örnekleri kullanmasınız bile jquery dili ve kullanışlılığı açısından size bir fikir verecektir.

*geçiş efektleri

innerfade

(tasarımlar üzerine uygulandığında iyi çalışan standart bir geçiş efekti)

flip

(flash'a benzeyen ama saf jquery ile yapılan geçiş efekti)

jquery circulate

(dairesel hareket kullanan bir animasyon)

3d tag cloud

(bu tag bulutunu örneğinde görüldüğü gibi; alan derinliği hissi yaratmak için fotoğraf ya da hacimsel nesneleri kullanız gerekmez)

smart 3d

(genel olarak web sitelerinde iyi çalışan 3d afiş örneği, aynı zamanda da mause tepkilerine cevap veriyor)

*yazı/metin efektleri

flying text with fade effect

(solarak uçan metin efekti)

fading color effect

(link (bağlantı) üzerinde göstermek için ince bir degrade katacak bir jquery efekti)

use the jquery ui to control the size of your text

(ihtiyaçlarınıza göre bir blok metnin yazı boyutunu ayarlamanızı sağlar)

jquery word counter

(html bir textarea içinde karakter sınırını belirlemenize ve görüntülemenize olanak saglar)

*slayt show efektleri

cloud carousel

(yansımaları ile doğal hareketlere sahip bir slayt show)

boxslider

(klasik slayt gösterisi, jquery ile birçok web sitelerinde uygulanması için ideal bir slayt)

galleria

(eğer özel olarak bir tasarım düşünüyorsanız, sitenizde her zaman kullanabileceğiniz güzel bir galeri)

piecemaker

(3d flash görüntü rotator galerisi)

*görüntü düzenlemek için hazırlananlar

jcrop

(photoshop'a benzer şekilde resim kesmeye yarıyor, bu kesinlikle faydalı bir jquery aracı)

jqzoom

(güzel bir jquery, resim üzerinde zoom (yakınlaştırma) yapmaya yarar)

jquery virtual tour

(360 derece gözlemler oluşturmak için büyük bir jquery efekti -panaroma görüntü aracı-)

interactive picture

(bu araç sayesinde görüntü üzerinde, resim içindeki belirli şeyler için açıklamalar yapabilirsiniz. bunun için ideal bir jquery)

apple-like retina effect

(ben uzun süre iphone kullandım ve en beğendiğim özelliklerinden birisi buydu, eğer sizde bu ürünlere aşina iseniz bu özelliği sitelerinizde de kullanabilirsiniz)

image blur

(ilk başta bulanık, siz üzerine geldiğinizde netlik kazanan resim efekti. benzersiz bir efekt gibi görünüyor)

ben ilk bakışta dikkatimi çeken ve ilgi duyacağınızı düşündüğüm jquery örneklerini sizin için ekledim, daha fazlası için bu linke tıklayınız.

bundan önceki yazım >>

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Mesainizin günde 5 dakikasını kendinize ayırarak forma girin

msaygilar — Mon, 28 Jul 2008 13:03:00 GMT

MSN.com'da 5 minute office workout

Bir süredir MSN, Amerika'da "5 Minute Office Workout" (Ofiste 5 dakikalık vücut geliştirme egzersizleri) adında açtığı yeni bir bölümü yayınlamaya başlamış.

Bob Harper adındaki Los Angeles'da yaşayan fitness uzmanı
pek de formda sayılmayan değişik insanlara ofislerinde baskınlar yaparak, ufak bir hatır sorma muhabbetinden sonra, onlara bulundukları ofis ortamında, kendilerine günde sadece 5 dakika ayırarak yapabilecekleri egzersizlerle nasıl forma girebileceklerini öğretiyor.

Bölümler halinde video film görüntüleri ile yayınlanan bu görüşmelerde, herkes kendi fiziğine uygun basit bir "workout" programı edinmiş oluyor, biz de bundan nasibimizi alma imkanı elde etmiş oluyoruz.

Bob'un tüm bu bölümleri arşivlediği "online" program, giderek artan bir ilgi görüyor, çünkü
sitede ayrıca etkileşimli bir diyet hazırlama sistemi, size özel egzersiz önerileri ve de "Bob'a sorularınızı gönderin, yanıtlasın" başlıklı bir bölüm var.

Size benzeyen insanların egzersiz baabında ne tür hareketler yapmasını gerektiğini video görüntüleri ile kendi gözünüzle görebilir ve normalde öğle yemeğinde yediğiniz şeyleri etkileşimli diyet programına girerek toplam kaç kalori geldiklerini hesaplayabilirsiniz.

Bob Harper'ın fitness koçluğu yaptığı referansları arasında Hollywood'un ünlü isimleri Gwyneth Paltrow, Ben Stiller, Ellen DeGeneres, Melissa Etheridge, Guy Ritchie, Dermot Mulroney, Selma Blair, Jeanne Tripplehorn, Catherine Keener, Carla Gugino, Laura Dern ve Jenny McCarthy de var. Harper aynı zamanda The Biggest Loser adlı TV dizisinde mavi takımın eğitmeni rolünde.

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

css öğreten uygulamalı kaynaklar

msaygilar — Mon, 28 Jul 2008 13:15:00 GMT

css-eğitici kaynaklar

merhabalar yine bir başka css yazımla sizlerle beraberiz, daha önce CSS Teknikleri hakkında yazmış olduğum buradaki ve şuaradaki yazılarımdan sonra css üzerine son bir dokunuş yapıp başlıklar halinde css 'i anlatmaktan çok bizlere noktasal bir uygulama gerektiğini anladım çünkü biliyorum ki bu saatten sonra hiç bir arkadaş saatlerini ayırarak css'i baştan sona tüm hatlarıyla öğrenemez ya da o kadar vakit harcamaya biraz çekinirler, oysa ihtiyacı olan noktlarda css denen kodlamayı nerde ve nasıl kullanacağını bilmesi onun için yeterli olacaktır. işte bu yüzden sizleri yeni kaynaklarla tanıştırmayı bir borç biliyorum.
öncelikle benim yeterli zamanım var ben oturur öğrenirim diyenlere işte CSS'e başlamak için bir kaynak. yok benim o kadar vaktim yok diyorsanız,
Bu başlıklara kısaca göz atın...
1 - Arkaplan ve css
2 - css ve listeler
3 - CSS pozisyon ve hizalama
4 - css stiller, tablolar ,formlar
5 - css ile daha fazlası için burayı tıklayın

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

hayranlık uyandıran 37 jQuery uygulaması

msaygilar — Mon, 28 Jul 2008 20:58:00 GMT

aşağıdaki adreste, bize her zaman lazım olacak jQuery uygulamaları ufak açıklamalar ve preview-demo şeklinde anlatılmış.
yetmemiş, yazar bir de internet üstünde çalışan ve her zaman işe yarayabilecek olan uygulamaları da listelemiş.

birkaç tanesi aşağıda:

slider gallery:
apple'ın web sitesindekine benzer, ürün kaydırma çubuğu, az ürününüz varsa ve internette bir mağazanız, bu sizin sitenizde çok şık durabilir.

slider gallery

demosu burada. script ana sayfası burada.

sliding image puzzler:
internet sitenizde, ziyaretçilerinizin oynayabileceği bir puzzle oyunu yaratın, parçaların sayısını belirleyeibliyorsunuz ve geçişlerdeki slide efekti de görmeye değer.

sliding image puzzler

demosu burada . script ana sayfası burada.

jQuery flash plug-in:
jQuery'yi daha önce Flash dosyası embed etmek için kullandınız mı? kullanmadıysanız ve istiyorsanız, gideceğiniz yer burası.

jQuery flash plug-in

script anasayfası burada.

writemaps:
bu site de, bir web servisi, jquery kullanarak sürükle-bırak şeklinde, kolayca sitemap hazırlayabiliyorsunuz. sitenin kullanımı çok kolay.

writemaps - online site haritası hazırlayın

script anasayfası burada.

listenin geri kalanı ise burada.

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

eyecon

msaygilar — Tue, 29 Jul 2008 06:33:00 GMT

romanya menşeili bir site olan eyecon sitesinde jquery kullanılarak yapılmış bazı uygulamalar var.

bunlardan birisi colorpicker. renk skalasının bir kaç değişik kullanım şekli gösterilmiş.

zoomimage ise bir tür galeri, bu galerinin de çeşitleri var. fotoğraf ve resimlerin etrafında neon ışık varmış gibi gösteriyor.

en güzeli de spacegallery. yine spacegallery de bir tür resim galerisi.

her çalışmayı download edebilir, dökümanlarına gözatabilirsiniz. bir de blog sayfaları var.

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımcıları İçin 30+ İlham Kaynağı Portföy Tasarımı

msaygilar — Mon, 06 Jul 2009 06:48:00 GMT

Ne kadar çok portföy sitesini incelerseniz size ilham kaynağı olabilecek alternatiflerin sayısını artırırsınız.

Tasarım sürecini hızlandırmak ve etkileyici bir portföy sitesi hazırlamak için aşağıdaki vitrine göz atabilirsiniz.

1. numan cebi

4. rainfall.ro

7. rin-wendy

9. ilovecolors

10. citrusbyte.com

11. cellarheat

12. drew wilson

13. joe lifrieri

14. phizz

15. raggededgedesign.com

16. chris spooner

17. daniel oliver

18. bcandullo

19. kevadamson.com

20. blogwhatdesign

21. andrew reff

22. 45royale

23. dale harris

24. ritchie linao

25. 84 colors

26. design hippy

27. helen guttridge

deviantart üzerindeki tasarımlar

28. coaxie

29. barbroute

30. captine

31. ledzuc

32. fedrick

kaynak: colorburned.com | tripwiremagazine.com

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter | delicious

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

tasarımınızı müşteriye sevdirmeniz için 13 hile

msaygilar — Tue, 29 Jul 2008 09:10:00 GMT

İdeal bir dünyada, müşterilerimiz tasarımcılar gibi düşünürdü. İdeal bir dünyada, müşterilerimiz pazarlama hakkında iyi bir birikime sahip olurdu. İdeal bir dünyada mantıklı düşünürler ve net olarak iletişim kurarlardı. Evet millet, ideal bir dünyada yaşamıyoruz. Ve, maalesef, müşterilerimiz tasarımcı gibi düşünmüyorlar. Genellikle markalaşmanın veya pazarlamanın basit yanlarını bilmiyorlar. Onlar tasarımcı değiller. Bize bu yüzden iş veriyorlar.

Şimdi, eğer bize güvenmelerini sağlayabilirsek. Evet, bu gerçekleşmeyecek. Peki, geriye ne kalıyor? Ben biliyorum! Onları kandırabiliriz. Evet, çıkış yolu bu işte.
Birkaç yılda, müşterilerimi “kandırmama” yardımcı olacak birkaç teknik geliştirdim. Bu numaralar, hepimizin yararına. Onları mutlu olmaları ve en iyi tasarımı seçmeleri için kandırıyorum. İkimiz de kazanmış oluyoruz.

1. Müşterinizin beklentilerini aşağı çekin. Tamam, müşteriye şunu demenizi önermiyorum: “Tasarımınız boktan olacak.” Ama ŞUNU öneriyorum ki, müşterilerinizi gerçekçi beklentiler çerçevesinde tutun. Dünyaları söz vermeyin. Ve eğer dünyaları istiyorlarsa... onlara ne yapabileceğiniz hakkında dürüst olmanız gerekiyor. Bir projeyi kaybetme pahasına da olsa. Müşterinin ne bekleyeceğini bilmesi için neler yapabileceğimi tekrarlarım.

2. Taslaklarınızı/fikirlerinizi sınırlayın. Müşterinize 4 logo taslağı vermek yerine 8 logo taslağı vermenin daha iyi olduğunu düşünmeniz doğaldır, ama gerçekten öyle mi? İlk başta, müşteriniz ona en iyi birkaç tasarımı vereceğinize güvenmektedir. Seçenekleri en iyi birkaça indirme görevini siz üstlenmelisiniz. Müşterinize her ne göstermeye karar verdiyseniz, onun en son tercih edeceğiniz tasarımı seçeceği beklentisi içinde olun, hep öyle yaparlar. İkinci olarak, çok fazla seçenek kafa karıştırıcıdır. Çok fazla olasılık, çok fazla stil, verilecek çok fazla karar vardır. Benim deneyimlerime göre 3 ila 5 arası seçenek en iyisidir. 3 ila 5 taslak, müşteriye durumu hala kontrol ederken iyi bir tercih yapacakları hissini vermek için yeterlidir.

3. Müşteriler, parlayan renkli şeyleri siyah beyaz şeylere tercih ederler. Müşterilerin "göz alıcılıktan" (renk, jel, gloss, gölgeler ve lens parlaması benzeri efektler) etkilenmeleri büyük talihsizlik, ama ne yazık ki etkileniyorlar. Eğer müşterinize sunacağınız iki taslağınız varsa ve biri MÜKEMMEL bir taslaksa -ilki elinizde kurşun kalemle skeçlediğiniz ve ikincisi vasatsa, ama cilalı, bol bol jel ve gölge efektleriyle dolu renkli bir tasarımsa, müşterinizin hangisini seçeceğini tahmin edebilir misiniz? Her seferinde renkli olanı seçeceklerdir. Kurşun kalemle skeçlenmiş tasarımın ne kadar şık duracağı hakkında en ufak bir fikirleri yoktur. Onlar sadece bir skeç görürler. Yani, eğer müşterinizi dikkate değer olan tasarıma yönlendirmek istiyorsanız, onu satın; renk ekleyin, jel efekti ekleyin, ne olursa. Seçmelerini istediğiniz tasarımın diğerlerinden daha öne çıktığına, daha iyi göründüğüne emin olun.

4. Kötü haberleri hemen, telefonla eğer mümkünse yüz yüze verin. Eğer kötü bir şey olursa saklamaya çalışmayın. Sadece hemen dürüst olun. Sizin gösterdiğiniz bir hata, onların bulduğu hatadan yirmi kat daha iyidir. Diyelim ki bir broşür tasarladınız ve bir kelimeyi yanlış yazdınız. Sessizce bulamamaları için dua etmeyin, çünkü bulurlar! Yüz tane insan onlara gösterecektir. Genellikle bir hata yaptığımda tasarımın ücretsiz olmasını teklif ederim. Bu, paralarını bankamda tutmaya ve basitçe hatalarımı üzerimden atmamı sağlar. Ayrıca, müşteriler e-posta yoluyla gerçekten terbiyesizleşebiliyorlar. Eğer bir hata yaptıysanız, onlara telefonla söyleyin. Her zaman eğer telefonda konuşuyorlarsa veya yüz yüzeyseniz çok daha iyi olacaklardır.

5. Değişiklik manyaklarına karşı hazırlıklı olun. Bazı müşteriler, siz tasarım aşamasındayken değişiklik yapmayı severler. Buna göz yummayın, bir şeyler söyleyin! Müşteri bir değişiklik istediğinde,–bazı şeyleri işaret etmeniz gerekir, bu kararın tasarım sürecini nasıl etkileyeceğini ve yeni beklentiler yaratacağını açıklayın. Şimdi, şu tarz değişikliklerden bahsetmiyorum, “Lütfen ilk cümleye ‘Kimden’ gibi bir kelime ekleyin.” Benim bahsettiğim, müşteri şöyle bir cümle kurduğunda, “Hey, web siteme bir fotoğraf galerisi eklemek istiyorum.” şöyle bir cevap vermeniz gerekiyor, "Tamam, ama ek iş yapacaksak belirlediğimiz bitirme tarihini kaçırırız. Ayrıca bu size x dolara daha mâl olacaktır.

6. Seçenekleri azaltın. Eğer, bütün bu numaralara rağmen müşterimi memnun etmek hala zorsa, tasarım kararlarını azaltmaya çalışırım. Örneğin, bir renk planında uzlaşabilir miyiz? Sadece bir yazı tipi seçmeye odaklanabilir miyiz? Kullanmamı istedikleri esas resimlere yoğunlaşabilir miyiz? Onları tasarımın dışında, bu kararları vermeye yönlendirebilirim. Yani, bir daha bir konsept üzerinde çalıştığım zaman, kullanılacak renkleri, yazı tiplerini ve kullanılacak resimleri biliyor olurum. İşte o zaman sadece yerleştirme işiyle uğraşırım.

7. Sadece karar veren kişiyle çalışın. Çoğunlukla karar veren bir insanla çalışıyor olmazsınız. Siz ve kararı veren kişi arasındaki dalkavukla çalışırsınız. Kararları veren kişiyle çalışmak için gerçekten savaş veririm. Yoksa bir işi iki kere yaparsınız -bir kez dalkavuk için, sonra tekrar karar veren için.

8. Gruplarla çalışırken; lider görevlendirin. Gruplarla çalışmak yedinci kurala oldukça benzerdir. Bazen grup liderin kim olduğunu bilmez bile. Yani, gruptaki farklı insanlardan farklı mesajlar alırsınız. Ben her gruptan benimle iletişim işini üstlenmesi için bir kişi seçmesini isterim. Bu yolla, lider kişi gruptaki beş yada daha fazla kişiden mesajları toplarken, her birinin farklı olduğunu fark ederler. Bob rengi mavi yap der. Susan beyaz yap der. Matt ise sarı yap der. Bu hiçbir şey ifade etmeyecektir.

9. Proje uzun sürüyor veya geç başlıyorsa müşteriyle temasa geçin. Eğer bir projede gerçekten hızlı ilerleyemiyorsam ya da projenin başlangıcı ertelendiyse müşterime bir e-posta atarım. Genelde, şöyle bir şey derim: “Hey Bob, şunu bilmeni istedim ki projede bocaladım ve Perşembe günü başlayacağım. Gecikme için üzgünüm. Bitirme tarihine yetişeceğiz, sorun yok.” Bu önleyici tedbirler alan yaklaşım, her zaman için şu soruyu cevaplamaktan iyidir: “Projem nasıl gidiyor?"

10. Müşterilerinizi eğitin. Biliyorum ki bu çok zor, ama yine de denemek zorundasınız. Bir müşteri benden tasarım için iyi olmayan bir şey istediğinde,–BENİM yolumun neden ONUN yolundan daha etkili olacağını anlatmaya çalışır. Gücendirmeden iletişim kurmak bazı taktikler gerektirir, kibar ve yavaş olun.

11. Müşterinizle kavga etmeyin. Bazen gurunuzu içinize atıp müşteriye ne istiyorsa vermeniz gerekebilir, acınacak halde bir tasarıma dönüşse de. Eğer kötü olacağını bildiğiniz bir yönde tasarım yapmanız istenmişse, onlara öğretmeye ve daha iyi tasarım seçenekleri sunmaya çalışın. Ama, günün sonunda, kafalarını bir şeye takmışlarsa (rezalet bir şey de olsa) bunu onlara verin.

12. Biraz ekstra verin. Eğer küçük bir ekstra iş yaparsanız (bunu onların bilmesini sağlayın), çok müteşekkir olacaklardır. Çok büyük bir iş olması gerekmez. Çok küçük bir şey olabilir. Ama anlaşılmış işin dışında bir şey olması gerekir. Müşteriye küçük bir not şu şekilde atılabilir: “Hey Bob, bana sağlamış olduğun logoda ufak bir sorun keşfettim. Bunu yok ettim ve temizledim. Bu projenin amacı değildi ama böyle pis bir logoyla etrafta gezmene izin veremem! Bu ek servis için bir ücret talep etmiyorum.”

13. Teşekkür ederim deyin. İnanılmaz. Tüm bilmem gereken, anaokulunda tek öğrendiğim şey. İnsanlar “teşekkür ederim” lafının gücü üzerine çalışmalar yaptılar. Huysuz müşteriler, şu sözlerle bir anda memnun müşteriye dönüştürülebilir: “Teşekkür ederim.” Yani, müşterilerine işleri için teşekkür edin. Bir ödeme yaptıklarında teşekkür edin. Size bir bira ısmarladıklarında teşekkür edin.

yazının orjinali

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

usta bir tasarımcı olmanın kuralları #2

msaygilar — Tue, 29 Jul 2008 16:08:00 GMT

Kural İki: Renklerini sınırla.
Usta bir tasarımcı olmanın yedi kuralının ikincisidir. Önce ilk kuralı okumak isteyebilirsiniz.

Yazı tiplerininizi sınırlamanın son kuralıymış gibi geliyor kulağa değil mi? Aynen! Renklerimizi, yazı tiplerimizle aynı nedenden sınırlamak istiyoruz. Tasarımda kullandığımız renkleri sınırlamak, tasarımımızın daha tutarlı olmasını sağlayacaktır. Yani, her şey uyumlu görünecektir. Aynı bir spor takımının üniforması veya bir şirketin markalaması gibi.

Yazı tipi seçiminde olduğu gibi, renkleri sınırlamak sadece bir rehberdir, kural değildir. Tasarımınızda bir hayli gökkuşağı gibi bir sürü renk kullanabilirsiniz, ve harika görünebilir. Ama bir renklendirme stratejisiyle başlamalı ve buna sonuna kadar uymalısınız. Renklerinizi tasarımınızla uyumlu bir şekilde kullanın.
Yeni başlayanlar için, önce renk değerlerinden bahsedelim. Bir rengin değeri, rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Bir sarı örneğin, epeyce aydınlıktır. Bir mor epeyce karanlıktır. Tabii ki, bir rengin değer yelpazesi vardır. Örneğin mor, çoğumuzun karanlıkla özdeşleştirerek düşündüğü, ama aynı zamanda oldukça açık değerde bir mor elde edebileceğiniz renktir. Aşağıda renklerin ve onların ilgili değerlerini gösteren bir örnek var. Onun yanında da tek bir renk için renk yelpazesini görebilirsiniz.

renk / değer / değer yelpazesi

Renk planımı seçerken uyguladığım bir kural: renk planınızda mutlaka renklerin değer yelpazesi olduğundan emin olun. Her tasarımda, kontrastı üretmek için biraz açık renge ve biraz karanlık renge ihtiyacınız olacak. Örneğin, tasarımınızın arkaplanı karanlık ise bir de açık renge ihtiyacınız olacak ki metin rahatça okunabilsin. Ya da tam tersi, açık renk bir arkaplanınız varsa metninizin okunabilmesi için açık bir renk gerekli olacak.

Ayrıca genellikle renk planımı seçerken 2 ila 5 renk seçerim. Seçenek sayısını arttırın ve tasarımda iyi sonuçlar elde edeceksiniz. Aşağıda bir araya getirdiğim bir renk planının örneği var.

Görebileceğiniz gibi bir karanlık renk, bir orta değerli renk ve bir de açık renk seçtim. Sağa doğru ise her seçtiğim renk için bir değer yelpazesi hazırladım. Projemde palet niyetine kullanacağım renkler, bu koleksiyondaki renkler olacak. Bir kere paletim hazır olduğunda, sadece bu paletteki renkleri kullanmak için elimden gelenin en iyisini yapmaya çalışacağım.

Tamam, şimdi kaç tane renk seçeceğimiz ve hangi değerlerde olmaları gerekiyor gibi teknik renk seçimi işlemlerini hallettiğimize göre, sırada ne var? Sırada ne olacağını söyleyeyim, en zor kısım; o 2 ila 5 rengin hangileri olması gerektiğine karar vermek! Şahsen bunu zaman zaman zor bir iş olarak görüyorum. Aşağıda renk planımı yaparken aldığım yardımlar ve teknikler var:

Sıcaklık yelpazesine uyun. Ya tüm sıcak renkleri ya da tüm soğuk renkleri seçin. Sıcak renkler kırmızılar, turuncular, sarılar, kahverengiler vb. Soğuk renkler ise maviler ve morlardır. Ben şahsen, yeşilleri ise nötr olarak görmekteyim. Eğer tüm renklerinizi bir sıcaklık aralığında seçerseniz, büyük ihtimalle uyumlu olacaklardır.

İlham almak için www.colorlovers.com gibi bir siteyi kullanın. Bu mükemmel sitenin tüm olayı renk planlarıyla ilgili. Sayfa sayfa renk planları bulabilirsiniz.

Bir gözünüz etrafta olsun. Her tarafınızda renk planları vardır. Markette torbanıza bakın, Starbucks’taki tablodaki renklere bakın, Doğa Ana’ya bakın! Hoşunuza giden bir renk dizisi gördüğünüz zaman, not alın ve bilgisayarınızda bunu tekrarlayıp tekrarlayamayacağınıza bir bakın.

Var olan şirket renklerine dikkat edin. Sık sık, bazı markaların renklerinden yararlanıyorum. Logolarına ve renk yelpazesine bakıyorum daha sonra bunu başlangıç noktam olarak alıyorum. Daha sonra belki bir veya iki renk ekleyebiliyorum.

Aşağıda oldukça kısıtlı renk yelpazesi kullanarak hazırladığım bitmiş bir tasarım var.

Gördüğünüz gibi, kısıtlı renk yelpazesi ve yazı tiplerimi sınırlamak her şeyi bir arada, düzenli gösteriyor.

Bu derslerin basit olduğunu biliyorum… ama bunlar tasarımın esaslarıdır. Yani, bilgileri biraz tazelemek kimseyi öldürmez. Beş kural daha kaldı. Geri kalan beş kuralın daha enteresan olacağına söz veriyorum. Zaman ayırdığınız için teşekkür ederim!

Bill

kaynak

Tarafımdan çevirilmiştir, yazı bana ait değildir.

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

usta bir tasarımcı olmanın kuralları #3

msaygilar — Thu, 31 Jul 2008 06:05:00 GMT

Bu yazıyı okumadan önce usta bir tasarımcı olmanın birinci ve ikinci kuralını okumak isteyebilirsiniz.
Tasarımınızdaki kontrastın iyi olması, renk seçimlerinizle doğrudan orantılıdır. Kontrast, tasarımınızdaki renklerin değerlerindeki farklılıklardır. Değer ise bir rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Hiç beyaz bir çalışma alanı üzerine birinin şöyle bir espri yaptığını duydunuz mu: “Hey, bu kar fırtınasındaki beyaz bir inek!”? Bu, sıfır kontrasta örnektir. Beyaz üzerinde beyaz sıfır kontrasttır. Hiçbir şey göremezsiniz.

Çok basit değil mi? Yani demek istediğim ne kadar aptalca bir yazı bu? Tasarladığım şeyin görünebilir olması gerektiğini açıklıyorum? Bu bir ders için çok gerizekalı bir konu değil mi?

Yanlış.

Çünkü maalesef, sürekli tasarımcıların kontrastla ilgili problemler yaşadığını görüyorum. Bir tek o da değil, kontrast, uygun bir şekilde kullanıldığında önemli bir araçtır.

Çok sık gördüğüm bir hata şu: Tasarımcılar kontrast yaratmak için değer değişikliği yerine renk değişikliği kullanıyorlar. Örneğin, orta değerde bir mavi, orta değerde bir kırmızının tam tepesinde durarak kontrast oluşturuyor. İkisi arasındaki farklılığı görebilirsiniz. Ama aynı değerden iki renk bir arada olduğu zaman (“vibrating”), mavi ve kırmızının buluştuğu çizgide, gözünüz ikisi arasında ileri geri gider, tereddütte kalır. Bu neredeyse yazının nabzı atıyormuş hissi verir.

Eğer amacınız gerçekten canlı bir şey yaratmaksa, bu tekniği kullanabilirsiniz. Ama gözlere fazla yüklenecektir ve bir çok insan bunu rahatsız edici bulacaktır. İşte aynı tasarımın daha fazla kontrast sahibi farklı renkler kullanılarak hazırlanmış hali:

Bu ikinci olan, açıkça gözlere daha az yükleniyor.
Tasarımınızın açık ve kolay okunur olup olmadığını anlamak için, her şeyi bir an için siyah beyaz yapabilirsiniz. Illustrator’da bunu tasarımı seçtikten sonra “Edit>Edit Colors>Convert to Grayscale” yönergesini izleyerek; Photoshop’ta ise tasarımınızı düzleştirdikten (flat) sonra, “Image>Adjustments>Desaturate” yönergesini izleyerek yapabilirsiniz.
Her iki şekilde de, bu testi yaptıktan sonra yaptığınız şeyi geri almanız gerekecek.
İşte aynı tasarımın, biri iyi kontrastla diğeri kötü kontrastla hazırlanmış hali. Ve her birinin altında ikisinin de siyah beyazda nasıl görüneceği var.

solda: iyi kontrast / sağda: kötü kontrast

Soldaki tasarımdaki yazıları okumanın ne kadar kolay olduğunu görebilirsiniz, özellikle siyah beyaza döndürüldüğü zaman. Sağ taraftaki tasarım ise şekilleri belirlemek için daha az kontrast ve daha çok renk farklılığı kullanmış.
Her zaman aldığım bir soru da şu: “Bir arkaplan filigranı (watermark) için hangi saydamlık (opacity) seviyesini kullanmalıyım?”. Bence iyi bir filigran arkaplanı %10-%15 saydamlıkta olmalıdır. Bir kez daha –bunların hepsinin amacı, tasarımınızdaki kontrastın sürekliliğini sağlamaktır. Eğer arkaplan açık renkse –o zaman filigran, uygun bir açıklıkta ve tam tersi olmalıdır. Aşağıda iyi ve kötü filigran için örnekler var:

arkaplandaki bu filigran %15 şeffaflığa ayarlandı. iyi kontrast!

arkaplandaki bu filigran %50 şeffaflığa ayarlandı. kötü kontrast!

Kontrastla ilgili olarak belirtmek istediğim diğer bir şey ise bir araç olarak kullanılabileceğidir. Eğer, örneğin, izleyicinizin dikkatini tasarımınzdaki önemli bir şeye çekmek istiyorsanız, bunu kontrastla başarabilirsiniz! Tüm tasarımı açık renkte tutabilir ve dikkat çekmek istediğiniz şeyi karartabilirsiniz. Aşağıda bu şekilde iyi tasarlanmış bir tanıtım sayfası var:

Bu, E-Harmony’nin web sitesindeki tur bölümünden bir sayfa. İnsanlara bir tur vermek isterlerken, gerçekten istedikleri insanların üye olmasını sağlamak. Yani, bu sayfaya baktığınızda, sayfadaki en büyük ve karanlık şey nedir? Bir kızın tıklanamayan resmi ve “Get Started Now/Hemen Başlayın” butonu. Açıkça, “Get Started Now/Hemen Başlayın” butonuna tıklamanızı istiyorlar. “Next Step/Sıradaki Adım” butonuna kıyasla, “Get Started Now/Hemen Başlayın” butonunun ne kadar büyük ve karanlık olduğuna bakın. “Next Step/Sıradaki Adım” butonu, turdaki birinin tura devam etmek için tıklaması gereken bir buton. Ama “Get Started Now/Hemen Başlayın” butonunun ne kadar çekici olduğunu fark ettiniz mi? Ve neden? Neden sayfadan üzerinize atlıyor? Basit: Kontrast!

Bu, tasarımda basit ama temelde kritik bir dersin sonu oluyor. Bunu okuduğunuz için teşekkür ederim. Dört basit kural daha var. Bunlar bittikten sonra söz veriyorum size nasıl çizileceğini öğreteceğim!

Bill

Kaynak

yazı tarafımdan çevrilmiştir, bana ait değildir.

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Übercart ile e-ticaret

msaygilar — Fri, 01 Aug 2008 09:35:00 GMT

drupal için ubercart

Drupal ile bir e ticaret sitesi yapmak farklı birçok modül kullanarak mümkün. Ancak bunlardan bir tanesi var ki gerçekten takdire şayan, Übercart . Peki nedir Übercart'ı muadillerinden ayıran?

Ürün yönetimi kolaylığı: Ürünlerinizi kolayca kategorize edebilir, kategorilerini değiştirebilir ve son derece basit bir kullanıma sahip ürün yönetimi panelinden ürün detaylarına bir tıkla ulaşabilirsiniz
Sipariş takibi kolaylığı: Standart olarak belirlenmiş statuler dışında kendi statunuzu oluşturabilir ve müşterinin siparişinin ne durumda olduğunu kolayca öğrenmesini sağlayabilirsiniz.
Ödeme seçeneği esnekliği/entegrasyonu: Hazır gelen birçok kredi kartı gateway'ini kullanabilir ya da kendi gatewayinizi tanımlayabilirsiniz. Kredi kartı ile ödemenin dışında PayPal, havale ya da çek ile gönderim seçeneklerini de checkout ekranında görüntülenmek üzere seçebilirsiniz. PayPal ile ödemelerde ise PayPal Developer sayfalarını kullanarak yaratacağınız api kodlarıyla hazırlık aşamasındaki sisteminizin testlerini kolayca yapabilirsiniz.
Müşteri takibi kolaylığı: Sipariş verme yetkilerini düzenledikten sonra, eğer üyelik olmadan siparişi aktifleştirdiyseniz, o kullanıcıya ait bilgiler sistemde kayıtlı tutulmaya devam eder.
Kargo hesap işlemleri esnekliği/kolaylığı : UPS'ten alacağınız bir API sayesinde kargo ücretlendirmelerini otomatik olarak hesaplatabilir, ya da posta koduna göre yeni aksiyonlar tanımlayarak her uzaklık için sabit+ağırlık başına ücretlendirmelerini de elle yapabilirsiniz.
Tam drupal entegrasyonu: Übercart, drupalin en güzel özelliklerini kullanarak, drupalle tam olarak sorunsuz çalışmaktadır.
Destek: Açık kaynak olmasına rağmen resmi sitesindeki forumlarından ulaşabileceğiniz geliştiricilere derdinizi anlatabilir ve çözüme yönelik cevaplar alabilirsiniz.

Buradan admin arayüzü için çeşitli screenshotlara ulaşabilir, şuradan, Übercart üzerine kurulu çeşitli e ticaret sitelerini görebilir, buradan ise hazır kurulmuş, standart ve deluxe (ücretsiz) Übercart download işlemlerini gerçekleştirebilirsiniz.

Bu yazı msaygilar tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage