Najlepšie zdroje na skicovanie drôtových drôtených rámov

Proces navrhovanie rozhrania vždy začína tvorba myšlienky. To zahŕňa vizualizáciu, výskum iných stránok a rýchle vytváranie prototypov. Táto skorá fáza nápadu je kľúčová pochopiť rozloženie a skúsenosti používateľov plánujete vybudovať. Takže, ako by ste mali skutočne vykonávať prácu s drôtom na novom projekte?

Som fanúšik tradičného papiera a ceruzky s potrebnými nástrojmi. ale digitálne drôtové rámovanie je tiež veľká a je to životaschopná možnosť pre moderných dizajnérov. V tomto článku by som rád zdieľa najlepšie zdroje pre obidve techniky, ktoré vám pomôžu vytvoriť si vlastné grid-based UI wireframes.

Skorá UI / UX Konceptualizácia

Začnime tým, že objasníme rozdiely medzi a Drôtený rám a a prototyp. Tieto dve slová sa často používajú zameniteľne, pretože sa týkajú toho istého procesu.

Drôtený rám je a Jediný statický náčrt používateľského rozhrania webovej stránky alebo aplikácie. Možno má popisky, ktoré vysvetľujú text tlačidiel, okraje, veľkosti prvkov alebo dokonca animácie. Ale drôtové rámy sú správne hrubé návrhy jednotlivých stránok.

Podobne a prototyp je ako vývojový diagram ukazujúci, ako sa jednotlivé stránky navzájom spájajú. Takže prototyp spája drôtené rámčeky, aby dokázal, ako rôzne tlačidlá alebo odkazy by mali viesť k iným stránkam.

Tieto definície nie sú vytesané do kameňa, niektorí dizajnéri môžu mať svoju vlastnú terminológiu a môžu nesúhlasiť s mojou presnou formuláciou. Ale to je to, ako som ich obyčajne videl, ako sú popísané, a to je to, koľko dizajnérov chápe tieto pojmy to najlepšie.

Tak čo by ste mali presne robiť s týmito prvými koncepčnými kusmi? Sú naozaj potrebné? Povedal by som, že prototypovanie nie je vždy nevyhnutné, ale je to veľmi dobrý nápad, najmä pri navrhovaní aplikácií so zložitými interakciami.

Ale wireframing je vždy dobrý nápad pre každý nový projekt. Pomáha vám zamerajte sa na veľký obrázok bez obáv o detaily. Získate pocit, ako je celá stránka rozvrhnutá, a to je neoceniteľné, keď navrhujete konkrétne rozloženie.

Ciele pre skenovanie

Zakaždým, keď začnete nový projekt, mali by ste sa zamyslieť čo sa pokúšate vyriešiť. Každá stránka je postavená so špecifickým cieľom. Mnohé stránky dokonca majú viacero cieľov, kde sú niektoré ciele dôležitejšie než iné.

Používajte drôtený rám ako sprievodcu, ktorý vám pomôže nájsť najlepšiu stratégiu zachytenie cieľov webových stránok. To sa pravdepodobne nestane na prvom telefóne, takže buďte pripravení nakresliť veľa rôznych nápadov.

Vyhľadajte ďalšie podobné webové stránky a napíšte ich najlepšie funkcie. Analyzujte, ako je obsah organizovaný a ako sa pohybujete cez každú stránku.

Premýšľajte o drôtových rámoch z interaktívneho hľadiska. Nie sú to len pekné obrázky. Sú to reprezentácie digitálnych rozhraní a chcete načrtnúť svoje myšlienky.

Majú ručné zdroje na dosah ruky, či už sú vyrobené z papiera alebo sú digitálne, čo môže veľa pomôcť pri rýchlom skicovaní. Teraz poďme sa pozrieť na najlepšie zdroje pre vytváranie drôtových rámov.

Grid Sketchpads

Vždy môžete začať so základnými náčrty náčrtov na papieri tlačiarne len pre mapovať hrubé nápady. Osobne som zvyčajne začal pracovať na tlačovom papieri, pretože týmto spôsobom som menej znepokojený sieťami a podobne vytvárajú nápady.

Náčrtníky mriežky bodiek sú najlepší spôsob, ako ísť, ak chcete vyčistiť nápad, a dať mu viac štruktúry. Mriežka vám pomôže odhadnúť vzdialenosti medzi položkami na stránke a vytvoriť akýsi druh symetrie v drôte.

Existuje veľa skvelých produktov tam, ak chcete Začnite skenovanie na papier, napríklad Rhodia Dot Pad sa dodáva v rôznych veľkostiach pre každodenné použitie. Dodáva sa iba s 80 stranami, ale je to typické pre väčšinu skicárnych kníh.

Ďalším veľmi cool a prispôsobiteľným produktom je Dotgrid. Všetky položky spoločnosti Dotgrid sú drahšie ako knihy Rhodia, ale prichádzajú s viacerými materiálmi a vlastnými krycími vzormi.

Dotgrid dokonca prijíma objednávky na mieru, ktoré vám umožňujú navrhnite svoj vlastný sketchpad. Každá kniha obsahuje menej než 100 hárkov, takže vrátane prednej a zadnej strany získate asi 200 stránok na skicovanie v sieti.

Niekoľko ďalších bodových mriežkových skicárov, ktoré by som chcel spomenúť, zahŕňa Behance Dot Grid, ktorý je pevný a špirálovo viazaný, aj keď obsahuje len 50 listov papiera.

Reagujúca dizajn Sketchbook je jedným z najlepších zdrojov pre web dizajnérov. Žiadny iný dizajnér výrobku by nepotreboval skvelý návrh dizajnu, ale web dizajnéri profitujú zo slobody vytvárať nápady na rôznych šírkach zariadení na rozloženie mriežky.

