Svetainės maketai: 4 populiarūs metodai, kuriuos reikia ištirti

Svetainės maketai

Svetainės maketus galima sukurti įvairiais būdais. Tiesa, nėra „geriausio“ požiūrio, tačiau, atsižvelgiant į tam tikrus vartotojo sąsajos ir UX dizainerių stilius ir nuostatas (ir dizaino procesą), kai kurie veiks geriau nei kiti.

Šiame straipsnyje mes apžvelgsime keturių populiariausių variantų pliusus ir minusus: visapusiškus UX įrankius, maketo įrankius, grafinio dizaino įrankius, taip pat koduotus dizainus, kurie pradeda neryškinti linijas tarp svetainės maketų. ir prototipai.

Jei jums ypač reikalingi laidų karkaso įrankiai, žiūrėkite šį įrašą geriausi laidinio rėmo įrankiai arba, jei norite įsigyti platesnę kolekciją, peržiūrėkite mūsų „mega-roundup“ geriausias interneto dizaino priemones .



kaip nufotografuoti veidrodį

GeneruotiJS reklamjuostę

Spustelėkite vaizdą, kad sužinotumėte daugiau ir pasiimtumėte bilietus(Vaizdo kreditas: „Future“ / Toa Heftiba, „Unsplash“)

Nesuklyskite manydami, kad visi svetainės maketai yra vienodi. Paprasti sprendimai dėl platformų, ištikimybės ir kodavimo duos žymiai skirtingus rezultatus. Žinokite, ko norite ir kokie yra jūsų tikslai, net nepradėdami projektavimo proceso - jei norite įrankio, palaikančio visus tris etapus, geriausia pradėti jį naudoti, nei pereiti įpusėjus. Panašiai, jei jums reikia žvaigždžių, visiškai realistiško maketo, nepamirškite, kad tam tikru momentu naudosite grafinio dizaino redaktorių.

01. „End-to-end“ UX įrankiai

Aukščiausioje pakopoje yra „nuo galo iki galo“ įrankiai, kuriais siekiama patenkinti visą darbo eigą: maketai, prototipai, dokumentacija, kūrėjų perdavimas ir projektavimo sistemos. UXPin nuo 2010-ųjų pradžios tenkino šį poreikį, tačiau nemažai kitų prekės ženklų, tokių kaip „Adobe“ ir „InVision“, dabar taip pat bando sukurti „vieną įrankį jiems visiems valdyti“.

UXPin

„UXPin“ gali pasigirti patikimais prototipais, maketais, dokumentais ir kūrėjų perdavimais

Taigi, kaip šie įrankiai kaupiami tik norint sukurti maketą? Jie gali išspręsti juos be jokių problemų - ir tada kai kuriuos. Pavyzdžiui, naudodami „UXPin“ galite sukurti maketus su keliomis būsenomis ir sąveika. Tai netgi imituoja kai kurias „Photoshop“ ir „Sketch“ funkcijas, įtraukiant „Pen“ įrankį.

Iš kitos pusės, „InVision“ studija , leidžia redaguoti gana madingą animaciją; kol „Adobe XD“ leidžia jūsų „XD“ dizainuose atidaryti „Photoshop“ ir „Sketch“ failus ir pritaikyti spalvas, simbolius, tiesinius gradientus ir simbolių stilius.

„InVision“ studija siekia sukurti visišką darbo eigą

Svarbiausia, kad „end-to-end“ įrankiai dabar siūlo projektavimo sistemas, užtikrinančias maketų nuoseklumą visuose projektuose. Dizaino sistemos suteikia visiems vienodą tiesos šaltinį apie turtus ir dizaino principus visuose įrankiuose. Jei planuojate sukurti daug maketų, ši funkcija tampa beveik privaloma.

Renkantis „end-to-end“ įrankį savo svetainės maketui sukurti, verta atsižvelgti į šiuos aspektus:

  • ištikimybė : Ar galingas yra vizualinio ir sąveikos dizaino įrankis?
  • Nuoseklumas : Kokios savybės užtikrina dizaino nuoseklumą jūsų darbe?
  • Tikslumas : Ar elementai, su kuriais dirbate, atspindi jūsų organizacijos „tiesos šaltinį“?
  • Bendradarbiavimas : Ar galite bendradarbiauti su suinteresuotosiomis šalimis ar kitais dizaineriais?
  • Kūrėjo perdavimas : Kaip įrankis kuria specifikacijas ir išteklius kūrėjams?

02. Skirtos maketo priemonės

Mažiau tvirti sprendimai, pvz Principas , Kadruotojas , Moqups arba Balsamiq vis tiek gali suteikti jums viską, ko reikia norint sukurti maketą - tiesiog prarasite papildomas darbo eigos ir dizaino nuoseklumo funkcijas. Šios priemonės sukurtos taip, kad kūrimo procesas būtų kuo lengvesnis, todėl galite daugiau dėmesio skirti stilistiniams sprendimams ir mažiau tam, kaip manipuliuoti programa.

Specialios maketo priemonės turi aiškių pranašumų: pradedantiesiems naudingas jų paprastas naudojimas, o ekspertai vertina dizainą, specialiai pritaikytą jų pažangiems poreikiams. Pažangesnėje pusėje tokie įrankiai kaip „Framer“ ir „Principle“ specializuojasi animacijose ir sąveikose, skirtose maketams.

Kadruotojas

kaip iš teptukų išgauti akrilinius dažus
Tokie įrankiai kaip „Framer“ specializuojasi sąveikos srityje

Apatinėje dalyje „Moqups“ ir „Balsamiq“ suteikia daugiau funkcionalumo nei ne dizaino įrankiai, kurie kartais naudojami vielos rėmams ir maketams (pvz., Pagrindinė žinutė ), tačiau jie apsiriboja tik žemos kokybės dizainais. Tačiau jie gali būti gana naudingi, jei siekiama labai greitai sukurti žemos ištikimybės vielinius rėmus.

Kalbant apie maketo įrankius, turite nuspręsti, ar tiesiog tiks paprastas laidų formavimo sprendimas, ar jums reikia tobulesnio ekrano dizaino. Nesvarbu, kokį maketo įrankį pasirinksite, tiesiog įsitikinkite, kad esate pasirengęs sutikti su bendro darbo eigos nuostoliais ir mažiau dizaino nuoseklumo funkcijomis, kurias siūlo visapusiški įrankiai.

03. Grafinio projektavimo programinė įranga

Kai kurie dizaineriai prisiekia tokia programine įranga kaip „Photoshop CC“ , Eskizas arba „Illustrator CC“ , ypač tiems, kurie turi ypatingą kvalifikaciją ar yra susipažinę su įrankiais, kurie siūlo valdymą iki pikselių. Grafinio dizaino platformos geriausiai veikia, jei siekiate aukščiausio tikroviškumo ir vaizdo ištikimybės lygio. Ir kaip mes paaiškiname savo vadove greitas prototipų kūrimas naudojant „Photoshop CC“ , tai gali būti lengviau, nei jūs manote.

„Photoshop“ suteikia tikslią kontrolę, tačiau gali būti per daug paprastų maketų atveju

Dirbdami grafinio dizaino programinėje įrangoje galite pasiekti beveik nesibaigiantį labai apibrėžtų spalvų pasirinkimą, taigi, jei dirbate laikydamiesi griežtos ir iš anksto nustatytos spalvų schemos, pavyzdžiui, pagal tam tikras prekės ženklo taisykles, apribojimus, šios programos gali būti geriausios variantą. Šios programos siūlo ne tik spalvų pasirinkimą, bet ir daug daugiau vaizdinių įrankių, leidžiančių išspręsti smulkmenas.

Tačiau šio tipo programinės įrangos naudojimo trūkumas yra tas, kad gali būti sunku išversti, kai atėjo laikas pradėti koduoti dizainą. Tai, kas veikė „Photoshop“, ne visada gali veikti kodu (tokiais elementais kaip šriftai, šešėliai, gradiento efektai ir pan.), O tai gali padėti sugaišti laiką sugaištant prototipų kūrimo etapo sprendimus.

Stilingiems puslapiams maketo etape gali būti naudinga išryškinti konkrečias vaizdines detales. Tokiu atveju „Photoshop“ arba „Sketch“ suteiks jums daugiausiai galimybių. Panašiai, jei turite reikalų su išrankiu ar sunkiai prašomu klientu, pateikdami jiems spalvingą ir įspūdingą maketą, juos lengviau laimėsite.

„Photoshop“ ar „Sketch“ sukurtus maketus galima nuvilkti į „UXPin“

Taip pat verta paminėti, kad „Photoshop“ ar „Sketch“ sukurtus maketus galima vilkti ir išmesti į prototipų kūrimo fazę naudojant „UXPin“. Tai leidžia keliais paspaudimais lengvai animuoti visus sluoksnius (be plokščiavimo) ir užtikrina, kad jums nereikės pradėti nuo nulio, kai ateis laikas prototipuoti.

„lego“ žvaigždžių karai gali būti 4 d

Jei vaizdai nėra vienintelis jūsų prioritetas, galbūt efektyviau naudosite įrankį, leidžiantį atlikti laidų rėmelius, maketus ir prototipus vienoje vietoje. Grafinio dizaino programinė įranga gali sukelti daugiau problemų, nei verta maketams, nebent ieškote optimalios vizualizacijos - jums tikrai reikės reguliariai bendrauti su savo kūrėju, nes šie įrankiai nėra skirti bendradarbiavimui.

04. Užkoduoti maketai

Jei daugiausia esate dizaineris ir jums nepatinka kodavimas, tai akivaizdžiai nėra pasirinkimas. Kaip aptarta Maketų vadovas , koduoti maketai nėra numatytasis pasirinkimas.

Daugumą kodavimo galima atidėti iki prototipų kūrimo etapo (jei kuriate HTML / „JavaScript“ prototipą) arba dar vėliau (jei naudojate prototipų kūrimo įrankį). Nepaisant sudėtingumo ir galimų kliūčių, yra daug garbingų dizainerių, kurie pasisako už kodo įvedimą į maketo etapą.

Nors įrankių ir technologijų patobulinimas reiškia, kad vis daugiau galimybių atsiveria maketuojant, ne viską lengva (ar net įmanoma) atkurti kodu. Pradėję naudoti kodą, iškart sužinosite, ką galite ir ko negalite. Jei jums patinka kodas, taip pat galima teigti, kad pradėti nuo to yra mažiau švaistoma - maketas vis tiek baigsis HTML / CSS.

Tačiau, kaip jau minėjome anksčiau, maketai su kodavimu nėra populiari strategija dėl daugelio priežasčių, o ne dėl kodavimo sunkumų. Per anksti pradėję koduoti galite apriboti jūsų kūrybiškumą ir pasirengimą eksperimentuoti, nes lengva nerimauti dėl savo idėjų įgyvendinamumo kodu, o ne tuo, kaip įdomiai jos galėtų atrodyti.

Tik nuo jūsų priklauso, kada įvesti kodavimą. Tiesiog įsitikinkite, kad žinote savo dizaino tikslus ir nuolat informuokite kūrėjus apie tai, kaip teikiate pirmenybę funkcijoms.

Skaityti daugiau: