30 neįtikėtinai paprastų tinklalapių

Kai kurie žinomiausi puslapiai yra labai perkrauti informacija, bet man labiau patinka atvirkščiai: paprasti.

Akivaizdu, kad puikus šios grupės eksponentas yra „Google“ su minimalistiniu pagrindiniu puslapiu nuo pat savo kelionės pradžios, tačiau akivaizdu, kad ne vienintelis internete yra įsipareigojęs išlaikyti dalykus paprastus.

Paprasti HTML tinklalapių pavyzdžiai

Keanas Richmondas

Keanas Richmondas leidžia suprasti, kaip paprasta žaisti su keliais elementais, bet labai gerai suteikti puikų jausmą minimalizmui. Jo logotipas viršutiniame kairiajame kampe, „Twitter“ ir kontaktų piktogramos dešinėje ir centre su ryškia tipografija tam, kas jam skirta.

Nuoroda į internetą: Keanrichas mondas

Alisa drougard

Alisa drougard Paprasčiau taip pat įdėkite savo logotipą centre keturi skirtukai, skirti pereiti tarp pagrindinių jūsų svetainės puslapių, ir nuotraukų serijos, išdėstytos tinkamai, kad iš pirmo žvilgsnio žinotume, ką darote ir ką darote.

Nuoroda į internetą: Alisa drougard

Jonathanas Ogdenas

Ogden toliau žaiskite, kaip paprastas jūsų vardas yra logotipas, socialiniai tinklai, esantys žemiau, nepatraukdami dėmesio, ir jų dizainas veikia taip, kad galėtume greitai juos pereiti. Viename puslapyje jis parodo viską, kas svarbu.

Nuoroda į internetą: Jonathanas Ogdenas

Kikilis

Finchas jau vyksta į kitas vietas pažaisti su tipografija ir tomis spalvos, žyminčios eleganciją ir išmintį, ką ji daro. Turėdamas tik keletą elementų, jis palieka visą savo profesionalumą. Tai taip pat aiškiai parodo, kurie puslapiai su jumis yra susieję.

Nuoroda į internetą: Kikilis

Kitoks dizainas

Ši svetainė žaisti kitaip. Naudokite ekrano užsklandą su antrašte, iš kurios galime pereiti į pagrindinius puslapius, savo telefoną ir nuorodas į jūsų socialinius tinklus.

Nuoroda į internetą: Kitoks dizainas

Brizkas

Kai iliustruoja mus savo figūra su abstraktus trikampis ir tinkama spalvų paletė suteikti artumo. Jis taip pat siūlo dalį savo biografijos su mažesniu šriftu, jei norėtume daugiau sužinoti apie jį.

Nuoroda į internetą: Brizkas

Vertikalus sodo dizainas

Kaip ir ankstesnis, vertikalaus sodo dizainas nukreiptas į greitai rodomą nuotrauką vienas geriausių jo darbų Oslo oro uoste. Viršuje turime antraštę su «navigacijos juosta» arba naršymo juosta ir netgi galimybę pakeisti kalbą. Logotipas pateikia vertikalų formatą, kad galutinis vaizdas būtų labai paprastas.

Nuoroda į internetą: Vertikalus sodo dizainas

247 laipsnių

247 laipsnių žaisti su vienspalviu ir fono vaizdu beveik visiškai tamsu. Antraštės šriftas, mažesnis už tekstą ir antraštę, rašomas didžiosiomis raidėmis, kad būtų sukurtas puikus viso dizaino kontrastas.

Nuoroda į internetą: 247 laipsnių

Mėgaukitės šiuo

A puiki tipografija gali būti autentiškumo ženklas ir kad mes žinome, ką darome. Jums nereikia nieko daugiau duoti, jei pranešimas yra tiesioginis. Jie aiškiai pasako: jiems patinka kurti gražias programas ir svetaines. Jie palieka paštą projektams ir studijoms kitoje nuorodoje.

Nuoroda į internetą: Mėgaukitės šiuo

Allison hou

Alisonas mus paima prieš kitus kursus ir apima daugiau vaizdų ir tas labiau „moteriškas“ šriftas. Tas pats pasakytina ir apie jūsų pagrindinį vaizdą bei tą antraštę. Jis turi prabangą pateikti kortelę, kurioje rodomi apsipirkimo triukai.

Nuoroda į internetą: Allison hou

„Pixelot“

„Pixelot“ yra šiek tiek pašėlęs, tačiau tai taip pat rodo autoriaus kūrybiškumą. Naudokite pelės žymeklį sukurti kaukę kad neryškus, bet kur mes turime ji.

Nuoroda į internetą: „Pixelot“

Lionelio scholtai

Jei norite pateikite savo gyvenimo aprašymą internete, Lionelis parodo veiksmus. Tinkamas šriftas, jūsų nuotrauka viršutiniame kairiajame kampe, nukreipia į jūsų socialinius tinklus ir jūsų patirtį. Vienintelis dekoratyvinis elementas yra tos dvi horizontalios skirtingų spalvų linijos.

Nuoroda į internetą: Lionelio scholtai

Elegantiškos žuvėdros

Mes grįžtame minimalizmo elegancijai ir tos didelės tuščios vietos. Viena vertus, antraštė yra labai toli nuo kitų elementų, ir, kita vertus, tie elementai yra suformuoti taip, kad sukuria puikią vizualinę harmoniją tarp jų.

Nuoroda į internetą: Elegantiškos žuvėdros

arealas

Kaip matote visuose pavyzdžiuose, tai svarbu antraštės skirtukus, kad pereitumėte į skirtingus puslapius iš svetainės. Tipografija turi didelę reikšmę, žaiskite su viena antrašte, kita - su tekstu be sans serif, kuris puikiai atlieka savo darbą.

Nuoroda į internetą: arealas

„PinkPoint“

Spalvų kontrastas veda mus į šiek tiek sudėtingesnį visų vaizdų tinklą. Trūksta ne visų tų pagrindinių elementų šį kartą žaisti su fono paveikslėlio gradientais ir tomis dviem dalimis, kuriose yra pagrindinio pagrindinio vaizdo gradiento spalvos.

Nuoroda į internetą: „PinkPoint“

TBMK

Puiki nuotrauka su tinkamai parinktas šriftas ir „herojaus“ elementas galite atiduoti šiam internetui. Naudodamas slankiklį, dalis kūrinio koncepcijos yra gana paprasta.

Nuoroda į internetą: TBMK

Pjaustykite pjaustykite

Skaitmeninė iliustracija atvedė mus į „Chop Chop“ tas vaizdas, kuris suvalgo visą vizualų jo buvimą. Mėlyna spalva antraštėje suteikia tikslą sukurti chromatines reikšmes, suderintas su visu žiniatinklio projektuojamu vaizdu.

Nuoroda į internetą: Pjaustykite pjaustykite

7Pušis

„7Pine“ žaidžia su žaliu, kad būtų puikus namų plokštės veikėjas. Likusi dalis ją sukuria vaizdas su daug žalios spalvos ir paprasta antrašte kad nori nepastebėti logotipo.

Nuoroda į internetą: 7Pušis

Suma

Suma mus nukreipia kitomis kryptimis. Žaisk su pasakomis juoda ir balta, labai kūrybinga iliustracija ir tai kartu su likusiais elementais bei dviem kitomis iliustracijomis sukuria daugiau nei įdomų peizažą. Pavyzdys, kaip sukurti svetainę, kuri išsiskiria iš kitų.

Nuoroda į internetą: Suma

„Hatbox“

Šioje svetainėje vyrauja mėlyna spalva, kurioje netrūksta baltai apšviestų vaizdų ir koks būtų žaidimas tos svetainės kūrėjo 3D formatu kad juda mums judant.

Nuoroda į internetą: „Hatbox“

Kara lyte

Kara eina pas paprastumas ir minimalizmas su natūraliu ir gražiu buvimu savo nuotraukoje. Likusi dalis yra tekstas, pateikiamas kartu su pagrindiniais antraštės elementais ir mėsainio mygtuku, kad ją atidarytumėte.

Nuoroda į internetą: Kara lyte

Instrinsic Studio rinkodara

Es paprasčiausio interneto bet tai mums parodo, ką reikia kurti tinklaraštį. Raudona ir juoda yra labai „tinklaraščio“ svetainės veikėjai.

Nuoroda į internetą: Instrinsic Studio rinkodara

Kaip sukurti paprastą svetainę HTML

Mes jus mokysime sukurti paprastą svetainę HTML kad žinotumėte pagrindinius jį sudarančius elementus. Reikės turėti žiniatinklio prieglobą, kur galėtume įkelti kodą ir kai kuriuos pakeitimus į CSS, bet ateikite, tai yra principai, kurie leidžia pradėti kelionę HTML.

Kai kuriuos pamatęs paprastų žiniatinklio pavyzdžių Kuo jūs galite pakankamai motyvuoti save kurti savo dizainus, per daug nesulaužydami galvos. Kartais paprastas sukuria geresnį efektą nei komplikuoja mus sudėtinguose dalykuose. Pamatysite, kad daugeliu atvejų paprastas veiks labai gerai. Pirmyn.

Sukurti paprastą svetainę HTML yra lengviau, nei gali atrodyti iš pradžių. Svetainė susideda iš antraštės, kūno arba turinį ir poraštę arba poraštę kaip pagrindinius elementus. Mes galime juos klasifikuoti taip:

• Dokumentai: visi dokumentai, kuriuos mes ketiname sukurti, turi būti atliekami su a . Mes atidarome su ir visada užsidaro a
• Kūnas ar kūnas: matoma dokumento dalis yra tarp Y
• Antraštės: juos žino H1, H2, H3 ... Pradedame a ir mes užsidarome su . Viduje esantis tekstas bus rodomas kaip antraštė ir, priklausomai nuo jo numeracijos, tai padarys mažesniu ar didesniu dydžiu.
• Pastraipos: pastraipa pridedama a ir užsidaro
• Saitai: ryškiausias pavyzdys yracreativosonline.org/»> Nuoroda į Creativos Online
• Vaizdai: mes juos apibrėžiame pagal etiketę . Pavyzdys galėtų būti . Mes iškviečiame vaizdą tarp kabučių ir alternatyviam tekstui, kuris yra būtinas SEO, naudojame alt.
• Sąrašai: sąrašus apibrėžiame su netvarkingam ir su tvarkingam. Sąrašo elementai naudojami su . Visada nepamirškite juos uždaryti su baru.

Su šiais elementais mes turėsime paprastos svetainės kūrimo pagrindas kaip pamatysite dideliame kiekyje jų, kuriuos išmokysime kitame skyriuje. Tarkime, kad semantinė struktūra su svarbiausiais elementais atrodo taip:

• Antraštė su jos naršymo juosta skirtingiems svetainės puslapiams.
• Straipsnio ar kūno erdvė kuriame mes galime sukurti tinklaraščio įrašą, įdėti savo gyvenimo aprašymą ar paveikslėlį.
• Šoninė juosta arba šoninė juosta pateikti papildomos informacijos.
• Poraštė arba pėda, kur talpinsime nuorodas į svarbiausius svetainės puslapius, taip pat socialinių tinklų piktogramas (visada kaip pavyzdį).

Toliau pateiktuose pavyzdžiuose viskas paremta paprastu, bet elegantišku logotipu, antraštė, kurioje jie nukreipia naršymą į skirtingus svetainės puslapius, centrinę erdvę, kurioje dominuoja tekstas ar vaizdas, ir poraštę su ankstesnėje pastraipoje nurodytais elementais.

Mes rekomenduojame tai nesulaužykite galvos ir eikite prie paprasto. Svarbiausia, kad šios zonos būtų atskiriamos nuo likusių per vizualų sekundžių praėjimą. Su laiku galėsime apsunkinti save ir dirbti daugiau kitų erdvių.

Tai aiškus HTML kodo pavyzdys su svarbiausiais elementais:

<!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>

Su šiomis HTML kodo eilutėmis mes turėtume pirmą kartą sukūrė antraštės puslapio pavadinimą su, šiuo atveju «Semantic HTML», uždarytume abu pavadinimus , antraštė su ir mes duotume kelią atidaryti kūną .

Mes turėtume pirmoji H1 antraštė su uždaryti jį , ir mes eitume į sąrašą, kuris padėtų mums sukurti naršymo juostą skirtingiems mūsų svetainės puslapiams. Uždarome sąrašą , mes uždarome ir galiausiai HTML dokumentas su .

Galiausiai, visada atidarykite dokumentą naudodami uždaryti jį pasibaigus viso kodo pasviruoju brūkšniu. Atidarius dokumentą, visada naudojama nuoroda į kalbą, kuri šiuo atveju yra ispanų su «es» ir su a .

Svarbu atidžiai pažvelgti į kodą ir bet kada atidarę funkciją uždarykite ją juostoje atžvilgiu.

Šiek tiek CSS

Mes einame į CSS šiek tiek, bet eidami taip, kad suprastumėte kaip stiliaus HTML. Tarkime, kad CSS ir HTML eina koja kojon suteikdami tas paprastas svetaines, kurias rasite toliau.

Jei, viena vertus, mes semantiškai naudojame HTML, kas yra antraštė, turinys ar tekstas su straipsniu ar atvaizdu ir poraštė, CSS identifikavimui naudotume funkciją «Div» kiekvienai iš šių erdvių, kad vėliau būtų galima pritaikyti būtinus dizaino pakeitimus.

Kažkas taip paprasta, kaip:

Nors galime pritaikyti stilius su „Div“, tinkama ir tobula struktūra padės kad žiniatinklio tikrintuvai galėtų puikiai „perskaityti“ mūsų turinį, taigi, jei laikysimės tos pagrindinės struktūros, pirmiausia turėsime puikų darbą ir bazę.

Un paprastas CSS kodo pavyzdys:

h1 {
spalva: Baltas;
text-align: centras;
}

Mes vadiname H1 ir tekstu mes įdėsime jį į baltą spalvą: balta; ir sulyginsime jį su centru su „sulygiuoti tekstu“. Atidarę skambutį H1, visada uždarykite laužtinius skliaustus.

Antraštės nuotrauka Gregas rakozy