Weboldal makettjei: 4 népszerű megközelítés a felfedezéshez

Weboldal makettek

A weboldal makettjei sokféle módon hozhatók létre. Igaz, hogy nincs „legjobb” megközelítés, de bizonyos UI és UX tervezők stílusától és preferenciáitól (és a tervezési folyamattól) függően egyesek jobban fognak működni, mint mások.

Ebben a cikkben megvizsgáljuk a legnépszerűbb négy lehetőség előnyeit és hátrányait: végpontok közötti UX eszközök, makett eszközök, grafikai tervező eszközök, valamint kódolt tervek, amelyek elmosják a vonalakat a weboldal makettjei között. és prototípusok.

tegye az összes fotót priváttá a facebook-on

Ha kifejezetten drótvázas eszközökre vágyik, tekintse meg ezt a bejegyzést a legjobb drótváz-eszközök , vagy egy szélesebb gyűjteményért nézze meg a mega-körképünket legjobb webdesign eszközök .



GenerálJS szalaghirdetést

Kattintson a képre, hogy többet megtudjon, és átvegye a jegyeket(Kép jóváírása: Future / Toa Heftiba, Unsplash)

Ne kövesse el azt a hibát, ha azt gondolja, hogy az összes weboldal-makett megegyezik. A platformokkal, a hűséggel és a kódolással kapcsolatos egyszerű döntések mind jelentősen eltérő eredményeket hoznak. Tudja meg, mit szeretne és mi a célja, mielőtt még elkezdené a tervezési folyamatot - ha olyan eszközt szeretne, amely mindhárom fázist támogatja, a legjobb, ha elkezdi használni, mint áttérni a felére. Hasonlóképpen, ha csillagszerű, teljesen reális makettre van szüksége, ne feledje, hogy valamikor grafikai szerkesztőt fog használni.

01. End-to-end UX eszközök

A legmagasabb szinten végpontok közötti végpontok találhatók, amelyek a teljes munkafolyamat kielégítésére irányulnak: makettek, prototípusok, dokumentáció, fejlesztői átadások és tervezési rendszerek. UXPin a 2010-es évek eleje óta gondoskodik erről az igényről, de számos más márka, például az Adobe és az InVision, most is megpróbálja létrehozni az „egy eszközt mindezek uralma érdekében”.

UXPin

Az UXPin robusztus prototípusokkal, makettekkel, dokumentációval és fejlesztői átadással büszkélkedhet

Tehát hogyan lehet ezeket az eszközöket összegyűjteni a makett készítéséhez? Minden probléma nélkül meg tudják küzdeni őket - aztán néhányat. Az UXPin segítségével például több állapotot és interakciót tartalmazó maketteket hozhat létre. Még a Photoshop és a Sketch egyes funkcióit is utánozza, egy toll eszköz használatával.

Másrészről, Stúdió: InVision , lehetővé teszi néhány remek animáció szerkesztését; míg Adobe XD lehetővé teszi Photoshop- és Sketch-fájlok megnyitását az XD-terveken belül, valamint színek, szimbólumok, lineáris gradiensek és karakterstílusok alkalmazását.

Studio InVision

A Studio by InVision célja egy végpontok közötti munkafolyamat létrehozása

Ami a legfontosabb, hogy az end-to-end eszközök ma már tervezési rendszereket kínálnak, hogy biztosítsák a makettek következetességét a projektek között. A tervezési rendszerek mindenkinek egyetlen igazságforrást adnak az eszközök és a tervezési alapelvek között az eszközökön keresztül. Ha sok makettet tervez létrehozni, akkor ez a funkció szinte kötelezővé válik.

A webhely-makett elkészítéséhez egy végpontok közötti eszköz kiválasztásakor érdemes figyelembe venni a következő szempontokat:

  • Hűség : Mennyire hatékony a vizuális és interakciós tervezés eszköze?
  • Következetesség : Milyen funkciók biztosítják a tervezés konzisztenciáját a munkájában?
  • Pontosság : Azok az elemek, amelyekkel dolgozik, tükrözik a szervezetben az „igazság forrását”?
  • Együttműködés : Tud együttműködni az érdekeltekkel vagy más tervezőkkel?
  • Fejlesztői átadás : Hogyan generálja az eszköz specifikációkat és eszközöket a fejlesztők számára?

02. Dedikált makett eszközök

Kevésbé robusztus megoldások, mint pl Elv , Framer , Moqups vagy Balsamiq továbbra is mindent megadhat Önnek, amire szüksége van a makett elkészítéséhez - csak elveszíti a munkafolyamat és a tervezés következetességének további funkcióit. Ezeket az eszközöket úgy alakítottuk ki, hogy a lehető legkönnyebbé tegyük a létrehozási folyamatot, így inkább a stilisztikai döntésekre és kevésbé a program manipulálására összpontosíthat.

A dedikált makett eszközöknek egyértelmű előnyei vannak: a kezdőknek előnyük származik a könnyű használatból, míg a szakértők nagyra értékelik a speciálisan a haladó igényeikre szabott terveket. A fejlettebb oldalon az olyan eszközök, mint a Framer és a Principle, animációkra és makettek interakcióira specializálódtak.

Framer

A Framerhez hasonló eszközök az interakciókra szakosodtak

Az alsó végén a Moqups és a Balsamiq több funkcionalitást nyújt, mint a nem tervező eszközök, amelyeket néha drótvázakhoz és makettekhez használnak (például Keynote ), de csak az alacsony hűségű mintákra korlátozódnak. Ezek azonban nagyon hasznosak lehetnek, ha a cél az alacsony hűségű drótvázak nagyon gyors létrehozása.

