30 Utroligt enkle websider

Nogle af de mest berømte sider er meget overbelastede med information, men jeg foretrækker det modsatte: de enkle.

Naturligvis er den store eksponent for denne gruppe Google med sin minimalistiske hjemmeside, siden den begyndte sin rejse, Men det er tydeligvis ikke den eneste på Internettet, der er forpligtet til at holde tingene enkle.

Enkle HTML-websideeksempler

Kean richmond

Kean Richmond får os til at se enkelheden ved at spille med få elementer, men meget godt placeret til give minimalisme en god fornemmelse. Hans logo øverst til venstre, Twitter- og kontaktikonerne til højre og i midten med en slående typografi til det, han er dedikeret.

Link til internettet: Keanrich mond

Alice drougard

Alice drougard hold det enkelt også med dit logo placeret i midten, fire faner til at flytte mellem hovedsiderne på dit websted og en serie fotografier, der er placeret korrekt, så vi ved et øjeblik kan vide, hvad du laver, og hvad du gør.

Link til internettet: Alice drougard

jonathan ogden

Ogden bliv ved med at lege med, hvor enkelt dit navn er som et logo, de sociale netværk lige nedenunder uden at tiltrække opmærksomhed, og deres design fungerer, så vi hurtigt kan gå igennem dem. På den ene side viser det alt, hvad der betyder noget.

Link til internettet: jonathan ogden

Finch

Finch går allerede til andre steder for at lege med typografi og dem farver, der betegner elegance og visdom af, hvad det gør. Med blot nogle få elementer efterlader han al sin professionalisme. Det gør det også klart, hvilke sider der har linket til dig.

Link til internettet: Finch

Et andet design

Dette websted spille anderledes. Brug et tapet med et overskrift, hvorfra vi kan gå til hovedsiderne, din telefon og linkene til dine sociale netværk.

Link til internettet: Et andet design

rask

Kai illustrerer os med sin egen figur med en abstrakt trekant og en passende farvepalet at give nærhed. Han tilbyder også en del af sin biograf med en skrifttype i mindre størrelse, hvis vi vil vide mere om ham.

Link til internettet: rask

Lodret havedesign

Ligesom den forrige går Vertical Garden Design mod et fotografi, der viser hurtigt et af hans bedste job i Oslo lufthavn. Øverst har vi overskriften med «nav-bjælken» eller navigationslinjen og endda muligheden for at ændre sprog. Logoet sætter det i lodret format for at give det sidste touch til en meget enkel side.

Link til internettet: Lodret havedesign

247Grad

247Grad leg med monokrom og et baggrundsbillede næsten helt mørkt. Overskriftsskrifttypen, mindre end teksten og overskriften, er stort med store bogstaver for at skabe en stor kontrast i det overordnede design.

Link til internettet: 247Grad

Nyd dette

en stor typografi kan være tegn på at være autentisk og at vi ved, hvad vi gør. Du behøver ikke give noget mere, hvis beskeden er direkte. De gør det meget klart: de elsker at oprette smukke apps og websteder. De efterlader posten til projekter og deres undersøgelse i et andet link.

Link til internettet: Nyd dette

Allison hou

Allison tager os før andre kurser og inkluderer flere billeder og det mere "feminine" skrifttype. Det samme gælder for dit hovedbillede og det overskrift. Han har den luksus at præsentere et kort, der viser shoppingtricks.

Link til internettet: Allison hou

pixelot

Pixelot er lidt skør, men det indikerer også forfatterens kreativitet. Brug musemarkøren for at oprette en maske det udviskes, uanset hvor vi har det.

Link til internettet: pixelot

Lionel scholtes

Hvis du vil lav dit CV online med intet mere end det, Lionel viser dig trinene. En passende skrifttype, dit foto øverst til venstre, links til dine sociale netværk og din oplevelse. Det eneste dekorative element er de to vandrette linjer i forskellige farver.

Link til internettet: Lionel scholtes

Elegante måger

Vi vender tilbage til minimalismens elegance og de store tomme rum. På den ene side er overskriften meget langt fra resten af ​​elementerne, og på den anden side er disse elementer formet på en sådan måde, at de skaber en stor visuel harmoni mellem dem.

Link til internettet: Elegante måger

levested

Som du kan se i alle eksemplerne, er det vigtigt header-fanerne for at gå til de forskellige sider fra hjemmesiden. Typografien er af stor betydning, leg med en til overskriften og en anden til teksten med en sans serif, der gør et godt stykke arbejde.

Link til internettet: levested

PinkPoint

Kontrast af farver fører os til et lidt mere komplekst web af alle udsigterne. Ikke alle disse hovedelementer mangler for at lege med gradienterne for baggrundsbilledet denne gang og de to sektioner, der har hovedfarverne for gradienten til hovedbilledet.

Link til internettet: PinkPoint

IWC

Et godt fotografi med en velvalgt skrifttype og et "helt" -element du kan give til dette web. Med en skyder viser det, at en del af arbejdet er ret simpelt i sin opfattelse.

Link til internettet: IWC

Chop Chop

Digital illustration fører os til Chop Chop med det billede, der spiser hele den visuelle tilstedeværelse af det. Den blå farve i overskriften giver det sin mening at oprette kromatiske værdier i overensstemmelse med hele det billede, der projiceres af internettet.

Link til internettet: Chop Chop

7Fyr

7Pine leger med det grønne for at være den store hovedperson på hjemmepladen. Resten komponerer det et billede med masser af grønt og et simpelt overskrift der ønsker at gå ubemærket hen af ​​logoet.

Link til internettet: 7Fyr

Summen

Summen tager os i andre retninger. Spil med sagnomspundne sorte og hvide, en meget kreativ illustration og det følger med resten af ​​elementerne og to andre illustrationer for at skabe et mere end interessant landskab. Et eksempel på at oprette et websted, der skiller sig ud fra resten.

Link til internettet: Summen

Hatteæske

Blå er den dominerende farve på dette websted, hvor der ikke mangler billeder, der er fuldt oplyst af hvidt, og hvordan spillet ser ud i 3D for den stedbygger det bevæger sig, når vi bevæger os.

Link til internettet: Hatteæske

Kara lyte

Kara går til enkelhed og minimalisme med sin naturlige og smukke tilstedeværelse på dit fotografi. Resten er en tekst, der følger med, hvad der er hovedelementerne til headeren og en hamburger-knap til at åbne den.

Link til internettet: Kara lyte

Intrinsic Studio Marketing

Es af det enkleste web men det viser os, hvad det er at lave en blog. Rød og sort er hovedpersonerne i en meget "blog" side.

Link til internettet: Intrinsic Studio Marketing

Sådan oprettes et simpelt websted i HTML

Vi skal lære dig oprette et simpelt websted i HTML så du kender de mest grundlæggende elementer, der komponerer det. Det vil være nødvendigt at have en webhost, hvor vi kan indlæse koden og nogle justeringer i CSS, men kom igen, det er principperne for at begynde vores rejse i HTML.

Efter at have set nogle enkle webeksempler Med hvilken du kan motivere dig selv nok til at lave dine egne designs uden at bryde hovedet meget. Nogle gange skaber det enkle en bedre effekt end at komplicere os i komplekse ting. Du vil se, at i de fleste tilfælde fungerer det enkle meget godt. Gå efter det.

Oprettelse af et simpelt websted i HTML er lettere, end det kan synes i starten. Et websted består af et header, kroppen eller indhold og sidefoden eller sidefoden som hovedelementer. Vi kan klassificere dem på denne måde:

• Dokumenter: alle de dokumenter, vi skal oprette, skal udføres med en . Vi åbner med en og lukker altid med en
• Kroppen eller kroppen: den synlige del af dokumentet er mellem Y
• Overskrifter: de er kendt af H1, H2, H3 ... Vi starter med en og vi lukker med en . Teksten, der er indeni, vises som et overskrift, og det afhænger af nummereringen i en mindre eller større størrelse.
• Stk: afsnittet er omsluttet af a og lukker med
• Links: det klareste eksempel ercreativosonline.org/»> Link til Creativos Online
• Billedsprog: vi definerer dem ved hjælp af etiketten . Et eksempel ville være . Vi påkalder billedet mellem anførselstegnene og bruger et alt til den alternative tekst, som for SEO er vigtig.
• Lister: vi definerer listerne med for en rodet og med for et pænt. Listeelementer bruges sammen med . Husk altid at lukke dem med baren.

Med disse elementer vil vi have grundlaget for oprettelse af et simpelt websted som du vil se i den store mængde af dem, som vi vil lære dig i næste afsnit. Lad os sige, at den semantiske struktur med de vigtigste elementer ser sådan ud:

• Sidehoved med sin navigationslinje til de forskellige sider på webstedet.
• Artiklen eller kropsrummet hvor vi kan oprette et blogindlæg, sætte vores CV eller et billede.
• Sidebjælken eller sidebjælken at tilføje yderligere oplysninger.
• Sidefoden eller foden, hvor vi placerer links til de vigtigste sider på webstedet samt ikonerne på sociale netværk (altid som et eksempel).

I eksemplerne, som du vil se nedenfor, er alt baseret på et simpelt, men elegant logo, et overskrift, hvor de placerer navigationen til de forskellige sider på webstedet, et centralt rum domineret af en tekst eller et billede og en sidefod med de elementer, der er nævnt i det foregående afsnit.

Vi anbefaler det ikke bryde hovedet og gå til det enkle. Det vigtigste er, at disse områder adskiller sig fra resten i et visuelt gennemløb af sekunder. Med tiden vil vi være i stand til at komplicere os selv og arbejde på flere andre rum.

Dette er et klart eksempel på en HTML-kode med de vigtigste elementer:

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

Med disse linjer af HTML-kode ville vi have oprettede først sidetitlen i overskriften med, i dette tilfælde «Semantisk HTML», ville vi lukke begge titler med , header med og vi ville vige for at åbne kroppen med .

Vi ville have en første overskrift i H1 med at lukke det med , og vi ville gå til en liste, der ville hjælpe os med at oprette navigationslinjen til de forskellige sider på vores site. Vi lukker listen med , vi lukker og endelig html-dokumentet med .

For at afslutte, åbn altid et dokument med for at lukke den i slutningen af ​​hele koden med skråstreg. Efter åbning af dokumentet bruges der altid henvisningen til sproget, som i dette tilfælde er spansk med "es" og med en .

Det er vigtigt, at du ser nøje på koden og når som helst du åbner en funktion, luk den med bjælken tilsvarende.

Lidt af CSS

Vi går lidt ind i CSS, men i forbifarten, så du forstår hvordan man styler HTML. Lad os sige, at CSS og HTML går hånd i hånd for at give de enkle websteder, som du finder nedenfor.

Hvis vi på den ene side har semantisk brug af HTML til hvad der er overskriften, kroppen eller kroppen med dens artikel eller billede og sidefoden, i CSS bruger vi funktionen «Div» til at identificere til hvert af disse rum for senere at anvende de nødvendige ændringer i designet.

Noget så simpelt som:

Mens vi kan anvende typografierne med Div, en passende og perfekt struktur hjælper så webcrawlere kan "læse" perfekt, hvad vores indhold handler om, så hvis vi følger den grundlæggende struktur, har vi et godt stykke arbejde og en base først.

Un simpelt CSS-kodeeksempel:

h1 {
farve: hvid;
text-align: center;
}

Vi kalder H1 og teksten vi sætter det i hvidt med farve: hvid; og vi vil justere det til midten med «tekstjustering». Luk altid med firkantede parenteser efter åbning til H1-opkaldet.

Sidehovedfoto af Greg rakozy