30 páginas da web incrivelmente simples

Algumas das páginas mais famosas estão muito sobrecarregadas de informações, mas prefiro o contrário: as simples.

Obviamente, o grande expoente desse grupo é o Google com sua página inicial minimalista desde o início de sua jornada, mas claramente não é o único na Internet que está comprometido em manter as coisas simples.

Exemplos simples de páginas da web em HTML

Kean Richmond

Kean Richmond nos faz ver a simplicidade de brincar com poucos elementos, mas muito bem colocado para dar uma ótima sensação ao minimalismo. Seu logotipo no canto superior esquerdo, o Twitter e ícones de contato à direita e no centro, com uma tipografia marcante, ao que ele se dedica.

Link para a web: Keanrich mond

Alice desajeitada

Alice desajeitada mantenha-o simples também com seu logotipo colocado no centro, quatro guias para mover-se entre as páginas principais do seu site e uma série de fotografias devidamente colocadas para que possamos saber rapidamente o que você faz e o que faz.

Link para a web: Alice desajeitada

jonathan ogden

Ogden continue brincando com a simplicidade do seu nome como logotipo, as redes sociais localizadas logo abaixo sem chamar a atenção e seu design funciona para que possamos percorrê-las rapidamente. Em uma página, mostra tudo o que importa.

Link para a web: jonathan ogden

Tentilhão

Finch já está indo para outros lugares para brincar com tipografia e aqueles cores que denotam elegância e sabedoria do que faz. Com apenas alguns elementos, ele deixa todo o seu profissionalismo em vista. Também deixa claro quais páginas possuem links para você.

Link para a web: Tentilhão

Um design diferente

Esse site jogar diferente. Use um papel de parede com um cabeçalho a partir do qual podemos ir às páginas principais, ao seu telefone e aos links das suas redes sociais.

Link para a web: Um design diferente

rápido

Kai nos ilustra com sua própria figura com um triângulo abstrato e uma paleta de cores adequada para dar proximidade. Ele também oferece parte de sua biografia com uma fonte menor, caso queiramos saber mais sobre ele.

Link para a web: rápido

Design de jardim vertical

Como o anterior, o Vertical Garden Design vai em direção a uma fotografia que mostra rápido um de seus melhores empregos no aeroporto de Oslo. No topo temos o cabeçalho com a «barra de navegação» ou barra de navegação e ainda a possibilidade de alterar o idioma. O logotipo coloca-o em formato vertical para dar o toque final a uma página muito simples.

Link para a web: Design de jardim vertical

247Grad

247Grad brincar com monocromático e uma imagem de fundo quase totalmente escuro. A fonte do cabeçalho, menor que o texto e o cabeçalho, é maiúscula para criar um grande contraste no design geral.

Link para a web: 247Grad

Aproveite esta

Uma ótima tipografia pode ser o sinal de ser autêntico e que sabemos o que fazemos. Você não precisa dar mais nada se a mensagem for direta. Eles deixam isso claro: eles adoram criar aplicativos e sites bonitos. Eles deixam o correio para projetos e seu estudo em outro link.

Link para a web: Aproveite esta

Allison hou

Allison nos leva antes de outros cursos e inclui mais imagens e aquele tipo de letra mais "feminino". O mesmo vale para sua imagem principal e esse cabeçalho. Ele tem o luxo de apresentar um cartão mostrando truques de compras.

Link para a web: Allison hou

pixelot

Pixelot é meio maluco, mas também indica a criatividade do autor. Usar o ponteiro do mouse para criar uma máscara isso embaça onde quer que esteja empoleirado.

Link para a web: pixelot

Lionel scholtes

Se você quiser faça seu currículo online com nada mais do que isso, Lionel mostra os passos. Uma fonte adequada, sua foto no canto superior esquerdo, links para suas redes sociais e sua experiência. O único elemento decorativo são aquelas duas linhas horizontais de cores diferentes.

Link para a web: Lionel scholtes

Gaivotas Elegantes

Nós voltamos à elegância do minimalismo e aqueles grandes espaços em branco. Por um lado, o cabeçalho está muito longe do resto dos elementos e, por outro lado, aqueles elementos moldados de forma a criar uma grande harmonia visual entre eles.

Link para a web: Gaivotas Elegantes

Habitat

Como você pode ver em todos os exemplos, é importante as guias do cabeçalho para ir para as diferentes páginas a partir do site. A tipografia é de grande importância, jogue com uma para o cabeçalho e outra para o texto com uma sans serif que faz um ótimo trabalho.

Link para a web: Habitat

PinkPointName

O contraste de cores nos leva a uma teia um pouco mais complexa de todas as visualizações. Nem todos esses elementos principais estão faltando para brincar desta vez com os gradientes para a imagem de fundo e aquelas duas seções que têm as cores principais do gradiente para a imagem principal.

Link para a web: PinkPointName

IWC

Uma ótima fotografia com uma fonte bem escolhida e um elemento "herói" você pode dar para esta web. Com um controle deslizante mostra que parte da obra é bastante simples na sua concepção.

Link para a web: IWC

Chop chop

A ilustração digital nos leva a Chop Chop com aquela imagem que devora toda a presença visual dela. A cor azul do cabeçalho confere seu ponto de criação de valores cromáticos em sintonia com toda a imagem projetada pela web.

Link para a web: Chop chop

7 Pin

7Pine joga com o verde para ser o grande protagonista do home plate. O resto compõe uma imagem com muito verde e um cabeçalho simples que quer passar despercebido pelo logotipo.

Link para a web: 7 Pin

A soma

