Koliko nam znači Apple

Apple je tvrtka poznata po brojnim inovacijama. I iako nemaju puno proizvoda, ono što imaju i ono što nude, na neki način, utjecalo je na nas, koristili mi te uređaje ili ne, te je utjecalo ili direktno ili indirektno, ali definitivno je nemoguće da nema utjecaja.

iMac

iMac je stolno računalo, izašlo 1998. godine. Kada je izašlo, bilo je revolucionarno. Način na koji je iMac promijenio svijet računala je taj da je razbijena predrasuda. Da, računala stvarno nisu morala biti siva, bež ili bijela. iMac je unio revoluciju u dizajn osobnih računala, i iako se taj utjecaj počeo preslikavati u PC svijet tek nedavno, definitivno je velik.

iMac je donio još jednu revoluciju, a to je all-in-one koncept. Zapravo je koncept računala, kao skup zasebnih dijelova povezanih kabelima, koji zajedno funkcioniraju, jako čudan. Ne postoji druga alternativa u proizvodima koja je tako zamišljena. I naravno, tu je došao Apple da to ispravi. Opet, 1998. onaj isti iMac, također je bio i all-in-one računalo, a tek nedavno ta ideja se preselila u PC svijet. Jer, PC-aši su uvidjeli kako iMac grabi sve veću popularnost, i trebali su nešto poduzeti, a to je klasika, koju je Apple opisao u jednoj rečenici “Redmond, start your photocopiers.”, samo što u ovom slučaju umjesto Microsofta, tu su proizvođači računala.

iPod

iPod je na tržište izašao 2001. godine, i također je bio revolucionaran proizvod. Proizvod koji je popularizirao MP3, te prvi uspješan MP3 player. OK, prva generacija možda nije bila baš nešto, ali to je definitivno jako utjecajan proizvod.

Da njega nije bilo, nisam siguran da bi današnje tržište MP3 playera (OK, prije godinu dana, sad slušamo glazbu sa svojih mobitela) bilo tako veliko. Naravno, tu je i ona dizajnerska strana, pa tako jako puno MP3 playera izravno podsjeća na jako popularan iPod.

O popularnosti iPoda ovdje u Hrvatskoj nije baš jednostavno govoriti, jer ga nema baš puno ljudi (više ih ima neke jeftine kineze), ali vani, definitivno je popularan.

iPhone

iPhone je na tržištu od 2007. godine, i to je jedan od najutjecajnijih Appleovih proizvoda uopće. Nakon njegovog izlaska, tržište su poplavili brojni touchscreen modeli koji su definitivno bili lošiji od iPhonea, a tek su se nedavno počeli pojavljivati malo kvalitetniji konkurenti, no iPhone nema pravog konkurenta, barem dok on do kraja ne ostvari svoj utjecaj. Ironično, ali tek kad iPhone 100% promijeni živote svih nas, onda će doći pravi konkurenti. Ne brinite, sve će se razjasniti u trenutno.

Prva iPhoneova “misija” je gotova i to je to. Posve je sigurno da će u dogledno vrijeme, touchscreen smartphonei istisnuti klasične mobitele, te će zapravo smartphone biti ono što očekujemo od najobičnijeg modela.

Druga iPhoneova “misija” trenutno je u tijeku i uspješno se provodi. Opet su svi “uključili svoje kopirke” i počeli su kopirati koncept App Storea. Odjednom, svaka platforma, polako dobiva svoje verzije App Storea (sa malo različitim imenima, npr. App Catalog) gdje korisnici vrlo jednostavno mogu updateati svoj mobitel nekom novom funkcijom, ili downloadati (kupiti) neku novu igricu.

I zadnja misija, koja će definitivno promijeniti koncept Interneta i njegovih sadržaja, po mojem mišljenju počet će se ispunjavati do kraja sljedeće godine, a vrlo vjerojatno i ranije. O čemu se radi? iPhone je prvi uređaj s kojeg je postalo normalno pristupati Internetu, i to preko 3G mreže. Dok iPhone nije izašao, nitko vjerojatno nije mislio da će uskoro moći imati YouTube, Wikipediu, ali i društvene mreže u džepu, uvijek uz vas.

