50 Корисни алати за веб дизајн за дизајнере
Протеклих дана смо вам показали неке од најбољих ВордПресс и Јоомла одговарајућих тема које можете преузети и користити на Вашем сајту. Данас ћемо вам дати Алати. Обухватају оквире, сервисе и скрипте за преузимање, мислимо да ће они бити од велике помоћи када је у питању развој веб апликација.
Да бисмо вам олакшали спуштање цијеле листе алата, категоризирали смо их у сљедеће одјељке:
- Грид и оквири
- Скице Схеетс & Вирефрамес
- ЈаваСцрипт & јКуери Плугинс
- Тестирање и преглед
- Слидерс
- Отхерс
Грид и оквири
[Назад на врх]
Цолумнал
Цолумнал је пројекат Пулп + Пикелс, који је позајмљен од цссгрид.нет-а, док су неке инспирације код преузете из 960.гс. Цолумнал вам много помаже у прилагођавању веб дизајна, чинећи ваше мреже флексибилним да се динамички мењају када се промени прозор прегледача.
Скелетон
Скелетон је једноставан и моћан ЦСС оквир, који се углавном свиђа програмерима и дизајнерима због своје једноставности и ефикасности. Овде нема тешког дизања са Јавасцриптом, само добар и чист ЦСС са чистом документацијом.
ЛессФрамеворк 4
Мање оквир је више или мање оквир, у име свог творца. То је адаптивни ЦСС мрежни систем заснован на кориштењу инлине ЦСС медијских упита, што знатно олакшава развој одговарајућих веб локација..
Семантиц Грид Систем
Семантички мрежни систем се користи за дизајнирање прилагодљивих распореда мреже. Користи унапред обрађене ЦСС екстензије као што су ЛЕСС, СЦСС или Стилус да би се постигла максимална ефикасност. Можете да изаберете ширину колоне и олука, да изаберете број колона и да се пребацујете између пиксела и процента.
Голден Грид Систем
Голден Грид Систем је систем флуидне мреже који служи као полазна тачка вашег веб дизајна. Омогућава сајту да служи добре странице у распону од 240 до 2560 пиксела.
320 и горе
320 и Горе је ЦСС медиа упита који служи као почетни шаблон за одговарајући дизајн. Следи потпуно супротан приступ него неколико других доступних котлова.
Инуит.цсс
Инуит.цсс је ЦСС оквир, који је изузетно једноставан за употребу, чак и за почетнике. Има минималистички приступ, тако да морате да се бавите само стварима које су потребне, али ако је потребно, може се проширити са неколико доступних додатака.
Гридлесс
Гридлесс је предложак за креирање одговорајућих и цросс-бровсер сајтова са прелепом типографијом. Овај алат се фокусира на прогресивни развој пројекта и служи као полазна тачка сваког дизајна.
1140 ЦСС Грид
1140 ЦСС Грид је одличан ЦСС грид систем дизајниран од стране дизајнера у Мелбурну Анди Таилор, који омогућава да се ваш дизајн савршено уклапа у 1140пк за велике мониторе и ваш изглед флуида ће се без проблема прилагодити другим мањим резолуцијама уз веома мало додатног рада..
1КБЦССГрид
1КБ ЦСС Грид дизајниран од стране Тилер Тате, је једноставан и лаган ЦСС Грид генератор. То ће вам омогућити да подесите број колона, ширину колоне и ширину олука, а можете добити и ЦСС за вашу мрежу.
Боотстрап
Боотстрап, који су креирали и одржавали Марк Отто и Јацоб Тхорнтон на Твиттеру, је одличан скуп елемената корисничког интерфејса, изгледа и јавасцрипт алата, који су доступни за преузимање и коришћење у вашим веб дизајнерским пројектима..
Флуид Грид Цалцулатор
Овај једноставан алат ће вам помоћи да брзо зграбите ЦСС вашег веб дизајна флуидне мреже.
Флуид Гридс
Флуид Грид је једноставан, али користан флуидни оквир, који ствара одговарајући распоред заснован на 6, 7, 8, 9, 10, 12 или 16 ступцима.
Флурид
Флурид је једноставан и веома користан цросс-бровсер ЦСС грид оквир са до 16 колона. Штавише, не сакрива пикселе у маргине.
Гридсет
Гридсет је алат за прављење решетки било ког типа, као што су, колоне, асиметричне, фиксне, однос, сложен, одговарајући и још много тога. Овај алат Марк Боултона је још увијек у бета фази, али се показује као обећавајући. И јесам ли споменуо да је употреба једноставна као уградња везе.
Гридпак
Гридпак је мрежни мрежни генератор, где се број колона, паддинг и гуттер може променити, и могу се додати прилагођене тачке прекида. ЦСС се генерише помоћу алата и спреман је за преузимање. Он такође обезбеђује ПНГ матрице, које се могу користити за пројектовање у Пхотосхопу.
СимплеГрид
СимплеГрид, који је развио Мицхаел Кухн, је врло једноставан и јасан ЦСС оквир за креирање бесконачних матрица заснованих на мрежи. По подразумеваној вредности, СимплеГрид је припремљен за 4 различита опсега величина екрана.
Суси
Суси би Оддбирд, сличан је у односу на Семантиц Грид Систем. Не користи никакве додатне ознаке нити било које друге специјалне класе, али је намењен само корисницима Сааса и његовом проширењу Цомпасс.
Тини Флуид Грид
Тини Флуид Грид је одлична веб апликација која вам може помоћи да одредите мрежу мреже на интерактиван начин. Можете да подесите број колона, проценат гутера, минималну и максималну ширину изгледа вашег веб сајта, а можете добити и ЦСС за преузимање.
Систем променљиве мреже
Систем променљиве мреже је дизајниран и развијен од стране СприСофт-а и базиран је на 960 Грид систему. То омогућава програмерима и дизајнерима да генеришу прилагођену мрежу и затим преузму пратећу ЦСС датотеку на основу те мреже.
Скице Схеетс & Вирефрамес
[Назад на врх]
Одговарајући веб дизајн скице
Овај алат је користан за мапирање положаја различитих елемената у изгледу вашег веб сајта на различитим уређајима. Помоћу овог уређаја можете формирати идеју о томе где да поставите потребне елементе веб сајта за различите величине и резолуције екрана.
Респонсиве Вирефрамес
Респонсиве Вирефрамес је експериментални алат који је креирао Јамес Меллерс из Адобеа. Направљен је само са ХТМЛ-ом и ЦСС-ом (без слика или ЈС-а) које можете користити да визуализујете како ће ваш одговарајући дизајн изгледати на стварним претраживачима различитих рачунара и мобилних уређаја.
СтилеТилес
Стиле Тилес вам даје начин да развијете идеју о томе како би изгледао сајт, независно од компликованих стилова који долазе у игру. То вам даје могућност за савршен радни процес дизајнирања и могућност интеграције повратних информација клијента.
ЈаваСцрипт & јКуери Плугинс
[Назад на врх]
Адапт.Јс
Адапт.јс је Јавасцрипт рјешење и одлична алтернатива ЦСС медијским упитима. Употреба @медиа приступа је добра пракса, али то не ради за све прегледаче. Натхан Смитх, креатор 960 Грид система, издао је Адапт.јс, веома лагану јавасцрипт библиотеку да би превазишао овај проблем.
Изотоп
Исотопе је невероватан јКуери плугин, који се показао веома корисним приликом дизајнирања одговарајућег дизајна. То не само да помаже да се преуреде елементи странице када се промени прозор прегледача или ако је величина екрана мања, али и помаже у филтрирању тих елемената..
Зидарство
Масонство је одличан јКуери плугин, који се користи за креирање динамичких и адаптивних распореда. Овај додатак помаже да се преуреде елементи у вашем одговорном дизајну, тако да се могу боље уклопити у отворене тачке на мрежи.
Респонд.јс
Респонд.јс је брз и лаган (3 Кб минификован и 1 Кб гзиппед) скрипт, чији је главни циљ да омогући одговарајући веб дизајн у онима који не подржавају ЦСС3 Медиа упите, као што су ИЕ претраживачи.
ТиниНав.јс
ТиниНав.јс је мали и лагани јКуери плугин, само 362 бајта, који претвара велике навигационе листе у мале падајуће меније за мање екране.
Воокмарк јКуери Плугин
Воокмарк је јКуери плугин који открива величину прозора претраживача и аутоматски распоређује елементе странице у ступце. На дну странице можете видети и преглед уживо.
Тестирање и преглед
[Назад на врх]
ПротоФлуид
ПротоФлуид је алатка за израду прототипова на вебу која вам омогућава да тестирате ваше прототипове веб сајта у различитим величинама екрана и резолуцијама. Само откуцајте УРЛ, изаберите уређај (или било које прилагођене димензије) и притисните лансирање. Пошто је то алатка заснована на вебу, она вам такође омогућава да користите друге екстензије као што је ФиреБуг.
Респонсиве.Ис
Респонсиве.Ис је креиран од стране ТипеЦаст другог алата за емулацију претраживача, који можете користити да тестирате одговарајући дизајн. Само откуцајте УРЛ и он ће аутоматски променити његову величину у зависности од уређаја који одаберете.
Респонсивепк.Цом
РеспонсивеПк је одличан алат за тестирање вашег веб сајта. Главна карактеристика која га разликује од других је њена способност да промени величину веб локације пиксел по пиксел. Ова одлична функција ће вам омогућити да идентификујете тачке прекида и да тестирате како ЦСС медиа упити раде на вашем сајту.
Одговарајући алат за тестирање веб дизајна
Сјајна алатка за тестирање, која вам омогућава да прегледате одговарајући веб сајт у различитим величинама екрана истовремено на једном екрану док их правите или дизајнирате. Овај алат ми се свиђа углавном зато што приказује све резолуције екрана поред себе, што олакшава дебаговање.
РеВиев.Јс
РеВиев је динамичан систем за приказивање, развијен у чистом ЈаваСцрипт-у, који вам пружа фантастично искуство гледања за ваш веб дизајн.
Сцреенфли
Сцреенфли би КуиркТоолс, је невероватна алатка која ће вам омогућити да прегледате свој веб сајт у различитим уређајима: Десктоп, Таблет, Мобиле и ТВ. Такође има опције да омогући или онемогући померање или чак ротирање екрана.
Сцреенкуери.ес
Сцреенкуери.ес је савршен алат за испитивање дизајна пиксела. Само унесите било коју адресу веб сајта коју желите да проверите, а овај алат ће приказати веб локацију у различитим величинама екрана према уређају. Такође можете ручно да промените величину пиксела по пикселу да бисте идентификовали тачке прекида.
Тхе Респонсинатор
Тестирајте свој сајт на различитим уређајима од иПхоне-а и иПад-а, до Киндле-а и Андроид-а на Респонсинатор-у. Такође приказује ваш сајт у портретном и пејзажном режиму. Овај алат ми се много више допада због обриса уређаја који су приказани на страници, што доноси већи смисао читавом процесу.
Слидерс
[Назад на врх]
Боровница
Блуеберри је фантастичан опен соурце јКуери клизач за слике, који је написан да специфично ради за флуидне или одговарајући распоред.
Еластислиде
Желите карусел који ће се аутоматски прилагођавати величини екрана када се промијени прозор прегледника или када се налазите на мањем екрану? Еластислиде је најпогоднији јКуери плугин за ваше потребе.
Одговарајући ЦСС3 клизач
Ово је чисти ЦСС3 клизач који се може лако прилагодити било којој величини екрана и резолуцији екрана. Лепа ствар код овог клизача је та да стрелице улазе у кутију када је величина екрана уређаја довољно мала. Није потребан ЈаваСцрипт.
РеспонсивеСлидес.Јс
РеспонсивеСлидес.Јс је врло једноставан и изузетно лаган (само 1Кб) јКуери плугин који креира одговарајући клизач користећи неуређене листе. Ради на великом броју претраживача, такође на ИЕ6 и више.
Отхерс
[Назад на врх]
Адаптиве Имагес
Адаптиве Имагес је онлине алатка за одговарајући веб дизајн, која открива величину екрана посетилаца и креира, кешира и испоручује слике са скалирањем, на основу величине и резолуције екрана.
ФитТект.Јс
ФитТект.јс је мали ЈаваСцрипт алат који омогућава аутоматску промену величине текста и наслова када се промени прозор претраживача. Нема више брига о неусклађености величине текста са овим алатом.
ФитВид.Јс
Желите ли да промените величину уграђених видео снимака када се промени прозор претраживача или ако је уређај мање резолуције? ФитВид.Јс вам може помоћи да постигнете ово. То је лаган, једноставан, једноставан за кориштење јКуери плугин који се користи за постизање видеозаписа уграђених ширина флуида.
Ретина Имагес
Ретина слике су одлично решење за јавасцрипт, које ће аутоматски приказивати @ 2Кс веће слике високе резолуције када се гледа на ретина дисплеју. Све што треба да урадите је да поставите верзију сваке резолуције високе резолуције, и она ће управљати остатком.
Сеамлесс Респонсиве Пхото Грид
Беспрекорна прилагодљива фото-мрежа приказује слике од руба до руба у прегледнику, без икаквих размака између слика. Фотографије су поплочане и оне се крећу с лева на десно кроз страницу у колонама. Број колона се прилагођава у складу са променом величине прозора прегледача.
СлабТект
СлабТект је јКуери плугин или алат Бриан МцАллистера базиран на алгоритму слабТект, који раздваја наслове у редове пре него што промени величину сваког реда како би попунио расположиви простор. Веома је сличан ФитТект.Јс додатку у акцији.
Зурб - РеспонсивеТаблес
Јесте ли се икада запитали како се носити с великим таблицама података у дизајну који одговара? Зурб, ЦСС / ЈС комбо вам даје одговор; узима табеле података и модификује их тако да не разбијају одговарајући распоред на мањим уређајима екрана.
Цатегоризр
Цатегоризр је веома мали ПХП скрипт, пружа посетиоцима више циљаног веб искуства. Помоћи ће вам у испоруци дизајна специфичних за уређај за Таблет, ТВ, Мобиле или Десктоп.
Медиа Куери Боокмарклет
Медиа Куери Боокмарклет показује коју величину тренутни приказни прозор има и који је медијски упит за њега испаљен.
Респонсиве Цалцулатор
Респонсиве Цалцулатор је врло једноставан онлине алат који вам може помоћи да претворите пикселе у проценте док дизајнирате одговарајући веб сајт.
Горе Следеће недеље
У другој седмици ове серије, ми ћемо вас припремити за туторијале који ће вас заиста одвести у Респонсиве Веб Десигн (РВД).
Не пропустите.
