30 uskumatult lihtsat veebilehte

Mõned kõige kuulsamad lehed on teabega ülekoormatud, kuid ma eelistan vastupidist: lihtsaid.

Ilmselgelt on selle grupi suureks eksponendiks Google oma minimalistliku avalehega alates teekonna algusest, kuid ilmselgelt pole see ainus Internetis pühendunud asjade lihtsaks hoidmisele.

Lihtsad HTML-veebilehtede näited

Kean richmond

Kean Richmond paneb meid nägema lihtsuse mängimist väheste elementidega, kuid väga hästi annavad minimalismile suurepärase tunde. Tema logo vasakus ülanurgas, Twitter ja kontaktiikoonid paremal ja keskel koos silmatorkava tüpograafiaga sellele, mida ta on pühendanud.

Link veebile: Keanrich mond

Alice drougard

Alice drougard Hoidke seda lihtsana ka oma logoga keskel neli vahelehte, et liikuda oma veebisaidi põhilehtede ja korralikult paigutatud fotoseeria vahel, nii et me teaksime kohe, mida teete ja mida teete.

Link veebile: Alice drougard

jonathan ogden

Ogden jätkake mängimist sellega, kui lihtne on teie nimi logona, sotsiaalvõrgustikud, mis asuvad veidi allpool, tähelepanu äratamata, ja nende kujundus töötab nii, et saaksime neist kiiresti läbi minna. Ühel lehel näitab see kõike olulist.

Link veebile: jonathan ogden

Finch

Finch läheb juba teistesse kohtadesse, et mängida tüpograafiat ja neid värvid, mis tähistavad elegantsi ja tarkust, mida ta teeb. Vaid mõne elemendiga jätab ta kogu oma professionaalsuse silmapiirile. See teeb ka selgeks, millised lehed on teid linkinud.

Link veebile: Finch

Erinev disain

See veebisait mängida teistmoodi. Kasutage päisega taustapilti, kust saame minna põhilehtedele, teie telefonile ja linkidele teie sotsiaalsetele võrgustikele.

Link veebile: Erinev disain

vilgas

Kai illustreerib meid oma figuuriga abstraktne kolmnurk ja sobiv värvipalett läheduse andmiseks. Ta pakub ka osa oma elulookirjeldusest väiksema fondiga, kui me tahame temast rohkem teada saada.

Link veebile: vilgas

Vertikaalne aiakujundus

Nagu ka eelmine, on ka Vertikaalse aiakujundus suunatud foto poole, mis näitab kiiresti üks tema parimatest töökohtadest Oslo lennujaamas. Ülaosas on meil päis koos navigeerimisribaga või navigeerimisribaga ja isegi võimalus keelt muuta. Logo asetab selle vertikaalsesse formaati, et anda viimane lihv väga lihtsale lehele.

Link veebile: Vertikaalne aiakujundus

247Grad

247Grad mängida mustvalge ja taustpildiga peaaegu täiesti pime. Päise font, mis on väiksem kui tekst ja päis, on suurtähega tähistatud, et luua üldises kujunduses suur kontrast.

Link veebile: 247Grad

Naudi seda

A. suurepärane tüpograafia võib olla märk autentsusest ja et me teame, mida me teeme. Kui sõnum on otsene, ei pea te midagi rohkemat andma. Nad teevad selle selgeks: neile meeldib luua ilusaid rakendusi ja veebisaite. Nad jätavad projekti ja õppetöö jaoks posti teise linki.

Link veebile: Naudi seda

Allison hou

Allison viib meid enne muid kursusi ja sisaldab rohkem pilte ja see "naiselikum" kirjatüüp. Sama kehtib ka teie põhipildi ja selle päise kohta. Tal on luksus esitada kaart, kus on näidatud trikke ostmiseks.

Link veebile: Allison hou

pixelot

Pixelot on natuke hull, kuid see viitab ka autori loovusele. Kasutage hiire osuti maski loomiseks mis hägustub kõikjal, kus meil on.

Link veebile: pixelot

Lionel scholtes

Kui soovite tehke oma elulookirjeldus veebis vaid midagi muud, Lionel näitab teile samme. Sobiv font, teie foto vasakus ülanurgas, viitab teie sotsiaalsetele võrgustikele ja teie kogemustele. Ainsaks dekoratiivseks elemendiks on need kaks erinevat värvi horisontaalset joont.

