+ 381 64 17 39 157 office@cyclopdesign.com

Lepota ultra-minimalističkog web dizajna

Prethodnih nekoliko godina, bili smo svedoci mnogih trendova koji su se pojavili i zastareli. Dok će nekoliko trendova dizajna oduvek biti evergrin, oni koji generalno utiču na nove trendove koji su se pojavili i koji će se pojaviti.

Jedan vanvremenski trend, koji je možda malo zapostavljen u poslednje vreme je minimalizam. U poslednje vreme se ovaj trend vraća, evoluirajući u još bolji oblik koji dizajneri zovu “ultra minimalizam”.

Kao standardni minimalizam, neuvežbanom oku to može delovati kao dizajn bez nekih ključnih elemenata, koji su zamenjeni praznim prostorom. Međutim, ovaj trend je više od toga. Sposobnost pravilnog odlučivanja koje elemente treba izbaciti, a koje zadržati je sama po sebi sposobna veština i ta osobina čini razliku između vrhunskih i prosečnih dizajnera.

Svaki piksel mora biti pažljivo urađen da bi proizveo optimalne rezultate. Negativan prostor mora biti dosledno primenjen. Uz stručno znanje tipografije i oko za izbor kvalitetne kombinacije boja, samo su neke od kvalitetnih sposobnosti koje mora imati kvalitetan dizajner da bi uspešno napravio ultra minimalistički sajt. Kako izgledaju ovakvi sajtovi? Uglavnom su jako lepi. Između ostalog, uverite se sami.

 

Cole Townsend

 

izrada-web-sajtova-minimalan-dizajn1

 

Sang Han

 

izrada-web-sajtova-minimalan-dizajn2

Tim Brack

 

izrada-web-sajtova-minimalan-dizajn3

 

Dennis Adelmann

 

izrada-web-sajtova-minimalan-dizajn4

Brian Nathan Hartwell

 

izrada-web-sajtova-minimalan-dizajn5

 

Velvet Hammer

izrada-web-sajtova-minimalan-dizajn6

 

Kerem Suer

izrada-web-sajtova-minimalan-dizajn7

Rob Wootten

 

izrada-web-sajtova-minimalan-dizajn8

 

We ain’t plastic

izrada-web-sajtova-minimalan-dizajn9

 

 

Ryan Paonessa

izrada-web-sajtova-minimalan-dizajn10

 

 

Jessica Caldwell

 

izrada-web-sajtova-minimalan-dizajn11

 

Buero

izrada-web-sajtova-minimalan-dizajn12

 

 

Socket Studios

 

izrada-web-sajtova-minimalan-dizajn13

 

Michiel de Graaf

izrada-web-sajtova-minimalan-dizajn14

 

Alessandro Scarpellini

 

izrada-web-sajtova-minimalan-dizajn15

Piet Oudolf

 

izrada-web-sajtova-minimalan-dizajn16

Prvi sajt u svetu je objavljen pre 25 godina

Prvi sajt u svetu je objavljen pre 25 godina

Dana 6.8. pre 25 godine, objavljen je prvi internet sajt na svetu. Ovaj sajt je kreirao Tim Berners Lee i sajt je bio obična stranica sa tekstom, sa pojedinim rečima koje su bile linkovane ka drugim stranicama. Ovako je Berners Lee postao pionir nečega bez čega ne možemo zamisliti život danas.

“WWW (world wide web) je projekat koji spaja tehnike pronalaženja informacija i hiperteksta, i predstavlja jedan lak, globalni informacioni sistem” – rekao je Berners Lee o prvom objavljenom sajtu na svetu. Projekat je osmišljen sa ciljem da informacije postanu dostupne svima. Berners Lee je želeo da internet bude mesto gde ljudi razmenjuju informacije, širom sveta, kroz dokumente, tekstove, linkove, uz jednostavan sistem pretrage.

 

 

izrada-web-sajtova-25godina1

 

 

Prvi korak ka stvarnosti se desio 6.avgusta 1991 godine, bez mnogo medijske pompe, kada je Berners Lee, iz kancelarije CERNa u Ženevi, objavio prvi sajt. Hostovan na http://info.cern.ch domenu, ovaj sajt je sadržao osnovne instrukcije o tome kako web radi, kako pristupiti dokumentu i podesiti sopstveni server. CERN je izbrisao stranicu sa ovog domena 2013 godine.

 

