Huonot tavat ajoissa, jolloin hankimme asiakkailtamme uusia projekti-ideoita ja käyttäjävaatimuksia koskevia asiakirjoja. Ehkä hahmottele muutamia ideoita ja hyppää kiehtovaan Photoshop-suunnitteluun.

Perustelumme tälle metodologialle oli saada suunnitteluportti loppumaan välittömästi, jotta tarkastukselle jää aikaa.

Jonkin ajan kuluttua tajusimme, että vietimme paljon aikaa suunnitteluun, miksi? Revisiot veivät koko ajan. Tarkistukset olivat monimutkaisia; meidän piti säätää asetteluja, grafiikkaa ja typografiaa. Kaikki oli turhauttavaa, tuhoisaa projektin aikataulujen kannalta, huolestuttavaa asiakkaille ja rasittavaa meille. Kesti hetken ennen kuin tajusimme, että tarvitsemme toisenlaisen lähestymistavan. Päätimme palata "Square One" -alkuprosessiin, jonka jätimme huomiotta aiemmin "Wire-framing". Aloitimme Gray-boxes-langakehyksillä, jotka sisälsimme sen suunnitteluprosessiimme, sitten siirryimme toiseen prosessiin ja lisäsimme sen suunnitteluprosessiin. Lopulta malli loksahti paikoilleen "Wire-framingin" ansiosta, mikä säästää aikaamme ja auttoi meitä ratkaisemaan ongelmia aiemmin. Tästä syystä äänestän lankakehystystä suunnitteluprosessin "ensimmäiseksi portiksi".

Lankakehystys käyttäjäkokemuksen mallit

Kuka tietää, voit jo varhaisessa vaiheessa tunnistaa suunnitelmistasi mahdollisen käytettävyyshaasteen. Joskus loistava projektikonsepti tiukoilla (URS) käyttäjävaatimuksilla, alkuprosessin aikana ne näyttävät loksahtavan paikoilleen. Taas pahempaa tapahtuu, kun alamme suunnitella papereita: "Mitä tapahtui?" jätimme huomioimatta rautalankakehyksen, joka vie vain muutaman minuutin suunnitelman luonnostelemiseen kuin värikkään Photoshopin. Parempi aloittaa säätäminen aikaisemmin kuin myöhemmin.

Lankakehystys ajanhallintatyökaluna

Ajanhallinta on tärkeä tekniikka jokaiselle onnistuneelle projektille, jos projekti on tiukassa aikajanassa; saatat ajatella "miksi tuhlata aikaani Lankakehystys, joten minun on parempi hypätä värikkääseen Photoshopiin." Teimme tämän virheen alun perin, mutta sen sijaan päädyimme tarkistamaan koko konseptia, mikä oli aikaa vievää ja resurssien tuhlausta. Harmaiden laatikoiden ja luonnosten tarkistaminen on paljon helpompaa kuin monimutkaisten elementtien sisältämien täysväristen kuvioiden tarkistaminen.

Rautalankaa käytetään sivun todellisen ja oikean mittasuhteen luomiseen. Asiakkaan hyväksynnän jälkeen tarvitsemme vain graafisen lääkkeen ulkonäön parantamiseen. Temppu on, että jos rautalankakehykset, luonnokset ja harmaat laatikot ovat kunnossa, meillä ei ole aikaa tarkistaa. Sen sijaan siirrymme seuraavaan prosessin "visuaaliseen" osaan.

Lankakehys asiakkaan liimausta varten

Sivun asettelu väreillä sattuu joskus häiritsemään asiakkaitamme; ehkä asiakas inhoaa väriä "violetti" asiakkaan tunteiden on vaikea keskittyä suunnitelmaan. Heidän palautteensa voi olla negatiivista heidän tunteidensa vuoksi. He saattavat päätyä pyytämään "Aloita alusta", mallit saattavat olla kunnossa, mutta ainoa asia, joka ärsytti asiakasta, on "violetti" väri. Siksi harmaiden laatikoiden ja luonnosten käyttö on tehokas tapa, koska se eliminoi elementtien häiriötekijät.

Rautalanka auttaa saamaan palautetta mitoituksesta, asettelusta ilman, että asiakas keskittyy vain ulkonäköön. Wireframe-lähestymistavan käyttö auttaa myös meitä tietämään enemmän asiakkaasta, mistä he pitävät? Tyylit, typografia jne., Wire-framing-esitys, on kuin sidosaika, jonka palautteen ja vuorovaikutuksen ansiosta tiedät niistä ja niiden suunnittelusta ja mitä on odotettavissa projektin tulevissa vaiheissa? Kun luonnostelet paperille karkeaa luonnosta, asiakas jatkaa kommentointia kuvakkeista, painikkeista, fonteista jne. He lopettavat sanomalla, että he haluavat suurempia painikkeita kuin pienempiä jne. Lopulta suunnittelija oppii asiakkailta ja alkaa tarkkailla niitä. palautemalleja ja oppia, tietämyksen hankkiminen voi säästää aikaa, energiaa ja resursseja.

7 kiehtovaa asiaa metallikehyksissä

1 Parantaa tiimityökokemusta

Lankakehystysprosessi kokoaa yhteen erilaisia ihmisiä, joilla on erilaisia taitoja; jokainen on osa projektiprosessia. Projektipäälliköt, suunnittelijat ja kehittäjät kokoontuvat yhteen saavuttaakseen tavoitteen. Tämä on arvokasta, koska se parantaa ryhmätyötä ja saa tiimitoverit ymmärtämään toisiaan paremmin. "Vesiputous"-mallilla projektit voidaan itse asiassa rikkoa.

2 Läpinäkyvä viestintä

Sujuva viestintä, kärsimme siitä, että jotkut tiimin jäsenet kuten kehittäjät eivät olleet mukana projektikeskustelussa. Kun kaikki henkilöt otetaan mukaan kehystysprosessiin, ongelma ratkeaa. Kehittäjä voi havaita ongelman aikaisemmin, joka saattaa jäädä huomaamatta sähköpostiviesteissä ja chateissa. Toisaalta tekniset tiedot ovat tyylikkäitä ja kauniita, mutta vaikeampia visualisoida.

3 Sitouta asiakkaita

Rautalanka auttaa saamaan palautetta mitoituksesta, asettelusta ilman, että asiakas keskittyy vain ulkonäköön. Wireframe-lähestymistavan käyttö auttaa myös meitä tietämään enemmän asiakkaasta, mistä he pitävät? Tyylit, typografia jne., Wire-framing-esitys, on kuin sidosaika, jonka palautteen ja vuorovaikutuksen ansiosta tiedät niistä ja niiden suunnittelusta ja mitä on odotettavissa projektin tulevissa vaiheissa? Kun luonnostelet paperille karkeaa luonnosta, asiakas jatkaa kommentointia kuvakkeista, painikkeista, fonteista jne. Lopulta he sanovat pitävänsä suuremmista painikkeista kuin pienemmistä jne. Lopulta suunnittelija oppii asiakkailta ja alkaa katsoa Palautemallien ja oppimisen kannalta tiedon hankkiminen voi säästää aikaa, energiaa ja resursseja.

4 erilaista lähestymistapaa

Aivoriihen avulla ihmiset voivat keksiä erilaisia tapoja käsitellä projekteja. Niitä on helppo valmistaa ja luonnostella varsinkin papereissa, tarvitset vain kynän ja paperin, ja käsittelemme ongelmia eri näkökulmista ja piirrämme ne paperille. Voit yhdistää ja poistaa tehtäviä, kunnes sinulla on kaksi tai neljä järkevää tehtävää.

Erilaisia lähestymistapoja ovat Tekninen lähestymistapa – Uudet ja trendikkäät teknologiset ominaisuudet, käyttäjäkokemuksen ja käytettävyyden testaaminen, kuinka käyttäjät saavuttavat tavoitteen ja tehtävän nopeasti ennen kuin kyllästyvät, mikä johtaa tehtävän keskeytymiseen, jälleen ympäristölähestymistapa – keitä ovat sidosryhmät? Mihin aloille kohdistamme? Millaiset ominaisuudet ovat tärkeitä, jotka sopivat helposti tietylle sidosryhmälle ja kohdealueelle?

5 Testauksen perusta

Kolmella tai viidellä prototyypillä voit testata projektin luonnosta oikeiden käyttäjien kanssa. On olemassa käsitys, että voimme testata vain valmiilla HTML-prototyypillä, mutta tämä ei pidä paikkaansa. Myös käsin piirrettyjä lankakehyksiä voidaan käyttää testaukseen. Voit kysyä käyttäjiltä ehdotuksia painikkeista, joita he haluaisivat napsauttaa; he voivat myös saada palautetta nimilappuista ja lopulta auttaa tarkistamaan, onko heillä oikea visuaalinen hierarkia. Testaus metallikehyksen kautta auttaa tunnistamaan ongelmat aikaisemmin.

6 Nopeampi projekti tuotettu

Rautalankapohjaisen projektin prototyyppien tekeminen vie vähän aikaa ja rahaa, koska eri ryhmät ihmiset olivat mukana kehystysprosessissa. Siksi ennakoimattomat virheet, jotka saattavat aiheuttaa muutoksia, käsitellään ennen varsinaista projektia. Jälleen projektin layout on asiakkaiden nähty, joten lopullinen suunnittelu on tehty. Tämä vähentää useiden konseptien aikaa.

Lankakehys Photoshopilla

Harmaat laatikot ja luonnokset photoshopilla.

Vaihe 1: Kerää asiakkailta lisävaatimuksia, aloita sitten värillinen Photoshop ja aloita kehystys.

Vaihe 2: Luo asiakirja, joka perustuu 960 ruudukkojärjestelmään (1100 pikseliä leveä ja 760 korkea), voit oppia tämän kohdassa "Ruudukon asettaminen Photoshopissa".

Vaihe 3: Paint Bucket Tool (G) -työkalua käytetään taustan täyttämiseen vaaleanharmaalla värillä selittämään, että taustaväriä tai kuvaa tulee olemaan.

Vaihe 4: Valitse työkalupalkista suorakulmiotyökalu ja piirrä laatikko symboloimaan sisältöaluetta. Käytämme 960 grid -järjestelmää; Piirretty laatikkoni on 940 pikseliä leveä. Tee etualan väristä valkoinen "Paint Bucket Tool" -työkalulla, jotta se näkyy harmaata taustaamme vasten.

Vaihe 5: Voit nopeuttaa prosessia vain (kirjoita kirjain D) asettamalla etualan mustaksi tai minkä tahansa sinulle sopivan värin ja taustan valkoiseksi tai minkä tahansa värin. Piirrä sitten mustat laatikot edustamaan sisältöalueita. Voit jälleen muuttaa taustan läpinäkyvyyttä, jotta ne näyttävät harmailta tai minkä tahansa värisiltä.

Vaihe 6: Lisää ruudukon sisään suorakulmio edustamaan mitä tahansa. Tässä tapauksessa "Kirjautumispainike", kirjoita opacity Value ("30") pienentääksesi suorakulmion peittävyyttä ("30") suorakulmion piirtämisen jälkeen. Voit lisätä tekstiä tekstityökalurivin Type Tool -työkalulla (T) lisätäksesi tekstin “LOGIN" laatikon päälle. Luo navigointialue lisäämällä toinen suorakulmio ja alenna läpinäkyvyysarvoa, jotta se harmaa.

Vaihe 7: Lisää suorakulmioita luo sisältösarakealueet. Käytä kaksisarakkeista asettelua, jossa on hieman suurempi pääsisältösarake ja pienempi sarake kotisivun kuvalle. Aseta sarakkeiden peittävyydeksi 10 % ja lisää myös toinen suorakulmio edustamaan alatunnistetta sivun alareunassa.

Sivu 8: Lisää sisältöalueelle valetekstejä Photoshopin Tyyppi > Liitä Lorem Ipsum -komennolla.

Muut sovellukset

Muu sovellus lankakehystämiseen, jota muut kuin graafiset suunnittelijat voivat käyttää interaktiivisten ja kauniiden kehysten rakentamiseen.

OmniGraffle

Se on kuin Micro-Visio, siinä on erittäin mukavia stensiilejä, joita voidaan käyttää korkean teknologian suunnitteluun, ja ominaisuudet ovat uskomattomia. Tämä on paras.

Ninja Mock

Suosikkini, ILMAISEKSI, siinä on erittäin mukavia ominaisuuksia ja stensiilejä, joita voidaan käyttää interaktiivisen projektikonseptin rakentamiseen. Sen avulla käyttäjät voivat työskennellä offline-tilassa ja verkossa.

Ihania Kaavioita

Tämä on hyvä aloittelijoille, se on ILMAINEN ja käyttöliittymät ovat helposti ymmärrettäviä.

Balsamiq

Nopea tapa välittää suunnittelukonsepteja asiakkaalle, sillä on ilmainen esittely, jonka avulla käyttäjät voivat tallentaa lopputuotteen. Siinä on kaikki luonnostukseen tarvittavat elementit sekä käsinpiirtämisen ulkoasu, joka on ainutlaatuinen.

Google Drive -piirustus

Voidaan käyttää näytön mallinnukseen, se ei ole täysin lankakehystystyyppinen, mutta siinä on ominaisuuksia, kuten hyvä yhteistyötyökalu, nopea, ilmainen ja helppokäyttöinen.

Gliffy

Gliffy Se on helpompi käyttää, se on sujuvampi ja tarjoaa kaavioominaisuuksia, kuten vuokaavioita ja suunnitelmia, siinä on Venn-kaavioita verkkoprosesseista ja UML, josta on vientiä SVG-, PNG- ja JPEG-muotoihin.

Lumzy

Se on flash-sovellus, se tarjoaa yhteistyöalustan, se on ilmainen, nopea ja lopuksi siinä on erilaisia ohjaimia, joita on helppo käyttää.

Moqups

Ilmainen, nopea ja helppokäyttöinen, en tarvitse selainliitintä, näytön ja painikkeen linkitys on tehty virheettömästi, jotta henkilö voi julkaista esittelyn asiakkaiden katseltaviksi ja käytettäväksi. Kuvien vienti eritelmien mukaan on sallittua. Tämän lisäksi standardi HTML5 ja JavaScript on integroitu Moqupsiin.

: instantshift.com