Luo puhdas verkkosivustoasettelu Photoshopissa - Sivustosuunnittelun suunnittelu on enemmän kuin värikkäiden kuvien järjestäminen ja jonkin tekstin täyttäminen tekstikehyksiin. Se on lähestymistapa, joka puhuu asiakkaasi liiketoiminnan laajuudesta. Verkkosivun värit ja grafiikat määrittelevät liiketoiminnan luonteen, kun taas verkkosivuston suunnittelun laadun ja helpon navigointivirran tulisi sitoa käyttäjä organisaatioon ja tehdä hänestä potentiaalinen asiakas.
Kaikkien wannabe-verkkosivujen suunnittelijoille on pakollista näyttää hyvältä näyttävä ja helposti saatavilla oleva verkkosivustoasettelu. Tämän oppaan tarkoituksena on viedä sinut läpi prosessin, jolla luodaan yksinkertainen ja puhdas verkkosivustoasettelu suoraan tyhjästä. Prosessin aikana opit tärkeitä asioita, jotka auttavat sinua saamaan lisää tietoa web-suunnittelusta. 
Kirjoita vaatimukset muistiin ennen verkkosivuston ulkoasun suunnittelua
Ennen kuin aloitat verkkosivuston ulkoasun suunnittelun, sinun pitäisi tietää, miltä verkkosivustosi näyttää ja mitkä ovat ne aiheet, jotka sinun tulisi sisällyttää verkkosivustoon. On erittäin tärkeää laatia luettelo verkkosivuston ulkoasuelementeistä, joita asiakas tarvitsee verkkosivustolleen. Yhdessä hyvän suunnittelijan laatu on valmistella malli koko verkkosivustosta ennen kuin hän alkaa työskennellä lopullisen mallin parissa.
Eri suunnitteluyritykset mukauttavat eri tasoja esisuunnittelustrategioita, jotka voivat sisältää langankehystys-, prototyyppi-, malli-, beetaversioita ja paljon muuta. Tässä opetusohjelmassa luomme malliversion ennen alkuperäisen mallin suunnittelun aloittamista. Käytän harmaita sävyjä, joiden avulla voidaan tunnistaa malli
Kangas
Vuosia aiemmin, kun käyttöjärjestelmiä ja laitteita oli rajoitetusti pääsyä verkkosivustoille, sivun mitat vahvistettiin yhteen tai kahteen kokoon. Nykyään skenaario on täysin erilainen. Loppukäyttäjät pääsevät sivustoille erikokoisissa pöytätietokoneissa, matkapuhelimissa, iPadissa ja tableteissa. Tässä moninaisessa tilanteessa ei ole mahdollista, että kiinnität verkkosivusi tiettyyn kokoon. Jokaiselle laitteelle on kuitenkin joitain teollisuusstandardikokoja. Löydät suosikkikoosi hitaasti tai asiakassi voi ohjata sinulle verkkosivun jäljittelemään kokoja.
Tässä tapauksessa työskentelemme seuraavien ulottuvuuksien kanssa. Älä ole huolissasi korkeudesta, koska se muuttuu ajan myötä. Mitä enemmän sisältöä lisäät verkkosivustoosi, sitä korkeampi on.
Muista, että on yleistä vierittää sivua alaspäin pystysuunnassa, joten et välttämättä kiinnity verkkosivusi tietylle korkeudelle, ellet halua käyttäjän vierittävän kotisivusi Googlena. Mutta ei tarvitse vierittää vaakatasossa. Joten rajoita leveyttä teollisuusstandardien mukaisesti ja älä ole luova vaakavierityksen avulla.
Webissä resoluutio on rajoitettu 72. Viime aikoina iPadsista ja harvoista tableteista löytyy korkeamman resoluution kuvia ja sivuja. Mutta se on harvinainen tapa, ja on parempi pysyä 72: ssä, kun otetaan huomioon Internetin nopeus ympäri maailmaa.
Valitse tiedostot Ctrl + A -komennolla ja piirrä ohjeet tasaisesti koko malliin. Verkkosivusto olisi järjestettävä siististi siten, että jokainen elementti on järjestetty johdonmukaisesti toisiinsa nähden. Ja verkkosivustojen asetteluohjeet auttavat sinua hankkimaan sen helposti.
Valmista makeasi
Asettamalla mallitiedosto alkuperäiseen malliin säästät paljon aikaa. Verkkosivustosi suunnittelusta tulee niin helppoa, että lopulta valmistat kehyksen muutamassa minuutissa. Kuitenkin malli auttaa sinua vain suunnittelemaan kehyksiä. Suunnittelun elementtien loppuun saattaminen yksityiskohdilla, tyyppijärjestelyllä ja kohdistamisella vie enemmän aikaa kuin verkkosivuston asettelun piirtäminen.
Värikaavio ja muut valinnat
Seuraava asia kehyksen valmistamisen jälkeen on valita värimaailma. On kuitenkin parempi saada värit valmiiksi ennen kuin aloitat suunnittelun työskentelyn.
Koko asia juontaa viestin, että saat aseesi valmiiksi ennen suunnittelun aloittamista. Kaikkien, mukaan lukien kuvakkeet, kuvat ja värivalinnat, tulisi olla valmiita ennen työskentelyn aloittamista. Työn organisointi ja suunnittelu säästää enemmän aikaa ja keskittyy suunnitteluun esteettömästi niiden välillä.
Värien valinta voi olla suunnittelijan valinta, jos yritys on uusi ja jolla ei ole aikaisemmin yritysidentiteettiä. Joissakin tapauksissa asiakkaat antavat kuvan siitä, mitä sävyjä he haluavat logon tai taustan olevan. Olemassa olevien yritysten kohdalla, joudut ehkä joutua suunnittelemaan kokonaisen verkkosivuston uudelleen, joudut ehkä valitsemaan samat värit kuin asiakkaan tarpeet.
On olemassa lukuisia verkkosivustoja, joiden avulla voit valita miljoonia värimalleja arkistoista. Kokeile seuraavia verkkosivustoja nauttiaksesi laajasta värivalikoimasta.
Color.adobe.com
Colourlovers.com
Valitsin täällä muutaman sinisen sävyn verkkosivustolle käytettäväksi. Koko verkkosivusto suunnitellaan seuraavan värimaailman mukaisesti. Älä unohda valita kolme tai neljä eri väriyhdistelmää, koska emme tiedä mitä väriasiakas haluaa. Kun asiakas on viimeistellyt värimaailman, tallenna sävyarvot ja varmista, että väreillä on tärkeä rooli jokaisessa organisaation pystysuunnassa. Varsinkin yritysidentiteetissä.
Suunnitteluprosessi
Suunnittelijoidesi jatkamiseen on monia tapoja. Suunnitteluprosessin määrittelemiseen tai seuraamiseen ei ole vaikeaa ja nopeaa verkkosivustojen asetussääntöä, se on enimmäkseen prosessi, jonka suunnittelija valitsee mukavuutensa mukaan.
Jotkut suunnittelijat haluavat rakentaa kokonaiset lohkot ja kehykset ja alkaa työskennellä yksityiskohtien kanssa toisessa vaiheessa, jota seuraa tyyppi ja lopulta kohdistukset ja säädöt. Jotkut haluavat viimeistellä yhden sivun osan kerrallaan ja viedä sen seuraavaan osaan. Seuraamme toista tyyliä.
Viimeistelemme verkkosivuston seuraavissa vaiheissa
- Ylä- ja alatunniste
- Mitä me teemme
- Palvelut
- muoto
- Uutiset
- Alatunniste
Ylä- ja alatunniste
Peukalosääntö otsikkosi tai bannerin mittojen määrittelemiseksi jätetään luovuudelle. Viimeisimpien suuntausten mukaan verkkosivustoilla on valtava kuva, joka peittää koko tietokoneesi näytön. Tyyliä kutsutaan sankarikuvaksi, josta tuli viime aikoina melko suosittu.
Tässä tapauksessa aloitimme bannerin 120 pikselin korkeudella otsikolla ja 550 pikselin korkeudella. Leveyden tulee vastata asiakirjan kokoa.
Yksivärisillä malleilla on tasainen ulkoasu, joka ei sovi suurempien kehysten tai kuvien kanssa. Tasaisen ilmeen välttämiseksi levitin kaltevuuspeitekerroksen bannerin päälle. Se antaa bannerille syvyyden, joka muuttuu hitaasti yhdestä sävystä toiseen.
Seuraavaksi aloimme tuoda logon ja sijoittaa sen otsikon vasempaan yläkulmaan ja toisen isomman logon bannerin keskelle. Voit myös tarkkailla verkkosivuston ulkoasuvektorin muotoja oikeassa yläkulmassa, joita käytetään sosiaalisen median linkkien jakamiseen.
Tässä vaiheessa lopetin tyypin lisäämisen otsikko- ja banneriosaan. Yrityksen nimi, brändiviesti, jossa on linkit ja palvelut, lisätään tekstiin. Voit myös tarkkailla läpinäkyvää painiketta Bannerissa.
Pelkkä teksti tai liian monta tyyppiä ilman erikoisominaisuuksia pilaa verkkosivusi ulkoasua; sivulla tulee pian käyttäjä, joka voi antaa hänen poistua sivustostasi nopeasti. Tutustu bannerin muotoon, jonka lisäin palvelulinkeihin bannerin oikeassa yläkulmassa. Tyyli on yksinkertainen, mutta se täyttää tyhjiön välttäen arkipäivän ilmeen.
Valitse yritykselle sopiva kuva. Internetissä on saatavana miljoonia varastossa kuvia, ja vaatimuksenne vastaavan kuvan löytäminen ei vie liian kauan.
Tapauksessani löysin korkealaatuisen kuvan, joka mielestäni menee hyvin verkkosivustolleni. Minulla ei ole verkkosivustolle yritystoimintaa, joten voin vapaasti valita kuvan, joka näyttää hyvältä banneriviestissä.
Yritä ladata joitain HD-kuvia alla olevista ilmaisista varastossakuvan sivustoista
www.pixabay.com
Sekoittaminen on taidetta, jonka sinun tulee hallita tuottaa kauniita bannereita. Sekoitin täällä kolme kerrosta yllä olevan kuvan mukaisen vaikutuksen saavuttamiseksi. Tässä on mitä tein
- Aseta kuvakerros sinisen värinauhan päälle
- Sijoita Gradient-peittokuva kuvan yläpuolelle
- Muuta kuvan opasiteetti 40 prosenttia ja vaihda sekoitustila eroon.
- Katso yllä olevan kuvan tasopaletti ymmärtääksesi kuinka tasot on pinottu toisiinsa.
Näin otsikko ja banneri näyttävät, kun olemme juuri päättäneet työskennellä sen kanssa. Työskentelemme yhdellä osalla kerralla, ja on aika siirtyä seuraavalle tasolle.
Yhdenmukaisuus ratkaisevan tärkeätä tyypin suhteen; sinulla on idea siitä, miltä sivustosi pitäisi näyttää ja teksti tulisi kohdistaa ennen aloittamista. Tällä tasolla käytin kahta erilaista tekstikehystä, molemmat kohdistettu vasemmalle.
Seuraava vaihe on verkkosivun palveluosan suunnittelu. Suunnittelin harmaasävyisen metallisen tähden esitelläkseen yrityksen erilaisia palveluita. Tähtimerkin käytön tarkoitus on 5 tähden palvelut.
Tekstin kohdistamisessa oppaat ovat parhaita ystäviäsi. Johdonmukaisuus tyypin ja esineiden välillä voidaan saada hyödyntämällä hyvästi valkoista tilaa ja tasapuolisia aukkoja suunnittelun elementtien välillä. Käytin monia verkkosivustojen asetteluohjeita nähdäkseni, että kehyksen kaikkien esineiden tulisi säilyttää oikeat raot ja etäisyydet, jotka tuovat kohtuullisen määrän tilaa.
Suunnittelun seuraava askel on luoda Lomake-kenttä. Toimin tässä tapauksessa vastakohdan menetelmällä, jota käytimme bannerin suunnittelussa. Sijoita kuvakerros yksivärisen kerroksen alapuolelle ja levitä kaltevuuskerros kahden kerroksen päälle paremman ulkonäön saavuttamiseksi. Sekoitus sekoitustiloilla on aina välttämätöntä, kun asetat suurempia kuvia.
Tämän sivuston kuvien valinnalla ei ole tiettyä siihen liittyvää teemaa. Mielestäni tämä kuva auttaa sivua näyttämään paremmalta.
Sijoita kuva värillisen taustakerroksen alle. Voit kiinnittää kuvan tarkalleen värillisen kerroksen kokoon käyttämällä kerrosten peitevaihtoehtoja.
Katso edellä olevan kuvan kerrospaletti. Kiinteä sininen kerros on kuvan päällä, sekoitustila muuttuu päällekkäiseksi ja opasiteetti laskee 65 prosenttiin.
Käytin kaltevuuskarttaa kahden kerroksen päällä. Sekoitusmuoto vaihdetaan sävyyn ja opasiteetti pysyy samana.
Lomakelaatikko on valmis, mikä vie meidät verkkosivuston suunnittelussa neljännen tason loppuun.
Seuraava tasomme koostuu kahdesta yksinkertaisesta tekstikehyksestä. Se muistuttaa verkkosivun toista tasoa ja käytin kohdistettuina kaksi ruutua yläosan tavoin. Yhdenmukaisuuden ylläpitäminen kohdistuksessa on hyvä tapa käyttää valkoista tilaa.
Kun saavutimme sivun viimeisen osan, on aika tarkastella uudelleen alatunnisteen mittoja. Suunnittelijan on suunniteltava alatunnisteen korkeus linkkien perusteella, joita hänen tulisi käyttää siellä. Tässä tapauksessa annoin alatunnistolle korkeuden 170 pikseliä. Leveys pysyy samana kuin verkkosivusto.
Sijoita linkit ja kuvat vaatimuksen mukaan.
Tällä päätimme verkkosivustomme suunnitteluosan. Käytetyt väriyhdistelmät ovat minimaalisia, käytämme suunnittelussa paljon tyhjää tilaa ja lisäsimme yksinkertaisen tekstin minimifontteilla. Tarkoitus on suunnitella puhdas verkkosivu, jonka toivomme täyttyvän.
Katso uudelleen alla olevan sivun suunnittelu