izrada-web-sajtova-25godina2

 

 

Geneza interneta

Neki drugim datum se može slaviti kao stvarni rođendan weba. 12 marta 1989 godine, Berners Lee je objavio svoj predlog za ono što je on nazvao upravljanjem informacijama.

Kao pre svega poslovni predlog, Berners Lee je zamislio web kao način za sprečavanje gubitka informacija u poslu i u naučnim zajednicama.

U to vreme on je radio kao programer u CERNovoj evropskoj organizaciji za nuklearna istraživanja, gde se susreo sa velikim gubitkom informacija i podataka. I on sam je video kako je teško rešiti probleme gubitka podataka, koji su dobijeni mukotrpmnim i dugogodišnjim istraživanjima.

Gubitak informacija u institucijama kao što je CERN može biti jako bolan, ali u ovom slučaju CERN je bio model ostatka sveta, jer se suočavao sa problemom sa kojim će se ostatak sveta suočiti par godina kasnije.

Rešenje Berners Lee-a je univerzalno povezan informacioni sistem u kome su dokumenti povezani jedni sa drugima na jednostavan način, tako da svako može doći do podataka koji su mu potrebni.

Šef Bernersa Lee-a u CERNu, Mike Sendall je napisao belešku na kojoj je pisalo “nejasno, ali uzbudljivo”, pre davanja zelenog svetla ovom celom konceptu.

 

izrada-web-sajtova-25godina3

Godinu ipo dana kasnije, neposredno pre Božića 1990 godine, Berners Lee je izgradio infrastrukturu za internet i dizajnirao prvu web stranicu. On je napisao takozvani hipertekst protokol (HTTP), koji definiše putovanje informacija od računara do računara, dok hipertekst jezik (HTML) definiše raspored i elemente na stranici i uz pomoć njega je iskodirana prva stranica.

Prvi sajt je objavljen 6.8.1991 i bio je postavljen na Berners Lee serverskom kompjuteru i sadrćao je poruku koja glasi “Ova mašina je server – Ne gasiti je”.

 

izrada-web-sajtova-25godina4

 

Jedna od prvih praktičnih upotreba ovog izuma bio je interni imenik za zaposlene u CERNu koji je Bernd Pollermann objavio. Naredne godine, objavljena je prva slika na webu, parodija na ženski pop bend Les Horribles Cernettes.

Godine 1993 internet je postavo dostupan javnosti, što znači da je svako mogao da kreira server i dizajnira i kodira sajtove. Iste godine, objavljen je Mozaik pretraživač i prva WWW konferencija, poznata kao “Woodstok weba”.

 

 

izrada-web-sajtova-25godina5

 

Sledeća faza

Četvrt veka kasnije, web preuzima dominantnu ulogu u svakodnecnim životima. Društvene mreže, pretraživači, online kupovina, blogovi su postali deo naše svakodnevnice. Berners Lee je razvio statički sajt, a danas webom dominiraju interaktivni sajtovi, kodirani u novim jezicima, prepuni fotografije, video materijala i animacija.

Kako zamišljamo razvoj weba? Možemo očekivati da web nastavi da zauzima bitan deo na računarskim monitorima i da napreduje, samim razvojem i usponom tehnologije. Biometrijsko logovanje, super brze konekcije i još mnogo toga će tek predstavljati novu eru weba.

 

Najbolji web development alati koje verovatno ne koristite

Najbolji web development alati koje verovatno ne koristite

Kao web developeri uvek ćete nailaziti na bagove u kodovima, kao i na nove razvojne tehnike koje biste mogli da primenite na već postojećim sajtovima. Web sajtovi oslikavaju ukupno stanje digitalnog sveta i zbog toga bi trebalo da korisnicima ponude najbolje dostupne performanse. Vaš posao je da obezbedite da se to i dogodi.

Alati za web development mogu biti neverovatno spretno konstruisani. Pojavljuju se u svim formama, kao dodaci browser-ima i plagini što bi trebalo da vam omogući kreiranje najboljeg mogućeg sajta. Oni čine vaš rad produktivnijim i bržim, uz to vam pružajući uvid u najnovije tehnike. Neki browser-i imaju ugrađene web development opcije, ali još uvek je potrebno da nadgledate vaše sajtove u smislu korisničkog iskustva, da biste bili sigurni da su sve performanse na vrhunskom nivou, kao i da budete kreativni u upotrebi web-a.

Verovatno ste već koristili podršku koju pružaju veliki browser-i kao što je Google Chrome. Upoznati ste sa glavoboljom koju vam može stvoriti HTML5 kao i sa važnošću responsive sajtova. Ali šta se zbiva sa alatima koje verovatno do sada niste upotrebljavali?

Ukoliko znate kakve su im odlike lakše ćete proceniti da li vam mogu biti od pomoći, stoga evo pregleda nekih od najboljih dostupnih web development alata.

 

CSS Guidelines

CSS-Guidelines

Počinjemo sa nečim zaista veoma korisnim. CSS Guidelines su kreirani od strane nezavisnih Consultant Front-end Architect iz Ujedinjenog kraljevstva, i nisu namenjeni početnicima. Ovo su high-level saveti čija upotreba za rezultat ima bolji CSS. Čak i najbolji među web developerima bi morali povremeno da izglancaju svoje veštine.

Uputstva idu od sintakse preko formatiranja, komentara, imenovanja konvencija, CSS selector-a do delova pod nazivom Specificity i Architectural. Autori neprestano dodaju nove informacije tako da ste uvek u toku sa najnovijim zbivanjima na ovom polju.

 

Play Framework

Play-Framework1

Play Framework je vrhunski alat za izradu web aplikacija sa Java i Scala tehnikama. Ekstremno je developer-friendly budući da su browser i text editor sve što vam je potrebno. Ovaj alat koristi stateless web tier i potpuno asinhroni model baziran na Akka.

A sada muzika za naše uši: pravljen je sa mobile responsivnošću na umu i može da pravi aplikacije. Možete se pouzdati u njega, većina Java libraries može biti upotrebljena, a complier i runtime su na JVM što znači da vaše aplikacije neće imati problem sa brzinom.

 

Dimensions

Dimensions1

Ovo je open source Chrome Browser ekstenzija. Dozvoljava vam da izmerite sve što vidite u pretraživaču, kao što su slike, input polja, buttons, videos, gifs, tekstovi i ikonice. Posebno je korisna kada napravite mock-up sajta u PDF formatu, jednostavno je ubacite u browser i izmerite elemente. Možete da nasetujete shortcut sa tastature u Chrome setting-u na kraju liste ekstenzija tako da brzo možete da uključite ili isključite alat.

 

Apache Couch DB

Apache-Couch-DB1

Oni sebe opisuju kao „data bazu za web“. U pitanju je open source proizvod koji vam omogućava da skladištite dokumente i podatke na klaudu sa JSON dokumentima, zatim upotrebite Index opciju, kombinujete i transformišete svoj dokument koristeći Java Script.

Možete pretraživati svoje indekse preko vašeg pretraživača, via HTTP, a uz to imate notifikaciju izmena u realnom vremenu tako da možete da pratite vaš web development. Sve ovo dolazi u paketu sa interfejsom lakim za upotrebu, gledano sa administratorske pozicije.

 

Flynn

Flynn1

Flynn koristi integraciju različitih komponenti za kreiranje sistema. Komponente međusobno „razgovaraju“ i adaptiraju se, što znači da razvoj vaše aplikacije kao i vaše baze podataka mogu da budu lako upravljive. Alat automatski pokreće i radi scaling aplikacije, što biste inače morali da obavljate ručno stavku po stavku. Izgrađen je na setu sržnih API. Tako možete da proširite ili kastomizujete svoj proizvod u bilo kom okruženju.

 

Bug Muncher

Bug-Muncher1

Web developeri stalno slušaju žalbe korisnika od momenta kada sajt bude napravljen, bez obzira na količinu sprovedenog testiranja. Uvek će biti bagova i ličnih preferenci. Bug Muncher obezbeđuje uvid u ovu vrstu feedback-a na jednostavan i lak način.

