30 Pàgines web increïblement simples

Algunes de les pàgines més famoses estan molt sobrecarregades d'informació, però jo em quedo amb tot el contrari: les senzilles.

Òbviament el gran exponent d'aquest grup és Google amb el seu minimalista pàgina d'inici des que va començar la seva marxa, però clarament no es tracta de l'única a Internet que aposta per fer les coses senzilles.

Exemples de pàgines web senzilles en HTML

Kean Richmond

Kean Richmond ens fa veure la senzillesa de jugar amb pocs elements, però molt ben col·locats per donar una gran sensació a minimalisme. El seu logo a la part superior esquerra, les icones de Twitter i contacte a la part dreta i al centre, amb una tipografia cridanera, al que es dedica.

Enllaç al web: Keanrich Mond

Alice Drougard

Alice Drougard va a la simple també amb el seu logo situat al centre, quatre pestanyes per passar entre les pàgines principals de la seva web i una sèrie de fotografies col·locades adequadament perquè d'un cop d'ull sapiguem a què es dedica i que fa.

Enllaç al web: Alice Drougard

Jonathan Ogden

Ogden segueix jugant amb el simple que és el seu nom com a logotip, Les xarxes socials situades justament avall sense cridar l'atenció i els seus treballs de disseny perquè puguem passar ràpidament per ells. En una pàgina mostra tot el que interessa.

Enllaç al web: Jonathan Ogden

pinsà

Finch ja va per altres llocs per jugar amb la tipografia i aquests colors que denoten elegància i sapiència del que fa. Amb pocs elements deixa tota la seva professionalitat a la vista. També deixa clar quines són les pàgines que li han enllaçat.

Enllaç al web: pinsà

A different Design

Aquest lloc web juga d'una altra manera. Utilitza un fons de pantalla amb un header des del qual podem passar a les pàgines principals, el seu telèfon i els enllaços a les seves xarxes socials.

Enllaç al web: A different Design

Brizk

Kai ens il·lustra amb la seva pròpia figura amb un triangle abstracte i una paleta de colors adequada per donar proximitat. També ofereix part del seu bio amb una tipografia en una mida menor per si volem conèixer més d'ell.

Enllaç al web: Brizk

Vertical Garden Design

A l'igual que l'anterior, Vertical Garden Design es va cap a una fotografia que mostra ràpid un dels seus millors treballs a l'aeroport d'Oslo. A la part superior tenim el header amb la «nav bar» o barra de navegació i fins i tot la possibilitat de canviar d'idioma. El logo el posa en format vertical per donar-li el toc final a una pàgina ben simple.

Enllaç al web: Vertical Garden Design

247 graus

247 graus juga amb el monocolor i una imatge de fons gairebé totalment fosca. La tipografia de l'header, en menor grandària que la de text i capçalera, va en majúscules per crear un gran contrast en el disseny general.

Enllaç al web: 247 graus

Gaudeix d'això

Una gran tipografia pot ser el senyal de ser autèntics i que sabem el que fem. No cal donar res més si el missatge és directe. El deixen ben clar: els encanta crear apps i llocs web de gran bellesa. Deixen el correu per a projectes i el seu estudi en un altre enllaç.

Enllaç al web: Gaudeix d'això

Allison Hou

Allison ens porta davant altres camins i inclou més imatges i aquesta tipografia més «femenina». El mateix passa amb la seva imatge principal i aquest header. Es dóna el luxe de presentar una targeta en la qual mostra trucs per al shopping.

Enllaç al web: Allison Hou

Pixelot

Pixelot és una mica bogeria, però també indica la creativitat de l'autor. utilitza el punter de l'ratolí per crear una màscara que desdibuixa allà on el tinguem posat.

Enllaç al web: Pixelot

Lionel Scholtes

