30 de pagini web incredibil de simple

Unele dintre cele mai faimoase pagini sunt foarte supraîncărcate cu informații, dar prefer opusul: cele simple.

Evident, marele exponent al acestui grup este Google, cu pagina sa de pornire minimalistă de când și-a început călătoria, dar în mod clar nu este singurul de pe Internet care se angajează să păstreze lucrurile simple.

Exemple de pagini web HTML simple

Kean Richmond

Kean Richmond ne face să vedem simplitatea jocului cu puține elemente, dar foarte bine plasat dă o senzație minunată minimalismului. Logo-ul său din stânga sus, pictogramele Twitter și de contact din dreapta și din centru, cu o tipografie izbitoare, a ceea ce este dedicat.

Link către web: Keanrich mond

Alice drougard

Alice drougard păstrați-l simplu și cu logo-ul plasat în centru, patru file pentru a vă deplasa între paginile principale ale site-ului dvs. web și o serie de fotografii așezate corespunzător, astfel încât dintr-o privire să știm ce faceți și ce faceți.

Link către web: Alice drougard

Jonathan Ogden

Ogden continuă să te joci cu cât de simplu este numele tău ca logo, rețelele de socializare situate chiar dedesubt fără a atrage atenția și designul lor funcționează astfel încât să putem trece rapid prin ele. Pe o pagină arată tot ce contează.

Link către web: Jonathan Ogden

cinteză

Finch merge deja în alte locuri pentru a se juca cu tipografie și altele culori care denotă eleganța și înțelepciunea a ceea ce face. Cu doar câteva elemente, își lasă în vedere tot profesionalismul. De asemenea, clarifică ce pagini s-au conectat la dvs.

Link către web: cinteză

Un design diferit

Acest site web joacă altfel. Folosiți un tapet cu un antet din care putem accesa paginile principale, telefonul dvs. și linkurile către rețelele dvs. sociale.

Link către web: Un design diferit

vioi

Kai ne ilustrează cu propria sa figură cu un triunghi abstract și o paletă de culori adecvată a da apropiere. De asemenea, oferă o parte din biografia sa cu un font într-o dimensiune mai mică, în cazul în care dorim să aflăm mai multe despre el.

Link către web: vioi

Design de grădină verticală

Ca și precedentul, Vertical Garden Design se îndreaptă spre o fotografie care arată rapid unul dintre cele mai bune locuri de muncă pe aeroportul din Oslo. În partea de sus avem antetul cu «bara de navigare» sau bara de navigare și chiar posibilitatea de a schimba limba. Logo-ul îl plasează într-un format vertical pentru a da nota finală unei pagini foarte simple.

Link către web: Design de grădină verticală

247 de grade

247 de grade jucați cu monocrom și o imagine de fundal aproape total întunecat. Fontul antetului, mai mic decât textul și antetul, este scris cu majuscule pentru a crea un contrast deosebit în designul general.

Link către web: 247 de grade

Bucură-te de asta

o o mare tipografie poate fi semnul autenticității și că știm ce facem. Nu trebuie să mai dai nimic dacă mesajul este direct. Acestea sunt clare: le place să creeze aplicații și site-uri web frumoase. Ei lasă corespondența pentru proiecte și studiul lor într-un alt link.

Link către web: Bucură-te de asta

Allison hou

Allison ne ia înainte de alte cursuri și include mai multe imagini și acel tip de caractere mai „feminin”. Același lucru este valabil și pentru imaginea dvs. principală și antetul respectiv. Are luxul de a prezenta un card care arată trucuri de cumpărături.

Link către web: Allison hou

pixelot

Pixelot este un pic nebunesc, dar indică și creativitatea autorului. Utilizare indicatorul mouse-ului pentru a crea o mască care se estompează oriunde îl avem cocoțat.

Link către web: pixelot

Lionel scolte

Dacă doriți faceți CV-ul dvs. online cu nimic mai mult decât atât, Lionel îți arată pașii. Un font adecvat, fotografia din stânga sus, link-uri către rețelele dvs. sociale și experiența dvs. Singurul element decorativ sunt acele două linii orizontale de culori diferite.

Link către web: Lionel scolte

Pescăruși eleganți

Ne intoarcem la eleganța minimalismului și acele spații mari. Pe de o parte antetul este foarte departe de restul elementelor și, pe de altă parte, acele elemente modelate în așa fel încât să creeze o mare armonie vizuală între ele.

Link către web: Pescăruși eleganți

Lebensraum

După cum puteți vedea în toate exemplele, este important filele de antet pentru a accesa paginile diferite de pe site. Tipografia are o mare importanță, jucați-vă cu unul pentru antet și altul pentru text cu un sans serif care face o treabă grozavă.

Link către web: Lebensraum

PinkPoint

Contrastul culorilor ne conduce la o rețea puțin mai complexă a tuturor vederilor. Nu lipsesc toate aceste elemente principale pentru a juca de data aceasta cu gradienții pentru imaginea de fundal și acele două secțiuni care au culorile principale ale gradientului principal al imaginii.

Link către web: PinkPoint

IWC

O fotografie grozavă cu un tipar bine ales și un element „erou” puteți oferi acestui web. Cu un glisor arată o parte a lucrării ca fiind destul de simplă în concepția sa.

Link către web: IWC

Maruntiti cotletul

Ilustrația digitală ne conduce la Chop Chop cu acea imagine care mănâncă toată prezența vizuală a acesteia. Culoarea albastră din antet îi oferă punctul său de a crea valori cromatice în ton cu întreaga imagine proiectată de web.

Link către web: Maruntiti cotletul

7 Pin

7Pine se joacă cu verde pentru a fi marele protagonist al plăcii de acasă. Restul îl compune o imagine cu mult verde și un antet simplu care vrea să treacă neobservat de logo.

Link către web: 7 Pin

Suma

Suma ne duce în alte direcții. Joacă-te cu fabulosul alb și negru, o ilustrație foarte creativă și care merge mână în mână cu restul elementelor și alte două ilustrații pentru a crea un peisaj mai mult decât interesant. Un exemplu pentru a crea un site web care se distinge de restul.

Link către web: Suma

Cutia palariei

Albastrul este culoarea predominantă pe acest site web în care nu lipsesc imaginile complet iluminate de alb și care ar fi jocul în 3D a acelui constructor de site-uri care se mișcă pe măsură ce ne mișcăm.

Link către web: Cutia palariei

Kara lyte

Kara merge la simplitate și minimalism cu prezența sa naturală și frumoasă în fotografia ta. Restul este un text care vine împreună cu care sunt elementele principale pentru antet și un buton hamburger pentru a-l deschide.

Link către web: Kara lyte

Instrument de marketing Studio

Es a celui mai simplu web dar asta ne arată ce înseamnă să faci un blog. Roșu și negru sunt protagoniștii pe un site foarte „blog”.

Link către web: Instrument de marketing Studio

Cum se creează un site web simplu în HTML

Vă vom învăța creați un site web simplu în HTML astfel încât să cunoașteți cele mai elemente de bază care îl compun. Va fi necesar să avem o gazdă web unde să putem încărca codul și câteva modificări în CSS, dar hai, acestea sunt principiile pentru a începe călătoria noastră în HTML.

După ce am văzut câteva exemple web simple Cu care te poți motiva suficient pentru a-ți crea propriile modele fără să-ți rupi capul mult. Uneori, simplul creează un efect mai bun decât să ne complice în lucruri complexe. Veți vedea că, în majoritatea cazurilor, simplul funcționează foarte bine. Du-te.

Crearea unui site web simplu în HTML este mai ușoară decât poate părea la început. Un site web constă dintr-un antet, corpul sau conținut și subsolul sau subsolul ca elemente principale. Le putem clasifica astfel:

• Documente: toate documentele pe care le vom crea trebuie să fie făcute cu un . Deschidem cu un și se închide întotdeauna cu un
• Corpul sau corpul: partea vizibilă a documentului este între Da
• Anteturi: sunt cunoscuți prin H1, H2, H3 ... Începem cu a și închidem cu o . Textul care se află în interior va apărea ca un antet și, în funcție de numerotare, îl va face într-o dimensiune mai mică sau mai mare.
• Paragrafele: paragraful este inclus în a și se închide cu
• Link-uri: cel mai clar exemplu estecreativosonline.org/»> Link către Creativos Online
• Imagini: le definim prin etichetă . Un exemplu ar fi . Invocăm imaginea între ghilimele și folosim o alternativă pentru textul alternativ, care pentru SEO este esențial.
• Lista de preturi: definim listele cu pentru un dezordonat și cu pentru o îngrijire. Elementele de listă sunt utilizate cu . Amintiți-vă întotdeauna să le închideți cu bara.

Cu aceste elemente vom avea baza pentru crearea unui site web simplu după cum veți vedea în cantitatea bună pe care o vom învăța în secțiunea următoare. Să spunem că structura semantică cu elementele sale cele mai importante arată astfel:

• Antet cu bara de navigare pentru diferitele pagini ale site-ului.
• Articolul sau spațiul corporal în care putem crea o intrare pe blog, să ne punem curriculum-ul sau o imagine.
• Bara laterală sau bara laterală pentru a pune informații suplimentare.
• Subsolul sau piciorul, unde vom plasa linkuri către cele mai importante pagini ale site-ului, precum și pictogramele rețelelor sociale (întotdeauna ca exemplu).

În exemplele pe care le veți vedea mai jos sunt totul bazat pe un logo simplu, dar elegant, un antet unde plasează navigarea către diferitele pagini ale site-ului, un spațiu central dominat de un text sau o imagine și un subsol cu ​​elementele menționate în paragraful anterior.

Vă recomandăm acest lucru nu-ți rupe capul și mergi la simplu. Principalul lucru este că aceste zone sunt diferențiate de restul într-o trecere vizuală de câteva secunde. Cu timpul vom putea să ne complicăm și să lucrăm mai multe alte spații.

Acest lucru este un exemplu clar de cod HTML cu cele mai importante elemente:

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

Cu aceste linii de cod HTML am avea a creat mai întâi titlul paginii în antet cu, în acest caz «Semantic HTML», am închide atât titlul cu , antetul cu și am da loc să deschidem corpul cu .

Am avea un primul antet în H1 cu să-l închidă cu , și am merge la o listă care ne-ar ajuta să creăm bara de navigare pentru diferitele pagini ale site-ului nostru. Închidem lista cu , închidem și în cele din urmă documentul html cu .

Pentru a termina, deschideți întotdeauna un document cu pentru a o închide la sfârșitul întregului cod cu bară. După deschiderea documentului, se folosește întotdeauna referința la limbă, care în acest caz este spaniola cu „es” și cu a .

Este important să vă uitați atent la cod și oricând deschideți o funcție închideți-o cu bara în consecință.

Un pic de CSS

Intrăm puțin în CSS, dar în treacăt, astfel încât să înțelegeți cum să stilizezi HTML. Să presupunem că CSS și HTML merg mână în mână pentru a oferi acelor site-uri web simple pe care le veți găsi mai jos.

Dacă pe de o parte avem utilizarea semantică a HTML pentru ceea ce este antetul, corpul sau corpul cu articolul sau imaginea și subsolul, în CSS am folosi funcția «Div» pentru a identifica fiecăruia dintre aceste spații pentru a aplica ulterior modificările necesare în proiectare.

Ceva la fel de simplu ca:

Deși putem aplica stilurile cu Div, o structură adecvată și perfectă vă va ajuta astfel încât crawlerele web să poată „citi” perfect despre ce este conținutul nostru, așa că, dacă urmăm acea structură de bază, vom avea mai întâi o treabă excelentă.

Un exemplu simplu de cod CSS:

h1 {
culoare: alb;
text-align: centru;
}

Numim H1 și textul il vom pune in alb cu culoare: alb; și îl vom alinia la centru cu «text align». Închideți întotdeauna cu paranteze după deschiderea apelului H1.

Fotografia antetului Greg rakozy