23Jul
Kurşun kalem, uygulamanızın kullanıcı arabiriminin maketini çizmek için kullanabileceğiniz bir tel çerçeve aracıdır. Kalem hakkında en iyi şey, hafif, kullanımı kolay ve Firefox ile sıkı bir şekilde entegre olmasıdır. Bunun üzerine hepsi ücretsiz bir açık kaynak uygulaması!Makalenin sonunda Sana Brizzly benzeri bir tel kafes oluşturmak için Kurşun Kalemi nasıl kullanacağınız hakkında basit bir demo vereceğiz.
Neden tel kafesler oluşturuyoruz?
Tel kafes, sayfa düzeni fikirinin bir taslağıdır. Tel kafes, tasarımın kullanıcının ihtiyaç duyduğu şeylere uymasını sağlamak için bir sayfanın bilgi tasarımına odaklanır. Bir tel kafes genellikle içeriği, işlevsel ve seyir unsurlarını temsil etmek için farklı şekillerden( kutular, ovaller ve pırlanta gibi) oluşur. Bu şekiller yerleşimlerini sayfada görüntüler.
İlk önce bir sayfanın kaba eskizlerini oluşturmanın zaman kaybı gibi görünebilir. Kullanıcılarınızın sayfanızdaki önem öğesine odaklanabilmesi için tel çerçevesi önemlidir. Fantezi bir görsel öğe olmaksızın sayfanın kaba bir eskizinin oluşturulması, kullanıcının dikkatini sayfa bileşenlerinizin boyutlandırma, yerleşim düzeni ve yerleşimi gibi önemli öğelere kaydırır. Kullanıcı bir sayfanın önemli öğelerine odaklanmaya başladığında, istemcinin gerçekten ne istediğini ve yazılımdan neye ihtiyacı olduğunu daha iyi anlıyoruz. Tel çerçeve oluşturmak, siz ve kullanıcılarınızın etkili bir şekilde işbirliği yapmasına ve potansiyel tasarım problemini erken belirlemenize izin verir.
Kalem
'ya Başlarken Kalem'i Kalem'in eklentiler sayfasından indirin. Kurşun Kaldir'i yükledikten sonra, 'Araçlar' & gt;'Kalem Eskiz'.
Brizzly bunun gibi görünüyor. Facebook'unuzu ve Twitter'ınızı tek bir sayfada bir araya getiren çok hoş bir web uygulaması.
Bu, tel kafesin nihai sonucu. Bu tel çerçevedeki ana şekiller dikdörtgenler, metin kutuları ve sekmelerdir. Makalenin bir sonraki bölümünde, her bir şeklin nasıl oluşturulacağı konusunda basit bir örnek verilecektir.
Bir Dikdörtgen Oluşturma
Bir tel çerçeve şekli oluşturmanın ilk adımı, bir şekli 'Şekil Koleksiyonları' menüsünden tuval üzerine sürüklemektir.
Dikdörtgeni uygun bir genişliğe ve yüksekliğe yeniden boyutlandırın.
Kalemdeki herhangi bir şekli metin, kenarlık ve arka plan rengini özelleştirebiliriz. Dikdörtgeni sağ tıklatın ve Özellikler pencerelerini açmak için 'Özellikler' seçeneğini belirleyin. Bu, arka plan özellikleri ekranındadır. Dikdörtgen arka plan rengini beyaza ayarlayın( #FFFFFF).
'Kenarlık' sekmesini tıklayın ve kenarlık özelliklerini ayarlayın. Kenarlık rengini siyah( # 000000) olarak ayarlayın ve kenarlık ağırlığını 1 olarak değiştirin.
Metin özellikleri ekranı, metnin font türünü, boyutunu, stilini, ağırlığını, rengini, parlaklığını ve saydamlığını özelleştirmemize izin verir.
Sekmeler Oluşturma
Ev, taslak, resim sekmeleri birbirinin üzerine yığılmış üç sekmedir.Üç 'Sekme Paneli' dikdörtgene sürükleyin. Her bir sekmenin yan yana görünmesi için her sekmeyi yeniden boyutlandırın.
'Resimler' ve 'Taslak' sekmesinin yazı tipi rengini ayarlamak için metin özellikleri ekranını açın. Griye ayarlayın( # 989898).
Metin Oluşturma
Her bir menü oluşturmak için 'Metin' şeklini tuval üzerine sürükleyin. Metin özellik penceresine erişerek metin görünümünü ayarlayabiliriz.
Renk Değiştirme İçin Faydalı İpuçları
Renk, hoş bir tel kafes vermenin en önemli bölümlerinden biridir. Bir şeklin rengini değiştirmek için en kesin yol, rengin HTML kodunu belirlemektir. Belli bir rengin HTML kodunu bulmak zor olabilir. Belirli bir renk için doğru HTML kodunu aramak için w3cschools.com adresinden HTML renk cheat sayfası kullanabilirsiniz.
Ayrıca renkleri ekrandan seçmek ve Kalem içinde kullanmak için colorzilla kullanmak istiyoruz. Ekranda renk seçmek için Firefox'un sol alt köşesindeki göz damlası simgesini tıklayın. Ayrıca, göz damlası ikonuna çift tıklayarak ColorZilla renk seçicisini açabiliriz. Onaltılık kodunu kalem renkli HTML koduna yapıştırmanız yeterlidir.
Sonuç
Kalem kullanımı kolay tel çerçeveleme aracıdır. Kalem ile Firefox entegrasyonu, daha iyi tel kafes oluşturmak için diğer Firefox eklentilerini kullanmamızı mümkün kılmaktadır.
Bağlantıları
Download Pencil
İndirin Colorzilla
W3C HTML Renk Cheat Sheet