5 parasta työkalua reagoivaa muotoilua varten
Haluan aloittaa sanomalla tämän, en aio sisällyttää tässä luettelossa olevia pisteitä ja napsautuksia (ajattele Adobe Edge Reflow). Syy on yksinkertainen, uskon, että he ovat pahoja kaikille; suunnittelijat, asiakkaat, kooderit ... kaikki kärsivät.
Kyse ei ole kysymys ohjelmien tuottamien koodien laadusta. Se ei ole siksi, että muotoilu on "liian helppoa". Koska koska nämä ohjelmat ovat hyviä, ne rajoittavat aina käyttäjiä.
Ne ovat rajalliset, ei edes ohjelmien toteuttamat, vaan sen, mitä he ajattelevat saavansa. Jos he ajattelevat sitä, keskimääräinen käyttäjä todennäköisesti vertaa sitä työkaluihin, kuten PowerPointiin ja / tai mihin tahansa tulostussuunnitteluohjelmaan, jotka kuuluvat jälleen vanhoihin ajatteluihin. Siinä on ongelma. Visual web-julkaisutyökalut yrittävät aina soveltaa vanhoja prosesseja uusiin teknologioihin.
Todella web-suuntautunut työnkulku on sellainen, joka kattaa taustalla olevat konseptit ja teknologiat, joihin verkko on rakennettu. Toki voit käyttää mitä tahansa visuaalisia työkaluja, jotta voit luoda verkkosivustoja, jotka ovat teknisesti herkkiä, mutta siitä puuttuu asia.
Kyse ei ole mukautuvasta ulkoasusta. Kyse on tiedon saatavuudesta mahdollisimman monille ihmisille. Edge Reflow -ohjelmassa on joitain asioita, joita vain ei voi tehdä. Lyhyesti sanottuna sinun on kirjoitettava koodi.
Siksi parhaita työkaluja, jotka auttavat sinua reagoivaa suunnittelua, ovat työkalut, joiden avulla voit ymmärtää ja hyödyntää web-tekniikoita, suunnitella verkkosivustoasi perusteellisesti, kirjoittaa parempaa koodia tehokkaammin ja testata / esitellä asiakkaille vastaavia malleja kontekstissa.
Aloitetaan ilmeisestä:
1) Selaimesi
En ole valehtelemassa. Tämä on varsin kirjaimellisesti tärkein työkalu, koska se näyttää juuri miltä sivustosi näyttää omissa olosuhteissasi.
Paljon keskustelua siitä, onko selaimessa suunniteltu on parempi kuin suunnitella kuvankäsittelyohjelmassa, kuten Photoshopissa tai GIMPissä. Anna minun ratkaista tämä sinulle ...
Ovatko sivustosi käyttäjät käyttäneet selaustaan Photoshopissa? Kuvaeditorit voivat tehdä kauniita kuvia eikä jäljitellä todellisia kokemuksia. Käytä kuvankäsittelyohjelmia kuvien muokkaamiseen. Selaimesi avulla voit suunnitella verkkosivustoja.
On aika irrottaa asiakkaitamme pois hyper-yksityiskohtaisista mallistoista, joihin he ovat tottuneet. Kun verkko muuttuu ja prosessimme muuttuvat virtaavammiksi ja iteratiivisemmiksi, meidän on siirryttävä eteenpäin.
Asenna vähintään yksi selain jokaisen tärkeimmän renderointimoottorin kanssa ja hankkia joitain kehittäjälaajennuksia. Käytä lähdekoodisi katselemiseen selaimesi näkemältä, koska olet täällä hetken aikaa.
2) Google Driven piirustussovellus
Teknisesti, lähes mitä tahansa vektoripohjaista kuvankäsittelytoimittajaa voisi tehdä työtä verkkosivustesi ja sovellustensa langallisen kehystämisen yhteydessä. Minulla on tapana langattomasti luoda sivustoni työpöydän versio, luoda kopio tiedostosta, kokoa kankaalle ja lähteä sinne. Käyttämällä vektoreita on helppo muuttaa resursseja nopeasti ja järjestellä elementtejä uudelleen, kun olet vielä suunnitteluvaiheessa.
Mieluummin piirtosovellus on käytössä Google asema muutamia syitä:
Jakaminen ja yhteistyöominaisuudet: Google ei jakaa tietoja paremmin kuin kaikki muutkin. Olen kiinnostunut kontekstin kommentoinnista, samanaikaisesta muokkaamisesta ja Hangout-integraatiosta.
Automaattiset oppaat: Jokaisessa piirustustunnuksessa oppaat luodaan automaattisesti jokaisen asiakirjan sisältämälle objektille. Tämän ansiosta asiakirjassa on helppo kuvata kokoonpanotason kokoisia elementtejä, mikä on hienoa räätälöidyille suunnittelijoille kuten minä.
Kun jakan nämä wireframes asiakkaiden kanssa, tämä ammattimaisen näköinen sakeus on suuri plus. Ja vielä, en ole rajoitettu niihin oppaisiin. Minusta se on hyvä vaihtoehto mockup-sovelluksille, jotka yrittävät rajoittaa sinua verkkoon.
Voi, ja se on ilmainen. Tarvitseeko sanoa enempää?
3) Tyylin prototyypit
Perustuu tyyliin laatat, Tyyli prototyypit selaimesi on suunniteltu auttamaan sinua antamaan asiakkaille käsitys siitä, miten heidän verkkosivujen typografia, väri ja käyttöliittymän elementit näyttävät. Koska se on tarkoitus katsella selaimessa, sivuston rakentamisen jälkeen on vähemmän epäjohdonmukaisuuksia.
Lisäksi voin todeta, että Style Prototypes voisi auttaa asiakkaitamme henkisesti erottamaan käsitteet UX ja estetiikka. Ja oikeastaan kaikki, mikä auttaa asiakkaitamme ymmärtämään paremmin web-suunnitteluprosessia, voi olla vain hyvä asia.
4) Responsinaattori
Responsinator on yksinkertainen työkalu, joka näyttää verkkosivustosi eri kokoisina. Se jäljittelee hyvin yksinkertaisella tavalla useita eri laitekokoja ja -yhteyksiä. Tämä työkalu ei ole sinun eduksi. Haluatko nähdä, miltä sivustosi näyttää pienemmissä kokoluokissa? Muuta selaimen ikkunaa. Parempi vielä, saada joitain todellisia mobiililaitteita ja tehdä todellista testausta.
Tätä verkkosovellusta käytetään parhaiten näyttämään asiakkaille nopea lähentyminen siitä, mitä heidän verkkosivustossaan näyttävät muissa kuin työpöydän tai kannettavan tietokoneen näytössä.
Jälleen on monia työkaluja, jotka voivat tehdä samaa työtä kuin Responsinator, ja yhtä tehokkaasti, oletan. Valitsin tämän, koska se esittää useita laitteen siluetteja yksi toisensa jälkeen, helppoa lukemista varten.
5) Adobe Edge Tarkista
Nyt tämä on sinua varten. Jos sinulla on mobiili testauslaboratorio (ja mitä nopeammin voit tehdä yhden, sitä parempi) Edge Tarkasta synkronoi kaikki laitteet näyttämään samalta sivulta kerralla. Päivitä sivu yhdellä laitteella ja päivitä ne kaikki.
Toisin kuin muut tässä luettelossa, tämä ei ole ilmainen. Kuitenkin, jos sinulla on varaa tarpeeksi mobiililaitteita, jotka tarvitsevat tällaisen ratkaisun, se on todennäköisesti rahan arvoinen.
johtopäätös
Kuten aina, tärkein voimavara on aivosi. Nämä työkalut ja muut kuin heistä voivat auttaa sinua vain matkalla. Valitsin nämä, koska he tekevät hyvin erityisiä toimintoja, jotka auttavat minua suunnittelemaan reagoivia sivustoja. He eivät rajoita mitä voin tehdä.
Parhaat työkalut ovat todellakin ne, jotka pysyvät poissa tieltä.
Käytätkö näitä työkaluja? Mitkä ovat parhaimmat 5 työkalusi reagoivaa suunnittelua varten? Kerro meille kommentit.
Esitetty kuva / pikkukuva, työkalujen kuva kautta Shutterstock.