Halvad harjumused ammustel aegadel, mil hankisime oma klientidelt uusi projektiideid ja kasutajanõuete dokumente. Võib-olla visandage mõned ideed ja hüppake intrigeeriva Photoshopi kujundamise juurde.

Meie põhjendus selle metoodika kohta oli, et projekteerimisvärav jookseks kohe otsa, et oleks aega ülevaatamiseks.

Mõne aja pärast saime aru, et kulutasime palju aega projekteerimisele, miks? Revisjonid võtsid kogu aja. Revisjonid olid keerulised; pidime kohandama paigutusi, graafikat ja tüpograafiat. Kõik oli masendav, projekti ajakava jaoks katastroofiline, klientide jaoks murettekitav ja meie jaoks väsitav. Kulus veidi aega, enne kui mõistsime, et vajame teistsugust lähenemist. Otsustasime naasta „Square One" algse protsessi juurde, mida eirasime varem „traatraamimist”. Alustasime sellega, et Grey-boxes traatraamid lülitasid selle oma projekteerimisprotsessi, siis liikusime teise protsessi juurde ja lisasime selle projekteerimisprotsessi.Lõpuks hakkas mudel paika loksuma, tänu “Wire-framing”-le säästis see meie aega ja aitas meil probleeme varem lahendada. Sel põhjusel hääletan traatraamile projekteerimisprotsessi esimeseks väravaks.

Traatraamiga kasutajakogemuse kujundused

Kes teab, võite juba varajases staadiumis oma disainilahendustes ära tunda potentsiaalse kasutatavuse väljakutse. Mõnikord tundub suurepärane projektikontseptsioon koos rangete (URS) kasutajanõuetega, esialgse protsessi ajal näivad need paika loksuvat. Veelgi hullem juhtub siis, kui hakkame paberite plaane koostama: "Mis juhtus?" jätsime tähelepanuta traatraami, millel kulub plaani visandamiseks vaid mõni minut kui värvilisel Photoshopil. Parem alustada kohandamist varem kui hiljem.

Traatraamimine kui ajahaldustööriist

Aja juhtimine on iga eduka projekti jaoks oluline tehnika, kui projekt on kitsal ajateljel; võite mõelda, et "miks raisata oma aega Traatraamimine, nii et ma parem jätan värvilise Photoshopi vahele." Esialgu tegime selle vea, kuid selle asemel vaatasime üle kogu kontseptsiooni, mis oli aeganõudev ja ressursside raiskamine. Hallide kastide ja visandite ülevaatamine on palju lihtsam kui mitme keeruka elemendiga täisvärviliste kujunduste ülevaatamine.

Traatraami kasutatakse lehe tegeliku ja õige mõõtme loomiseks. Kui klient on heaks kiitnud, vajame selle välimuse parandamiseks vaid graafilist abinõu. Trikk on selles, et kui traatraamid, visandid ja hallid kastid on korras, ei jää meil ülevaatamiseks aega. Selle asemel läheme vahele järgmise protsessi visuaalse osa juurde.

Traatraamimine kliendi sidumiseks

Lehekülje värvidega paigutus segab mõnikord meie kliente; võib-olla klient jälestab värvi "lilla" kliendi emotsioonidel on raske plaanile keskenduda. Nende tagasiside võib nende tunnete tõttu olla negatiivne. Nad võivad lõpuks küsida "Alusta otsast", kujundused võivad olla korras, kuid ainus, mis klienti ärritas, on "lilla" värv. Seetõttu on hallide kastide ja visandite kasutamine tõhus viis, kuna see kõrvaldab elementide segamise.

Traatraam aitab saada tagasisidet suuruse ja paigutuse kohta, ilma et klient keskenduks ainult välimusele. Traatraami kasutamine aitab meil ka kliendi kohta rohkem teada saada, mis talle meeldib? Stiilid, tüpograafia jne, traatraamitud esitlus on nagu sidumisaeg, nende tagasiside ja suhtlus annab teile teada nendest ja nende kujundustest ning sellest, mida projekti tulevastes etappides oodata? Kui visandate paberile umbkaudset mustandit, jätkab klient ikoonide, nuppude, fontide jms kommenteerimist. Nad ütlevad lõpuks, et eelistavad suuremaid nuppe kui väiksemaid jne. Lõpuks õpib disainer klientidelt ja hakkab jälgima tagasiside mustrid ja õppimine, teadmiste omamine võib säästa teie aega, energiat ja ressursse.

