Miten pysytään reagoivaa muotoilua kiinnostuneina
Responsive web design on suosittu eikä se ole mikään salaisuus. Se, mitä asiantuntijat vaativat ja mistä useat merkit alkavat vaihtaa. Kyse ei ole pelkästään matkapuhelimen valmistavan sivuston luomisesta, vaan siitä, että sivustosi on nähtävissä jokaiselle selaimen koosta joko työpöydällä, tablet-laitteella tai älypuhelimella.
Herkkä osa suunnittelua varten reagointikyky on luoda sivusto, joka näyttää hyvältä iso ja pieni. Sinun on otettava paljon huomioon, ennen kuin avaat suunnittelutyön ja mene töihin. Se on ylimääräinen askel, joka yleensä päättyy hyvin sen arvoiseksi valmiissa tuotteessa. Se on hyvin ilmeistä, kun suunnittelija ei aio reagoida; sivustot yleensä näyttävät todella paljailta ja tylsiltä.
On ehdottoman välttämätöntä, että suunnittelijat ylläpitävät luovuuttaan vastaamaan sivustoja. Kun useammat ihmiset käyttävät tabletteja ja älypuhelimia, haluat olla varma, että kaikki voivat tarkastella sivustosi. Seuraavassa on joitain vinkkejä, joiden avulla voit pitää luovaa ja tehokasta suunnittelussa reagoivaan verkkoon.
1. Käytä erinomaista typografiaa
Reagoivien sivustojen kanssa sinun on harkittava, mitä näyttää hyvältä pienemmällä näytöllä. Hyvä typografia on vakiintunut minkä tahansa hyvän web-suunnittelun, mutta se on lähes välttämätöntä herkästi web-suunnittelussa. Koska näytön koko pienenee, useimmat elementit muuttavat ja kutistuvat tai liikkuvat. Ensinnäkin typografialla pitäisi olla tämä kyky.
Toiseksi, käytä eri otsikoita ja eri kokoisia tekstiä. Nyt käytämme yleensä hyvin suurikokoisia otsikoita ja otsikoita työpöydän malleihin. Tämän ei tarvitse lopettaa kokonaisuudessaan, koska olet ajatellut pienempiä kokoja. Varmista vain, että käytät laajennusta, kuten FitText, pienentää tekstin kokoa. Tämä auttaa.
seppä käyttää monia erilaisia kirjasimia luomaan erittäin mielenkiintoinen ulkoasu. Ne vaihtelevat myös näiden kirjasinten koon koko sivustolla. Mikä on mielenkiintoinen työpöytätilassa, se on tapa, jolla teksti ja kohdat on järjestetty eri sarakkeisiin. Kun ikkuna pienennetään, teksti vajoaa yhteen sarakkeeseen. Onneksi teksti pysyy johdonmukaisena ylläpitämällä samaa asteikkoa ja tyyliä.
Smashing -lehti pyrkii tekemään samoin. Ne päästävät eroon suunnittelun oikeasta puolesta (mainokset) kokonaan, kun ikkuna pienenee. Teksti kuitenkin kääritään ikkunan sisäpuolelle ja tyylit, värit ja koot pysyvät yhdenmukaisina.
2. Käytä suuria kuvia
Kuvat, kuten typografia, ovat erittäin tärkeitä sivuston suunnittelussa. Samoin kuin typografia, reagoivissa kuvioissa, kun tarkastelet sivuston pienempiä näyttöjä, myös kuvien tulee näkyä pienemmiksi tai pienemmiksi. On olemassa useita eri asetteluja ja erilaisia kuvakokoja, joita voidaan käyttää reagoivaan muotoiluun. On tärkeää kiinnittää huomiota valittuihin kuviin ja siihen, miten käytät niitä, koska ne muuttuvat epäilemättä. Kun näytöt tulevat isommiksi tai pienemmiksi, kuvat muuttuvat muotoon ja paljastavat tai rajaavat kuvan tiettyjä osia.
Ihannetapauksessa haluat varmistaa, että suurilla valokuvillasi ei ole graafista sisältöä, joka voidaan poistaa, kun ikkunat muuttavat kokoa. Lisäksi, kun luot graafisia kuvia, sinun on varmistettava, että luot kuvan, joka latautuu nopeasti ja näkyy pienemmällä näytöllä. Siksi suunnittelijat ovat omaksuneet tasainen muotoilu. Se on vain helpompaa.
Pandiscioissa sinun täytyy ensin huomata, kuinka isompi otsikkokuva näkyy työpöydällä. Se on täynnä, ulottuu sivuille ja on melko laadukas. Kun kutistat ikkunan koon, kuvat tulevat pienemmiksi, muuttavat muotoa (suorakulmaisesta neliöön) ja rajaavat. He ovat löytäneet kuvia, jotka näyttävät hyvältä, kun näytön koko muuttuu.
KinHR on sivusto, joka käyttää paljon erilaisia graafisia elementtejä sekä valokuvia. Huomaa, että kun suuret ja pienet, otsikon kuvat pienenevät kuten Pandiscio-verkkosivustolla. Kehossa olevat graafiset elementit kuitenkin pienentävät kuvaa, mutta säilyttävät muodonsa eivätkä rajoita leikkausta.
3. Älä nuku navigointiin
Pistä tyhjä, jos ihmisillä ei ole aavistustakaan siitä, miten pääset ympäri sivustoasi, he vain eivät. Navigointi on vaikeampaa, kun käsitellään reagoivaa suunnittelua, koska olemme tottuneet luomaan navigaatiota maisemasuunnitteluun. Nyt meidän on luotava navigointi, joka voidaan helposti kondensoitua muokattavaksi.
Se ei ole valtava ongelma, kun sinulla on kourallinen linkkejä. Voit joko tehdä valikon pienemmäksi tai tiivistetyksi yläosaan tai luoda pudotusvalikon katsojille. Keskeistä on, miten voit käsitellä navigointia enemmän sisältöä raskas sivustoja.
Mashableilla on paljon linkkejä, koska niillä on tonnia kategorioita ja jopa enemmän artikkeleita. Sen lisäksi heillä on omat yrityskeskeiset sivut, joihin on liitettävä myös. Mashable päättää luoda ponnahdusvalikon näytön vasemmalle puolelle pienemmille selaimille.
Monocleilla on kaksi päällimmäistä tasoa laajaa navigointia varten. Pienemmille selaimille he ovat luoneet alasvetovalikon äärimmäiselle sisällölle ja ovat juuri tiivistettynä navigoinnin toiselle tasolle.
4. Tee hauska käyttää
Kun napsautat linkkejä verkossa, sinun on todennäköisesti istuttava siellä ja odotettava asioita ladattava ennen kuin näet sivun. Puhelimissa on äärimmäisen ärsyttävää, että sinun on löydettävä tarkasti seuraava painike siirtyäkseen enemmän sisältöä kohti. Tällaiset asiat eivät ole hauskoja eikä intuitiivinen.
Yksityiskohtien huomioiminen ja sivustosi intuitiivisuuden lisääminen helpottavat sivustosi jakamista. Ajattele, millaista on käyttää sivustoa millä tahansa selaimen koolla. Ajattele, mitä verkkosivustoja pitäisi tehdä, kun pyydät jotain toimintaa. Etsi nämä asiat ja korjaa ne niin, että sivustosi on helppoa, hauskaa ja intuitiivista käyttää. Se tekee myös hieman mielenkiintoisemmaksi!
Mud tekee sivustonsa mielenkiintoisemmaksi kiinnittämällä huomiota niiden siirtymiin. Ne luovat erittäin tyylikkään tunnelman, kun monet niiden elementit liukuvat alas ja häivytetään sen sijaan, että liikkuvat äkisti ja näkyvät. Se tekee maailmasta eron.
Neue Yorke käyttää paljon liikkeitä, kun siirrytään portfolio-erästä esineeseen. Jälleen, se luo erittäin huippuluokan tunnelman ja pitää katsojat kiinnostuneina siitä, mitä pian on paljastettava.
5. Ajattele laatikon ulkopuolella
Kun kaikki muu epäonnistuu, ole vain luova. Responsive web-suunnittelu ei ole tarkoitus rajoittaa tapaa, jolla luodaan verkkosivustoja. Luovuutta on aina olemassa, olipa kyse koodauksesta tai suunnittelusta.
Enso on luonut sivuston, joka näyttää ikään kuin sillä ei ole mahdollisuutta olla herkkiä. Huomaa, miten he ovat muuttaneet layoutta hieman, kun koko pienenee, mutta he ovat säilyttäneet brändinsä ja luovuutensa.
TBWA: lla on sivusto, jolla on hieno muotoilu. Mutta heillä on myös hyviä kuvia. Ja heillä on myös suuri typografia! He ovat käyttäneet kaiken täällä tekemään erittäin ainutlaatuisen ja mielenkiintoisen reagoivan web-suunnittelun.
johtopäätös
Luovuuden säilyttäminen herkässä suunnittelussa tai millä tahansa verkkosuunnittelulla on yhtä yksinkertainen kuin konseptin skräppaus ja tarkistaminen, jotta tavoitteet pysyvät ennallaan. Hauskat jutut tapahtuvat helpommin, kun alat suunnitella, miten haluat sivustosi toimivan ja toimivan sen sijaan, että aloittaisit sen. Responsive web design ei tarvitse olla tämä suuri, kaikkivaltias tehtävä, jonka suunnittelijat pelkäävät. Se on melko yksinkertainen! Pidä kaikki edelliset asiat, joista keskustelemme mielessä ja luo sivustoja, jotka ovat vain tämän maailman ulkopuolella. Onnea reagoivaan web-suunnitteluun.
Mitkä vinkit voisitte jakaa vastenmielisen suunnittelun pitämisestä? Oletko löytänyt erittäin luovan reagoivan suunnittelun? Kerro meille kommentit.