30 Nevjerojatno jednostavnih web stranica

Neke od najpoznatijih stranica vrlo 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 za jednostavnost stvari.

Primjeri jednostavnih HTML web stranica

Kean richmond

Kean Richmond tjera nas da uvidimo jednostavnost igranja s malo elemenata, ali vrlo dobro postavljenih daju sjajan osjećaj minimalizmu. Njegov logotip u gornjem lijevom dijelu, ikone Twittera i kontakata zdesna i u sredini, s 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 smještenih na odgovarajući način tako da na prvi pogled znamo što radite i što radite.

Link na web: Alice drougard

jonathan ogden

Ogden nastavi se igrati koliko je jednostavno tvoje ime kao logotip, društvene mreže smještene tik ispod bez privlačenja pozornosti i njihov dizajn djeluje 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 čini. Sa samo nekoliko elemenata ostavlja na uvid svu svoju profesionalnost. Također jasno govori 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

žustar

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

Link na web: žustar

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 imamo zaglavlje s «navigacijskom trakom» ili navigacijskom trakom, pa čak i mogućnošću promjene jezika. Logotip ga stavlja u vertikalni format kako bi dao 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 cjelokupnom dizajnu.

Link na web: 247Grad

Uživajte u to

Una sjajna tipografija može biti znak autentičnosti i da znamo što radimo. Ako je poruka izravna, ne morate ništa više davati. Jasno govore: vole stvarati lijepe aplikacije i web stranice. Pošta za projekte i studij ostavljaju na drugoj poveznici.

Link na web: Uživajte u to

Allison hou

Allison nas vodi prije ostalih tečajeva i uključuje više slika i to ona "ženskija" vrsta slova. Isto vrijedi i za vašu glavnu sliku i to zaglavlje. Ima luksuz da predstavi čestitku koja prikazuje trikove za kupovinu.

Link na web: Allison hou

pikselot

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

Link na web: pikselot

Lionel scholtes

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

Link na web: Lionel scholtes

Elegantni galebovi

Mi se vraćamo do elegancije minimalizma i oni 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 vizualnu harmoniju.

Link na web: Elegantni galebovi

stanište

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

Link na web: stanište

PinkPoint

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

Link na web: PinkPoint

IWC

Izvrsna fotografija s dobro odabran font i element "heroj" možete dati ovoj mreži. Klizačem pokazuje da je dio posla prilično jednostavan u svojoj koncepciji.

Link na web: IWC

Sjeckaj Sjeckaj

Digitalna ilustracija dovodi nas do Chop Chop s ta slika koja je pojede svu njezinu vizualnu prisutnost. Plava boja u zaglavlju daje joj smisao za stvaranje kromatskih vrijednosti u skladu s cijelom slikom koju projicira web.

Link na web: Sjeckaj Sjeckaj

7Bor

7Pine se poigrava zelenom bojom kako bi bio sjajni protagonist domaće ploče. Ostatak to sastavlja slika s puno zelene boje i jednostavnim zaglavljem koji želi ostati neprimijećen logotipom.

Link na web: 7Bor

Zbroj

Zbroj nas vodi u drugim smjerovima. Poigrajte se s legendarnim crno-bijelim, vrlo kreativna ilustracija a to zajedno s ostatkom elemenata i dvije druge ilustracije stvara više nego zanimljiv krajolik. Primjer izrade web stranice koja se ističe od ostalih.

Link na web: Zbroj

Kutija za šešire

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

Link na web: Kutija za šešire

Kara lyte

Kara odlazi u jednostavnost i minimalizam sa svojom prirodnom i lijepom prisutnošću na vašoj fotografiji. Ostalo je tekst koji dolazi uz glavne elemente zaglavlja i gumb za hamburger za njegovo otvaranje.

Link na web: Kara lyte

Instrinsic Studio Marketing

Es najjednostavnijeg weba ali to nam pokazuje što je napraviti blog. Crvena i crna protagonisti su na vrlo "blog" web mjestu.

Link na web: Instrinsic Studio Marketing

Kako stvoriti jednostavnu web stranicu u HTML-u

Mi ćemo te naučiti stvoriti jednostavno web mjesto 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.

Vidjevši neke jednostavni web primjeri Pomoću kojega se možete dovoljno motivirati da sami izrađujete dizajn bez puno lomljenja glave. Ponekad jednostavno stvara bolji učinak 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 jednostavnije je 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:

• Dokumenti: svi dokumenti koje ćemo stvoriti moraju se izvršiti pomoću a . Otvaramo s i uvijek se zatvara s
• Tijelo ili tijelo: vidljivi dio dokumenta nalazi se između Y
• Zaglavlja: poznati su po H1, H2, H3 ... Počinjemo s a i zatvaramo s a . Tekst koji se nalazi unutra pojavit će se kao zaglavlje, a ovisno o njegovoj numeraciji, učinit će to u manjoj ili većoj veličini.
• Odlomci: odlomak je zatvoren unutar i zatvara s
• Enlaces: najjasniji primjer jecreativosonline.org/»> Veza na Creativos Online
• Lik: definiramo ih oznakom . Primjer bi bio . Pozivamo se na sliku između navodnika i koristimo alt za alternativni tekst koji je bitan za SEO.
• Popisi: popise definiramo s za neuredan i sa za uredno. Stavke popisa koriste se s . Uvijek ih se sjetite zatvoriti šankom.

S ovim elementima ćemo imati osnova za izradu jednostavne web stranice kao što ćete vidjeti u dobroj količini njih koju ć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 mjesta.
• 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 postaviti veze na najvažnije stranice web mjesta kao i ikone društvenih mreža (uvijek kao primjer).

Primjeri koje ćete vidjeti u nastavku su sve temeljeno 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 odlomku.

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 na drugim prostorima.

Ovo je jasan primjer HTML koda s 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>

S ovim bismo redovima HTML koda imali prvi put stvorio naslov stranice u zaglavlju sa, u ovom slučaju «Semantički HTML», obojicu bismo zatvorili s , zaglavlje sa a mi bismo ustupili mjesto za otvaranje tijela s .

Mi bismo imali prvo zaglavlje u H1 sa zatvoriti ga s , i otišli bismo na popis koji bi nam pomogao stvoriti navigacijsku traku za različite stranice našeg web mjesta. Popis zatvaramo sa , zatvaramo i na kraju html dokument sa .

Do kraja, uvijek otvorite dokument s da ga na kraju cijelog koda zatvorite kosom crtom. Nakon otvaranja dokumenta uvijek se koristi referenca na jezik, što je u ovom slučaju španjolski s "es" i sa .

Važno je da pažljivo pogledate kôd i kad god otvorite funkciju i zatvorite je trakom u skladu s tim.

Malo CSS-a

Idemo malo u CSS, ali u prolazu kako biste razumjeli kako oblikovati HTML. Recimo da CSS i HTML idu ruku pod ruku dajući one jednostavne web stranice koje ćete pronać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 na dizajnu.

Nešto jednostavno kao:

Iako stilove možemo primijeniti s Div, prikladna i savršena struktura će pomoći kako bi alati za indeksiranje weba mogli 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 {
u boji : bijela;
tekst poravnati: centar;
}

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

Fotografija zaglavlja Greg rakozy