Share
În articolul precedent, v-am prezentat la sistemele de rețea. Cu orice noroc, până acum, ar trebui să aveți o bună înțelegere a ceea ce sunt și de ce sunt o armă bună de a avea în arsenalul de design.
Astăzi, voi explica despre alegerea unui sistem de rețea - de a crea propria dvs., de a lucra cu cadre CSS pre-făcute. Până la sfârșitul acestui articol, veți avea o idee bună despre modul în care ați putea dori să vă deplasați pe calea cu sisteme de rețea - și, sperăm, să aveți suficientă încredere pentru a face acest lucru.
Să începem prin îngustarea lucrurilor.
Avem două opțiuni în fața noastră: mergem cu un cadru prestabilit pe care altcineva l-a construit deja sau ne-am creat propriul nostru sistem de rețea și lucrăm cu asta? Într-adevăr, răspunsul este pe cont propriu.
Aș recomanda întotdeauna că, dacă începeți doar cu proiectarea pentru web, atunci ar fi mai bine să începeți proiectarea cu cadre pre-făcute. Aceste modele nu trebuie să fie permanente și pot fi o modalitate de a lucra cu sistemele de rețea într-un mod care ușurează presiunea și vă permite să experimentați și să le înțelegeți mai mult.
Cadrele pre-create vă permit, de asemenea, să lucrați cu prototipuri un design - în cazul în care putem conecta rapid diferite elemente și module într-un design pentru a vedea cum acestea se joacă când sunt de fapt într-un browser (într-un mod cât de realist pe cât pot obțineți, fiind pe o formă digitală, cum ar fi pe web).
Totuși, întotdeauna cred că este mai bine să vă creați propria rețea, dacă vreodată puteți face acest lucru. În acest fel, nu numai că aveți mai mult control asupra designului și structurii rețelei dvs., dar puteți, de asemenea, să aveți mult mai mult control asupra rezultatelor rețelei dvs. și cum aceasta se joacă în faza de dezvoltare a designului site-ului dvs. . Și nu știu despre tine (deși îmi imaginez că mulți dezvoltatori se vor simți la fel cum fac și eu), dar îmi place să am tot controlul pe care îl pot avea asupra codului meu și a modului în care este prezentat; crearea propriilor mele grile îmi permite să fac asta.
Cadrele prefabricate sunt găsite aplenty în lumea design-ului web - ceea ce a apărut aparent cu unul sau două sisteme de grid (cum ar fi 960.gs) a explodat curând la noi, având multe zeci, dacă nu chiar sute, sisteme de grilă disponibile pentru noi utilizare.
Grilele de cadre sunt utile deoarece ne permit să obținem cu ușurință un prototip sau un site de bază în momentul în care ne dezvoltăm. Cu toate acestea, cum putem schimba acest lucru, astfel încât acestea să fie, de asemenea, utile atunci când proiectăm?
Cadrele pre-construite vor veni adesea cu un fel de PNG sau PSD pe care să-l utilizați atunci când proiectați - și dacă nu, atunci va trebui să încercați să replicați această rețea în design-ul dvs. Pur și simplu creați un strat nou și puneți această suprapunere în rețea. Apoi, puteți începe proiectarea la grila pe care o aveți.
Cadrele de rețea populare includ
La fel ca atunci când lucrez cu codul meu, îmi place să am control asupra a ceea ce proiectez. Dacă lucrez cu un cadru de grid premadă, atunci într-un fel îmi dau munca în preferințele altcuiva - în timp ce dacă îmi desenez propriile grile, înseamnă că am toate controlul asupra modului în care funcționează rețeaua mea, cum se leagă designul meu și știu că voi avea mult mai mult control asupra ieșirii codului final, așa cum l-am proiectat.
Deși poate părea destul de descurajant, atâta timp cât sunteți înarmat cu anumite cunoștințe, creativitate și idei de aspect pentru site-ul dvs. web, atunci crearea propriilor rețele nu trebuie să fie la fel de înfricoșătoare pe cât pare.
Crearea propriilor grile este greu atunci când nu ați făcut-o înainte - dar există atât de multe instrumente acolo pentru a vă ajuta. Pana cand au aparut cateva din aceste instrumente, nici eu nu am incercat sa-mi construiesc grilele proprii si am fost un mare fan al cadrelor - dar vazand avantajele de a fi capabil sa-mi creez propriile grile pentru fiecare proiect pe care il fac ma facut sa ma simt mult mai creativi. Simt că pot veni cu idei de design mai inovatoare și mai unice.
În primul rând, atunci când vă proiectați propriile grile, întoarceți-vă continuu la schiță, făcând câteva schițe și idei de aspect. Chiar dacă vă întoarceți la câteva dintre schițele dvs. inițiale pe care le-ați făcut la începutul proiectului, imaginându-vă cum se pot potrivi aceste schițe într-o rețea, puteți fi utile și vă dau un început.
Crearea grilelor proprii este, de asemenea, despre o mulțime de teorii - și prea mult pentru a include aici, deoarece ar putea fi o sesiune masivă de articole pe cont propriu! Încercați însă să învățați mai întâi elementele de bază. Uită-te la site-urile dvs. preferate online și a vedea dacă puteți alege un modular sau grilă-ca modelul lor de design. Vedeți dacă puteți să vă uitați la modelele pe care le admirați și să vedeți cum se aliniază elementele diferite, modul în care grilă s-ar putea adapta atunci când proiectul este scalat în sus sau în jos în mod sensibil - toate acele fel de lucruri mici vă vor ajuta să înțelegeți utilizarea și crearea grilelor mult mai bine.
Așa cum am spus înainte, există multe, multe instrumente disponibile pentru crearea propriilor dvs. grile pentru a le utiliza în design-urile web. Am ales doar trei soluții populare, care m-au ajutat cel mai mult la rularea propriilor mele grile, dar trebuie să fiți conștient de faptul că există mult mai mult doar o căutare Google.
Gridset este un instrument minunat, creat de minunatul folclor la Design Studio Mark Boulton din sudul Țării Galilor.
Cu propriile lor cuvinte, Gridset este pur și simplu un "instrument pentru realizarea rețelelor" - și le face atât de ușor să facă acest lucru. Gridset este perfect pentru toate etapele de creare și utilizare a propriilor dvs. rețele - proiectarea, prototiparea și dezvoltarea etapelor de producție.
Pentru a vă crea propriile grilaje cu Gridset, creați pur și simplu o rețea și apoi creați grilaje diferite pentru fiecare dintre punctele importante de întrerupere pe care le credeți că le veți folosi în designul dvs. Puteți modifica lățimea coloanei, lățimea jgheabului și chiar puteți schimba raportul dintre coloane - și mult mai mult.
Gridset vă oferă o suprapunere a rețelei PNG pe care o puteți utiliza atunci când proiectați, puteți adăuga rapid clase la codul HTML și puteți utiliza măsurătorile pe care Gridset le calculează în propriul dvs. markup (deci nu trebuie să utilizați clasele Gridset furnizate ).
Cu Gridset, puteți utiliza și funcțiile Sass încorporate - ceea ce face chiar mai ușor integrarea designului dvs. de rețea în fluxul de lucru pentru dezvoltare.
Un alt lucru grozav despre Gridset este bogăția de informații pe care le furnizează despre rețele. Am aflat că am învățat atât de mult doar prin blogul Gridset și descifrând specimenele Gridset pe care le au pe pagina lor de pornire.
Gridpak este unul dintre primele instrumente interactive de recepție a grilei de reacție pe care le-am găsit online, creat de Erskine Design în Nottingham.
Gridpak funcționează prin crearea unui număr de grile (prin definirea unei dimensiuni a coloanei, a coloanei de coloană și a lățimilor jgheaburilor) pentru intervalele dvs. personalizate.
Odată ce ați creat toate grilele dvs. în Gridpak, veți obține o descărcare cu toate fișierele de care aveți nevoie pentru a integra grilele dvs. în fluxul de lucru al site-ului dvs. - un PNG pentru a fi utilizat ca o suprapunere de rețea atunci când proiectați, fișierele pe care le puteți utiliza pentru grila Gridpak CSS ("CSS vanilla" pentru clasele dvs. standard, precum și pentru o versiune LESS și Sass) și obțineți, de asemenea, un fișier de suprapunere JavaScript pe care îl puteți utiliza pentru a suprapune grilă pe site-urile dvs. în timpul dezvoltării.
Gridpak mi se pare foarte util pentru prototipuri mai mult decât orice - este foarte rapid să obțineți niște reprezentări vizuale ale rețelei dvs. (și la puncte de interferență deosebit de sensibile) și să le integrați într-un prototip rapid. De acolo, ne putem uita la petrecerea mai multor timpi de rafinare a claselor CSS oferite in propriul nostru markup, asigurandu-ne ca calitatea codului nostru (care ar trebui sa fie intotdeauna important pentru un dezvoltator!) Este de top-notch.
Dacă nu doriți toate clopotele și fluierele și în loc să vă aflați imediat după un calculator rapid care vă va ajuta să creați niște grilaje receptive - atunci aș fi recomandat o excursie la grilajele fluide ale lui Harry Roberts.
Deși nu mai poate găzdui acest lucru pe site-ul său propriu (datorită configurației pe care o are acum), Harry a trimis codul original către Github. Este posibil să trebuiască să faceți o mână de lucru manuală pentru a obține acest lucru, dar merită efortul dacă doriți un sistem rapid și ușor de configurare a cadrului dvs. de rețea și de proiectare.
Acum știți totul despre grile și unele dintre instrumentele de care aveți nevoie atunci când creați grile - vreau să încercați să vă faceți parte din propria dvs.! Folosind oricare dintre instrumentele menționate mai sus - sau chiar folosindu-vă propria, dacă ați dezvoltat deja unul. Încercați-vă mâna la crearea unor sisteme proprii și începeți să le integrați cu desenele. Să vedem rezultatele în comentarii!
Accentsconagua