Bölünmüş ekran hiçbir şekilde yeni bir teknik değildir. Aslında, sessiz film döneminin en eski eserlerinden bazıları, dikey, yatay ve hatta çapraz olarak bölünmüş tek bir ekranda iki eylemi veya iki durumu sunmak için kullanılan bu tekniği içeriyordu. Bununla birlikte web tasarımında, bölünmüş ekran düzeni, özellikle kahraman bölümleri için son beş yıl içinde giderek daha fazla öne çıkıyor. Bunun neden olduğunu görelim.
Bölünmüş Ekranın Rolü
Her şeyden önce, bölünmüş ekran, iki mesajı aynı anda iletmenin mükemmel bir yoludur. Ana sayfanın kahraman bölümü için kullanıldığında bölünmüş ekran, kullanıcıların ilk gördükleri, ilk ve en güçlü izlenimi bırakan kısımdır. Bu yüzden hem metinsel hem de görsel olarak en önemli mesajlarınızı tam buraya yerleştirmek istiyorsunuz. İki bölümden oluşan bölünmüş ekran, bir değil iki mesajı iletmenize yardımcı olabileceği gibi, görsel hikaye anlatımını düz metinle birleştirmenize de olanak tanır.
Bu tür bölüm yapılandırması, daha kolay görüntüleme için bloklar veya bölümler halinde düzenlenmiş içerikle sayfalar için akıcı, modüler bir düzen sunmaya da yardımcı olabilir. Ek olarak dinamiklik eklemek ve içerikle etkileşimi artırmak için bölünmüş ekran bölümleri canlandırılabilir.
Tamamen görsel bir bakış açısıyla, doğası gereği düalist olan bölünmüş ekranlar, yan yana duran iki parça arasında bir tür pozitif gerilim yaratır ve bu parçalar dikkatli bir şekilde kalibre edilip eşleştirildiğinde, markayı tamamlayan gerçekten mükemmel bir tasarım parçası yaratabilirler. stil ve estetik.
Şimdi bölünmüş ekran bölümü tasarlamanın birçok yolu var. Animasyonlu veya statik, simetrik veya asimetrik, düz veya çarpık, basit veya katmanlı olabilir. Video, etkileşimli öğeler, CTA’lar, dijital sanat nesneleri veya yalnızca düz görüntüler içerebilir. İçerik seçimi, bölümün kullanıldığı web sitesi türüne, içeriğine, içeriğine ve amaçlanan etkisine göre belirlenir.
Bölünmüş bir ekranın nasıl kullanılabileceği ve ne tür bir etki yaratabileceği konusunda gerçekten net bir resim elde etmek için, bu tür bir düzenin kullanımdaki bazı gerçek örneklerini incelemek en iyisidir. Bu yüzden farklı türde bölünmüş ekrana sahip olan ve çok yönlülüğünü mümkün olan en iyi şekilde sergileyen bu web siteleri listesini derledik. İşte bakacağımız konular:
-
Boş Durum
-
vizyoner
-
Mektup
-
Şefkatle Umut Çağrısını Geri Getirin
-
Geoff Levy
-
Kızılötesi
-
Maksim Aksenov
-
Bennett Çay
-
Boynton Yard
-
Don Berber & Damat
-
kombo
-
Bir diğer
-
PenzGidroMash
-
Pandora
-
F.Miller
-
Couro Azul
-
Totem
-
Capsul’in
-
Leandro Farina
-
kısmi gölge
Boş Durum
Empty State, Londra merkezli Cameron Design House tarafından geliştirilen, yapılandırılabilir aydınlatma yaratan bir tasarım stüdyosu veya daha doğrusu bir markadır. Web sitesi, görüntü ve metinden oluşan görünüşte durağan bir kahraman bölümüyle açılıyor, fakat, kaydırmaya başlar başlamaz, bölünmüş bir ekran bölümü veya daha doğrusu, sol ve sağ kısmın hareket ettiği bölünmüş ekran kaydırıcısı ortaya çıkıyor. zıt yönler. Toplamda beş slayt var ve hepsini geçtikten sonra ilkine dönüyoruz, buradan daha fazla gezinip ürünleri keşfedebiliyor, stüdyo hakkında bilgi edinebiliyor veya iletişim sayfasından ulaşabiliyoruz. Palet özenle tanımlanmış ve koyu lacivert ile birleştirilmiş sıcak grimsi pastellerden oluşuyor. Renklerin dualizmi, bölünmüş ekran kaydırıcısının sağladığı denge ve simetrikliği ile iyi uyum sağlar, bu nedenle web sitesinin genel tonu bir ölçü ve beceridir.
vizyoner
Visionnaire, belirgin bir şekilde genç ve çağdaş bir karaktere sahip, Toulouse merkezli bir gündelik giyim markasıdır. Online mağazaları, mevcut koleksiyonu tanıtan bölünmüş ekran kahraman bölümüyle açılan, mevcut öğelerin modern, renkli bir görüntüsünü sunar. Aslında, tüm web sitesi düzgün bir şekilde bölümlere ayrılmıştır – en üst kısım haber şeridi için ayrılmıştır, ardından belirgin bir başlık menüsü ve sayfanın daha aşağısında, sıkıca paketlenmiş ve simetrik olarak düzenlenmiş tam ekran bölümlerde sunulan ürün kategorileri gelir. Paletin yoğunluğu ve yoğun şekilde düzenlenmiş görüntüler, bu bölünmüş veya ikili içerik düzenlemesinden gelen bir düzen duygusuyla karşılanır ve tüm düzeni dengeler.
Mektup
Üst düzey finansal hizmetler, üst düzey tasarımı hak ediyor ve bu, bankacılık ve finans platformu Letter’ın, Bristol merkezli Green Chameleon ajansından bir web sitesi görevlendirdiğinde elde ettiği şeydi. Bir tarafı beyaz, kahraman metni içeren ve diğer tarafı koyu arka plana sahip, keskin kenarlı yanardöner bir prizma içinde yer alan bir kredi kartı görüntüsünü içeren, çarpıcı bir bölünmüş ekran kahraman bölümü ile açılır. Tüm bölüm, teknoloji estetiği dokunuşuyla, sınıf ve zenginlik kadar lüks değil. Kaydırmayla başlatılan bir animasyon, prizma bir düzine küçük parçaya ayrılarak kartı serbest bırakırken doğru bölümü tam genişliğe getirir. Bu kolayca bir giriş videosu bölümü olabilirdi, fakat tasarımcılar akıllı bir şekilde bunun yerine kesinlikle daha fazla çaba ve zaman gerektiren ancak çok daha heyecan verici bir sonuç veren kullanıcı tarafından tetiklenen bir animasyon yaptılar.
Şefkatle Umut Çağrısını Geri Getirin
Merhamet, çocuklara sponsorluk programları ve diğer yardım ve sosyal yardım çabalarını organize eden bir Avustralya Hristiyan yardım kuruluşudur. Geçen yıl, özellikle dünyanın dört bir yanındaki felaketten etkilenen bölgeler için fon toplamaya adanmış bir web sitesi olan Restore Hope Appeal’ı başlattılar. Web sitesi, oldukça zıt iki bölümden oluşan bölünmüş bir ekrandan oluşan bir giriş sayfasıyla açılır – biri güzel bir gök mavisi, umut ve merhameti ileten, bağış düğmeleriyle donatılmış ve diğeri karanlık, ciddi, afetten etkilenen bölgelerin yıkıcı görüntülerini içeren ve bizi daha fazlasını öğrenmeye davet eden büyük bir daire. Bu mükemmel bağımsız sayfa, bilgi almak ve bağış yapmak için ihtiyacımız olan her şeyi içeriyor ve görsel çekiciliği, yardım ve bağış kuruluşlarında alıştığımızdan belki de daha ayrıntılı görünüyor.
Geoff Levy
Bölünmüş ekran düzeni, dinamik ve sürükleyici bir izleme deneyimi sunması ve güçlü bir izlenim bırakması nedeniyle sinema ve videoyla ilgili web siteleri için özellikle iyi bir seçimdir. Bu kullanıma iyi bir örnek, New York City’de yerleşik, ödüllü bir Küba-Amerikalı film ve video yönetmeni olan Geoff Levy’nin portföy web sitesidir. Web sitesi, bir tarafı durağan ve onun fotoğrafçılık çalışmasına ayrılmış, diğer tarafı ise bir video arka planı ve Levy’nin film projelerine bağlantılar içeren güzel bir tam ekran bölünmüş ekranla açılır. Bölme ne sabit ne de kesindir – iki bölümün oranları imlecin hareketine bağlı olarak değişir. Sola doğru eğilirsek, fotoğraf bölümü genişler, daha fazla yer kaplar ve ilgili işlere bağlantılar görüntüler ve aynı şey sağ bölümde olur. Daha geleneksel bir kullanıcı deneyimini tercih edenler için, sayfa ayırıcı çizginin üstüne yerleştirilmiş basit bir simgeyle erişilen ızgara düzeninde de mevcuttur.
Kızılötesi
Kızılötesi, Teksas’ta kızılötesi sauna tedavisine özel önem vererek spa hizmetleri sunan bir şirkettir. Web sitesi, ısı ve ışığı ileten pembe, turuncu ve diğer sıcak, yoğun renklerle birleştirilmiş, uygun bir kırmızı palette çarpıcı bir bölünmüş ekran kahraman bölümüyle açılır. Soldaki bölüm, mercan kırmızısı zemin üzerine büyük pembe tipografinin güzel bir kombinasyonunu sunuyor ve sağdaki bölüm, saunalarda kullanılan bir kızılötesi lambanın görüntüsünü içeriyor. Aşağı kaydırdıkça bölünmüş ekran düzeni çeşitleniyor, renk değiştiriyor, daha açık bir karakter kazanıyor ve bir dizi metinsel bilgi ve resim sunuyor. Bazı bölümler animasyonludur, çoğunlukla kaydırmalı animasyonlarla ve ara sıra animasyonlu simgeler hoş arayüz ayrıntıları olarak işlev görür.
Maksim Aksenov
Maxim Aksenov, Rusya’dan multidisipliner bir tasarımcı ve sanat yönetmenidir. Portföy web sitesi, en önemli projelerinden bazılarının bir vitrini temsil ediyor ve kendi içinde güzel bir web tasarımı parçası. Bu tek sayfalık web sitesi numaralandırılmış bölümlere ayrılmıştır – Hakkında bölümüyle açılır ve ardından mantıksal olarak sayfanın çoğunu kaplayan Çalışma’ya geçer. Giriş bölümü veya dilerseniz bir kahraman bölümü, keskin ve ince bir ayırma çizgisiyle düzgün bir şekilde bölünmüş bölünmüş bir ekrana sahiptir. Solda Aksenov’un bulanık bir fotoğrafı, sağda ise logonun yanında kısa bir tanıtım yer alıyor. Bu ilk bölümden sonra, daha aşağı inmeye ve öne çıkan projeleri keşfetmeye davetliyiz. Bunlar da bir tarafta görseller, diğer tarafta beyaz boşluklar olacak şekilde dualist bir tarzda sunulmuş, görsellere gerekli bir soluklanma alanı verilmiş ve ara sıra projeyle ilgili kısa metinler yer almıştır.
Bennett Çay
Bennett Tea, kendi ifadesine göre “dünyanın en saygın özel markalı çay şirketi olma vizyonuna” sahip bir çay markasıdır ve bu hedefe, seçkin çay tiryakilerine üstün hizmet ve üstün kaliteli çay sunarak ulaşmayı amaçlamaktadır. dünya çapında uzmanlar. Tüm Bennett Tea web sitesi ve özellikle çay dükkanı bölümü, kırmızılar, pembeler ve koyu mavilere dayalı özenle seçilmiş bir renk paleti ile güzel bir web tasarımı parçasını temsil ediyor. Mağaza, sol tarafta çay kutusunun görüntüsünü içeren ve sağ tarafta çayın kaynağı, aroması, tadı ve dokusu hakkında bilgi sunan bölünmüş ekran kaydırıcı düzeninde gelir. Kaydırıldığında, geometrik şekillerden oluşan görüntü arka planı kutunun tasarımını yansıtacak şekilde sıra ve renkleri değiştirdiğinden, slaytlar birbiri ardına sorunsuz bir şekilde değişir.
Boynton Yard
Boynton Yards, Somervile, Massachusetts’te bulunan ve eyaletin kendi türünde en büyük kampüslerinden biri olan yepyeni bir bilim ve yenilik kampüsüdür. Laboratuvar ve ofis binaları, apartmanlar ve devasa bir park alanından oluşan bu devasa proje, tanıtımı modern, temiz ve bilgilendirici bir web sitesi içeren iddialı bir çabayı temsil ediyor. Siyah zemin üzerine beyaz tipografide kahraman görseli ve kahraman metninden oluşan bölünmüş ekran bölümü ile açılır. Ciddi ve profesyonel yerleşim düzeni, gereksiz süslemelerden arınmış ve projenin arkasındaki yenilikçi, teknoloji odaklı ruhu mükemmel bir şekilde yansıtıyor. Metin-görüntü dinamiği, metin çerçevesi, tam ekran görüntüler ve hatta bazı çizimlerle birlikte ana sayfanın çeşitli bölümlerinde korunur. Bu durum teknoloji ve mimari niş için tipik olan oldukça basit bir tasarımdır, fakat beceri ve dengeye büyük bir odaklanma ile yapılmış bir tasarımdır.
Don Berber & Damat
Yunanistan’ın Atina şehrinin kalbinde yer alan Don Barber & Groom, güzelce tasarlanmış ve dekore edilmiş bir alanda en yüksek kaliteli ürünleri kullanarak erkekler için üstün berber ve bakım hizmetleri sunmaktadır. Hizmetlerin kalitesine ve bunları sağlayan ekibe eşit derecede odaklanan web sitesi, salon yönetiminin stil ve markalaşma da dahil olmak üzere çalışmalarının her yönüne gösterdiği özen ve dikkati yansıtıyor. Bölünmüş ekran kahraman bölümü, bir tarafta salonun iç kısmına bir bakış sunarken, diğer tarafta takımı, salon mottosunu ve bir metin çerçevesi içinde karşılama mesajını tanıtıyor. Zarif ama gösterişsiz site, fazla maskülen olmayan, maço tiplere değil, beyefendilere yönelik bir karaktere bürünüyor.
kombo
Adından da anlaşılacağı gibi Combo, stratejik danışmanlıktan tasarım ve markalaşmaya, müşteri araştırmasından perakende ve ürün tasarımına kadar bir dizi beceri ve hizmeti birleştiren bir ajanstır. Web sitesi, sadece ajansın adını içeren çok basit, çok minimalist bir kahraman bölümüyle açılır. Sayfada herhangi bir yere tek bir tıklama, ayırıcı görevi gören ve sayfa kaydırıldıkça sabit kalan geniş bir dikey bant ile bölünmüş bir ekran düzenini ortaya çıkarır. Sol ve sağ bölümler, fotoğraflar, videolar, animasyonlar ve illüstrasyonlar şeklinde sunulan seçilmiş ajans projelerini içeriyor. İlginç olan, bireysel proje sayfalarının aynı zamanda bölünmüş bir ekran düzenine sahip olması, her iki tarafın da bir projeden farklı öğeler sunması…