Tieto reagujúce dizajnové vankúšiky majú tiež 50 listov s celkovým počtom 100 strán, ale každá stránka má štyri rôzne reagujúce siete ktoré predstavujú rozdielne hranice v citlivom dizajne: stolný počítač, prenosný počítač, tablet a smartphone.

Hoci dizajn je nevýrazný v porovnaní s knihami Dotgrid, nikto iný nevenoval úvahy sketchbooky pre webových dizajnérov. Ak sa dostanete do takejto veci, potom stojí za to, aby ste si objednali jednu skúšobnú jazdu.

Ak ste skutočne robotníci a nechcete minúť žiadne peniaze, môžete tiež vytlačte si vlastné stránky mriežky s rozhraním Sketch. Táto bezplatná stránka ponúka rôzne šablóny mriežky ktoré môžete vytlačiť a použiť pre ručne kreslené drôtené rámy.

Mriežky sa dodávajú vo veľkosti A4 a US listov pre rôzne štýly papiera pre tlačiareň. Môžete si vybrať z mnohých možností, ako sú šablóny pre celoplošný webový prehliadač alebo rôzne obrazovky iPhone.

Všetky tieto možnosti sú skvelé a stojí za to preskúmať, či ste do toho kresba ceruzkou. Papier je jedným z najjednoduchších médií, ktorý rýchlo znižuje nové nápady, takže je často preferovanou voľbou aj pre dizajnérov UI.

Digitálne nástroje a webové aplikácie

Existuje toľko skvelých programov na vytváranie drôtov, kde sa dá len ťažko pokryť bez toho, aby riskovali analýzu paralýzy, takže sa teraz teraz zamerať na niektoré z najlepších možností grid-based wireframing.

Najskôr by som rád spomenul, že môžete použiť nástroje Adobe, ako je Illustrator vytvorte si vlastné drôtené rámy. Toto nie je súčasťou workflow každého a Illustrator určite nie je zadarmo. Ale ak už pracujete s programom Adobe Creative Cloud, môže to byť dobré miesto na spustenie.

1. Moqups

Moqups je jedným z najlepších online nástrojov pre Wireframing. Pracujete s vizuálnym editorom a knižnicou aktív, ktoré môžete pretiahnuť po celej stránke.

Každý nový projekt Moqups má vopred definovaná mriežka, a používa svetlé fialové čiary, ktoré vám pomôžu zarovnať prvky do vyrovnania. Je to skvelý webový nástroj, ktorý uľahčuje navrhovanie pomocou siete.

Stránka funguje štandardne na bezplatnom pláne, ktorý obmedzuje používateľa na objekty s 300 stránkami. Stránky majú prémiové možnosti, ale platenie mesačného poplatku môže byť oveľa nepríjemnejšie než len s nástrojmi Adobe alebo jednorazovým nákupom náčrtu.

2. Mriežka Papr

Webová aplikácia Grid Papr je úplne zadarmo a ponúka verejné i súkromné ​​účty pre vaše drôtené rámy. Vytvoríte si názov vášho projektu a získate svoju vlastnú jedinečnú adresu URL pre drôtovú kostru, ktorú môžete upravovať z ľubovoľného počítača.

Každý nový drôtový rám prichádza s mriežkou ktorý vám umožňuje vykonávať funkciu snap-to-grid na všetkých prvkoch. Funkcie sú jednoduché, ale stačia vytvorte lo-fi wireframe v priebehu niekoľkých minút. Jednoducho presuňte na stránku všetko, čo chcete, a postupujte podľa mriežky a vytvorte hviezdicový rám.

3. Wireframe.cc

Wireframe.cc je jedným z najjednoduchších a najmenších nástrojov, ktoré môžete použiť na skenovanie. Je vybavený a bezúdržbové rozhranie s vopred pripravená mriežka a organizované panely nástrojov. Jednoducho kliknete a pretiahnete, čím vytvoríte nové prvky na plátne. Môžete tiež ukladať a zdieľať svoju prácu.

To je ďalší nástroj bezplatne ponúkaný s nepovinnými prémiovými plánmi. Každý plán sa účtuje mesačne, takže je veľmi podobný Moqups v cenovej štruktúre. Bezplatný nástroj je použiteľný z ľubovoľného počítača bez účtu.

4. Mockingbird

Mockingbird je ďalšou skvelou voľbou, ktorá ponúka oveľa viac funkcií ako väčšina drôtových nástrojov. Môžete začať bezplatne, ale skúška je obmedzená na 7 dní. To môže byť pre niektorých používateľov nepríjemné, ale nástroj je naozaj neuveriteľný a beží vo všetkých prehliadačoch.

Mockingbird má nekonečnú knižnicu prvkov UI, ako je karty, akordeóny, rozbaľovacie ponuky, prehrávače videa a jednoduché textové odkazy. Predvolená mriežka používa systém mriežky 960gs, ale môžete si vybrať 12, 16 a 24 stĺpcov.

Konečné slová

Bez ohľadu na to, či si vyberiete tradičný alebo digitálny drôtový rám, je to vždy o kvalitu výstupu. Mali by ste sa veľa naučiť, keď robíte tento druh práce, a preto nájdite, akýkoľvek nástroj, ktorý vám najviac vyhovuje.

Posunutím dopredu najlepšou vecou je stačí spustiť drôtený rám. Získajte pocit z toho, čo sa vám páči najlepšie (papierové alebo digitálne), a urobte si to vlastné. Prostriedky v tomto článku by vám mali dať viac ako dosť na to, aby ste mohli začať s vytváraním vlastných digitálnych rozhraní.

(Obálka od Oykuna Yilmaza)