30 páxinas web incriblemente sinxelas

Algunhas das páxinas máis famosas están moi sobrecargadas de información, pero prefiro o contrario: as sinxelas.

Obviamente, o gran expoñente deste grupo é Google coa súa páxina de inicio minimalista desde que comezou a súa andaina, pero claramente non é o único en Internet que se compromete a manter as cousas sinxelas.

Exemplos simples de páxinas web HTML

Kean Richmond

Kean Richmond fainos ver a sinxeleza de xogar con poucos elementos, pero moi ben colocado dar unha gran sensación ao minimalismo. O seu logotipo na parte superior esquerda, as iconas de Twitter e de contacto á dereita e no centro, cunha tipografía atractiva, ao que está dedicado.

Ligazón á web: Keanrich mond

Alicia drougard

Alicia drougard mantelo sinxelo tamén co teu logotipo colocado no centro, catro lapelas para moverse entre as páxinas principais do teu sitio web e unha serie de fotografías debidamente colocadas para que dunha soa ollada saibamos o que fas e o que fas.

Ligazón á web: Alicia drougard

jonathan ogden

Ogden segue xogando co simple que é o teu nome como logotipo, as redes sociais situadas xusto debaixo sen chamar a atención e o seu deseño funciona para que podamos percorrelas rapidamente. Nunha páxina amosa todo o que importa.

Ligazón á web: jonathan ogden

Tentilhão

Finch xa vai a outros lugares para xogar coa tipografía e eses cores que denotan elegancia e sabedoría do que fai. Con poucos elementos, deixa toda a súa profesionalidade á vista. Tamén deixa claro que páxinas te ligaron.

Ligazón á web: Tentilhão

Un deseño diferente

este sitio web xogar doutro xeito. Usa un fondo de pantalla cun encabezado desde o que podemos ir ás páxinas principais, ao teléfono e ás ligazóns ás túas redes sociais.

Ligazón á web: Un deseño diferente

rápido

Kai ilústranos coa súa propia figura con un triángulo abstracto e unha paleta de cores adecuada para dar proximidade. Tamén ofrece parte da súa biografía cun tipo de letra nun tamaño menor por se queremos saber máis sobre el.

Ligazón á web: rápido

Deseño de xardín vertical

Como o anterior, Vertical Garden Design diríxese cara a unha fotografía que se mostra rápido un dos seus mellores traballos no aeroporto de Oslo. Na parte superior temos a cabeceira coa «barra de navegación» ou barra de navegación e incluso a posibilidade de cambiar o idioma. O logotipo colócao en formato vertical para dar o toque final a unha páxina moi sinxela.

Ligazón á web: Deseño de xardín vertical

247 Grao

247 Grao xoga con monocromo e unha imaxe de fondo case totalmente escuro. A letra de cabeceira, máis pequena que o texto e a cabeceira, é maiúscula para crear un gran contraste no deseño xeral.

Ligazón á web: 247 Grao

Disfruta isto

un unha gran tipografía pode ser o sinal de ser auténtica e que sabemos o que facemos. Non tes que dar nada máis se a mensaxe é directa. Deixano claro: adoran crear fermosas aplicacións e sitios web. Deixan o correo para proxectos e o seu estudo noutra ligazón.

Ligazón á web: Disfruta isto

Allison hou

Allison lévanos antes doutros cursos e inclúe máis imaxes e esa tipografía máis "feminina". O mesmo pasa coa túa imaxe principal e esa cabeceira. Ten o luxo de presentar unha tarxeta que mostra trucos de compra.

Ligazón á web: Allison hou

pixelot

Pixelot está un pouco tolo, pero tamén indica a creatividade do autor. Uso o punteiro do rato para crear unha máscara que se difumina onde o teñamos pousado.

Ligazón á web: pixelot

Lionel escolares

Se queres fai o teu currículo en liña con nada máis que iso, Lionel móstrache os pasos. Unha fonte adecuada, a túa foto na parte superior esquerda, as ligazóns ás túas redes sociais e a túa experiencia. O único elemento decorativo son esas dúas liñas horizontais de cores diferentes.

Ligazón á web: Lionel escolares

Gaivotas elegantes

voltamos á elegancia do minimalismo e eses grandes espazos en branco. Por un lado a cabeceira está moi lonxe do resto dos elementos e, por outra banda, aqueles elementos conformados de tal xeito que crean unha gran harmonía visual entre eles.

Ligazón á web: Gaivotas elegantes

Lebensraum

Como podes ver en todos os exemplos, é importante as pestanas de cabeceira para ir ás diferentes páxinas desde o sitio web. A tipografía ten moita importancia, xoga cun para o encabezado e outro para o texto cun sans serif que fai un gran traballo.

Ligazón á web: Lebensraum

PinkPoint

O contraste de cores lévanos a unha rede un pouco máis complexa de todas as vistas. Non faltan todos eses elementos principais para xogar esta vez cos degradados da imaxe de fondo e esas dúas seccións que teñen as cores principais do gradiente de imaxe principal.

Ligazón á web: PinkPoint

IWC

Unha gran fotografía con un tipo de letra ben escollido e un elemento "heroe" podes dar a esta web. Cun control deslizante mostra que parte da obra é bastante sinxela na súa concepción.

Ligazón á web: IWC

Chuleta

A ilustración dixital achéganos a Chop Chop con esa imaxe que come toda a súa presenza visual. A cor azul do encabezado dálle o seu punto de crear valores cromáticos acordes con toda a imaxe proxectada pola web.

Ligazón á web: Chuleta

7 Piñeiro

7Pine xoga co green para ser o gran protagonista do prato. O resto componse unha imaxe con moito verde e un sinxelo encabezado que quere pasar desapercibido polo logotipo.

Ligazón á web: 7 Piñeiro

A suma

A suma si nos leva noutras direccións. Xoga co fabuloso branco e negro, unha ilustración moi creativa e iso vai parello ao resto de elementos e outras dúas ilustracións para crear unha paisaxe máis que interesante. Un exemplo para crear un sitio web que destaque do resto.

Ligazón á web: A suma

Caixa de sombreiros

O azul é a cor predominante nesta páxina web na que non faltan as imaxes totalmente iluminadas polo branco e cal sería o xogo en 3D dese creador de sitios que se move a medida que nos movemos.

Ligazón á web: Caixa de sombreiros

Kara lyte

Kara vai a sinxeleza e minimalismo coa súa fermosa e natural presenza na túa fotografía. O resto é un texto que inclúe cales son os elementos principais para a cabeceira e un botón de hamburguesa para abrilo.

Ligazón á web: Kara lyte

Mercadotecnia Studio Instrinsic

Es da web máis sinxela pero iso móstranos que é facer un blog. O vermello e o negro son os protagonistas nun sitio moi "blogue".

Ligazón á web: Mercadotecnia Studio Instrinsic

Como crear un sitio web sinxelo en HTML

Imos ensinarche crear un sitio web sinxelo en HTML para que coñezas os elementos máis básicos que o compoñen. Será necesario ter un servidor web onde podamos cargar o código e algúns axustes en CSS, pero vamos, estes son os principios para comezar a nosa viaxe en HTML.

Visto algún exemplos web sinxelos Co que podes motivarte o suficiente para facer os teus propios deseños sen romper moito a cabeza. Ás veces, o simple crea un efecto mellor que complicarnos en cousas complexas. Verás que na maioría dos casos o sinxelo funciona moi ben. Vaia por ela.

Crear un sitio web sinxelo en HTML é máis sinxelo do que pode parecer ao principio. Unha páxina web consiste nunha cabeceira, o corpo ou contido e o pé ou pé de páxina como elementos principais. Podemos clasificalos deste xeito:

• Documentos: todos os documentos que imos crear deben facerse cun . Abrimos cun e pecha sempre cun
• O corpo ou corpo: a parte visible do documento está entre Si
• Cabeceiras: son coñecidos polo H1, H2, H3 ... Comezamos por a e pechamos cun . O texto que hai dentro aparecerá como cabeceira e dependendo da súa numeración fará nun tamaño menor ou maior.
• Parágrafos: o parágrafo está incluído dentro dun e pecha con
• Ligazóns: o exemplo máis claro é Link to Creativos Online
• Imaxes: definímolos pola etiqueta . Un exemplo sería . Invocamos a imaxe entre as comiñas e usamos un alt para o texto alternativo que é esencial para SEO.
• Listas: definimos as listas con para un desordenado e con por un aseado. Os elementos da lista úsanse con . Lembre sempre de pechalos coa barra.

Con estes elementos teremos a base para crear un sitio web sinxelo como verás na boa cantidade delas que che ensinaremos na seguinte sección. Digamos que a estrutura semántica cos seus elementos máis importantes ten este aspecto:

• Cabeceira coa súa barra de navegación para as distintas páxinas do sitio.
• O artigo ou espazo corporal no que podemos crear unha publicación no blog, poñer o noso currículo ou unha imaxe.
• A barra lateral ou barra lateral para poñer información adicional.
• O pé de páxina ou pé, onde colocaremos ligazóns ás páxinas máis importantes do sitio así como ás iconas das redes sociais (sempre como exemplo).

Nos exemplos que verás a continuación están todo baseado nun logotipo sinxelo pero elegante, unha cabeceira onde sitúan a navegación ás distintas páxinas do sitio, un espazo central dominado por un texto ou unha imaxe e un pé de páxina cos elementos mencionados no parágrafo anterior.

Recomendámolo non romper a cabeza e ir ao sinxelo. O principal é que estas áreas diferéncianse do resto nun paso visual de segundos. Co tempo poderemos complicarnos e traballar máis noutros espazos.

Isto é un claro exemplo de código HTML cos elementos máis importantes:

<!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 estas liñas de código HTML teriamos creou por primeira vez o título da páxina na cabeceira con, neste caso «HTML semántico», pechariamos o título con , a cabeceira con e dariamos paso a abrir o corpo con .

Teriamos un primeiro cabezazo en H1 con para pechalo con e iríamos a unha lista que nos axudaría a crear a barra de navegación para as diferentes páxinas do noso sitio. Pechamos a lista con , pechamos e, finalmente, o documento html con .

Finalmente, abra sempre un documento con para pechalo ao final de todo o código coa barra. Despois de abrir o documento, úsase sempre a referencia ao idioma, que neste caso é o castelán con «es» e cun .

É importante que mires atentamente o código e cando queiras abre unha función e péchaa coa barra correspondente.

Un pouco de CSS

Entramos un pouco no CSS, pero de paso para que o entenda como estilizar HTML. Digamos que CSS e HTML van da man para dar a eses sinxelos sitios web que atoparás a continuación.

Se por un lado temos o uso semántico de HTML para o que é a cabeceira ou cabeceira, o corpo ou o corpo co seu artigo ou imaxe e o pé de páxina, en CSS empregaríamos a función «Div» para identificar a cada un destes espazos para despois aplicar os cambios necesarios no deseño.

Algo tan sinxelo como:

Aínda que podemos aplicar os estilos con Div, unha estrutura adecuada e perfecta axudará para que os rastrexadores web poidan "ler" perfectamente de que vai o noso contido, polo que se seguimos esa estrutura básica, primeiro teremos un gran traballo e base.

Un exemplo de código CSS sinxelo:

h1 {
cor: branco;
aliñar texto: centro;
}

Chamamos H1 e ao texto poñerémolo en branco con cor: branco; e aliñarémolo ao centro con «aliñar texto». Pecha sempre con corchetes despois de abrir á chamada H1.

Foto da cabeceira de Greg rakozy