Miten luodaan verkkosivujen Wireframes

Verkkosivustot ovat yksinkertaisia ​​viivapiirroksia, jotka näyttävät elementtien sijoittamisen verkkosivulle. Voit säästää paljon aikaa muokkaamalla yksinkertaisen rautalangan ulkoasua suunnitteluprosessin alussa monimutkaisen suunnittelun sijaan.

Wirepiirien käyttäminen on loistava tapa aloittaa verkkosivustoprojekti, koska se sallii sinun ja asiakkaasi keskittyä ulkoasuun ilman värin, tyyppien ja muiden suunnitteluelementtien häiritsemistä. Keskittyy siihen, mihin menee, missä verkkosivustosi ja tilan prosenttiosuus, joka kullekin elementille, joka voidaan määrittää asiakkaan tarpeiden mukaan.

01/03

Mitä sisällytetään verkkosivujen Wireframe-ohjelmaan

Simple wireframe esimerkki.

Kaikkien verkkosivujen tärkeiden elementtien pitäisi olla näkyvissä verkkosivustossasi. Käytä yksinkertaisia ​​muotoja varsinaisen grafiikan sijaan ja merkitse ne. Näitä elementtejä ovat:

02/03

Miten luodaan verkkosivujen Wireframes

OmniGraffle-kuvakaappaus.

Web-sivuston raidevirtausta voidaan luoda monella tapaa. Ne sisältävät:

Piirrä se käsin paperilla

Tämä menetelmä on käytännöllinen silloin, kun asiakkaat kohtaavat kasvotusten. Piirrä ulkoasun ideoita paperilla keskittyen siihen, mihin elementteihin pitäisi mennä.

Adobe Photoshopin, Illustratorin tai muun ohjelmiston käyttö

Useimmissa grafiikkapaketeissa on kaikki perusvälineet, jotka ovat välttämättömiä lankahaarojen luomiseksi. Yksinkertaiset viivat, muodot ja teksti (elementtien merkitsemiseen) ovat kaikki, mitä tarvitset luodaksesi näkyvän raidan.

Tämäntyyppisen tehtävän luominen ohjelmistolla

Vaikka Photoshop ja Illustrator voivat tehdä tempun, jotkut ohjelmistopaketit on kehitetty nimenomaan tämäntyyppiseen työhön. OmniGraffle on ohjelmisto, joka yksinkertaistaa rautalankojen luomista muodostamalla muoto-, viiva-, nuoli- ja tekstityökaluja käytettäväksi tyhjälle kudokselle. Voit jopa ladata omia grafiikkasarjoja (ilmaiseksi) Graffletopiaan, joka antaa sinulle lisää elementtejä, kuten yhteisiä web-painikkeita.

03/03

Edut

Sivuston wireframeilla voit hyötyä yksinkertaisesta piirustuksesta, jotta haluttu asettelu saadaan aikaan. Sen sijaan, että siirrettäisiin monimutkaisia ​​elementtejä sivun ympärillä, voi viedä hyvin vähän aikaa vetää muutamia laatikoita uuteen paikkaan. Se on myös paljon tuottavampi sinulle tai asiakkaallesi keskittyä ensin ulkoasuun ... et aloittaa kommentit, kuten "En pidä siitä väriä siellä!" Sen sijaan aloitat viimeistellyn ulkoasun ja rakenteen joka perustaa suunnittelusi.