50 de instrumente utile pentru Design Designer
În ultimele zile, vă prezentăm câteva dintre cele mai bune teme WordPress și Joomla ce pot fi descărcate și utilizate pe site-ul dvs. Astăzi, o să vă dau uneltele. Cuprindeți cadre, servicii și script-uri descărcabile, credem că vor fi un mare ajutor atunci când vine vorba de dezvoltarea web responsabilă.
Pentru a face mai ușoară scăderea întregii liste de instrumente, le-am clasificat în următoarele secțiuni:
- Grilă și cadre
- Schițe și foi de sticlă
- Plugin-uri JavaScript și jQuery
- Testarea și previzualizarea
- Sliders
- Alții
Grilă și cadre
[Inapoi sus]
Columnal
Columnal este un proiect Pulp + pixeli, care a fost împrumutat de la cssgrid.net, în timp ce unele inspirații de cod au fost preluate de la 960.gs. Columnal vă ajută foarte mult în proiectarea web responsabilă, făcând flexibilitatea rețelelor să se modifice dinamic când fereastra browserului este redimensionată.
Schelet
Skeleton este un cadru CSS simplu și puternic, care este, în primul rând, plăcut de dezvoltatori și designeri datorită simplității și eficienței acestuia. Nu există greu de înălțat cu Javascript aici, doar CSS bun și pur, cu documentație curată.
LessFramework 4
Mai puțin cadru este mai mult sau mai puțin un cadru, în numele creatorului său. Acesta este un sistem adaptiv CSS grid bazat pe utilizarea interogărilor inline ale CSS, ceea ce face mult mai ușor dezvoltarea site-urilor responsabile.
Sistemul de rețea semantică
Sistemul de grilă semantică este utilizat pentru a proiecta machete de rețea receptive. Utilizează extensii CSS pre-procesate cum ar fi LESS, SCSS sau Stylus pentru a oferi o eficiență maximă. Puteți selecta lățimea coloanelor și jgheaburilor, puteți alege numărul de coloane și puteți comuta între pixeli și procente.
Sistemul Grilei de Aur
Golden Grid System este un sistem de grilă fluid care servește drept punct de plecare al designului dvs. web receptiv. Permite site-ului să servească pagini frumoase de la 240 la 2560 de pixeli.
320 și Sus
320 și Up reprezintă o soluție CSS pentru fișierele de discuri, care servește drept șablon de pornire pentru designul dvs. receptiv. Urmează o abordare complet inversă decât celelalte centrale disponibile.
Inuit.css
Inuit.css este un cadru CSS, care este extrem de ușor de utilizat, chiar și pentru începători. Ea are o abordare minimalistă, astfel încât trebuie să rezolvați doar lucrurile care sunt necesare, dar dacă este nevoie, poate fi extinsă și cu o mână de plugin-uri disponibile.
Gridless
Gridless este o placă de bază pentru crearea de site-uri cu răspuns rapid și cross-browser cu tipografie frumoasă. Acest instrument se concentrează pe dezvoltarea progresivă a unui proiect și servește ca punct de plecare pentru orice proiect.
1140 Grilă CSS
1140 CSS Grid este un excelent sistem de grilă CSS creat de designerul Melbourne Andy Taylor, care vă permite proiectarea să se potrivească perfect la 1140 pixeli pentru monitoarele mari și aspectul dvs. fluid se va adapta fără probleme la alte rezoluții mai mici,.
1KBCSSGrid
1KB Grid CSS proiectat de Tyler Tate, este un generator CSS Grid simplu și ușor. Acesta vă va permite să setați numărul de coloane, lățimea coloanei și lățimea jgheabului și puteți obține un CSS descărcabil pentru grila dvs. de site web.
bootstrap
Bootstrap, creat și întreținut de Mark Otto și Jacob Thornton pe Twitter, este un set excelent de elemente de interfață cu utilizatorul, layouts și instrumente de javascript, disponibile gratuit pentru descărcare și utilizare în proiectele dvs. de web design.
Calculator de grilă fluidă
Acest instrument simplu vă va ajuta să luați rapid CSS-ul pentru design-ul web al grilei dvs. de fluid.
Grile fluide
Fluidul Grid este un cadru ușor, dar util, pentru grilă, care creează structuri receptive bazate pe 6, 7, 8, 9, 10, 12 sau 16 coloane.
Flurid
Flurid este un cadru de rețea CSS cu un cross-browser simplu și foarte util, cu până la 16 coloane. În plus, nu ascunde pixelii în margini.
Gridset
Gridset este un instrument pentru a face grile de orice tip, cum ar fi, coloane, asimetrice, fix, raport, compus, receptiv și mai mult. Acest instrument de Mark Boulton este încă în versiune beta, dar se dovedește a fi promițător. Și am menționat, folosind este la fel de simplu ca încorporarea unei legături.
Gridpak
Gridpak este un generator de rețea receptiv online, unde numărul de coloane, zăpadă și jgheab pot fi modificate și pot fi adăugate puncte de interferență personalizate. CSS este generat de instrument și pregătit pentru descărcare. Acesta oferă, de asemenea, șabloane de rețea PNG, care pot fi utilizate în scopuri de proiectare în Photoshop.
SimpleGrid
SimpleGrid, dezvoltat de Michael Kuhn, este un cadru CSS foarte simplu și simplu pentru crearea unor modele de rețea infinite. Implicit, SimpleGrid este pregătit pentru 4 intervale distincte de dimensiuni ale ecranului.
Susy
Susy de Oddbird, este similar în acțiune cu Sistemul de Grid Semantic. Nu folosește nici un marcaj suplimentar sau alte clase speciale, ci este destinat numai utilizatorilor Saas și extensiei sale Compass.
Tiny Fluid Grid
Tiny Fluid Grid este o aplicație web minunată, care vă poate ajuta să determinați într-un mod interactiv sistemul de rețea al site-ului dumneavoastră. Puteți seta numărul de coloane, procentajul jgheabului, lățimea minimă și maximă a aspectului site-ului dvs. și puteți obține un CSS descărcabil pentru acesta.
Sistem de grilă variabilă
Sistemul de grilă variabilă este proiectat și dezvoltat de SprySoft și se bazează pe sistemul 960 Grid. Acesta permite dezvoltatorilor și designerilor să genereze grila personalizată și apoi să descarce fișierul CSS însoțitor, bazat pe grila respectivă.
Schițe și foi de sticlă
[Inapoi sus]
Abilități de șablon
Acest instrument este util pentru maparea destinațiilor de plasare a diferitelor elemente în aspectul site-ului dvs. web pe diferite dispozitive. Cu ajutorul acestui dispozitiv, puteți forma o idee despre locul unde puteți plasa elementele necesare ale unui site web pentru diferite dimensiuni și rezoluții ale ecranului.
Rețele de fire receptive
Responsive Wireframes este un instrument experimentat creat de James Mellers de la Adobe. Este construit doar cu HTML și CSS (nu au fost folosite imagini sau JS) pe care le puteți utiliza pentru a vizualiza modul în care va arăta designul dvs. receptiv în browserele reale ale diferitelor desktop-uri și dispozitive mobile.
StyleTiles
Style Tiles vă oferă o modalitate de a dezvolta o idee despre modul în care un site ar arăta, independent de stilurile complicate care intră în joc. Acesta vă oferă șansa unui flux de lucru de proiectare perfect receptiv și, de asemenea, capacitatea de a integra feedback-ul clientului.
Plugin-uri JavaScript și jQuery
[Inapoi sus]
Adapt.Js
Adapt.js este o soluție Javascript și o alternativă excelentă la interogările mass-media CSS. Folosirea metodei @media este o practică bună, dar acest lucru nu funcționează pentru toate browserele. Nathan Smith, creatorul sistemului 960 Grid, a lansat Adapt.js, o bibliotecă javascript foarte ușoară pentru a depăși această problemă.
Izotop
Izotopul este un plugin jQuery uimitor, care se dovedește a fi foarte util în timp ce proiectează un design receptiv. Nu numai că ajută la rearanjarea elementelor unei pagini atunci când fereastra browserului este redimensionată sau dimensiunea ecranului este mai mică, dar ajută și la filtrarea acelor elemente.
Zidărie
Masoneria este un plugin jQuery excelent, folosit pentru a crea structuri dinamice și adaptive. Acest plugin ajută la rearanjarea elementelor în designul dvs. receptiv, astfel încât acestea să se potrivească mai bine în locurile deschise de pe rețea.
Respond.js
Respond.js este un script rapid și ușor (3 Kb minimalizat și 1 Kb gzipped), al cărui scop principal este de a permite designul web receptiv în cele care nu suportă CSS3 Media Queries, cum ar fi browserele IE.
TinyNav.js
TinyNav.js este un plugin jQuery mic și ușor, de numai 362 octeți, care convertește liste de navigare mari în meniuri derulante mici pentru ecrane mai mici.
Wookmark jQuery Plugin
Wookmark este un plugin jQuery care detectează dimensiunea ferestrei browserului și aranjează automat elementele paginii în coloane. De asemenea, puteți vedea o previzualizare live în partea de jos a paginii.
Testarea și previzualizarea
[Inapoi sus]
ProtoFluid
ProtoFluid este un instrument de prototipare bazat pe web care vă permite să testați prototipurile site-urilor web în diferite dimensiuni și rezoluții ale ecranului. Introduceți doar adresa URL, selectați dispozitivul (sau orice dimensiune personalizată) și apăsați lansarea. Deoarece este un instrument bazat pe web, vă permite de asemenea să utilizați alte extensii, cum ar fi FireBug.
Responsive.Is
Responsive.Is este creat de TypeCast un alt instrument de emulator de browser, pe care îl puteți folosi pentru a testa designul receptiv. Introduceți doar o adresă URL și aceasta va schimba automat dimensiunea acesteia în funcție de dispozitivul pe care îl alegeți.
Responsivepx.Com
ResponsivePx este un instrument minunat pentru testarea designului site-ului dvs. receptiv. Caracteristica principală care îl diferențiază de ceilalți este capacitatea sa de a redimensiona pixel-cu-pixel-ul site-ului web. Această caracteristică minunată vă va permite să identificați punctele de întrerupere și, de asemenea, să testați modul în care interogările media CSS funcționează în site-ul dvs..
Instrumentul de testare responsabilă pentru designul web
Un instrument minunat de testare, care vă permite să vizualizați simultan site-ul dvs. de reacție în diferite dimensiuni ale ecranului într-un singur ecran, în timp ce le construiți sau le proiectați. Îmi place acest instrument în principal pentru că arată toate rezoluțiile de ecran una lângă cealaltă, ceea ce face mai ușor depanarea.
ReView.Js
ReView este un sistem dinamic de vizualizare, dezvoltat în JavaScript pur, care vă oferă o experiență fantastică de vizionare pentru design-ul Web receptiv.
Screenfly
Screenplay de QuirkTools, este un instrument uimitor care vă va permite să vizualizați site-ul dvs. receptiv într-o varietate de dispozitive: Desktop, Tablet, Mobile și TV. De asemenea, are opțiuni pentru activarea sau dezactivarea derulării sau chiar pentru rotirea afișajului.
Screenqueri.es
Screenqueri.es este un instrument de testare a designului care răspunde perfect la pixeli. Doar introduceți orice adresă de site pe care doriți să o verificați și acest instrument efectuează afișarea site-ului în diferite dimensiuni ale ecranului în funcție de dispozitiv. De asemenea, puteți redimensiona manual dimensiunea pixel-cu-pixel pentru a identifica punctele de întrerupere.
Responsabilatorul
Testați-vă site-ul pe diverse dispozitive de pe iPhone și iPad, pe Kindle și pe Android pe Responsinator. De asemenea, afișează site-ul dvs. atât în modul portret, cât și în modul peisaj. Îmi place acest instrument mult mai mult din cauza contururilor dispozitivelor afișate pe pagină, ceea ce aduce mai multă semnificație întregului proces.
Sliders
[Inapoi sus]
Coacăze
Blueberry este un slider fantastic de imagine open source jQuery, care este scris pentru a lucra în mod specific pentru dispozitive fluide sau receptive.
Elastislide
Doriți un carusel care să se ajusteze automat la dimensiunea ecranului atunci când fereastra browserului este redimensionată sau când vă aflați pe un ecran mai mic? Elastislide este cel mai potrivit plugin jQuery pentru nevoile dumneavoastra.
Glisorul CSS3 receptiv
Acesta este un slider CSS3 pur sensibil care se poate adapta ușor la orice dimensiune a ecranului și la rezoluția ecranului. Lucru frumos despre acest cursor este faptul că săgețile intră în cutie când dimensiunea ecranului dispozitivului este suficient de mică. Nu este nevoie de JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js este un plug-in foarte simplu și extrem de ușor (doar 1Kb) jQuery care creează un cursor receptiv folosind lista neordonată. Lucrează pe o gamă largă de browsere, de asemenea pe IE6 și până.
Alții
[Inapoi sus]
Imagini Adaptive
Adaptive Images este un instrument on-line pentru designul web receptiv, care detectează dimensiunea ecranului vizitatorilor și creează, cache și oferă imagini redimensionate, în funcție de dimensiunea și rezoluția ecranului.
FitText.Js
FitText.js este un mic instrument de javascript, care permite redimensionarea automată a textului și titlurilor atunci când fereastra browserului este redimensionată. Nu mai faceți griji legate de mărimea textului cu acest instrument la bord.
FitVid.Js
Doriți să redirecționați videoclipurile încorporate când fereastra browserului este redimensionată sau dacă dispozitivul are o rezoluție mai mică? FitVid.Js vă poate ajuta să obțineți acest lucru. Este un plugin jQuery ușor, simplu, ușor de utilizat, folosit pentru a obține înregistrări video încorporate în lățime.
Retina Imagini
Retina Images este o soluție minunată de javascript, care va servi în mod automat imagini de 2X mai mari, cu rezoluție înaltă, atunci când sunt vizualizate pe ecranul retinei. Tot ce trebuie să faceți este să puneți o versiune de înaltă rezoluție a fiecărei imagini și aceasta va gestiona restul.
Grilă foto receptivă fără probleme
Grilă foto responsabilă fără probleme, afișează imaginile de la margine la margine în browser, fără să existe lacune între imagini. Fotografiile sunt acoperite cu gresie și curg de la stânga la dreapta pe toată pagina în coloane. Numărul de coloane se ajustează corespunzător, deoarece fereastra browserului este redimensionată.
SlabText
SlabText este un plugin sau utilitar jQuery al lui Brian McAllister, bazat pe algoritmul slabText, care împarte titlurile în rânduri înainte de redimensionarea fiecărui rând pentru a umple spațiul disponibil. Este destul de similar cu plugin-ul FitText.Js în acțiune.
Zurb - mese responsive
Te-ai intrebat vreodata cum sa te descurci cu tabelele mari de date in design sensibil? Zurb, un combo CSS / JS vă oferă răspunsul; ia tabelele de date și le modifică astfel încât să nu spargă aspectul receptiv pe dispozitivele cu ecran mic.
Categorizr
Categorizr este un script PHP foarte mic, care oferă vizitatorilor dvs. o experiență web mai bine orientată. Acesta vă va ajuta să furnizați modele specifice dispozitivelor pentru Tablet, TV, Mobile sau Desktop.
Media Query Booklet
Media Query Bookmarklet vă arată ce mărime are portul curent de vizualizare și ce interogare media a fost lansată pentru aceasta.
Calculatorul receptiv
Calculatorul Responsiv este un instrument online foarte simplu, care vă poate ajuta să transformați pixelii în procente în timp ce proiectați site-ul dvs. receptiv.
Până săptămâna viitoare
În cea de-a doua săptămână a acestei serii, vă vom învăța tutoriale care vă vor purta într-adevăr în Responsabil Web Design (RWD).
Nu ratați.
