Verkkosivumallit: 4 suosittua lähestymistapaa tutkittavaksi

Verkkosivumallit

Verkkosivumallit voidaan luoda monin eri tavoin. On totta, että 'parasta' lähestymistapaa ei ole, mutta tiettyjen käyttöliittymä- ja käyttöjärjestelmäsuunnittelijoiden tyylistä ja mieltymyksistä (ja suunnitteluprosessista) riippuen jotkut toimivat paremmin kuin toiset.

Tässä artikkelissa tarkastellaan neljän suosituimman vaihtoehdon etuja ja haittoja: päähän-päähän UX-työkalut, mallityökalut, graafisen suunnittelun työkalut sekä koodatut mallit, jotka alkavat hämärtää linjoja verkkosivustojen mallien välillä ja prototyypit.

Jos kaipaat wireframing-työkaluja nimenomaan, katso tämä viesti parhaat lankakehystyökalut tai jos haluat laajemman kokoelman, tutustu megakokoelmaamme parhaat verkkosuunnittelutyökalut .



Luo JS-banneri

Napsauta kuvaa saadaksesi lisätietoja ja noutaaksesi lippusi(Kuvan luotto: Future / Toa Heftiba, Unsplash)

Älä tee virhettä ajattelemalla, että kaikki verkkosivuston mallit ovat samat. Yksinkertaiset päätökset alustoista, tarkkuudesta ja koodauksesta tuottavat kaikki merkittävästi erilaisia ​​tuloksia. Tiedä mitä haluat ja mitkä ovat tavoitteesi ennen suunnitteluprosessin aloittamista - jos haluat työkalun, joka tukee kaikkia kolmea vaihetta, on parasta aloittaa sen käyttö kuin vaihtaa puolivälissä. Samoin, jos tarvitset tähtiä, täysin realistisen mallin, muista, että käytät jossain vaiheessa graafisen suunnittelun editoria.

kuinka muuttaa sijoitetun kuvan kokoa

01. Päätä päähän UX-työkalut

Korkeimmalla tasolla ovat end-to-end-työkalut, joiden tavoitteena on tyydyttää koko työnkulku: mallinnukset, prototyypit, dokumentaatio, kehittäjien kanavanvaihdot ja suunnittelujärjestelmät. UXPin on vastannut tähän tarpeeseen 2010-luvun alusta lähtien, mutta monet muut tuotemerkit, kuten Adobe ja InVision, yrittävät nyt myös luoda 'yhden työkalun hallita kaikkia'.

UXPin

UXPinillä on vankat prototyypit, mallinnukset, dokumentaatio ja kehittäjien kanavanvaihdot

Joten miten nämä työkalut pinotaan vain mockup-luomiseen? He voivat puuttua niihin ongelmitta - ja sitten joihinkin. Esimerkiksi UXPinin avulla voit luoda mockupeja, joissa on useita tiloja ja vuorovaikutuksia. Se jopa jäljittelee joitain Photoshopin ja Sketchin ominaisuuksia sisällyttämällä kynätyökalun.

Toisaalta, InVisionin studio , mahdollistaa melko hienon animaation muokkaamisen; sillä aikaa Adobe XD voit avata Photoshop- ja Sketch-tiedostoja XD-malleissasi ja käyttää värejä, symboleja, lineaarisia kaltevuuksia ja merkkityylejä.

Studio InVision

Studio by InVisionin tavoitteena on luoda end-to-end-työnkulku

Tärkeintä on, että päästä päähän -työkalut tarjoavat nyt suunnittelujärjestelmiä, jotta varmistetaan mallien johdonmukaisuus kaikissa projekteissa. Suunnittelujärjestelmät antavat kaikille yhden totuuden lähteen resursseille ja suunnitteluperiaatteille kaikissa työkaluissa. Jos aiot luoda paljon kuvioita, tästä ominaisuudesta tulee melkein pakollinen.