Si vols fer el teu currículum online sense res més que això, Lionel et mostra els passos. Una tipografia adequada, la seva fotografia a la part superior esquerra, enllaços a les seves xarxes socials i la seva experiència. L'únic element decoratiu són aquestes dues línies horitzontals de diferents colors.

Enllaç al web: Lionel Scholtes

Elegant Seagulls

tornem a l'elegància de l'minimalisme i aquests grans espais en blanc. D'una banda el header molt allunyat de la resta d'elements, i d'altra banda aquests elements conformats de tal manera que creen una gran harmonia visual entre ells.

Enllaç al web: Elegant Seagulls

Lebensraum

Com podeu veure en tots els exemples, és important les pestanyes de header per passar a les diferents pàgines de la pàgina web. La tipografia és de gran importància, jugar amb ua per a la capçalera i una altra per al text amb una sans serif que faci un gran treball.

Enllaç al web: Lebensraum

PinkPoint

El contrast de colors ens porta a una web una mica més complexa de totes les vistes. No falten tots aquests elements principals per jugar aquesta vegada amb els degradats per a la imatge de fons i aquestes dues seccions que tenen els colors principals de l'degradat de la imatge principal.

Enllaç al web: PinkPoint

IWC

Una gran fotografia amb una tipografia ben escollida i un element «hero» pot donar a aquest web. Amb un slider mostra part de la feina per ser bastant simple en la seva concepció.

Enllaç al web: IWC

chop chop

La il·lustració digital ens porta a Chop Chop amb aquesta imatge que es menja tota la presència visual de la mateixa. El color blau en el header la dóna el seu punt per crear uns valors cromàtics amb sintonia en tota la imatge que projecta la web.

Enllaç al web: chop chop

7Pine

7Pine jeuga amb el verd per ser el gran protagonista de l'home. La resta ho compon una imatge amb molt de verd i una capçalera simple que vol passar desapercebuda davant el logotip.

Enllaç al web: 7Pine

The Sum

The Sum sí que ens porta a altres camins. Juga amb el blanc i negre de faula, una il·lustració molt creativa i que va a l'una que la resta d'elements i altres dues il·lustracions per crear un paisatge més que interessant. Tot un exemple per crear una web que es distingeixi de la resta.

Enllaç al web: The Sum

Capsa de barret

El blau és el color predominant en aquesta web en la qual no falten imatges totalment il·luminades pel blanc i el que seria el joc en 3D d'aquest constructor de sites que es mou segons ens desplacem.

Enllaç al web: Capsa de barret

kara Lyte

Kara va cap el simplisme i el minimalisme amb el seu natural i bella presència en la seva fotografia. La resta és un text que li ve a l'una i el que són els elements principals per al header i un botó hamburguersa per obrir-lo.

Enllaç al web: kara Lyte

Instrinsic Studio Màrqueting

Es de les web més simples però que ens mostra el que és fer un bloc. El vermell i el negre són els protagonistes en un lloc molt de «blocs».

Enllaç al web: Instrinsic Studio Màrqueting

Com crear un web senzilla en HTML

Us anem a ensenyar a crear una web senzilla en HTML perquè conegueu els elements més bàsics que la componen. Faltarà tenir un allotjament web on puguem carregar el codi i alguns retocs en CSS, però anem, que aquests són els principis per començar el nostre periple en HTML.

Després d'haver vist alguns exemples de webs senzilles amb què us podeu motivar prou per realitzar els vostres propis dissenys sense romperos molt el cap. A vegades la simplicitat crea un millor efecte que complicar-nos en coses complexes. Veureu que en la majoria de casos el simple funciona molt bé. Anem a fer-ho.

Crear una web senzilla en HTML és més fàcil del que en un principi pot semblar. Un lloc web es compon d'un header, el cos o contingut i el peu o footer com a elements principals. Podem classificar-los d'aquesta manera:

• Documents: Tots els documents que anem a crear cal fer-ho amb un . Obrim amb un i es tanca sempre amb un
• El cos o body: La part visible d'el document es troba entre i
• capçaleres: Se'ls coneix pels H1, H2, H3 ... Comencem amb un i tanquem amb un . El text que es trobi dins apareixerà com a capçalera i depenent de la seva numeració ho farà en un menor o major grandària.
• paràgrafs: El paràgraf es fica dins d'un i es tanca amb
• Enllaços: l'exemple més clar éscreativosonline.org/»> Enllaç a Creativos Online
• imatges: Les definim per l'etiqueta . Un exemple seria . Invoquem la imatge entre les cometes i fem servir un alt per al text alternatiu que per SEO és imprescindible.
• Llistes: Les llistes les definim amb per a una desordenada i amb per a una ordenada. Els elements de les llistes es fan servir amb . Recordeu sempre tancar amb la barra.

Amb aquests elements tindrem la base per a crear una web senzilla com veureu en la bona quantitat d'ells que us ensenyarem en la següent secció. Diguem que l'estructura semàntica amb els seus elements més importants queden així:

• Header amb la seva barra de navegació per les diferents pàgines de el lloc.
• L'article o espai de l'body en el qual podem crear una entrada d'un bloc, posar el nostre currículum o una imatge.
• La barra lateral o sidebar per posar informació addicional.
• El footer o peu, On col·locarem enllaços a les pàgines més importants de el lloc a l'igual que les icones de xarxes socials (sempre com a exemple).

En els exemples que veureu a continuació estan basats tots en un logo simple, però elegant, XNUMX header on col·loquen la navegació a les diferents pàgines de el lloc, un espai central dominat per un text o una imatge i un footer amb els elements esmentats en l'anterior paràgraf.

Us recomanem que no us trenqueu el cap i aneu al simple. El primordial és que aquestes zones es diferenciïn de la resta en una passada visual de segons. Amb el temps ja podrem complicar-nos i pencar més altres espais.

Aquest és un exemple clar d'un codi en HTML amb els elements més importants:

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

Amb aquestes línies de codi HTML hauríem creat primer el títol de la pàgina en el header amb, En aquest cas «HTML Semàntic», tancaríem tant el títol amb , El header amb i donaríem pas a obrir el cos amb .

tindríem una primera capçalera en H1 amb per tancar-la amb , I passaríem a una llista que ens serviria per crear la barra de navegació per les diferents pàgines del nostre lloc. Tanquem la llista amb , tanquem i finalment el document html amb .

Per acabar, sempre cal obrir un document per tancar-lo a la fi de tot el codi amb la barra. Després d'obrir el document sempre s'utilitza la referència a la llengua, que en aquest cas és l'espanyol amb «és» i amb un .

És important que us fixeu bé en el codi i sempre que obriu una funció tancar-la amb la barra corresponent.

Una mica de CSS

Entrem una mica en el CSS, però de passada perquè entengueu com donar estil a l'HTML. Diguem que el CSS i HTML van de la mà per donar aquestes webs senzilles que trobareu a continuació.

Si per una banda tenim l'ús semàntic de l'HTML per al que és el header o capçalera, el cos o body amb el seu article o imatge i el footer, en CSS usaríem la funció «Div» per identificar a cada un d'aquests espais per després poder aplicar els canvis necessaris en el disseny.

Una cosa tan simple com:

Mentre que podem aplicar els estils amb Div, una estructura adequada i perfecta ajudarà al fet que els rastrejadors web puguin «llegir» perfectament que va el nostre contingut, així que si seguim aquesta estructura bàsica, tindrem un gran treball i base de primeres.

Un exemple senzill de codi CSS:

h1 {
color: color blanc;
text-align: Centrar;
}

Cridem a l'H1 i el text el posarem en blanc amb color: white; i l'alinearem a centre amb 'text align ». Sempre cal tancar amb claudàtors després d'obrir a la crida de l'H1.

Foto de capçalera de Greg Rakozy