Садржај
- Комплетни алати за дизајн
- 01. ИнВисион Студио
- 02. Скица
- 03. Адобе КСД
- 04. Марвел
- 05. Фигма
- 08. Прото.ио
- 15. Јустинминд
- 16. Флуид
- 17. Фрамер
- Дизајн оквира и библиотека
- 18. Боотстрап
- 19. Покретање 4
- 20. Вуе.јс
- 21. Паттерн Лаб
- 22. Дизајн материјала
ЈУМП ТО: - Комплетни алати за дизајн
- Макете и прототипови
- Дизајн оквира и библиотека
У данашње време постоји толико сјајних алата за веб дизајн, створених да вам помогну у макетама, оквирима, тестирању и још много тога. Наћи ћете и обиље преузимања многих елемената који чине добар веб дизајн, укључујући, али не ограничавајући се на ВР, анимацију, боје и типографију.
Без обзира на проблем који покушавате да решите у току рада са веб дизајном, вероватно је неко направио алатку за то, било да је то самостални услужни програм или функција у већој апликацији. Још боља вест је да је толико много ових сјајних алата бесплатно, иако ово чини низ понуђених алата далеко застрашујућим за бирање.
Да бисмо помогли веб-креативцима, заокружили смо оно што сматрамо најбољим алатима у овом тренутку (за одређенију листу погледајте овај преглед алата за дизајн корисничког интерфејса). Како је ово прилично дугачка листа, алате смо сложили у одељке како бисмо олакшали навигацију по чланку. На овој страници ћете пронаћи комплетни софтвер за веб дизајн, као што су Скетцх и Адобе КСД, праћен основнијим наменским алатима за жичано постављање и оквире за веб дизајн и библиотеке. На другој страни постоји низ мањих, специјализованијих алата за све, од рада са сликама до обезбеђивања инклузивности у вашем раду.
Док сте овде, можда бисте желели да погледате нашу листу најбољих услуга веб хостинга и да одаберете и једног од најбољих креатора веб страница.
Комплетни алати за дизајн
01. ИнВисион Студио
ИнВисион Студио има за циљ да покрије све основе и буде једини алат за корисничко сучеље који ће вам требати. Долази са скупом функција које ће вам помоћи да креирате лепе интерактивне интерфејсе, укључујући алате за брзо израду прототипова, реаговање и заједнички дизајн и рад са системима дизајна.
Ако већ користите ИнВисион са алатима попут Скетцх-а, има доста укрштања у функцијама. Међутим, снага Студија лежи у одељењу за израду прототипова, посебно ако ваш дизајн укључује анимацију. Брзо израђивање прототипа омогућиће вам да креирате сложене и маштовите прелазе, омогућавајући вам да заиста постигнете ниво анимације који желите. Једноставно схватите како желите да ваш кориснички интерфејс погледа почетак његове транзиције, а затим дизајнирајте крајњи резултат. ИнВисион Студио све остало припрема за вас.
Поврх тога, можете да креирате ове прилагођене анимације и прелазе од низа геста и интеракција попут превлачења, клика и лебдења.
Када завршите, извезите своје прототипове путем ИнВисиона и позовите људе на сарадњу. Свој пројекат можете погледати на предвиђеној му платформи - одличан начин за истраживање и тестирање вашег дизајна. Клијенти ће тада моћи да коментаришу право на дизајн.
Поврх тога, можете престати да размишљате о стварању бројних уметничких плоча за више уређаја - Студио-ов механизам за постављање аутоматски ће прилагодити ваш дизајн било ком екрану. Ова уштеда времена даје вам простор да размишљате много више о свом дизајну.
02. Скица
Бохемиан Цодинг’с Скетцх је једна од најчешће коришћених платформи за веб дизајн; то је изузетно моћан алат заснован на векторима за заједничку изградњу интерфејса и прототипова. Скетцх је направљен посебно за прављење веб локација и апликација, тако да нема непотребних функција које претрпавају ваш интерфејс, а бржи је и ефикаснији од софтвера који има шири опсег.
Рори Берри, креативни директор у Суперрбу, прешао је на Скетцх пре неколико година и топло га препоручује. „У поређењу са Пхотосхоп-ом, сортирање свих докумената и вршење ревизија на Скетцх-у је много лакше“, започиње он. „Скица има мале документе, док Пхотосхоп има велике. Будући да је реч о апликацији заснованој на векторима, величине датотека су драматично мање у поређењу са Пхотосхоп-ом. “
И то није све. „Уграђени мрежни систем у програму Скетцх је сјајан и чини дизајн интерфејса много лакшим. Мислим да укупни кориснички интерфејс и минималан осећај чине га много чистијим за дизајн и прилагођеним корисницима. Пхотосхоп изгледа веома компликовано у поређењу. “
Заједница нуди стотине додатака за Скетцх да би ваш радни процес дизајна био лакши и лакши.
Лоша страна Скетцх-а је што је доступан само на Мац-у и не планира се подршка другим оперативним системима. Ово је представљало проблем, јер ће дизајнери често желети да .скетцх датотеке деле са програмерима који користе Виндовс. Срећом сада постоји апликација „Скица за Виндовс“ под називом Лунаци која ће отворити и уредити .скетцх датотеке и елиминисати већину овог бола - прочитајте о томе у Извоз и конверзија одељак овог чланка.
Не пропустите наше главне савете за коришћење Скетцха.
03. Адобе КСД
Адобе КСД нуди најбоље окружење за дигиталне пројекте у оквиру пакета Адобе Цреативе Цлоуд. Ако сте одушевљени корисник Адобе-а и нови сте у КСД-у, можда за почетак нећете пронаћи баш „Адобе“ интерфејс. Међутим, слаже се са осталим водећим алаткама тамо. Скок је ако и ви већ неко време дизајнирате у Пхотосхопу, али то се исплати за дизајн корисничког интерфејса.
Овај алат за векторски дизајн и израду жичаних оквира постаје све бољи, с додацима као што је подршка за аутоматску анимацију који обезбеђују да алат може да прати најновије трендове у УКС. КСД укључује алате за цртање, алате који вам омогућавају да дефинишете нестатичне интеракције, прегледе за мобилне уређаје и радне површине и алате за дељење ради давања повратних информација о дизајну. Омогућава вам да изаберете величину уметничке плоче специфичне за уређај за покретање пројекта, а можете чак и да увезете популарне сетове корисничког интерфејса, на пример Гоогле-ов материјални дизајн.
Пресудно је што се Адобе КСД интегрише са остатком Цреативе Цлоуд-а, што значи да ћете лако моћи да увезете и радите са средствима из Пхотосхопа или Иллустратор-а. Ако већ користите друге Адобе апликације, кориснички интерфејс ће се осећати лепо и познато и не би требало да представља превише криве учења.
Међу обожаваоцима је и Андреј Робу, директор дизајна у Робу Студију у Барселони. „За брзе макете је сјајно“, каже он. „Веома је лаган интерфејс, са пуно учитаних фотографија и одличан за табле за расположење. Израда прототипа је врло корисна да би се клијентима показало како ствари функционишу, посебно зато што садржај можете одмах ставити на мрежу. "
Еллис Рогерс, графички дизајнер у Рецептион Лтд такође га препоручује. „Када је дизајн / прототип или жичани оквир завршен, Адобе КСД вам омогућава да врло брзо одаберете елементе и креирате прелазе страница за радни прототип, који се могу делити путем везе“, објашњава он. „Линк вам такође омогућава прикупљање повратних информација по страници, одржавајући све то организованим. Линк се може ажурирати у оквиру Адобе КСД, тако да клијент увек може видети најновију верзију, без бриге о нетачним верзијама. Апсолутно је задовољство сарађивати. "
04. Марвел
Марвел је још један алат за веб дизајн који је сјајан за стварање брзих идеја, прочишћавање интерфејса како желите да изгледа и израду прототипова. Марвел нуди заиста уредан начин израде страница, омогућавајући вам да симулирате свој дизајн кроз прототип. Постоје неке дивне интеграције за уметање ваших дизајна у ток рада вашег пројекта. Занимљиво је да постоји интегрисана функција тестирања корисника, која је и даље прилично необична у окружењу алата за веб дизајн. Све је то и на мрежи, па не морате ништа да преузимате.
05. Фигма
Следећи алат за веб дизајн на нашој листи је УКСПин. Ова наменска апликација за израду прототипова доступна је за Мац, Виндовс или у прегледачу. Са већином других алата за дизајн можете имитирати интеракције повезивањем различитих елемената на вашој уметничкој плочи, УКСПин се приближава коду и омогућава вам рад са интерактивним стањима, логиком и компонентама кода.
Постоје интегрисане библиотеке елемената за иОС, Материал Десигн и Боотстрап, као и стотине бесплатних сетова икона који ће вам помоћи на путу. УКСПин такође има функције приступачности како би се осигурало да ваши дизајни остану у складу са ВЦАГ стандардима, што ми поздрављамо.
Свој први прототип у УКСПин-у можете створити бесплатно, а ако вам одговара пређите на месечну претплату (доступно је чланство у тиму). УКСПин такође има одличну интеграцију са Скетцх-ом, па би га можда могло увести у ваш ток посла ако сте љубитељ Скетцх-а којем су могућности прототипирања ограничене.
08. Прото.ио
Акуре је увек био један од најбољих жичаних алата на тржишту, одличан за сложене пројекте који захтевају динамичке податке. Са Акуре-ом се заиста можете усредсредити на ругање пројектима који су и технички и захтевају кључну пажњу на структури и подацима.
Процес предаје Акуре-а укључује стварање темељних спецификација које помажу програмерима да створе коначни производ који одговара вашем дизајну.
15. Јустинминд
Јустинминд ће помоћи у прототипирању и интегрише се са другим алатима као што су Скетцх и Пхотосхоп. Можете одабрати интеракције и покрете који ће вам помоћи да саставите свој прототип. Такође садржи корисничке интерфејсе, тако да можете брзо да саставите екране, а и он реагује.
16. Флуид
Флуид је једноставан и интуитиван алат за изградњу брзих прототипова и израду дизајна. Садржи неколико лепих готових средстава која ће вам помоћи да направите брзе прототипове. Једном када надоградите, заиста је лако саставити сопствене симболе помоћу жељеног корисничког интерфејса. Овај алат нуди врло брз дизајн корисничког интерфејса, са средствима доступним и за прототипе високе и ниске верности.
17. Фрамер
Фрамер је прототипски систем који побољшава комуникацију и сарадњу у вашем тиму, посебно између дизајнера и програмера. Израђен је с обзиром на системе дизајна и интегрише се са вашим кодом да би се створила документација коју је лако пратити и аутоматски ажурира. Одржавање свих људи на истој страници и ажурност је главна функција - па кад се код ажурира, ажурира се и ваш дизајн.
Дизајн оквира и библиотека
18. Боотстрап
Боотстрап сигурно није нови алат, али је револуционисао развој и наставља обликовати начин на који градимо ствари на Интернету. Функције на које треба обратити пажњу укључују реактивне контејнере који су флуидни до одређене тачке прекида и одзивне класе .ров-цолс за ефикасно специфицирање броја колона на тачкама прекида.
Боотстрап такође има сопствену библиотеку икона отвореног кода, Боотстрап Ицонс, која је дизајнирана за рад са компонентама Боотстрап-а.
Пронађите најбоље бесплатне теме Боотстрап у нашем водичу.
19. Покретање 4
Ако волите Боотстрап, али не желите да зароните у сирову ствар, Стартуп 4 је једноставан начин; то је онлајн апликација са уграђеним предлошцима и темама за изградњу веб страница заснованих на Боотстрап-у 4 са мрежом од 12 колона. Можете да направите своју веб локацију без писања кода помоћу интерфејса превлачења и испуштања, али биће вам потребно одређено знање ХТМЛ-а и ЦСС-а да бисте довршили ствари.
20. Вуе.јс
Вуе.јс је оквир за изградњу корисничког интерфејса и користи виртуелни ДОМ. Као што и само име говори, Вуе-ова основна библиотека фокусирана је на слој приказа.
Погледајте пример кода преузет из Вуе-ових докумената, који користи унос корисника и показује елеганцију библиотеке. Почећемо са ХТМЛ-ом:
див ид = "екампле"> п> {{мессаге}} / п> дугме в-он: цлицк = "реверсеМессаге"> Обрнута порука / дугме> / див>
Обратите пажњу на прилагођени в-он обрађивач који позива реверсеМессаге метода.Ево ЈаваСцрипт-а:
вар миАпп = нови Вуе ({ел: '#екампле', подаци: {порука: 'Здраво Вуе.јс!'}, методе: {реверсеМессаге: фунцтион () {тхис.мессаге = тхис.мессаге.сплит ('') . реверсе (). јоин ('')}}});
Овај пример је попунио одломак подацима и дефинише реверсеМессаге метода. Вуе је одличан за оне мање искусне са сложеним библиотекама, али такође има и низ додатака који помажу у развоју сложених веб страница на једној страници.
21. Паттерн Лаб
Паттерн Лаб је предиван дизајнерски алат вођен узорцима који су креирали Даве ОИсен и Брад Фрост. Заснован је на концепту атомског дизајна, који каже да би требало да свој дизајн раставите на његове најмање делове - атоме - и комбинујете их да бисте формирали веће компоненте за вишекратну употребу - молекуле и организме - који се потом могу претворити у употребљиве предлошке.
Иако је у основи статички генератор сајтова који спаја компоненте корисничког интерфејса, Паттерн Лаб има много више од тога. То је агностика језика и алата; омогућава вам угнежђење образаца корисничког интерфејса један у другог и дизајн са динамичким подацима; садржи уређаје за агностичку промену величине видног поља који вам помажу да осигурате да ваш систем дизајна у потпуности реагује; и потпуно је проширив, тако да можете бити сигурни да ће се проширити у складу са вашим потребама.
22. Дизајн материјала
Материјални дизајн је визуелни језик компаније Гоогле који има за циљ да комбинује класичне принципе доброг дизајна са иновацијама у технологији и науци како би створио кохезивну и флексибилну основу за вашу веб локацију.
Веб локације и апликације креиране помоћу оквира Материал Десигн изгледаће модерно и кориснику ће бити познате, тако да ће људима бити лако да одмах користе ваш производ. Доступно је много алата који помажу у овом систему дизајнирања; кликните на Ресурси на навигацијској траци да бисте их пронашли.
Следећа страница: Специјализовани алати за веб дизајн за решавање било ког проблема
