Mobil cihazlar artık masaüstünü popüler hale getirdiğinden, tasarımcıların mobil cihazlarla birlikte tasarlamaları gerekiyor. Mobile-first, bir teknik olarak popülerdir çünkü mobil platformun ölçeklendirmesini ölçeklendirmek daha kolaydır.

Ancak bazen seçim elinizden çıkarılır. Genellikle tasarımcılar, mevcut masaüstü tasarımlarını cep telefonlarına uyarlıyorlar. Bazı öğeler iyi bir şekilde tercüme edilmediğinden, temel tasarımcılar küçük ekran için tasarlarken hangi özel ayarların yapıldığını anlarlar. İşte nasıl…

Minimalizmi kucakla

Minimalizm, web tasarımında yıllardır popülerdi, çünkü genellikle kullanılabilirlikten faydalanıyor ve güzel görünüyor. Cep telefonu söz konusu olduğunda, minimalizm, sadece kullanılabilirliğe dayalı tek bir estetik seçimden daha azdır.

Nielsen Norman grubuna göre, kesme özellikleri bir zorunluluktur mobil tasarımda. Bu, tasarımcılar için zaten kurulu bir masaüstünden bir mobil site oluşturmaya çalışırken ne anlama geliyor?

Bu, mobil kullanıcı deneyimi için gerekli olmayan şeylerle uğraşmak anlamına gelir. Örneğin, bir e-ticaret mağazasını masaüstünden mobil cihazlara geçiriyorsanız, mobil sitede görüntülenen aynı miktarda ürünü saklayın; Bu sadece bir anlam ifade eder, çünkü alışveriş yapanların bir online mağazanın sunabileceği her şeyi bulabilmeleri gerekir, tıpkı online mağazanın satmak zorunda olduğu her şeyi site ziyaretçilerine göstermek istediği gibi. Bununla birlikte, son fırsatlar için büyük bir reklam karuseli, makul olarak biraz ayrıştırılabilir.

Gezinmeyi gizle

Mobil ekranlardaki en yaygın özelliklerden biri, birbiri üzerine dizilmiş üç yatay çizgi parçasına sahip neredeyse her yerde küçük bir simge olan hamburger menüsü. Bu, mobil cihazların daha küçük ekran boyutlarının, masaüstü bilgisayarlarda belirli bir şekilde görünmesi beklenen öğeler etrafında değiştiği başka bir mükemmel durumdur.

Hamburger menüsünün varlığı hakkındaki bölünmüş görüşe rağmen, mobil ekranlarda hemen hemen her yerde mevcut. Çünkü bu, tasarımcıların masaüstü bilgisayarlardan mobil cihazlara navigasyon menüsünü küçültmek için bulduğu en iyi çözüm.

Bobby'nin Burger Palace adındaki zincir balıkçılığı için ünlü şef Bobby Flay'ın internet sitesine göz atın. Beklendiği gibi, navigasyon menüsü ana sayfanın üst kısmına yatay olarak yerleştirilir, ancak sitenin mobil versiyonuna gittiğinizde yatay menü kaybolur. Onun yerine, masaüstü sürümünde daha uzun yatay menünün yer aldığı ekranın aynı yerinde bulunan düzgün ve düzenli hamburger menüsü.

Bobbys-Burger-Saray-Masaüstü-Ekran Görüntüsü
Bobbys-Burger-Saray-Mobile Ekran Görüntüsü

Walmart ayrıca, masaüstü bilgisayardan mobil tasarım geçişine hamburger menüsünü de kullanıyor.

Walmart, masaüstü sitesinde, aynı sayfada ikinci bir gezinme seçeneği katmanını açan "Tüm Bölümler" açılır menüsünü görüntüler. Mobil sitede, bu özellik küçük ekran boyutundan dolayı mümkün olmamakla birlikte, bir yedek tasarlandı: ikinci seçenek navigasyon seçenekleri hamburger menüsünde ve bunlar her seferinde daha fazla gezinme seçeneği sunuyor. - neredeyse bir kitabın sayfalarını soldan sağa çevirmek gibi.

Walmart-Navigasyon-Katmanlar-Masaüstü-Ekran Görüntüsü
Walmart-Mobile-Navigasyon-Ekran Görüntüsü

Tek sütuna geç

Mobil tasarıma geldiğinde basitliğin daha iyi olması gerçeğine uygun olarak, tek sütunlu bir düzenin kullanıcılarının daha küçük bir ekranda çalışması için daha temiz ve kolay olduğunu hatırlarsanız, müşterileriniz için iyi bir performans sergileyeceksiniz. Tek sütunlu bir düzenin büyük yararı, bir sayfada çok fazla metin olsaydı ve okuyucunuzun ekranı soldan sağa kaydırmasını istediği gibi yatay kaydırma ile uzaklaşmanızdır.

Tek sütun düzeni oluşturduğunuzda, kullanıcı deneyimini kolaylaştırır ve kullanıcıları yeni bir sayfada görmek istedikleri bir bağlantıyı okumak veya tıklamak için aşağı kaydırmaya teşvik edersiniz. Bu, onları soldan sağa kaydırmaya zorlar, bu da özellikle kullanıcının parmağını bir mobil cihazı nasıl tuttuğuna göre göz önünde bulundurduğunda basitçe aşağı kaydırmaktan daha zordur.

The New York Times gazetesinin masaüstü web sitesi birden çok sütun içeriyor. İstemcinin kullanıcıları, imleci soldan sağa hareket ettirerek, bir trackpad veya fare üzerinde hiçbir sorun olmadan kolayca masaüstünde kullanmak kolaydır.

NYT

Tabii ki, The New York Times'ın mobil sitesi, küçük ekranlarda işlerin nasıl değiştiğini anlıyor, bu nedenle okuyucuların kullanıcı deneyimini artıran temiz ve verimli tek sütunlu bir tasarım sunuyor. .

nyt_mobile

Mobil konular

Mobil cihazların bugün kullanıcılar üzerindeki etkisi nedeniyle, tasarımcılar her zaman mobil cihazlar için tasarlamalıdır. Masaüstü sitesi ile birlikte bir mobil site tasarlamak ve mobil cihazlar için tasarlama diyor olsa da, bu yeterli değil!

Mobil cihazlar için tasarlama, küçük ekran için tasarladığınızda müşterinizin sitesi için yapmanız gereken belirli ayarlamaları dikkate almanız anlamına gelir. Buna, tasarımdaki minimalizmden, gezinme çubuğunu tek sütun düzenine geçmeye gizlemek için yukarıda anlattığımız her şey dahildir.

Bu en iyi uygulamaları yeteneklerinize uygun olarak benimseyerek, mobil cihazlar için mükemmel bir uyum sağlayan siteler oluşturacaksınız.