Puhta veebisaidi paigutuse loomine Photoshopis - veebisaidi kujunduse kujundamine on midagi enamat kui värviliste piltide korraldamine ja tekstiraamidesse mõne teksti täitmine. See on lähenemisviis, mis räägib teie kliendi ärist. Veebisaidi värvid ja graafika määratlevad ettevõtte olemuse, samas kui veebisaidi kujunduse kvaliteet ja lihtne navigeerimisvoog peaksid siduma kasutaja organisatsiooniga ja muutma ta potentsiaalseks kliendiks.
Kõigile wannabe veebidisaineritele on nägusa ja hõlpsasti juurdepääsetava veebisaidi kujundamine kohustuslik. Selle õpetuse eesmärk on tutvustada lihtsa ja puhta veebisaidi paigutuse loomise protsessi otse nullist. Protsessi käigus õpitakse õppima olulisi punkte, mis aitavad teil veelgi rohkem teadmisi veebikujunduse kohta saada. 
Enne veebisaidi kujunduse kujundamist kirjutage oma nõuded üles
Enne kui hakkate veebisaidi kujundust kavandama, peaksite teadma, kuidas teie veebisait välja näeb ja mis on need teemad, mida peaksite veebisaidile kaasama. Äärmiselt oluline on koostada loetelu veebisaidi paigutuse elementidest, mida teie klient oma veebisaidil vajab. Lisaks on hea disaineril kogu veebisaidi maketi ettevalmistamine enne lõpliku malli kallale asumist.
Erinevad projekteerimisettevõtted kohandavad erinevat taset eelprojekteerimise strateegiaid, mis võivad sisaldada traadi raamimist, prototüüpimist, maketi, beetaversioone ja palju muud. Selles õpetuses loome enne algse malli kujunduse käivitamist maketi versiooni. Kasutan halli varjundit, mis võimaldab tuvastada maketiploki
Lõuend
Aastaid enne seda, kui veebisaitidele pääsemiseks oli väga vähe operatsioonisüsteemi ja piiratud seadmeid, määrati lehe mõõtmed ühe või kahe suurusega. Täna on stsenaarium täiesti erinev. Lõppkasutajad saavad juurdepääsu erineva suurusega lauaarvutite, mobiiltelefonide, iPadi ja tahvelarvutite saitidele. Selles mitmekesises olukorras pole võimalust, et saate oma veebisaidi kindla suurusega kinnitada. Kuid iga seadme jaoks on olemas mõned standardsed standardisuurused. Leiate aeglaselt oma lemmiksuuruse või teie klient võib suunata teile suuruse matkimiseks veebisaidi.
Sel juhul töötame järgmiste mõõtmete kallal. Ärge muretsege kõrguse pärast, kuna see aja jooksul muutub. Mida rohkem sisu oma veebisaidile lisate, seda kõrgemaks see muutub.
Pidage meeles, et tavaline on lehe vertikaalne kerimine allapoole, nii et te ei pruugi oma veebisaidi kindlale kõrgusele kinnituda, kui te ei soovi, et kasutaja keriks teie avalehel Google'ina. Kuid horisontaalselt pole vaja kerida. Seega piirake oma laiust vastavalt tööstusstandarditele ja ärge looge horisontaalse kerimisega.
Veebi jaoks on eraldusvõime piiratud 72. iPadi ja mõne tahvelarvuti kohta on leitud kõrgema eraldusvõimega pilte ja lehti. Kuid seda juhtub harva ja parem on jääda 72-le, kui arvestada Interneti-kiirust kogu maailmas.
Valige failid, kasutades käsku Ctrl + A, ja joondage juhised kogu malli ulatuses võrdselt. Veebisait peaks olema korralikult korraldatud ja kõik elemendid peaksid olema üksteisega sidusalt paigutatud. Ja veebisaidi paigutuse juhised aitavad teil seda hõlpsalt hankida.
Pange oma makett valmis
Makettifaili algsele mallile paigutamine aitab säästa palju aega. Veebisaidi kujundamine muutub nii lihtsaks, et saate raamistiku mõne minuti jooksul valmis teha. Kuid makett aitab teil ainult raame kujundada. Kujunduselementide detailide, tüübi paigutuse ja joondamisega komplekteerimine võtab rohkem aega kui veebisaidi kujunduse joonistamine.
Värviskeem ja muud valikud
Pärast raamistiku valmimist on järgmine asi värviskeemi valimine. Kuid parem on värvid valmis saada enne disaini kallal töötamist.
Kogu asi langeb sõnumile, et enne relvade kavandamist saate oma relvad valmis saada. Kõik, sealhulgas ikoonid, pildid ja värvivalikud, peaks enne töö alustamist olema valmis. Töö korraldamine ja planeerimine säästab rohkem aega ja keskendub disainile, ilma et nende vahel oleks takistusi.
Värvide valimine võib olla kujundaja poolt valitud, kui ettevõte on uus ja tal pole varem ettevõtte identiteeti. Mõnel juhul annavad kliendid ettekujutuse sellest, milliseid toone logo või taust peaksid olema. Olemasolevate ettevõtete puhul, kus peate võib-olla terve veebisaidi ümber kujundama, peate võib-olla valima samad värvid, mis vastavad kliendi vajadustele.
On palju veebisaite, mis aitavad teil valida arhiividest miljoneid värvilahendusi. Laia värvivaliku valiku nautimiseks proovige järgmisi veebisaite.
Värv.adobe.com
Colourlovers.com
Siin valisin veebisaidi jaoks paar sinist tooni. Kogu veebisait kavandatakse järgmise värvilahenduse piires. Ärge unustage valida kolm või neli erinevat värvikombinatsiooni, kuna me ei tea, millist värvi klient eelistab. Kui klient on värviskeemi lõpetanud, salvestage varju väärtused ja veenduge, et värvid mängivad olulist rolli organisatsiooni igas vertikaalis. Eriti korporatiivse identiteedi osas.
Projekteerimisprotsess
Oma disainerite jätkamiseks on palju võimalusi. Projekteerimisprotsessi määratlemiseks või järgimiseks pole ühtegi kiiret ja kiiret veebisaidi paigutuse reeglit, enamasti on see protsess, mille disainer valib endale sobivaks.
Mõned disainerid soovivad ehitada terved plokid ja raamid ning hakata teises etapis detailide kallal töötama, millele järgneb tüüp ning lõpuks joondamine ja reguleerimine. Mõnele meeldib lõpetada üks lehe osa korraga ja viia see järgmisele osale. Järgime teist stiili.
Lõpetame veebisaidi järgmiste sammudega
- Päis ja jalus
- Mida me teeme
- Teenused
- Vorm
- Uudised
- Jalus
Päis ja jalus
Rusikareegel päise või ribareklaami mõõtmete määratlemiseks jäetakse teie loovuse juurde. Viimaste suundumuste kohaselt kuvatakse veebisaitidel tohutu pilt, mis katab kogu teie arvuti ekraani. Stiili nimetatakse kangelaspildiks, mis sai hiljuti üsna populaarseks.
Sel juhul alustasime 120 piksli kõrguse päisega ja ribaga 550 piksli kõrgusega. Laius peaks vastama dokumendi suurusele.
Ühevärvilistel disainidel on tasane välimus, mis ei lähe suuremate raamide või piltide korral hästi kokku. Lameda väljanägemise vältimiseks kandsin ribale ülaosale gradiendi ülekattekihi. See annab ribareklaamile sügavuse, mis muutub aeglaselt ühelt varjult teisele.
Järgmisena hakkasime logot importima ja panime selle päise vasakpoolsesse ülanurka ja ribareklaami keskele veel ühe suurema logo. Samuti saate paremas ülanurgas jälgida veebisaidi paigutuse vektorkujusid, mida kasutatakse sotsiaalse meedia linkide jagamiseks.
Selles etapis lõpetasin tüübi lisamise päisesse ja ribareklaami. Teksti lisatakse ettevõtte nimi, kaubamärgisõnum koos linkide ja teenustega. Samuti saate ribalaual jälgida läbipaistvat nuppu.
Lihttekst või liiga suur tüüp, ilma erifunktsioonideta, rikub teie veebilehe ilmet; toob leht peagi kasutaja ära, mis võib lasta tal teie saidilt kiiresti lahkuda. Vaadake vektori kuju, mille lisasin teenuste lingidele riba ülaosas paremal. Stiil on lihtne, kuid täidab tühimiku, vältides ilmalikku ilmet.
Valige ettevõttele sobiv pilt. Veebis on saadaval miljoneid põhipilte ja teie nõudmistele vastava pildi leidmine ei võta liiga kaua aega.
Minu puhul leidsin kvaliteetse pildi, mis minu arvates sobib minu veebisaidiga hästi. Mul ei ole veebisaidil ettevõtlusega seotud teemat, seega võin vabalt valida pildi, mis ribareklaamil hea välja näeb.
Proovige alla laadida mõned HD-kujutised tasuta laoseisu saitidelt
www.pixabay.com
Segamine on kunst, mida peaksite valdama ilusate ribareklaamide valmistamiseks. Siin segasin kolm kihti, et saavutada ülaltoodud pildil näidatud efekt. Siin ma tegin
- Asetage pildikiht sinise värvi ribale
- Asetage Gradienti ülekate pildi kohale
- Muutke pildi läbipaistmatust 40 protsenti ja muutke segamisrežiim erinevuseks.
- Vaadake ülaloleval pildil asuvat kihtide paletti, et mõista, kuidas kihid üksteise külge virnastatakse.
Nii näeb välja teie päis ja ribareklaam, kui just selle kallal töötasime. Töötame ühe osaga korraga ja on aeg liikuda järgmisele tasandile.
Joondamine on tüübi puhul ülioluline; teil on idee, kuidas teie sait peaks välja nägema, ja tekst tuleks enne selle käivitamist joondada. Sellel tasemel kasutasin kahte erinevat tekstiraami, mõlemad joondatud vasakule.
Järgmine samm on veebilehe teenuste osa kujundamine. Kujundasin halli varjundiga metalltähe, et tutvustada ettevõtte erinevaid teenuseid. Tärnisümboli kasutamise eesmärk on 5-tärni teenused.
Teksti joondamisel on juhendid teie parimad sõbrad. Tüübi ja objektide sidususe saab, kui kasutate hästi ära tühja ruumi ja võrdsed lüngad kujunduselementide vahel. Kasutasin paljusid veebisaidi paigutuse juhiseid, et näha, et kõik kaadris olevad objektid peaksid säilitama õigeid lünki ja vahekaugusi, mis annavad õiglase hulga valget ruumi.
Järgmine samm meie kujundamisel on välja Vorm loomine. Sel juhul töötan vastupidiselt sellele meetodile, mida me ribareklaami kujundamisel kasutasime. Kujutise kihi asetame ühevärvilise kihi alla ja parema väljanägemise saavutamiseks rakendame kahe kihi peale gradientkihi. Suuremate piltide paigutamisel on segamisrežiimidega mängimine alati hädavajalik.
Selle saidi piltide valimisel pole sellega seotud konkreetset teemat. Ma arvan, et see pilt aitab saidil paremini välja näha.
Asetage pilt värvilise taustakihi alla. Kujutise fikseerimiseks täpselt värvilise kihi suurusele kasutage kihi maskeerimise võimalusi.
Vaadake ülaltoodud pildi kihtide paletti. Tahke sinine kiht on pildi ülaosas, segamisrežiim muudetakse ülekatteks ja läbipaistmatus väheneb 65 protsendini.
Kasutasin kahe kihi peal olevat gradientkaarti. Segamisrežiim muudetakse tooni ja läbipaistmatus jääb samaks.
Vormikast on valmis, mis viib meie veebisaidi kujunduses neljanda taseme lõppu.
Meie järgmine tase koosneb kahest lihtsast tekstiraamistikust. See sarnaneb veebilehe teisele tasemele ja ma kasutasin kahte kasti ülaosaga sarnaselt. Joondamisel sidususe säilitamine on hea viis valge ruumi kasutamiseks.
Lehe viimase osa juurde jõudes on aeg vaadata uuesti jaluse mõõtmeid. Kujundaja peab jaluse kõrguse kavandama vastavalt linkidele, mida ta peaks seal kasutama. Andsin sel juhul jaluse kõrguseks 170 pikslit. Laius jääb samaks kui veebisait.
Paigutage lingid ja pildid vastavalt teie nõudele.
Sellega lõpetasime oma veebisaidi kujundamise osa. Meie kasutatud värvikombinatsioonid on minimaalsed, me kasutame oma kujunduses palju tühja ruumi ja lisasime lihtsa teksti minimaalsete fondidega. Kavatsus on kujundada puhas veebileht, mis loodetavasti täidetakse.
Vaadake veel kord kogu lehe kujundust