Kun valitset end-to-end-työkalun verkkosivustosi mallin luomiseksi, kannattaa ottaa huomioon seuraavat seikat:

  • Uskollisuus : Kuinka tehokas on visuaalisen ja vuorovaikutteisen suunnittelun työkalu?
  • Johdonmukaisuus : Mitkä ominaisuudet takaavat suunnittelun yhdenmukaisuuden työssäsi?
  • Tarkkuus : Heijastavatko työskentelemäsi elementit organisaatiosi ”totuuden lähdettä”?
  • Yhteistyö : Voitteko tehdä yhteistyötä sidosryhmien tai muiden suunnittelijoiden kanssa?
  • Kehittäjän kanavanvaihto : Kuinka työkalu tuottaa spesifikaatioita ja resursseja kehittäjille?

02. Dedikoidut mockup-työkalut

Vähemmän vankat ratkaisut, kuten Periaate , Framer , Moqups tai Balsamiq voi silti tarjota sinulle kaiken mitä tarvitset mallisi rakentamiseen - menetät vain ylimääräiset työnkulun ja suunnittelun johdonmukaisuusominaisuudet. Nämä työkalut on suunniteltu tekemään luomisprosessista mahdollisimman helppoa, joten voit keskittyä enemmän tyylillisiin päätöksiin ja vähemmän ohjelman manipulointiin.

Omistetuilla mallityökaluilla on selkeät edut: Aloittelijat hyötyvät niiden helppokäyttöisyydestä, kun taas asiantuntijat arvostavat erityisesti heidän edistyneisiin tarpeisiinsa räätälöityjä malleja. Kehittyneemmässä päässä työkalut, kuten Framer ja Principle, ovat erikoistuneet animaatioihin ja mockup-vuorovaikutuksiin.

Framer

Framerin kaltaiset työkalut ovat erikoistuneet vuorovaikutukseen

Alapäässä Moqups ja Balsamiq tarjoavat enemmän toimintoja kuin muut kuin suunnittelutyökalut, joita joskus käytetään lankakehyksissä ja mallinnuksissa (kuten Keynote ), mutta ne rajoittuvat vain heikkolaatuisiin malleihin. Ne voivat kuitenkin olla varsin hyödyllisiä, jos tavoitteena on luoda heikkolaatuisia lankakehyksiä erittäin nopeasti.

Kun on kyse mallityökaluista, sinun on päätettävä, toimiiko yksinkertainen lankakehysratkaisu vai tarvitsetko edistyneempää näytön suunnittelua. Riippumatta siitä, minkä mallityökalun valitset, varmista vain, että olet valmis hyväksymään menetyksen yhteistyön työnkulussa ja vähemmän suunnittelun johdonmukaisuutta tarjoavien ominaisuuksien välillä.

03. Graafinen suunnitteluohjelmisto

Jotkut suunnittelijat vannovat ohjelmiston kaltaisia Photoshop CC , Luonnos tai Illustrator CC , erityisesti ne, jotka ovat erityisen taitavia tai perehtyneitä työkaluihin, jotka tarjoavat hallinnan pikseliin saakka. Graafisen suunnittelun alustat toimivat parhaiten, jos tavoitat korkeinta realismia ja visuaalista uskollisuutta. Ja kuten selitämme oppaassamme nopea prototyyppien muodostus Photoshop CC: llä , se voi olla helpompaa kuin luulet.

Photoshop CC

Photoshop antaa hienorakeisen hallinnan, mutta se voi olla ylivoimainen yksinkertaisille mallille

Graafisen suunnitteluohjelmiston parissa työskentely antaa sinulle pääsyn melkein loputtomaan valikoimaan tarkasti määriteltyjä värejä, joten jos työskentelet jäykän ja ennalta määritetyn värimaailman rajoissa - esimerkiksi tiettyjen tuotemerkkisääntöjen mukaisesti -, nämä ohjelmat voivat olla paras vaihtoehto. Nämä ohjelmat tarjoavat enemmän kuin värivaihtoehtoja, ja ne tarjoavat paljon enemmän visuaalisia työkaluja, joiden avulla voit käsitellä yksityiskohtien yksityiskohtia.

Tämän tyyppisen ohjelmiston käytön haittana on kuitenkin se, että sen kääntäminen voi olla vaikeaa, kun on aika aloittaa suunnittelun koodaus. Mikä Photoshopissa toimi, ei välttämättä aina toimi koodissa (elementit, kuten fontit, varjot, liukuväritehosteet ja niin edelleen), mikä voi tarkoittaa aikaa vievää aikaa prototyyppivaiheen ratkaisujen löytämiseen.

Tyylikkäillä sivuilla voi olla hyötyä siitä, että visuaaliset yksityiskohdat saadaan esiin mockup-vaiheen aikana, jolloin Photoshop tai Sketch antaa sinulle eniten vaihtoehtoja. Vastaavasti, jos olet tekemisissä nipunvalinnan tai vaikeasti miellyttävän asiakkaan kanssa, esittelemällä heille upea ja vaikuttava mockup voi voittaa heidät helpommin.

mallinnukset voidaan vetää UXPiniin

Photoshopissa tai Sketchissä luodut maketit voidaan vetää ja pudottaa UXPiniin

On myös syytä mainita, että Photoshopissa tai Sketchissä luodut mallit voidaan vetää ja pudottaa prototyyppivaiheeseen UXPinin avulla. Tämän avulla voit helposti animoida kaikki kerrokset (ilman litistämistä) muutamalla napsautuksella ja varmistaa, että sinun ei tarvitse aloittaa alusta alkaen, kun on aika tehdä prototyyppi.

Jos visuaalisuus ei ole ainoa prioriteettisi, saatat olla tehokkaampi käyttämällä työkalua, jonka avulla voit tehdä langanpuitteet, mallinnukset ja prototyypit kaikki yhdessä paikassa. Graafisen suunnittelun ohjelmisto voi olla enemmän vaivaa kuin mockupien arvoinen, ellet etsi optimaalista visualisointia - sinun on ehdottomasti kommunikoitava kehittäjän kanssa, koska näitä työkaluja ei ole suunniteltu yhteistyöhön.

04. Koodatut mallit

Jos olet pääasiassa suunnittelija ja et ole tyytyväinen koodaukseen, tämä ei tietenkään ole vaihtoehto. Kuten keskusteltiin Mockups-opas , koodatut mallit eivät ole oletusvalinta.

Suurin osa koodauksesta voidaan lykätä prototyyppivaiheeseen (jos luot HTML / JavaScript-prototyyppiä) tai jopa myöhemmin (jos käytät prototyyppityökalua). Mutta monimutkaisuudesta ja mahdollisista esteistä huolimatta on monia kunnioitettavia suunnittelijoita, jotka kannattavat koodin käyttöönottoa mallivaiheessa.

Vaikka työkalujen ja tekniikan parannukset tarkoittavat, että ulkoasun suunnittelussa avautuu yhä enemmän mahdollisuuksia, kaikkea ei ole helppo (tai edes mahdollista) luoda uudelleen koodiksi. Aloittaminen koodilla antaa sinun tietää heti, mitä voit ja mitä ei voi tehdä. Jos olet tyytyväinen koodiin, voidaan myös väittää, että aloitus tästä on vähemmän tuhlaavaa - mallinnus päätyy joka tapauksessa HTML / CSS: ään.

Mutta kuten aiemmin mainitsimme, koodausta sisältävät mallinnukset eivät ole suosittu strategia, enemmän syistä kuin koodauksen vaikeudesta. Liian aikaisen koodaamisen aloittaminen voi rajoittaa luovuutta ja valmiutta kokeilla, koska on helppo huolehtia ideoiden toteutettavuudesta koodissa sen sijaan, kuinka jännittäviä ne voisivat näyttää.

Koodauksen käyttöönotto on sinun tehtäväsi. Varmista vain, että tiedät suunnittelutavoitteesi ja pidä kehittäjät ajan tasalla siitä, miten priorisoit ominaisuuksia.

veden käsitteen muoto

Lue lisää: