30 Uebfaqe tepër të thjeshta

Disa nga faqet më të famshme janë shumë të mbingarkuara me informacion, por unë preferoj të kundërtën: ato të thjeshta.

Padyshim që eksponenti i shkëlqyeshëm i këtij grupi është Google me faqen e tij minimale në shtëpi që kur filloi udhëtimin e tij, Por padyshim që nuk është i vetmi në Internet që është i përkushtuar për t'i mbajtur gjërat thjeshtë.

Shembuj të thjeshtë të faqeve HTML

Kean richmond

Kean Richmond na bën të shohim thjeshtësinë e të luajturit me pak elementë, por shumë mirë të vendosur i japin një ndjesi të shkëlqyeshme minimalizmit. Logoja e tij në të majtën e sipërme, Twitter dhe ikonat e kontaktit në të djathtë dhe në qendër, me një tipografi mbresëlënëse, asaj që i kushtohet.

Lidhja në internet: Keanrich mond

Alice drougard

Alice drougard mbajeni të thjeshtë edhe me logon tuaj të vendosur në qendër, katër skeda për të lëvizur midis faqeve kryesore të faqes suaj të internetit dhe një seri fotografish të vendosura siç duhet, në mënyrë që me një shikim të dimë se çfarë bëni dhe çfarë bëni.

Lidhja në internet: Alice drougard

jonathan ogden

Ogden vazhdo të luash me sa e thjeshtë është emri yt si logo, rrjetet sociale të vendosura pak më poshtë pa tërhequr vëmendjen dhe dizenjimi i tyre funksionon në mënyrë që t’i kalojmë shpejt përmes tyre. Në një faqe tregon gjithçka që ka rëndësi.

Lidhja në internet: jonathan ogden

Trishtil

Finch tashmë po shkon në vende të tjera për të luajtur me tipografinë dhe ato ngjyrat që tregojnë elegancën dhe mençurinë e asaj që bën. Vetëm me disa elemente, ai e lë në sy gjithë profesionalizmin e tij. Ai gjithashtu e bën të qartë se cilat faqe kanë lidhur me ju.

Lidhja në internet: Trishtil

Një model tjetër

Kjo faqe në internet luaj ndryshe. Përdorni një sfond me një kokë nga e cila mund të shkojmë në faqet kryesore, telefonin tuaj dhe lidhjet për në rrjetet tuaja sociale.

Lidhja në internet: Një model tjetër

i shpejtë

Kai na ilustron me figurën e tij me një trekëndësh abstrakt dhe një gamë të përshtatshme ngjyrash për të dhënë afërsi. Ai gjithashtu ofron një pjesë të bios së tij me një font në një madhësi më të vogël në rast se duam të dimë më shumë për të.

Lidhja në internet: i shpejtë

Projektimi vertikal i kopshtit

Ashtu si ajo e mëparshme, Vertical Garden Design shkon drejt një fotografie që tregon shpejt një nga punët e tij më të mira në aeroportin e Oslos. Në krye kemi kokën me «shiritin nav» ose shiritin e lundrimit dhe madje mundësinë e ndryshimit të gjuhës. Logoja e vendos atë në format vertikal për t'i dhënë prekjen përfundimtare një faqe shumë të thjeshtë.

Lidhja në internet: Projektimi vertikal i kopshtit

247Grad

247Grad luaj me pikturë njëngjyrëshe dhe një imazh sfond pothuajse krejtësisht e errët. Shkronja e kokës, më e vogël se teksti dhe kryefjala, shkruhet me shkronjë të madhe për të krijuar një kontrast të madh në modelin e përgjithshëm.

Lidhja në internet: 247Grad

Gëzojnë këtë

një tipografia e shkëlqyer mund të jetë shenjë e të qenit autentik dhe se ne e dimë se çfarë bëjmë. Ju nuk keni pse të jepni asgjë më shumë nëse mesazhi është i drejtpërdrejtë. Ata e bëjnë shumë të qartë: atyre u pëlqen të krijojnë aplikacione dhe faqe të bukura në internet. Ata e lënë postën për projektet dhe studimin e tyre në një lidhje tjetër.

Lidhja në internet: Gëzojnë këtë

Allison hou

Allison na merr para kurseve të tjera dhe përfshin më shumë imazhe dhe atë shkronjë më "femërore". E njëjta gjë vlen për imazhin tuaj kryesor dhe atë kokë. Ai ka luksin të paraqesë një kartë që tregon hile për blerje.

Lidhja në internet: Allison hou

Pikselot

Pixelot është paksa i çmendur, por tregon edhe për krijimtarinë e autorit. Përdorni treguesi i miut për të krijuar një maskë që mjegullohet kudo që ta kemi të ulur.

Lidhja në internet: Pikselot

Lionel scholtes

Nëse ju doni bëni rezyme tuaj në internet me asgjë më shumë se kaq, Lionel ju tregon hapat. Një font i përshtatshëm, fotografia juaj në pjesën e sipërme të majtë, lidhjet me rrjetet tuaja sociale dhe përvojën tuaj. I vetmi element dekorativ janë ato dy vija horizontale me ngjyra të ndryshme.

