30 neverjetno preprostih spletnih strani

Nekatere najbolj znane strani so zelo preobremenjene z informacijami, jaz pa imam raje ravno nasprotno: preproste.

Očitno je velik predstavnik te skupine Google z minimalistično domačo stranjo, odkar je začela svojo pot, očitno pa ni edini na internetu, ki si prizadeva, da stvari ostanejo preproste.

Preprosti primeri spletnih strani HTML

Kean richmond

Kean Richmond nam pomaga videti preprostost igranja z nekaj elementi, vendar zelo dobro umeščenih dajejo dober občutek minimalizmu. Njegov logotip v zgornjem levem kotu, Twitter in ikone za stike na desni in v sredini z osupljivo tipografijo temu, čemur je posvečen.

Povezava do spleta: Keanrich mond

Alice drougard

Alice drougard naj bo preprosto tudi z nameščenim logotipom v sredini, štirje zavihki za premikanje med glavnimi stranmi vašega spletnega mesta in vrsto fotografij, pravilno nameščenih, tako da na hitro vemo, kaj počnete in kaj počnete.

Povezava do spleta: Alice drougard

jonathan ogden

Ogden še naprej se igrajte s tem, kako preprosto je vaše ime kot logotip, družabna omrežja, ki se nahajajo tik spodaj, ne da bi pritegnila pozornost in njihovo oblikovanje deluje, tako da jih lahko hitro prehodimo. Na eni strani prikazuje vse, kar je pomembno.

Povezava do spleta: jonathan ogden

Finch

Finch se že odpravlja v druge kraje, da bi se igral s tipografijo in drugimi barve, ki označujejo eleganco in modrost tega, kar počne. Z le nekaj elementi pušča na vidiku vso svojo profesionalnost. Jasno je tudi, katere strani so vodile do vas.

Povezava do spleta: Finch

Drugačen dizajn

Ta spletna stran igrajte drugače. Uporabite ozadje z glavo, iz katere lahko preidemo na glavne strani, vaš telefon in povezave do vaših družabnih omrežij.

Povezava do spleta: Drugačen dizajn

živahno

Kai nas ponazori s svojo postavo z abstraktni trikotnik in primerna barvna paleta dati bližino. Del biografije ponuja tudi s pisavo v manjši velikosti, če želimo vedeti več o njem.

Povezava do spleta: živahno

Navpično oblikovanje vrta

Tako kot prejšnja, se tudi Vertical Garden Design približa fotografiji, ki hitro prikazuje eno najboljših služb na letališču v Oslu. Na vrhu imamo glavo z «navigacijsko vrstico» ali navigacijsko vrstico in celo možnostjo spreminjanja jezika. Logotip ga postavi v navpično obliko, da daje končni pečat zelo preprosti strani.

Povezava do spleta: Navpično oblikovanje vrta

247 stopinj

247 stopinj igrajte se z enobarvno in sliko v ozadju skoraj popolnoma temno. Pisava glave, manjša od besedila in glave, je napisana z veliko začetnico, da ustvari odličen kontrast v celotni zasnovi.

Povezava do spleta: 247 stopinj

Uživajte v tem

A odlična tipografija je lahko znak pristnosti in da vemo, kaj počnemo. Če je sporočilo neposredno, vam ni treba dati ničesar več. Zelo jasno povedo: radi ustvarjajo čudovite aplikacije in spletna mesta. Pošta za projekte in študij pustijo na drugi povezavi.

Povezava do spleta: Uživajte v tem

Allison hou

Allison nas popelje pred drugimi tečaji in vključuje več slik in to bolj "žensko" pisavo. Enako velja za vašo glavno sliko in to glavo. Ima razkošje, da predloži kartico, ki prikazuje nakupovalne trike.

Povezava do spleta: Allison hou

piksel

Pixelot je sicer nekoliko nor, vendar kaže tudi na avtorjevo ustvarjalnost. Uporaba miškin kazalec, da ustvarite masko ki se zamegli, kjer koli se nahaja.

Povezava do spleta: piksel

Lionel scholtes

Če želite naredite svoj življenjepis v spletu samo s tem, Lionel vam pokaže korake. Primerna pisava, vaša fotografija zgoraj levo, povezave do vaših družabnih omrežij in vaše izkušnje. Edini dekorativni element sta tisti dve vodoravni črti različnih barv.