Link veebile: Lionel scholtes

Elegantsed kajakad

Me tuleme tagasi minimalismi elegantsini ja need suured tühjad kohad. Ühelt poolt on päis ülejäänud elementidest väga kaugel ja teiselt poolt need elemendid, mis on kujundatud nii, et loovad nende vahel suurepärase visuaalse harmoonia.

Link veebile: Elegantsed kajakad

Lebensraum

Nagu näite kõigist näidetest, on see oluline päiste vahelehed, et minna erinevatele lehtedele veebisaidilt. Tüpograafial on suur tähtsus, mängige ühega päise jaoks ja teisega tekstiga sans serifiga, mis teeb suurepärast tööd.

Link veebile: Lebensraum

PinkPoint

Värvide kontrastsus viib meid kõigi vaadete veidi keerukama veebi juurde. Kõik need põhielemendid pole puudu mängida seekord taustpildi gradiendidega ja nende kahe sektsiooniga, millel on põhipildi gradiendi põhivärvid.

Link veebile: PinkPoint

IWC

Suurepärane foto koos hästi valitud kirjatüüp ja "kangelase" element saate sellele veebis anda. Liuguriga näitab see, et osa teosest on oma kontseptsioonilt üsna lihtne.

Link veebile: IWC

Haki karbonaad

Digitaalne illustratsioon viib meid Chop Chopi juurde see pilt, mis sööb ära kogu selle visuaalse kohaloleku. Päise sinine värv annab talle võimaluse luua kromaatilised väärtused, mis on kooskõlas kogu veebi projitseeritud pildiga.

Link veebile: Haki karbonaad

7Mänd

7Pine mängib rohelisega, et olla kodutaldriku suur peategelane. Ülejäänud komponeerib selle pilt rohelise rohelise ja lihtsa päisega mis tahab logost märkamatuks jääda.

Link veebile: 7Mänd

Summa

Summa viib meid teistesse suundadesse. Mängige muinasjutulise mustvalgega, mis on väga loominguline illustratsioon ja see sobib koos ülejäänud elementide ja kahe teise illustratsiooniga, et luua rohkem kui huvitav maastik. Näide veebisaidi loomiseks, mis eristub teistest.

Link veebile: Summa

Mütsikast

Sinine on sellel veebisaidil domineeriv värv, milles puuduvad puuduvad valgega täielikult valgustatud pildid ja milline oleks mäng selle saidi koostaja 3D-vormingus mis liigub meie liikumisel.

Link veebile: Mütsikast

Kara lyte

Kara läheb lihtsus ja minimalism oma loomuliku ja ilusa kohaloluga oma fotol. Ülejäänud on tekst, mis tuleb koos päise põhielementidega ja selle avamiseks hamburgerinupuga.

Link veebile: Kara lyte

Instrinsic Studio turundus

Es lihtsaimast veebist aga see näitab meile, mis on ajaveebi tegemine. Punane ja must on peategelased väga "ajaveebi" saidil.

Link veebile: Instrinsic Studio turundus

Kuidas luua lihtsat veebisaiti HTML-is

Me õpetame teid looge HTML-is lihtne veebisait et teaksite selle koostamise kõige põhilisemaid elemente. Vaja on veebihosti, kuhu saaksime koodi ja mõned näpunäited CSS-i laadida, kuid olge nüüd, need on põhimõtted, mille abil oma teekonda HTML-is alustada.

Mõnda näinud lihtsad veebinäited Millega saate end piisavalt motiveerida, et ise oma kujundusi teha, ilma et peaksite liiga palju murdma. Mõnikord loob lihtne parema efekti kui keeruliseks muutmine meid keerulistes asjades. Näete, et enamikul juhtudel toimib lihtne väga hästi. Tee seda.

Lihtsa veebisaidi loomine HTML-is on lihtsam kui esialgu võib tunduda. Veebisait koosneb päisest, kehast või sisu ning jalus või jalus põhielementidena. Saame neid klassifitseerida nii:

• Dokumendid: kõik dokumendid, mille me loome, tuleb teha a-ga . Avame a-ga ja suletakse alati tähega
• Keha või keha: dokumendi nähtav osa jääb vahele Y
• Päised: neid tunnevad H1, H2, H3 ... Alustame a-ga ja lõpetame a . Sees olev tekst kuvatakse päisena ja sõltuvalt numeratsioonist teeb see seda väiksemas või suuremas suuruses.
• Lõigud: lõik on lisatud a ja sulgeb
• Lingid: selgeim näide oncreativosonline.org/»> Link aadressile Creativos Online
• Imagery: määratleme need sildi järgi . Näiteks võiks olla . Kutsume jutumärkide vahele pilti ja kasutame alternatiivse teksti jaoks alternatiivset teksti, mis on SEO jaoks hädavajalik.
• Nimekirjad: loendid määratletakse räpane ja koos korraliku eest. Loendi üksusi kasutatakse koos . Pidage alati meeles, et sulgege need baariga.

Nende elementidega saame lihtsa veebisaidi loomise alus nagu näete nende suures koguses, mida õpetame teile järgmises osas. Oletame, et semantiline struktuur koos kõige olulisemate elementidega näeb välja selline:

• Päis koos navigeerimisribaga saidi erinevate lehtede jaoks.
• Artikkel või keharuum milles saame luua ajaveebipostituse, lisada oma CV või pildi.
• Külgriba või külgriba lisateavet.
• Jalus või jalg, kuhu paigutame lingid nii saidi kõige olulisematele lehtedele kui ka sotsiaalvõrgustike ikoonidele (alati näiteks).

Allpool toodud näidetes on kõik põhineb lihtsal, kuid elegantsel logol, päis, kuhu nad paigutavad navigeerimise saidi erinevatele lehtedele, kesksele ruumile, kus domineerib tekst või pilt, ja jalas koos eelmises lõigus nimetatud elementidega.

Soovitame seda ära murra pead ja mine lihtsa juurde. Peamine on see, et neid alasid eristatakse teistest visuaalse sekundi jooksul. Aja jooksul suudame ennast keerulisemaks muuta ja töötada rohkem muudes ruumides.

See on selge näide HTML-koodist kõige olulisemate elementidega:

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

Nende HTML-koodiridadega oleks meil lõi lehe pealkirja kõigepealt päises koos, antud juhul «Semantic HTML», sulgeksime mõlemad pealkirja , päis koos ja me annaksime võimaluse keha avamiseks .

Meil oleks esimene päis H1-s koos selle sulgemiseks ja läheksime loendisse, mis aitaks meil luua navigeerimisriba meie saidi erinevate lehtede jaoks. Paneme nimekirja kinni , sulgeme ja lõpuks HTML-dokument koos .

Lõpetama, avage dokument alati selle sulgemiseks kaldkriipsuga kogu koodi lõpus. Pärast dokumendi avamist kasutatakse alati viidet keelele, milleks on hispaania täht "es" ja täht .

On oluline, et vaataksite koodi hoolikalt ja alati avate funktsiooni, sulgege see ribaga vastav

Natuke CSS-i

Läheme natuke CSS-i, kuid möödaminnes nii, et saaksite aru kuidas HTML-i kujundada. Oletame, et CSS ja HTML käivad käsikäes nende lihtsate veebisaitide loomiseks, mille leiate allpool.

Kui ühest küljest on meil HTML-i semantiline kasutamine päise, keha või keha koos artikli või pildi ja jalusega, CSS-is kasutaksime tuvastamiseks funktsiooni «Div» kõigile nendele ruumidele, et hiljem kujunduses vajalikke muudatusi rakendada.

Midagi nii lihtsat kui:

Kuigi saame stiile rakendada Div-ga, abiks on sobiv ja täiuslik struktuur nii et veebirobotid saaksid meie sisu suurepäraselt "lugeda", nii et kui järgime seda põhistruktuuri, on meil kõigepealt suurepärane töö ja baas.

Un lihtne CSS-koodi näide:

h1 {
värv: valge;
text-align: keskus;
}

Nimetame H1 ja teksti paneme selle valge värviga: valge; ja joondame selle keskele tekstiga joondusega. Pärast H1 kõne avamist sulgege alati nurksulgudes.

Päise foto Greg rakozy