Врло је познато да сви волимо да се држимо неких основних принципа у прављењу сајта и креирању дизајна. Међутим, понекад вас употреба нових алатки може стимулисати да направите нешто што нисте знали да умете да направите и тиме додатно поспеши вашу креативност.

Прошло је доста времена од када сам се нешто озбиљније бавио дизајном, па док се враћам старим навикама, налетео сам на 11 сјајних алатки које веб дизајнери и веб агенције треба да имају у виду и желим да их поделим са вама.

Поделио сам алатке у 5 категорија. Свака категорија садржи различите алатке. Наравно да међу њима имам омиљене, али се моје преференције мењају у зависности од циља који желим да постигнем:

1. Процес дизајнирања
2. Сарадња са клијентом
3. Процес кодирања
4. Излагање дизајна
5. Лансирање на веб и одржавање

Алатке за процес дизајнирања

Процес дизајнирања обично почиње брeинстормингом (енгл. brainstorming) узорака, идеја и колорита. Укључује креирање мокапа дизајна и понављање истих корака у дизајну изнова и изнова. Из тог разлога, ово је задатак кога се неки дизајнери ужасавају.

Међутим, технологија је ту да вас спаси. Ево неколико алатки које могу да помогну да се овај процес убрза.

1. Pixel Dropr
Pixel Dropr је Photoshop плагин за веб дизајнере који је креирао UI Parade. Pixel Dropr је конципиран тако да олакша процесс веб дизајна тако што групише све најчешће коришћене UI елементе у један плагин.

Користећи овај плугин, веб дизајнери могу да групишу дугмад, иконице, векторе и друге веб елементе. Ови веб елементи могу се превући у било који PSD фајл директно из Photoshop-a.

2. Niice

Niice је врста претраживача за дизајнере. Прикупља резултате са Behancea, Degignspirationa и Dribblea. Ако вам треба инспирација за креативност, потражите овде, нећете бити разочарани. Предлажем да тражите респонсивне веб дизајне.

3. Intuitive Color Picker
Ово је онлајн алатка за бирање боја. Када се покрене, цео бровсер је напуни бојом. Можете померати миша лево-десно да промените нијансу, горе-доле да подесите осветљење и скролом мењати сатурацију. Можете одабрати тему боја, кликнути на екран да сачувате ту боју и прећи на другу. Можете креирати читаву колекцију боја. Ово је screenshot који приказује како Intuitive Color Picker ради:

Алатке за сарадњу са клијентом

Најтежи део је разумети клијента, ако ме разумете 🙂 . Оно што клијент каже понекада изгледа или значи потпуно супротно од онога што он заправо жели. Е, то је тај део када морате да размишљате као паметан веб дизајнер и скапирате како да решите ту мистерију.

1. InVision
InVision је водећа светска платформа за прототипе и сарадњу. Она претвара дизајне у интерактивне прототипе са одговарајућим транзицијама, анимацијама и активним дугмићима без икаквог процеса HTML-изације.

Ова платформа помаже дизајнерима да продају своје идеје користећи real-time презентације дизајна и сарадње, а клијентима омогућава да кликћу кроз дизајн и искусе демо уживо пре него што започну процес развоја.

Алатке за процес веб кодирања

Развојни процес подразумева гомилу програмирања, upload-a садржаја, организовања кодова и константно управљање читавим процесом кодирања, све док комплетни веб-сајт не буде објављен. Како би процес прошао глатко и без много фрке, паметни програмер користи неке од ових алатки.

1. Foundation
Foundation је респонсивни фронт-енд фрејмворк (енгл. front-end framework). Омогућава дизајнерима да стварају респонсивне и брже сајтове за што боље искуство корисника. Сада веб дизајнери могу ултра брзо да кодирају и граде апликације, производе и услуге.

2. CodeKit
CodeKit је софтвер који вам помаже да брже и боље градите веб-сајт на Mac-у. Аутоматски прикупља све, укључујући typescript, Haml, Less, Sass, Stylus, CoffeeScript, slim, Markdown, и Javascript. Кроз овај софтвер такође можете аутоматски освежити бровсер, И више никад нећете морати да урадите Command+R. Зар није кул?

3. Webflow
Webflow је алатка за израду веб-сајта. Можете користити drag-and-drop опцију да креирате custom-made веб-сајт без коришћења кода. Ово је корисна алатка за оне кретивне веб дизајнере који не воле да кодирају како би направили читав сајт.

4. Google Fonts
Google Fonts вам помаже да омогућите врсту фонта на вашем веб-сајту уз једну једноставну линију кода. Садржи огромну колекцију најоптимизованијих фонтова за веб. Пратите ова три лака корака:

1. Одабери
2. Прегледај
3. Користи

Алатке за излагање вашег дизајнерског портфолија

Сетите се да посетиоци воле да знају инспиришућу причу и концепт иза завршеног пројекта. Када завршите пројекат, имате шансу да поносно изложите ваш портфолио и покажете свету шта сте направили. Хајде да кренемо од основе сваког пројекта и видимо како да га најбоље представите да бисте привукли нове клијенте. Ево неколико феноменалних платформи које могу да вам помогну да паметно и једноставно започенте овај процес.

1. Behance
Behance је водећа онлајн платформа за креативне дизајнере. Можете да покажете свој рад свету и пронађете релевантне радове других дизајнера.

Ова платформа омогућава дизајнерима да поставе све што су направили на једном месту и прикажу га широј публици, а компанијама и агенцијама да истраже креативност и пронађу прави талент на светском нивоу.

2. Place it
Ово је drag-and-drop алатка која омогућава да поставите screenshot-ове вашег производа у реалистичном окружењу. Можете користити ову апликацију да испричате причу о свом производу у пар секунди са примерима из стварног живота. Готивна је, пробајте! Ево линка.

Лансирање веб-сајта и процес управљања

Коначно, стигли смо до фазе лансирања када је сајт спреман да се објави за јавност. Веома је битно изабрати стабилног и сигурног хостинг провајдера, како би све прошло глатко. Битно је да вам хостинг провајдер пружи флексибилност да можете доста ствари да завршите сами, али и да пружи стручну техничку подршку када вам је то потребно.

1. Адриахост
Да ли стварно треба да објашњавам? 🙂

Адриахост вам пружа могућност да лако управљате вашим хостингом користећи cPanel, где можете лако поставити жељену верзију PHP-а, креирати мејлове и форвардере, инсталирати додатне CMS системе (WordPress, Joomla, Drupal…) и управљати DNS записима вашег домена. Са техничке стране, Адриахост штити ваше сајтове комбинацијом алата за заштиту, како не бисте морали да бринете. Ако било где запнете, ту је техничка подршка да вам помогне.

Ако имате ваше омиљене алатке за неки од наведених процеса, слободно их поставите у коментарима.