Mobil Web Tasarımının En İyi Örneklerinden Bazıları

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

Çevrimdışı D®agon

  • Ezberletmez Öğretir
  • *******
  • Join Date: Mar 2008
  • Yer: Ankara
  • 11656
  • +524/-0
  • Cinsiyet: Bay
    • Arif Hocam
İşletmeler her zamankinden daha fazla keyifli mobil web sitesi deneyimi yapmaya odaklanıyor.


Sonuçta, Google, algoritmasını Nisan 2015'te ve Mart 2016'da güncelledikten sonra mobil cihazlara uygun web sitelerini ağır bir şekilde destekliyor. Akıllı telefonlarda, masaüstü bilgisayarlarda ve tabletlerde olduğundan daha fazla Google arama sorgusunun olması nedeniyle, bu çok önemlidir. yıl şimdi.

Google, ilerlemeye devam etmekle birlikte yalnızca mobil cihaz dostu (sayfa yükleme süresi de dahil olmak üzere) çubuğunu yükseltmeye ve algoritma güncellemelerine yansıtmaya devam edecektir. Dolayısıyla, mobil deneyiminizi geliştirmeye odaklanmadıysanız, öncelik sıralamanız daha iyi veya arama sıralamanızda gerçekten sorun yaşayabilirsiniz.

Yapacağınız herhangi bir mobil web sitesi tasarımı değişikliğine ilham vermek için, mobil web deneyimini gerçekten çivileyen 18 şirketin bir listesi.

En İyi Mobil Web Tasarım Örneklerinden 18'i

1) Shutterfly

Shutterfly, kullanıcıların fotoğraf kitapları, kişiselleştirilmiş kartlar ve sabit malzemeler oluşturmasına ve daha fazlasına olanak tanıyan çevrimiçi bir hizmettir. Shutterfly, git gide daha fazla insan fotoğraf çekip akıllı telefonlarını kullanarak eriştiği için müşteriler için mükemmel bir mobil deneyim yaratma ihtiyacını fark etti ve teslim ettiler.

Shutterfly, mobil web sitelerinde iki önemli hedefe ulaşıyor:

     Kullanıcıların sundukları ürünler hakkında bilgi edinmesi kolaydır.
     Bu bilgileri güzel görüntüler yoluyla satıyorlar.

Mobil sitelerine vardığınızda, menü öğelerinin ekranın alt yarısında büyük düğmeler halinde geliştirildiğini göreceksiniz. Bu, kullanıcıların öğrenmekle ilgilenen hangi seçeneği hızlıca seçmelerini kolaylaştırır.

2) Google Maps (Google Haritalar)

Herkesin favori harita veya yol tarifi uygulaması vardır. Benimki, ister yürüyüş, ister sürüş, bisiklet sürmek, ister toplu taşıma araçlarını kullansam kullandığım Google Haritalar. Mobil web siteleri için özel olan şey, indirilebilir mobil uygulamalarından neredeyse ayırt edilemez olmasıdır.

Aşağıdaki ekranlar mobil web sitelerinden alınmıştır, ancak uygulamanın tüm özelliklerini biliyorsanız, aynı görünüme sahip olduklarını fark edeceksiniz. Görünüm sadece aynıdır, ancak mobil web sitesi uygulamanın hız ve işlevselliğine sahiptir.

3) Typeform

Typeform, Barselona merkezli, tek bir basit misyona sahip bir şirkettir: "formları harika kılmak". Masaüstü web sitesi gerçekten basit bir şekilde tasarlanmıştır, ziyaretçileri özlü bir kopyayla, yüksek çözünürlüklü videolarla, ilgili animasyonlarla ve diğer daha karmaşık tasarım bileşenleri ile tebrik eder.

Ancak mobil kullanıcılar için, video ve animasyonlar gibi karmaşık tasarım bileşenleri, diğer zorlukların yanı sıra sayfa yükleme süresini önemli ölçüde etkileyebileceklerini fark ettiler. Bu nedenle aslında birçoğunu kaldırmışlardı - bu site sadeleştirilmiş haldeydi ve genel mobil deneyimini basitleştirdi. Mobil web sitesi, masaüstü web sitelerinin daha basit bir versiyonudur ve yine de güzel tasarlanmıştır.

4) Etsy

Etsy, insanların vintage veya el yapımı eşyalar alıp satabileceği bir e-ticaret web sitesi. Etsy'nin web sitesini ziyaret eden alıcıların çoğu, iki şeyden birini yapmak için vardır: Ya belirli bir öğeyi arıyorlar ya da ilginizi çeken kategorilerdeki öğelere göz atıyorlar.

Mobil web sitesi en başından itibaren her iki ziyaretçiye de hitap ediyor. Mobil web sitesine ilk geldiysen, belirli öğeleri, dükkanları veya kategorileri aramak için bir seçenekle karşı karşıyasın demektir.

5) Adrian Zumbrunnen

Bu, UX tasarımcısı, yazarı ve konuşmacı olan Adrian Zumbrunnen'in kişisel web sitesidir. Web sitesini ziyaret ettiğinizde hemen fark edeceksiniz ki onunla ilgili çok özel bir şey var: Bu bir sohbet web sitesidir.

Telefonunuzda normalde sahip olduğunuz bir metin mesajı konuşmasına benziyor - "yazarak" yazdığını göstermek için üç nokta da dahil. Kullanıcılar, her alışverişten sonra iki yanıt seçeneği alıyorlar, bu yüzden bir tür "kendi-seçim-kendi-macera" deneyimine benziyor.

