9 Maddede Responsive Tasarım

 

featured image hybrid vs. responsive design 1024x537

Duymayanlar ve çok fikri olmayanlara neden responsive tasarım sorusuna cevap olabilecek, 9 maddede responsive tasarım prensipleri. Responsive tasarım, dijital tasarımda farklı ekranlar için muhteşem imkanlar sunuyor.

 

1. Uyumlu mu, uyarlanabilir mi? / Responsive vs. Adaptive

Aynı şey gibi dursa da aslında değildir. İki yaklaşım da birbirini tamamlar. Yanlış veya doğru diyemeyiz. İçerik neyi gerektiriyorsa ona göre karar verilir. Aşağıdaki gibi uyarlanabilir olan yani adaptive tasarım uygulamasının responsive’den farkı açıkca görülmektedir. Adaptive tasarım uygulamasında tasarım ekran ölçülerine göre uyarlanır, responsive’de ise tek bir ölçü çalışılır bu tüm ekranlara otomatik olarak uyarlanır. Hangisi daha iyidir yerine göre tartışılır, yine de Google responsive uygulamayı önerir.

01

 

2. Akış / Flow

Ekran boyutları küçüldükçe, içerik daha da dikey olmaya başladı. Scroll etmeye zaten alışmıştık, bu böyle uzun bir süre daha gidecek gibi.

 

02

 

3. Ekrana göre yüzde hesapları / Relative units

Masaüstü, mobil ekran veya ikisi arasındaki birimlere göre çalışırken pixel’ler değişkendir ve işi zorlaştırır. Bu yüzden responsive tasarım için daha esnek birimlerle, yüzdelerle çalışılır. Birim olarak %50 dediğimizde bizim için her zaman aynı şeyi ifade eder, %50 her zaman ekranın yarısı veya belli bir birimin yarısını her zaman aynı oranda almak gerektiğini söyler.

 

03

4. Kırılımlar / Breakpoints

Tasarımda yatay veya dikey guide çizgilere sadık kalıyoruz ve bu çizgiler bizim içeriğimizin buralardan kırılacağını ve bir alt satıra kayacağını anlatıyor bize. Masaüstündeki 3 kolon, mobilde tek kolona düşebiliyor bu şekilde. Birçok CSS özelliği bir kırılım noktasından diğerine olan değere göre yazılıyor. Bu guide’lar içeriğe göre şekil alıyor yine tabi. Eğer bir cümle kırılıyorsa oraya bir breakpoint vermek gerekiyor gibi. İş de tam burada nerede breakpoint verdiğimizde neyle sonuçlanıyor, onu doğru hesaplamaktan geçiyor açıkçası. Aslında responsive tasarımda olay çoğunlukla, kırılımları doğru uygulamakta, kullanıcıya doğru kullanıcı deneyimleri sunabilmekte.

 

04

 

5. Maksimum ve minimum değerler

Telefonda ekrana tam oturduğunda müthiş sonuç veren bazı içerikler, siz o telefonu televizyona bağladığınızda geniş ekrandayken öyle görünmez ya, işte orada öyle gelişigüzel görünmesin diye maksimum bir değer verme kuralı vardır responsive tasarımda. Örneğin şöyle dersin “sen genişliğini 100% tut ve maksimum 1000px’e kadar genişle, böylece televizyon ekranında da telefon arayüzünde de doğru düzgün görün”.

 

05

 

6. Gruplu objeler / Nested objects

Ayrı ayrı hareket etmeleri işimizi zorlaştırdığından nesneleri grupluyoruz ve bu şekilde hareket ettiriyoruz. Responsive tasarımda piksel’ler burada işimizi kolaylaştırıyor. Logo ve butonlar gibi büyüyüp küçülmesini istemediğiniz objeler için piksel bazlı değer vermek ve gruplamak ise daha doğru.

 

06

 

7. Tasarımı mobile göre mi masaüstüne göre mi yapalım? / Mobile or desktop first?

Genellikle kafa karıştıran ama aslında sonucu çok da etkilemeyen ama responsive tasarım yapılmasını da anlamlı kılan sorulardır bunlar. Teknik olarak bir fark yoktur aslında. İsterseniz küçük ekrandan tasarlamaya başlayın isterseniz büyükten. Evet sonuçta tasarım mobilden başlarsanız bazı limitleri öngörebilir, bu limitleri koyarak ilerleyebilirsiniz.

 

07

8.Webfont mu, sistem fontu mu?

Responsive tasarımın dev kuralı webfont! Sayfaların hızlı yüklenmesini ve fontlarınızın keskin ve parlak görünmesini istiyorsanız webfont ne işe yarar bilmekte fayda var.

 

08

9. Bitmap mi vektör mü?

İkonunuz öyle detaylı, oyuncaklı, efektliyse bitmap, değilse vektör kullanın. Bitmap için, jpg, png, veya gif formatları, vektör olanlar içinse, SVG veya font-ikon tercih etseniz iyi olur. Özellikle responsive tasarımda imajları her zaman optimize ederek online edin, ikonları da. Bu arada vektörler küçük de olsa bazı tarayıcılar desteklemiyor. Yuvarlak hatlı bir ikonsa hele iyice çok yer kaplayacağından bitmap’ten daha büyük olabilir. Optimizasyon işi önemli bu yüzden küçük detayları atlamayın, boyut konusunu es geçmeyin.

 

09

Leave a Reply

Copyright, Userpusher.