9 mjete thelbësore të krijimit të uebfaqeve të përgjegjshme

Autor: Monica Porter
Data E Krijimit: 21 Marsh 2021
Datën E Azhurnimit: 20 Mund 2024
Anonim
9 mjete thelbësore të krijimit të uebfaqeve të përgjegjshme - Krijues
9 mjete thelbësore të krijimit të uebfaqeve të përgjegjshme - Krijues

Përmbajtje

Emri im është Ben Callahan, dhe unë jam një përdorues i mjeteve. Nëse nuk jam i kujdesshëm, do të kaloj më shumë kohë duke luajtur me mjetet më të reja të nxehta sesa duke bërë punën për të cilën ishin ndërtuar për të më ndihmuar. Shanset janë, disa prej jush janë në të njëjtën mënyrë, prandaj isha i ngazëllyer me rastin për të eksperimentuar dhe, në fund të fundit, për të rekomanduar, disa nga këto mjete.

Këto ditë, çdo sit i ri që vizitoj përmban dizajn të përgjegjshëm të uebit. Ndihet sikur kjo qasje fleksibile për ndërtimin e një rrjeti me shumë pajisje është bërë normë sesa përjashtim. Për këtë qëllim, nëse e konsideroni punën tuaj të ndërtoni një rrjet më miqësor për të ardhmen, atëherë të gjitha këto mjete do t'ju ndihmojnë të përmbushni atë qëllim. Disa prej tyre janë më specifike për llojet e sfidave që hasim në punën e përgjegjshme. Disa janë më pak të lidhura drejtpërdrejt, por gjithsesi mjaft të rëndësishme.

Më në fund, këto mjete nuk renditen sipas përparësisë. Në vend të kësaj, unë jam përpjekur të zgjedh mjete që përfshijnë të gjitha detyrat me të cilat përballemi, nga dizajni te zhvillimi. Pra, krahasimi i tyre është i vështirë dhe, sinqerisht, nuk është shumë i dobishëm. E drejtë, le të kërcejmë ...


01. Udhëzues për përparësinë e përmbajtjes

Kur fillova të bëj uebsajt, për fat të mirë isha i pavëmendshëm për rëndësinë e përmbajtjes në ndërtimin e uebit. Shpejt mësova se po më mungonte një pjesë kritike e procesit - isha si një skulptor pa argjilë. Nëse e gjeni veten duke luftuar për të përfshirë teknikat e strategjisë së përmbajtjes në procesin tuaj, ky mjet i thjeshtë është mënyra perfekte për të futur një mendim të parë të përmbajtjes në rrjedhën tuaj të punës.

Udhëzuesi për përparësinë e përmbajtjes u krijua nga Emily Gray si një lloj mjeti hibrid për t’u përdorur në situata ku nuk është e mundur të futet e gjithë përmbajtja, por duhet të filloni një formë të dizajnit UX.

"Si menaxher i projektit, më duhej një vend i qëndrueshëm për të filluar hartimin e UX. Por si strateg i përmbajtjes, nuk kisha gjithë përmbajtjen, vetëm idetë prapa përmbajtjes. Unë zhvillova udhëzuesin për të plotësuar ato boshllëqe", shpjegon Gri Koncepti përzien ide nga modelimi i përmbajtjes me kornizën e thjeshtë të telit.


Për të përdorur këtë udhëzues, duhet të përshkoni çdo faqe unike në sistemin tuaj, duke identifikuar llojet e përmbajtjes së zbatueshme dhe duke i ndarë ato në pjesët e tyre më të vogla. Për më tepër, Gray i krijon këto si Google Doc dhe i ndan me klientët e saj. Kjo inkurajon një qasje më bashkëpunuese kur bëhet fjalë për krijimin e llojeve të përmbajtjes, si dhe fillimin e procesit të prioritizimit. Në punën e përgjegjshme, të kuptuarit e hierarkisë së përmbajtjes dhe funksionalitetit, të pavarur nga gjerësia e pamjes, është kritike. Ky mjet ju ndihmon të vërtetoni që në fillim të procesit.

Udhëzuesit e përparësisë së përmbajtjes ju ndihmojnë të identifikoni llojet e përmbajtjes që mund të përdoren përsëri, gjë që çon në një kuptim të fortë se si të strukturoni CMS tuaj. Dhe, nëse jeni duke përdorur teknika moderne të zhvillimit të frontendit (shih mjetin 2), kjo gjithashtu ju jep një kornizë se si të moduloni markimin tuaj.

02. Laboratori i modelit


Dave Olsen dhe Brad Frost kanë zhvilluar një mjet të bukur për të lehtësuar modelin e drejtuar nga modeli. Laboratori i modelit bazohet në idenë që ju duhet ta ndani modelin tuaj në pjesët më të vogla ('atomet') dhe më pas t'i përdorni ato për të ndërtuar përbërës më të mëdhenj, të ripërdorshëm ('molekulat' dhe 'organizmat'). Këto tre blloqe ndërtimi thelbësore mund të përdoren për të krijuar shabllone dhe të injektohet me përmbajtje reale për të krijuar faqe.

