50 korisnih alata za web dizajn za dizajnere
U proteklih nekoliko dana pokazali smo vam neke od najboljih WordPress i Joomla osjetljivih tema koje možete preuzeti i koristiti na Vašoj web lokaciji. Danas ćemo vam dati alata. Obuhvaća okvire, usluge i skripte za preuzimanje, smatramo da će im biti od velike pomoći kada je u pitanju prilagodljiv razvoj weba.
Da bismo olakšali spuštanje cijelog popisa alata, razvrstali smo ih u sljedeće odjeljke:
- Grid i okviri
- Skice Sheets & Wireframes
- Dodaci za JavaScript i jQuery
- Testiranje i pregled
- klizači
- Drugi
Grid i okviri
[Povratak na vrh]
Columnal
Columnal je projekt Pulp + Pixels, koji je posuđen iz cssgrid.net-a, dok su neke inspiracije kodom preuzete iz 960.gs. Columnal vam mnogo pomaže u web-dizajnu koji se odaziva, čineći vaše mreže fleksibilnim kako bi se dinamički mijenjali kada se promijeni prozor preglednika.
Kostur
Skeleton je jednostavan i moćan CSS okvir, koji se uglavnom sviđa programerima i dizajnerima zbog svoje jednostavnosti i učinkovitosti. Ovdje nema teškog dizanja s Javascriptom, samo dobar i čist CSS s čistom dokumentacijom.
LessFramework 4
Manje okvir je više ili manje okvir, u ime svog tvorca. To je prilagodljivi CSS mrežni sustav koji se temelji na korištenju inline CSS medijskih upita, što znatno olakšava razvoj odgovarajućih web-lokacija..
Sustav semantičke mreže
Semantički mrežni sustav koristi se za dizajn prilagodljivih rasporeda mreže. Koristi unaprijed obrađene CSS ekstenzije kao što su LESS, SCSS ili Stylus za postizanje maksimalne učinkovitosti. Možete odabrati širinu stupca i oluka, odabrati broj stupaca i prebacivati se između piksela i postotaka.
Zlatni mrežni sustav
Golden Grid System je sustav fluidne mreže koji služi kao početna točka vašeg web dizajna. Omogućuje web-lokaciji da poslužuje dobre stranice u rasponu od 240 do 2560 piksela.
320 i Gore
320 i Up je CSS medij za upite koji služi kao početni predložak za vaš odgovarajući dizajn. Slijedi potpuno suprotan pristup nego nekoliko drugih dostupnih kotlovnica.
Inuit.css
Inuit.css je CSS okvir, koji je iznimno jednostavan za korištenje, čak i za početnike. Ima minimalistički pristup, tako da se trebate baviti samo stvarima koje su potrebne, ali ako je potrebno, može se proširiti s nekoliko dostupnih dodataka.
bez rešetke
Gridless je predložak za stvaranje web-mjesta s preporukama i unakrsnim preglednicima s prekrasnom tipografijom. Ovaj se alat usredotočuje na progresivni razvoj projekta i služi kao polazna točka svakog dizajna.
1140 CSS Grid
1140 CSS Grid je izvrstan CSS grid sustav dizajniran od strane dizajnera u Melbourneu Andy Taylor, koji omogućuje da se vaš dizajn savršeno uklapa u 1140px za velike monitore i vaš izgled fluida će se bez problema prilagoditi drugim manjim rezolucijama uz vrlo malo rada.
1KBCSSGrid
1KB CSS Grid dizajniran od strane Tylera Tatea, jednostavan je i lagan CSS Grid generator. To će vam omogućiti da postavite broj stupaca, širinu stupca i širinu oluka, a možete dobiti i CSS za vašu mrežu.
bootstrap
Bootstrap, koji su kreirali i održavali Mark Otto i Jacob Thornton na Twitteru, izvrstan je skup elemenata korisničkog sučelja, izgleda i alata za javascript, koji su dostupni za preuzimanje i korištenje u svojim web-projektima..
Fluid Grid Calculator
Ovaj jednostavan alat će vam pomoći da brzo zgrabite CSS vašeg dizajna web stranice tekućine.
Fluid Grids
Fluid Grid je jednostavan, ali koristan okvir fluidne mreže, koji stvara odgovarajući raspored na temelju 6, 7, 8, 9, 10, 12 ili 16 stupaca.
Flurid
Flurid je jednostavan i vrlo koristan cross-browser CSS mrežni okvir s do 16 stupaca. Štoviše, ne skriva piksele u margine.
Gridset
Gridset je alat za izradu rešetki bilo koje vrste, kao što su, stupčaste, asimetrične, fiksne, omjer, spoj, odgovarajući i još mnogo toga. Ovaj alat Mark Boultona i dalje je u beta fazi, ali se pokazuje kao obećavajući. I jesam li spomenuo, korištenje je jednostavno kao ugradnja veze.
Gridpak
Gridpak je mrežni mrežni generator, gdje se može mijenjati broj stupaca, paddinga i oluka, te se mogu dodati prilagođene točke prekida. CSS se generira pomoću alata i spreman je za preuzimanje. Ona također pruža PNG grid predloške, koji se mogu koristiti za izradu svrhe u Photoshopu.
SimpleGrid
SimpleGrid, koji je razvio Michael Kuhn, vrlo je jednostavan i jasan CSS okvir za stvaranje beskonačnih rasporeda temeljenih na mreži. Po zadanom, SimpleGrid je pripremljen za 4 različita raspona veličina zaslona.
Susy
Susy by Oddbird, sličan je po djelovanju Semantic Grid Systemu. Ne koristi nikakve dodatne oznake niti bilo koje druge posebne klase, ali je namijenjen samo korisnicima Saasa i njegovom proširenju Compass.
Tiny Fluid Grid
Tiny Fluid Grid je nevjerojatna web-aplikacija koja vam može pomoći da interaktivno odredite mrežni sustav vaše web-lokacije. Možete postaviti broj stupaca, postotak oluka, minimalnu i maksimalnu širinu izgleda web-lokacije, a možete dobiti i CSS za preuzimanje.
Promjenjivi mrežni sustav
Varijabilni mrežni sustav je dizajniran i razvijen od strane SprySoft i temelji se na 960 Grid sustavu. To omogućuje programerima i dizajnerima da generiraju prilagođenu mrežu i zatim preuzmu prateću CSS datoteku na temelju te mreže.
Skice Sheets & Wireframes
[Povratak na vrh]
Prilagodljivi web-crteži skica
Ovaj je alat koristan za mapiranje položaja različitih elemenata u izgledu web-lokacije na različitim uređajima. Pomoću ovog uređaja možete stvoriti ideju o tome gdje smjestiti potrebne elemente web-lokacije za različite veličine zaslona i razlučivosti.
Odgovarajući Wireframes
Responsive Wireframes je eksperimentalni alat kojeg je stvorio James Mellers iz tvrtke Adobe. Izgrađen je samo s HTML-om i CSS-om (bez slika ili JS-a) koje možete koristiti za vizualizaciju izgleda vašeg odgovarajućeg dizajna na stvarnim preglednicima različitih stolnih računala i mobilnih uređaja.
StyleTiles
Stil pločice vam daje način da razvijete ideju o tome kako bi izgledala web stranica, neovisno o kompliciranim stilovima koji dolaze u igru. To vam daje mogućnost za savršen odziv dizajna i mogućnost integriranja povratnih informacija klijenta.
Dodaci za JavaScript i jQuery
[Povratak na vrh]
Adapt.Js
Adapt.js je Javascript rješenje i izvrsna alternativa CSS medijskim upitima. Korištenje @media pristupa je dobra praksa, ali to ne radi za sve preglednike. Nathan Smith, kreator 960 Grid sustava, objavio je Adapt.js, vrlo laganu javascript biblioteku kako bi prevladao ovaj problem..
Izotop
Izotop je nevjerojatan jQuery plugin, koji se pokazao vrlo korisnim prilikom dizajniranja odgovarajućeg dizajna. To ne samo da pomaže prerasporediti elemente stranice kada se promijeni prozor preglednika ili je veličina zaslona manja, nego također pomaže filtrirati te elemente.
zidarstvo
Zidarstvo je izvrstan jQuery dodatak koji se koristi za stvaranje dinamičkih i prilagodljivih rasporeda. Ovaj dodatak pomaže u preraspodjeli elemenata u vašem odgovornom dizajnu, tako da se mogu bolje uklopiti u otvorena mjesta na mreži.
Respond.js
Respond.js je brz i lagan (3 Kb minificiran i 1 Kb gzipped) skripta, čiji je glavni cilj omogućiti odgovarajući web dizajn u onima koji ne podržavaju CSS3 Media upite, poput IE preglednika.
TinyNav.js
TinyNav.js je mali i lagani plugin jQuery, samo 362 bajta, koji pretvara velike navigacijske liste u male padajuće izbornike za manje zaslone.
Wookmark dodatak za jQuery
Wookmark je jQuery dodatak koji otkriva veličinu prozora preglednika i automatski raspoređuje elemente stranice u stupce. Na dnu stranice možete vidjeti i pregled uživo.
Testiranje i pregled
[Povratak na vrh]
ProtoFluid
ProtoFluid je web-based alat za izradu prototipova koji vam omogućuje testiranje prototipa vaše web stranice u različitim veličinama zaslona i razlučivosti. Samo utipkajte URL, odaberite uređaj (ili bilo koje prilagođene dimenzije) i pritisnite lansiranje. Budući da se radi o alatu koji se temelji na webu, omogućuje vam i korištenje drugih proširenja kao što je FireBug.
Responsive.Is
Responsive.Is je kreirao TypeCast drugi alat za emulaciju preglednika, koji možete koristiti za testiranje odgovorajućeg dizajna. Samo utipkajte URL i automatski će promijeniti njegovu veličinu ovisno o uređaju koji odaberete.
Responsivepx.Com
ResponsivePx je strašan alat za testiranje vaše web stranice odgovarajući dizajn. Glavna značajka koja ga razlikuje od drugih je njezina sposobnost mijenjanja veličine web-lokacije piksela po pikselu. Ova izvrsna značajka omogućit će vam da identificirate točke prekida i testirate kako CSS medijski upiti rade na Vašoj web lokaciji.
Odgovarajući alat za testiranje web dizajna
Sjajna alatka za testiranje, koja vam omogućuje da istovremeno gledate svoju web-lokaciju u različitim veličinama zaslona u jednom zaslonu, dok ih gradite ili dizajnirate. Sviđa mi se ovaj alat uglavnom zato što pokazuje sve razlučivosti zaslona rame uz rame, što olakšava debagiranje.
ReView.Js
ReView je dinamičan sustav prikaza, razvijen u čistom JavaScriptu, koji vam pruža fantastično iskustvo gledanja za vaš web dizajn.
Screenfly
Screenfly by QuirkTools je nevjerojatan alat koji će vam omogućiti da pregledate svoju web-lokaciju u različitim uređajima: Desktop, Tablet, Mobile i TV. Također ima opcije za uključivanje ili isključivanje pomicanja ili čak za zakretanje zaslona.
Screenqueri.es
Screenqueri.es je pixel-savršen alat za testiranje dizajna. Samo unesite adresu web-lokacije koju želite provjeriti, a ovaj alat će prikazati web-lokaciju u različitim veličinama zaslona ovisno o uređaju. Također možete ručno promijeniti veličinu piksela po pikselu da biste identificirali točke prekida.
Responsinator
Testirajte svoju web-lokaciju na raznim uređajima od iPhonea i iPad-a, do Kindlea i na Androidu na Responsinatoru. Prikazuje i vašu web-lokaciju u portretnom i pejzažnom načinu. Ovaj alat mi se mnogo više sviđa zbog obrisa uređaja koji se prikazuju na stranici, što donosi više značenja cijelom procesu.
klizači
[Povratak na vrh]
Borovnica
Borovnica je fantastičan open source jQuery klizač za slike, koji je napisan posebno za fluidni ili odgovarajući raspored.
Elastislide
Želite li vrtuljak koji će se automatski prilagoditi veličini zaslona kada se promijeni prozor preglednika ili kada se nalazite na manjem zaslonu? Elastislide je najprikladniji jQuery dodatak za vaše potrebe.
Odgovarajući klizač CSS3
Ovo je čisti CSS3 klizač koji se može lako prilagoditi bilo kojoj veličini zaslona i razlučivosti zaslona. Lijepa stvar kod ovog klizača je ta da strelice ulaze u okvir kada je veličina zaslona uređaja mala. Nije potreban JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js je vrlo jednostavan i iznimno lagan (samo 1Kb) jQuery dodatak koji stvara odgovarajući klizač pomoću neuređenih popisa. Radi na širokom rasponu preglednika, također na IE6 i više.
Drugi
[Povratak na vrh]
Prilagodljive slike
Adaptive Images je online alat za web-dizajn koji otkriva veličinu zaslona posjetitelja te stvara, pohranjuje i isporučuje slike s pomakom, na temelju veličine zaslona i razlučivosti..
FitText.Js
FitText.js je mali JavaScript alat koji omogućuje automatsku promjenu veličine teksta i naslova kada se promijeni prozor preglednika. Nema više briga o neusklađenosti veličine teksta s ovim alatom.
FitVid.Js
Želite li promijeniti veličinu ugrađenih videozapisa kada se promijeni prozor preglednika ili ako je uređaj manje rezolucije? FitVid.Js vam može pomoći da postignete ovo. To je lagan, jednostavan, jednostavan za korištenje jQuery plugin koji se koristi za postizanje uloženih video zapisa širine fluida.
Slike mrežnice
Retina Images je strašan javascript rješenje, koje će automatski poslužiti @ 2X veće, visoke razlučivosti slike kada se gleda na retina zaslonu. Sve što trebate učiniti je staviti verziju visoke rezolucije svake pojedinačne slike, a ona će upravljati ostatkom.
Besprijekorna prilagodljiva foto-mreža
Besprijekorna prilagodljiva foto-mreža prikazuje slike od ruba do ruba na pregledniku, bez ikakvih praznina između slika. Fotografije su popločane i teku od lijeva na desno kroz stranicu u stupcima. Broj stupaca prilagođenih u skladu s time pri promjeni veličine prozora preglednika.
SlabText
SlabText je jQuery plugin ili alat Brian McAllistera koji se temelji na algoritmu slabText, koji razdvaja naslove u redove prije promjene veličine svakog retka kako bi popunio raspoloživi prostor. To je vrlo slično FitText.Js dodatku u akciji.
Zurb - ResponsiveTables
Jeste li se ikada zapitali kako se nositi s velikim tablicama podataka u odgovornom dizajnu? Zurb, CSS / JS kombinacija daje vam odgovor; uzima tablice podataka i mijenja ih tako da ne razbijaju odgovarajući raspored na manjim zaslonskim uređajima.
Categorizr
Categorizr je vrlo mali PHP skript, pruža posjetiteljima s više ciljanog web iskustva. To će vam pomoći u isporuci dizajna specifičnih za uređaj za tablet, TV, mobitel ili radnu površinu.
Media Query Bookmarklet
Media Query Bookmarklet pokazuje koja je veličina trenutnog prikaza i koji je medijski upit upravo za njega ispaljen.
Odgovarajući kalkulator
Responsive Calculator je vrlo jednostavan online alat koji vam može pomoći da pretvorite piksele u postotke dok dizajnirate web-lokaciju koja odgovara vašim potrebama.
Sljedeći tjedan
U drugom tjednu ove serije vodit ćemo vas vodičima koji će vas doista dovesti u Responsive Web Design (RWD).
Ne propustite.
