Web Sitesi Tasarımı Temelleri – Düzenler ve Izgaralar

In: Search Optimization


Web Sitesi Tasarımı Temelleri – Izgara düzeninizi bir arada tutmaya yardımcı olan bir çizgi yapısıdır. Öğeler arasında hiyerarşi oluşturmaya yardımcı olduğu ve daha iyi anlama ve işlemeye olanak sağladığı için, herhangi bir iyi projenin yapısal planıdır.

Web Sitesi Tasarımı Temelleri

Nihai projede kılavuz çizgilerini görmesek de (genellikle), önceden belirlenmiş kuralların dışına çıkan küçük bir değişiklik bile nihai sonucu nasıl algıladığımız üzerinde önemli bir etkiye sahip olacaktır. İyi bir proje ile harika bir proje arasındaki bilinçaltı farkıdır.

Bu nedenle şebekeyi erkenden ayarlamak çok önemlidir. proje. Başlangıca yakın kurallar ve yönergeler oluşturmak, daha fazla tutarlılık ve daha hızlı dağıtıma olanak tanır

NASIL İLE OLUŞTURMAK A KAFES?

İlk tasarımlarınızda, proje için doğru ızgarayı seçmeye çalışmadan önce gerekli tüm ekranları ve içerik türlerini oluşturmaya çalışın. Tüm olası senaryoları kapsadığından emin olun. Sonunda oluşturacağınız düzen türlerini görmek ve uygun bir ızgara seçmek için tel kafesleri de kullanabilirsiniz.

Web Tasarım Temelleri - Izgara Düzenleri 2

Izgarayı test etmeye başladığınızda, bunu birkaç ekran türüne karşı yapın – fotoğraflar, veri tabloları, formlar veya büyük metin blokları ile. Bu, grafik ve grafik ağırlıklı panolardan basit, tek sütunlu blog gönderilerine kadar olası her senaryoya hazır olmanıza yardımcı olacaktır.

Projeniz karmaşık olacaksa, daha fazla sayıda olasılığı barındırmak için daha önemli sayıda sütun (16’ya kadar) kullanmayı deneyebilirsiniz.

TÜRLER NIN-NİN IZGARALAR

YATAY (TANIMLAMA YATAY YERLEŞİM)

Web Tasarım Temelleri - Izgara Düzenleri 3

Yatay bir ızgara, dikey sütunlardan ve aralarında oluklar adı verilen kenar boşluklarından oluşur. Her ikisi de önceden ayarlanmış veya esnek genişliklere sahip olabilir. Arayüzün daha iyi yatay hizalanmasını sağlarlar ve bir düzenin temelidirler. Yukarıda, dokuz sütunlu örnek bir ızgara görebilirsiniz.

Dikey çizgiler gördüğümüzde “yatay” adı yanıltıcı olabilir, ancak tasarım öğelerini yatay olarak hizalamak için nasıl kullandığımızdan türetilmiştir.

DİKEY (TANIMLAMA DİKEY YERLEŞİM)

Dikey ızgara daha az yaygındır. Öğelerin, bölümlerin ve dikey boşlukların yüksekliklerini ayarlamaya yardımcı olabilir. Bloglarda veya haber portallarında ızgara içerikli bir sunumla en iyi şekilde çalışabilir. İçeriği dikey olarak hizalayan yatay çizgilerden oluşur.

Bu tür bir ızgaranın ana amacı, bölümlerin taranmasını ve hızlı bir şekilde ayırt edilmesini kolaylaştırmak, böylece kullanıcının büyük miktarda içeriğe göz atmasını daha hızlı ve daha rahat hale getirmektir.

Web Tasarım Temelleri - Izgara Düzenleri 4

SIVI VS SABİT KAFES

SIVI KAFES

sıvı ızgarası bir dış kenar boşluğu ve oluk genişliklerini varsayar ve sütun genişliklerini ekrana uyacak şekilde ayarlar. Bu, sütunların genişliğe sahip olmasını sağlar ve oluklar hizalamayı bir arada tutan şeydir. Birçok cihaz ve ekran boyutu için daha kolay ayarlamalara izin verdiği için en yaygın ızgara türlerinden biridir.

İşte iki örnek bir 4 sütun ızgarası 16 noktalı bir kenar boşluğu ve 8 noktalı bir oluk ile. Sütun genişliklerini yalnızca tüm ekran boyutunu dolduracak şekilde ayarlıyoruz.

Web Tasarım Temelleri - Izgara Düzenleri 5

SABİT KAFES

sabit ızgara hem sütunlar hem de oluk genişlikleri için ayarlanmış bir değerle çalışır. Ekranımız ızgaradan daha genişse, yanlarda boşluk kalır. İçeriği 1400 pikselin üzerine çıkarmak zaten okunabilirliği azaltacağından, bu tür ızgara web siteleri ve haber portalları için oldukça iyi çalışır. Bu durumda, kenarları boş bırakmak daha iyidir.

İşte iki örnek bir 2 sütunlu sabit ızgara 16 kenar boşluğu ve 8 oluk ile Sütun genişliği 36 olarak ayarlanmıştır. Dar bir ekranda gördüğünüz gibi tüm genişliği doldurabilirken, daha geniş bir ekranda kenarlarda boşluk bırakacaktır.

Web Tasarım Temelleri - Izgara Düzenleri 6

TEMEL DEĞER

Bir ızgara oluşturmak her zaman temel değerini seçerek başlamalıdır. Diğer tüm değerleri ayarlamak için kullandığımız en küçük sayıdır. Genel olarak, tüm grid değerlerimiz bu taban numarasına bölünebilmelidir.

10 PUAN KAFES

On numara en popüler taban sayılarından biridir. Bunun ana nedeni, diğer büyük sayıları 10’a bölmenin oldukça kolay olmasıdır. Bu yüzden popülerliğinin nedeni çoğunlukla pratiklik ve kolaylıktır – matematik yapmanıza gerek yoktur. On aynı zamanda çoğu tasarım uygulamasında “dürtme değeri”dir – SHIFT tuşunu basılı tutarken nesneleri hareket ettirdiğiniz değerdir. Çoğu durumda, bu varsayılan değeri değiştirmek ek bir eklenti gerektirir.

Web Sitesi Tasarımı Temelleri – Düzenler ve Izgaralar 3

Bu kullanım kolaylığı ve 10’un varsayılan dürtme olması nedeniyle, ilk tasarımlarınıza 10 noktalı ızgarayı kullanarak başlamak iyidir. Daha sonra ince ayar yapabileceğiniz çok basit, uygulaması kolay bir ızgara sisteminin temelini oluşturmak için bunu iki ile çarpın.

Web Tasarım Temelleri - Izgara Düzenleri 8

10 PUAN SIVI KAFES

10 nokta taban çizgisi kullanarak akıcı bir ızgara oluşturmak, herhangi bir proje için en iyi başlangıç ​​noktalarından biridir. On’un kendisi muhtemelen oluk olarak iyi çalışmak için çok küçük bir sayı olduğundan (okunabilirlik için), oluk için bunun iki katı ve dış kenar boşlukları için dört katı ile gidiyoruz. Altı sütun varsayarsak, aşağıdaki örneği elde ederiz.

Web Tasarım Temelleri - Izgara Düzenleri 9

X değeri, ekranımızın kenar boşlukları ve oluk sayılarına eşit bölünmesinden gelir. Altı sütun ve 390p genişliği ile 35 pikseldir ve ekranımız genişledikçe büyüyecektir.

Web Tasarım Temelleri - Izgara Düzenleri 10

8 NOKTALAR

8 noktalı ızgaralarda genel kural, on noktalı ızgara ile aynıdır. Temel değeriniz olarak sekizi seçersiniz ve ardından bunu iki ile çarparsınız veya – daha fazla esneklik için – ek boyutlar için sayılarınıza 8 eklersiniz.

Web Tasarım Temelleri - Izgara Düzenleri 11

8 noktalı ızgara, şu anda modern UI tasarımında en popüler ızgara türüdür. Biraz ekstra çaba gerektiriyor, ancak denemeye değer. Ana faydası, boşluk bırakma konusunda size daha fazla esneklik sağlamasıdır – aynı alana daha karmaşık (ve daha küçük) öğeleri sığdırabilir ve bunların hepsini ızgaraya sığdırabilirsiniz.

Birçok popüler ekran çözünürlüğü de 8’e bölünebilir, bu da mobil cihazlar için tasarım yaparken yardımcı olabilir.

Web Tasarım Temelleri - Izgara Düzenleri 12

Yukarıdaki örnekte de görebileceğiniz gibi, aynı genişlikte daha fazla eleman yerleştirebiliriz.

8 PUAN SIVI KAFES

8 noktalı bir değişken ızgara oluşturmak, temel sayıyı iki ile çarparak başlamalıdır. Sekiz, nesneleri ayırmak için doğru seçim olamayacak kadar küçüktür. Bir bloğun nerede bitip diğerinin nerede başladığını kolayca ayırt edemediğiniz için, bunların birbirine çok yakın olması okunabilirliği olumsuz etkiler – sıvı sütunu ile oluğu 16’ya ve dış kenar boşluklarını 32’ye (veya 24) ayarlayarak başlayabileceğinizi bilerek Genişlik.

Temel sayıyı her zaman iki ile çarpıyorsak, neden ilk etapta 16’ya ayarlamayalım? Çift-tabanlı sayı genel yerleşim için iyi çalışsa da, daha küçük olan sekiz değeri, öğeleri tek tek bileşenler içinde konumlandırırken (bir düğme üzerindeki metin gibi) kullanışlı olabilir.

Web Tasarım Temelleri - Izgara Düzenleri 13

X değeri, kenar boşluklarımızı ve oluklarımızı çıkardığımızda kalan ekran genişliğinden gelir. 6 sütun ve 390p ekran genişliği durumunda, 41 noktalı bir sütun elde ederiz.

Web Tasarım Temelleri - Izgara Düzenleri 14

NİYE 8 DIR-DİR DAHA İYİ HARİÇ 10?

Neden bu kadar çok yetenekli tasarımcı 10 nokta yerine 8 noktalı ızgarayı seçiyor? Birincil nedenlerden biri, 8’in katlarını kullanırsak, bir nesnede hem dış hem de iç kenar boşluklarını ayarlama konusunda daha fazla özgürlüğe sahip olmamızı sağlamasıdır. Sonuç, çok daha güzel görünen bileşenlerdir.

Web Tasarım Temelleri - Izgara Düzenleri 15

10 noktalı ızgara kullanılarak oluşturulan aynı bileşen şöyle görünür:

Web Tasarım Temelleri - Izgara Düzenleri 16

Minimum dürtme değerimiz ona eşit olduğunda, bizi çok daha büyük marjlara (20’lik) sahip olmaya zorlar. Bazı uç durumlarda, okunabilirliği azaltabilir veya nesnelerin çok uzak veya çok geniş olmasını önlemek için ek sayıların (15 gibi) kullanılmasını gerektirebilir.

Sonuç – Web Sitesi Tasarımı Temelleri Serisi

UI tasarım ekibimiz, çeşitli dijital çözümler için güzel ve işlevsel arayüz tasarımları oluşturma konusunda uzmanlaşmıştır. Kapsamlı deneyimimiz, kurumsal ve kampanya web sitelerinden uygulamalara, intranetlere, pano görselleştirmelerine ve karmaşık kurumsal çözümlere kadar uzanır. Yaratıcılığın ve görsel tasarımın, birlikte sorunsuz ve tutarlı bir kullanıcı deneyimi yaratan akıllı bilgi mimarisi ve etkileşim tasarımı kadar önemli olduğuna inanıyoruz. Kullanıcı içgörülerini, UX en iyi uygulamalarını, IA’ya stratejik yaklaşımı ve marka bilinci oluşturmayı birleştirerek, ürün ve marka amacına uyan ve kullanıcılarınızın ihtiyaçlarını karşılayan basit, etkili, sezgisel ve keyifli arayüz tasarımı çözümleri oluşturuyoruz. BUGÜN BİZE ULAŞIN

Bir cevap yazın

Ready to Grow Your Business?

We Serve our Clients’ Best Interests with the Best Marketing Solutions. Find out More

How Can We Help You?

Need to bounce off ideas for an upcoming project or digital campaign? Looking to transform your business with the implementation of full potential digital marketing?

For any career inquiries, please visit our careers page here.
[contact-form-7 404 "Bulunamadı"]