Kuidas veebisaiti paigutada ja kujundada (ilma igasuguste kujundamisoskusteta)

Kui proovite luua klientide jaoks vabakutselisi veebisaite või isegi lihtsalt oma portfoolio üles ehitada, võisite kokku puutuda selle mõttega:

Kuidas luua veebisaiti, kui teil pole veebidisaini oskusi?

Siin on mõned võimalused:

  • Võite oma kujunduse loomiseks palgata veebidisainerid, kuid (head) disainerid pole odavad.
  • Võiksite leida odavat disainerit Fiverrist või Upworkist, kuid teate, et see võib olla riskantne.
  • Või võite alla laadida tasuta või esmaklassilise teema või malli - kuid mõnikord ei tee nad kõike, mida soovite.

Veel üks võimalus on õppida veebisaitide kujundamise ja kujundamise põhioskusi ning luua oma esiosa.

(Spoiler: kas soovite edasi liikuda ja näha valmistoodet? Klõpsake siin.)

Nüüd ei saa te sellest artiklist lugemiseks kulunud aja jooksul suurepäraseks kujundajaks. Ja keerukate veebisaitide puhul peate võib-olla tegema koostööd professionaalse disaineriga.

Kuid usun, et saate teada, kuidas kavandada ja kujundada lihtsaid veebisaite, mis töötaksid enamiku väikeettevõtete jaoks.

See meetod hõlmab:

  • Veebisaitide visuaalse koostamise põhialuste õppimine
  • Olemasolevate veebikujunduste uurimine, et saada inspiratsiooni ja ideid enda jaoks.

See on tegelikult strateegia, mida kasutasin oma veebisaidi loomiseks! Tõsi küll, see on üsna lihtne disain, mitte midagi liiga ulmelist. Kuid mõnikord on kõik, mida vajate, lihtne.

Kui olete teadnud veebi paigutuse ja kujundamise põhitõed, saate luua kohandatud veebisaite, mida saate kasutada oma portfellide ja vabakutseliste klientide jaoks.

Ja muidugi annab iga teie loodud veebisait teile kogemusi. Aja jooksul saate oma käsitöö jätkamise ajal luua üha keerukamaid kujundusi.

Selle protsessi peamised sammud on järgmised:

  • Valige oma veebisaidi põhitõed
  • Planeerige oma veebisaidi paigutus
  • Pange kujundus kokku
  • Valmistage lõpptoode välja

Igat sammu toetavad uuringud - teiste veebisaitide vaatamine, et näha, mida nad teevad, ja nende osade väljavõtmine, mida soovite oma veebisaidi jaoks uuesti kasutada.

Üks oluline märkus: ma ei poolda sugugi seda, et varastaksite CSS-i või pilte, mis pole teie oma. (Esiteks ei õpi te midagi kopeerimise ja kleepimise tööga.)

Idee on saada loomingulisi ideid ja kontseptsioone ning kasutada neid millegi sarnase loomiseks.

Valige oma veebisaidi põhitõed

Enne kui hakkate värve või fonte valima, vastame mõnele üldisele küsimusele selle veebisaidi kohta:

1. Millist ettevõtet veebisait reklaamib?

Pitsakoht, fotograafi stuudio või raamatupood? Veebisait võib kasu tuua mis tahes ettevõttele, seega võite valida ükskõik mida.

Siin valime oma eesmärkidel väljamõeldud kohviku nimega Central Coffee. Sest kõigile meeldib kohv, eks?

2. Milliseid lehti sellel veebisaidil on?

Mõned tavalised lehed on avaleht, umbes leht, kontaktleht ja konkreetsele sektorile vastavad lehed.

Parim viis veebisaidi lehtede ja muude üldiste struktuuriliste aspektide mõistmiseks on teha kiireid veebipõhiseid uuringuid.

Uurige olemasolevaid veebisaite

Vaadake ka teisi olemasolevaid veebisaite, kus on sarnaseid ettevõtteid. Vaadake neid veebisaite 3–4 ja vaadake, millised lehed neil on.

