Dikkat Çekmek için Web Tasarımında 'Sivilceli' Arka Planlar Kullanmak

Yayınlanan: 2020-04-15

İyi bir web sitesi tamamen küçük şeylerle ilgilidir. Her ayrıntı önemlidir, hizmet etmesi gereken tek rol gölgede kalmak gibi görünse de. Bugün, spot ışığımız arka planda parlıyor.

Trendler açısından arka planlar hakkında konuşmayalı uzun zaman oldu. Yaratıcılar, ilk izlenimi yaratmaya yardımcı oldukları için ön plana çıkan şeylere takıntılıdır. Ancak, arayüzün temel unsurları her zaman önemlidir. Her yeni bir şey inşa ettiğimizde bize kendilerini hatırlatıyorlar. Ve yeniden ilgi odağı olmaları an meselesi.

Böylece, nihayet tek ve tek arka planla ilginç bir şey yapmanın zamanı geldi. En önemli yapışma noktası, tüm proje için sağlam bir temel sağlamasıdır, bu nedenle sert önlemler almak zordur. Abartılı bir şey yaratmak için pragmatik ve eğlenceli kısımlar arasında denge kurmanız ve aynı zamanda her şeyi mahvetmemeniz gerekir.

Görünüşe göre aşağıdaki tasarımcılar mükemmel bir çözüm bulmuşlar - sivilceli arka planlar. Her iki gereksinimi de karşılıyorlar ve kendilerini küçük bir trend olarak ilan ederken temiz bir nefes gibi görünüyorlar. Hadi daha yakından bakalım.

sabır

Bu, bir mobil uygulama için standart bir tanıtım sitesidir. Özünde, burada olağanüstü bir şey yok. Uygulamayı doğal ortamında gösteren bir iPhone maketi gibi ürünü sunmak için standart bir püf noktası paketi bulacaksınız. Artı, birkaç canlı harekete geçirici mesaj düğmesi ve temel bir yapı.

Ancak, anında dikkat çeken şey arka plandır. Gözü doğal olarak uygulamaya doğru iten büyük bir nokta gibi görünüyor. Ve aynı zamanda genel estetiğe hoş bir tat verir. Pürüzsüz kıvrımlar ve yumuşak renklendirme sayesinde, standart web sitesini önemsiz görünmekten kurtararak zarif ve rafine bir his verir.

Dikkat edin, bu sadece küçük bir ayrıntı, ancak burada kesinlikle fark yaratıyor. Statiktir ve ekranın yalnızca üçte birini kaplar, ancak kalabalığın arasından sıyrılmak için yeterlidir.

sabır

ekonomik

Önceki örnekte olduğu gibi, bu basit bir web sitesidir. Ancak bu sefer bir dijital ajansı temsil ediyor. Web sitesinin yapısı gelenekseldir ve aynısı tasarım için de geçerlidir. Ne hayali ayrıntılar ne de dramatik çizimler var.

Buradaki tek savurganlık arka plan. Yukarıdan aşağıya doğru hareket eden iki beyaz orta boy damlaya sahiptir. Yanlarda bulunurlar, böylece ana slogandan ve CTA'dan dikkati dağıtmazlar. Ama yine de arayüze biraz baharat ekliyorlar.

Ayrıca alt bilgiden hemen önceki bölümde ve bazı iç sayfalarda aynı yaklaşımın uygulandığını görebilirsiniz. Böylece her şey birbirine bağlanarak uyumlu bir tasarım ortaya çıkıyor.

Dinamik sivilceli arka plan, web sitesinin ticari atmosferine mükemmel bir şekilde uyum sağlar. Projenin tonuna uyum sağlar ve logotype ile yankılanır, marka kimliğini de destekler.

ekonomik

Dijital Panda

Daha önce bahsedilen iki örnekte birkaç nokta kullanılırken, Dijital Panda'nın yaratıcı ekibi yalnızca bir tane (ama oldukça büyük bir tane) kullanmayı tercih ediyor. Güzel mor blob, ön plan öğelerini destekler ve aynı zamanda temiz beyaz arayüzü fazla basitleştirilmiş görünmekten kurtarır. Çizimler, CTA'lar ve tipografi ile mükemmel bir uyum içindedir.

