Wireframes kodlama için bir durum

Günden güne tasarımcı olarak çalışmak zahmetli olabilir. Neyse ki, alan genişledi ve böylece süreç daha basit hale geldi. Birçok ücretsiz araç ve kaynak var.

Wireframes, maket tasarlamak için zarafet getiriyor. Bir web sitesinin temel yapısı, renkleri ve geliştirmeleri kaldırıldı.

Tasarım konseptlerini sadece çıplak temeller ile görmek için kullanılırlar ve herhangi bir projeye yararlı bir bakış açısı sağlayabilirler.

Çoğu wireframes Adobe Photoshop ve Fireworks gibi yazılım paketlerinde yaratılır, ancak bazı web siteleri doğrudan tarayıcıda tel çerçeve görüntüleri oluşturmanızı sağlar.

Bu gönderide, HTML ve CSS'de temel bir tel çerçeve görüntüsünü kodlamaya devam edeceğiz ve bunun yaratıcı sürece nasıl fayda sağlayabileceğini göreceğiz.

Neden Rahatsız?

Neden bir web sitesinin yapısını çizmek için zaman harcıyorsunuz? Bazı durumlarda, gereksiz olabilir, ancak bir ruteye sıkışmış olduğunuzda veya büyük resmi görmeye çalışırken yardımcı olabilir.

Hem tasarımcılara hem de müşterilere fayda sağlayabilir. Ücretli çalışmada, müşteriyi memnun etmekle sorumlusunuz. Yakında tasarlanan web sitesinin temel yapısını göstermek müşterilere tüm süreç boyunca rahatlama ve kontrol hissi verebilir.

Ancak tasarım çok basit veya basit bir yapıya sahipse, bir tel kafes oluşturmak buna değmeyebilir; Tüm şeyi Photoshop'ta, düğmeler ve renklerle alay etmek aynı derecede hızlı olabilir.

Hangi adımların atılacağına karar vermek zaman ve eleştirel düşünme gerektirir. Sonuçta, bir tel kafes sadece bir araçtır. Birçok web tasarımcıları tarafından çok az ama anlaşılır bir şekilde şaşırtıcı derecede kullanışlı.

Kodda Wireframes Prototipleme

Yıllar boyunca, Adobe tasarım yazılımı, tel kafes oluşturma için önde gelen bir paket olmuştur, ancak web önemli bir değişim geçirmiştir ve hala gelişmektedir.

Kodlama standartlarının yükselişi ve artış HTML5 belgeleri Ortak bir ağa doğru büyük adımlar. Artık, HTML ve CSS'de temel bir tel kafesin kodlanması, Fireworks uygulamasında işi ele almaktan daha fazla iş değildir.

Wireframes ile, bir proje başlığına birden çok açıdan saldırabilirsiniz. Hatta CSS2 ve CSS3 teknikleri ve tarayıcıları ile uyumluluğu test edebilirsiniz. Başlangıçta işlerin karmaşık olması gerekmez; Bir tel kafes sadece kodlamaya başlamak için sağlam bir temel olarak hizmet eder.

İçerik paylaşımı da bir tel kafes ile daha kolay hale gelir. İhtiyacınız olan tüm dosyaları herhangi bir web sunucusunda barındırabilir ve bir demo dizini oluşturabilir ve projenizin müşterileri ve gözetmenlerine canlı güncellemeleri iletebilirsiniz. Belgenin CSS'sinde kenar boşluklara ve genişliklere hızlı tweaks gibi değişiklikler yapmak da basittir.

Uzun Mesafe için Standartlaştırmak Kodu

Tel kafesler geliştirme sürecinde zamandan tasarruf sağlar. Temel öğelerinizin CSS stilleri önceden yazılmışsa, geri kalanı sadece dolgu malzemesidir (önemli dolgu maddesi, aklınız).

Doğru HTML belge türü ve dizin yapısı ile düzgün bir şekilde başlayın. Belge türleri birbirinden çok farklı değil. Onları hakkında okuyabilirsiniz W3C Özellikleri sayfası . Eski World Wide Web modelinde önemli bir şey yok, ancak HTML5 kapsamlı ve web sitenizin büyümesine izin veriyor.

Zaten mümkün olduğunca çok işletim sistemi ve tarayıcı üzerinde uyumluluğu test etmelisiniz ve tel kafes prototipleme aşaması bunu yapmak için mükemmel bir zamandır çünkü zaten düzeni düzenlemeye odaklanmış durumdasınız.

Bu ayrıca, mobil uyumlu bir şablon üzerinde çalışmak için iyi bir zamandır. Yapı değiştikçe, fikirleri birleştirebilmeli ve belgenin kodunu değiştirebilmelisiniz. Gelişim daha kolay hale gelir, çünkü mobil ve özel stillerinizi karıştırmak için daha az kod vardır.

Belge Tel Çerçevesinin Yapısından Başlamak

Başlamak için en iyi yol boş bir yazı tahtasıdır, çünkü size en yaratıcı olanı sunar. Kodda yer alan belirgin unsurlar (diğer herhangi bir web belgesinde olduğu gibi) html , head ve body .