Proovige märgata veebisaidi kujundamist ja tehke märkmeid järgmiste teemade kohta:

  • Milliseid lehti sellel veebisaidil on,
  • Milline on üldine stiil,
  • Kui lihtne on asjades navigeerida ja neid leida,
  • Ja miski muu, mis teid huvitab.

Üks hea koht näidisveebisaitide leidmiseks on Teemamets. Sellel on palju tasuta ja esmaklassilisi veebisaitide malle ja WordPressi teemasid. Ja kui peate kinni populaarsematest teemadest, siis teate, et üldiselt on need heade kujunduste näited.

Siin on üks kohviku näide teemal, mille leidsin.

The7

Lehed:
Ühel lehel olev veebisait jaotistega: Avaleht, Teave, Asukoht, Pakkumised, Menüü, Uudised, Press, Blogipostitused

Stiil:
Moodne ja puhas, heade fotodega

Navigeerimine:
Lihtne navigeerida

Ja siin on mõned veebisaidid, mille leidsin otsingust “kohvik Chicago”:

Ussiaugu kohv

Lehed:
Koduleht, ajaveeb, asukoht / kontakt, töövõimalused

Stiil:
Omamoodi kaasaegne; fotod poest on nostalgilisemad

Navigeerimine:
Pole kohe ilmne, et see on kohvik. Saidil on natuke keeruline navigeerida.

Kohvikute tänavad

Lehed:
Ühe lehe veebisait, jaotised on järgmised: kodu, kohvik (umbes), menüü, röstimine, ajamasin (mahlad), kontaktvorm

Stiil:
Lihtne ja kaasaegne (ruut)

Navigeerimine:
Päris lihtne navigeerida. Mulle meeldib kleepuv menüüriba ülaosa, mis kerib teid iga jaotiseni.

Ehitage kohvi

Lehed:
Ühe lehe veebisait, jaotised on järgmised: avaleht, teave, tundide arv, asukoht, pood, toitlustamine, üritused, kontakt

Stiil:
Lihtne disain on täise laiusega fotode kombinatsioon valge tausta ja teksti vahel.

Navigeerimine:
Päris lihtne navigeerida

Sawada kohv

Lehed:
Koduleht, umbes, toit ja joogid, ajakirjandus, kontaktid ja tunnid, meie restoranid, töökohad

Stiil:
Kujundus seisneb enamasti fotograafias ja tekst tundub olevat peaaegu järelemõeldud

Navigeerimine:
Natuke keeruline on navigeerida - ma peaaegu ei näinud paremas nurgas hamburgeri menüüd.

Kirjutage üles märkused oma veebisaidi kohta

Nüüd, kui oleme vaadanud mitut kohvikute veebisaiti, on meil palju parem ettekujutus ühistest funktsioonidest. Ja meil on mõned ideed selle kohta, mis meie arvates töötab ja mis ei toimi.

Teie uurimistöö põhjal võite nüüd hakata märkmeid oma saidi jaoks üles kirjutama.

Central Coffee kohta arvan, et jätkame lihtsa ühelehelise veebisaidiga, millel on järgmised jaotised:

  • Päis
  • Kodu
  • Umbes
  • Menüü
  • Asukoht / kontakt
  • Jalus

Planeerige oma veebisaidi paigutus

Nüüd, kui oleme välja mõelnud saidi luustiku, täpsustame iga lehe või jaotise elementidega, mida tahame neisse panna. Paigutust, mille lõpuks valmistame, nimetatakse ka juhtraamiks.

Raamraamis ei kavanda me täpselt midagi, see tähendab, et meil pole veel fonte, värve ega fotosid. Me lihtsalt nuputame, millist sisu me soovime, ja umbkaudu seda, kus see lehel asub. Praegu on see pigem nagu joonis või diagramm.

Päis

Mulle meeldib ülemine navigeerimisriba, mis asub Seitsme kohvi demo lehel, ja Caffe Streetsi veebisait.

Kuid mõlemal lehel on see keskel ja ma pigem tahaksin, et see oleks joondatud vasakule, esiküljega logo ja pärast seda.

See on töölauaversiooni jaoks. Tahvelarvutite ja mobiiltelefonide jaoks on meil päises vaikimisi lihtsalt logo ja hamburgeri menüü.

Hamburgeri klõpsamisel avaneb lõuendi menüü, mis libiseb paremale, et kuvada jaotise navigeerimine.

Kodu

Kuna see on üheleheline sait, on „avaleht” see, mida te alguses veebisaidi laadimisel ekraanil näete. Ja mulle meeldib, kuidas Seitsmel Kohvil on nime all väike sildike.

Arvan, et siin on mul taustal pilt (näiteks Build Coffee), mille peal on tekst. See on sama nii lauaarvutis kui ka mobiilis.

Umbes

Kõigil veebisaitidel on lühike jaotis Teave, mõnel fotod. Panen lõigu kohviku kohta ja lisan ka mõned fotod kaupluse sisemusest, et ahvatleda kasutajaid külla tulema.

Menüü

Kõik veebisaidid käsitlevad menüüsid erinevalt:

  • Seitse kohvi sisaldab menüüelemente koos hindadega,
  • Caffe Streetsil on lihtsalt üksuste loetelu,
  • ning Build ja Sawada lingivad menüü PDF-idesse.

Isiklikult ma vihkan oma telefoni veebisaiti sirvides ja pean alla laadima PDF-i. Seega kavatsen jääda lihtsustatud menüüsse koos jookide ja toitudega ning lisada mõned fotod.

Asukoht / kontakt

Soovin paigutada veebisaidi alaossa asukoha, töötunnid ja kontaktteabe. Ma arvan, et kasutajad alustavad saidi ülaosast ja kerivad oma tee alla.

Tegevuskõne allosas vastatakse küsimusele “mis nüüd?” See aitab külastajatel midagi ette võtta, nimelt saada kohvikusse suunajuhised ja loodetavasti külastada!

Jalus

Jalus on üsna minimaalne. See on lihtsalt väike riba, kus on autoriõiguse teave.

Täielik raamiraam

Siin on töölaua täielikud kaadrid ja veebisaidi mobiiliversioon. Lõin need tasuta veebitööriista Mockflow abil. Nad võimaldavad teil luua ühe projekti tasuta ja kui soovite rohkem kui ühte projekti, on nad tasunud plaane.

Seda on üsna lihtne kasutada ja mulle meeldib visandlik stiilivalik, sest see on lõbus

Otsustage peamised disainilahendused

Jällegi, me ei kavatse teha ülimalt detailset ja väljamõeldud stiili. Peame siiski mõned põhitõed välja mõtlema. Asjad nagu:

Värviskeem

Värviskeem on lihtsalt erinevad värvid, mida kasutate veebisaidil. Mõelge sellele nagu oma maja värvimine ja kaunistamine. Tavaliselt soovite enamiku ruumide jaoks jääda neutraalsete toonidega, nagu hallid ja valged. Ja üks või kaks erksavärvilist värvi oluliste elementide jaoks, mida soovite välja hüpata, nagu lingid ja nupud.

Kui vajate värvi inspiratsiooni, on Canval mõned värvipalettide näidised, mida saate proovida.

Central Coffee veebisaidi jaoks kavatsen kasutada selle Canva lingi sügiskollektsiooni - tegemist on pruunide ümber sooja värvipaletiga.

Proovin esile kutsuda seda nostalgilist ja hubast tunnet, mis on seotud kohvikutega.

Fondid

Veebisaitide kaudu tagasi minnes kasutavad nad kõik sans-serif-fonti (tähed, millel pole “serif”, või lõpusiribid nagu kirjutusmasinatekst).

Ma valiksin suurema osa teie teksti jaoks lihtsa fondi ja siis saate pealkirjade ja pealkirjade jaoks kasutada raskema kaaluga fontit pisut rohkem.