7 põnevat asja traatraamide kohta

1 Suurendab meeskonnatöö kogemust

Traatraamimise protsess toob kokku erinevad inimrühmad erinevate oskustega; kõik on osa projektiprotsessist. Projektijuhid, disainerid, arendajad tulevad kokku eesmärgi saavutamiseks. See on väärtuslik, sest see parandab meeskonnatööd ja paneb meeskonnakaaslased üksteist paremini mõistma. “Juga” mudeliga saab projekte tegelikult katki teha.

2 Läbipaistev suhtlus

Sujuv suhtlusvoog, kannatasime varem, kui mõnele meeskonnaliikmele meeldis arendajad, keda projektiarutelusse ei võetud. Kaasates raamimisprotsessi iga üksiku inimese, on probleem lahendatud. Arendaja saab varem märgata probleemi, mis võib meilides ja vestlustes märkamata jääda. Teisest küljest on spetsifikatsioonid elegantsed ja ilusad, kuid neid on raskem visualiseerida.

3 Kaasake kliente

Traatraam aitab saada tagasisidet suuruse ja paigutuse kohta, ilma et klient keskenduks ainult välimusele. Traatraami kasutamine aitab meil ka kliendi kohta rohkem teada saada, mis talle meeldib? Stiilid, tüpograafia jne, traatraamitud esitlus on nagu sidumisaeg, nende tagasiside ja suhtlus annab teile teada nendest ja nende kujundustest ning sellest, mida projekti tulevastes etappides oodata? Kui visandate paberile umbkaudset mustandit, kommenteerib klient pidevalt ikoone, nuppe, fonte jne. Lõpuks öeldakse, et eelistab suuremaid nuppe kui väiksemaid jne. Lõpuks õpib disainer klientidelt ja hakkab jälgima tagasisidemustrite ja õppimise jaoks võib teadmiste omamine säästa teie aega, energiat ja ressursse.

4 erinevat lähenemist

Ajurünnak võimaldab inimestel välja pakkuda erinevaid viise projektidega tegelemiseks. Neid on lihtne valmistada ja visandada eriti paberile, vaja läheb vaid pliiatsit ja paberit ning me käsitleme probleeme erinevate nurkade alt ja joonistame need paberile. Saate ülesandeid kombineerida ja kustutada, kuni teil on kaks või neli mõistlikku.

Erinevate lähenemisviiside hulka kuuluvad tehniline lähenemine – uued ja trendikad tehnoloogilised funktsioonid, kasutajakogemuse ja kasutatavuse testimine, kuidas kasutajad saavutavad eesmärgi ja ülesande kiiresti, enne kui igav hakkab, mis viib ülesande katkestamiseni, jällegi keskkonnaalane lähenemine – kes on sidusrühmad? Milliseid valdkondi me sihime? Millised funktsioonid on olulised, mis sobivad hõlpsalt konkreetse sidusrühma ja keskendunud valdkonnaga?

5 Testimise alus

Kolme või viie prototüübiga saate testida projekti visandit tegelike kasutajatega. Arvatakse, et testida saab ainult valmis HTML-i prototüübiga, kuid see pole tõsi. Samuti saab testimiseks kasutada käsitsi tõmmatud traatraame. Saate küsida kasutajate soovitusi nuppude kohta, mida ta soovib klõpsata; nad saavad ka tagasisidet nimesiltide kohta ja lõpuks saavad nad aidata kontrollida, kas neil on õige visuaalne hierarhia. Raamistiku kaudu testimine aitab probleeme varem tuvastada.

6 Kiirem projekt toodetud

Traatraamil põhineva projekti prototüüpimine võtab vähe aega ja raha, sest raamimisprotsessis osalesid erinevad inimrühmad. Seetõttu tegeletakse ettenägematute vigadega, mis võivad põhjustada muudatusi, enne tegelikku projekti. Jällegi on projekti skeem klientide poolt vaadatud ja seega on lõplik projekteerimismärk tehtud. See vähendab mitme kontseptsiooni jaoks aega.

Traatraamimine Photoshopiga

Hallid kastid ja visandid Photoshopiga.

1 samm: koguge klientidelt kokku lisanõuded, seejärel käivitage Photoshopi värvimine ja alustage raamimist.