Në thelbin e saj, Pattern Lab është një gjenerator i faqeve statike. Në praktikë, është shumë më tepër. Struktura që kjo mënyrë ndërtimi siguron rezulton në një sistem shumë më modular - një sistem që është më i lehtë për t'u integruar me çdo sistem të menaxhimit të përmbajtjes.

03. Skica

Kur bëhet fjalë për dizajnin, shumë njerëz flasin për Sketch. Aty ku mjetet si Photoshop dhe InDesign i kanë rrënjët në dizajn për mediumet e tjera, Sketch u ndërtua nga themeli duke pasur në mendje rrjetën.

Lejimi i faqeve të shumta për skedar dhe tabelave të shumta artistike për faqe e bën detyrën e organizimit të dizajnit tuaj dukshëm më të thjeshtë. Karakteristika të tilla si pasqyrimi ju lejojnë të shihni me lehtësi punën tuaj në pajisjet e lidhura iOS, duke hequr elementin e supozimit nga dizajnimi për ekranet e vogla.

Sketch ka mjete si për redaktimin vektorial ashtu edhe për atë raster, por duket se është vendosur në favor të vektorëve. Çiftëzojeni këtë me veçoritë e tij të thjeshta dhe të fuqishme eksportuese dhe ju jeni gati të mbështesni shumëllojshmërinë e ekraneve me densitet të lartë pikselësh atje tani, dhe (gishtat e kryqëzuar) çfarëdo që sjell e nesërmja.

04. Sass

Mbaj mend që isha skeptik për parapërpunimin e CSS kur filloi të shfaqej. Unë jam një shkollë pak e vjetër - unë kam shkruar CSS për një kohë të gjatë tani - kështu që ideja që CSS ime do të gjenerohej nga ndonjë 'ngjarje e para-përpunimit' bëri që qimet në pjesën e pasme të qafës time të ngriheshin. Gjithashtu nuk më ndihmoi që isha mjaft i zhgënjyer me CSS të gjeneruar nga përsëritjet e para të Less and Sass.

Por, si shumica prej jush, që atëherë e kam parë dritën. Sass na ka dhënë gjëra që gjithmonë kemi ëndërruar: variabla, fole dhe matematika për të përmendur disa. Por gjithashtu ka hapur mënyra krejt të reja për të punuar me karakteristika si miksina, gurgullimi i pyetjeve mediatike dhe aftësia për të krijuar skedarë të pjesshëm dhe të përgjithshëm (mësoni më shumë për të gjitha këto këtu). Unë sinqerisht mund të them se Sass ka ndryshuar plotësisht mënyrën se si unë punoj me stil në internet. Unë krijoj një kod më modular dhe të mirëmbajtshëm dhe shumë nga ato janë të mundshme (ose të paktën, shumë më lehtë) për shkak të Sass.

05. PostCSS

Nëse mendoni se parapërpunimi i CSS është i mirë, duhet të shikoni se çfarë po bëhet me PostCSS. Ideja është e thjeshtë: është një mjet i bazuar në JavaScript për të 'transformuar' CSS tuaj. Shtojca më e popullarizuar PostCSS duket të jetë Autoprefixer, e cila analizon CSS tuaj dhe shton prefikset e shitësit në rregullat e nevojshme duke kontrolluar Mund ta Përdor për mbështetje. Kjo e bën të panevojshme një pjesë të madhe të kornizave të tilla si Compass (edhe pse Compass bën disa gjëra të tjera mjaft të mahnitshme, si krijimi i sprites tuaj për ju).

Ajo që unë dua në lidhje me konceptin e PostCSS është se ne mund të plotësojmë cilindo nga karakteristikat e ardhshme të CSS bazuar në specifikimet e tyre ende jo të zbatuara. Kjo është tepër emocionuese dhe ju mund ta bëni sot duke përdorur cssnext - një shtojcë tjetër PostCSS.

Faqja tjetër: katër mjete më thelbësore të përgjegjshme për krijimin e faqeve në internet

Ne Ju Këshillojmë Të Lexoni
10 shembuj të bukur të ilustrimit në reklamat e shtypura
Zbuloj

10 shembuj të bukur të ilustrimit në reklamat e shtypura

humica e reklamave të htypura hfaqin një kombinim të fotografi ë dhe tipografi ë. Por kur të vini për të hartuar një reklamë të htypur, pye ni v...
Krijoni një ndjesi piktore në artin tuaj dixhital
Zbuloj

Krijoni një ndjesi piktore në artin tuaj dixhital

Piktura dixhitale hi toriki ht ka vuajtur nga pamja tepër artificiale, por me gamën e gjerë të programeve të di ponue hëm ot, ë htë humë më e leht...
Andy Clarke në modelin e ri 320 e lart
Zbuloj

Andy Clarke në modelin e ri 320 e lart

Projektue i, autori dhe altoparlanti Andy Clarke ka lë huar një azhurnim të madh në 320 dhe Up, kazanin celular të tij 'të ekranit të vogël të parë...