30 Paġni tal-Web Oerhört Sempliċi

web
Uħud mill-aktar paġni famużi huma mgħobbija żżejjed b’informazzjoni, imma nippreferi l-oppost: dawk sempliċi.

Ovvjament l-esponent kbir ta 'dan il-grupp huwa Google bil-paġna ewlenija minimalista tiegħu minn meta beda l-vjaġġ tiegħu, Iżda b'mod ċar mhuwiex l-uniku wieħed fuq l-Internet li huwa impenjat li jżomm l-affarijiet sempliċi.

Eżempji sempliċi ta 'paġna web HTML

Kean Richmond

Kean RichMond

Kean Richmond jagħmilna naraw is-sempliċità li nilagħbu bi ftit elementi, imma f'pożizzjoni tajba ħafna agħti sensazzjoni kbira lill-minimaliżmu. Il-logo tiegħu fin-naħa ta 'fuq tax-xellug, it-Twitter u l-ikoni tal-kuntatt fuq il-lemin u fiċ-ċentru, b'tipografija impressjonanti, għal dak li hu ddedikat.

Rabta mal-web: Keanrich mond

Alice drougard

Alice drougard

Alice drougard żommha sempliċi wkoll bil-logo tiegħek imqiegħed fiċ-ċentru, erba 'tabs biex tiċċaqlaq bejn il-paġni ewlenin tal-websajt tiegħek u sensiela ta' ritratti mqiegħda b'mod xieraq sabiex f'daqqa t'għajn nafu x'għandek tagħmel u dak li tagħmel.

Rabta mal-web: Alice drougard

Jonathan Ogden

Jonathan Ogden

Ogden kompli lgħab b'kemm hu sempliċi ismek bħala logo, in-netwerks soċjali li jinsabu eżatt taħt mingħajr ma jiġbdu l-attenzjoni u d-disinn tagħhom jaħdem sabiex inkunu nistgħu ngħaddu minnhom malajr. Fuq paġna waħda juri dak kollu li hu importanti.

Rabta mal-web: Jonathan Ogden

Sponsun

Sponsun

Finch diġà sejjer f'postijiet oħra biex jilgħab bit-tipografija u dawk kuluri li juru eleganti u għerf ta 'dak li tagħmel. Bi ftit elementi biss, huwa jħalli l-professjonalità tiegħu kollha fid-dawl. Tagħmilha ċara wkoll liema paġni rabtuk miegħek.

Rabta mal-web: Sponsun

Disinn differenti

Disinn differenti

Din il-websajt tilgħab b'mod differenti. Uża wallpaper b'intestatura li minnha nistgħu mmorru għall-paġni ewlenin, it-telefon tiegħek u l-links għan-netwerks soċjali tiegħek.

Rabta mal-web: Disinn differenti

Brizk

Brizk

Kai juri lilna bil-figura tiegħu stess ma ' trijanglu astratt u paletta tal-kuluri xierqa biex tagħti qrubija. Huwa joffri wkoll parti mill-bijo tiegħu b'tipa iżgħar f'każ li rridu nkunu nafu aktar dwaru.

Rabta mal-web: Brizk

Disinn tal-Ġnien Vertikali

Disinn tal-Ġnien Vertikali

Bħal ta 'qabel, Vertical Garden Design imur lejn ritratt li juri malajr wieħed mill-aqwa impjiegi tiegħu fl-ajruport ta 'Oslo. Fil-parti ta 'fuq għandna l-intestatura bil- «nav bar» jew navigation bar u anke l-possibbiltà li nbiddlu l-lingwa. Il-logo ipoġġiha f'format vertikali biex jagħti l-aħħar touch lil paġna sempliċi ħafna.

Rabta mal-web: Disinn tal-Ġnien Vertikali

247 Grad

247 Grad

247 Grad tilgħab b'monokrom u immaġni ta 'sfond kważi kompletament skur. It-tipa header, iżgħar mit-test u l-header, hija kapitalizzata biex toħloq kuntrast kbir fid-disinn ġenerali.

Rabta mal-web: 247 Grad

Igawdu dan

Igawdu dan

a tipografija kbira tista 'tkun is-sinjal li tkun awtentiku u li nafu x'nagħmlu. M'għandekx għalfejn tagħti xejn aktar jekk il-messaġġ huwa dirett. Jagħmluha ċara ħafna: iħobbu joħolqu apps u websajts sbieħ. Huma jħallu l-posta għal proġetti u l-istudju tagħhom f'ħoloq ieħor.

Rabta mal-web: Igawdu dan

Allison hou

Allison hou

Allison teħodna qabel korsijiet oħra u tinkludi iktar stampi u dak it-tipa aktar "femminili". L-istess jgħodd għall-immaġni ewlenija tiegħek u dik l-intestatura. Huwa għandu l-lussu li jippreżenta karta li turi t-tricks għax-xiri.

Rabta mal-web: Allison hou

Pixelot

Pixelot

Pixelot huwa kemmxejn miġnun, iżda jindika wkoll il-kreattività tal-awtur. Uża il-mouse pointer biex toħloq maskra li ċċajpar kull fejn għandna qiegħed.

Rabta mal-web: Pixelot

Lionel skolti

Lionel skolti

Jekk inti tixtieq agħmel it-tkomplija tiegħek onlajn b'xejn aktar minn hekk, Lionel jurik il-passi. Tipa xierqa, ir-ritratt tiegħek fin-naħa ta 'fuq tax-xellug, links għan-netwerks soċjali tiegħek u l-esperjenza tiegħek. L-uniku element dekorattiv huma dawk iż-żewġ linji orizzontali ta 'kuluri differenti.

Rabta mal-web: Lionel skolti

Gaqwies Eleganti

Gaqwies Eleganti

Nirritornaw għall-eleganti tal-minimaliżmu u dawk l-ispazji vojta kbar. Minn naħa, l-intestatura hija 'l bogħod ħafna mill-bqija tal-elementi, u min-naħa l-oħra, dawk l-elementi ffurmati b'tali mod li joħolqu armonija viżwali kbira bejniethom.

Rabta mal-web: Gaqwies Eleganti

Lebensraum

Lebensraum

Kif tistgħu taraw fl-eżempji kollha, huwa importanti it-tabs tal-header biex tmur fil-paġni differenti mill-websajt. It-tipografija hija ta ’importanza kbira, tilgħab ma’ waħda għall-header u oħra għat-test b’sans serif li jagħmel biċċa xogħol tajba.

Rabta mal-web: Lebensraum

PinkPoint

PinkPoint

Il-kuntrast tal-kuluri jwassalna għal xibka kemmxejn aktar kumplessa tal-veduti kollha. Mhux dawk l-elementi ewlenin kollha huma nieqsa biex tilgħab din id-darba bil-gradjenti għall-immaġni fl-isfond u dawk iż-żewġ taqsimiet li għandhom il-kuluri ewlenin tal-gradjent għall-immaġni ewlenija.

Rabta mal-web: PinkPoint

IWC

IWC

Ritratt mill-aqwa ma ' tipa magħżula sew u element "eroj" tista 'tagħti lil din il-web. Bi slider turi parti mix-xogħol biex tkun pjuttost sempliċi fil-konċepiment tagħha.

Rabta mal-web: IWC

CHOP CHOP

CHOP CHOP

Illustrazzjoni diġitali twassalna għal Chop Chop bi dik l-immaġni li tiekol il-preżenza viżwali kollha tagħha. Il-kulur blu fl-intestatura jagħtih il-punt tiegħu li joħloq valuri kromatiċi f'armonija ma 'l-immaġni kollha pproġettata mill-web.

Rabta mal-web: CHOP CHOP

7Pin

7Pin

7Pine jilgħab bl-aħdar biex tkun il-protagonist kbir tal-pjanċa tad-dar. Il-kumplament jikkomponih immaġni b'ħafna aħdar u header sempliċi li jrid jgħaddi inosservat mill-logo.

Rabta mal-web: 7Pin

Is-Somma

Is-Somma

Is-Somma teħodna f'direzzjonijiet oħra. Ilgħab bl-iswed u l-abjad fabulous, illustrazzjoni kreattiva ħafna u li jimxi id f'id mal-bqija tal-elementi u żewġ illustrazzjonijiet oħra biex joħolqu pajsaġġ aktar minn interessanti. Eżempju biex tinħoloq websajt li tispikka mill-bqija.

Rabta mal-web: Is-Somma

Hatbox

Hatbox

Il-blu huwa l-kulur predominanti f'dan il-websajt li fih m'hemmx immaġini nieqsa mdawwlin kompletament bl-abjad u kif tkun il-logħba fit-3D ta 'dak il-bennej tas-sit li tiċċaqlaq hekk kif nimxu aħna.

Rabta mal-web: Hatbox

Kara lyte

Kara lyte

Kara tmur sempliċità u minimaliżmu bil-preżenza naturali u sabiħa tagħha fir-ritratt tiegħek. Il-bqija huwa test li jiġi flimkien ma 'x'inhuma l-elementi ewlenin għall-header u buttuna tal-hamburger biex tiftaħha.

Rabta mal-web: Kara lyte

Marketing tal-Istudinsic Instruments

Intrinsiku

Es mill-aktar web sempliċi iżda dan jurina x'inhu li tagħmel blog. L-aħmar u l-iswed huma l-protagonisti f'sit ħafna "blog".

Rabta mal-web: Marketing tal-Istudinsic Instruments

Kif toħloq websajt sempliċi f'HTML

HTML

Aħna se ngħallmuk toħloq websajt sempliċi fl-HTML sabiex tkun taf l-aktar elementi bażiċi li jikkomponuh. Ikun neċessarju li jkollna web host fejn nistgħu nitgħabbew il-kodiċi u xi tweaks fis-CSS, imma ejja, dawn huma l-prinċipji biex nibdew il-vjaġġ tagħna bl-HTML.

Wara li rajt xi wħud eżempji tal-web sempliċi Li bihom tista 'timmotiva lilek innifsek biżżejjed biex tagħmel id-disinji tiegħek stess mingħajr ma tkisser rasek wisq. Kultant is-sempliċi joħloq effett aħjar milli jikkumplikawna f'affarijiet kumplessi. Se tara li f'ħafna każijiet is-sempliċi jaħdem tajjeb ħafna. Mur għaliha.

Il-ħolqien ta 'websajt sempliċi f'HTML huwa aktar faċli milli jista' jidher għall-ewwel. Websajt tikkonsisti minn header, il-ġisem jew kontenut u l-footer jew footer bħala elementi ewlenin. Nistgħu nikklassifikawhom b'dan il-mod:

  • Dokumenti: id-dokumenti kollha li se noħolqu għandhom isiru b ' . Niftħu b ' u dejjem jagħlaq b’a
  • Il-ġisem jew il-ġisem: il-parti viżibbli tad-dokument hija bejn Y
  • Intestaturi: huma magħrufa bl-H1, H2, H3 ... Nibdew b'a u nagħlqu b’a . It-test li jinsab ġewwa jidher bħala header u skont in-numerazzjoni tiegħu se jagħmel dan f’daqs iżgħar jew ikbar.
  • Paragrafi: il-paragrafu huwa magħluq fi u jagħlaq bi
  • Links: l-iktar eżempju ċar huwa Link to Creativos Online
  • Stampi: niddefinixxuhom bit-tikketta . Eżempju jkun . Aħna ninvokaw l-immaġni bejn il-virgoletti u nużaw alt għat-test alternattiv li għas-SEO huwa essenzjali.
  • Listi: niddefinixxu l-listi bi għal messy u bi għal pulita. Oġġetti tal-lista jintużaw ma ' . Dejjem ftakar li tagħlaqhom mal-bar.

HTML

B'dawn l-elementi jkollna il-bażi għall-ħolqien ta 'websajt sempliċi kif se tara fl-ammont tajjeb minnhom li se ngħallmuk fit-taqsima li jmiss. Ejja ngħidu li l-istruttura semantika bl-aktar elementi importanti tagħha tidher hekk:

  • Header bil-bar tan-navigazzjoni tagħha għad-diversi paġni tas-sit.
  • L-oġġett jew l-ispazju tal-ġisem li fih nistgħu noħolqu blog entry, inpoġġu l-kurrikulu jew immaġni tagħna.
  • Il-ġenb jew il-ġenb biex tpoġġi informazzjoni addizzjonali.
  • Il-footer jew sieq, fejn se npoġġu links għall-aktar paġni importanti tas-sit kif ukoll l-ikoni tan-netwerks soċjali (dejjem bħala eżempju).

Fl-eżempji li se tara hawn taħt jinsabu kollha bbażati fuq logo sempliċi imma eleganti, header fejn ipoġġu n-navigazzjoni lejn il-paġni differenti tas-sit, spazju ċentrali ddominat minn test jew immaġni u footer bl-elementi msemmija fil-paragrafu preċedenti.

Nirrakkomandaw li tiksirx rasek u mur għas-sempliċi. Il-ħaġa ewlenija hija li dawn iż-żoni huma differenzjati mill-bqija f'pass viżwali ta 'sekonda. Biż-żmien inkunu nistgħu nikkomplikaw lilna nfusna u naħdmu aktar spazji oħra.

Dan hu eżempju ċar ta 'kodiċi HTML bl-aktar elementi importanti:

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

B'dawn il-linji ta 'kodiċi HTML li jkollna l-ewwel ħoloq it-titlu tal-paġna fl-intestatura bi, f'dan il-każ «HTML Semantiku», aħna nagħlqu t-tnejn bit-titlu , l-intestatura bi u aħna nċedu biex niftħu l-ġisem bihom .

Aħna jkollna l-ewwel header f'H1 ma ' biex tagħlaqha bi , u aħna mmorru għal lista li tgħinna noħolqu l-istrixxa tan-navigazzjoni għall-paġni differenti tas-sit tagħna. Nagħlqu l-lista bi , nagħlqu u fl-aħħar id-dokument html bi .

Biex tispiċċa, dejjem tiftaħ dokument bi biex tagħlaqha fl-aħħar tal-kodiċi kollu bis-slash. Wara li jinfetaħ id-dokument, ir-referenza għal-lingwa tintuża dejjem, li f'dan il-każ hija l-Ispanjol b '«es» u b' .

Huwa importanti li tħares mill-qrib lejn il-kodiċi u kull meta tiftaħ funzjoni tagħlaqha bil-bar korrispondenti

Ftit CSS

Immorru fis-CSS xi ftit, imma bil-mod biex tifhem kif stil HTML. Ejja ngħidu li CSS u HTML jimxu id f'id biex jagħtu dawk il-websajts sempliċi li ssib hawn taħt.

Jekk min-naħa waħda għandna l-użu semantiku tal-HTML għal dak li hu l-intestatura, il-korp jew il-korp bl-artiklu jew l-immaġni tiegħu u l-footer, fis-CSS aħna nużaw il-funzjoni «Div» biex nidentifikaw għal kull wieħed minn dawn l-ispazji sabiex aktar tard tapplika l-bidliet meħtieġa fid-disinn.

Xi ħaġa sempliċi daqs:

Semantika tal-web

Filwaqt li nistgħu napplikaw l-istili bid-Div, struttura xierqa u perfetta tgħin sabiex il-web crawlers ikunu jistgħu "jaqraw" perfettament x'inhu l-kontenut tagħna, allura jekk insegwu dik l-istruttura bażika, l-ewwel ikollna xogħol u bażi eċċellenti.

Un eżempju sempliċi tal-kodiċi CSS:

h1 {
kulur: abjad;
test jallinjaw: ċentru;
}

Aħna nsejħu H1 u t-test se npoġġuh abjad bil-kulur: abjad; u aħna se nallinjawha maċ-ċentru b '"allinja t-test". Dejjem għalaq bil-parentesi kwadri wara li tiftaħ għas-sejħa H1.

Ritratt tal-intestatura ta ' Greg rakozy


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

3 kummenti, ħalli tiegħek

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat. oqsma meħtieġa huma mmarkati bl *

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.

  1.   Cristopher - websajt qal

    Jien tassew passjonat ukoll dwar id-disinn, paġna tajba biex nara d-dinja tad-disinn.

    Tislijiet.

  2.   Jorge qal

    Hello ħbieb, kif sejjer?

    Qed nagħmel paġna tal-web sempliċi ħafna f'html, u nixtieq inżid kaxxa tal-kummenti ma 'kull pubblikazzjoni. Tista 'tiggwidani kif nagħmilha?

  3.   EMERSON qal

    Dawk minna li għandna bżonn paġna tal-web sempliċi ħafna bi tliet buttuni u immaġni, u fi kwalunkwe każ plejer, xi ħaġa bħal din tkun utli ħafna.
    Madankollu ma nemminx li b'din l-informazzjoni kapaċi nibni l-paġna tiegħi, imma għallinqas tagħtik ideat u x'għandek tfittex