Дизајнирање прототипова 5 апликација које раде боље од Пхотосхопа

Пхотосхоп је популаран алат са дизајнерима и његовим проширењима као што су ЦСС3П и ФонтАвесомеПС чине га добрим алатом за креирање прототипова за веб дизајн. Ипак, то није стварно створено за ову сврху и како тренутни трендови напредују са одговорним дизајном, ЦСС Пре-процесорима, ЦСС оквирима и графичком подршком неовисном о резолуцији (СВГ), Пхотосхоп постаје све мање релевантан за веб дизајн.

Не брините иако постоји много алтернативних апликација које су направили независни програмери како би попунили празнине. У овом посту ћемо погледати ове апликације и сазнати колико су њихове могућности у односу на Пхотосхоп за креирање прототипова за веб дизајн.

1. Вебфлов

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

Стилови се могу лако додати из сидепанел-а и можете додатно прилагодити својства елемената. Када је дизајн завршен, можете извести резултате дизајна у код ХТМЛ и ЦСС. Такође можете подијелити свој рад с тимом.

2. Авоцоде

Авоцоде подржава ПСД датотеке и омогућава вам да их одмах уредите и претворите у функционалан веб сајт са ХТМЛ и ЦСС. Авоцоде ће издвојити сва средства у вашем пројекту, укључујући ЦСС, Имагес и СВГ (ако их има). Можете лако да издвојите ЦСС, у облику Лесс, САСС или Стилус за било који одабрани слој, јер је интегрисан са ЦССХат.

Осим тога, Авоцоде је опремљен контролом ревизије која вам омогућава да се вратите на претходни дизајн, само у случају да нешто крене наопако.

3. Мацав

Маца вам омогућава да дизајнирате веб странице и веб елементе ако радите на уређивачу слика као што је Адобе Пхотосхоп. Можете креирати колоне или блок подручја, прилагодити њихово позиционирање и поставити типографију према потреби. Маца вам омогућава да промените стилове више елемената на једном месту. Библиотеку можете користити и за чување свих елемената за каснију употребу.

Да бисте креирали одговарајући дизајн, Мацав вам омогућава да поставите тачке прекида и оптимизујете ваш сајт за све уређаје. Када је процес дизајнирања завршен, Мацав може генерирати одговарајући ХТМЛ и ЦСС за вас.

4. Скица

Скетцх је идеалан за дизајнирање интерфејса и сајтова. Он ствара векторске објекте уместо у битмапу. Тако да када промените величину платна, ваш дизајн неће изгубити квалитет. Функције као што је 'уграђена решетка' помоћи ће вам да боље уредите објекат или положај распореда веба.

Поред тога, Скетцх даје фонтове сличне ономе што је приказано на Вебкит-у (мислим да Цхроме, Опера и Сафари). Тако да не морате да бринете да резултати текста на слици нису толико оштри и тачни као оригинални текст који се приказује у прегледачу. Скетцх такође може извести ЦСС за сваки елемент у слоју.

5. Антетипе

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

Да бисте креирали одговарајући дизајн, можете поставити тачке прекида које ће прилагодити величину екрана. Такође можете извести сваки елемент у облику слике или ЦСС-а.