A maketteszközökről el kell döntenie, hogy egy egyszerű drótvázas megoldás csak sikerül-e, vagy fejlettebb képernyőtervre van szüksége. Nem számít, milyen makett eszközt választott, csak győződjön meg arról, hogy hajlandó elfogadni az együttműködésen alapuló munkafolyamat veszteségét és a tervezési konzisztencia kevésbé jellemzőit, amelyeket a végpontok közötti eszközök kínálnak.

03. Grafikai tervező szoftver

Egyes tervezők esküsznek a szoftverekre Photoshop CC , Vázlat vagy Illustrator CC , különösen azok, akik különösen képzettek vagy ismerik azokat az eszközöket, amelyek a pixelig irányítást kínálnak. A grafikai platformok akkor működnek a legjobban, ha a legmagasabb szintű realizmusra és vizuális hűségre törekszenek. És ahogy elmagyarázzuk a gyors prototípus készítés a Photoshop CC segítségével , könnyebb lehet, mint gondolnád.

Photoshop CC

A Photoshop finomszemcsés irányítást biztosít, de túl egyszerű lehet az egyszerű maketteknél

A grafikai tervezőszoftverben való munkavégzés hozzáférést biztosít a végtelenül kiválasztott, jól meghatározott színekhez, így ha egy merev és előre beállított színvilág korlátai között dolgozik - például bizonyos márkajegyek szabályai szerint -, akkor ezek a programok a legjobbak választási lehetőség. Ezek a programok a színválasztékon túl sokkal több vizuális eszközt kínálnak, amelyek lehetővé teszik a részletek apróságainak kezelését.

Az ilyen típusú szoftver használatának hátránya azonban az, hogy nehéz lehet lefordítani, amikor ideje elkezdeni a terv kódolását. A Photoshopban működött funkciók nem mindig működnek kódban (olyan elemek, mint a betűtípusok, az árnyékok, a színátmenet-effektusok stb.), Ami időveszteséggel járhat a prototípus-készítés fázisainak megoldására.

Stílusnagyságú oldalaknál segíthet a konkrét vizuális részletek kiszúrásában a makett fázisában, ebben az esetben a Photoshop vagy a Sketch ad a legtöbb lehetőséget. Hasonlóképpen, ha egy válogatós vagy nehezen kérhető ügyféllel van dolga, egy gyönyörű és lenyűgöző makett bemutatása könnyebben megnyeri őket.

maketteket lehet húzni az UXPin-be

A Photoshop vagy a Sketch alkalmazásban létrehozott maketteket az UXPinbe lehet húzni

Érdemes megemlíteni azt is, hogy a Photoshopban vagy a Sketch-ben létrehozott maketteket az UXPin segítségével be lehet húzni és a prototípus fázisba dobni. Ez lehetővé teszi, hogy néhány kattintással könnyedén animáljon minden réteget (nem simuljon el), és biztosítja, hogy a prototípus készítésének ideje alatt ne kelljen a semmiből indulnia.

Ha a látvány nem az egyetlen prioritás, akkor hatékonyabb lehet egy olyan eszköz használata, amely lehetővé teszi a drótváz, makettek és prototípusok egy helyen történő elvégzését. A grafikai tervező szoftver nagyobb gondot okozhat, mint amennyit a makettek számára meg lehet tenni, hacsak nem az optimális megjelenítést keresi - mindenképpen rendszeresen kommunikálnia kell fejlesztőjével, mivel ezeket az eszközöket nem együttműködésre tervezték.

04. Kódolt makettek

Ha főleg tervező vagy, és nem érzed jól a kódolást, akkor ez nyilvánvalóan nem megoldás. Amint azt a Útmutató a makettekhez , a kódolt makettek nem az alapértelmezett választás.

A legtöbb kódolás elhalasztható a prototípus-készítésig (ha HTML / JavaScript prototípust készít), vagy akár későbbre is (ha prototípus-készítő eszközt használ). De a bonyolultság és a lehetséges akadályok ellenére sok tiszteletre méltó tervező van, aki támogatja a kód bevezetését a makett szakaszában.

Míg az eszközök és a technológia fejlesztése azt jelenti, hogy egyre több lehetőség nyílik az elrendezés tervezésében, nem mindent könnyű (vagy akár lehetséges) kódban újrateremteni. A kóddal kezdve azonnal megtudhatja, mit tehet és mit nem. Ha jól érzed magad a kóddal, az is érvelhet, hogy ezzel kezdeni kevésbé pazarló - a makett egyébként HTML / CSS-be fog kerülni.

De mint korábban említettük, a kódolással készített makettek nem népszerű stratégia, több okból, mint a kódolás nehézségéből. Ha túl korán kezdi a kódolást, korlátozhatja a kreativitását és a kísérletre való készségét, mivel könnyen lehet aggódni ötleteinek megvalósíthatósága miatt a kódban, nem pedig attól, hogy milyen izgalmasak tudnának kinézni.

Rajtad múlik, mikor kell bevezetni a kódolást. Csak győződjön meg róla, hogy ismeri tervezési céljait, és folyamatosan tájékoztassa a fejlesztőket arról, hogyan prioritásként kezelik a funkciókat.

szuper grafikus vizuális útmutató a képregény univerzumhoz

Olvass tovább: