bildirgec.org - etiketler: em

2009'un En Popüler Çevrimiçi Uygulamarı

angelsdemos — Sat, 23 Jan 2010 08:24:00 GMT

Son zamanlarda web uygulamarının sayısı oldukça arttı.Web tasarımcıları bu uygulamalar ile daha az zamanda daha çok iş yapmaya başladılar.Sosyal medya platformlarının artmasıyla beraber birçok web uygulaması hayata geçti.İşte web tasarımcıları için 2009 yılının en popüler web uygulamaları;

PX to EM

pixelleri emlere hızlı ve kolay biçimde dönüştürmenizi sağlar. Hesaplamaların bilmiyor yada yapmakta zorlanıyorsanız tam size göre bir uygulama.

Type Tester

Sitenize hangi fontları seçeceğinize karar veremiyorsanız tam size göre bir uygulama. Farklı fontları farklı biçim ve boyutlarda karşılaştıran kullanışlı bir araç.

Icon Finder

Icon Finder, çok kullanışlı ikon arama motorudur. Acil ikona ihtiyaç duyduğunuzda yada aradığınızı bulamadığınızda yardımınıza yetişecek bir uygulama.

Carbon Made

Carbon Made, kendi portfolyo oluşturabileceğiniz çevrimiçi ve hoş tasarımlı bir uygulamadır. Ücretsiz olarak en fazla 5 proje eklemenize izin veren uygulama 12$/aylık karşılık istediğiniz kadar proje eklemenize olanak veriyor.

Kuler

Kuler, adobe'nin yapmış olduğu bir renk aracıdır. Web sayfanız için farklı renk kombinasyonları üretmenizi sağlar. Bu renk paletlerini yayınlayabilir isterseniz diğer renk paletlerini inceleyerek oylayabilirsiniz.

Mail Chimp

Mail Chimp, e-posta pazarlama uygulamasıdır. E-posta listelerini yönetme, özelleştirme, html e-posta tasarımı, e-posta tasarlama ve analizi gibi birçok özelliği bulunmaktadır.

Twitter

2009'da patlama yapan sosyal medya platformu twitter, anlık olarak mesajlaşma uygulamasıdır. O an ne yaptığınızı kısa mesaj ile milyonlara duyurmanızı sağlar.

Crazy Egg

Crazy Egg, ücretsiz web istatistik servisidir. Görsel ve kullanışlı arabirimi ile site trafiğinizi çevrimiçi olarak izler.

Dropbox

Dosyalarınızı internet üzerinde paylaşmaya yarayan çok amaçlı bir çevrimiçi uygulama. Dosyalarınızı başkalarıyla paylaşabilir veya yedekleyebilirsiniz.

Ayrıca Bakınız ;

angelsdemos: Blog | Twitter | Email | RSS

Kaynak ; webdestigndev

ilgili yazılar

Bu yazı angelsdemos 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ımında sıkça karşılaşılan hatalar

basarozcan — Thu, 09 Apr 2009 10:06:00 GMT

Bir site tasarlamak sanıldığı kadar kolay bir iş değildir. Tasarımın güzelliği ayrıntılarda gizlidir ve o ayrıntılar web tasarımında o kadar fazladır ki bazen gözümüzden kaçan hatalar başkasının gözüne çok batabilir. Bu makalede sıkça yapılan hatalara dikkat çekilmiş ve tasarımda bize kolaylık sağlayacak öğelere değinilmiştir.

Tipografi
Web sayfalarında en çok göze hitap eden öğeler yazı karakterleridir. Uygun font’ların kullanılması tasarımlarımızı daha da çekici kılar. Fontların değişik işletim sistemlerindeki görünüşüne buradan bakabilirsiniz. Buradaki listede kullanıcı memnuniyetini en üst düzeye çıkarmak için “yazı tipi ailelerini” (font family) nasıl ayarlamanız gerektiğini bulabilirsiniz.

İkiden fazla Font Kullanmayın!
Tasarımlarda çok fazla sayıda font kullanmak sakıncalı olmaktadır. Eğer farklı font kullanmak istiyorsanız, başlıklar için ayrı düz yazılarınız için ayrı olmak üzere toplam 2 font belirleyin ve kullanın. Örneğin Başlıklar için “IMPACT” yazılar için “ARIAL” kullandıysanız, diğer sayfalarda da bu seçimleri kullanın. Ayrıca her font değişik alt, üst değerler ve satır yüksekliği kullanmaktadır. Bu değerleri karşılaştırmak için TypeTester programını kullanabilirsiniz.

KÖTÜ

İYİ

sans ile serif düşman gibidir!
Aslında bu bir kural değil ama yine de güzel gözükmediği için kural gibi söylenebilir. Sakın sans ailesine sahip bir font ile sans-serif ailesine sahip bir font’u beraber kullanmayın. Hoş bir görüntü oluşturmuyorlar.

Gördüğünüz gibi iki farklı aileye ait karakterler arasında büyük bir görünüş farklılığı bulunmakta. Eğer kullanmak isteğiniz varsa en azından A List Apart’taki makaleye bir göz atın.

Doğru yazı boyutunu seçin
CSS ile genelde yüzde, em ve piksel ile boyutlandırma kullanmaktayız. Kendi boyutlarınızı belirlemek için testler yapın ve ideali bulmaya çalışın. Referans olarak bazı ölçüler verilebilir. Örneğin paragraflar için %62.5 kullanılabilir. Fakat bunun yerine em ya da piksel kullanırsanız daha çok verim alabilirsiniz. Burada bilmeniz gereken 10 pikselin 1 em’e karşılık geldiğidir. Bunu hesaba katarsak 14px yani 1.4em paragraflar için yeterli bir boyuttur. Başlıklar içinse nispeten daha büyük ve fark edilebilecek boyutlar kullanmalısınız. 14 piksel paragrafınız varsa 18 piksel ile 24 piksel aralığında bir başlık kullanmak çok uygun olacaktır. Tabi bu değerlerin font’tan fonta değişmesi gerektiğini unutmayın.
KÖTÜ

İYİ

Satır Aralarına Dikkat!
Satır aralarındaki dev boşluklar sizin de dikkatinizi dağıtmıyor mu? Siteler Photoshop’ta tasarlanırken anti-alias özelliği açık olduğu için satır araları gözümüze daha güzel görünebilir. Ama tarayıcılarda böyle bir özellik bulunmadığından sayfamız daha farklı görünür. Eğer genelde 16 piksellik karakter kullanıyorsanız aralığınızda 16 piksel ile 18 piksel arasında olmalıdır ki göze daha hoş gelsin.

Renkler iç dünyanın aynasıdır!
Renkler çoğumuzun en çok dikkat ettiği şeydir. Ama bir kez daha hatırlatmakta yarar var. Arka planları ayarladıktan sonra yazı rengini deneyin ve kesinlikle yakın tonlar seçmeyin. Arka plan ve yazı renginiz olabildiğince birbirine zıt olsun ki yazılarınız dikkat çeksin. Eğer renkler konusunda referans alacak bir kaynak istiyorsanız Adobe Kuler, ColorCombos ve ColourLovers’ı kullanmaktan çekinmeyin.
İYİ

KÖTÜ

Aman hizaya dikkat!
Öğelerin sayfa içindeki hizalamalarına çok dikkat edin. Sayfanın göze hoş gelmesi için öğelerin bir blok gibi birbiriyle ilişkili görünmesi tasarımı çekici kılar. Eğer Amerika’yı yeniden keşfetmeye ne gerek var diyorsanız hizalama konusunda kullanabileceğiniz birkaç CSS Çatısı (Framework) mevcut. 960 Grid Sistemi bu konuda tavsiye edilebilir.

KÖTÜ

İYİ

Aralıklara dikkat edin!
Aralıklar yani CSS dilinde konuşmamız gerekirse border ile içerik arasındaki aralığı belirten padding değerini en uygun biçimde kullanmaya çalışın. İçeriğiniz ne birbirine çok yapışık ne de birbirinden çok fazla uzakta olsun.
KÖTÜ

İYİ

Elemanlar bir arada dursun
Sayfada bulunan ve birçok elemanı kapsayan blokları birbirinden çok uzakta tutmayın. Bu davranış içeriğin bir bütünmüş gibi görünmesini engeller. Oysa Ufak aralıklar ile yerleştirilen bloklar sayfayı bir arada tutarak ilgi çekici olur.
KÖTÜ

İYİ

Aralıklar konusunda tutarlı olun
Bu kadar çok aralıklardan konuştuktan sonra son konu ise sayfanın genel görünümündeki aralıkların önemi. Örneğin sayfanızı Header, Nav, içerik, sidebar ve footer olarak bölmelere ayırdıysanız, bu bölmeler arasındaki boşlukların hep sabit olmasını sağlayın. Aksi takdirde düzensiz sayfalarınızın hesapları ile boğuşmak zorunda kalabilirsiniz. Eğer 960GS gibi bir çatı kullanıyorsanız, sistem aralıkları yönetmek konusunda size yardımcı olacaktır.

Bu makale, “Common Mistakes in Web Design” ismiyle Marko tarafından http://blog.themeforest.net için yazılmıştır.

ilgili yazılar

Bu yazı basarozcan 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

Pixelleri EMlere Kolayca Dönüştürün

pinkfloyd — Tue, 06 Jan 2009 12:36:00 GMT

Pixelleri EMlere dönüştürmek istediğinizde her seferinde hesap makinesini çıkarmanız artık canınızı mı sıkmaya başladı? Bazen pixel kullanmak kolayımıza geliyor, çünkü o zaman herhangi bir değer hesaplamamız gerekmiyor. Ne şans ki pxtoem.com web sitesi bu işi gülünç denebilecek kadar kolay bir hale getiriyor, ve daha da önemlisi bu işlemi kolaylaştırıyor. Tek bilmeniz gereken sitenizin kullandığı temel yazı tipi boyutu.

Bu yazı pinkfloyd 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

Typechart - Yazı tipini beğen css kodunu al.

agurbuz — Sat, 06 Sep 2008 18:45:00 GMT

css ile kodlama yaparken yazı tipine bir türlü karar veremediğiniz olmuştur mutlaka. farklı farklı yazı tipleri denemiş yada nasıl göründüklerini hatırlamaya çalışmışızdır. işte size bu konuda zaman kazandıracak güzel bir web sitesi.

yazı tipleri ile oluşturulmuş örnekler özelliklerine (yazı tipi, büyüklük vb.) göre kodlandırılmış. beğendiğiniz yazı örneğinin sağ üst köşesinde bulunan "get css" butonuna basmanız yeterli ayrıca fontların mac ve windows görünümlerinede bakabiliyorsunuz.

kaynak

Bu yazı agurbuz 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ımda uzunluk birimlerinin dönüşümü

eminkeles — Sat, 21 Apr 2007 20:09:00 GMT

Css ile tasarım yaparken, kullanacağınız uzunluk birimlerinin değerlerinin birbiri arasında dönüşümünü veren site oldukça faydalı bir kaynak.

Bu yazı eminkeles 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

em hesaplayıcı

plush — Wed, 14 Jun 2006 15:34:00 GMT

css dosyalarımızı hazırlarken daha dinamik bir yapıya kavuşmak için em değeri kullanırız. işte bu em değerlerini hesaplamak için pixel'den em'ye dönüştürücü.

Bu yazı plush 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