30 pagine web incredibilmente semplici

Web

Alcune delle pagine più famose sono molto sovraccariche di informazioni, ma io preferisco il contrario: quelle semplici.

Ovviamente il grande esponente di questo gruppo è Google con la sua home page minimalista da quando ha iniziato il suo viaggio, ma chiaramente non è l'unico su Internet che si impegna a mantenere le cose semplici.

Semplici esempi di pagine web HTML

Kean richmond

Kean Rich Mond

Kean Richmond ci fa vedere la semplicità di giocare con pochi elementi, ma molto ben posizionati dare una grande sensazione al minimalismo. Il suo logo in alto a sinistra, Twitter e le icone dei contatti a destra e al centro, con una tipografia suggestiva, a ciò a cui è dedicato.

Collegamento al web: Keanrich mond

Alice drougard

Alice drougard

Alice drougard mantienilo semplice anche con il tuo logo posizionato al centro, quattro tab per muoverti tra le pagine principali del tuo sito web e una serie di fotografie posizionate correttamente in modo che sappiamo a colpo d'occhio cosa fai e cosa fai.

Collegamento al web: Alice drougard

jonathan ogden

jonathan ogden

Ogden continua a giocare con quanto sia semplice il tuo nome come logo, i social network situati appena sotto senza attirare l'attenzione e il loro design funziona in modo che possiamo esaminarli rapidamente. In una pagina mostra tutto ciò che conta.

Collegamento al web: jonathan ogden

Fringuello

Fringuello

Finch sta già andando in altri posti per giocare con la tipografia e quelli colori che denotano eleganza e saggezza di ciò che fa. Con pochi elementi lascia in vista tutta la sua professionalità. Rende anche chiaro quali pagine sono collegate a te.

Collegamento al web: Fringuello

Un design diverso

Un design diverso

Questo sito web gioca diversamente. Usa uno sfondo con un'intestazione da cui possiamo andare alle pagine principali, al tuo telefono e ai link ai tuoi social network.

Collegamento al web: Un design diverso

vivace

vivace

Kai ci illustra con la sua figura con un triangolo astratto e una tavolozza di colori adatta per dare vicinanza. Offre anche parte della sua biografia con un carattere di dimensioni inferiori nel caso in cui vogliamo saperne di più su di lui.

Collegamento al web: vivace

Progettazione giardino verticale

Progettazione giardino verticale

Come il precedente, Vertical Garden Design va verso una fotografia che mostra velocemente uno dei suoi migliori lavori all'aeroporto di Oslo. In alto abbiamo l'intestazione con la «barra di navigazione» o barra di navigazione e anche la possibilità di cambiare la lingua. Il logo lo mette in un formato verticale per dare il tocco finale a una pagina molto semplice.

Collegamento al web: Progettazione giardino verticale

247grad

247grad

247grad giocare con monocromatico e un'immagine di sfondo quasi totalmente buio. Il carattere dell'intestazione, più piccolo del testo e dell'intestazione, è in maiuscolo per creare un grande contrasto nel design generale.

Collegamento al web: 247grad

Godetevi questo

Godetevi questo

Un un'ottima tipografia può essere il segno dell'autenticità e che sappiamo cosa facciamo. Non devi dare altro se il messaggio è diretto. Lo dicono molto chiaramente: amano creare bellissime app e siti web. Lasciano la posta per i progetti e il loro studio in un altro link.

Collegamento al web: Godetevi questo

Allison hou

Allison hou

Allison ci accompagna prima di altri corsi e include più immagini e quel carattere più "femminile". Lo stesso vale per la tua immagine principale e quell'intestazione. Ha il lusso di presentare una carta che mostra trucchi per lo shopping.

Collegamento al web: Allison hou

Pixelot

Pixelot

Pixelot è un po 'pazzo, ma indica anche la creatività dell'autore. Uso il puntatore del mouse per creare una maschera che sfuma ovunque l'abbiamo appollaiato.

Collegamento al web: Pixelot

Lionel scholtes

Lionel scholtes

Se desideri fai il tuo curriculum online con nient'altro che questo, Lionel ti mostra i passaggi. Un font adatto, la tua foto in alto a sinistra, i link ai tuoi social network e alla tua esperienza. L'unico elemento decorativo sono quelle due linee orizzontali di colori diversi.

Collegamento al web: Lionel scholtes

Gabbiani eleganti

Gabbiani eleganti

Torniamo all'eleganza del minimalismo e quei grandi spazi vuoti. Da un lato la testata è molto lontana dal resto degli elementi, e dall'altro quegli elementi modellati in modo tale da creare una grande armonia visiva tra loro.

Collegamento al web: Gabbiani eleganti

Habitat

Habitat

Come puoi vedere in tutti gli esempi, è importante le schede di intestazione per andare alle diverse pagine dal sito web. La tipografia è di grande importanza, gioca con uno per l'intestazione e un altro per il testo con un sans serif che fa un ottimo lavoro.

Collegamento al web: Habitat

Punto Rosa

Punto Rosa

Il contrasto dei colori ci porta a una ragnatela leggermente più complessa di tutte le visualizzazioni. Non mancano tutti questi elementi principali per giocare questa volta con i gradienti per l'immagine di sfondo e quelle due sezioni che hanno i colori principali del gradiente per l'immagine principale.

Collegamento al web: Punto Rosa

IWC

IWC

Una bella fotografia con un carattere ben scelto e un elemento "eroe" puoi dare a questo web. Con un cursore mostra che parte del lavoro è abbastanza semplice nella sua concezione.

Collegamento al web: IWC

Chop chop

Chop chop

L'illustrazione digitale ci porta a Chop Chop with quell'immagine che ne divora tutta la presenza visiva. Il colore blu nell'intestazione gli dà lo scopo di creare valori cromatici in sintonia con l'intera immagine proiettata dal web.

Collegamento al web: Chop chop

7Pino

7Pino

7Pine gioca con il verde per essere il grande protagonista del piatto di casa. Il resto lo compone un'immagine con molto verde e una semplice intestazione che vuole passare inosservato dal logo.

Collegamento al web: 7Pino

La somma

La somma

Il Sum ci porta in altre direzioni. Gioca con il leggendario bianco e nero, un'illustrazione molto creativa e questo va insieme al resto degli elementi e ad altre due illustrazioni per creare un paesaggio più che interessante. Un esempio per creare un sito web che si distingue dal resto.

Collegamento al web: La somma

Cappelliera

Cappelliera

Il blu è il colore predominante su questo sito in cui non mancano immagini completamente illuminate dal bianco e come sarebbe il gioco in 3D di quel site builder che si muove mentre ci muoviamo.

Collegamento al web: Cappelliera

Kara lyte

Kara lyte

Kara va a semplicità e minimalismo con la sua naturale e bella presenza nella tua fotografia. Il resto è un testo che accompagna gli elementi principali dell'intestazione e un pulsante hamburger per aprirlo.

Collegamento al web: Kara lyte

Marketing di Instrinsic Studio

Intrinseco

Es del web più semplice ma questo ci mostra cosa significa fare un blog. Rosso e nero sono i protagonisti di un sito molto "blog".

Collegamento al web: Marketing di Instrinsic Studio

Come creare un semplice sito web in HTML

HTML

Ti insegneremo creare un semplice sito web in HTML in modo da conoscere gli elementi più basilari che lo compongono. Sarà necessario avere un host web dove poter caricare il codice e alcune modifiche in CSS, ma dai, questi sono i principi per iniziare il nostro viaggio in HTML.

Avendone visti alcuni semplici esempi web Con il quale puoi motivarti abbastanza da creare i tuoi progetti senza romperti troppo la testa. A volte il semplice crea un effetto migliore che complicarci in cose complesse. Vedrai che nella maggior parte dei casi il semplice funziona molto bene. Fallo.

Creare un semplice sito web in HTML è più facile di quanto possa sembrare a prima vista. Un sito web consiste in un'intestazione, il corpo o contenuto e piè di pagina o piè di pagina come elementi principali. Possiamo classificarli in questo modo:

  • Documentazione: tutti i documenti che creeremo devono essere fatti con un file . Apriamo con a e chiude sempre con a
  • Il corpo o il corpo: la parte visibile del documento è tra Y
  • testiere: sono conosciuti con H1, H2, H3 ... Iniziamo con a e chiudiamo con a . Il testo che si trova all'interno apparirà come un'intestazione ea seconda della sua numerazione lo farà in una dimensione più piccola o più grande.
  • Paragrafi: il paragrafo è racchiuso tra un e si chiude con
  • Links: l'esempio più chiaro ècreativosonline.org/»> Collegamento a Creativos Online
  • Immagini: li definiamo dall'etichetta . Un esempio potrebbe essere . Richiamiamo l'immagine tra le virgolette e usiamo un alt per il testo alternativo che è essenziale per la SEO.
  • liste: definiamo le liste con per un disordinato e con per un pulito. Gli elementi dell'elenco vengono utilizzati con . Ricordati sempre di chiuderli con la barretta.

HTML

Con questi elementi avremo la base per creare un semplice sito web come vedrai nella buona quantità di essi che ti insegneremo nella prossima sezione. Diciamo che la struttura semantica con i suoi elementi più importanti si presenta così:

  • Intestazione con la sua barra di navigazione per le diverse pagine del sito.
  • L'articolo o lo spazio del corpo in cui possiamo creare un post di blog, inserire il nostro curriculum o un'immagine.
  • La barra laterale o barra laterale per inserire ulteriori informazioni.
  • Il piè di pagina o il piede, dove inseriremo i link alle pagine più importanti del sito oltre alle icone dei social network (sempre a titolo di esempio).

Negli esempi che vedrai di seguito sono tutto basato su un logo semplice ma elegante, un'intestazione dove colloca la navigazione alle diverse pagine del sito, uno spazio centrale dominato da un testo o un'immagine e un piè di pagina con gli elementi citati nel paragrafo precedente.

Lo consigliamo non rompere la testa e vai al semplice. La cosa principale è che queste aree si differenziano dal resto in un passaggio visivo di secondi. Con il tempo potremo complicarci e lavorare più altri spazi.

Questo è un chiaro esempio di codice HTML con gli elementi più 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>

Con queste righe di codice HTML avremmo prima ha creato il titolo della pagina nell'intestazione con, in questo caso «Semantic HTML», chiuderemmo entrambi i titoli con , l'intestazione con e avremmo dato modo di aprire il corpo con .

Avremmo un file prima intestazione in H1 con per chiuderla con e andremmo a un elenco che ci aiuterebbe a creare la barra di navigazione per le diverse pagine del nostro sito. Chiudiamo l'elenco con , chiudiamo e infine il documento html con .

Infine, apri sempre un documento con per chiuderlo alla fine dell'intero codice con la barra. Dopo aver aperto il documento, viene sempre utilizzato il riferimento alla lingua, che in questo caso è lo spagnolo con "es" e con a .

È importante esaminare attentamente il codice e ogni volta apri una funzione chiudila con la barra interessato.

Un po 'di CSS

Entriamo un po 'nel CSS, ma di sfuggita in modo che tu capisca come applicare lo stile all'HTML. Diciamo che CSS e HTML vanno di pari passo per dare quei semplici siti web che troverai di seguito.

Se da un lato abbiamo l'uso semantico dell'HTML per ciò che è l'intestazione o l'intestazione, il corpo o il corpo con il suo articolo o immagine e il piè di pagina, in CSS useremmo la funzione «Div» per identificare a ciascuno di questi spazi al fine di applicare successivamente le modifiche necessarie nel design.

Qualcosa di semplice come:

Semantica web

Sebbene possiamo applicare gli stili con Div, una struttura adatta e perfetta aiuterà in modo che i web crawler possano "leggere" perfettamente di cosa parlano i nostri contenuti, quindi se seguiamo questa struttura di base, avremo un ottimo lavoro e la base per prima cosa.

Un semplice esempio di codice CSS:

h1 {
colore: bianca;
text-align: centro;
}

Chiamiamo H1 e il testo lo metteremo in bianco con colore: bianco; e lo allineeremo al centro con «text align». Chiudere sempre con parentesi dopo l'apertura alla chiamata H1.

Foto dell'intestazione di Greg rakozy


3 commenti, lascia il tuo

Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.

  1.   Cristopher - sito web suddetto

    Sono anche molto appassionato di design, buona pagina per vedere il mondo del design.

    Cordiali saluti.

  2.   Jorge suddetto

    Ciao amici, come state?

    Sto realizzando una pagina web molto semplice in html e vorrei aggiungere una casella di commento ad ogni pubblicazione. Potresti guidarmi come farlo?

  3.   emerson suddetto

    Chi di noi ha bisogno di una pagina web molto semplice con tre pulsanti e un'immagine, e in ogni caso un giocatore, qualcosa del genere sarebbe molto utile.
    Tuttavia non credo che con queste informazioni riesco a costruire la mia pagina, ma almeno ti da idee e cosa cercare