11 Locais do molde css: não começar do zero!

Web design é mais acessível do que nunca, mas ainda tem um monte de trabalho - e muita habilidade - para produzir resultados de aparência profissional.

Quer aprender Web Design? 7 canais do YouTube antes de ComeçarQuer aprender Web Design? 7 canais do YouTube antes de ComeçarYouTube tem milhares de vídeos e canais para iniciantes de web design. Aqui nós olhamos alguns dos melhores para começar.consulte Mais informação

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

Neste guia, vamos dar uma olhada em modelos de CSS, e onde encontrá-los.

O que é um modelo CSS?

Um modelo CSS não contém apenas CSS: dá-lhe tudo o que necessita para criar um site em pleno funcionamento. Quando você baixar um, você normalmente receberá uma pasta contendo o seguinte:

• arquivos HTML - Você vai conseguir um arquivo HTML para cada página do site. Ele irá conter texto da amostra e imagens que você precisa para substituir com seu próprio conteúdo. Você também precisa ser capaz de ajustar os dados de meta, referente a coisas como a descrição do site.
• arquivo CSS - Você normalmente obter um arquivo principal CSS contendo todos os estilos para o site, além de quaisquer extras como uma folha de estilo reset, ou um para fontes web.
• arquivo javascript - Se o site contém javascript funções que idealmente deve ser incluído em seu próprio arquivo separado, em vez de incorporados os documentos em HTML.
• Imagens, fontes e ícones - As imagens utilizadas no modelo deve também ser incluídos. Você pode querer manter as coisas como ícones e fundos, mas terá de substituir as outras imagens de espaço reservado com o seu próprio. Algumas fontes personalizadas também podem ser incluídos.

Diferentemente da maioria dos outros tipos de modelo que você vai encontrar - seja WordPress, Excel, ou modelos do InDesign - CSS modelos exigem uma certa quantidade de conhecimento técnico.6 lugares incríveis Para encontrar livre InDesign Templates6 lugares incríveis Para encontrar livre InDesign TemplatesQue tal usar um modelo InDesign profissional de qualidade em vez de fazer o seu próprio? Este artigo discute os melhores sites de modelos gratuitos na web.consulte Mais informação

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

Que a procurar em um modelo CSS

Há tantos modelos CSS livre para escolher. Então, como você sabe que é certo para você? Aqui estão algumas coisas a olhar para fora:

• desenhar - Obviamente, você quer um site que parece bom e reflete qualquer imagem que pretende retratar. Mas também considerar se o modelo é adequado para suas necessidades, tanto agora como no futuro. Muitos são para uma página websites- alguns são projetados para várias páginas. Se você precisa o último, considerar se você pode ser melhor fora de usar um CMS como WordPress em seu lugar.
• Otimizado para dispositivos móveis - o uso da web móvel é agora maior do que área de trabalho, por isso é essencial que o seu site funciona corretamente em smartphones. Qualquer modelo CSS decente deve usar o design ágil para que o site funciona perfeitamente em qualquer tela de tamanho. Se o seu escolhido não, mudar para um que faz.
• Bem escrito - Baixe o modelo e dar uma olhada no código antes de cometer a usá-lo. Ele deve ser limpo, bem estruturado e fácil de editar. Também deve ser SEO-consciente, com o uso correto de título e tags de cabeçalho.
• Licença - Certifique-se de verificar a licença para o seu template CSS escolhido. Muitos estão disponíveis sob uma licença Creative Commons, mas diferentes versões desta licença determinar se você pode editar o modelo, se você pode usá-lo comercialmente, e se você precisa para creditar o designer original.
• complementos - Alguns desenvolvedores modelo CSS oferecer seu trabalho em uma base “freemium”. Você começa o modelo de graça, mas tem a opção de pagar por personalizações adicionais para torná-lo exclusivo para o seu site.

Com tudo o que explicou, vamos dar uma olhada nas melhores lugares para encontrar modelos CSS livres.

1. Templated.co