Zbog iPhonea, uvedene su podatkovne tarife. U većini zemalja postoje i unlimited (flat) tarife, dok kod nas postoje one od 1, 2 i 5 GB. Definitivno dovoljno za nešto što je skoro do jučer bilo nezamislivo. Ono što će se dogoditi je, da će se ova iPhoneova ekskluziva premjestiti u normalne tarife, pa će tako postati normalno uz svaku tarifu nuditi i neki određeni podatkovni promet. Tada će Internet postati dostupan uvijek i svugdje, preko svakog mobitela, i to je ono što će nam promijeniti život. Spoznaja da Internet više nije “ekskluziva” računalnog monitora, već je to nešto što postaje dijelom života svih nas, odsada i uvijek uz nas.

Ostali utjecaji

Apple je naravno imao utjecaja i na mnoge druge stvari. Pružaju jedan od najpopularnijih načina nabave legalne glazbe, iTunes Store, koji nažalost nije još u Hrvatskoj. On je toliko promijenio tržište glazbe, a i sveukupno je utjecao na način digitalne distribucije sadržaja.

Apple je također utjecao i na Windowse. Windowsi dolaze sa wid… mislim, gadgetima, i također nude revolucionaran način indeksiranja i brze pretrage računala nazvan Spot… Windows Search. Naravno, tu je i taskbar Windowsa 7, za koji Microsoft kaže da je ideju uzeo iz svoje prve verzije Windowsa. Je, moš’ mislit. Možda samo izgled. A po tome Windows 1 imali su mogućnost manipulacije otvorenim i zatvorenim aplikacijama, postavljanje prečaca. A uostalom, cijeli taj suživot prečaca i pokrenutih aplikacija neodoljivo podsjeća na Dock, ali neeee, pa to nije Dock, jer nema onaj fancy zoom, to je ipak Windows 1 taskbar.

Budućnost

Apple toliko, utjecajima iz prošlosti (all-in-one) i sadašnjosti (iPhone, multitouch,…) zaista utječe na našu sadašnjost, a ne želim zamišljati što će se dogoditi u bližoj budućnosti (npr. sigurno poboljšanje u standardima računalnih monitora, veće rezolucije (1920×1080 na 21.5”, na to mislim :), popularizacija 16:9 ekrana, a to samo što se tiče monitora, tu će se dogoditi još mnogo toga, a prvo je ono sa Internetom u džepu na svakom mobitelu. :P )

Za kraj, svim Apple haterima, osvrnite se malo oko sebe i vidjet ćete koliko ta, tako vam mrska tvrtka, ima utjecaja, vjerojatno i direktno na vas.

Oglasi

Smjernice za dobar dizajn

Možda ste najbolji majstor za HTML i CSS na svijetu, poznajete sve mogućnosti, napredne selektore, znate sve elemente, kodirate “najsemantičkiji” kod na svijetu, ali to vam ništa ne vrijedi ako nemate smisla za dizajn. Bolje prepustite posao pravim dizajnerima, samo nemojte raditi sami dizajn od kojeg će mi otići oči i crknuti monitor. :) U svakom slučaju, ako ipak sami dizajnirate, dobro je slijediti neke smjernice koje se mogu globalno primjeniti, od blogova, korporativnih stranica, preko servisa, pa sve do portala.

Font

Teorija

Tekst je sve. Na web-stranicama najbitniji je sadržaj, koji je najčešće tekstualan (osim na YouTube-u, Flickru, i ostalim specijaliziranim servisima).

Odaberite čitljiv font, pristojne veličine i pravilnih proreda. Odabir čitljivog fonta stvar je pristojnosti i kulture. :) Definitivni font na koji ne trebate niti pomišljati je Comic Sans (odmah zaboravite ovo ime, i izbrišite font iz Fonts mape). U redu, kad smo se riješili tog fonta, idemo vidjeti što valja. Možete koristiti mnogo toga, no meni su osobno najljepši Arial, Georgia i Trebuchet MS. Za naslove su dobri fontovi Myriad Pro, te Lucida Grande (ili Lucida Sans kao fallback).

