Blok düzeni nasıl çalışır?

Düzene başlamadan önce, sitenin bitmiş psd düzeni, bir grafik düzenleyicide bloklar (katmanlar) halinde kesilir. Kesilmiş arka plan resimleri, her katmana ayrı ayrı eklenecek olan ayrı bir klasöre yerleştirilir:

Örneğin, Photoshop'ta oluşturulan bu web sitesi düzenini ele alalım. İlk olarak, bir metin düzenleyicide, bir div kullanarak, gelecekteki kaynağın yapısını belirledik ve her katmana kendi kimlik seçicisini atadık. Aşağıdaki yapı ortaya çıkıyor:

Daha sonra satır ile html'deki bitmiş site yapısına css dosyasını ekleyin. Ardından, diğer öğelere ve boyutlarına göre konumlandırarak her katmanın stil açıklamasını buna ekleriz.

Dilin teknik dokümantasyonundan tüm css özellikleri hakkında daha fazla bilgi edinebilirsiniz.

index.html örneğinin tam kodu:

style.css dosyasının içeriği:

gövde (arka plan: # f3f2f3; renk: # 000000; yazı tipi ailesi: Trebuchet MS, Arial, Times New Roman; yazı tipi boyutu: 12 piksel;) #container (arka plan: # 99CC99; kenar boşluğu: 30 piksel otomatik; genişlik: 900 piksel; yükseklik : 600 piksel;) #başlık (arka plan: # 66CCCC; yükseklik: 100 piksel; genişlik: 900 piksel;) #navigasyon (arka plan: # FF9999; genişlik: 900 piksel; yükseklik: 20 piksel;) #menu (arka plan: # 99CC99; kayan nokta: sol; genişlik: 200 piksel; yükseklik: 400 piksel;) #içerik (arka plan: # d2d0d2; kayan nokta: sağ; genişlik: 700 piksel; yükseklik: 400 piksel;) #clear (temiz: her ikisi;) #altbilgi (arka plan: # 0066FF; yükseklik: 80 piksel; genişlik: 900 piksel;)

Bir sitenin blok düzeni örneğimiz bir tarayıcı penceresinde şöyle görünür:

Tabii ki, bu örnek blok düzeninin nasıl çalıştığını göstermek için sadece görsel bir yardımcıdır. Asıl düzen, css'de bulunan arka plan resimleri ve logolar kullanılarak yapılır. Ayrıca, tüm tarayıcılarda ekranı optimize etmek için html ve css koduna hack'lerin dahil edilmesiyle.

Web'in genişliğini keşfederken, çoğu sitenin bir ızgara temelinde oluşturulduğunu muhtemelen fark edecektir. Bu tür sitelerdeki öğeler veya bloklar, sayfada birkaç yıl önce olduğu gibi düzensiz değil, belirli bir sırayla ve yapılandırılmıştır (bazen ilk bakışta algılanamaz). Bu siteler iyi dengelenmiştir ve temiz ve düzenli görünme eğilimindedir. Bu düzgünlük için çok kredi aittir Kafes tasarımın altında yatan ve kullanıcıya sitenin net, bozulmamış bir yapısını sağlayan .

Izgaralar, belirli aralıklarla yatay ve dikey çizgilerin basit kesişimlerini temsil etme eğilimindeyken, birçok tasarımcı bunları belirgin geometrik şekilleri ve görsel yolları süslemek ve vurgulamak için kullanır. Bu yolları ve şekilleri portföy sitelerinde, galerilerde, bloglarda ve diğer yaratıcı projelerde görebiliriz. Bu şaşırtıcı değildir, çünkü ağın bir dizi faydalı özelliği ve avantajı vardır, örneğin:

• Kullanıcılara rehberlik edecek görsel yollar oluşturma
• Çeşitli bileşenleri tutarlı bir bütün halinde birleştirmek
• sıralama bilgileri

Ve elbette, ağ, düz çizgilerin güzelliğini göstermek için mükemmeldir. Aşağıda, ızgaranın basit bir tasarımdan daha fazlası olduğu siteler hazırladık.

Çözüm

Daha önce de belirtildiği gibi, ızgara tasarımın ayrılmaz bir parçasıdır ve kaosu kolayca düzene dönüştürür ve web sitesi tasarımında başka hiçbir yerde olmadığı gibi bu fırsat gerçekten önemlidir. Çoğu kullanıcı bilgiyi hızlı ve kolay bir şekilde ister ve bunları net ve iyi organize edilmiş bir yapı ile sunmaktan daha iyi bir yol yoktur.

Hayır, bu, sitenin görünümünün doğrusal ve basit olması gerektiği anlamına gelmez. Bazen, renkler, resimler ve grafiklerle ustaca "seyreltilmiş" basit geometrik şekiller bile (düz tasarımı hatırlayın) gerçekten çekici olabilir. Ne düşünüyorsun? Bloklara bu kadar net bir bölünme çekici görünmüyor mu?

Merhaba Yoldaş Okuyucu!

İlk ekranda önemli bilgiler varsa ve kendinizi "Hakkımızda", "Hizmetler", "Fiyatlar" ve "İletişim" bölümleriyle sınırlayabiliyorsanız, neden 10 blokta açılış sayfalarına ihtiyacımız var? Cevap basit: için dikkat çekmek alıcı ve motive ürünle ilişkiye girmek ve bir ürünü satın almaya teşvik edin.

En çok kullanılan ziyaretçi katılım teknikleri bir ürünü satın alma sürecinde AIDA(İngilizce Dikkat-İlgi-Arzu-Eylem bölümünden) ve PMPHS(Acı-Daha Fazla Ağrı-Umut-Çözüm). Bu teknikler rehberliğinde açılış sayfasının mantıksal yapısı oluşturulur ve açılışta bulunacak bloklar belirlenir.

senin için topladım 20 açıklayıcı blok örneği belirli bir bilgilendirici işlevi yerine getiren Örnekler işinize yarayacaktır, ayrıca ayarlanmış iletişim açılış sayfanızın tasarımcısı ve tasarımcısı ile.

Bu yazıda, ilk yarı - 10 blok ile tanışacaksınız. Kalan 10 örnek için Ağustos ayındaki bir sonraki makaleyi bekleyin.

20 açılış sayfası bloğu - kendinizinkini seçin

1. Ürünün blok oluşturan parçaları, komple set;
2. Blok garantiler (üçlü);
3. Şirketinizin başarılarını / avantajlarını engelleyin;
4. Şirket çalışanları hakkında blok;
5. Şirketin hizmetleri / departmanları hakkında blok;
6. Ortaklar / müşteriler hakkında engelleme;
7. CTA (Harekete geçirici mesaj, harekete geçirici mesaj);
8. Müşterinin ürününüzün kullanımından kaynaklanan blok avantajları ("Neden biz?");
9. Hizmet sağlama süreci hakkında bloke (teslimat, işlem yapma yöntemi);
10. Blok Hesaplayıcı;
11. Özel bir teklif + zaman sınırlayıcı ile engelleyin;
12. Bir hediye + hediye alma koşulları ile bloke edin;
13. Şirketin bulunduğu yerin bir haritasıyla engelleyin ("Oraya nasıl gidilir");
14. İletişim bilgileriyle engelle;
15. Blok karşılaştırma tablosu;
16. Blok tanımlama "Kimin için?";
17. SSS'yi engelle.

* Blok numaralandırması yaklaşıktır - açılış sayfasındaki blokların sırası nişe bağlıdır. Aynı Yandex Metrik araçlarını (kaydırma haritası, ısı haritası) kullanarak blokların sırasını belirleyebilirsiniz, bu makale size yardımcı olacaktır.

Şirketinizin USP'si olan açılış sayfasının ziyaretçisi için önemli bilgileri içerir. Bu bilgilerin de rekabetçi olması arzu edilir. Nişe bağlı olarak, bu tür bilgiler şunlar olabilir: ürün fiyatı (1 parça başına 488 ruble'den), teslimat süresi (2 gün içinde teslimat), üretim yeri (doğrudan Almanya'dan). önceki makaleden daha fazlasını öğrenebilirsiniz.

İçin uygun: toptan konular; Alıcının ürünün (esas olarak ürünün) yararlarından yeterince haberdar olmadığı nişler.

Blok, alıcının "Neden bu kadar pahalı?" Sorusuna cevap olabilir. Ürünün özelliklerinin ayrıntılı açıklamalarını içeriyorsa. Bu, potansiyel müşterinin kafasında arzu nesnesinin daha net bir resmini oluşturmak içindir.

3. Ürünün blok bileşen parçaları, komple set

İçin uygun: karmaşık hizmetlerin açıklamaları; boş zaman etkinlikleri düzenlemek için nişler; mal paketinin açıklamaları.

Ürünün özellikleriyle ilgili blok, ürünü tamamen gösteriyorsa, bileşen parçalarıyla ilgili blok, ürünü (ürün veya hizmeti) terimlere ayrıştırır.

4. Blok garantileri (üçlü)

İçin uygun: herhangi bir açılış sayfası.

Çoğu zaman, ürünün maliyeti ile bloktan sonra bulunur. Hedef kitlenin itirazları temel alınarak oluşturulur ve bunları kapatır, hizmetin firmanızdaki faydalarını gösterir.

5. Başarılar/faydalar hakkında engelleme

İçin uygun: herhangi bir açılış sayfası; tanınmış bir şirketten markalı ürün; son derece rekabetçi bir niş içinde özellikle önemlidir.

Son derece rekabetçi bir niş içindeki işletmeler için özellikle önemlidir. Örneğin, aynı ürünü birden fazla şirket sunuyorsa, o zaman işlem için en uygun koşulları sağlayan ve şirketinin yaptığı işin yetkinliğini gösteren şirket (şirket hangi yıldan beri var, uygulanan proje sayısı, indirimler ve düzenli müşterilere verilen hediyeler, satış noktalarının sayısı vb.).

6. Şirket çalışanları hakkında engelleme

İçin uygun: hizmet sunumunda nişler

önemli olmadığı durumlarda kullanılması tavsiye edilir. NE alıcı alacak ve NASIL sonuca ulaşılacaktır.

7. Şirketin hizmetleri / departmanları hakkında blok

İçin uygun: karmaşık hizmetler konuları; tek bir uygulama alanında birden fazla ürün içeren açılış sayfaları.

8. Ortakları engelle

İçin uygun: herhangi bir açılış sayfası.

Ünlü müşterilerin logolarını kullanırsanız, blok ziyaretçinin güvenini arttırır.

İçin uygun: bilgi-iş; hizmet sektörü; sürecin önemli olduğu nişler (NASIL) sonucu almak.

Vakalara harika bir katkı - görsel gösteri OLDU / OLDU, ayrıca bilgi grafikleri ve istatistikli baskı ekranları.

Gösterinin önemli olduğu nişler:

Devam edecek…

Bugün açılış sayfası için ilk 10 bloğu tartıştık, yakın gelecekte daha fazlasını yayınlayacağız - bizi izlemeye devam edin!

Yeni yıl birçok yeni teknoloji ve trend getirdi, ancak büyük olasılıkla 2015'in sonunda kendini gösteren trendler hakim olacak. Daha fazla video, dikey desen çözümleri, malzemeden ilham alan fikirler ve şık slaytlar. Bu tekniklerin popülaritesinin artması beklenmektedir. Yeni kavramların çoğunun uygulanması o kadar zor değil. Aşağıda, 2016'da karşılaşacağımız 11 web tasarım trendi (ve birçok harika örnek site) bulunmaktadır. Bu tasarımların örnekleri, trend hakkında bir fikir edinmenize gerçekten yardımcı olacaktır.

Site, hareketli arka planlar, etkileşimli efektler ile çekici

Daha da güzel tipografi

Basitleştirilmiş arayüzler, güzel tipografi fikrinin yolunu açtı (aynı zamanda Google Fonts ve Adobe Typekit gibi kullanımı kolay web araçları - devasa çevrimiçi kitaplıklarla geliştirme yeteneklerinizi genişletiyor). "Hat" kavramındaki yazıların sadeliği (okunabilir ve anlaşılması kolay), diğer unsurlara yer açar. Bağlantı kurmaya çalışmanız gereken, okunabilir yazı tipi ve seçeneklerin eğlenceli yeniliğidir.

country tarzı bir restoran web sitesi: iyi seçilmiş renkler ve yazı tipleri ile ölçülü ve telaşsız, telaşsız (akılda kalıcı kontrastlar). Country tarzı (rustik tarz) doğaya yakınlık hissi verir. Kuşlarla ilişkilendirilen markalama, grafiksel olarak yansıtılır (illüstrasyonlar, arka plan çizimleri). Genel olarak, bu kimliğin bir parçasıdır - başarılı bir avın sembolü olarak "Hawk and Hen"

İllüstrasyonlar ve çizimler

Çizimli çizimler, tasarıma yaratıcı hayal gücü ve neşeli bir ruh hali getirir. Her tür site için çalışır (sadece çocuklar için değil). “Resimli” stilin popülaritesi, site tasarımındaki küçük öğelerin (simgeler vb.) tasarımına gelince de arttı.

Bu trendde özellikle sevindirici olan şey, illüstrasyonların siteye kişilik katmasıdır. Çizimler veya "kroki simgeleri" büyük olasılıkla elle çizilmiş, görsel ve genel bir his olduğundan, kullanıcılar için böyle bir site daha kişisel görünmektedir. Kullanıcı ile iletişimin verimliliğini artırmaya yönelik eğilimin gelişimi açısından, bu yolda daha yapılacak çok şey var.

Sitede güzel mikro yinelemeler ve çizimler var. ve tüm sitenin "Bebek tarzı" tasarımı bir oyuna dönüştürüyor

Daha önce, internette, adanmış olduğu tablo düzeni türü yaygındı. Ancak zamanla, bir site yapısı oluşturmaya yönelik bu yaklaşım modası geçmiş ve yerini bir blok düzeni almıştır.

Blok düzeni ve tablo düzeni arasındaki farklar

Tablo düzeni, sayfa içeriğinin etiketin içinde olduğunu ima ediyorsa

Blok düzeni, tablo düzeninin dezavantajlarından yoksundur - arama motorları tarafından daha iyi indekslenir, kodu o kadar geniş değildir ve bloklar

Son HTML belgesi bir bloklar topluluğudur.