{"id":1698,"date":"2012-08-19T08:24:07","date_gmt":"2012-08-19T07:24:07","guid":{"rendered":"http:\/\/www.plagosus.net\/blog\/?p=1698"},"modified":"2012-08-29T00:09:45","modified_gmt":"2012-08-28T23:09:45","slug":"novi-dizajn-bloga-pseudo-3d-web","status":"publish","type":"post","link":"https:\/\/www.plagosus.net\/blog\/creative\/dizajn\/novi-dizajn-bloga-pseudo-3d-web\/","title":{"rendered":"Novi dizajn bloga – Pseudo 3D Web"},"content":{"rendered":"

Posle \u0161est godina tamnih i \u0161arenih varijanti vizuelnih identiteta ovog bloga, re\u0161io sam da se kona\u010dno priklju\u010dim 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 \u017evrljkam po blok\u010di\u0107ima, re\u0161io sam da kona\u010dno promenim temu svog bloga. Nekoliko je novina na blogu, pa \u0107u krenuti redom.<\/p>\n

Minimalisti\u010dki pristup svemu<\/h2>\n

Minimalizam<\/strong> – u svakom smislu te re\u010di, po\u010dev\u0161i od pojednostavljene kolor \u0161eme<\/strong>, preko odsustva suvi\u0161nih elemenata<\/strong> na samoj stranici, do odsustva bilo kakvih sli\u010dica u dizajnu<\/strong> same WP teme koju blog koristi. Crno bela pozadina (ili da budem precizniji, bela i par nijansi sive) je tu da pa\u017enju fokusira na sadr\u017eaj i same tekstove, umesto na GUI. Sli\u010dnu filozofiju primenio sam i na same kategorije na blogu, koje su se od po\u010detnih hardware, software, vremenom namno\u017eile na preko 20 kategorija i podkategorija, pa sam ih pregrupisao u nekih 7 logi\u010dkoh celina<\/strong>, koje sadr\u017ee sve prethodne, plus par novih podkategorija. To se sve odrazilo i na WP temu, koju sam namenski napravio za ovu priliku<\/strong>, no o njoj \u0107e kasnije biti re\u010di.<\/p>\n

Logo i vizuelni identitet<\/h2>\n

\"\"Krajem pro\u0161le godine krenuo sam u lov na novi logo<\/strong> 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\u010dkim elementom. Sli\u010dno je bilo i sa avatarima na dru\u0161tvenim mre\u017eama. Me\u0111utim, posle registracije agencije, trebao mi je logo za pe\u010dat i memorandume faktura, pa sam privremeno (i na brzaka, bukvalno za 10 min) napravio ne\u0161to (slika gore) \u0161to je slu\u017eilo toj svrsi.<\/p>\n

\u017deleo sam da se novi logo uklopi u jednostavnost celog novog vizuelnog identiteta, ali da ipak ne bude obi\u010dan tekst bez ikakvih grafi\u010dkih intervencija. Tako\u0111e, bilo mi je potrebno re\u0161enje koje podjednako radi na crnoj i beloj pozadini, u boji kao i u monohromatskoj varijanti zbog \u0161tampanja. Ideja se svela na kombinaciju jednostavnih geometrijskih oblika i par boja koje bi do\u010darale pseudo 3D efekat<\/strong> u 2D prostoru. Do finalnog re\u0161enja (slika ispod) do\u0161ao sam uz pomo\u0107 mlade novosadske dizajnerke Mirjane Marjanovi\u0107<\/strong><\/a> kroz svega par revizija originalne ideje. Novi logo sam od 01.01.2012. po\u010deo da koristim na memorandumima i dru\u0161tvenim mre\u017eama, a od sada kona\u010dno i na blogu.<\/p>\n

\"\"<\/p>\n

PlaBox WordPress tema<\/h2>\n

Kao \u0161to ve\u0107 pomenuh, na jednom putovanju crtkao sam neke\u00a0svoje ideje u mojoj offline bele\u017enici aka blok\u010detu i razmi\u0161ljao 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 \u017eeleo da postignem bila je izometrijska projekcija<\/a>, tj prikaz web elemenata u 3D perspektivi<\/strong>.<\/p>\n

Prvo \u0161to mi je palo na pamet je da uz pomo\u0107 dva trougla i pravougaonika nacrtam ‘kutiju’ koja bi izgledala kao da je u 3D prostoru tako \u0161to \u0107u vizuelno zavarati oko posmatra\u010da jednostavnim 2D figurama koje bih nacrtao u CSS<\/a>-u. Bekap varijana je bila da u Photoshopu nacrtam sve grafi\u010dki i onda slajsujem i upakujem u standardni XHTML\/CSS. Me\u0111utim, posle par manjih eksperimenata sa CSS3\u00a0transform<\/a> funkcijama\u00a0i zapa\u017eanjem da one zapravo funkcioni\u0161u u svim savremenim browserima (uklju\u010duju\u0107i i IE9+), odlu\u010dio sam da krenem tim putem. Kompletna tema je nacrtana u CSS-u i ne sadr\u017ei nikakve sli\u010dice za grafi\u010de elemente<\/strong> (ovde naravno izuzimam sam logo, ikonice za dru\u0161tvene mre\u017ee, kao i eventualne sli\u010dice koje su pluginovi u\u010ditali – tipa plugin za komentare i sl.).<\/p>\n

Kako su tekstovi izlistani u vidu 3D kutija, sam CSS eksperiment nazvao sam PlaBox<\/strong> (od Plagosus Boxes<\/em>) pa je i WordPres tema nasledila to ime. 3D je do\u0161ao na web<\/span> i za divno \u010dudo \u010dak se i browseri pametnih telefona dobro nose sa istim, \u0161to je svakako iznena\u0111uju\u0107e dobra vest i pored toga \u0161to je u pitanju samo prividni 3D efekat, tzv pseudo 3D<\/em>.<\/p>\n

Dizajn same strane na kojoj se nalaze tekstovi sam ostavio \u0161to sli\u010dnijim starom dizajnu, gde pre svega mislim na karakteristike samog teksta (font, \u0161irina, boja i sl.) a i sidebar sam takore\u0107i samo prekopirao. Ostalo je da sredim jo\u0161 neke sitnice, posle \u010dega \u0107u temu objaviti pod GPL licencom za besplatno preuzimanje.<\/p>\n

“Ipak malo stariji, zreliji, normalniji…”<\/h2>\n

Kao \u0161to su i momci iz Beogradskog Sindiakata<\/a> rekli u pesmi “Ja u \u017eivotu imam sve<\/em><\/a>“, ispravniji i zdraviji rezoni doprineli su nekoj novoj formi ovog bloga. I ako nikad nisam previ\u0161e mario za sam izgled bloga, kao ni za formu samih tekstova, nekako prirodno je do\u0161lo vreme da se pozabavim i time malo. Uvek mi je bilo bitno ono o \u010demu pi\u0161em i kako pi\u0161em<\/span>, pa sam u puno slu\u010dajeva i namerno izbegavao da pi\u0161em o aktuelnim temama koje bi tu bile \u010disto da navuku posetu na blogu. Tako\u0111e nisam pisao SEO friendly nazive za \u010dlanke, ve\u0107 sam tekstove nazivao onako kako se meni svi\u0111alo… Ponovo iz istog razloga. Pi\u0161em zbog sebe i ljudi koji ovde vole da svrate<\/span>. Vremenom su se i teme o kojima pi\u0161em lagano izmenile, a i stil samih tekstova promenio. Ove izmene su tu samo da isprate te neke moje li\u010dne promene. Za dozu ozbiljnije u odnosu na sam po\u010detak…<\/p>\n

U svakom slu\u010daju, zamolio bih sve koji ovo \u010ditaju da u komentaru ispod napi\u0161u kako im sve ovo izgleda<\/strong>. Tako\u0111e, rekoh da su radovi u toku, pa o\u010dekujte jo\u0161 par sitnih izmena, tehni\u010dke vrste, na samom blogu. Svaki komentar, kritika, savet i sl. su, kao i uvek, dobrodo\u0161li \ud83d\ude09<\/p>\n

P.S. Obavezno bacite pogled i na naslovnu<\/a> \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

Posle \u0161est godina tamnih i \u0161arenih varijanti vizuelnih identiteta ovog bloga, re\u0161io sam da se kona\u010dno priklju\u010dim svetskim trendovima minimalizma…<\/p>\n","protected":false},"author":2,"featured_media":1720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[279,212,213,55,160],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/posts\/1698"}],"collection":[{"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/comments?post=1698"}],"version-history":[{"count":0,"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/posts\/1698\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/media\/1720"}],"wp:attachment":[{"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/media?parent=1698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/categories?post=1698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.plagosus.net\/blog\/wp-json\/wp\/v2\/tags?post=1698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}