Praksa

  • Font-Family lista: Ovdje vam je zadatak postaviti listu fontova. Prvo se postavlja glavni (najpoželjniji) font, zatim fallback fontovi (od najbolje pa do najlošije zamjene), na kraju se postavlja vrsta fonta (serif, sans-serif,…). Primjer dobre liste: font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  • Proredi: Vrlo jednostavno – određuje visinu jedne linije teksta (line-height). Postavlja se kao line-height: 18px;. Vrlo jednostavno. :)

Primjer

Koji tekst biste radije čitali?

Koji tekst biste radije čitali?

Boje

Tu i nema neke filozofije. Možete koristiti bilo koju boju (odavno više nitko ne mari za web-safe boje, jer svi uređaji mogu prikazati sve (većinu) boja približno isto). Koristite boje koje nisu prenapadne i prekričave, ne koristite standardnu crvenu, žutu i plavu (#ff0000, #00ff00, #0000ff).

I naravno, i tu postoji pokoji trik. Nemojte koristiti čistu crnu (#000) i čistu bijelu (#fff), već koristite neku malo svjetliju crnu, ili tamniju bijelu (jaaaako svijetlu sivu zapravo). U dizajnu koristite možete koristiti sve boje, iako je dobro držati se standarda koji si sami postavite. Ako vam se dizajn sastoji od nenapadnih, smirujućih boja, ne možete staviti nešto prenapadno, jer time bodete ljudi u oči.

Whitespace

Teorija

Pustite sadržaj da diše (ne, Bronhi bomboni ne pomažu ovdje ;). Ne mora sve imati margine od 0 piksela. :) U ovo ulaze i proredi, koji su već spomenuti, ali također, trebali biste imati nešto razmaka između naslova, paragrafa, slika, ili kakvog već sadržaja na stranici. Ako imate mjesta između sadržaja, posjetitelj (čitatelj) ima mjesta gdje može “odmoriti”.

Ako želite znati kako bi bilo tom jadnom čitatelju koji se mora probijati kroz sadržaj (zapravo i neće, već će otići sa vaše stranice konkurenciji), zamislite kako bi vam bilo kupovati u supermarketu u kojem su police s namirnicama razmaknute toliko da se jedva provučete kroz njih. Biste li kupovali kod njih? Ili biste otišli konkurenciji? A konkurencije kod supermarketa ima dosta. Vjerojatno kao što postoji i vaša web konkurencija.

Praksa

  • Margine: Margina (u CSS-u) je razmak van elementa. Znači, ukoliko je margina vašeg DIV-a 10px, to bi značilo da je sve od njega odmaknuto minimalno 10px (uzmite u obzir i da drugi elementi mogu imati margine, a one se zbrajaju). Primjer: margin: 5px 5px 0px 5px;. U ovom primjeru element će imati gornju, desnu i lijevu marginu 5px, a donja margina bit će 0px. (redoslijed kao kazaljka na satu, krenite od 12 (gore), pa 3(desno), 6(dolje) i na kraju 9(lijevo)
  • Padding: Padding je isti kao margina, samo što nije van elementa, već u elementu. Znači, element koji ima padding 5px, imat će sve unutarnje elemente odmaknute od unutarnjeg ruba 5px. Sintaksa je ista kao i za margine: padding: 5px 5px 0px 5px;.

Forme

Teorija

Forme služe za interakciju s posjetiteljima. Preko njih posjetitelji traže sadržaj, unose komentare, ispunjavaju ankete, registriraju se, izrađuju narudžbe. Ovdje je bitno da vam forme ne zbunjuju posjetitelja, da su jednostavne i lake za ispuniti, te naravno da dobro izgledaju.

Tu primjenite sva pravila koja smo dosad naučili, dajte elementima da dišu, postavite dobar padding, te sve to učinite zamamnim. Postoji i trik koji čini textboxove mnogo ljepšima, a to je da postavite lagani bijelo-jakosvijetlosivi gradient. Također je bitno istaknuti i koji element je trenutno aktivan. I to je to, ništa komplicirano.

Praksa

  • Dohvaćanje određenog tipa: Stilizirati određeni tip inputa možete putem selektora input[type="tip-inputa]". Tip inputa može biti password, text, ili koji već element želite stilizirati.
  • Fokus: Ako želite poseban stil za element koji je u fokusu, dohvatiti ga možete sa npr. input[type="text"]:focus. Jednostavno, zar ne?

Primjeri

Koju formu biste radiji ispunjavali?

Koju formu biste radiji ispunjavali?

Dok slijedite smjernice,…

Naravno, ovo nisu sve smjernice, ima još toga dosta što čini dobar dizajn, ali ako slijedite ove, najosnovnije, od lošeg dizajna, možda možete napraviti koliko-toliko solidan dizajn.

Ako vam fali inspiracije, prosurfajte brojnim CSS galerijama, gdje ćete zasigurno dobiti mnogo ideja, ali ne kopirajte. CSS galerije služe samo za inspiraciju, a ako se ne možete suzdržati od krađe, onda radije pročitajte neki časopis, jer i oni su dizajnirani, a vama treba inspiracija, :)

Budućnost web dizajna (2)

Nakon napisanog teksta o budućnosti web dizajna u kojem sam zapravo htio govoriti samo o izgledu stranica, a dok sam pisao nešto me vuklo da idem i dalje od dizajna, pa su tako spomenuti i Silverlight, jQuery, HTML5 i još poneka sitnica.

Eto, sad mi je bilo dosadno, pa rekoh, ajde da napišem i drugi dio ovog teksta. Naslov copy-pastean i dodano u zagradi broj 2. Da se vidi da je drugi dio. Planiram editirati i prvi dio kako bih dodao na kraj link na ovaj drugi. No to kad završim pisanje ovog posta. :)

OK, nakon malo offtopica, ide pravi tekst.

Da vas prvo podsjetim. Rekao sam da se nadam kako će sa web stranica nestati i vertikalni scrollbar te će se sve moći prikazati bez potrebe za scrollanjem (onda možemo iščupati kotačiće iz miša :). Veliki portali koristit će auto scrollere (lijevo – desno npr.), tabove i sve to pomoću jQueryja ili sličnog Javascript frameworka. Na taj način može se donijeti mnogo informacija bez potrebe za scrollom. (Naravno, ukoliko krene taj trend, a ja tvrdim da hoće). Još sam rekao i kako će se web dizajnerima olakšati život dolaskom tehnologija HTML5 i CSS3. Poseban je tu CSS3 pomoću kojeg ćemo moći konačno napraviti opacity, shadow ili te zaobljene rubove bez potrebe za otvaranjem Photoshopa. No naravno, kad se CSS3 počne širiti i postane nam tako lagano napraviti npr. zaobljene rubove oni će izaći iz mode, a izmislit će se nešto novo. Onda ćemo ponovno Photoshopirati i kad nam najave da će nam olakšati izradu tog određenog efekta u CSS4 onda ćemo jedva čekati CSS4. Kad dođe CSS4 taj efekt zamijenit će se nekim za koji ćemo čekati CSS5, itd.

Zašto će se to događati? Zato jer kad nešto postane lako dostupno za izradu počet će se zloupotrebavljati i onda će postati iritantno (Marquee, anyone?). Mogu samo misliti koji će se kaos događati sa custom embedded fontovima. Počet će nam nabijati na nos hrpetinu jedva čitljivih i odvratnih fontova. Naravno, profesionalni web dizajneri znat će dobro iskoristiti tu opciju, te nam više neće biti potreban sIFR. No, zamislite ovo. Hrpetina stranica koje dizajniraju ljudi koji nemaju pojma o dizajnu. Svatko stavlja svoj neki ludi font. Ljude počinju živcirati ti custom fontovi. Razvija se Custom-Font Blocker (kao i pop-up blocker, samo za blokiranje custom fontova). Ljudi to počinju koristiti i mi koji ćemo to znati pametno iskoristiti nećemo moći jer su ljudi uključili Custom-Font blockere. Sjetite se samo, i pop-up je nekad trebao biti koristan, ali većina je pop-up prozore počela zloupotrebljavati i razvijeni su pop-up blockeri.

Postoji i jedna stvar koju bih htio povući. Nažalost, nakon određenog razmišljanja kažem da Silverlight neće uspjeti. Kad malo razmislim, ipak je to Microsoftova tehnologija, a kod njih uvijek nešto po zlu. Ne znam niti koliko ljudi ima instaliran Silverlight, samo znam da ga od mojih poznanika nema nitko. Meni dovoljno. Nisam razmišljao. Meni se svidio Silverlight i još uvijek mi se sviđa nakon što sam vidio onu izvedbu Bug TV-a u Silverlightu. Kada malo više istražim o Silverlightu onda ću početi o njemu govoriti sa sigurnošću.

OK. Idemo malo detaljnije na HTML5. On nam donosi nove tagove poput <audio> i <video> za umetanje audio i video elemenana na stranice bez upotrebe Flasha ili Silverlighta. Dalje, možemo zaboraviti na <div class=”header”>, <div class=”clanak left”>, itd. Zamijenit će ih novi elementi <header>, <content>, <article>, <aside> i <footer>. To bi ukratko bilo to o HTML5.

I za kraj, malo o browserima. Pokušajte pogoditi što će se dogoditi nakon što svi browseri prođu ACID 3. Da, bravo, pogodili ste. Počet će utrka browsera za ispravnim renderiranjem ACID 4 testa. Naravno, svi će raditi nešto, ali nitko neće postići ništa dok jedan od njih ne uspije prvi. Onda kreće utrka ovih ostalih. I tako će to uvijek biti. Kad svi “polože” ACID 4 doći će ACID 5. Baš kao i sa primjerima već navedenima u tekstu.

Oho, counter riječi već pokazuje veliku brojku. Mislim da je ovo kraj. Ukoliko se pitate postoji li mogućnost za treći dio ovog teksta, da postoji. Čim utvrdim o čemu ću pisati u trećem dijelu, koji će vjerojatno biti nadovezivanje na ovaj, drugi dio, baš kao što se ovaj nadovezuje na prvi.

Ajde sad, gotovo, kraj, nema više. Odite prosurfati po drugim postovima ovdje, valjda ima još nešto zanimljivo.

I najavljujem slijedeći post… uskoro (a samo ja znam kad je to ;)

Napomene:

  1. Trenutni broj draft postova mi je nula. Tak da… čekajte :)
  2. Nije mi se dalo prolaziti (čitati ponovno tekst) koji pokazuje tretnutno 740+ riječi.
  3. (Odnosi se na točku broj 2.) Zbog toga slobodno recite sve riječi koje su krivo napisane ili rečenice koje vam nemaju smisla. Da ih mogu ispraviti.
  4. Stvarno nisam pročitao cijeli tekst. Krenuo sam ga pisati prije možda pola sata do sat vremena i sad je gotov. Ne da mi se čitati.
  5. Komentirajte. Želim znati što vi mislite.

