Vrlo je poznato da svi volimo da se držimo nekih osnovnih principa u pravljenju sajta i kreiranju dizajna. Međutim, ponekad vas upotreba novih alatki može stimulisati da napravite nešto što niste znali da umete da napravite i time dodatno pospeši vašu kreativnost.

Prošlo je dosta vremena od kada sam se nešto ozbiljnije bavio dizajnom, pa dok se vraćam starim navikama, naleteo sam na 11 sjajnih alatki koje web dizajneri i web agencije treba da imaju u vidu i želim da ih podelim sa vama.

Podelio sam alatke u 5 kategorija. Svaka kategorija sadrži različite alatke. Naravno da među njima imam omiljene, ali se moje preferencije menjaju u zavisnosti od cilja koji želim da postignem:

1. Proces dizajniranja
2. Saradnja sa klijentom
3. Proces kodiranja
4. Izlaganje dizajna
5. Lansiranje na web I održavanje

Alatke za proces dizajniranja

Proces dizajniranja obično počinje brainstormingom uzoraka, ideja i kolorita. Uključuje kreiranje mokapa dizajna i ponavljanje istih koraka u dizajnu iznova i iznova. Iz tog razloga, ovo je zadatak koga se neki dizajneri užasavaju.

Medjutim, tehnologija je tu da vas spasi. Evo nekoliko alatki koje mogu da pomognu da se ovaj proces ubrza.

1. Pixel Dropr
Pixel Dropr je Photoshop plugin za web dizajnere koji je kreirao UI Parade. Pixel Dropr je koncipiran tako da olakša process web dizajna tako što grupiše sve najčešće korišćene UI elemente u jedan plugin.

Koristeći ovaj plugin, web dizajneri mogu da grupišu dugmad, ikonice, vektore i druge web elemente. Ovi web elementi mogu se prevući u bilo koji PSD fajl direktno iz Photoshopa.

2. Niice

Niice je vrsta pretraživača za dizajnere. Prikuplja rezultate sa Behancea, Degignspirationa i Dribblea. Ako vam treba inspiracija za kreativnost, potražite ovde, nećete biti razočarani. Predlažem da tražite responsive web dizajne.

3. Intuitive Color Picker
Ovo je onlajn alatka za biranje boja. Kada se loaduje, ceo browser je napuni bojom. Možete pomerati miša levo-desno da promenite nijansu, gore-dole da podesite osvetljenje i skrolom menjati saturaciju. Možete odabrati temu boja, kliknuti na ekran da sačuvate tu boju i preći na drugu. Možete kreirati čitavu kolekciju boja. Ovo je screenshot koji prikazuje kako Intuitive Color Picker radi:

Alatke za saradnju sa klijentom

Najteži deo je razumeti klijenta, ako me razumete 🙂 . Ono što klijent kaže ponekada izgleda ili znači potpuno suprotno od onoga što on zapravo želi. E, to je taj deo kada morate da razmišljate kao pametan web dizajner i skapirate kako da rešite tu misteriju.

1. InVision
InVision je vodeća svetska platforma za prototipe i saradnju. Ona pretvara dizajne u interaktivne prototipe sa odgovarajućim tranzicijama, animacijama i aktivnim dugmićima bez ikakvog procesa HTML-izacije.

Ova platforma pomaže dizajnerima da prodaju svoje ideje koristeći real-time prezentacije dizajna i saradnje, a klijentima omogućava da klikću kroz dizajn i iskuse demo uživo pre nego što započnu process razvoja.

Alatke za process web kodiranja

Razvojni proces podrazumeva gomilu programiranja, uploada sadržaja, organizovanja kodova i konstantno upravljanje čitavim procesom kodiranja, sve dok kompletni websajt ne bude objavljen. Kako bi process prošao glatko i bez mnogo frke, pametni developer koristi neke od ovih alatki.

1. Foundation
Foundation je responsive front-end framework. Omogućava dizajnerima da stvaraju responsive i brže sajtove za što bolje iskustvo korisnika. Sada web dizajneri mogu ultra brzo da kodiraju i grade aplikacije, proizvode i usluge.

2. CodeKit
CodeKit je software koji vam pomaže da brže i bolje gradite websajt na Mac-u. Automatski prikuplja sve, uključujući typescript, Haml, Less, Sass, Stylus, CoffeeScript, slim, Markdown, i Javascript. Kroz ovaj softver takođe možete automatski refreshovati browser, I više nikad nećete morati da uradite Command+R. Zar nije kul?

3. Webflow
Webflow je alatka za izradu websajta. Možete koristiti drag-and-drop opciju da kreirate custom-made websajt bez korišćenja koda. Ovo je korisna alatka za one kretivne web dizajnere koji ne vole da kodiraju kako bi napravili čitav sajt.

4. Google Fonts
Google Fonts vam pomaže da omogućite vrstu fonta na vašem websajtu uz jednu jednostavnu liniju koda. Sadrži ogromnu kolekciju najoptimizovanijih fontova za web. Pratite ova tri laka koraka:

1. Odaberi
2. Pregledaj
3. Koristi

Alatke za izlaganje vašeg dizajnerskog portfolija

Setite se da posetioci vole da znaju inspirišuću priču i koncept iza završenog projekta. Kada završite projekat, imate šansu da ponosno izložite vaš portfolio i pokažete svetu šta ste napravili. Hajde da krenemo od osnove svakog projekta i vidimo kako da ga najbolje predstavite da biste privukli nove klijente. Evo nekoliko fenomenalnih platformi koje mogu da vam pomognu da pametno i jednostavno započente ovaj proces.

1. Behance
Behance je vodeća onlajn platforma za kreativne dizajnere. Možete da pokažete svoj rad svetu i pronađete relevantne radove drugih dizajnera.

Ova platforma omogućava dizajnerima da postave sve što su napravili na jednom mestu i prikažu ga široj publici, a kompanijama i agencijama da istraže kreativnost i pronađu pravi talent na svetskom nivou.

2. Place it
Ovo je drag-and-drop alatka koja omogućava da postavite screenshot-ove vašeg proizvoda u realističnom okruženju. Možete koristiti ovu aplikaciju da ispričate priču o svom proizvodu u par sekundi sa primerima iz stvarnog života. Gotivna je, probajte! Evo linka.

Lansiranje websajta I proces upravljanja

Konačno, stigli smo do faze lansiranja kada je sajt spreman da se objavi za javnost. Veoma je bitno izabrati stabilnog i sigurnog hosting provajdera, kako bi sve prošlo glatko. Bitno je da vam hosting provajder pruži fleksibilnost da možete dosta stvari da završite sami, ali i da pruži stručnu tehničku podršku kada vam je to potrebno.

1. Adriahost
Da li stvarno treba da objašnjavam? 🙂

Adriahost vam pruža mogućnost da lako upravljate vašim hostingom koristeći cPanel, gde možete lako postaviti željenu verziju PHP-a, kreirati mailove i forwardere, instalirati dodatne CMS sisteme (WordPress, Joomla, Drupal…) i upravljati DNS zapisima vašeg domena. Sa tehničke strane, Adriahost štiti vaše sajtove kombinacijom alata za zaštitu, kako ne biste morali da brinete. Ako bilo gde zapnete, tu je tehnička podrška da vam pomogne.

Ako imate vaše omiljene alatke za neki od navedenih procesa, slobodno ih postavite u komentarima.