Bu numaranın tüm web sitesinde izlendiğini fark edebilirsiniz. Çeşitli bölümler, sivilceli arka plandan yararlanarak tutarlı bir kullanıcı deneyimi sağlar.

Dijital Panda

Art4Web

Art4Web'in arkasındaki ekip, çevrimiçi ziyaretçileri etkilemek için paralaks yaklaşımına güçlü bir şekilde güveniyor. Burada, maketleri birbirine yapıştırarak kahraman bölgesinin merkezinde yer alır. Sivilceli arka plan, sıvı yüzeyi taklit etmek için yavaşça hareket eden birkaç damla içerir. Ayrıca logo ile uyum içindedir ve marka kimliğini genel tasarıma getirir.

Çözüm bir eldiven gibi uyuyor. Kompozisyonu ön planda vurgular ve projeye dinamik bir dokunuş katarak aşırı kullanılan paralaks yaklaşımına hoş bir dönüş sağlar.

Art4Web

Bodymovin Çözümleri

Bodymovin Solutions, kahraman bölgesini adına uygun yaşamaya zorlayan resimli bir yaklaşım üzerine bahse girer. Önceki örnekte olduğu gibi, sivilceli arka plan kısmen canlandırılmıştır. Ve bu noktalar damla benzeri bir şekle sahip olduklarından, davranışları tahmin edilebileceği gibi sıvının yumuşak hareketini hatırlatıyor. Küçük insan çizimleri için sağlam bir temel görevi görür ve onları mükemmel şekilde tamamlar.

Burada sivilceli arka planın, web sitesini çekici bir şekilde açan bir açılış ekranının parçası olarak kullanıldığına dikkat edin. Hareket halindeyken tutarlı bir deneyim yaratır.

Bodymovin Çözümleri

Çevrenizi Büyütün

İsim plakasından tahmin edebileceğiniz gibi, burada bir daire projenin kalbi ve ruhudur. Dolayısıyla bu şeklin ana sayfada görülmesi sürpriz değil. Arka plan bir istisna değildir.

Arkadaki tuvali güzel renklere sahip birkaç büyük, çok bulanık daire oluşturur. Önceki örneklerde olduğu gibi, onlar da harekete geçirilmiştir. Görsel kimliğe katkıda bulunurlar ve marka kimliğini pekiştirirler, sayfanın olağanüstü görünmesini sağlarlar.

Çevrenizi Büyütün

griflan tasarımı

Genelde blob'ların gösteriyi yürüttüğü sivilceli arka planları göz önünde bulundursak da, aslında kimse Griflan Design'ın arkasındaki ekip gibi diğer şekilleri benimsemenizi engellemez.

Orijinal bir sivilceli arka plan, resmi web sitelerinin kahraman alanını işaretler. İki geometrik şekil (bir dikdörtgen ve bir halkanın yarısı), küçük, anahatları çizilmiş simgelerle birlikte içeriğin temelini oluşturur. Yakışır şekilde, her şey hareket ediyor. Büyük şekiller yavaş hareket ederken, küçük olanlar çok hızlı hareket ederek tuvale oldukça heyecan verici bir görünüm kazandırıyor.

griflan tasarımı

Açık Nokta

Sivilceli arka planlar söz konusu olduğunda, tercih edilen şekil bir damla gibi görünüyor. Bunun birkaç nedeni var.

İlk olarak, pürüzsüz eğriler daha az dikkat dağıtıcıdır, bu da mükemmel bir arka plan oluşturur. Bir yandan, böyle bir zemin tasarımı zenginleştirir. Diğer yandan ön planda olan içerikle rekabet etmez. İkincisi, bloblar, bu günlerde oldukça popüler olan bir sıvı davranışı uygulamak için mükemmeldir.

Daha sonra, deneyler için de harikalar. Onları çeşitli yönlerde hareket etmeye zorlayabilir veya tam tersine onları birleştirebilir ve yine de görsel olarak ilgi çekici görünebilirsiniz.

Son olarak, statik modda bile harika görünürler ve temiz beyaz yüzeye özel bir tat verirler.