11 Sites de modelos CSS: não comece do zero!

11 Sites de modelos CSS: não comece do zero!

O design da Web está mais acessível do que nunca, mas ainda exige muito trabalho - e muita habilidade - para produzir resultados com aparência profissional.





Felizmente, você não precisa começar do zero sempre. Existem milhares de modelos CSS gratuitos disponíveis online, todos abraçando as tendências e tecnologias de design moderno. Você pode usá-los em sua forma original ou personalizá-los para torná-los seus.



Neste guia, examinaremos mais de perto os modelos CSS e onde encontrá-los.





O que é um modelo CSS?

Um modelo CSS não contém apenas CSS: ele fornece tudo que você precisa para criar um site totalmente funcional. Ao baixar um, você normalmente obterá uma pasta contendo o seguinte:

  • Arquivos HTML - Você receberá um arquivo HTML para cada página do site. Ele conterá exemplos de texto e imagens que você precisará substituir por seu próprio conteúdo. Você também precisará ajustar os metadados relacionados a itens como a descrição do site.
  • Arquivo CSS - Você geralmente obtém um arquivo CSS principal contendo todo o estilo do site, além de quaisquer extras, como uma folha de estilo redefinida ou uma para fontes da web.
  • Arquivo Javascript - Se o site contiver funções Javascript, o ideal é que elas sejam incluídas em seus próprios arquivos separados, em vez de incorporados aos documentos HTML.
  • Imagens, fontes e ícones - Todas as imagens usadas no modelo também devem ser incluídas. Você pode querer manter itens como ícones e planos de fundo, mas precisará substituir as outras imagens de espaço reservado pelas suas. Algumas fontes personalizadas também podem ser incluídas.

Ao contrário da maioria dos outros tipos de modelo que você encontrará - seja Wordpress, Excel ou Modelos InDesign - Os modelos CSS exigem um certo conhecimento técnico.



Não há uma interface amigável para editá-los, então você precisará saber pelo menos como se orientar em um documento HTML apenas para adicionar seu próprio conteúdo. Para fazer suas próprias personalizações, você precisará de um conhecimento decente de CSS.

criar um disco de boot usb windows 7

O que procurar em um modelo CSS

Existem tantos modelos CSS gratuitos para escolher. Então, como saber o que é certo para você? Aqui estão algumas coisas a serem observadas:



  • Projeto - Obviamente, você quer um site que tenha uma boa aparência e reflita a imagem que deseja retratar. Mas também considere se o modelo é adequado para suas necessidades agora e no futuro. Muitos são para sites de uma página; alguns são projetados para várias páginas. Se você precisar do último, considere se seria melhor usar um CMS como o Wordpress.
  • Otimizado para celular - O uso da web móvel agora é maior do que no desktop, então é essencial que seu site funcione corretamente em smartphones. Qualquer template CSS decente deve usar um design responsivo para que o site funcione perfeitamente em qualquer tamanho de tela. Se o seu escolhido não o fizer, mude para um que sim.
  • Bem escrito - Baixe o modelo e dê uma olhada no código antes de se comprometer a usá-lo. Deve ser limpo, bem estruturado e fácil de editar. Também deve estar ciente de SEO, com o uso correto de tags de título e cabeçalho.
  • Licença - Certifique-se de verificar a licença do modelo CSS escolhido. Muitos estão disponíveis sob uma licença Creative Commons , mas diferentes versões desta licença determinam se você pode editar o modelo, se você pode usá-lo comercialmente e se você precisa dar crédito ao designer original.
  • Addons - Alguns desenvolvedores de templates CSS oferecem seus trabalhos em uma base 'freemium'. Você obtém o modelo gratuitamente, mas tem a opção de pagar por personalizações adicionais para torná-lo exclusivo para o seu site.

Com tudo isso explicado, vamos dar uma olhada nos melhores lugares para encontrar templates CSS gratuitos.

1 Templated.co

Esta coleção impressionante de mais de 800 modelos CSS contém estilos para cada classe de site. Eles são todos criados especialmente para o site, então você não deve vê-los aparecendo em nenhum outro lugar.