2 samm: looge dokument, mis põhineb 960 ruudustiku süsteemil (1100 pikslit lai ja 760 kõrge), saate seda õppida jaotises "Photoshopi ruudustiku seadistamine".

3 samm: värviämbri tööriista (G) kasutatakse tausta täitmiseks helehalli värviga, et selgitada taustavärvi või pildi olemasolu.

4 samm: valige tööriistaribalt ristküliku tööriist ja joonistage sisuala sümboliseeriv kast. Kasutame 960 võrgusüsteemi; minu joonistatud kast on 940 pikslit lai. Muutke esiplaani värv valgeks, kasutades tööriista Paint Bucket Tool, nii et see kuvatakse meie hallil taustal.

5 samm: protsessi palju kiiremaks muutmiseks lihtsalt (sisestage täht D), et määrata esiplaan mustaks või mis tahes teile sobivaks värviks ja taustaks valge või mis tahes värvi. Seejärel joonistage sisualade tähistamiseks mustad kastid. Jällegi saate muuta taustade läbipaistmatust, et muuta need halliks või mis tahes värviliseks.

6 toiming. Lisage ruudustiku sisse ristkülik, mis tähistab midagi. Sel juhul sisestage "Sisselogimisnupp" ristküliku läbipaistmatuse vähendamiseks ("30") pärast ristküliku joonistamist läbipaistmatuse väärtus ("30"). Saate lisada teksti, kasutades tüübitööriistaribal asuvat tüüptööriista (T), et lisada kasti kohale tekst „LOGIN”. Navigeerimisala loomiseks lisage veel üks ristkülik ja jällegi vähendage läbipaistmatuse väärtust, et muuta see halliks.

7 samm: lisage ristkülikud, looge sisuveeru alad. Kasutage kaheveerulist paigutust, mille põhisisu veerg on veidi suurem ja avalehe pildi jaoks väiksem. Määrake veergude läbipaistmatuseks 10% ja lisage ka teine ristkülik, mis tähistab jalust lehe allosas.

Lk 8: lisage sisualale näivaid tekste, kasutades Photoshopi käsku Tüüp > Kleebi Lorem Ipsum.

Muud rakendused

Muu rakendus traatraamimiseks, mida saavad kasutada mittegraafilised disainerid interaktiivsete ja kaunite traatraamide loomiseks.

OmniGraffle

See on nagu Micro-Visio, sellel on väga kenad šabloonid, mida saab kasutada kõrgtehnoloogiliseks kujundamiseks, ja funktsioonid on hämmastavad. See on parim.

Ninja Mock

Minu lemmik, TASUTA kasutatav, sellel on väga toredad funktsioonid ja šabloonid, mida saab kasutada interaktiivse projektikontseptsiooni koostamiseks. See võimaldab kasutajatel töötada võrguühenduseta ja võrgus.

Armsad graafikud

See on hea algajatele, see on TASUTA ja liidestest on lihtne aru saada.

Balsamiq

Kiire viis disainikontseptsioonide kliendile edastamiseks, sellel on tasuta demo, mis võimaldab kasutajatel lõpptoote salvestada. Sellel on kõik visandamiseks vajalikud elemendid ja unikaalne käsitsi joonistamine.

Google Drive’i joonis

Saab kasutada ekraani maketeerimiseks, see ei ole täielikult traatraami tüüpi, kuid sellel on sellised funktsioonid nagu hea koostöötööriist, kiire, tasuta ja hõlpsasti kasutatav.

Gliffy

Gliffy Seda on lihtsam kasutada, see on libedam ja pakub diagrammifunktsioone, nagu vooskeemid ja plaanid, sellel on Venni diagrammid võrguprotsessidega ja UML, mis ekspordib SVG-, PNG- ja JPEG-vormingusse.

Lumzy

See on välkrakendus, see pakub koostööplatvormi, on tasuta, kiire ja lõpuks on sellel erinevat tüüpi juhtnuppe, mida on lihtne kasutada.

Moqups

Tasuta, kiire ja lihtne kasutada, ma ei vaja brauseri pistikühendust, ekraani ja nupu ühendamine on tehtud veatult, et inimene saaks avaldada klientidele vaatamiseks ja kasutamiseks demonstratsiooni. Piltide eksportimine vastavalt spetsifikatsioonile on lubatud. Peale selle on Moqupsi integreeritud standardne HTML5 ja JavaScript.

: instantshift.com