'Tässä hulluille, väärinkäytöksille, kapinallisille, häiriötekijöille, pyöreille tappeille neliön reikissä ... niille, jotka näkevät asiat eri tavalla - he eivät pidä säännöistä ... Voit lainata heitä, olla eri mieltä heidän kanssaan, ylistää tai halveksia heitä, mutta ainoa asia, jota et voi tehdä, on jättää heidät huomiotta, koska ne muuttavat asioita ... ” - Applen Ajattele eri tavalla -kampanja, Steve Jobs, 1997.

Suurimman osan ajasta suunnittelijat luovat edelleen staattisia kuvamalleja perinteisillä suunnittelutyökaluilla verkkosivujen suunnitteluprosessin aikana. Mutta jotkut suunnittelijat teemme valtavan harppauksen ja ohitamme heidät suoraan koodaamaan, rakentamaan ja säätämään malleja selaimessa ja testaamaan niiden malleja sellaisina kuin ne näyttäisivät ihmisille reaaliajassa. Ovatko he hulluja, sopimattomia, kapinallisia?

Tyypillisesti perinteiseen verkkosivustojen kehittämisprosessiin kuuluu monia vaiheita, mukaan lukien suunnittelu, sisältöstrategia, suunnittelu, lankakehys, prototyypit, testaus, kehittäminen, julkaiseminen ja niin edelleen. Mutta voisiko suunnitteluvaiheessa olla toinen tapa tuottaa 'kuvapisteitä täydellisiä' reagoivia sivustosuunnitelmia ja ohittaa suunnittelutyökalut kokonaan?

Kun nousu reagoiva muotoilu ja käytössä olevien laitteiden (matkapuhelimet, tabletit, kannettavat tietokoneet, pöytätietokoneet, kellot) moninaisuus, on paljon vaikeampaa pitää kaikki yhtenäinen - ja kun otetaan huomioon enemmän liikkuvia osia, lähestymistapa verkkosivustojen ja käyttöliittymien suunnitteluun muuttuu.

Vaikka suunnittelijan ei tarvitse tulla asiantuntijakooderiksi, yksi ratkaisu on, että suunnittelijat alkavat työskennellä suoraan verkkosivustoa ohjaavan koodin kanssa. Suunnittelijat, jotka osaavat kiistellä koodia vain vähän HTML: ää ja CSS: ää pitävät, heillä on suuri etu kaikille joukkueille ja niillä on valtava etu kokonaisuudessaan.

Miksi? Kun otat mukaan reagoivan verkkosivujen suunnitteluprojektin, jossa on kaikki suunnittelijat yleensä ei ole aikaa luoda yhden komponentin staattista mallia (sanotaan esimerkiksi otsikko tai alatunniste) 10 eri tarkkuudella ja näkymässä. Vaikka he suunnittelisivat vain suosituimpia laitteita, heidän on silti otettava huomioon 4–5 näyttöä, joilla on erilainen kuvasuhde, näytön tiheys ja näytön mitat. Ei pienintäkään tehtävää.

Ratkaise verkkosivujen haasteet ensin kynällä ja paperilla

Tutkitaan erilaista verkkosivustojen suunnittelun lähestymistapaa ja suunnitteluprosessia.

Ensimmäinen vaihe alkaa asiakaskyselyllä, jossa kysytään projektin yleisistä tavoitteista liiketoiminnan näkökulmasta, kohdeyleisöstä, konversiostrategioista, erilaisista suorituskyvyn odotukset , ja niin edelleen. Tämä tehdään ennen varsinaisen suunnitteluvaiheen käynnistämistä, jotta asiakkaan tarpeet ja projekti voidaan ymmärtää paremmin ja jotta se olisi tehokkaampi.

Seuraava vaihe on kirjoittaa luonnos projektista sen varmistamiseksi, että alushanke ymmärrettiin. Tästä on hyötyä työskennellessäni niillä kapealla alueilla, joilla sinulla ei ehkä ole paljon kokemusta tai asiantuntemusta. Kutsu sitä toiminnalliseksi määrittelyksi - mutta vähemmän tekniseksi.

Tämä auttaa määrittelemään terminologioita, avainsanoja ja prosesseja. Projektin monimutkaisuudesta riippuen on hyvä tehdä useita skenaarioita ja käyttäjävirtoja - tyypillisesti aloitusvirta, hakeminen ja sivustossa liikkuminen tai 'lisää ostoskoriin' ja kassan kulku, jos se on verkkokauppasivusto.

Lankakehykset ja prototyypit

Prototyyppien tekeminen on seuraava vaihe verkkosivujen suunnitteluprosessissa. Nopea rakentaminen lankakehykset puhua sivun asettelusta, toiminnoista ja siitä, miltä sivuston sivut näyttävät eri laitteilla, on hyvä alku. Kymmenien eri mallien ja komponenttien lankakehysten rakentaminen ei vie paljon aikaa. Näistä voidaan luoda yksinkertainen verkkosivuston prototyyppi, ja projektin monimutkaisuudesta riippuen prototyyppityökalut kuten InVision , Adobe XD , Balsamiq , Moqups tai Axure voidaan käyttää.

Mielialan levyt ja käyttöliittymäluettelo

Seuraava askel on a mieliala aluksella : kokoelma asioita, jotka suunnittelija, asiakas ja muut sidosryhmät voivat pitää muilla verkkosivustoilla - asetteluista, ulkoasusta, väreistä tai kirjasimista, kuvakkeista, kuvista ja niin edelleen. Tämä auttaa määrittämään sivuston yleisen ulkoasun. Jos asiakkaalla on tuotemerkkityylin opas, se tulisi harkita ja sisällyttää uuteen sivustosuunnitteluun.

Kun erilaiset artefaktit on hyväksytty - lankakehykset, prototyypit, mallit, mielialalevyt jne. - on hyvä tehdä käyttöliittymän luettelo .

Käyttöliittymäluettelo on kattava kokoelma käyttöliittymän muodostavista paloista.

Brad Frost

Jos teet reagoivaa verkkosuunnittelua alusta alkaen, aloita kirjoittamalla kaikki komponentit ja elementit, joista projekti rakennetaan. Järjestämätön luettelo toimii hienosti ja on ehdottomasti parempi kuin ei mitään. Esimerkiksi taulukot, painikkeet, kuvat, typografia, media, lomakkeet, navigointi, komponentit jne.

Suunnittelu selaimessa

'Suunnittelu selaimessa' on termi, josta tuli suosittu reagoivan verkkosuunnittelun lisääntyessä. Suunnitteluohjelmissa vietettyjen tuntien minimoimiseksi kuten Luonnos Suunnittelijoita kehotettiin siirtämään suunnitteluvaihe selaimeen ja käyttämään CSS: ää asetteluun ja muotoiluun. Tämä verkkosivujen suunnittelutapa osoittautuu tehokkaammaksi, koska se leikkaa paljon vaiheita.

Keskittymällä HTML-malliin ja testaamalla suunnitteluideoita 'selaimen sisällä' CSS: n avulla, aika, joka vietetään staattisten sivumallien luomiseen muissa suunnittelutyökaluissa, kuten Sketch, voidaan yleensä säästää. Se on hyvä idea suunnittelijat saadaksesi hyvän koodieditorin ja keksimällä hyvän selaimen päivitysmenetelmän, jotta he näkevät muutokset reaaliajassa. Sublime teksti ja Codekit ovat esimerkiksi loistava yhdistelmä.

HTML ja CSS rakenteeltaan sellaisina kuin ne ovat, pakottaa sinut ajattelemaan malleja ja pitämään sinut kurissa. Modulaarisuudesta on helpompi ajatella rakennettaessa HTML-komponentteja, jotka voidaan helposti kopioida, kopioida ja täyttää dynaamisilla tiedoilla samalla rakenteeltaan. Jos haluat luoda tietyn muunnoksen, sinun on kohdistettava nimenomaisesti kyseiseen elementtiin tai lisättävä toinen CSS-luokka.

Kun tyylit otsikot, elleivät ne ohiteta, ne ovat yhdenmukaisia ​​koko sivustossa. Sama pätee muihin elementteihin. Tämäntyyppinen ajattelu pakottaa sinut standardoimaan, ryhmittelemään yhteiset elementit yhteen, käyttämään uudelleen jo muotoiltuja elementtejä mahdollisimman paljon ja mikä tärkeintä, pitämään kaiken modulaarisena.

Yhdellä CSS-ilmoituksella voit vaihtaa painikkeiden pehmusteita parempien kosketuskohteiden saavuttamiseksi ja testata suoraan a kännykkä , tabletti ja työpöydälle. Tätä ei ole helppo tehdä Photoshopissa tai Sketchissä, koska muut elementit eivät ole tietoisia toisistaan ​​ulkoasussa, ja sinun on järjestettävä objektit uudelleen aina, kun muutat jotain.

Haluatko kokeilla eri otsikkovärimaailmaa? Kun työskentelet vain muutaman CSS-koodirivin kanssa, muutokset näkyvät kaikissa HTML-malleissa välittömästi, kaikilla laitteilla ja näytöillä. Tällaista joustavuutta ei voida jäljitellä helposti, kun sinulla on 20 staattista mallia. Voit myöntää, että voit käyttää Sketchissä tai Adobe XD: ssä olevia symboleja uudelleenkäytettäviin komponentteihin, mutta ne eivät ole yhtä monipuolisia kuin CSS.

Tässä vaiheessa on tehtävä useita teknisiä päätöksiä. Kysymyksiä, joihin on vastattava, ovat:

• Käytätkö a CSS-esiprosessori ? (suositellaan)
• Minkä tyyppinen reagoiva ruudukko aiotko käyttää asettelua?
• Ovatko fontit, joita haluat käyttää, ostettavissa? Onko asiakkaalla budjetti premium-web-kirjasimille, vai palaatko käytettävissä olevien käyttämiseen ilmaiset web-fontit ?
• Käytätkö monivärisiä tai yksivärisiä kuvakkeita? Muuttuuko koko koko sivustolla? Luotatko seuraavassa mukautettuihin kuvakkeisiin vai jo olemassa olevaan kuvakepakettiin? Mitä kokoja kuvakkeidesi on mukautettava?

Fonttien ja reagoivan web-suunnittelun ongelma

Fonttien valitseminen reagoivalle verkkosuunnitteluprojektille voi olla haastavaa. On monia mahdollisuuksia ja yhtä paljon sudenkuoppia. Koska suunnittelua käytetään selaimessa, tämä on paras paikka kokeilla niitä. Kirjasinten luettavuus voi vaihdella koon, painon, värien ja renderöinnin mukaan, joten kokeilemalla kirjasimia suoraan selaimessa suunnittelijat voi varmistaa, että asiat näyttävät oikealta ja että toivotut odotukset täyttyvät.

On olemassa monia online-työkaluja fonttien valitsemiseen ja testaamiseen sekä kirjasinyhdistelmien kokeilemiseen. Päällä Typetester ja Antaa jklle totuttu rooli erilaisia ​​fontteja eri palveluista ja valimoista löytyy ja testataan. Kun työskentelet tietyn fontin tilauspalvelun kanssa, kuten Typpi tai Fonts.com , suunnittelijat voivat luoda fontteja ja testata sivumallejaan suoraan. Typekit-paketin luominen uusilla kirjasimilla on helppoa ja nopeaa, ja voit helposti nähdä, kuinka tietyt fontit vaikuttavat verkkosivujen suorituskykyyn.

Tuotemerkkityyliin sopivat kuvakkeet

Jos piirrät mukautetun kuvakkeet , koko, ruudukko ja tyyli on määriteltävä. Tehdä toitä Kuvittaja , jokainen piirtoalusta edustaisi esimerkiksi yhtä kuvaketta. Kuvakkeet voidaan helposti viedä Illustratorista SVG: ksi tai PNG: ksi, joka voidaan myöhemmin muuttaa kuvakkeen fontiksi palveluilla, kuten Icomoon . On suositeltavaa käyttää vektorikuvakkeita (SVG), koska vektorit ovat resoluutiosta riippumattomia, joten ei ole huolta siitä, miten ne näkyvät teräväpiirtonäytöissä (Retina).

Tyyliopas ja CSS pitämään verkkosivujen suunnitteluprosessi kurissa

Vaikka suunnittelemme selaimessa, kymmenien mallien ja komponenttien avulla voimme mahdollisesti menettää tietosi siitä, missä jotain käytetään ja millä tavalla. On hyvä idea rakentaa tyyliopas kaikki komponentit keskitettynä arkistona. Erityiset sivumallit rakennetaan tästä tyylioppaasta yhdistämällä käyttöliittymän komponentit ja elementit verkkosivuiksi.

Käyttöliittymän komponentit voivat olla esimerkiksi sivutus, tuoteluettelo, kuvagalleria, modaaliset ikkunat, lomake-elementit jne., Ja niitä käytetään rakennuspalikoina malleille. Kaikkien pitäminen yhdessä paikassa on todella kätevää, kun on aika testata tietyn käyttöliittymäkomponentin rakentaminen.

CSS: n avulla on hyvä käytäntö erottaa komponenttityylit erillisiksi tiedostoiksi. Esimerkiksi sivutusmuotoilu on muodossa _pagination.scss, muotoelementit _form.scss: ssa, ja kaikki nämä tiedostot sisällytetään yhteen SCSS-tiedostoon muiden tiedostojen kanssa (muuttujat, miksaus jne.).

Vaikka style.scss saattaa koostua kymmenistä 'pienistä tiedostoista', kun useat ihmiset työskentelevät samassa projektissa, on helpompi seurata muutoksia (riippumatta siitä, käytetäänkö lähdeohjausta vai ei), jos kaikki on jaettu pienempiin paloihin. On tärkeää jatkaa tyylioppaan ylläpitämistä verkkosivujen suunnitteluprojektin valmistuttua, koska tiimin on seurattava kaikkia sivuston komponentteja.

Tyylitaulukoiden käyttäminen - Modulaarinen CSS

Kehittämisen näkökulmasta on olemassa monia lähestymistapoja modulaarisen CSS: n kirjoittamiseen. Tunnetuimmat ovat SMACSS (Skaalautuva ja modulaarinen arkkitehtuuri CSS: lle), HYVÄ (Lohko, elementti, muokkaaja) ja OOCSS (Objektiorientoitu CSS). Opittavaa on melko paljon, vaikka päätätkin kehittää oman lähestymistapasi. Tässä vaiheessa sinulla pitäisi olla mukava kokoelma käyttöliittymäkomponentteja ja verkkosivuja, joiden avulla voit helposti rakentaa uusia verkkosivuja. Voit kopioida ja liittää elementtejä tyylioppaasta ja järjestää ne tarvittaessa.

Koska kaikki on modulaarista, sinun ei tarvitse huolehtia suunnittelusta ja koodin johdonmukaisuudesta; mutta älä unohda, että jos mukautat käyttöliittymäkomponenttia koko järjestelmään, sinun on päivitettävä tyyliopas muutoksilla (tai lisättävä uusi komponentti). Jos haluat pitää kaiken järjestyksessä, on parasta käyttää jonkinlaista malli- / automaatiomenetelmää työskennellessäsi esimerkiksi verkkosivuilla Gulp tai Grunt .

Mitä seuraavaksi? Suunnittelu selaimessa

Nyt sinulla on käyttöliittymäkomponenttien, kaikkien dokumentoitujen elementtien ja niistä rakennettujen verkkosivujen keskusvarasto. Tästä eteenpäin se on enemmän kuin todennäköistä suunnittelijat heidän ei tarvitse enää avata suosikkisuunnittelutyökalujaan, koska suurin osa suunnittelusta tehdään suoraan koodissa ja esikatsellaan selaimessa.

Etkö ole aivan varma, kuinka tietty muutos vaikuttaa suunnitteluun? Nyt voit esikatsella suunnittelua eri laitteilla ja selaimissa samanaikaisesti nähdäksesi, kuinka otsikossa oleva fontin muutos tai painikkeen koon ja värin muuttaminen vaikuttavat suunnitteluun.

Kun käytät mukautettuja verkkofontteja, kuinka kirjasinten lisäpainojen lisääminen vaikuttaa sivun latauskykyyn? Voimme testata keskeneräisten verkkosivujen suorituskykyä esimerkiksi Verkkosivutesti ja tehdä tietoon perustuvia päätöksiä todellisista tuloksista. Emme todellakaan voi tehdä sitä Photoshopissa tai Sketchissä.

HTML: n ja CSS: n kanssa työskenteleminen ja työskentely selaimessa ei välttämättä sovi kaikille suunnittelijoille verkkosivujen suunnitteluprosessin aikana. Mutta jos suunnittelijat todella välittävät siitä, miten heidän työnsä näyttää erilaisilla laitteilla ja näytön kooilla, heidän on varmistettava, että se on täydellinen joka kerta. Jotain, joka näyttää hämmästyttävältä staattisena mallimallina, saattaa näyttää vähemmän toivottavalta katsottuna mobiililaitteen verkkoselaimessa. Olisi järkeviä suunnittelijoita rakentamaan ja testaamaan verkkosivuja ympäristössä, jossa kaikki näkevät ne ... selaimessa.

• • •

Lue lisää ApeeScape Design Blogista:

• Reagoiva suunnittelu - parhaat käytännöt ja näkökohdat
• Tehokkaan aloitussivun suunnittelu
• Viimeisin opas verkkokaupan verkkosivujen suunnitteluun
• Verkkosivustojen uudistamisen perusteet - tapaustutkimus
• Design's Driving Forces - verkkosivuston uudistustapaustutkimus

Perustietojen ymmärtäminen

Mikä on verkkosivuston rakentamisprosessi?

1. Valitse verkkopalvelin 2. Rekisteröi verkkotunnus 3. Suunnittele sivusto (tyyppi, navigointi, sisältö) 4. Suunnittele ja rakenna sivusto 5. Julkaise sivusto 6. Mainosta sivustoa 7. Ylläpidä sivustoa.

Kuinka kauan verkkosivuston suunnittelu kestää?

Yleisesti ottaen, laajuudesta riippuen, tyypillinen sivusto (50-100 sivua) voi kestää noin 14 viikkoa (löytö 3 viikkoa, suunnittelu 6 viikkoa, kehitys 5 viikkoa). Yksinkertainen 10-15 sivun mukautettu suunnittelusivusto kestää noin 4-6 viikkoa.

Kuinka aloitan verkkosivuston suunnittelun?

Ennen suunnitteluvaiheeseen siirtymistä: 1. harkitse ja tutki (esim. Kohdeyleisö, luova suunta, tavoitteet, budjetti, aikajana). 2. Sisältö ajaa suunnittelua niin aivoriihiä. 3. Vahvista tekniset vaatimukset. 4. Kehitä luonnos. 5. Luo lankakehykset elementtien sijoittelun määrittämiseksi.

Miten suunnittelet verkkosivustoa?

Löytö: 1. Tutkimus (esim. Kohdeyleisö, luova suunta, tavoitteet, budjetti, aikajana). 2. Aivoriihi. 3. Vahvista tekniset vaatimukset. 4. Kehitä luonnos. Suunnittelu: 1. Luo lankakehykset asettelun määrittämiseksi 2. Kehitä visuaalisia hoitoja (esim. Mielialusta, Photoshop-mallit, HTML) 3. Luovia arvosteluja sidosryhmien kanssa.

Kuinka rakennat verkkosivuston?

Hyvä sivustorakenne on yhtä hyvä kuin UX. Tavanomainen sivustorakenne on kriittinen hakukoneoptimoinnin ja käytettävyyden kannalta. Tyypillisesti pyramidin muotoisen, sillä tulisi olla selkeä navigointi ja pitää käyttäjän mielessä: 1. Kotisivu 2. Osastot 3. Alaluokat 4. Yksittäiset sivut ja viestit.

Kuinka suunnittelet verkkosivuston asettelua?

1. Valitse asettelutyyppi ottamalla huomioon sivuston tarkasteluun käytettyjen laitteiden alue. 2. Määritä rakenne sivukartan avulla. 3. Tunnista navigointivirta 4. Luo lankakehykset hierarkian tunnistamiseksi.