Mobil ve masaüstü deneyimi çok benzer olsa da, masaüstü web sitesi, öncelikle mobil cihazlar için yapılmış gibi görünüyor - ki bu da ileride yönlendirilecek siteler olabilir.

6) Elf on the Shelf

Rafta Elf, göreceli olarak, bir çocuk kitabına dayanan oldukça yeni bir Noel geleneği. Emin değilseniz, temel öneri şu şekildedir: Kitap, dünyanın dört bir yanındaki evlerindeki çocukları izlemek ve Santa'ya geri dönmek için Santa tarafından gönderilen Noel'in keşif elflerinin hikayesini anlatmaktadır.

Kitapla birlikte, ebeveynler elf bir heykelciği satın alabilirler; bu da, evlerinin bir yerinde, çocuklarının görebileceği yere yerleştirecekler. Her gece Noel'e kadar uzanan her gece, ebeveynler elfleri, çocuklar etrafında keşif elflerinin gerçek olduklarını "kanıtlamak" için evlerinin etrafında farklı bir yere taşırlar ve onlara bakarlar.

Raf'ın web sitesinde Elf'e ilk geldiğinizde, raf ürünlerinde satın alabileceğiniz birçok Elf çeşidinin olduğunu göreceksiniz. Ancak, kullanıcıları uzun, metin tabanlı bir listede gezinmeye zorlamak yerine web tasarımcıları, kullanıcıların web sitesindeki ürünlere göz atan ziyaretçiler için ideal olan tüm farklı seçenekleri gözden geçirmek için soldan sağa doğru hızlıca gezinmeyi kolaylaştırdı.

7) BuzzFeed

BuzzFeed, viral içerik ve popüler sınavlar nedeniyle bilinen bir haber şirketidir. Aynı zamanda, işe gidip gelmek için işe giderken en sevdiğim eğlence kaynaklarından biri olur.

Ve nereye giderken BuzzFeed'i kontrol ettiğimi düşünüyorsun? Tahmin ettiniz: telefonumda. BuzzFeed, ziyaretçilerin çoğunun sitesinde mobil cihazlarını ziyaret ettiğini biliyor, bu nedenle hareket halindeyken okuyucuları için sorunsuz bir deneyim yaratmaya özen gösterdiler.

BuzzFeed'in mobil web sitesine geldiğinizde göreceğiniz ilk şey, en popüler içerik parçalarının bazıları, parmağınızla kolayca girilebilen büyük resimleri kullanarak basit, kolaj benzeri bir biçimde görüntülenir.

8) Evernote

Evernote, notları, resimleri ve web makalelerini saklamanızı ve bunları tüm cihazlarınızda kullanmanızı sağlayan bir uygulamadır. Kullanıcılar, uygulamayı indirip masaüstü bilgisayar, akıllı telefon ve tabletler de dahil olmak üzere birden fazla cihazda web sitesine erişme eğilimindeyken, Evernote'un mobil deneyimini alması çok önemlidir.

Masaüstü bilgisayarınızdaki Evernote ana sayfasına bakarsanız tasarımın ne kadar temiz olduğunu göreceksiniz. Değer ifadeleri kısa ve noktadan oluşuyor ve görüntüler konuma ekleniyor ancak sayfayı karmaşıklaştırmıyor. Mobil web sitelerine baktığınızda, bu tasarım ve stili tamamen bozulmamış halde tutuyorlar. Onların mobil web sitesi temiz, basit ve uygulamanın değerinden hiç etkilenmemektedir.

9) Huffington Post

Huffington Post, siyaset ve güncel olaylardan eğlence ve teknolojiye kadar her şeyden haberdar olan tanınmış bir haber merkezidir. Mobil web sitelerini benzersiz kılan şey, mobil kullanıcılar için başlıklarını hafifçe değiştirmesinin nedeni, içeriği daha kolay taranabilmesidir.

Masaüstünü mobil web sitelerine kıyaslarsanız, mobil web sitesinin ana sayfada daha az kelime olduğunu farkedeceksiniz. Başlıklar daha kısadır ve çok daha sindirilebilir - küçük bir ekranda kayarak veya okumakta olan biri için mükemmeldir.

10) Express

Express, genç erkekler ve bayanlara hitap eden bir giyim mağazası. İzleyicileri genellikle giyim eşyalarını taramak için web sitelerine girdiğinden web siteleri için giysilerinin net, net görüntülerini dahil etmek önemlidir - özellikle mobil cihazlarda, kullanıcılar ekranda öğeleri parmaklarıyla tıklayarak tıklamak zorunda kalacaklardır. satın alma bilgisi.

Express, mobil deneyimlerini çoğu çevrimiçi perakende sitelerinden bir adım ileriye taşıyor. Parmağınızı bir kıyafeti gösteren bir görüntüden soldan sağa kaydırırsanız, görüntü değişecek ve kıyafeti farklı bir görünümde görebilirsiniz. Başka bir deyişle, kullanıcıların aynı giyim eşyasının birden fazla resim görmek için başka bir sayfa yüklemesi gerekmez.

Bir yüzüne hızlıca geçtiğinizde nasıl değiştiğini görmek için aşağıdaki iki resimdeki sağ üstteki resme bakın: