10 Çene Duyarlı Açılış Sayfaları Bırakma
'Duyarlı', web geliştirmede son harekettir - ve buna oldukça ihtiyaç duyulan bir şey. Her gün, internete erişmek için kullanılan cihazların, platformların ve tarayıcıların sayısı artıyor. Ve kullanıcıların çoğunluğu internete geleneksel platformlardan erişirken, akışkan ve adaptif web sitelerine olan talep her zamankinden daha güçlü.
Birçok tasarımcı bu değişimi kalbe götürüyor ve mobil, tablet ve masaüstü ortamlarında başarılı olan bazı muhteşem parçalar yaratıyor.
Aşağıdaki siteler, duyarlı web tasarım teknikleriyle güzelliği birleştirir ve küçük bir yenilikle nelerin başarılabileceğini gerçekten gösterir. Biraz patlamış mısır ve not defteri al, dikkat etmek isteyeceksin.
StephenCaver.com
Açtığınızda bu site Masaüstünüzde hemen büyüleyici. Cesur, siyah, haklı bir başlık, Mojave Çölü'nün arka planının neredeyse sulu boya benzeri niteliğiyle güzel bir tezat oluşturuyor. Bu site mobil boyutlara uyarlandığında, değişiklik önemlidir ve site hala harika görünüyor.
FoodSense.is
Geniş düzeni, temiz çizgileri ve basit yapısıyla bu site minimalist web tasarımının harika bir örneğidir. Bir tablet veya mobil cihazda görüntülendiğinde, kompozisyon veya akıştan ödün vermeden ayarlar.
Warface.co.uk
Renk kullanımı dikkat çekicidir ve 3D figürinlerin sitenin ön plana yerleştirilmesi, görüntüleyiciyi gerçekten meşgul eder. Site benzersiz ve heyecan verici ve etkinin hiçbiri mobil cihazlarda kaybolmuyor.
DanielVane.com
Yine burada tasarımcı, çalışmasının kendisi için konuşmasına izin veriyor. Açılış sayfası Tam boyutlu sadeliği güzeldir ve bu, mükemmel bir logoya sahip olan özellikle tutuklama resminden ayrılarak, mükemmel bir şekilde mobil cihazlara taşınır.
SasquatchFestival.com
Bu site Bu listedeki diğer siteler arasında eğlenceli ve eğlenceli ve benzersiz. Renk, görüntü ve ikonlarla eğlenmek için stil sadeleştirmeyi başaran bir şekilde basit sadelikten vazgeçerler. Bu küçük bir alanda yapmak zor olabilir, ancak Sasquatch tasarımcıları zahmetsizce yönetir.
GravitateDesign.com
Şekil kullanımı bu site hemen göze çarpıyor. Sınırların ve içerik kutularının kullanılmasından kaçınarak, çalışmalarını en iyi şekilde sergileyen bir site oluşturmayı başardılar.
VisualSupply.co
Warspace'e benzer şekilde, gerçekten işe yarayan görüntüler bu web sitesi . Mükemmel yapılandırılmış ve her cihazda güzel görünüyor.
StudioMds.co
Web tasarımında koyu renkler göz ardı edilebilir, ancak Stüdyo Mds içeriklerini cesur kararlarıyla geliştirin. Yerleşim, gereksiz bağlantılardan başka hiçbir şey kaybetmeden daha küçük bir ekran boyutuna uyacak şekilde ayarlanır.
ForefathersGroup.com
Bu site harika bir bağbozumu hissi vardır ve bunu oluşturmak için doku, görüntü ve yazı tipi kullanır. Güzelce inceliyor (ama o maymunu kaybetmek utanç verici).
MapBox.com
Renk şeması ve fotoğrafların kullanımı Mapbox Ürünlerini sergilemek için temiz bir alan. Yine yalınlık karmaşık veya telaşlı tasarım üzerinde kazanıyor ve bu yüzden daha küçük bir ekranda iyi çalıştığı kesin.
Tasarımlarınızda akılda tutulması gerekenler
Yani, şimdi bazı hassas tepki sitelerine baktığınız için muhtemelen kendi tasarımınızı yapmaya başlamak için kaşınıyorsunuz. Ama kaçmadan önce, hatırlamak için birkaç şey var.
Fotoğraflar
Duyarlı tasarım için bir engel, cihazların fotoğrafları nasıl görüntülediğidir. Retina ekranlı bir MacBook Pro, bir görüntüyü, genellikle bir sorun yaratabilecek bir cep telefonundan çok daha yüksek bir çözünürlükte görüntüleyecektir. Bu sorunun bir yolu, fotoğraflarınızın yüksek ve düşük çözünürlüklü kopyalarını yüklemektir. CSS'yi kullanarak, cihazın ekran çözünürlüğüne bağlı olarak hangi görüntünün yükleneceğini belirleyebilirsiniz. Stok fotoğraflarını kullanıyorsanız, daha yüksek rez seçeneği için savurduğunuzdan emin olun.
Kesme noktalarını belirleme
Çoğu zaman yanıt veren tasarımlar, öncelikli olarak ortak cihaz ekran boyutlarına dayalı olarak, “kırılma noktaları” olarak bilinen ya da mizanpajın hangi çözünürlükte değiştiği ile ilgili olarak inşa edilir. Bununla birlikte, bu yaklaşımdaki sorun, farklı ekran boyutlarının gerçekte ne kadar olduğunu dikkate almamasıdır. Artık “evrensel” boyut yoktur. Bu nedenle, 360px (mobil), 768px (tablet) ve 1024px (masaüstü) öntanımlı kesme noktaları yerine, tasarımınızın kendi kendine konuşmasına izin vermek daha iyidir. Bitmiş bir düzenle başlayın ve ardından tasarım kırılıncaya kadar pencerenizi yeniden boyutlandırın - bunu kesme noktalarınızdan yapın ve devam edin. Sitenizin çok daha akıcı olduğunu göreceksiniz.
Harika bir yanıt veren açılış sayfasına rastladınız mı? Kendini tasarladın mı? Yorumlarda bize bildirin.