Esta impressionante coleção de mais de 800 modelos de CSS contém estilos para todas as classes de website. Eles estão todos criados especialmente para o site, então você não deve vê-los surgindo em qualquer outro lugar.

Video: Recomeçar do zero

Todos os modelos são sensíveis, e construído com HTML5. Eles são pequenos e leves, com recursos extras javascript, como uma mesa de luz de vídeo ou rolar efeitos, utilizado somente onde eles agregam valor real para a experiência.

2. Styleshout.com

Styleshout oferece uma grande variedade de ambos os modelos gratuitos e premium, o ex-lançado sob a licença Creative Commons.

Os modelos gratuitos abrangem uma ampla gama de categorias, a partir de sites completos para Coming Soon páginas, e até mesmo o muitas vezes esquecido página de erro 404. Você pode personalizá-los a si mesmo e adaptá-las ao estilo de seu site existente, ou você pode pagar para obter styleshout para fazer isso por você.Como fazer um grande 404 Error Page & 10 ExemplosComo fazer um grande 404 Error Page & 10 Exemplosconsulte Mais informação

3. HTML5Up.net

Esta coleção super-elegante de modelos também é super-popular. A maioria foi baixado centenas de milhares de vezes, e é fácil perceber porquê.

Todas as categorias usuais do local são servidos, como blog e página do produto, e existem alguns projetos particularmente agradáveis ​​para os fotógrafos para mostrar seu trabalho. Os modelos básicos em estilo de grade são extremamente personalizável, enquanto os mais vistosos tendem a usar javascript muito fortemente por isso pode ser menos adequado às suas emendas.

4. Freebiesbug.com

O que Freebiesbug falta em quantidade mais do que compensa em qualidade. Um site onde os jovens desenvolvedores de mostrar suas habilidades, ele inclui muitos high-end, modelos premium.

impressionante coleção do site de modelos gratuitos são perfeitos para as agências, fotógrafos, desenvolvedores de aplicativos e outros criativos. Embalado com javascript e efeitos CSS e animações, você pode personalizar os locais, embora eles são muitas vezes tão bom que você não pode querer.

Além disso, Freebiesbug.com inclui todos os tipos de recursos livres para web designers, incluindo fontes, fotos, esboços do Illustrator e PSD, e muito mais.Não pagar por Adobe Illustrator: Este Free Alternativa é grandeNão pagar por Adobe Illustrator: Este Free Alternativa é grandeAdobe Illustrator é impressionante, mas custa um pouco devido à subscrição Creative Cloud. Esta alternativa aplicativo web é quase tão bom e não custa nada!consulte Mais informação

5. Free-CSS.com

Free-CSS.com é uma oferta sem frescuras website - no momento da escrita - alguns 2503 modelos gratuitos, além de muitos mais sofisticados também, caso você ainda não consegue encontrar o que você está procurando.

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

6. OS-Templates.com

28 páginas de templates CSS gratuitos, a maioria usando layouts modernos, baseados em rede em uma única página. Se simples é o que você está depois, então este é o lugar para olhar. Os desenhos são limpos, atraentes e fáceis de personalizar.

OS-Templates.com também oferece uma grande coleção de “modelos básicos”. Estes dão-lhe a estrutura básica de um site em vários esquemas de layout populares (de duas colunas, três colunas, etc), estando completamente sem estilo. Como usar o tema padrão no WordPress, a tela em branco permite que você transformar seu site em qualquer coisa que você quiser.

7. boag.online

Maglev é um único modelo de site de uma página que pode ser baixado do Github ou visualizado em ação no boag.online.

É um rápido modelo, limpo, ideal para uma página de produto. O design minimalista é aumentada apenas por alguns efeitos jQuery para ajudá-lo a percorrer as seções. O layout simples funciona em seu próprio direito, mas também faz um ótimo ponto de partida para as suas próprias personalizações.

8. pixel Buda

modelos de Pixel Buda não estão limitados apenas aos sites, que incluem alguns para newsletters e-mail também.

De qualquer maneira, eles estão todos desenhados com HTML5 e CSS3, e são sensíveis assim que olhar grande em qualquer dispositivo. Os destaques incluem Oi HTML, uma bela carteira / modelo de currículo, e SOHO HTML, uma página de eCommerce vista impressionante que inclui a fonte arquivos PSD no topo do HTML e CSS.Os Últimos Aplicativos e Sites que você precisará nunca 5 Resume-construçãoOs Últimos Aplicativos e Sites que você precisará nunca 5 Resume-construçãoUsar esses sites de construção de currículo fantástico e aplicativos quando você precisa fazer o seu CV destacam-se no meio da multidão. Com as ferramentas certas, você pode construir um currículo único rapidamente, mesmo sem habilidades de design.consulte Mais informação

9. Templatemo.com

Cerca de 500 modelos gratuitos estão disponíveis a partir Templatemo. Alguns dos melhores são os que se libertar do sistema de grade de estilo Bootstrap para tentar algo diferente.

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

10. Startbootstrap.com

Bootstrap é uma estrutura de front-end incrivelmente popular que lhe permite construir sites de alta qualidade em nenhum momento a todos. No entanto, é preciso um pouco de tempo para aprender, que é onde Iniciar Bootstrap entra.

Video: 5 Erros a Evitar para Começar a Trabalhar com Mercado Livre do Zero 2017

Esta coleção de livres, modelos de código aberto são todos construídos usando sistema de grade de Bootstrap. Há mais de 30 para escolher. Alguns são totalmente projetado e destinado a aplicações, blogs e páginas de destino, enquanto outros são layouts em branco esperando por você para denominar-se.Criando Interfaces Web: Onde ComeçarCriando Interfaces Web: Onde ComeçarNós vamos mostrar-lhe como interfaces web quebrar, em seguida, apontar os principais conceitos, ferramentas e blocos de construção necessários para tornar-se um web designer século 21.consulte Mais informação

11. Bootswatch.com

Finalmente, algo um pouco mais hands-on. Bootswatch oferece 16 temas de código aberto para sites de estilo construídos usando Bootstrap.

Você pode construir o layout do seu site mesmo usando Bootstrap, ou baixar um dos modelos em branco do início Bootstrap. O que Bootswatch faz é alterar as fontes, cores de fundo e o estilo para os botões, menus e outros elementos. Ele dá o seu site uma aparência única, enquanto permanecer fiel ao ethos ultra-limpo de Bootstrap.

É fácil de jogar juntos um site básico com Bootstrap, e Bootswatch dá-lhe algum polonês instante.

Como usar modelos CSS

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

O perigo ao usar modelos é que você acabar com um site que é idêntico ao de outra pessoa. Escolha um modelo popular e não poderia ser literalmente dezenas de milhares de locais idênticos. Este é o principal argumento a favor da personalização.

CSS modelos são um grande atalho para web designers experientes que têm um layout básico em mente e querem pular direto para denominar-se.

Eles também são perfeitos para alguém novo para web design. Se você sabe o caminho de volta HTML e CSS, mas ainda não tem a confiança ou conhecimento para construir um site a partir do zero, em seguida, um modelo CSS serve como uma maneira fácil de obter uma grande procura site, e uma ferramenta de aprendizado incrível.

Você pode tratá-lo como um trabalho em andamento. Comece alternar as fontes e mudando o esquema de cores, e ao longo do tempo você pode redesenhar elementos existentes, adicionar novos, e assim por diante. Não há melhor maneira de aprender alguma coisa do que através de experiência prática, hands-on.Quer lindo Fontes? Aqui está mais de 25 sites onde você vai encontrá-losQuer lindo Fontes? Aqui está mais de 25 sites onde você vai encontrá-losAo invés de percorrer centenas de fontes, aqui estão alguns sites que vai ajudá-lo a manter-se com todas as novas fontes que você vai querer usar em seu próximo projeto.consulte Mais informação

Você usa modelos CSS quando a construção de sites? Quais são seus lugares favoritos para encontrá-los? Compartilhar suas experiências e dicas com a gente nos comentários.