Bu iskelet. Tel çerçevenin iyi görünmesi için birkaç öğeye ihtiyacınız olacak. div (or division) is notable. (veya bölme) dikkate değerdir. Bu, sayfanın belirli alanlarını, örneğin logo veya arama kutusu gibi kutulara ayırmak için kullanılan öğedir.

Divs HTML5 tel kafes prototiplerinin yapı taşlarıdır. Her şey ve her şey bir div ve öğelere sınıfları ve kimlikleri uyguladığınızda stil bir esinti. Ana kodunuzun çoğu tarafından bölünecek divs çünkü bunlar temel blok elemanlarıdır.

Yeni HTML5 özellikleriyle, bir öğe denir nav tanıtıldı. Bu, web sitenizin ana gezinme alanını oluşturmak ve tanımlamak için sırasız bir liste ve bazı CSS özellikleriyle birleştirilebilir. Aşağıda, nasıl yapılandırabileceğinize dair basit bir örnek nav :

İle çalışan header ve footer Elementler

Yukarıdaki örnekte kullandığım bir div kimliğine sahip header yön navigasyonumu ayırmak için Bu kesinlikle kabul edilebilir ve yukarıdaki kodda hiçbir şey yanlıştır. HTML5 bize başka seçenekler de sunuyor.

header element in the new HTML5 specs allows you to further define your structure, which is useful mostly for web page crawlers and screen readers, which separate a “heading” portion of the content. Yeni HTML5 özelliklerinde yer alan unsur, daha çok web sayfası tarayıcıları ve ekran okuyucuları için yararlı olan ve içeriğin “başlık” kısmını ayıran yapınızı daha fazla tanımlamanıza olanak tanır. Kullanıcılarınız için herhangi bir fark yaratmamalı ve kodunuzun gönderilmesini engelliyor ve ne hakkında konuştuğunuzu gerçekten anladığınızı gösteriyor.

Eklenen bir başka ilginç öğe footer . Aynı fikir: bu öğeyi bir div Altbilgi içeriğinizi ayırmak için Genel olarak, altbilgiler yolda kalmaz ve web sitesi veya şirket hakkında temel bilgileri içerir.

Altbilgiye bağlantılar ekleyebilir ve nav Bazılarını tanımlamak için öğe, ancak bu tavsiye edilmez. nav element specifies the main navigation area, so adding it to the footer or anywhere else would be redundant. öğe ana gezinme alanını belirtir, bu nedenle altbilgiye veya başka herhangi bir yere eklenmesi gereksiz olur.

Bu senaryoda, kullanarak footer öğenin ve navigasyon bağlantılarının sırasız liste olarak ayrılması en iyisidir. Bir dizi sütun içeren sütunlandırılmış bir altbilgi kullanabilirsiniz. Bunlar ayrı olabilir div yan yana görüntülenen öğeler, hepsi ana altbilgiye eklenir.

Wireframes şekillendirme için CSS teknikleri

HTML'yi anlar ve bir süredir web ile çalışmışsanız, muhtemelen bazı temel CSS'leri bilirsiniz. CSS3'ün yeni özelliklerinin birçoğu, metne süslü yuvarlak köşeler ve gölgeler eklemek içindir.

CSS stilinin önemli olmadığını öne sürmek istemiyorum, ancak nihayetinde web sitenizin yapısını oluşturan temel düzen ve konumlandırmadır. CSS ile genişlik, kenar boşluğu ve boşlukları tanımlarsınız. Bunlar çoğu web öğesinin temel özellikleridir ve gerçekten olağanüstü bir tel kafes oluşturmanın son adımıdır.

CSS3'ün yeni özellikleri ve seçicileriyle merak uyandırdıysanız, Web Tasarımcısı Deposu'nu inceleyin. geliştirmelerin toplanması . Web'in tümünde CSS3'teki yeni özellikler hakkında kılavuzlar içerir.

Ekleme clearfix Stillere

Clearfix tekniğine aşina değilseniz, biraz araştırma . Ekleyebileceğiniz popüler bir sınıftır. div İki veya daha fazla kayan blok tutan kapsayıcı.

Clearfix'i hiç duymamışsanız, kafa karıştırıcı gibi görünebilir, ancak kavram basittir. Bir kap düşünün div iki tane var div İçerde, ikisi de sola süzüldü. Varsayılan olarak, çoğu tarayıcı, iki sütunu doğrudan birbirine değecek şekilde ve div sayfanın hangi sütunun en uzun olduğuna uyacak şekilde genişler.

Ekleyerek bir clearfix konteynerinize sınıf, her iki sütun da kabın içine sığacak div , her iki öğeye de uyacak kadar genişler. Bu, özellikle iki sütunlu düzenler (yani ana içerik ve kenar çubuğu) ile tel kafes prototipinde birçok sorunu çözer. Bu yöntem ayrıca üç ve hatta dört sütunlu düzenler için de çalışacaktır, her sütunun yalnızca daha küçük bir alana sığması yeterli olacaktır.