Budućnost web dizajna

Na webu postoje raznorazni stilovi kojih su se ljudi pridržavali i kopirali ih. Jedan od najpoznatijih je Web 2.0 stil koji je tako nazvan jer se nalazio na svim 2.0 sajtovima, što god to značilo, jer Web 2.0 kao pojam nikad nije definiran, postoje samo tekstovi i usporedbe. Kažu da je Web 2.0 “kad korisnici generiraju sadržaj”, ali to sad nije bitno.

Web 2.0 kao stil donio je mnogo dobrih stvari u dizajn. Ako pogledate neke stranice kako su izgledale prije (www.archive.org) uglavnom ćete vidjeti da su fontovi bili mali, da je sve bilo stisnuto i nepregledno, uglavnom. “Web 2.0”  je u dizajn uveo čitljivija i veća slova, više praznog prostora (whitespace), jasnu navigaciju i još mnogo toga. Donio je i one stvari koje zapravo nisu bile dobre jer se nije pokazivala kreativnost dizajnera. Tako su svi počeli slijediti trend shiny stranica. Imali ste logo koji je obavezno morao imati reflekciju (odsjaj), bedževe, beta oznaku, ako to niste imali, žalosno, nisu vas smatrali modernima, iako je vaš site imao sva obilježja weba 2.0 osim dizajna. U zadnje vrijeme događa se nešto drugo. Svima su izgleda dosadile sjajne stranice i konačno se počelo unositi malo kreativnosti u web dizajn. Naravno, sve dobre strane “Web 2.0” stila ostale su (whitespace, čitljivost, preglednost…). Neki su svoje webove sa “sjajne police” preselili u više prirodniji svijet prirodnih tekstura (drvo, papir…). U stranicama se sada vidi i osobnost (što je vrlo bitno kod osobnih stranica, blogova i npr. portfolia nekog dizajnera). Naravno, nisu sve stranice takve i taj stil trebao bi ostati kod navedenih osobnih stranica i blogova. Portali, korporativne stranice, socijalne mreže i raznorazni servisi trebali bi biti što “čišći”, ali naravno, uz dašak osobnosti same tvrtke (ukoliko je riječ o korporativnim stranicama). Dizajn loga treba otići dalje od refleksije i oznake beta. Sva sreća, to se počelo napuštati.