Lidhja në internet: Lionel scholtes

Pulëbardhat elegante

Ne kthehemi në elegancën e minimalizmit dhe ato hapësira të mëdha bosh. Nga njëra anë, koka është shumë larg nga pjesa tjetër e elementeve, dhe nga ana tjetër ato elemente të formuara në mënyrë të tillë që të krijojnë një harmoni të madhe vizuale midis tyre.

Lidhja në internet: Pulëbardhat elegante

lebensraum

Siç mund ta shihni në të gjithë shembujt, është e rëndësishme skedat e kokave për të shkuar në faqe të ndryshme nga faqja e internetit. Tipografia është e një rëndësie të madhe, luaj me një për kokë dhe një tjetër për tekstin me një sans serif që bën një punë të madhe.

Lidhja në internet: lebensraum

PinkPoint

Kontrasti i ngjyrave na çon në një rrjet pak më kompleks të të gjitha pamjeve. Jo të gjithë ata elementë kryesorë mungojnë për të luajtur këtë herë me gradientët për imazhin e sfondit dhe ato dy seksione që kanë ngjyrat kryesore të gradientit për imazhin kryesor.

Lidhja në internet: PinkPoint

IWC

Një fotografi e shkëlqyeshme me një font i zgjedhur mirë dhe një element "hero" ju mund t'i jepni kësaj uebi. Me një rrëshqitës tregon që një pjesë e punës të jetë mjaft e thjeshtë në konceptimin e saj.

Lidhja në internet: IWC

Pres copëtoni

Ilustrimi dixhital na çon në Chop Chop me ajo imazh që ha të gjithë praninë vizuale të saj. Ngjyra blu në kokë i jep asaj pikë për të krijuar vlera kromatike në përputhje me të gjithë imazhin e projektuar nga uebi.

Lidhja në internet: Pres copëtoni

7 pisha

7Pine luan me jeshilen për të qenë protagonistja e madhe e pjatës së shtëpisë. Pjesa tjetër e kompozon atë një imazh me shumë jeshile dhe një kokë të thjeshtë që dëshiron të mbetet pa u vërejtur nga logoja.

Lidhja në internet: 7 pisha

Shuma

Shuma na çon në drejtime të tjera. Luaj me trillime bardh e zi, një ilustrim shumë krijues dhe kjo shkon së bashku me elementët e tjerë dhe dy ilustrime të tjera për të krijuar një peizazh më shumë se interesant. Një shembull për të krijuar një faqe në internet që dallon nga pjesa tjetër.

Lidhja në internet: Shuma

Kuti hat

Blu është ngjyra mbizotëruese në këtë faqe në internet në të cilën nuk mungojnë imazhet e ndriçuara plotësisht nga e bardha dhe si do të ishte loja në 3D të asaj ndërtuesi të faqes që lëviz ndërsa lëvizim.

Lidhja në internet: Kuti hat

Kara lyte

Kara shkon te thjeshtësia dhe minimalizmi me praninë e saj natyrore dhe të bukur në fotografinë tuaj. Pjesa tjetër është një tekst që vjen së bashku me ato që janë elementet kryesore për kokën dhe një buton hamburger për ta hapur atë.

Lidhja në internet: Kara lyte

Marketingu Instrinsic Studio

Es të rrjetës më të thjeshtë por kjo na tregon se çfarë është të bësh një blog. Kuq e zi janë protagonistët në një faqe shumë "blog".

Lidhja në internet: Marketingu Instrinsic Studio

Si të krijoni një faqe në internet të thjeshtë në HTML

Ne do t'ju mësojmë krijoni një faqe të thjeshtë në HTML në mënyrë që të njihni elementet më themelore që e përbëjnë atë. Do të jetë e nevojshme të kemi një host në internet ku mund të ngarkojmë kodin dhe disa ndryshime në CSS, por ejani, këto janë parimet për të filluar udhëtimin tonë në HTML.

Duke parë disa shembuj të thjeshtë në internet Me të cilën ju mund të motivoni veten mjaftueshëm për të bërë vetë dizajnet tuaja pa thyer shumë kokën. Ndonjëherë e thjeshta krijon një efekt më të mirë sesa të na komplikosh në gjëra komplekse. Ju do të shihni se në shumicën e rasteve e thjeshtë punon shumë mirë. Shkoni për të.

Krijimi i një faqe në internet të thjeshtë në HTML është më e lehtë sesa mund të duket në fillim. Një faqe në internet përbëhet nga një kokë, trupi ose përmbajtja dhe faqja ose faqja si elemente kryesore. Ne mund t'i klasifikojmë ato në këtë mënyrë:

• Dokumentet: të gjitha dokumentet që do të krijojmë duhet të bëhen me a . Ne hapemi me një dhe gjithmonë mbyllet me një
• Trupi ose trupi: pjesa e dukshme e dokumentit është ndërmjet Y
• Headers: ato njihen me H1, H2, H3 ... Fillojmë me a dhe ne mbyllim me një . Teksti që është brenda do të shfaqet si një titull dhe varësisht nga numërimi i tij do ta bëjë atë në një madhësi më të vogël ose më të madhe.
• Paragrafët: paragrafi është i mbyllur brenda një dhe mbyllet me
• Lidhje: shembulli më i qartë ështëcreativosonline.org/»> Lidhja me Creativos Online
• Skulpturë: i përcaktojmë me etiketë . Një shembull do të ishte . Ne thërrasim imazhin midis citateve dhe përdorim një alt për tekstin alternativ që është thelbësor për SEO.
• listat: përcaktojmë listat me për një çrregullt dhe me për një i zoti. Artikujt e listës përdoren me . Gjithmonë mos harroni t'i mbyllni ato me shiritin.

Me këto elemente do të kemi baza për krijimin e një faqe në internet të thjeshtë siç do ta shihni në sasinë e mirë të tyre që do t'ju mësojmë në seksionin tjetër. Le të themi se struktura semantike me elementët e saj më të rëndësishëm duket kështu:

• Titulli me shiritin e tij të navigimit për faqet e ndryshme të faqes.
• Artikulli ose hapësira e trupit në të cilën ne mund të krijojmë një postim në blog, të vendosim rezyme ose një imazh.
• Shiriti anësor për të vendosur informacion shtesë.
• Footer ose këmbë, ku do të vendosim lidhje me faqet më të rëndësishme të faqes si dhe ikonat e rrjeteve sociale (gjithmonë si shembull).

Në shembujt që do të shihni më poshtë janë të gjitha bazuar në një logo të thjeshtë, por elegante, një kokë ku vendosin lundrimin në faqe të ndryshme të faqes, një hapësirë ​​qendrore e dominuar nga një tekst ose një imazh dhe një fund i faqes me elementet e përmendura në paragrafin e mëparshëm.

Ne rekomandojmë që mos e thye kokën dhe shko tek e thjeshta. Gjëja kryesore është që këto zona të diferencohen nga pjesa tjetër në një kalim vizual të sekondave. Me kalimin e kohës ne do të jemi në gjendje të komplikojmë veten dhe të punojmë më shumë në hapësira të tjera.

Kjo është një shembull i qartë i një kodi HTML me elementet më të rëndësishme:

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

Me këto rreshta të kodit HTML do të kishim së pari krijoi titullin e faqes në kokën me, në këtë rast «HTML semantik», ne do t'i mbyllnim të dy titullin me , titulli me dhe ne do të linim rrugën për të hapur trupin me .

Do të kishim një titulli i parë në H1 me për ta mbyllur me të , dhe ne do të shkonim në një listë që do të na ndihmonte të krijonim shiritin e navigimit për faqet e ndryshme të faqes sonë. Ne e mbyllim listën me , ne mbyllemi dhe ne fund dokumentin html me .

Për të përfunduar, gjithmonë hap një dokument me për ta mbyllur atë në fund të të gjithë kodit me prerjen. Pas hapjes së dokumentit, gjithnjë përdoret referenca në gjuhë, e cila në këtë rast është spanjisht me "es" dhe me a .

Shtë e rëndësishme që të shikoni nga afër kodin dhe kurdoherë ju hapni një funksion mbylleni atë me shiritin në përputhje me rrethanat.

Pak CSS

Ne hyjmë pak në CSS, por duke kaluar kështu që ju të kuptoni si të stilojmë HTML. Le të themi që CSS dhe HTML shkojnë dorë për dore për të dhënë ato uebfaqe të thjeshta që do të gjeni më poshtë.

Nëse nga njëra anë kemi përdorimin semantik të HTML për atë që është titulli, trupi ose trupi me artikullin ose imazhin e tij dhe fundin, në CSS do të përdornim funksionin «Div» për të identifikuar në secilën prej këtyre hapësirave në mënyrë që më vonë të zbatohen ndryshimet e nevojshme në model.

Diçka aq e thjeshtë sa:

Ndërsa ne mund të zbatojmë stilet me Div, një strukturë e përshtatshme dhe e përsosur do të ndihmojë në mënyrë që përdoruesit e uebfaqes të mund të "lexojnë" në mënyrë të përsosur përmbajtjen tonë, kështu që nëse ndjekim atë strukturë themelore, së pari do të kemi një punë të shkëlqyeshme dhe bazë.

Un shembull i thjeshtë i kodit CSS:

h1 {
ngjyrë: e bardhë;
text-align: qendër;
}

Ne e quajmë H1 dhe tekstin do ta vendosim në të bardhë me ngjyrë: të bardhë; dhe ne do ta rreshtojmë atë në qendër me «përafrimin e tekstit». Gjithmonë mbylleni me kllapa katrore pasi të keni hapur thirrjen H1.

Foto e kokës së Greg rakozy