30 Utrolig enkle websider

Noen av de mest kjente sidene er veldig overbelastet med informasjon, men jeg foretrekker det motsatte: de enkle.

Åpenbart er den store eksponenten til denne gruppen Google med sin minimalistiske hjemmeside siden den startet reisen, Men det er tydeligvis ikke den eneste på Internett som er forpliktet til å holde ting enkelt.

Enkle HTML-nettsideeksempler

Kean richmond

Kean Richmond får oss til å se enkelheten i å spille med få elementer, men veldig godt plassert til gi minimalisme en god følelse. Logoen hans øverst til venstre, Twitter- og kontaktikonene til høyre og i sentrum, med en iøynefallende typografi, til det han er dedikert.

Lenke til nettet: Keanrich mond

Alice drougard

Alice drougard hold det enkelt også med logoen din plassert i midten, fire faner for å flytte mellom hovedsidene på nettstedet ditt og en serie bilder som er riktig plassert slik at vi med et øyeblikk vet hva du gjør og hva du gjør.

Lenke til nettet: Alice drougard

jonathan ogden

Ogden fortsett å leke med hvor enkelt navnet ditt er som en logo, de sosiale nettverkene som ligger rett nedenfor uten å tiltrekke seg oppmerksomhet, og deres design fungerer slik at vi raskt kan gå gjennom dem. På en side viser det alt som betyr noe.

Lenke til nettet: jonathan ogden

Finch

Finch skal allerede til andre steder for å leke med typografi og de farger som betegner eleganse og visdom av hva den gjør. Med bare noen få elementer legger han all profesjonaliteten i sikte. Det gjør det også klart hvilke sider som har lenket til deg.

Lenke til nettet: Finch

Et annet design

Dette nettstedet spille annerledes. Bruk et bakgrunnsbilde med en overskrift der vi kan gå til hovedsidene, telefonen din og lenkene til dine sosiale nettverk.

Lenke til nettet: Et annet design

rask

Kai illustrerer oss med sin egen figur med en abstrakt trekant og en passende fargepalett å gi nærhet. Han tilbyr også en del av biografien sin med en skrift i mindre størrelse i tilfelle vi vil vite mer om ham.

Lenke til nettet: rask

Vertikal hagedesign

Som den forrige går Vertical Garden Design mot et fotografi som viser raskt en av hans beste jobber på Oslo lufthavn. Øverst har vi overskriften med «nav-linjen» eller navigasjonslinjen og til og med muligheten for å endre språk. Logoen setter den i vertikalt format for å gi det siste preg på en veldig enkel side.

Lenke til nettet: Vertikal hagedesign

247 grad

247 grad lek med monokrom og et bakgrunnsbilde nesten helt mørkt. Overskriftsfonten, mindre enn teksten og overskriften, er stort med store bokstaver for å skape en stor kontrast i det generelle designet.

Lenke til nettet: 247 grad

Nyt dette

en god typografi kan være et tegn på å være autentisk og at vi vet hva vi gjør. Du trenger ikke å gi noe mer hvis meldingen er direkte. De gjør det veldig klart: de elsker å lage vakre apper og nettsteder. De legger igjen posten for prosjekter og studiet i en annen lenke.

Lenke til nettet: Nyt dette

Allison hou

Allison tar oss før andre kurs og inkluderer flere bilder og det mer "feminine" skriftet. Det samme gjelder hovedbildet og toppteksten. Han har luksusen med å presentere et kort som viser shoppingtriks.

Lenke til nettet: Allison hou

pixelot

Pixelot er litt gal, men det indikerer også forfatterens kreativitet. Bruk musepekeren for å lage en maske som sløres uansett hvor vi sitter.

Lenke til nettet: pixelot

Lionel scholtes

Hvis du vil lag ditt CV online med ingenting mer enn det, Lionel viser deg trinnene. En passende skrift, bildet ditt øverst til venstre, lenker til dine sosiale nettverk og din opplevelse. Det eneste dekorative elementet er de to horisontale linjene i forskjellige farger.

