30 web orri izugarri sinpleak

Orrialde ospetsuenetako batzuk informazioz gainkargatuta daude, baina nik kontrakoa nahiago dut: sinpleak.

Bistan denez, talde honen erakusle nagusia Google da bere hasierako orri minimalista, bere ibilbidea hasi zuenetik, baina, argi dago, ez da Interneten gauza soilak mantentzeko konpromisoa hartzen duen bakarra.

HTML web orrien adibide sinpleak

Kean Richmond

Kean Richmondek elementu gutxirekin jolasteko sinpletasuna ikusarazten digu, baina oso ondo kokatuta dago eman sentsazio bikaina minimalismoari. Bere logoa goiko ezkerrean, Twitter eta harremanetarako ikonoak eskuinean eta erdian, tipografia deigarriarekin, eskainitakoari.

Webera esteka: Keanrich mond

Alice drougard

Alice drougard mantendu erraza zure logotipoa jarrita ere erdian, lau fitxa zure webguneko orri nagusien artean mugitzeko eta egoki jarritako argazki sorta, begirada batean zer egiten duzun eta zer egiten duzun jakiteko.

Webera esteka: Alice drougard

jonathan ogden

Ogden jarraitu jolasten zure izena zein erraza den logotipo gisa, arreta erakarri gabe azpian kokatzen diren sare sozialak eta haien diseinua azkar funtzionatu ahal izateko. Orrialde batean axola duen guztia erakusten du.

Webera esteka: jonathan ogden

Finch

Finch dagoeneko beste leku batzuetara doa tipografiarekin eta horiekin jolasteko egiten duenaren dotorezia eta jakinduria adierazten duten koloreak. Elementu gutxi batzuekin, profesionaltasun guztia uzten du. Zurekin zein orrialde lotu dituzten ere argi uzten du.

Webera esteka: Finch

Diseinu ezberdina

Webgune hau desberdin jokatu. Erabili horma papera goiburuarekin eta bertatik orrialde nagusietara, telefonoa eta sare sozialetarako esteketara joan gaitezke.

Webera esteka: Diseinu ezberdina

bizkor

Kaik bere irudiarekin ilustratzen gaitu triangelu abstraktua eta kolore paleta egokia gertutasuna emateko. Bere biografiaren zati bat tamaina txikiagoko letra tipo batekin ere eskaintzen du, hari buruz gehiago jakin nahi badugu.

Webera esteka: bizkor

Lorategi Diseinu Bertikala

Aurrekoaren antzera, Lorategi Bertikalaren Diseinuak azkar erakusten duen argazki baterantz doa bere lan onenetako bat Osloko aireportuan. Goialdean goiburua «nab barra» edo nabigazio barrarekin eta hizkuntza aldatzeko aukera ere badugu. Logotipoak formatu bertikalean jartzen du orri oso sinpleari azken ukitua emateko.

Webera esteka: Lorategi Diseinu Bertikala

247Gradua

247Gradua jolastu monokromoarekin eta atzeko irudiarekin ia guztiz iluna. Goiburuko letra-tipoa, testua eta goiburua baino txikiagoa, letra larriz idazten da diseinu orokorrean kontraste handia sortzeko.

Webera esteka: 247Gradua

Gozatu hau

a tipografia bikaina benetakoa izatearen seinale izan daiteke eta badakigula zer egiten dugun. Ez duzu ezer gehiago eman behar mezua zuzena bada. Argi dute: aplikazio eta webgune ederrak sortzea maite dute. Proiektuetarako eta ikasketetarako posta beste esteka batean uzten dute.

Webera esteka: Gozatu hau

Allison hou

Allison-ek eramaten gaitu beste ikastaro batzuen aurretik eta irudi gehiago biltzen ditu eta letra mota "femeninoago" hori. Gauza bera gertatzen da zure irudi nagusiarekin eta goiburuarekin. Erosketak egiteko trikimailuak erakusten dituen txartela aurkezteko luxua du.

Webera esteka: Allison hou

pixelot

Pixelot zoro samarra da, baina egilearen sormena ere adierazten du. Erabilera saguaren erakuslea maskara bat sortzeko hori lausotzen da guk daukagun lekuan.

Webera esteka: pixelot

Lionel eskolarrak

Nahi baduzu egin zure curriculuma linean hori baino ez, Lionelek urratsak erakusten dizkizu. Letra tipo egokia, goiko ezkerreko argazkia, zure sare sozialetarako estekak eta zure esperientzia. Dekorazio elementu bakarra kolore desberdineko bi lerro horizontal horiek dira.

Webera esteka: Lionel eskolarrak

Kaioak dotoreak

Itzuliko gara minimalismoaren dotoreziara eta espazio huts handi haiek. Alde batetik goiburua gainontzeko elementuetatik oso urrun dago, eta, bestetik, haien artean ikusizko harmonia handia sortzen duten moduan moldatutako elementuak.

Webera esteka: Kaioak dotoreak

Lebensraum

Adibide guztietan ikus dezakezun moduan, garrantzitsua da goiburuko fitxak orrialde desberdinetara joateko webgunetik. Tipografiak garrantzi handia du, jolastu goiburuarekin eta beste batekin lan bikaina egiten duen sans serifarekin.

Webera esteka: Lebensraum

PinkPoint

Koloreen kontrasteak ikuspegi guztien sare pixka bat konplexuago batera garamatza. Elementu nagusi horiek guztiak ez dira falta oraingoan atzeko irudiko gradienteekin eta irudi nagusirako gradientearen kolore nagusiak dituzten bi atal horiekin jolasteko.

Webera esteka: PinkPoint

IWC

Argazki bikaina ondo aukeratutako letra mota eta "heroi" elementua web honi eman diezaiokezu. Irristailu batekin obraren zati bat nahiko sinplea dela erakusten du.

Webera esteka: IWC

Txuleta txikitu

Ilustrazio digitalak Chop Chop-ekin garamatza haren presentzia bisual guztia jaten duen irudi hori. Goiburuko kolore urdinak sareak proiektatutako irudi osoarekin sintonizatuta dauden balio kromatikoak sortzeko puntua ematen dio.

Webera esteka: Txuleta txikitu

7Pinua

7Pine berdearekin jolasten da etxeko plateraren protagonista bikaina izateko. Gainerakoek osatzen dute berde asko eta goiburu sinplea duen irudia logoak oharkabean pasa nahi du.

Webera esteka: 7Pinua

Batuketa

Batuketak beste norabide batzuetara eramaten gaitu. Jolastu zuri-beltzeko fabularekin, oso sormenezko ilustrazioarekin eta hori gainerako elementuekin eta beste bi ilustrazioekin batera doa paisaia interesgarria baino gehiago sortzeko. Adibide bat gainerakoetatik nabarmentzen den webgunea sortzeko.

Webera esteka: Batuketa

Kapela-kutxa

Urdina da webgune honetako kolorea nagusi. Zuriak guztiz argitutako irudiak eta jokoak nolakoak izango liratekeen ez da falta gune eraikitzaile horretako 3Dan hori mugitzen garen heinean mugitzen da.

Webera esteka: Kapela-kutxa

Kara lyte

Kara joaten da soiltasuna eta minimalismoa bere presentzia natural eta ederrarekin zure argazkian. Gainerakoa goiburuko elementu nagusiak zein diren eta irekitzeko hanburgesa botoiarekin bat datorren testua da.

Webera esteka: Kara lyte

Instrinsic Studio Marketina

Es web errazena baina horrek blog bat egitea zer den erakusten digu. Gorria eta beltza dira oso "blog" gune bateko protagonistak.

Webera esteka: Instrinsic Studio Marketina

Nola sortu webgune sinplea HTML-n

Irakatsiko dizuegu sortu webgune sinplea HTML-n hura osatzen duten elementurik oinarrizkoenak ezagutu ditzazun. Beharrezkoa izango da web ostalari bat edukitzea, non kodea eta CSS-n zenbait aldaketa karga ditzakegun, baina tira, hauek dira gure ibilbidea HTML bidez hasteko printzipioak.

Batzuk ikusita web adibide sinpleak Horrekin nahikoa motibatu dezakezu zure diseinuak egiteko burua asko hautsi gabe. Batzuetan sinpleak gauza konplexuetan konplikatzea baino efektu hobea sortzen du. Ikusiko duzu kasu gehienetan sinpleak oso ondo funtzionatzen duela. Joan zaitez.

Webgune sinplea HTMLn sortzea hasiera batean dirudiena baino errazagoa da. Webgune bat goiburua du, gorputza edo edukia eta orri-oina edo orri-oina elementu nagusi gisa. Horrela sailka ditzakegu:

• Dokumentuak: sortuko ditugun dokumentu guztiak a-rekin egin behar dira . Batekin irekitzen dugu eta beti itxi egiten du
• Gorputza edo gorputza: dokumentuaren zati ikusgaia artean dago Y
• Goiburuak: H1, H2, H3 bidez ezagutzen dira ... a-rekin hasten gara eta batekin ixten dugu . Barruan dagoen testua goiburu gisa agertuko da eta zenbakitzearen arabera tamaina txikiagoan edo handiagoan egingo du.
• Paragrafoak: paragrafoa a barruan sartzen da eta honekin ixten da
• Loturak: adibiderik argiena Link to Creativos Online da
• Irudiak: etiketaren bidez definitzen ditugu . Adibide bat litzateke . Komatxoen arteko irudia deitzen dugu eta alternatiboa erabiltzen dugu SEOrako ezinbestekoa den testu alternatiboarentzat.
• zerrendak: zerrendak honekin definitzen ditugu nahastu eta batera txukun egiteko. Zerrendako elementuak erabiltzen dira . Gogoan izan beti barrarekin ixten.

Elementu hauekin izango ditugu webgune sinple bat sortzeko oinarria hurrengo atalean irakatsiko dizkizugun kopuru onean ikusiko duzun bezala. Demagun egitura semantikoak bere elementu garrantzitsuenekin itxura hau duela:

• Goiburua bere nabigazio barrarekin guneko orrialde desberdinetarako.
• Artikulua edo gorputzaren espazioa bertan blogeko mezu bat sor dezakegu, gure curriculuma edo irudi bat jarri.
• Alboko barra edo alboko barra informazio osagarria jartzeko.
• Oina edo oina, webguneko orrialde garrantzitsuenetara eta sare sozialetako ikonoetara (beti adibide gisa) estekak jarriko ditugu.

Jarraian ikusiko dituzun adibideetan daude dena logotipo sinple baina dotorean oinarrituta, goiburua non guneko orrialde desberdinetarako nabigazioa kokatzen duten, testu edo irudi bat nagusi den espazio zentrala eta aurreko paragrafoan aipatutako elementuekin orri bat.

Hori gomendatzen dugu ez ezazu burua hautsi eta joan errazenera. Garrantzitsuena da arlo horiek gainerakoetatik bereizten direla segundo batzuetako ikusizko pasaldian. Denborarekin gure burua zaildu eta beste espazio batzuetan gehiago lan egiteko gai izango gara.

Hau da, HTML kode baten adibide argia elementu garrantzitsuenekin:

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

HTML kode lerro hauekin izango genituzke orrialdearen izenburua lehenengo goiburuan sortu du, kasu honetan «HTML semantikoa» izenburuarekin itxiko genuke , goiburua eta guk gorputza irekitzeko bidea emango genuke .

A izango genuke lehen goiburua H1-rekin honekin ixteko , eta gure webguneko orrialde desberdinetarako nabigazio barra sortzen lagunduko ligukeen zerrendara joango gara. Zerrenda honekin ixten dugu , itxi egiten dugu eta, azkenik, html dokumentua .

Amaitzeko, ireki beti dokumentuarekin barra osoarekin kode osoaren amaieran ixteko. Dokumentua ireki ondoren, hizkuntzaren erreferentzia erabiltzen da beti, kasu honetan gaztelania da «es» -rekin eta a-rekin .

Garrantzitsua da kodea eta noiznahi begiratzea funtzio bat irekitzen duzu itxi barrarekin dagokionez.

CSS pixka bat

CSS-ra sartzen gara pixka bat, baina bide batez uler dezazun HTML estilizatzeko modua. Demagun CSS eta HTML eskuz esku doazela jarraian aurkituko dituzun webgune erraz horiei.

Alde batetik HTMLren erabilera semantikoa badugu goiburua, gorputza edo gorputza bere artikuluarekin edo irudiarekin eta orri-oinarekin, CSSn «Div» funtzioa erabiliko genuke identifikatzeko espazio horietako bakoitzari gero diseinuan beharrezko aldaketak aplikatzeko.

Bezain erraza:

Estiloak Div-ekin aplika ditzakegun arren, egitura egoki eta perfektu batek lagunduko du beraz, web arakatzaileek gure edukia zertan den "irakurri" dezakete, beraz, oinarrizko egitura hori jarraituz gero, lan eta oinarri bikaina izango dugu.

Un CSS kode adibide sinplea:

h1 {
kolore: zuria;
testua lerrokatu: zentro;
}

H1 eta testuari deitzen diogu zuriz jarriko dugu kolorearekin: zuria; eta erdira lerrokatuko dugu «testu lerrokatzearekin». Itxi beti kortxeteekin H1 deia ireki ondoren.

Goiburuaren argazkia Greg rakozy