Todos os modelos são responsivos e construídos com HTML5. Eles são pequenos e leves, com recursos Javascript extras, como uma mesa de luz de vídeo ou efeitos de rolagem, usados ​​apenas onde agregam valor real à experiência.

2 Styleshout.com

O Styleshout oferece uma grande variedade de modelos gratuitos e premium, o primeiro lançado sob a licença Creative Commons.

Os modelos gratuitos cobrem uma ampla gama de categorias, de sites completos a páginas em breve e até mesmo a página de erro 404 frequentemente esquecida. Você pode personalizá-los você mesmo e adaptá-los ao estilo do seu site existente ou pode pagar para que o Styleshout faça isso por você.

3 HTML5Up.net

Esta coleção super estilosa de modelos também é super popular. A maioria foi baixada centenas de milhares de vezes e é fácil entender por quê.

Todas as categorias usuais de site são atendidas, como blog e página de produto, e há alguns designs particularmente interessantes para fotógrafos mostrarem seu trabalho. Os modelos básicos de estilo de grade são extremamente personalizáveis, enquanto os mais chamativos tendem a usar Javascript com bastante frequência, portanto, podem ser menos adequados para seus ajustes.

Quatro. Freebiesbug.com

O que falta em quantidade ao Freebiesbug, ele mais do que compensa em qualidade. Um site onde jovens desenvolvedores mostram suas habilidades, que inclui muitos designs premium e sofisticados.

A impressionante coleção de modelos gratuitos do site é perfeita para agências, fotógrafos, desenvolvedores de aplicativos e outros criativos. Repleto de efeitos e animações Javascript e CSS, você pode personalizar os sites, embora eles geralmente sejam tão legais que você talvez não queira.

Além disso, Freebiesbug.com inclui todos os tipos de recursos gratuitos para web designers, incluindo fontes, fotos de ações, esboços do Illustrator e arquivos PSD e muito mais.

5 Free-CSS.com

Free-CSS.com é um site simples que oferece - no momento em que este livro foi escrito - cerca de 2503 modelos gratuitos, além de muitos modelos premium também, caso você ainda não consiga encontrar o que procura.

Com tantos para escolher, pode ser um pouco difícil escolher o design perfeito. A qualidade é geralmente boa, embora a existência de 10 anos do site signifique que ele ainda hospeda modelos escritos em XHTML. Você vai querer evitar isso. A outra coisa é verificar a licença do modelo escolhido. Eles são todos gratuitos, mas alguns são de domínio público, alguns Creative Commons e alguns usam uma licença específica do autor.

6 OS-Templates.com

28 páginas de modelos CSS gratuitos, a maioria usando layouts modernos baseados em grade em uma única página. Se o que você procura é simples, então este é o lugar para procurar. Os designs são limpos, atraentes e fáceis de personalizar.

OS-Templates.com também oferece uma grande coleção de 'modelos básicos'. Eles fornecem a estrutura básica para um site em vários esquemas de layout populares (duas colunas, três colunas, etc.), ao mesmo tempo em que são completamente desprovidos de estilo. Assim como usar o tema padrão no Wordpress, a tela em branco permite que você transforme seu site em qualquer coisa que desejar.

7. boag.online [Não disponível mais]

Maglev é um modelo de site de uma única página que pode ser visualizado em ação em boag.online .

É um modelo rápido e simples, ideal para uma página de produto. O design minimalista é aumentado apenas por alguns efeitos Jquery para ajudá-lo a rolar entre as seções. O layout simples funciona por si só, mas também é um excelente ponto de partida para suas próprias personalizações.

8 Pixel Buda

Os modelos do Pixel Buddha não se limitam apenas a sites, eles também incluem alguns para boletins informativos por e-mail.

De qualquer forma, todos eles foram projetados com HTML5 e CSS3 e são responsivos, então ficam ótimos em qualquer dispositivo. Os destaques incluem Howdy HTML, um belo modelo de portfólio / currículo e SOHO HTML, uma página de comércio eletrônico de aparência incrível que inclui os arquivos PSD de origem além do HTML e CSS.