A soma nos leva em outras direções. Brinque com o lendário preto e branco, uma ilustração muito criativa e isso vai junto com o resto dos elementos e duas outras ilustrações para criar uma paisagem mais do que interessante. Um exemplo para criar um site que se destaque dos demais.

Link para a web: A soma

caixa de chapéu

Azul é a cor predominante neste site em que não faltam imagens totalmente iluminadas por branco e como seria o jogo em 3D daquele construtor de sites que se move à medida que avançamos.

Link para a web: caixa de chapéu

kara lite

Kara vai para simplicidade e minimalismo com sua presença natural e bela em sua fotografia. O resto é um texto que vem com quais são os principais elementos do cabeçalho e um botão de hambúrguer para abri-lo.

Link para a web: kara lite

Marketing Instrinsic Studio

Es da web mais simples mas isso nos mostra o que é fazer um blog. Vermelho e preto são os protagonistas de um site muito "blog".

Link para a web: Marketing Instrinsic Studio

Como criar um site simples em HTML

Nós vamos te ensinar crie um site simples em HTML para que você conheça os elementos mais básicos que o compõem. Será necessário ter um host onde possamos carregar o código e alguns ajustes no CSS, mas vamos lá, esses são os princípios para começar nossa jornada em HTML.

Tendo visto alguns exemplos simples da web Com o qual você pode se motivar o suficiente para fazer seus próprios designs sem quebrar a cabeça muito. Às vezes, o simples cria um efeito melhor do que nos complicar em coisas complexas. Você verá que, na maioria dos casos, o simples funciona muito bem. Vá em frente.

Criar um site simples em HTML é mais fácil do que pode parecer à primeira vista. Um website consiste em um cabeçalho, o corpo ou conteúdo e o rodapé ou rodapé como elementos principais. Podemos classificá-los desta forma:

• Documentos: todos os documentos que vamos criar devem ser feitos com um . Abrimos com um e sempre fecha com um
• O corpo ou corpo: a parte visível do documento está entre Y
• Cabeçalhos: são conhecidos por H1, H2, H3 ... Começamos com um e fechamos com um . O texto que estiver dentro aparecerá como um cabeçalho e dependendo da sua numeração irá em tamanho menor ou maior.
• Parágrafos: o parágrafo está dentro de um e fecha com
• Links: o exemplo mais claro écreativosonline.org/»> Link para Creativos Online
• Imagens: nós os definimos pelo rótulo . Um exemplo seria . Invocamos a imagem entre aspas e usamos um alt para o texto alternativo, o que é essencial para o SEO.
• Listas: definimos as listas com para um bagunçado e com para um puro. Os itens da lista são usados ​​com . Lembre-se sempre de fechá-los com a barra.

Com esses elementos teremos a base para a criação de um site simples como você verá na boa quantidade deles que ensinaremos na próxima seção. Digamos que a estrutura semântica com seus elementos mais importantes seja assim:

• Cabeçalho com sua barra de navegação para as várias páginas do site.
• O artigo ou espaço corporal em que podemos criar uma entrada de blog, colocar nosso currículo ou uma imagem.
• A barra lateral ou barra lateral para colocar informações adicionais.
• O rodapé ou pé, onde colocaremos links para as páginas mais importantes do site assim como os ícones das redes sociais (sempre a título de exemplo).

Nos exemplos que você verá abaixo estão tudo baseado em um logotipo simples, mas elegante, um cabeçalho onde colocam a navegação às diferentes páginas do site, um espaço central dominado por um texto ou uma imagem e um rodapé com os elementos mencionados no parágrafo anterior.

Recomendamos que não quebre sua cabeça e vá para o simples. O principal é que essas áreas se diferenciam das demais em um passe visual de segundos. Com o tempo poderemos nos complicar e trabalhar mais outros espaços.

Isto é um exemplo claro de um código HTML com os elementos mais 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>

Com essas linhas de código HTML, teríamos primeiro criou o título da página no cabeçalho com, neste caso «HTML semântico», fecharíamos o título com , o cabeçalho com e daríamos lugar para abrir o corpo com .

Nós teríamos um primeiro cabeçalho em H1 com para fechar com , e iríamos para uma lista que nos ajudaria a criar a barra de navegação para as diferentes páginas de nosso site. Fechamos a lista com , nós fechamos e finalmente o documento html com .

Finalmente, sempre abra um documento com para fechá-lo no final de todo o código com a barra. Após a abertura do documento, utiliza-se sempre a referência ao idioma, que neste caso é o espanhol com «es» e com um .

É importante que você olhe atentamente para o código e sempre que você abre uma função fecha-a com a barra em causa.

Um pouco de CSS

Vamos entrar um pouco no CSS, mas de passagem para que você entenda como estilizar HTML. Digamos que CSS e HTML andem de mãos dadas para fornecer aqueles sites simples que você encontrará abaixo.

Se por um lado temos o uso semântico do HTML para o que é o cabeçalho ou cabeçalho, o corpo ou corpo com seu artigo ou imagem e o rodapé, em CSS, usaríamos a função «Div» para identificar a cada um destes espaços para posteriormente aplicar as alterações necessárias ao design.

Algo tão simples como:

Embora possamos aplicar os estilos com Div, uma estrutura adequada e perfeita ajudará para que os rastreadores da web possam "ler" perfeitamente do que se trata nosso conteúdo, portanto, se seguirmos essa estrutura básica, teremos um ótimo trabalho e base primeiro.

Un exemplo de código CSS simples:

h1 {
cor: branco;
text-align: centro;
}

Chamamos H1 e o texto vamos colocá-lo em branco com a cor: branco; e vamos alinhá-lo ao centro com «alinhamento de texto». Sempre feche com colchetes após a abertura para a chamada H1.

Foto do cabeçalho de Greg Rakozy