30 neuveriteľne jednoduchých webových stránok

web

Niektoré z najslávnejších stránok sú veľmi preplnené informáciami, ale ja uprednostňujem pravý opak: tie jednoduché.

Je zrejmé, že veľkým predstaviteľom tejto skupiny je Google so svojou minimalistickou domovskou stránkou od začiatku svojej cesty, ale zjavne nie je jediný na internete, ktorý sa zaviazal k zjednodušovaniu vecí.

Jednoduché príklady webových stránok vo formáte HTML

Kean richmond

Kean RichMond

Kean Richmond nás núti vidieť jednoduchosť hry s niekoľkými prvkami, ale s veľmi dobrým umiestnením dať skvelý pocit minimalizmu. Jeho logo vľavo hore, ikony Twitteru a kontaktov vpravo a v strede s pútavou typografiou toho, čomu sa venuje.

Odkaz na web: Keanrich mond

Alice drougard

Alice drougard

Alice drougard udržujte to jednoduché aj s umiestneným logom v strede štyri karty na prechádzanie medzi hlavnými stránkami vášho webu a skupina fotografií umiestnených vhodne, aby sme na prvý pohľad vedeli, čo robíte a čo robíte.

Odkaz na web: Alice drougard

jonathan ogden

jonathan ogden

Ogden hrajte sa s tým, aké jednoduché je vaše meno ako logo, sociálne siete umiestnené tesne pod nimi bez priťahovania pozornosti a ich dizajn funguje tak, aby sme ich mohli rýchlo prejsť. Na jednej stránke zobrazuje všetko, na čom záleží.

Odkaz na web: jonathan ogden

pinka

pinka

Finch už chodí na iné miesta, aby sa pohral s typografiou a tak farby, ktoré naznačujú eleganciu a múdrosť toho, čo robí. Iba s niekoľkými prvkami necháva na očiach všetku svoju profesionalitu. Taktiež objasňuje, ktoré stránky na vás odkazovali.

Odkaz na web: pinka

Iný dizajn

Iný dizajn

Táto webová stránka hrať inak. Použite tapetu s hlavičkou, z ktorej môžeme prejsť na hlavné stránky, váš telefón a odkazy na vaše sociálne siete.

Odkaz na web: Iný dizajn

svižný

svižný

Kai nás ilustruje svojou vlastnou postavou s abstraktný trojuholník a vhodná farebná paleta dať blízkosť. Časť svojho životopisu ponúka aj písmom v menšej veľkosti, ak by sme sa o ňom chceli dozvedieť viac.

Odkaz na web: svižný

Vertikálny záhradný dizajn

Vertikálny záhradný dizajn

Rovnako ako predchádzajúci, Vertical Garden Design smeruje k fotografii, ktorá sa zobrazuje rýchlo jedno z jeho najlepších pracovných miest na letisku v Osle. V hornej časti máme hlavičku s «navigačnou lištou» alebo navigačnou lištou a dokonca s možnosťou zmeny jazyka. Logo je umiestnené vo vertikálnom formáte, aby dotváralo veľmi jednoduchú stránku.

Odkaz na web: Vertikálny záhradný dizajn

247Grad

247Grad

247Grad pohrajte sa s monochromatickým obrázkom a obrázkom na pozadí takmer totálna tma. Písmo hlavičky, menšie ako text a hlavička, je veľké a vytvára veľké kontrasty v celkovom dizajne.

Odkaz na web: 247Grad

Užite si to

Užite si to

Una skvelá typografia môže byť znakom toho, že je autentická a že vieme, čo robíme. Ak je správa priama, nemusíte dávať nič viac. Objasňujú to: radi vytvárajú krásne aplikácie a weby. Poštu pre projekty a ich štúdium nechávajú v inom odkaze.

Odkaz na web: Užite si to

Allison hou

Allison hou

Allison nás berie pred ostatnými kurzami a obsahuje viac obrázkov a ten „ženskejší“ typ písma. To isté platí pre hlavný obrázok a hlavičku. Má luxus predložiť kartu s nákupnými trikmi.

Odkaz na web: Allison hou

pixelot

pixelot

Pixelot je trochu blázon, ale naznačuje to aj tvorivosť autora. Použite kurzorom myši vytvorte masku ktoré sa stierajú všade, kde to máme umiestnené.

Odkaz na web: pixelot

Lionel scholtes

Lionel scholtes

Ak chcete, aby urobte si životopis online s ničím iným, Lionel vám ukazuje kroky. Vhodné písmo, vaša fotografia v ľavom hornom rohu, odkazy na vaše sociálne siete a vaše skúsenosti. Jediným dekoratívnym prvkom sú tieto dve vodorovné čiary rôznych farieb.

Odkaz na web: Lionel scholtes

Elegantné čajky

Elegantné čajky

Vrátime sa k elegancii minimalizmu a tie veľké prázdne miesta. Na jednej strane je hlavička veľmi vzdialená od zvyšku prvkov a na druhej strane sú tieto prvky tvarované tak, aby medzi sebou vytvorili vynikajúci vizuálny súlad.

Odkaz na web: Elegantné čajky

habitat

habitat

Ako vidíte na všetkých príkladoch, je to dôležité karty záhlavia slúžia na prechod na rôzne stránky z webovej stránky. Typografia má veľký význam, hrajte s jednou pre hlavičku a druhou pre text so bez pätkou, ktorá odvádza skvelú prácu.

Odkaz na web: habitat

PinkPoint

PinkPoint

Kontrast farieb nás vedie k trochu zložitejšej sieti všetkých pohľadov. Nie všetky tieto hlavné prvky chýbajú hrať tentoraz s prechodmi pre obrázok na pozadí a týmito dvoma časťami, ktoré majú hlavné farby prechodu pre hlavný obrázok.

Odkaz na web: PinkPoint

IWC

IWC

Skvelá fotografia s dobre zvolené písmo a prvok „hrdina“ môžete dať tomuto webu. Posuvníkom ukazuje, že časť práce je svojou koncepciou celkom jednoduchá.

Odkaz na web: IWC

Chop Chop

Chop Chop

Digitálna ilustrácia nás privádza k Chop Chop s ten obraz, ktorý pohltí všetku jeho vizuálnu prítomnosť. Modrá farba v hlavičke dáva zmysel vytvárať chromatické hodnoty v súlade s celým obrazom premietaným webom.

Odkaz na web: Chop Chop

7Borovica

7Borovica

7Pine hrá so zelenou ako veľký protagonista domácej tabuľky. Zvyšok to skladá obrázok s množstvom zelenej farby a jednoduchou hlavičkou ktorý si chce nechať logo nevšimnúť.

Odkaz na web: 7Borovica

Sum

Sum

Sum nás vedie inými smermi. Pohrajte sa s legendárnou čiernobielou, veľmi kreatívnou ilustráciou a to ide ruka v ruke so zvyškom prvkov a dvoma ďalšími ilustráciami, ktoré vytvárajú viac ako zaujímavú krajinu. Príklad na vytvorenie webovej stránky, ktorá vyčnieva z radu.

Odkaz na web: Sum

Box na klobúky

Box na klobúky

Modrá je prevládajúcou farbou na tomto webe, kde nechýbajú obrázky plne osvetlené bielou farbou a to, ako by hra vyzerala v 3D daného nástroja na tvorbu webových stránok že sa hýbe, ako sa hýbeme.

Odkaz na web: Box na klobúky

Kara lyte

Kara lyte

Kara ide do jednoduchosť a minimalizmus s jeho prirodzenou a krásnou prítomnosťou na vašej fotografii. Zvyšok je text, ktorý prichádza spolu s hlavnými prvkami hlavičky a tlačidlom hamburger na jej otvorenie.

Odkaz na web: Kara lyte

Marketing Instrinsic Studio

vnútorné

Es najjednoduchšieho webu ale to nám ukazuje, čo to je, robiť si blog. Červená a čierna sú protagonisti veľmi „blogovej“ stránky.

Odkaz na web: Marketing Instrinsic Studio

Ako vytvoriť jednoduchý web v HTML

HTML

Budeme vás učiť vytvoriť jednoduchý web v HTML aby ste poznali najzákladnejšie prvky, ktoré ju tvoria. Bude potrebné mať web hostiteľa, kde budeme môcť načítať kód a niektoré vylepšenia v CSS, ale no tak, toto sú princípy, ktoré nám umožňujú začať našu cestu v HTML.

Keď som nejaké videl jednoduché príklady z webu Pomocou ktorých sa môžete dostatočne motivovať k vytváraniu vlastných návrhov bez toho, aby ste si poriadne lámali hlavu. Niekedy jednoduchý spôsobí lepší efekt, ako nás komplikuje v zložitých veciach. Uvidíte, že vo väčšine prípadov jednoduchý funguje veľmi dobre. Ísť na to.

Vytvorenie jednoduchej webovej stránky v HTML je jednoduchšie, ako sa spočiatku môže zdať. Webová stránka sa skladá z hlavičky, tela alebo obsah a päta alebo päta ako hlavné prvky. Môžeme ich klasifikovať takto:

  • Dokumenty: všetky dokumenty, ktoré vytvoríme, musia byť vyhotovené s . Otvárame s a vždy sa zatvára s
  • Telo alebo telo: viditeľná časť dokumentu je medzi Y.
  • Hlavičky: sú známe pod H1, H2, H3 ... Začíname s a a uzavrieme s . Text, ktorý je vo vnútri, sa zobrazí ako hlavička a v závislosti od jeho číslovania to urobí v menšej alebo väčšej veľkosti.
  • Odseky: odsek je vložený do a a zatvára sa
  • Odkazy: najjasnejší príklad jecreativosonline.org/»> Odkaz na Creativos Online
  • Obraznosť: definujeme ich štítkom . Príklad by mohol byť . Vyvoláme obraz medzi úvodzovkami a pre alternatívny text nevyhnutný pre SEO použijeme alt.
  • Zoznamy: zoznamy definujeme pomocou za chaotický a s pre úhľadnosť. Položky zoznamu sa používajú s . Vždy ich nezabudnite zavrieť pomocou lišty.

HTML

S týmito prvkami budeme mať základ pre vytvorenie jednoduchej webovej stránky ako uvidíte z ich veľkého množstva, ktoré vás naučíme v nasledujúcej časti. Povedzme, že sémantická štruktúra s najdôležitejšími prvkami vyzerá takto:

  • Hlavička s navigačnou lištou pre rôzne stránky webu.
  • Článok alebo priestor tela do ktorého môžeme vytvoriť blogový záznam, vložiť naše učebné osnovy alebo obrázok.
  • Bočný panel alebo bočný panel uviesť ďalšie informácie.
  • Päta alebo noha, kde umiestnime odkazy na najdôležitejšie stránky webu ako aj ikony sociálnych sietí (vždy ako príklad).

V príkladoch, ktoré uvidíte nižšie, sú všetko založené na jednoduchom, ale elegantnom logu, hlavička, kam umiestňujú navigáciu na rôzne stránky webu, centrálny priestor, v ktorom dominuje text alebo obrázok, a päta s prvkami uvedenými v predchádzajúcom odseku.

Odporúčame to nelámte si hlavu a choďte na jednoduché. Hlavná vec je, že tieto oblasti sú od ostatných odlíšené vo vizuálnom priebehu niekoľkých sekúnd. Časom sa budeme môcť skomplikovať a pracovať v ďalších priestoroch.

To je jasný príklad kódu HTML s najdôležitejšími prvkami:

<!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 týmito riadkami HTML kódu by sme mali najskôr vytvoril nadpis stránky v hlavičke pomocou, v tomto prípade «Semantic HTML», by sme obidva názvy zavreli pomocou , hlavička s a dali by sme priestor otvoriť telo pomocou .

Mali by sme prvá hlavička v H1 s uzavrieť to „Prejdeme na zoznam, ktorý nám pomôže vytvoriť navigačný panel pre rôzne stránky nášho webu. Zoznam uzatvárame pomocou , zatvárame a nakoniec html dokument s .

Do konca, vždy otvoriť dokument s zavriete ho na konci celého kódu lomítkom. Po otvorení dokumentu sa vždy použije odkaz na jazyk, ktorým je v tomto prípade španielčina s výrazmi „es“ a s .

Je dôležité, aby ste si pozorne a vždy prečítali kódex otvoríte funkciu a zatvoríte ju pomocou pruhu zodpovedajúcim spôsobom.

Trochu CSS

Trochu zachádzame do CSS, ale mimochodom, aby ste pochopili ako upravovať HTML. Povedzme, že CSS a HTML idú ruka v ruke s poskytovaním tých jednoduchých webových stránok, ktoré nájdete nižšie.

Ak na jednej strane máme sémantické použitie HTML pre to, čo je hlavička alebo hlavička, telo alebo telo s jeho článkom alebo obrázkom a päta, v CSS by sme na identifikáciu použili funkciu «Div» do každého z týchto priestorov, aby bolo možné neskôr uplatniť potrebné zmeny v dizajne.

Niečo také jednoduché ako:

Sémantika webu

Aj keď môžeme štýly použiť s Div, pomôže vhodná a dokonalá štruktúra aby mohli webové prehľadávače perfektne „čítať“, o čom je náš obsah, takže ak sa budeme riadiť touto základnou štruktúrou, budeme mať najskôr skvelú prácu a základňu.

Un jednoduchý príklad kódu CSS:

h1 {
farba: biely;
text-align: centrum;
}

Voláme H1 a text dáme do bielej farby: biela; a zarovnáme ho do stredu pomocou «zarovnania textu». Po otvorení hovoru H1 vždy zatvorte hranaté zátvorky.

Fotka hlavičky používateľa Greg rakozy


Zanechajte svoj komentár

Vaša e-mailová adresa nebude zverejnená. Povinné položky sú označené *

*

*

  1. Zodpovedný za údaje: Miguel Ángel Gatón
  2. Účel údajov: Kontrolný SPAM, správa komentárov.
  3. Legitimácia: Váš súhlas
  4. Oznamovanie údajov: Údaje nebudú poskytnuté tretím stranám, iba ak to vyplýva zo zákona.
  5. Ukladanie dát: Databáza hostená spoločnosťou Occentus Networks (EU)
  6. Práva: Svoje údaje môžete kedykoľvek obmedziť, obnoviť a vymazať.

      Cristopher - webová stránka dijo

    Som naozaj vášnivý aj pre dizajn, dobrú stránku prezerania sveta dizajnu.

    S Pozdravom.

      Jorge dijo

    Ahojte priatelia, ako ste na tom vy?

    Tvorím veľmi jednoduchú webovú stránku v html a ku každej publikácii by som chcel pridať pole pre komentár. Mohli by ste mi poradiť, ako na to?

      Emerson dijo

    Tí z nás, ktorí potrebujú veľmi jednoduchú webovú stránku s tromi tlačidlami a obrázkom, a v každom prípade prehrávač, by niečo také bolo veľmi užitočné.
    Neverím však, že s týmito informáciami dokážem vytvoriť svoju stránku, ale aspoň vám poskytne nápady a čo hľadať