Klijenti jednostavno samo treba da hajlajtuju problem na vašem sajtu, a alat pravi screenshot od toga. Ovo otklanja potrebu za razmenom mejlova i telefonskih razgovora u kojima neko pokušava da objasni tehničku prirodu problema. Vitalni podaci, kao što su ime i verzija pretraživača i operativnog sistema, vam dolaze u izveštaju tako da na jednom mestu imate sve što vam je potrebno kada pristupite rešavanju problema.

 

Uptime Robot

Uptime-Robot1

Još jedna oblast web razvoja koja bi trebalo da se konstantno odvija u pozadini je monitoring performansi web sajta. Uptime Robot za vas radi baš to. Proverava 50 od vaših monitora na svakih 5 minuta, uključujući HTTP, Ping, Port kao i keywords. Možete da izaberete način na koji će vam stanje biti javljeno – mejlom, SMS-om ili čak putem Twitter-a. U mogućnosti ste da vidite uptime, downtime kao i response time.

 

Uilang

Unilang

Uilang je minimalistički i ui fokusiran programski jezik za web dizajnere. Dozvoljava vam da kreirate aspekte vašeg sajta, poput popover-a, tabova, galerija i overlay-a. Dizajniran je na način koji olakšava upotrebu onima koji nemaju mnogo prethodnog progamerskog iskustva. Jednom kada je kod ubačen korisnici mogu jednostavnim klikom na relevantno dugme da sakriju notifikacije, upotrebe toggle switch i vide drop-down accordions. Ovo dodaje interaktivnost sajtu.

 

Scala

Scala1

Još jedan programski jezik, Scala, dozvoljava vam da konstruišete elgantne hijerarhije za maksimalnu reupotrebu kodova i ekstenzibilnost, kao i za implementaciju njihovog ponašanja upotrebom funkcija višeg reda. Imate mogućnost integracije sa Javom dok Scala radi na JVM. Dodatno, fleksibilnost Jave se ogleda na Scali pomešana sa moćnim klasama za višestruko nasleđe. Odatle možete da odete u upoređivanje obrazaca i da kreirate funkcije višeg reda.

Postoji zajednica Scala korisnika, tako da nećete biti sami dok isprobavate njene mogućnosti.

 

Haml

Haml1

Kao prvo Haml je akronim za HTML abstraction markup language. Kao drugo njegov osnovni primcip sastoji se u tome da markup operaciju učini prelepom. Markup ne bi trebalo da bude samo teranje browser-a da renderuje željenu stranicu. On bi trebalo da bude user-friendly kao i renderovani rezultati poređani na korisniku lako razumljiv način.

Haml kreira čist kod budući da izbegava ponavljanje teksta kada je svaki elemenat imenovan dva puta; umesto toga on se uzda u indentaciju. Jasno i jednostavno on opisuje HTML bilo kog web dokumenta bez upotrebe inline koda. Inline page templating sistemi poput PHP, ASP i ERB su zamenjeni upotrebom Haml-a. Nema potrebe za eksplicitnim kodiranjem HTML u templejtu.

 

Converse

Converse1

Ovaj alat vam omogućava da opciju četovanja na vašem sajtu nasetujete kao single-user chat ili multi-user chat rooms. Korisnici mogu da pošalju zahtev za čet, da ga prihvate ili odbiju, a mogu i da dodaju statuse kao što  su „zauzet“ ili „dostupan“, kao i da prikažu trenutni status kucanja.

Ima mogućnost prevođenja na 15 različitih jezika i može da bude screencast-ovan za četovanje sa prijateljima na Gmail-u ili na jabber.org. Converse može da bude integrisan sa mnogim web platformama, kao što su WordPress ili Roundcube, a budući da je napisan u Javascriptu kreće se direktno kroz vaš pretraživač.

 

HumHub

HumHub1

Još jedan alat koji korisnicima vašeg sajta omogućava međusobno četovanje. Ipak HumHub ovo radi na daleko višem nivou budući da pomoću njega možete da kreirate sopstvenu društvenu mrežu. Ima user-friendly interfejs i čini da biznis, školski, project-group ili sajtovi prijateljskih grupa komuniciraju i sarađuju na jednostavan način.

Svaki korisnik sajta ima sopstvenu „V card“, koja pruža pregled njihovog profila, uz to je moguće i pravljenje grupa. Korisnici mogu da postuju, slede, komentarišu i lajkuju sadržaje drugih ljudi, ili da jednostavno šeruju fajlove i pričaju o njima. Potpuno je bezbedan i predstavlja self-hosted rešenje, takođe je i prilagodljiv u smislu dodavanja aplikacija. Kao i svaka dobra društvena mreža i HumHub je mobile-friendly.

 

Impulse

Impulse1

Zasnovan na specifičnim interakcijama dinamičke fizike ovaj alat vašem sajtu dodaje interaktivnost. Na primer možete da kreirate Chat Heads poput onih Facebook-ovih, pull-down meni, inertia scroll-ovanje, Oridomi Cover i Bouncy Scroll. Sve opcije su dizajnirane tako da rade na mobilnim uređajima bez problema.

Kreiranje dinamičnog sadržaja pomoću Impulse-a radi bolje nego recimo CSS, a smanjeno je i kašnjenje između trenutka kada je animacija generisana i onog momenta kada počinje da se pomera. CSS se pokazao bolji za statične animacije. Impulse je kreirao mnoštvo animacija i uvek radi na novim i novim.

 

Duo

Duo1

Njihova filozofija sastoji se u kreiranju brzih proof-ova konepta, pisanju modularnih komponenti i izgradnji velikih web aplikacija. Duo to radi neverovatno jednostavno kroz jedan package manager, dozvoljavajući vam da napišete front-end kod brzo i bezbolno. Ima prvoklasnu podršku za Javascript, HTML i CSS a podržava i Coffescript i Sass.

Uz command line interfejs u unix maniru, Duo vuče izvore direktno sa GitHub-a sa semantičkim verzioningom. Takođe na zahteva manifest. Duo otklanja boilerplates, koje mnogi package manager-i imaju i zahtevaju da ih koristite tokom testiranja ideje ili izolacije bagova. Ima snažan ekosistem komponenti a scaling je prilagođen pravljenju celokupnih web aplikacija bez teškoća.

 

Monit

Monit1

Monit je fantastičan za nadgledanje vašeg servera i upotrebljava se za error recovery – ovoj jedna od onih aplikacija koje morate da imate da biste skinuli deo tereta sa pleća. Provodi automatsko održavanje i opravljanje i može da izvede smislene posledične akcije u error situacijama. Na primer ako sandmail prestane sa radom Monit će ga pokrenuti i obavestiti vas upozorenjem da biste mogli da brzo preduzmete odgovarajuće korake.

Možete ga koristiti za nadgledanje daemon procesa, kao i sličnih programa na localhost-u, čekiranju promena kao što su timestamp, checksum i size changes. Nadgleda network konekcije sa serverom, što je korisno ako radite na cloud-u. Takođe vam omogućava da testirate programe ili script-e. Obe free i open verzije BSD, mnoge Linux distribucije od .deb do .rpm packages-a, OS X i Solaris .pkg sadrže Monit.

 

Onsen UI

Onsen-UI

Alat namenjen aplikacijama, Onsen UI ima veliku selekciju web baziranih UI komponenti i Java i CSS frejmvorka za pravljenje HTML5, PhoneGap i Cordova aplikacija. Radi sa jQuery i AngularJS a kastomibilan je, na primer, upotrebom Font Awesome.

Naravno ima responsive layout za sve vrste uređaja, menjajući veličinu kolumni za mobilne i tablete. Korisničko iskustvo za browsing aplikacije čini superiornim i brzim, uz to je neverovatno jednostavan za upotrebu.

 

Cinematico

Cinematico1

Cinematico će kreirati responsivni web sajt za vas koji će, osim što je već elegantan i sofisticiran, biti i prilagodljiv vašim potrebama. Možete dodati svoj logotip i background image na primer, ili čak i potrošiti malo novca na tematsku razradu.

Ipak glavna namena ovog alata je apdejtovanje vašeg sajta kad god objavite novi You Tube ili Vimeo video. Linkuje vas sa vašim You Tube i Vimeo playlist-ama, kanalima i account-ima i automatski ih sinhronizuje. Sve ovo je uz to i besplatno, jer u pitanju je open source.

 

Pictura

Pictura1

Traženje slika za web sajt često može biti radno zahtevan zadatak. Iako izgleda da je u pitanju lak posao najčešće to ne bude baš toliko jednostavno.

Pictura vam može biti od pomoći za pretragu Flickr-a bez napuštanja vašeg dizajnerskog okruženja. Nećete biti ometani drugim slikama niti ćete morati da ih downloadujete pa da ih onda ubacujete u svoj posao. Alat direktno pretvara vašu izabranu fotografiju u layer i smešta je na vaše platno. Radi sa filterima tako da možete da izaberete royalty-fre slike bez copyright restrikcija lako i jednostavno.

 

Rollerblade

Rollerblade1

Za slike koje se razlikuju ovo je savršena aplikacija. Dozvoljava korisnicima na smartphone-ima, tabletima i desktopovima da slajduju sliku s leva na desno, a ovo će pokazati pogled iz svih uglova. Radi za prikazivanje zgrada ili lokacija, ili jednostavno za prikaz proizvoda. U situaciji kada je online shopping sve veći biznis ova aplikacija pruža potrošačima maksimalno realno iskustvo.

Sve što web developeri treba da urade je ubacivanje koda na vrhu strane sa vašim CSS, nakon čega sledi nekoliko zahvata na podešavanju rotatora da bi radio ono što želite. Možete imati koliko god želite image rotatora, kao i promenu osetljivosti i izbor da li će se rotacija obavljati automatski ili će biti izvedena korisnikovim vučenjem.

 

Icon Maker

Icon-Maker1

Ikonice i emotikoni su danas svuda prisutni, a lako je shvatiti zašto je tako: jednostavan osmeh može da doda toplinu svakoj komunikaciji, čak iako je u pitanju malo žuto lice. Sa Icon Maker-om možete da kreirate sopstvene ikonice i da ih dodate svom sajtu.

Dovoljno je jednostavan da bi svako mogao da ga koristi, a možda je samo dodatni zabavni element za iskusne web developere u potrazi za sopstvenim personalizovanim ikonicama. Za svega nekoliko minuta možete da kreirate flat ili 3D ikonice sa dropshadow-ima i ostalim efektima.

 

Delorean

Delorean1

Ukoliko želite da primenite Flux koncepte na vaš interfejs, Delorean će vam taj posao veoma olakšati. U pitanju je potpuno agnostički Javascript frejmvork, tako da nećete morati da zavisite od bilo kog frejmvorka. Vaša app-logika će postati jednostavnija od MVC zbog unidirectional data flow-a, uz to će podaci postati konzistentniji kroz celu aplikaciju. Održavajte podatke apdejtovanim bez potrebe za ručnom proverom i data changes izlistavanjem.

Veoma je jednostavan za instalaciju uz upotrebu nekoliko različitih opcija.

 

Cyclon JS

Cylon-JS

Na kraju liste susrećemo se sa budućim svetom robota. Premda je internet prisutan već neko vreme on još uvek nije u potpunosti integrisan u svaki dom. Ovaj alat omogućava developerima da kreiraju mrežu između 35 podržanih platformi. Ovo uključuje Nest i Pebble, plus vaše osnovne postavke kao što je tastatura ili za marketinške svrhe upotrbu Salesforce-a.

Poseduje NPM module tako da može biti direktno aktivan u vašem browser-u, ili ga možete aktivirati u mobilnom preko Chrome konektovane aplikacije ili preko Phonegap mobile app. Podržava HTTP i Socket.io APIs, dozvoljavajući vam da šaljete komande, real-time podatke i da nadgledate vaše robote.

 

Zaključak

Dakle ovo su najbolji alati za web developing na koje možda još uvek niste naišli. Upamtite da uvek postoje alati koje neko razvija da bi vam pomogao u svakodnevnom životu web developera. Savki web developer nailazi na probleme i želi da razvije način za njihovo efikasno rešavanje.

Primetićete i da su svi navedeni alati besplatni, izuzev nekih dodataka koje možete da kupite kada poželite da apgrejdujete alat. Ovo je stoga što oni koji su ih razvijali žele da pomognu drugim ljudima u situaciji kada se nađu pred istim problemom. Takođe, zajednica na webu voli da se međusobno pomaže.

Pregledajte ovu listu alata i vidite da li može da unapredi vaše iskustvo u web developingu. Možda ćete se zapitati kako ste se uopšte snalazili bez nekog od njih.

Pin It on Pinterest