Povezava do spleta: Lionel scholtes

Elegantni galebi

Vrnemo se do elegance minimalizma in tisti veliki prazni prostori. Po eni strani je glava zelo daleč od ostalih elementov, po drugi strani pa tisti elementi, oblikovani tako, da med seboj ustvarjajo veliko vizualno harmonijo.

Povezava do spleta: Elegantni galebi

habitat

Kot lahko vidite v vseh primerih, je pomembno zavihke glave, da odprete različne strani s spletne strani. Tipografija je zelo pomembna, igrajte se z eno za glavo in drugo za besedilo s sans serifom, ki se odlično obnese.

Povezava do spleta: habitat

PinkPoint

Kontrast barv nas pripelje do nekoliko bolj zapletenega spleta vseh pogledov. Ne manjkajo vsi ti glavni elementi da se tokrat igramo z prelivi za sliko v ozadju in tistima dvema odsekoma, ki imata glavne barve preliva za glavno sliko.

Povezava do spleta: PinkPoint

IWC

Odlična fotografija z dobro izbrana pisava in element "heroj" lahko daš temu spletu. Z drsnikom prikazuje, da je del dela povsem preprost.

Povezava do spleta: IWC

Dajmo dajmo

Digitalna ilustracija nas pripelje do Chop Chop with tista slika, ki jo požre vso vizualno prisotnost. Modra barva v glavi daje bistvo ustvarjanju kromatičnih vrednosti v sozvočju s celotno sliko, ki jo projicira splet.

Povezava do spleta: Dajmo dajmo

7Bore

7Pine se igra z zelenico, da je velik protagonist domače plošče. Preostali ga sestavljajo slika z veliko zelene in preprosto glavo ki želi ostati neopažen pri logotipu.

Povezava do spleta: 7Bore

Vsota

Vsota nas vodi v druge smeri. Igrajte se s fabularno črno-belo, zelo kreativno ilustracijo kar skupaj z ostalimi elementi in dvema ilustracijama ustvarja več kot zanimivo pokrajino. Primer izdelave spletnega mesta, ki izstopa od ostalih.

Povezava do spleta: Vsota

Klobuk za klobuk

Modra je prevladujoča barva na tej spletni strani, v kateri ni manjkajočih slik, ki bi bile v celoti osvetljene z belo in kakšna bi bila igra v 3D tega graditelja spletnih mest ki se premika, ko se premikamo.

Povezava do spleta: Klobuk za klobuk

Kara lyte

Kara gre k preprostost in minimalizem s svojo naravno in lepo prisotnostjo na vaši fotografiji. Ostalo je besedilo, ki je priloženo glavnim elementom glave in gumbu za hamburger, da ga odprete.

Povezava do spleta: Kara lyte

Instrinsic Studio Marketing

Es najpreprostejšega spleta ampak to nam pokaže, kaj je ustvariti blog. Rdeča in črna sta glavna junaka na zelo "spletnem" spletnem mestu.

Povezava do spleta: Instrinsic Studio Marketing

Kako ustvariti preprosto spletno mesto v HTML

Naučili vas bomo ustvarite preprosto spletno mesto v HTML-ju tako da poznate najosnovnejše elemente, ki ga sestavljajo. Morali bomo imeti spletnega gostitelja, kamor lahko naložimo kodo in nekaj popravkov v CSS, ampak dajte, to so načela za začetek našega potovanja v HTML-ju.

Ko sem videl nekaj preprosti spletni primeri S katerim se lahko dovolj motivirate, da sami oblikujete svoje modele, ne da bi si veliko razbili glavo. Včasih preprosto ustvari boljši učinek, kot da nas zaplete v zapletene stvari. Videli boste, da v večini primerov preprosto deluje zelo dobro. Pojdi.

Ustvarjanje preprostega spletnega mesta v HTML je enostavnejše, kot se zdi sprva. Spletno mesto je sestavljen iz glave, telesa ali vsebina in noga ali noga kot glavni elementi. Lahko jih razvrstimo na ta način:

• Dokumenti: vse dokumente, ki jih bomo ustvarili, je treba narediti z . Odpremo z in se vedno zapre z a
• Telo ali telo: vidni del dokumenta je med Y.
• Glave: poznamo jih po H1, H2, H3 ... Začnemo z a in zapremo z . Besedilo, ki je znotraj, bo prikazano kot glava in glede na njegovo oštevilčenje bo to storjeno v manjši ali večji velikosti.
• Odstavki: odstavek je priložen pod in se zapre z
• Enlaces: najbolj jasen primer jecreativosonline.org/»> Povezava do Creativos Online
• Posnetki: definiramo jih z oznako . Primer bi bil . Sliko prikličemo med narekovaji in za nadomestno besedilo uporabimo alt, ki je bistven za SEO.
• Seznami: sezname določimo z za grdo in s za lepo. Elementi seznama se uporabljajo z . Vedno jih ne pozabite zapreti s prečko.

S temi elementi bomo imeli osnova za izdelavo preproste spletne strani kot boste videli v lepem številu, ki vas jih bomo naučili v naslednjem poglavju. Recimo, da je pomenska struktura z najpomembnejšimi elementi videti tako:

• Glava z navigacijsko vrstico za različne strani spletnega mesta.
• Članek ali prostor telesa v katerem lahko ustvarimo zapis v spletnem dnevniku, damo svoj učni načrt ali sliko.
• Stranska vrstica ali stranska vrstica dati dodatne informacije.
• Noga ali noga, kjer bomo postavili povezave do najpomembnejših strani spletnega mesta ter ikone socialnih omrežij (vedno kot primer).

V spodnjih primerih so primeri vse temelji na preprostem, a elegantnem logotipu, glava, kjer krmarjenje preusmerijo na različne strani spletnega mesta, osrednji prostor, v katerem prevladuje besedilo ali slika in noga z elementi, omenjenimi v prejšnjem odstavku.

To priporočamo ne razbijte glave in pojdite na preprosto. Glavna stvar je, da se ta področja razlikujejo od ostalih v vizualnem prehodu sekund. Sčasoma si bomo lahko zakomplicirali in delali več drugih prostorov.

To je jasen primer kode HTML z najpomembnejšimi elementi:

<!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 temi vrsticami kode HTML bi imeli je najprej ustvaril naslov strani v glavi z, v tem primeru «Semantični HTML», bi oba naslova zaprli z , glavo z in dali bi pot, da bi odprli telo s .

Imeli bi prva glava v H1 z da ga zaprete z , in odšli bi na seznam, ki bi nam pomagal ustvariti navigacijsko vrstico za različne strani našega spletnega mesta. Seznam zaključimo z , zapremo in na koncu html dokument z .

Na konec, vedno odprite dokument z da jo na koncu celotne kode zaprete s poševnico. Po odprtju dokumenta se vedno uporabi sklic na jezik, ki je v tem primeru španščina z "es" in z .

Pomembno je, da natančno pogledate kodo in kadar koli odprete funkcijo in jo zaprete s vrstico ustreza.

Malo CSS-ja

Malo gremo v CSS, vendar mimogrede, da boste razumeli kako oblikovati HTML. Recimo, da CSS in HTML z roko v roki dajeta tista preprosta spletna mesta, ki jih najdete spodaj.

Če imamo po eni strani semantično uporabo HTML za tisto, kar je glava ali glava, telo ali telo s člankom ali sliko in nogo, v CSS bi za identifikacijo uporabili funkcijo «Div» na vsakega od teh prostorov, da bi pozneje uporabili potrebne spremembe v zasnovi.

Nekaj ​​tako preprostega kot:

Medtem ko lahko uporabimo sloge z Div, ustrezna in popolna struktura bo pomagala tako da lahko spletni pajki popolnoma "preberejo", o čem gre v naši vsebini, zato bomo, če bomo sledili tej osnovni strukturi, najprej imeli odlično delo in podlago.

Un preprost primer kode CSS:

h1 {
barva: bele;
text-align: center;
}

Kličemo H1 in besedilo dali ga bomo v belo z barvo: bela; in ga bomo poravnali na sredino z «poravnavo besedila». Po odprtju klica H1 vedno zaprite z oklepaji.

Slika v glavi Greg rakozy