Google Fonts on suurepärane koht fontide otsimiseks, mida saate oma veebisaidile tasuta laadida. Ärge lihtsalt hankige liiga palju, sest iga fondipere, kaal ja stiil lisavad saidile lisakoormust.

Pildid / Fotograafia

Valige üldine stiil või meeleolu, mis sobib veebisaidi ettevõtte tüübiga. Kohvikusse tahaksid üldiselt minna kutsudes pilte, millel on pehme valgus, hubane või nostalgiline sisekujundus, kohvikus vestelda ja lõõgastuda ning pilte söökidest ja jookidest.

Illustratsioonide ja logode jaoks on mõned tasuta veebipõhised graafilise disaini tööriistad koos piltidega, mida saate oma veebisaidil kasutada. Mõned näited:

  • Lõuend
  • Vectr
  • Snappa

Koostage veebisait

Nüüd on meil juhtmeraamid, mis räägivad meile üldiselt, kuidas kõik on välja pandud. Ja meil on oma disaini viited, mis aitavad esiotsa stiile suunata.

Kuna meil pole üksikasjalike PSD-de loomiseks mõeldud disainerit, asume lihtsalt edasi ja alustame veebisaidi loomist just koostatud juhtraamide põhjal.

Tavaliselt lähenen veebisaidi esiosa loomisele järgmiselt:

  1. Seadistage veebisaidifailid
  2. Kaustade ja failide loomine ja struktureerimine.
  3. Hankige ülesande jooksja üles ja käivitage. (Ma kasutan selle projekti jaoks Gulpi.)
  4. Looge iga malli jaoks eraldi HTML-fail.

Seejärel tehke iga HTML-malli jaoks järgmised toimingud:

  1. Looge skeleti struktuur HTML-i põhielementidega.
  2. Ehitage lehe elemendid ükshaaval välja.
  3. Lisage iga elemendi jaoks CSS-i stiilid, veendudes esmalt, et iga sektsioon on õigesti paigutatud.
  4. Kontrollige, kuidas leht brauseris välja töötab, jätkates paranduste tegemist.

Veenduge, et teie veebisait oleks reageeriv

Saidi ehitamise ajal on üldiselt hea mõte kontrollida, kas teie stiilid näevad lauaarvutites, tahvelarvutites ja mobiiltelefonides sujuvat.

Töölaua stiile saate hõlpsalt kontrollida oma arvutis erinevate brauseritega. Mobiili jaoks saate kasutada Chrome'i arendaja tööriistu, mis jäljendavad erinevate mobiilseadmete veebisaite.

Pidage meeles, et ükski emuleerimisriist ei ole 100% täpselt sama, mida tegelik telefon või tahvelarvuti näeb. Nii et oma stiilide testimisel peate lõpuks seda kontrollima päris telefonist, kui veebisait on Internetis.

Siin on mõned seadmeemulaatorid, mida saate kasutada veebisaidi kuvamise testimiseks:

  • Responsinator.com (tasuta)
  • Ekraanilipp Quirktools poolt (tasuta)
  • Browserstack (tasuline) - Browserstack võimaldab teil virtuaalseid masinaid testida tegelikes seadmetes.

Valmistoode!

Siin on ekraanil ekraanil valmis Central Coffee'i veebisait:

Saate enda jaoks tõelist saiti vaadata minu lehelt Github.io.

Ja nii ma kujundasin ja ehitasin veebisaidi, ilma et oleksin pidanud disainerit palkama.

Loodetavasti leidsite sellest postitusest abi! Andke mulle teada kõigist mõtetest, mis teil on allolevates kommentaarides.

Kas teile meeldis see artikkel? Vajutage (või hoidke seda all) plaksutusnuppu , et ka teised inimesed leiaksid selle!

Kas olete huvitatud koodide õppimisest? Kirjutan oma saidil coder-coder.com õpetusi ja muid artikleid veebiarenduse õppimise kohta.

Uute artiklite e-kirjade saamiseks registreeruge siin.