Slijedeća vrlo bitna promjena i prekretnica u web dizajnu je rezolucija. Trenutne širine web stranica su ispod 1000 px kako se ne bi pojavio horizontalni scrollbar u browseru. Rezolucije monitora postaju sve veće, a web stranice ostaju iste. Kada popularnost većih rezolucija (1920×1200) naraste do te mjere da je broj onih manjih zanemariv, moja pretpostavka je da će se web stranice širiti, te da će tako, uz horizontalni, i vertikalni scrollbar postati nepoželjan. Sve informacije prikazat će se bez potrebe za scrollanjem, a tu će biti korisna i mogućnost koja dolazi sa CSS3, a to je columns (stupci). Tekst će se razlamati u stupce radi lakše čitljivosti (baš kao i u novinama) jer bi tekst koji se proteže širinom od cca. 1900px bio jako težak za čitanje. Zbog toga bi trebao biti razlomljen u nekoliko stupaca. Što se tiče naslovnica portala koji moraju donijeti mnogo informacija, tu će poslužiti raznorazne tehnike autoscrollanja (poput onog horizontalnog Showtime na naslovnici T-Portala)

Što se tiče ostalog, stranice u čistom HTML-u potpuno će izumrijeti (zapravo već i jesu, ali postoji tu i tamo neka koja je samo HTML). Svaka stranica imat će neki backend pogonjen nekim server-side jezikom (npr. PHP, Ruby…). Što se tiče front-end dijela, koristit će se više tehnologija poput jQueryja za efekte na stranicama, a nadam se da će i Silverlightu popularnost porasti. Bez obzira što je to Microsoftova tehnologija, vrlo je dobra. Moglo bi se dogoditi da Silverlight i Flash u potpunosti izumru, a da nešto poput jQueryja dobije sve mogućnosti Silverlighta. HTML5 sve će se više koristiti i polako postajati standard. Postat će lakše imati zaobljene rubove, sjene i opacity zbog toga jer će se sve to definirati u CSS-u. Znači, nema više izrade zaobljenih rubova u Photoshopu. Konačno će se i fontovi korišteni na stranicama odmaknuti od Ariala, Verdane, Helvetice, Times New Romana i ponekad Georgie. Više će ljudi koristiti custom fontove (koji će se definirati u CSS-u, a korisnik ih ne mora imati instalirane), a nadam se i većem korištenju predivnog fonta Calibri, kojeg trenutno posjeduje svatko tko ima instaliranu Vistu ili Office 2007.

Sve u svemu, čeka nas jedna vrlo zanimljiva web budućnost. :)

UPDATE: Objavljen drugi dio članka. Pročitajte ga odmah. :)