Tapaus Wireframes koodausta varten

Työskentely suunnittelijana päivästä toiseen voi olla työlästä. Onneksi kenttä on laajentunut, joten prosessi on tullut yksinkertaisemmaksi. Monet ilmaiset työkalut ja resurssit ovat siellä.

Wireframes tuo eleganssia muotoilemaan mallistoja. Ne ovat verkkosivuston perusrakenne, ja värit ja lisälaitteet on poistettu.

Niitä käytetään tarkastelemaan suunnittelukonsepteja vain paljain olennaisin tavoin ja ne tarjoavat hyödyllisen näkökulman projekteihin.

Useimmat rautalangat on luotu ohjelmistopaketeissa, kuten Adobe Photoshopissa ja Fireworks-ohjelmissa, mutta joidenkin verkkosivustojen avulla voit luoda langankennekuvia suoraan selaimessa.

Tässä viestissä siirrymme HTML- ja CSS-muotoisen perusraidan kuvaan ja näet, miten se voi hyötyä luovasta prosessista.

Miksi vaivautua?

Miksi viettää aikaa suunnitella verkkosivuston rakenne? Joissakin tapauksissa se saattaa olla tarpeetonta, mutta se voi auttaa, kun olet juuttunut rutiin tai kamppailee nähdäksesi suuren kuvan.

Se voi hyödyttää sekä suunnittelijoita että asiakkaita. Maksullisessa työssä olet vastuussa asiakkaan mieltymyksestä. Näkyvä niiden pian suunnitellun verkkosivuston perusrakenne voi tarjota asiakkaille helpotusta ja hallita koko prosessin.

Mutta jos malli on hyvin yksinkertainen tai sillä on yksinkertainen rakenne, luomalla rautalanka ei ehkä ole sen arvoinen; pilkkaa koko asia Photoshopissa painikkeilla ja väreillä, saattaa olla yhtä nopea.

Päättää, mitä toimia on toteutettava, vaatii aikaa ja kriittistä ajattelua. Loppurakin lanka on vain työkalu. Se on aliarvioitu monien web-suunnittelijoiden mutta yllättävän hyödyllinen kerran ymmärretty.

Prototyping Wireframes in Code

Vuosien ajan Adobe-suunnitteluohjelmisto on ollut johtava sarja rautalankojen luomiseen, mutta verkko on muuttunut huomattavasti ja on edelleen kehittymässä.

Koodausstandardien nousu ja lisääntyminen HTML5-dokumentaatio ovat suuria askeleita kohti yhteistä verkkoa. Nyt HTML-koodin ja CSS: n perusjohdinkehyksen koodaus ei ole enää työtä kuin käsitellä Fireworksin tehtävää.

Johtokehyksillä voit hyökätä projektin päähän useista eri kulmista. Voit jopa testata yhteensopivuutta CSS2- ja CSS3-tekniikoiden ja selainten kanssa. Asioiden ei tarvitse olla monimutkaisia ​​alussa; rautalanka yksinkertaisesti toimii vankana pohjana koodauksen aloittamiselle.

Sisällön jakaminen helpottuu myös rautalangalla. Voit hallita kaikkia tarvitsemasi tiedostot missä tahansa verkkopalvelimessa, ja voit luoda demo-hakemiston ja välittää live-päivityksiä projektin asiakkaille ja tarkkailijoille. Muutosten tekeminen, kuten pikakuvakkeet marginaaleihin ja leveyksiin dokumentin CSS: ssä, on myös yksinkertainen.

Vakioida Long Haul -koodin

Wireframes säästää aikaa kehitysprosessissa. Jos peruselementtien CSS-tyylit ovat jo kirjoitettuja, loput ovat vain täyteaine (tärkeä täyteaine, ota huomioon).

Aloita oikein, oikealla HTML-asiakirjatyypillä ja hakemistorakenteella. Dokumenttityypit eivät ole kovin eroja toisistaan. Voit lukea heistä W3C-specs-sivu . Heillä ei ole väliä paljon vanhassa WWW-mallissa, mutta HTML5 on perusteellinen ja sallii verkkosivustosi kasvavan.

Sinun on testattava mahdollisimman monen käyttöjärjestelmän ja selaimen yhteensopivuus, ja wireframe-prototyyppausvaihe on täydellinen aika tehdä tämä, koska olet jo keskittynyt asettelun järjestelemiseen.

Tämä on myös hyvä aika työskennellä mobiiliystävällisellä mallilla. Koska rakenne muuttuu, sinun pitäisi pystyä sisällyttämään ideat ja muokkaamaan asiakirjan koodia. Kehittäminen helpottuu, koska matkapuhelimesi ja mukautettujen tyylejäsi on vähemmän koodia.

Dokumenttirakenteen alusta Wireframe

Paras tapa aloittaa on tyhjä liuskekivi, koska se antaa sinulle eniten luovuuteen. Koodiin sisällytettävät ilmeiset elementit (kuten missä tahansa muussa verkkoasiakirjassa) ovat html , head ja body .

Tämä on luuranko. Tarvitset vielä muutamia elementtejä, jotka näyttävät hyviltä. div (or division) is notable. (tai jako) on huomattava. Tämä on elementti, jota käytetään tiettyjen sivualueiden, kuten logon tai hakukentän, ruutuun.

Divs ovat HTML5-lanka-prototyyppien rakennuspalikoita. Kaikki ja kaikki voidaan pakata a div , ja muotoilu on tuulta, kun lisäät luokkia ja tunnuksia elementteihin. Suuri osa pääkoodista jaetaan divs koska ne ovat peruslohkoelementtejä.

Uusien HTML5-määritysten avulla elementti kutsutaan nav on otettu käyttöön. Tämä voidaan yhdistää järjestämättömään luetteloon ja CSS-ominaisuuksiin, joiden avulla voit luoda ja määrittää sivustosi päävalikkoalueet. Alla on yksinkertainen esimerkki siitä, miten voit rakentaa oman nav :

Työskentely header ja footer elementit

Huomaat yllä olevassa esimerkissä, että käytin a div tunnuksella header erillinen otsikkosäätöni. Tämä on täysin hyväksyttävää, eikä mikään ole väärässä edellä mainitun koodin kanssa. HTML5 antaa meille muita vaihtoehtoja.

header element in the new HTML5 specs allows you to further define your structure, which is useful mostly for web page crawlers and screen readers, which separate a “heading” portion of the content. elementti uusissa HTML5-määrityksissä, voit määritellä edelleen rakenteen, joka on hyödyllinen enimmäkseen verkkosivujen indeksoijille ja näytönlukijoille, jotka erottavat sisällön "otsikon" osan. Sinun ei pidä tehdä mitään eroa käyttäjillesi, ja se pitää koodisi aluksen ja näyttää, että todella ymmärrät, mistä puhut.

Toinen mielenkiintoinen elementti, joka on lisätty, on footer . Sama idea: käytä tätä elementtiä a div jakaa alatunnistesi sisällön. Yleensä alatunnisteet ovat poissa tieltä ja sisältävät perustietoja sivustosta tai yrityksestä.

Voit lisätä linkkejä alatunnisteeseen ja käyttää a nav osa määritellä joitakin niistä, mutta se olisi väärin. nav element specifies the main navigation area, so adding it to the footer or anywhere else would be redundant. elementti määrittää tärkeimmän navigointialueen, joten lisääminen alatunnisteeseen tai muualle olisi tarpeeton.

Tässä tilanteessa käyttämällä footer elementti ja erottaa navigointi linkit järjestämättömänä luettelona on paras. Voit käyttää sarakkeita alatunnistetta, jossa on useita sarakkeita linkkejä. Nämä voivat olla erillisiä div elementit vierekkäin toisiinsa, kaikki kääritään pääjalkaiseksi.

CSS-tekniikat muotoilurakenteiden muotoilulle

Jos ymmärrät HTML-koodin ja olet työskennellyt verkossa jonkin aikaa, tiedät varmasti joitain CSS-perustietoja. Monet CSS3: n uusista ominaisuuksista lisäävät fancy-pyöristettyjä kulmia ja pudotusvarjoja tekstiin.

En tarkoita, että CSS-muotoilu ei ole tärkeä, mutta keskeinen asettelu ja paikannus on lopulta sivustosi rakenne. CSS: llä määrität leveyden, marginaalin ja välimatkan. Nämä ovat useimpien verkkoelementtien perusominaisuuksia, ja ne ovat viimeinen askel todella loistavan rautalangan luomisessa.

Jos olet kiinnostunut CSS3: n uusista ominaisuuksista ja valitsimista, tutustu Webdesigner Depot -yhtiöltä parannusten kokoelma . Se sisältää oppaita kaikkialla verkossa CSS3: n uusista ominaisuuksista.

lisääminen clearfix Tyylit

Jos et tunne selkeää korjaustekniikkaa, toimi jokin tutkimus . Se on suosittu luokka, jonka haluat lisätä div jossa on kaksi tai useampia kelluvia lohkoja.

Jos et ole koskaan kuullut selkeää korjausta, se saattaa tuntua hämmentävältä, mutta käsite on yksinkertainen. Ajattele astiaa div sillä on kaksi div s sisällä, molemmat uivat vasemmalle. Oletusarvoisesti useimmat selaimet tekivät kaksi saraketta koskettaen suoraan toisiaan ja sisältöä div laajentaisi sivua sopivaksi kumpi sarake on pisin.

Lisäämällä a clearfix luokka säiliöön, molemmat sarakkeet sopivat onnellisesti säiliön sisällä div , joka laajenee tarpeeksi pitkälle molempien elementtien sovittamiseksi. Tämä ratkaisee monet ongelmat rautalankaisessa prototyyppityössä, etenkin kahden sarakkeen asettelulla (ts. Pääosalla ja sivupalkilla). Tämä menetelmä toimii myös kolmen ja jopa neljän sarakkeen asettelun suhteen. Jokaisen sarakkeen pitäisi olla vain pienempi tila.

CSS: ulkoisten tyylien pitäminen

CSS-sijoittelun tekeminen on toinen tärkeä päätös. Ammattimaiset web-suunnittelijat ja kehittäjät yksinkertaisesti ehdottavat riippumattoman .css tiedosto, erillään HTML-koodista.

Tällä tavoin rakenne on yhdessä asiakirjassa ja ulkoasu ja muotoilu on toisessa. Molemmat ovat yhtä tärkeitä lankahaaroille, mutta he tekevät erillisiä tehtäviä.

Kaikki HTML-koodisi on ehdottomasti rakenteellinen. Voit laittaa linkkejä kappaleiden sisälle div s muiden säiliöiden sisällä jne. Muotoilu ohjaa kappaleiden ja linkkien kokoa, välitavoitetta, marginaaleja ja kirjaimia ja rautalanka määrittelee konttien leveyden ja niiden sijoittelun sivulle.

Sivuelementit tarjoavat lisää esimerkkejä. Sinä koodit div kontit sisältöä ja sivupalkkeja varten, mutta tyylistäsi ja sijoitat ne CSS: n avulla. Suunnittelijan kannalta ymmärrys siitä, miten erottaa sisältö ja tyyli, on avain langallisten kehysten hallintaan.

Toteutetaan dynaamiset sivunosat paikkamerkit

Fancy jQuery -vaikutukset ja Ajax-ified -nettielementit näyttävät olevan kaikki raivoa. Trendit kasvavat, ja lähes kaikilla suosituilla verkkosivustoilla on dynaamista sisältöä. On tärkeää harkita. Jos ne täydentävät suunnittelua, miksi ei ole lohkojen lenkkejä?

Dynaamisen sisäänkirjausjärjestelmän koko back-end-järjestelmän kehittäminen ei välttämättä ole käytännöllinen, mutta huomautuksen tarvitsemasi JavaScript-kirjastot ovat hyvä alku. Voit myös koodata tyylejä, jotka muokkaavat tätä laatikkoa ja asettivat asiat myöhemmin, kun lisäät väriä ja yksityiskohtia.

Näitä teemoja voidaan soveltaa useissa rajapintaelementeissä. Voit käyttää hakukonsepteja, jotka muistuttavat Googlen tai jättävät muistiinpanoja koodisi dynaamisten uutisten tai Twitter-syötteen laatikon toteuttamiseen, jotka tekevät rautalankaverkostasi dynaamisesti ja tarjoavat tyylikkään tavan edustaa kiinteää tilaa esineen dynaamisen sisällön sijaan . Prototyyppivaiheen aikana tämä on kaikki mitä tarvitset joka tapauksessa.

Yhteiset kehysvirheiden virheet

On vaikeaa mennä vikaan, kun aloitat koodauksen perusrakenteen, mutta pidä tiettyjä yksityiskohtia mielessäsi.

Muista, että johdinrakenteen tarkoituksena on esittää kehys ilman paljon yksityiskohtia. Se on hyödyllinen sivun elementtien suunnittelun alkuvaiheissa; voit kaivaa syvälle sivustoosi ja nähdä suuren kuvan.

Pidä asiat yksinkertaisina ja kunnossa. Näkymät tähän ovat yleinen virhe ja se heikentää kykyäsi noudattaa määräaikoja. Wire-kehyksen ei tarvitse olla missään lähellä täydellistä; sen on tarkoitus olla kartoitus verkkosivustosta. Jopa tiukasti HTML- ja CSS-raidan pitäisi koostua vain sivuelementin ääriviivoista.

Vältä kiertoteitä keskittymällä päätavoitteisiin. Muista, miksi aloitit prosessin johtoalueella!

Wireframes voi myös ratkaista monia ongelmia, jotka häiritsevät suunnitteluprosessia. HTML- ja CSS-prototyyppien koodaus on paras tapa saada pään aloitus web-projektiin, joka on suuri tai pieni. Se on yksinkertainen ja tehokas tapa muokata ideoita.

ton of articles tonnia artikkeleita verkossa liittyvät wireframe-prosessiin. Olen käsitellyt asioiden koodausta ja kehittämistä, mutta lisätietoja langankirjoituksesta, jatka lukemista. Suunnitteluvinkit ovat siellä; sinun täytyy vain löytää ne!

Tämä viesti on kirjoitettu yksinomaan Webdesigner Depot by Jake Rocheleau , intohimoinen web-suunnittelija ja sosiaalisen median harrastaja. Jake rakastaa lukemista ja kirjoittamista uusimmista digitaalisen Internet-kehityssuunnitelmista ja verkostoitumista suunnitteluryhmässä. Tarkista hänet Twitterissä @jakerocheleau enemmän hänen työstään.

Mitkä ovat kokemuksesi wireframe-prosessista? Käytitkö koodia ensin tai jonkin muun tyyppisen ohjelmiston? Mitä mieltä olet joitain etuja prototyping koodissa ensin?