Lenke til nettet: Lionel scholtes

Elegante måker

Vi returnerer til minimalismens eleganse og de store tomme områdene. På den ene siden er toppteksten veldig langt fra resten av elementene, og på den annen side er elementene formet på en slik måte at de skaper en stor visuell harmoni mellom dem.

Lenke til nettet: Elegante måker

habitat

Som du kan se i alle eksemplene, er det viktig topptekstfanen for å gå til de forskjellige sidene fra nettstedet. Typografien er av stor betydning, spill med en for overskriften og en annen for teksten med en sans serif som gjør en god jobb.

Lenke til nettet: habitat

PinkPoint

Kontrasten av farger fører oss til et litt mer komplekst nett av alle visningene. Ikke alle disse hovedelementene mangler for å spille denne gangen med gradientene for bakgrunnsbildet og de to delene som har hovedfargene til gradienten for hovedbildet.

Lenke til nettet: PinkPoint

IWC

Et flott fotografi med en velvalgt font og et "helt" -element du kan gi til dette nettet. Med en glidebryter viser det at en del av arbeidet er ganske enkelt i sin oppfatning.

Lenke til nettet: IWC

Kutt kutt

Digital illustrasjon bringer oss til Chop Chop med det bildet som spiser opp all den visuelle tilstedeværelsen av det. Den blå fargen i overskriften gir det sin mening å lage kromatiske verdier i samsvar med hele bildet som projiseres av nettet.

Lenke til nettet: Kutt kutt

7 Furu

7Pine leker med greenen for å være den store hovedpersonen til hjemmeplaten. Resten komponerer det et bilde med mye grønt og en enkel overskrift som vil gå ubemerket av logoen.

Lenke til nettet: 7 Furu

Summen

Summen tar oss i andre retninger. Spill med den sagnomsuste sorte og hvite, en veldig kreativ illustrasjon og det går hånd i hånd med resten av elementene og to andre illustrasjoner for å skape et mer enn interessant landskap. Et eksempel på å lage et nettsted som skiller seg ut fra resten.

Lenke til nettet: Summen

Hatteboks

Blå er den dominerende fargen på dette nettstedet der det ikke mangler bilder som er fullstendig opplyst av hvitt og hvordan spillet ser ut i 3D av den byggherren som beveger seg når vi beveger oss.

Lenke til nettet: Hatteboks

Kara lyte

Kara går til enkelhet og minimalisme med sin naturlige og vakre tilstedeværelse på bildet ditt. Resten er en tekst som følger med hva som er hovedelementene for overskriften og en hamburger-knapp for å åpne den.

Lenke til nettet: Kara lyte

Intrinsic Studio Marketing

Es av det enkleste nettet men det viser oss hva det er å lage en blogg. Rødt og svart er hovedpersonene i et veldig "blogg" nettsted.

Lenke til nettet: Intrinsic Studio Marketing

Hvordan lage et enkelt nettsted i HTML

Vi skal lære deg lage et enkelt nettsted i HTML slik at du kjenner de mest grunnleggende elementene som komponerer det. Det vil være nødvendig å ha et webhotell hvor vi kan laste inn koden og noen justeringer i CSS, men kom igjen, dette er prinsippene for å begynne vår reise i HTML.

Etter å ha sett noen enkle eksempler på nettet Med hvilken du kan motivere deg selv nok til å lage dine egne design uten å knuse hodet mye. Noen ganger skaper det enkle en bedre effekt enn å komplisere oss i komplekse ting. Du vil se at i de fleste tilfeller fungerer det enkle veldig bra. Gå for det.

Å lage et enkelt nettsted i HTML er lettere enn det kan se ut til å begynne med. En nettside består av en topptekst, kroppen eller innhold og bunnteksten eller bunnteksten som hovedelementer. Vi kan klassifisere dem på denne måten:

• Dokumenter: alle dokumentene vi skal lage må gjøres med en . Vi åpner med en og lukkes alltid med en
• Kroppen eller kroppen: den synlige delen av dokumentet er mellom Y
• Overskrifter: de er kjent av H1, H2, H3 ... Vi starter med en og vi avslutter med en . Teksten som er inne, vises som en overskrift, og avhengig av nummereringen vil den gjøre det i mindre eller større størrelse.
• Avsnitt: avsnittet er omsluttet av a og lukkes med
• Lenker: det klareste eksemplet ercreativosonline.org/»> Link til Creativos Online
• Imagery: vi definerer dem etter etiketten . Et eksempel vil være . Vi påkaller bildet mellom anførselstegnene og bruker et alt for den alternative teksten som for SEO er viktig.
• lister: vi definerer listene med for en rotete og med for et pent. Listeelementer brukes med . Husk alltid å lukke dem med baren.

Med disse elementene vil vi ha grunnlaget for å lage et enkelt nettsted som du vil se i den store mengden av dem som vi vil lære deg i neste avsnitt. La oss si at den semantiske strukturen med de viktigste elementene ser slik ut:

• Topptekst med navigasjonslinjen for de forskjellige sidene på nettstedet.
• Artikkelen eller kroppsrommet der vi kan lage et blogginnlegg, sette CV eller et bilde.
• Sidefeltet eller sidefeltet å legge til ytterligere informasjon.
• Bunnteksten eller foten, hvor vi vil plassere lenker til de viktigste sidene på nettstedet, samt ikonene til sosiale nettverk (alltid som et eksempel).

I eksemplene du vil se nedenfor er alt basert på en enkel, men elegant logo, en topptekst der de plasserer navigasjonen til de forskjellige sidene på nettstedet, et sentralt rom dominert av en tekst eller et bilde og en bunntekst med elementene nevnt i forrige avsnitt.

Vi anbefaler det ikke knekk hodet og gå til det enkle. Det viktigste er at disse områdene er differensiert fra resten i en visuell passering av sekunder. Med tiden vil vi være i stand til å komplisere oss selv og jobbe flere andre rom.

Dette er et tydelig eksempel på en HTML-kode med de viktigste elementene:

<!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 linjene med HTML-kode ville vi ha opprettet først sidetittelen i overskriften med, i dette tilfellet «Semantic HTML», ville vi lukke begge tittelen med , toppteksten med og vi ville vike for å åpne kroppen med .

Vi ville ha en første topptekst i H1 med å lukke den med , og vi vil gå til en liste som vil hjelpe oss med å lage navigasjonsfeltet for de forskjellige sidene på nettstedet vårt. Vi stenger listen med , vi stenger og til slutt html-dokumentet med .

Å ende, alltid åpne et dokument med for å lukke den på slutten av hele koden med skråstrek. Etter at du har åpnet dokumentet, brukes alltid referansen til språket, som i dette tilfellet er spansk med "es" og med a .

Det er viktig at du ser nøye på koden og når som helst du åpner en funksjon, lukk den med baren tilsvarende.

Litt CSS

Vi går litt inn i CSS, men i forbifarten slik at du forstår hvordan man styler HTML. La oss si at CSS og HTML går hånd i hånd for å gi de enkle nettstedene som du finner nedenfor.

Hvis vi på den ene siden har semantisk bruk av HTML for hva som er toppteksten, kroppen eller kroppen med artikkelen eller bildet og bunnteksten, i CSS vil vi bruke «Div» -funksjonen til å identifisere til hvert av disse plassene for senere å bruke de nødvendige endringene i designet.

Noe så enkelt som:

Mens vi kan bruke stilene med Div, en passende og perfekt struktur vil hjelpe slik at webcrawlere kan "lese" perfekt hva innholdet vårt handler om, så hvis vi følger den grunnleggende strukturen, vil vi ha en god jobb og base først.

Un enkelt CSS-kodeeksempel:

h1 {
farge: hvit;
text-align: senter;
}

Vi kaller H1 og teksten vi vil sette den i hvitt med farge: hvit; og vi vil justere den mot sentrum med «text align». Lukk alltid med firkantede parenteser etter åpning til H1-samtalen.

Toppbilde av Greg rakozy