site onde você pode assistir a vídeos do youtube com amigos

9 Templatemo.com

Quase 500 modelos gratuitos estão disponíveis no Templatemo. Alguns dos melhores são aqueles que se libertam do sistema de grade no estilo Bootstrap para tentar algo diferente.

A maioria dos modelos é simples e organizada, embora recursos como lightboxes e carrosséis de conteúdo sejam incluídos onde são necessários. Também gostamos do fato de que vários dos modelos são configurados para funcionar com até seis páginas por padrão. Isso torna mais fácil se o seu conteúdo não se encaixa no layout de uma página cada vez mais comum.

10 Startbootstrap.com

Bootstrap é uma estrutura de front-end incrivelmente popular que permite criar sites de alta qualidade em um piscar de olhos. No entanto, leva um pouco de tempo para aprender, e é aí que entra o Start Bootstrap.

Esta coleção de modelos de código aberto gratuitos são todos construídos usando o sistema de grade do Bootstrap. Existem mais de 30 para escolher. Alguns são totalmente projetados e destinados a aplicativos, blogs e páginas de destino, enquanto outros são layouts em branco esperando que você se estilize.

onze. Bootswatch.com

Finalmente, algo um pouco mais prático. O Bootswatch oferece 16 temas de código aberto para estilizar sites criados com o Bootstrap.

Você mesmo pode construir o layout do seu site usando o Bootstrap ou baixar um dos modelos em branco do Start Bootstrap. O que o Bootswatch faz é mudar as fontes, cores de fundo e o estilo dos botões, menus e outros elementos. Ele dá ao seu site uma aparência única, ao mesmo tempo que se mantém fiel ao ethos ultra-clean do Bootstrap.

É fácil montar um site básico com o Bootstrap, e o Bootswatch dá a ele um acabamento instantâneo.

Como usar modelos CSS

Em termos gerais, existem duas maneiras de usar modelos. Você pode usá-los como estão ou como a base para seu próprio projeto.

O perigo ao usar modelos é que você acaba com um site idêntico ao de outra pessoa. Escolha um modelo popular e pode haver literalmente dezenas de milhares de sites idênticos. Este é o principal argumento a favor de personalizá-los.

transferir arquivos do pc para o telefone

Os modelos CSS são um ótimo atalho para web designers experientes que têm um layout básico em mente e desejam começar a estilizá-lo.

Eles também são perfeitos para qualquer novato em web design. Se você conhece HTML e CSS, mas ainda não tem a confiança ou o conhecimento para construir um site do zero, um modelo CSS serve tanto como uma maneira fácil de obter um site com ótima aparência, quanto como uma ferramenta de aprendizado incrível.

Você pode tratá-lo como um trabalho em andamento. Comece por trocando as fontes e mudando o esquema de cores e, com o tempo, você pode redesenhar elementos existentes, adicionar novos e assim por diante. Não há maneira melhor de aprender do que por meio da experiência prática.

Você usa modelos CSS ao construir sites? Quais são seus lugares favoritos para encontrá-los? Compartilhe suas experiências e dicas conosco nos comentários.

Compartilhado Compartilhado Tweet O email Como limpar seu PC com Windows usando o prompt de comando

Se o seu PC com Windows estiver com pouco espaço de armazenamento, limpe o lixo usando esses utilitários de prompt de comando rápidos.

Leia a seguir Tópicos relacionados
  • Programação
  • Designer de Web
  • CSS
Sobre o autor Andy Betts(221 artigos publicados)

Andy é um ex-jornalista impresso e editor de revista que escreve sobre tecnologia há 15 anos. Nesse período, ele contribuiu para inúmeras publicações e produziu trabalhos de redação para grandes empresas de tecnologia. Ele também forneceu comentários de especialistas para a mídia e apresentou painéis em eventos do setor.

Mais de Andy Betts

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever