30 Nevjerovatno jednostavnih web stranica

Neke od najpoznatijih stranica su preopterećene informacijama, ali ja više volim suprotno: one jednostavne.

Očito je veliki eksponent ove grupe Google s minimalističkom početnom stranicom otkako je započela svoje putovanje, Ali očito nije jedini na Internetu koji se zalaže da stvari budu jednostavne.

Primjeri jednostavnih HTML web stranica

Kean richmond

Kean Richmond tjera nas da vidimo jednostavnost igranja s malo elemenata, ali vrlo dobro postavljenih daju sjajan osjećaj minimalizmu. Njegov logotip u gornjem lijevom dijelu, Twitter i ikone kontakata s desne strane i u sredini, sa upečatljivom tipografijom, onome čemu je posvećen.

Link na web: Keanrich mond

Alice drougard

Alice drougard budite jednostavni i s postavljenim logotipom u sredini, četiri kartice za pomicanje između glavnih stranica vašeg web mjesta i niza fotografija pravilno postavljenih tako da na prvi pogled znamo šta radite i šta radite.

Link na web: Alice drougard

jonathan ogden

Ogden igrajte se kako je jednostavno vaše ime kao logotip, društvene mreže smještene odmah ispod bez privlačenja pažnje i njihov dizajn funkcionira tako da ih možemo brzo proći. Na jednoj stranici prikazuje sve što je važno.

Link na web: jonathan ogden

zeba

Finch već odlazi na druga mjesta kako bi se igrao s tipografijom i slično boje koje označavaju eleganciju i mudrost onoga što radi. Sa samo nekoliko elemenata ostavlja na uvid svu svoju profesionalnost. Takođe jasno pokazuje koje su vas stranice vodile.

Link na web: zeba

Drugačiji dizajn

Ova web stranica igrati drugačije. Upotrijebite pozadinu sa zaglavljem odakle možemo ići na glavne stranice, vaš telefon i veze do vaših društvenih mreža.

Link na web: Drugačiji dizajn

brz

Kai nas ilustrira vlastitom figurom apstraktni trokut i prikladnu paletu boja dati bliskost. Takođe nudi dio svoje biografije s fontom u manjoj veličini u slučaju da želimo znati više o njemu.

Link na web: brz

Vertikalni dizajn vrta

Kao i prethodni, Vertical Garden Design ide prema fotografiji koja se brzo prikazuje jedan od njegovih najboljih poslova na aerodromu u Oslu. Na vrhu se nalazi zaglavlje s «navigacijskom trakom» ili navigacijskom trakom, pa čak i mogućnošću promjene jezika. Logotip ga stavlja u vertikalni format dajući konačni dodir vrlo jednostavnoj stranici.

Link na web: Vertikalni dizajn vrta

247Grad

247Grad poigrajte se jednobojnom i pozadinskom slikom gotovo potpuno mračno. Font zaglavlja, manji od teksta i zaglavlja, napisan je velikim slovima kako bi se stvorio sjajan kontrast u ukupnom dizajnu.

Link na web: 247Grad

Uživajte u ovome

Una odlična tipografija može biti znak autentičnosti i da znamo šta radimo. Ako je poruka direktna, ne morate ništa više davati. Oni to vrlo jasno pokazuju: obožavaju stvarati lijepe aplikacije i web stranice. Pošta za projekte i svoje studije ostavljaju na drugom linku.

Link na web: Uživajte u ovome

Allison hou

Allison nas vodi prije ostalih tečajeva i uključuje više slika i to onaj "ženskiji" font. Isto vrijedi i za vašu glavnu sliku i to zaglavlje. Ima luksuz da pokaže karticu koja prikazuje trikove u kupovini.

Link na web: Allison hou

pixelot

Pixelot je pomalo lud, ali ukazuje i na kreativnost autora. Koristite pokazivač miša za stvaranje maske koja se zamagljuje gdje god se smjestili.

Link na web: pixelot

Lionel scholtes

Ako želite napravite svoj životopis na mreži bez ičega više od toga, Lionel vam pokazuje korake. Odgovarajući font, vaša fotografija u gornjem lijevom kutu, veze do vaših društvenih mreža i vašeg iskustva. Jedini ukrasni element su te dvije vodoravne linije različitih boja.

