Brütalist Tasarım

Yayınlanan: 2020-02-21

Brütalizm, 1950'ler ve 1960'larda yükselişi biraz sonra gelse de 1920'lerin ortalarında ortaya çıkan bir mimari üsluptur. Sade ve samimi bir üslupla karakterize edilmiştir. Brütanizmde biçim, işlevi takip eder .

Habitat 67
Habitat 67. Kaynak: Wikipedia.

Brütalist binalar genellikle, belirgin bir şekilde eklemlenmiş ve birleşik bir bütün halinde gruplandırılmış belirli işlevsel bölgeleri temsil eden kütleler oluşturan tekrarlayan modüler öğelerle inşa edilir. Beton, ham ve gösterişsiz dürüstlüğü için kullanılır, bu nedenle seçkin Beaux-Arts tarzında inşa edilmiş son derece zarif ve süslü binalarla çarpıcı bir tezat oluşturur.

Sainte Marie de La Tourette
Sainte Marie de La Tourette. Kaynak: Vikipedi.

Güzel, değil mi? Ancak bu blog teknoloji ve WordPress hakkındaysa neden mimariden bahsettiğimizi merak ediyor olabilirsiniz. Eh, nedeni basit: vahşet, web dünyasına da uygulayabileceğimiz bir tasarım trendi…

Web'in Kökeni ve Grafik Evrimi

Genç okuyucularımız için web, her zaman var olan bir şey gibi görünüyor, ancak gerçeklikten başka bir şey değil. Tarihteki ilk web sayfası “yakın zamanda” 1991'de mi yayınlandı? ve gördüğünüz gibi, çok basitti:

İlk web sitesinin ekran görüntüsü
İlk web sitesinin ekran görüntüsü.

İlk web sayfaları, yalnızca köprüler içeren metinlerdi. Ancak teknoloji ilerledikçe, eklenebilecek kaynakların sayısı arttı ve yenilik olanakları hızla genişledi.

İnternetin ilk günlerinde, hiç kimse “iyi tasarımın” tam olarak ne olduğunu bilmiyordu (baskı dünyasından sahip olduğumuz tüm bagajlara rağmen) ve ilk web yöneticileri, tasarımı sergilemek için etkili sayfa düzenleri oluşturmak için “ellerinden geleni” yaptılar. içerik. Tamamı tablolara dayalı 90'ların başlarındaki tasarımları hatırlıyor musunuz?

Google, başlangıcında
Google başlangıçta ne kadar güzeldi!

Elbette, bu tasarımlar görsel düzeyde az çok "işe yaradı", ancak dahili olarak mutlak bir felaketti. HTML yapısı yalnızca sayfanın son görünümüne odaklandı ve içeriğin kendisini tamamen görmezden geldi, bu nedenle sonuca hiç erişilemedi. Ama hepimiz "web'i nasıl kuracağımızı..." öğreniyorduk.

Portal Terra
Terra… Masa tabanlı tasarımıyla İspanya'da 90'lı yılların klasiği.

Renk paletleri, düz veya gerçekçi simgeler, animasyonlar… Bir araya geldiğinde bir “tasarım trendi” haline gelen tüm ince ayrıntılar gelip geçer. Ancak bugün değişmeyen bir eğilim var: Ruth'un birkaç gün önce Apple'a ve tasarım ilkelerine baktığında bahsettiği basitlik.

Ancak gerçek tüm bunlardan daha karmaşıktır. Tüm web siteleri aynı trendleri takip etmez. Küresel trendlerden uzaklaşıp başka yollar keşfeden insanlar var. Kalıbı kırıyorlar. Belki bir sonraki trendi bile yaratırlar…

Web'de Brütalizm

Brütalizm terimi Fransızca “Beton brut” veya “ham beton”dan gelir. Dolayısıyla, web'deki vahşilikten bahsediyorsak, "somut" değil, "hamlık" hakkında konuştuğumuz açıktır. Brutalist mimari, yapı taşları olarak kullandığı malzemelere sadık olmak istiyor ve web geliştiricileri olarak bizler de bunun için çaba göstermeliyiz. En azından, acımasız web siteleri oluşturmak istiyorsak.

Bu şu soruyu akla getiriyor: Bir web oluşturmak için kullandığımız “malzemeler” nelerdir? Bunların HTML ve CSS olduğunu düşünebilirsiniz, ancak web için HTML ve CSS'nin inşaat için beton karıştırıcı veya vinç ne anlama geldiğini fark edin: bunlar projemizi "inşa etmek" için kullandığımız araçlardır. Dolayısıyla web üzerinde çalıştığımız “hammadde” içeriktir . Ve bu sizi şaşırtmamalı, çünkü içeriğin kral olduğundan her bahsettiğimizde bu web sitesinde uzun uzun konuştuk.

Brütalizm malzemelerine sadıktır, bu nedenle web geliştiricileri ve tasarımcıları olarak işimize karşı dürüst olmamız ve bir web sitesinin ne olduğunu ve ne olmadığını bilmemiz gerekir. Web'ler dergi değildir. Onlar uygulama değil. Onlar reklam panosu değil. Öyleyse neden bunlardan herhangi birine benzesinler?

Web'de Brütalist Tasarım İlkeleri

Burada, brütalist bir web sitesi tasarlarken aklınızda bulundurmanız gereken bazı temel ilkeler bulunmaktadır:

1 – İçerik Her Yerde Çalışmalı

Herhangi bir CSS stili olmadan bir web sayfası oluşturur ve yalnızca HTML etiketlerini kullanarak doğru bir şekilde yapılandırmaya çalışırsanız, bu web sitesinin dünyadaki tüm tarayıcılarda mükemmel şekilde çalışacağını bilirsiniz. En güzel web sitesi olmayacak, ama işe yarayacak. Ekransız tarayıcılarda bile çalışır (evet, erişilebilirlikten bahsediyorum). Ve eğer içerik kralsa, bu harika !

İçerik, CSS'siz bir dünyada çalışmalı ve anlamlı olmalıdır. Bir web sayfasını şekillendirmek kesinlikle kendi markanıza sahip olmanıza yardımcı olabilir, ancak aynı zamanda onu kırabilir ve sizi acımasız ilkelerden uzaklaştırabilir.

2 – Web ile Kullanıcı Etkileşimleri Sınırlıdır ve HTML Tarafından İyi Tanımlanmıştır

CSS ve JavaScript ile, daha önce imkansız görünen etkileşimler, olağanüstü animasyonlar ve nefes kesici geçişler ile yerel uygulamalara benzeyen web siteleri oluşturabiliriz. Ancak tüm bunların içerikle kesinlikle hiçbir ilgisi yok… Peki brütalist bir web sitesinde kullanışlı arayüzleri nasıl tasarlarız?

Varsayılan olarak, kullanıcılar web sitenizle yalnızca düğmeler, bağlantılar ve formlar aracılığıyla etkileşim kurabilir. Ve yalnızca bağlantılar ve düğmeler "tıklanabilir". Bu yüzden onlara ham göstermek önemlidir:

Nelio Software'de Brutalist tasarım
Web sitemiz bazı brütalist ilkeleri takip etmektedir. Bir bağlantının ne olduğunu hızlı bir şekilde tanımlayabilir ve hatta rengi değiştiği için daha önce ziyaret edip etmediğinizi bile belirleyebilirsiniz.

Web'in başlangıcından bu yana, köprüler net bir model izlemiştir. Normal metin gibidirler, ancak renkleri mavidir ve stillerinin altı çizilir. Köprü ziyaret edildiğinde, rengi mora döner, böylece ziyaretçi köprüyü zaten ziyaret etmiş olduğunu bilir. Bu saflıktan gerçekten uzaklaşmalı mıyız?

Brütalist düğme
Web sitemizdeki düğmeler de brütalisttir. Onları daha “modern” hale getirmek için farklı stiller uygulamış olsak bile, açıkça düğmelere benziyorlar.

Düğmeler ise gerçek hayatta var olan bir öğeyi tasvir eder: bir düğme. Düğme, hem gerçek hayatta hem de web'de basabileceğimiz bir şeydir ve bu nedenle benzer şekilde davranmalarını bekleriz. Düğmelerinizin düğmeler gibi göründüğünden ve onlarla etkileşim kurduğumuzda görünümlerinin değiştiğinden emin olun. Ayrıca, bunları kullanmanız gerektiğinde kullanın: örneğin bir formun yanında, kullanıcıya yazdıkları bilgilerin sunucuya gönderileceğini ve ardından bir yanıtla başka bir sayfaya yönlendirileceğini vaat ediyorlar.

3 – Web Tarayıcılarında Web Siteleri Vardır, Bu nedenle Kullanıcılarınızın Web Sitenize “Göz Atmasına” İzin Verin

Tarayıcıların ileri geri gitmek için düğmeleri olduğunu biliyor muydunuz? Biliyorum, çünkü hepimiz bu kalıba alışkınız…. ve yine de, bazı web siteleri bugün bu kalıbı kırıyor! Tek Sayfa Uygulamaları (SPA), içeriği dinamik olarak yüklemek için JS'yi kullanır ve bazıları bunu, tarayıcıda bir önceki aşamaya geri dönme seçeneği olduğunu göz ardı ederek yapar. Acımasız bir tasarım web'e sadık kalır ve kullanıcının alıştığı kalıpları ve kuralları asla bozmaz.

4 – Kullanıcılar İçeriği Dikey Olarak Kaydırabilir

Bir web sitesi bir dergi veya kitap değildir, bu nedenle (prensipte) içeriği sayfalara ayırmaya gerek yoktur. Birçok web sitesinin bunu yapmasının tek nedeni, bir makaleyi okumak için okuyucunun birden fazla sayfayı ziyaret etmesi gerektiğinden, ziyaretleri yapay olarak artırmaktır. Bunu yapma!

Brütalist bir web sitesinde, içerik bir kerede sunulur ve okuyucunun onu kendi hızında, istediği gibi kaydırarak tüketmesine izin verilir. Gerçekten önemli olanı, yani içeriği görüntülemek ve kullanmak için kullanıcıyı gereksiz etkileşimlerle rahatsız etmeye gerek yoktur.

Ne düşünüyorsun?

Acımasız ilkeleri severim. Tasarımcı değilseniz, bu ilkeleri uygulamak oldukça kolaydır: her şeyi varsayılan olarak göründükleri gibi bırakın (veya hafifçe değiştirin). Ama ne düşünüyorsun? Sevdin mi? Sizce çirkin ve modası geçmiş mi? Aşağıdaki yorum bölümünde bize bildirin!

Unsplash'ta berenice melis'in öne çıkan görseli.