CSS Gösterme: Stilleri Harici Tutmak

CSS yerleşimi ile ne yapılmalı başka önemli bir karardır. Profesyonel web tasarımcıları ve geliştiricileri, bağımsız bir şekilde kalmayı öneriyor .css HTML kodunuzdan ayrı dosya.

Bu şekilde, yapı bir belgede ve düzen ve tasarım başka bir yapıda. Her ikisi de tel kafesler için aynı derecede önemlidir, ancak farklı görevleri yerine getirirler.

Tüm HTML kodunuz kesinlikle yapısaldır. Paragrafların içindeki bağlantıları kapsayıcıya yerleştirebilirsiniz. div diğer kapların içinde, vb. Styling, paragrafların ve bağlantıların boyutunu, aralığını, kenar boşluklarını ve harflerini kontrol eder ve tel kafes, kapsayıcıların genişliğini ve sayfadaki yerleşimlerini tanımlar.

Sayfa öğeleri daha fazla örnek sağlar. Sen kodlarsın div içerik ve kenar çubukları için kapsayıcılar, ancak bunları CSS kullanarak stil ve konumlandırırsınız. Bir tasarımcı için, içerik ve stilin nasıl ayrılacağını anlamak, tel kafesleri yönetmek için çok önemlidir.

Dinamik Sayfa Öğesi Yer Tutucularını Uygulayın

Fantezi jQuery etkileri ve Ajax-ified web elemanları tüm öfke gibi görünüyor. Eğilimler büyür ve neredeyse tüm popüler web siteleri bazı dinamik içerik barındırır. Düşünmek önemlidir. Tasarımı tamamlarlarsa, tel kafesinizdeki bloklara neden yer verilmez?

Dinamik bir oturum açma kutusu için tüm bir arka uç sistemi geliştirmek pratik olmayabilir, ancak ihtiyacınız olan JavaScript kitaplıklarına dikkat etmek harika bir başlangıçtır. Ayrıca, bu kutuyu oluşturan stillere kod yazabilir ve daha sonra renk ve ayrıntı eklediğinizde işleri bir yere koyabilirsiniz.

Bu temalar birçok arayüz elemanına uygulanabilir. Dinamik bir haber veya Twitter-besleme kutusu uygulamak için Google’a benzer arama önerilerini kullanabilir veya kodunuzdaki notları bırakabilirsiniz. Bu işlemlerden biri, tel kafesinizi dinamik hale getirecek ve dinamik içerik yerine katı halli bir nesneyi temsil etmenin zarif bir yolunu sağlayacaktır. . Prototipleme aşamasında, her şeye ihtiyacın var.

Ortak Tel Çerçeve Geliştirme Hataları

Bir web sitesinin temel yapısını henüz kodlamaya başladığınızda yanlış gitmek zor, ancak bazı detayları aklınızda bulundurun.

Bir tel kafesin amacının çok fazla detayı olmayan bir çerçeve sunmak olduğunu unutmayın. Sayfa öğelerini planlamanın ilk aşamalarında yararlıdır; Web sitenize derinlemesine bakabilir ve büyük resmi görebilirsiniz.

İşleri basit ve sıralı tutun. Buna bakmak yaygın bir hatadır ve teslim tarihlerini karşılama yeteneğinizi sakat bırakacaktır. Bir tel kafesin mükemmele yakın bir yerde olması gerekmez; Web sitesinin kaba bir taslak olması gerekiyordu. Kesinlikle bir HTML ve CSS tel çerçeve bile yalnızca sayfa öğesi anahatlarından oluşmalıdır.

Ana hedeflerinize odaklanarak sınırlardan kaçının. İlk başta neden bir tel kafes ile başladığınızı hatırlayın!

Wireframes ayrıca tasarım sürecini besleyen birçok sorunu çözebilir. HTML ve CSS'de bir prototip kodlamak, büyük veya küçük bir web projesine başlamanın en iyi yoludur. Fikirlerinize şekil vermenin basit ve etkili bir yolu.

bir makaleler ton Web üzerinde tel örgü işlemi ile ilgilidir. Her şeyin kodlama ve geliştirme yönlerini ele aldım, ama tel örgü hakkında daha fazla şey öğrenmek için okumaya devam et. Tasarım ipuçları orada var; Sadece, onları bulmak zorundasın!

Bu yazı sadece Web Tasarımcısı Deposu için yazılmıştır. Jake Rocheleau , tutkulu bir web tasarımcısı ve sosyal medya meraklısı. Jake, tasarım dünyasındaki en yeni dijital İnternet trendleri ve ağ iletişimi hakkında okumayı ve yazmayı çok seviyor. Onu Twitter'da kontrol et @jakerocheleau Onun çalışmaları hakkında daha fazla bilgi için.

Tel kafes işlemiyle ilgili deneyimleriniz neler? İlk olarak veya başka bir yazılım türünde kod çalışıyor musunuz? İlk olarak kodda prototip oluşturmanın bazı faydaları olduğunu düşünüyorsunuz?