Link na web: Lionel scholtes

Elegantni galebovi

Mi se vraćamo do elegancije minimalizma i ti veliki prazni prostori. S jedne strane, zaglavlje je vrlo daleko od ostalih elemenata, a s druge strane, oni elementi oblikovani na takav način da stvaraju sjajnu vizuelnu harmoniju.

Link na web: Elegantni galebovi

Lebensraum

Kao što vidite u svim primjerima, važno je kartice zaglavlja za odlazak na različite stranice sa web stranice. Tipografija je od velike važnosti, poigrajte se jednom za zaglavlje, a drugom za tekst s bez serifa koji sjajno radi.

Link na web: Lebensraum

PinkPoint

Kontrast boja dovodi nas do malo složenije mreže svih pogleda. Ne nedostaju svi ti glavni elementi da se ovaj put igramo s gradijentima za pozadinsku sliku i ona dva odjeljka koji imaju glavne boje gradijenta za glavnu sliku.

Link na web: PinkPoint

IWC

Sjajna fotografija sa dobro odabran font i element "heroj" možete dati ovom webu. Klizačem pokazuje da je dio posla prilično jednostavan u svojoj koncepciji.

Link na web: IWC

Chop chop

Digitalna ilustracija nas dovodi do Chop Chop with ta slika koja je pojede svu njegovu vizuelnu prisutnost. Plava boja u zaglavlju daje joj smisao za stvaranje hromatskih vrijednosti u skladu sa cijelom slikom koju projicira web.

Link na web: Chop chop

7Pine

7Pine se poigrava sa zelenim da bude sjajni protagonist domaće ploče. Ostali ga sastavljaju slika sa puno zelene boje i jednostavnim zaglavljem koji želi ostati neprimijećen logotipom.

Link na web: 7Pine

Suma

Zbir nas vodi u drugim smjerovima. Igrajte se sa legendarnim crno-bijelim, vrlo kreativna ilustracija a to ide zajedno s ostatkom elemenata i dvije druge ilustracije kako bi se stvorilo više nego zanimljiv krajolik. Primjer izrade web stranice koja se izdvaja od ostalih.

Link na web: Suma

Kutija za šešir

Na ovom web mjestu prevladava plava boja u kojoj ne nedostaju slike u potpunosti osvijetljene bijelom bojom i kakva bi bila igra u 3D-u tog graditelja web stranica koji se kreće dok se mi krećemo.

Link na web: Kutija za šešir

Kara lyte

Kara odlazi u jednostavnost i minimalizam sa svojim prirodnim i lijepim prisustvom na vašoj fotografiji. Ostalo je tekst koji dolazi uz glavne elemente zaglavlja i dugme za hamburger za njegovo otvaranje.

Link na web: Kara lyte

Instrinsic Studio Marketing

Es najjednostavnijeg weba ali to nam pokazuje šta je napraviti blog. Crvena i crna su glavni junaci vrlo "blog" stranice.

Link na web: Instrinsic Studio Marketing

Kako stvoriti jednostavnu web stranicu u HTML-u

Mi ćemo vas naučiti stvoriti jednostavnu web stranicu u HTML-u tako da znate najosnovnije elemente koji ga čine. Bit će potrebno imati web domaćina na koji možemo učitati kod i neke dorade u CSS-u, ali hajde, to su principi za započinjanje našeg putovanja u HTML-u.

Videvši neke jednostavni web primjeri Pomoću koje se možete dovoljno motivirati da sami izrađujete dizajn bez previše lomljenja glave. Ponekad jednostavno stvara bolji efekt nego što nas komplicira u složenim stvarima. Vidjet ćete da u većini slučajeva jednostavno funkcionira vrlo dobro. Samo naprijed.

Stvaranje jednostavne web stranice u HTML-u je jednostavnije nego što se u početku čini. Web stranica sastoji se od zaglavlja, tijela ili sadržaj i podnožje ili podnožje kao glavni elementi. Možemo ih klasificirati na ovaj način:

• Documentos: svi dokumenti koje ćemo stvoriti moraju biti urađeni pomoću a . Otvaramo s i uvijek se zatvara s
• Telo ili telo: vidljivi dio dokumenta je između Y.
• Zaglavlja: poznati su pod H1, H2, H3 ... Počinjemo sa a i zatvaramo s . Tekst iznutra pojavit će se kao zaglavlje, a ovisno o njegovoj numeraciji, učinit će to u manjoj ili većoj veličini.
• Odlomci: odlomak je priložen pod tačkom i zatvara sa
• Linkovi: najjasniji primjer jecreativosonline.org/»> Link do Creativos Online
• lik: definiramo ih oznakom . Primjer bi bio . Pozivamo se na sliku između navodnika i koristimo alt za alternativni tekst koji je za SEO neophodan.
• Liste: popis definiramo sa za neuredne i sa za uredno. Stavke na listi se koriste sa . Uvijek se sjetite zatvoriti ih rešetkom.

Sa ovim elementima ćemo imati osnova za stvaranje jednostavne web stranice kao što ćete vidjeti u dobrom broju njih koje ćemo vas naučiti u sljedećem odjeljku. Recimo da semantička struktura sa svojim najvažnijim elementima izgleda ovako:

• Zaglavlje s navigacijskom trakom za različite stranice web lokacije.
• Prostor članka ili tijela u kojem možemo stvoriti zapis na blogu, staviti svoj kurikulum ili sliku.
• Bočna traka ili bočna traka staviti dodatne informacije.
• Podnožje ili stopalo, gdje ćemo smjestiti veze do najvažnijih stranica web mjesta kao i ikone društvenih mreža (uvijek kao primjer).

U nastavku su primjeri koje ćete vidjeti sve zasnovano na jednostavnom, ali elegantnom logotipu, zaglavlje u kojem smještaju navigaciju na različite stranice web mjesta, središnji prostor kojim dominiraju tekst ili slika i podnožje s elementima spomenutim u prethodnom paragrafu.

Mi to preporučujemo ne razbijajte glavu i idite na jednostavno. Glavna stvar je da se ta područja razlikuju od ostalih u vizualnom prolazu od nekoliko sekundi. S vremenom ćemo se moći zakomplicirati i raditi više drugih prostora.

Ovo je jasan primjer HTML koda sa najvažnijim elementima:

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

Sa ovim redovima HTML koda imali bismo prvi put stvorio naslov stranice u zaglavlju sa, u ovom slučaju «Semantički HTML», zatvorili bismo oba naslova sa , zaglavlje sa i dali bismo put da otvorimo telo .

Imali bismo prvo zaglavlje u H1 sa zatvoriti i otišli bismo na popis koji bi nam pomogao da kreiramo navigacijsku traku za različite stranice naše web stranice. Zatvaramo listu sa , zatvaramo i na kraju html dokument sa .

Završiti, uvijek otvorite dokument sa da ga na kraju cijelog koda zatvorite kosom crtom. Nakon otvaranja dokumenta uvijek se koristi referenca na jezik, koji je u ovom slučaju španski sa "es" i sa .

Važno je da pažljivo pogledate kod i kad god to želite otvorite funkciju, zatvorite je trakom odgovara

Malo CSS-a

Idemo malo u CSS, ali u prolazu da biste razumjeli kako oblikovati HTML. Recimo da CSS i HTML idu ruku pod ruku dajući one jednostavne web stranice koje ćete naći u nastavku.

Ako s jedne strane imamo semantičku upotrebu HTML-a za ono što je zaglavlje ili zaglavlje, tijelo ili tijelo sa svojim člankom ili slikom i podnožjem, u CSS-u bismo koristili funkciju «Div» za identifikaciju na svaki od ovih prostora kako bi se kasnije primijenile potrebne promjene u dizajnu.

Nešto jednostavno kao:

Iako možemo primijeniti stilove s Div, prikladna i savršena struktura će vam pomoći tako da indeksiranje web stranica može savršeno "pročitati" o čemu se radi u našem sadržaju, pa ako slijedimo tu osnovnu strukturu, prvo ćemo imati sjajan posao i bazu.

Un primjer jednostavnog CSS koda:

h1 {
boja: bijel;
text-align: centar;
}

Zovemo H1 i tekst stavit ćemo ga u bijelo s bojom: bijela; a mi ćemo ga poravnati prema sredini s poravnanjem teksta. Uvijek zatvorite uglastim zagradama nakon otvaranja poziva H1.

Fotografija zaglavlja Greg rakozy