Novi dizajn bloga – Pseudo 3D Web / plagosus / blog

Novi dizajn bloga – Pseudo 3D Web

Posle šest godina tamnih i šarenih varijanti vizuelnih identiteta ovog bloga, rešio sam da se konačno priključim svetskim trendovima minimalizma i jednostavnosti bele boje. Kako sam ovih dana u eksperimentisanju sa svakakvim ludostima koje mi padaju na pamet dok sam bez pristupa Internetu, pa ih žvrljkam po blokčićima, rešio sam da konačno promenim temu svog bloga. Nekoliko je novina na blogu, pa ću krenuti redom.

Minimalistički pristup svemu

Minimalizam – u svakom smislu te reči, počevši od pojednostavljene kolor šeme, preko odsustva suvišnih elemenata na samoj stranici, do odsustva bilo kakvih sličica u dizajnu same WP teme koju blog koristi. Crno bela pozadina (ili da budem precizniji, bela i par nijansi sive) je tu da pažnju fokusira na sadržaj i same tekstove, umesto na GUI. Sličnu filozofiju primenio sam i na same kategorije na blogu, koje su se od početnih hardware, software, vremenom namnožile na preko 20 kategorija i podkategorija, pa sam ih pregrupisao u nekih 7 logičkoh celina, koje sadrže sve prethodne, plus par novih podkategorija. To se sve odrazilo i na WP temu, koju sam namenski napravio za ovu priliku, no o njoj će kasnije biti reči.

Logo i vizuelni identitet

Krajem prošle godine krenuo sam u lov na novi logo jer sam, pre svega, imao potrebu za standardizacijom vizuelnog identiteta. Sve prethodne teme na blogu bile su takve da nisu imale potrebe za logoom kao zasebnim grafičkim elementom. Slično je bilo i sa avatarima na društvenim mrežama. Međutim, posle registracije agencije, trebao mi je logo za pečat i memorandume faktura, pa sam privremeno (i na brzaka, bukvalno za 10 min) napravio nešto (slika gore) što je služilo toj svrsi.

Želeo sam da se novi logo uklopi u jednostavnost celog novog vizuelnog identiteta, ali da ipak ne bude običan tekst bez ikakvih grafičkih intervencija. Takođe, bilo mi je potrebno rešenje koje podjednako radi na crnoj i beloj pozadini, u boji kao i u monohromatskoj varijanti zbog štampanja. Ideja se svela na kombinaciju jednostavnih geometrijskih oblika i par boja koje bi dočarale pseudo 3D efekat u 2D prostoru. Do finalnog rešenja (slika ispod) došao sam uz pomoć mlade novosadske dizajnerke Mirjane Marjanović kroz svega par revizija originalne ideje. Novi logo sam od 01.01.2012. počeo da koristim na memorandumima i društvenim mrežama, a od sada konačno i na blogu.

PlaBox WordPress tema

Kao što već pomenuh, na jednom putovanju crtkao sam neke svoje ideje u mojoj offline beležnici aka blokčetu i razmišljao kako bih logo mogao da uklopim u dizajn bloga, tj. kako bi blog dizajnirao tako da bude u skladu sa logoom. Osnovni efekat koji sam želeo da postignem bila je izometrijska projekcija, tj prikaz web elemenata u 3D perspektivi.

Prvo što mi je palo na pamet je da uz pomoć dva trougla i pravougaonika nacrtam ‘kutiju’ koja bi izgledala kao da je u 3D prostoru tako što ću vizuelno zavarati oko posmatrača jednostavnim 2D figurama koje bih nacrtao u CSS-u. Bekap varijana je bila da u Photoshopu nacrtam sve grafički i onda slajsujem i upakujem u standardni XHTML/CSS. Međutim, posle par manjih eksperimenata sa CSS3 transform funkcijama i zapažanjem da one zapravo funkcionišu u svim savremenim browserima (uključujući i IE9+), odlučio sam da krenem tim putem. Kompletna tema je nacrtana u CSS-u i ne sadrži nikakve sličice za grafiče elemente (ovde naravno izuzimam sam logo, ikonice za društvene mreže, kao i eventualne sličice koje su pluginovi učitali – tipa plugin za komentare i sl.).

Kako su tekstovi izlistani u vidu 3D kutija, sam CSS eksperiment nazvao sam PlaBox (od Plagosus Boxes) pa je i WordPres tema nasledila to ime. 3D je došao na web i za divno čudo čak se i browseri pametnih telefona dobro nose sa istim, što je svakako iznenađujuće dobra vest i pored toga što je u pitanju samo prividni 3D efekat, tzv pseudo 3D.

Dizajn same strane na kojoj se nalaze tekstovi sam ostavio što sličnijim starom dizajnu, gde pre svega mislim na karakteristike samog teksta (font, širina, boja i sl.) a i sidebar sam takoreći samo prekopirao. Ostalo je da sredim još neke sitnice, posle čega ću temu objaviti pod GPL licencom za besplatno preuzimanje.

“Ipak malo stariji, zreliji, normalniji…”

Kao što su i momci iz Beogradskog Sindiakata rekli u pesmi “Ja u životu imam sve“, ispravniji i zdraviji rezoni doprineli su nekoj novoj formi ovog bloga. I ako nikad nisam previše mario za sam izgled bloga, kao ni za formu samih tekstova, nekako prirodno je došlo vreme da se pozabavim i time malo. Uvek mi je bilo bitno ono o čemu pišem i kako pišem, pa sam u puno slučajeva i namerno izbegavao da pišem o aktuelnim temama koje bi tu bile čisto da navuku posetu na blogu. Takođe nisam pisao SEO friendly nazive za članke, već sam tekstove nazivao onako kako se meni sviđalo… Ponovo iz istog razloga. Pišem zbog sebe i ljudi koji ovde vole da svrate. Vremenom su se i teme o kojima pišem lagano izmenile, a i stil samih tekstova promenio. Ove izmene su tu samo da isprate te neke moje lične promene. Za dozu ozbiljnije u odnosu na sam početak…

U svakom slučaju, zamolio bih sve koji ovo čitaju da u komentaru ispod napišu kako im sve ovo izgleda. Takođe, rekoh da su radovi u toku, pa očekujte još par sitnih izmena, tehničke vrste, na samom blogu. Svaki komentar, kritika, savet i sl. su, kao i uvek, dobrodošli 😉

P.S. Obavezno bacite pogled i na naslovnu 🙂

Podeli sa prijateljima...Share on Facebook6Tweet about this on TwitterShare on Google+0Share on LinkedIn0

20 responses to “Novi dizajn bloga – Pseudo 3D Web”

  1. Dea says:

    Pseudo 3D boxovi su ti odlični, pogotovo footer, ali main menu mi jako teško pada…možda zato jer je orijentiran na lijevo pa nekako 'zatvara' taj dio, umjesto da otvara i ponudi čitatelju tekst u tijelu sajta, koji je desno od menija, što bi se vjerujem postiglo orijentacijom udesno. Pozz iz ZG-a 😉

    • brankko says:

      Videću još malo da se poigram sa tim. Sve je i dalje u eksperimentalnoj fazi. Pogledaj naslovnu, pošto bi tako trebao i ostatak da uradim… p0z

  2. @milosvu says:

    Veoma originalno i pregledno, samo bi bilo lepo namestiti manji ugao za tekst na levom meniju. Sve pohvale !

  3. Odličan redizajn, vrlo lepo realizovana ideja. Probaj možda i full-width prikaz za članke, kako bi ti ispratio recimo naslovnu, ovo mi je malo previše na levo 🙂 Za ekrane na handheld uređajima tipa tablet/smartphone idi možda i sa nekim responsive CSS-om, kapiram da se ovo super vidi na malo većim ekranima. Probao sam sa omanjeg Androida, i vidim da sasvim fino renderuje. Svaka čast! 🙂 Pozz

    • brankko says:

      Plan je da kompletna tema bude responsive i u potpunosti prilagođena i mobilnim i full hd ekranima, ali sam za sada nametno ostavio ovako, dok istestiram rendering na svim uređajima. Thx za comment 😉

  4. ugljesad says:

    Dopada mi se.

  5. ljutsamveoma says:

    hahahhahaha kao moj maturski rad. lopovi jedni. 3d blokovi su moja ideja. ali dobro, to je samo srednja dizajnerska. niko nije lud da postuje i osluskuje ideje mladih dizajnera >_>

  6. @nishville says:

    Odlično! 🙂 Jako mi se sviđa.

  7. Milan says:

    Ne sviđa mi se! Imam laptop sa širinom 1024 i moram da skrolujem vertikalno! Takođe mi nije jasno zašto ne radi paginacija odnosno zašto su dostupni samo nekoliko skorašnjih unosa na početnoj? Osim tih problema, sviđa mi se ideja i realizacija.

  8. Iva says:

    Najzad neko kod nas da napravi sopstvenu temu, hvalim ti se, bože! 🙂

    No, stoji ono što Milan reče, potrebna je nekakva, bilo kakva navigacija.

  9. Miloš says:

    Sve me ovo podseća na kertridže za Segu Saturn 😀

  10. Tomislav says:

    Prvi puta sam na vašem blogu, ali ono šta mogu kazati da jako lepo izgleda, a kada to kažem ne lažem jer mislim da imam dovoljno iskustva u web dizajnu 🙂

    Lepi pozdrav

  11. Tamara says:

    Nije više tako nov, ali još uvijek je veoma moderan dizajn, čestitke na futurističkom izgledu koji još plijeni pažnju 😉

  12. Dina says:

    Odličan posao, nova sam u internetskim vodama, ali znam prepoznat dobar posao, bravo ekipa 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *