30 neticami vienkāršas tīmekļa lapas

Dažas no slavenākajām lapām ir ļoti pārslogotas ar informāciju, bet es dodu priekšroku pretējam: vienkāršajiem.

Acīmredzot šīs grupas lielākais eksponents ir Google ar minimālisma mājas lapu kopš tā sākuma, bet tas acīmredzami nav vienīgais internetā, kas apņemas saglabāt lietas vienkāršas.

Vienkārši HTML tīmekļa lapu piemēri

Kīns Ričmonds

Kean Richmond liek mums redzēt spēles vienkāršību ar dažiem elementiem, bet ļoti labi dot lielisku sajūtu minimālismam. Viņa logotips augšējā kreisajā stūrī, čivināt un kontaktu ikonas labajā pusē un centrā ar pārsteidzošu tipogrāfiju tam, ko viņš ir veltījis.

Saite uz tīmekli: Keanrich mond

Alise Drougard

Alise Drougard saglabājiet to vienkārši arī ar savu logotipu centrā četras cilnes, lai pārvietotos starp jūsu vietnes galvenajām lapām un pareizi izvietotu fotogrāfiju sēriju, lai īsumā mēs zinātu, ko jūs darāt un ko darāt.

Saite uz tīmekli: Alise Drougard

Džonatans Ogdens

Ogden turpini spēlēt, cik vienkārši tavs vārds ir logotips, sociālie tīkli, kas atrodas tieši zem tā, nepievēršot uzmanību, un to dizains darbojas, lai mēs varētu tos ātri iziet. Vienā lappusē tas parāda visu, kas ir svarīgi.

Saite uz tīmekli: Džonatans Ogdens

Žubīte

Finčs jau dodas uz citām vietām, lai spēlētos ar tipogrāfiju un tām krāsas, kas apzīmē eleganci un gudrību par to, ko tā dara. Izmantojot tikai dažus elementus, viņš atstāj visu savu profesionalitāti. Tas arī skaidri norāda, kuras lapas ir jūs novirzījušas.

Saite uz tīmekli: Žubīte

Atšķirīgs dizains

Šī vietne spēlē savādāk. Izmantojiet fonu ar galveni, no kura mēs varam pāriet uz galvenajām lapām, tālruni un saitēm uz jūsu sociālajiem tīkliem.

Saite uz tīmekli: Atšķirīgs dizains

ņiprs

Kai mūs ilustrē ar savu figūru ar abstrakts trīsstūris un piemērota krāsu palete dot tuvumu. Viņš arī piedāvā daļu no sava biogrāfijas ar mazāku fontu, ja mēs vēlamies uzzināt vairāk par viņu.

Saite uz tīmekli: ņiprs

Vertikālais dārza dizains

Tāpat kā iepriekšējais, arī vertikālā dārza dizains virzās uz fotoattēlu, kas tiek parādīts ātri viens no viņa labākajiem darbiem Oslo lidostā. Augšpusē mums ir galvene ar «navigācijas joslu» vai navigācijas joslu un pat iespēju mainīt valodu. Logotips to ievieto vertikālā formātā, lai piešķirtu vienkāršu lapu pēdējam pieskārienam.

Saite uz tīmekli: Vertikālais dārza dizains

247Grad

247Grad spēlē ar vienkrāsainu un fona attēlu gandrīz pilnīgi tumšs. Galvenes fonts, kas ir mazāks par tekstu un galveni, ir izveidots ar lielo burtu, lai radītu lielu kontrastu kopējā noformējumā.

Saite uz tīmekli: 247Grad

Izbaudiet to

A lieliska tipogrāfija var liecināt par autentiskumu un ka mēs zinām, ko mēs darām. Jums nav jādod nekas vairāk, ja ziņojums ir tiešs. Viņi skaidri norāda: viņiem patīk radīt skaistas lietotnes un vietnes. Viņi atstāj pastu projektiem un pētījumiem citā saitē.

Saite uz tīmekli: Izbaudiet to

Alison hou

Alisons mūs aizved pirms citiem kursiem un ietver vairāk attēlu un tas vairāk "sievišķīgais" burtveidols. Tas pats attiecas uz jūsu galveno attēlu un šo galveni. Viņam ir greznība uzrādīt karti, kurā parādīti iepirkšanās triki.

Saite uz tīmekli: Alison hou

pikseļots

Pixelot ir mazliet traks, bet tas norāda arī uz autora radošumu. Izmantot peles rādītāju, lai izveidotu masku tas aizmiglojas visur, kur mums tas ir.

Saite uz tīmekli: pikseļots

Lionels scholtes

Ja jūs vēlaties padariet savu CV tiešsaistē, izmantojot tikai to, Lionels parāda soļus. Piemērots fonts, jūsu fotoattēls augšējā kreisajā stūrī, saites uz jūsu sociālajiem tīkliem un jūsu pieredzi. Vienīgais dekoratīvais elements ir šīs divas dažādu krāsu horizontālās līnijas.

Saite uz tīmekli: Lionels scholtes

Elegantās kaijas

Mēs atgriežamies uz minimālisma eleganci un tās lielās tukšās vietas. No vienas puses, galvene atrodas ļoti tālu no pārējiem elementiem, un, no otras puses, šie elementi ir veidoti tā, ka tie rada lielu vizuālo harmoniju starp tiem.

Saite uz tīmekli: Elegantās kaijas

Lebensraum

Kā redzat visos piemēros, tas ir svarīgi galvenes cilnes, lai pārietu uz dažādām lapām no vietnes. Tipogrāfijai ir liela nozīme, spēlē ar vienu galvenei un otru tekstu ar sans serifu, kas lieliski strādā.

Saite uz tīmekli: Lebensraum

PinkPoint

Krāsu kontrasts noved mūs pie nedaudz sarežģītāka visu skatu tīkla. Trūkst ne visu šo galveno elementu lai šoreiz spēlētos ar fona attēla gradientiem un tām divām sadaļām, kurām ir galvenā attēla gradienta galvenās krāsas.

Saite uz tīmekli: PinkPoint

IWC

Lieliska fotogrāfija ar labi izvēlēts burtveidols un "varoņa" elements varat dot šim tīmeklim. Ar slīdni tā parāda, ka daļa darba ir diezgan vienkārša.

Saite uz tīmekli: IWC

Karbonāde karbonāde

Digitālā ilustrācija mūs noved pie karbonādes karbonāde ar šo attēlu, kas apēd visu tā vizuālo klātbūtni. Zilā krāsa galvenē dod iespēju izveidot hromatiskās vērtības, kas atbilst visam tīmekļa projicētajam attēlam.

Saite uz tīmekli: Karbonāde karbonāde

7Priede

7Pine spēlē ar zaļo, lai būtu lielisks mājas plāksnes varonis. Pārējais to veido attēls ar daudz zaļu krāsu un vienkāršu galveni kas vēlas palikt nepamanīts ar logotipu.

Saite uz tīmekli: 7Priede

Summa

Summa mūs ved citos virzienos. Spēlējiet ar teiksmaino melnbalto, ļoti radošu ilustrāciju un tas iet roku rokā ar pārējiem elementiem un divām citām ilustrācijām, lai izveidotu vairāk nekā interesantu ainavu. Piemērs, lai izveidotu vietni, kas izceļas ar pārējo.

Saite uz tīmekli: Summa

Cepuru kaste

Zila ir dominējošā krāsa šajā vietnē, kurā nav trūkstošu attēlu, kurus pilnībā izgaismotu balts, un kāda būtu spēle šī vietnes veidotāja 3D formātā kas kustas, kamēr mēs kustamies.

Saite uz tīmekli: Cepuru kaste

Kara lyte

Kara iet uz vienkāršība un minimālisms ar savu dabisko un skaisto klātbūtni jūsu fotogrāfijā. Pārējais ir teksts, kas nāk kopā ar galvenes galvenajiem elementiem un hamburgera pogu, lai to atvērtu.

Saite uz tīmekli: Kara lyte

Instrinsic Studio mārketings

Es no vienkāršākā tīmekļa bet tas mums parāda, kā ir veidot emuāru. Sarkanā un melnā krāsa ir ļoti "emuāru" vietnes varoņi.

Saite uz tīmekli: Instrinsic Studio mārketings

Kā izveidot vienkāršu vietni HTML

Mēs tevi mācīsim izveidojiet vienkāršu vietni HTML lai jūs zināt elementārākos elementus, kas to veido. Būs nepieciešams tīmekļa resursdators, kurā mēs varēsim ielādēt kodu un dažus uzlabojumus CSS, bet, nāciet, šie ir principi, lai sāktu mūsu ceļojumu HTML.

Dažus redzējis vienkārši tīmekļa piemēri Ar kuru jūs varat pietiekami motivēt sevi, lai izveidotu savus dizainus, pārāk nesalaužot galvu. Dažreiz vienkāršais rada labāku efektu nekā sarežģī mūs sarežģītās lietās. Jūs redzēsiet, ka vairumā gadījumu vienkāršais darbojas ļoti labi. Dari tā.

Vienkāršas vietnes izveide HTML formātā ir vienkāršāka, nekā var šķist sākumā. Vietne sastāv no galvenes, ķermeņa vai saturu un kājeni vai kājeni kā galvenos elementus. Mēs tos varam klasificēt šādā veidā:

• Dokumenti: visi dokumenti, kurus mēs gatavojamies izveidot, jāveic ar . Mēs atveram ar un vienmēr noslēdzas ar
• Ķermenis vai ķermenis: dokumenta redzamā daļa ir starp Jā
• Galvenes: tos pazīst H1, H2, H3 ... Mēs sākam ar a un mēs aizveramies ar . Iekšpusē esošais teksts parādīsies kā galvene, un atkarībā no tā numerācijas tas tiks izdarīts mazākā vai lielākā izmērā.
• Rindkopas: punkts ir pievienots a un noslēdzas ar
• Saites: spilgtākais piemērs ircreativosonline.org/»> Saite uz Creativos Online
• Tēlainība: mēs tos definējam pēc etiķetes . Piemērs būtu . Mēs izsaucam attēlu starp pēdiņām un alternatīvajam tekstam, kas ir būtisks SEO, izmantojam alternatīvu.
• Saraksti: mēs definējam sarakstus ar par nekārtīgu un ar par kārtīgu. Saraksta vienumi tiek izmantoti kopā ar . Vienmēr atcerieties tos aizvērt ar joslu.

Ar šiem elementiem mums būs pamats vienkāršas vietnes izveidei kā jūs redzēsiet daudzos no tiem, ko mēs jums iemācīsim nākamajā sadaļā. Pieņemsim, ka semantiskā struktūra ar vissvarīgākajiem elementiem izskatās šādi:

• Galvene ar navigācijas joslu dažādām vietnes lapām.
• Izstrādājums vai ķermeņa telpa kurā mēs varam izveidot emuāra ierakstu, ievietot savu mācību programmu vai attēlu.
• Sānjosla vai sānjosla ievietot papildu informāciju.
• Kājene vai pēda, kur mēs ievietosim saites uz vissvarīgākajām vietnes lapām, kā arī sociālo tīklu ikonas (vienmēr kā piemēru).

Zemāk redzamajos piemēros ir visa pamatā ir vienkāršs, bet elegants logotips, galveni, kur tie izvieto navigāciju uz dažādām vietnes lapām, centrālo vietu, kurā dominē teksts vai attēls, un kājeni ar iepriekšējā rindkopā minētajiem elementiem.

Mēs to iesakām nelauz galvu un ej pie vienkāršā. Galvenais ir tas, ka šīs zonas vizuālo sekunžu laikā tiek nošķirtas no pārējām. Ar laiku mēs varēsim sarežģīt sevi un strādāt vairāk citās telpās.

Tas ir skaidrs HTML koda piemērs ar vissvarīgākajiem elementiem:

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

Ar šīm HTML koda rindām mums būtu vispirms izveidoja lapas virsrakstu galvenē ar, šajā gadījumā «Semantic HTML», abus nosaukumus mēs aizvērtu ar , galveni ar un mēs ļautu atvērt ķermeni ar .

Mums būtu pirmais galvenes H1 ar lai to aizvērtu , un mēs pārietu pie saraksta, kas mums palīdzētu izveidot navigācijas joslu dažādām mūsu vietnes lapām. Mēs aizveram sarakstu ar , mēs aizveramies un visbeidzot HTML dokuments ar .

Lai beigtu, vienmēr atveriet dokumentu ar lai to aizvērtu visa koda beigās ar slīpsvītru. Pēc dokumenta atvēršanas vienmēr tiek izmantota atsauce uz valodu, kas šajā gadījumā ir spāņu valoda ar «es» un ar a .

Ir svarīgi, lai jūs rūpīgi apskatītu kodu un vienmēr atverot funkciju, aizveriet to ar joslu attiecas.

Mazliet CSS

Mēs mazliet iedziļināmies CSS, bet garāmejot, lai jūs saprastu kā veidot HTML. Pieņemsim, ka CSS un HTML iet roku rokā, lai dotu tām vienkāršajām vietnēm, kuras atradīsit tālāk.

Ja, no vienas puses, mēs semantiski izmantojam HTML, kas ir galvene, pamatteksts vai pamatteksts ar tā rakstu vai attēlu un kājeni, CSS identificēšanai izmantosim funkciju «Div» katrā no šīm telpām, lai vēlāk dizainā varētu veikt nepieciešamās izmaiņas.

Kaut kas tik vienkāršs kā:

Lai gan mēs varam piemērot stilus ar Div, piemērota un nevainojama struktūra palīdzēs lai tīmekļa rāpuļprogrammas varētu lieliski "izlasīt" mūsu saturu, tāpēc, ja mēs ievērosim šo pamata struktūru, mums vispirms būs lielisks darbs un bāze.

Un vienkāršs CSS koda piemērs:

h1 {
Krāsa: balts;
text-align: centrs;
}

Mēs saucam H1 un tekstu mēs to ievietosim baltā krāsā: balta; un mēs to pielīdzināsim centram ar «izlīdzināt tekstu». Pēc atvēršanas H1 zvanam vienmēr aizveriet ar kvadrātiekavām.

Galvenes fotoattēls ar Gregs rakozī