30 belos layouts CSS gratuitos para designers de interface de usuário
Publicados: 2021-03-26Como os sites obtêm todos esses alinhamentos interessantes de conteúdo, cores e flexibilidade? É por causa do CSS! Pense em CSS como o naipe da web. É aquela camada extra no bolo para torná-lo maravilhoso. E embora não possamos provar a web, certamente podemos aproveitá-la ao máximo quando os designers dedicam seu tempo para fornecer experiências de navegação na web exclusivas, ambiciosas e estelares. Começar com CSS nunca foi tão fácil; agora, existem centenas de livros, estruturas e sites de codificação que fornecem experiência onboard para a compreensão de como exatamente a web está sendo estilizada. A melhor parte é que você mesmo pode se tornar um contribuidor desses esforços de estilização!
Layouts são alguns dos aspectos mais técnicos do web design. Para apresentar um site de maneira adequada, ele precisa ter um layout bem projetado. Enquanto no web design tradicional costumávamos confiar em grades únicas complexas e, em seguida, reaproveitar cada grade para refletir nossos elementos de caixa individuais, não estamos vivendo em tempos em que ferramentas como o Flexbox estão disponíveis para que possamos criar grades de design em várias camadas e estilize cada um individualmente da maneira que preferir. Foi uma longa jornada até este ponto e, embora essas novas ferramentas existam, alguns designers ainda estão lutando para juntar as peças. Isso ocorre principalmente porque a evolução do CSS é bastante rápida e, com a ajuda de JS e HTML5, esse processo pode se tornar mais como uma teia de aranha.
Então, sem mais delongas, estamos dando a você 30 dos layouts CSS mais versáteis, desenvolvidos pelos próprios veteranos em CSS. Esses designs e layouts são lidos para uso em seus próprios projetos ou apenas com o objetivo de entender como os layouts funcionam. É uma coleção maravilhosa de layouts que vão inspirar você conforme você começa a perceber o quanto o CSS progrediu e como uma pequena adição de códigos JS interativos pode fazer toda a diferença. Na parte inferior, incluímos alguns frameworks de layout CSS famosos para ajudá-lo a criar um layout responsivo e moderno em nenhum momento.
Metro UI
Martabak Angus é um residente da Indonésia que desenvolve bastante o front-end em idiomas como Laravel, Angular, Sass e muitos outros. O que temos aqui é uma de suas muitas expressões criativas para designs exclusivos baseados em conceitos previamente estabelecidos. O design do Windows Metro se tornou popular depois que o Windows passou da versão 7 e agora está sendo usado confortavelmente entre muitas das plataformas Windows. Recentemente, ele se tornou incrivelmente famoso entre os designers que dedicam seu tempo para implementar designs Metro em seus sites e aplicativos. Essa interface de usuário específica também adiciona o layout da área de trabalho do Windows tradicional ao seu fluxo de trabalho. Além disso, você tem botões animados e fluidos suaves com um controle deslizante de galeria adicionado que cria uma experiência interativa. Windows 8 Metro UI é construído puramente com CSS3 nativo - totalmente livre de JavaScript, até mesmo a galeria deslizante!
Layout de Maçonaria Pure CSS com Flexbox
Jhey Tompkins é um especialista em CSS com mais de 15.000 contribuições individuais no GitHub somente no ano passado; que conquista incrível! Muitos de seus repositórios no GitHub também têm mais de 100 estrelas, e ele é bem conhecido entre seus colegas. Este layout CSS específico da Jhey também usa o Flexbox para obter um layout de alvenaria sólida pronto para seus próprios elementos e widgets do site. Alguns recursos interessantes incluem a capacidade de “inverter” grades individuais para maior criatividade e grades que são destacadas quando o usuário passa o mouse sobre elas. Para concluir, é um layout de grade perfeito para usar em um projeto de site que vai lidar com muito conteúdo.
Layout de coluna de expansão
Ettrics é uma pequena agência de design digital no Canadá. Dois caras administram esta pequena agência e criaram algumas obras de arte incríveis que milhares de designers em todo o mundo reconheceram. Eles também compartilharam alguns trechos CSS legais no passado, como animações hexagonais, animações deslizantes, sobreposições de menu, interfaces de arrastar e soltar e gráficos de barra interativos - adicionando mais de 100.000 visualizações no total.
Eles também não são tímidos quando se trata de escrever e compartilhar tutoriais com a comunidade e escreveram extensivamente sobre as maneiras pelas quais os designers podem criar kits de interface de usuário e experiências de usuário atraentes usando um bom conhecimento de design. Os desenvolvedores também criaram esse layout denominado Layout de coluna em expansão. O público já viu esse layout mais de 30.000 vezes. Depois de acessar esse layout, você verá um layout de página simples, perfeito para portfólios, que mostra colunas de cores diferentes e expande cada coluna individualmente. Na janela em expansão, você pode inserir qualquer conteúdo que desejar.
Layout de tela inteira com colunas
Karol Podlesny pegou o trabalho de Ettrics e mudou um pouco os esquemas. Você também obtém um conjunto diferente de cores e janelas de expansão um pouco mais otimizadas para compartilhar conteúdo. Além disso, é em tela cheia e se adapta perfeitamente a dispositivos móveis. Vale a pena compartilhar para economizar tempo no gerenciamento de cores individualmente!
Layout de Maçonaria Pure CSS
Adam Blum fez alguns compartilhamentos interessantes no passado, e esse layout de alvenaria CSS puro não é uma exceção. Se você deseja expandir seu conhecimento sobre colunas CSS3 sem ter que mexer com JavaScript, este layout simples pode ser um ótimo ponto de partida. Todos nós temos que começar de algum lugar, de qualquer maneira. Além disso, os criadores organizaram ordenadamente os blocos de colunas individuais juntos, e você pode construir rapidamente em cima de cada um dos blocos à medida que continua a adicionar mais elementos ao seu layout.
Exemplo de layout de página estática
Nick Pettit é um desenvolvedor de jogos excepcional que também é um dos professores internos da Treehouse; recurso de aprendizagem de desenvolvedor mundialmente famoso. O que Nick construiu aqui com este layout é um exemplo de como funciona um layout de site estático e como você pode usar esse layout estático para construir protótipos sem necessariamente ter que gastar horas para fornecer uma demonstração de funcionamento perfeito.
Layout da página do produto com Flexbox
A equipe oficial por trás do Angular.js também está compartilhando ativamente diferentes snippets e estruturas de código sobre como criar layouts específicos. E assim, Angular Material está dando à comunidade um layout Flexbox sólido para páginas de produtos. Os desenvolvedores embalaram este tema com grades de produtos individuais, para exibições de produtos comuns e em destaque. Eles também deram a este produto a capacidade de classificar e filtrar os resultados. Isso dá a você uma pequena amostra do que esperar da nova estrutura Angular 2 ampliada com as especificações do Material Design. Resultados maravilhosos.
Layout CSS3 bonito
Adrian Gyuricska produziu um pequeno layout CSS muito bacana que é ideal para hospedar uma página de portfólio, mas também poderia ser convertido em um layout de blog de página única. O que mais gostamos é a barra lateral suave, enriquecida com links, e o layout de elemento colorido que é dividido em diferentes seções. Há também um pouco de ação JavaScript acontecendo, e o modelo é estilizado com Jade e SCSS.
Layout de grade do Flexbox com menu móvel
Lindsey Di Napoli está por trás do CSSgirl - um projeto de portfólio / recurso que retrata sua carreira como designer de front-end. Ela construiu algumas coisas legais em seu tempo, e o Flexbox Grid Layout (com uma navegação móvel compatível) é um de seus melhores trabalhos até hoje, pelo menos em termos de compartilhamento gratuito; temos certeza de que ela mesma trabalhou em algum projeto verdadeiramente inspirador no passado. De qualquer forma, este layout mostra mais uma vez como você pode usar o Flexbox para criar um design estético e perfeitamente alinhado. Gostamos do uso de cartões dentro das áreas de conteúdo, com as pequenas sobreposições que exibem botões de compartilhamento social.
Layout plano de blog com CSS3
Renaud Tertrais está por trás de projetos como breadcrumbs Flat CSS3, breadcrumbs redondos minúsculos, logotipos animados usando SVG e JavaScript, ícones CSS3 (setas), um sistema de classificação CSS3 simples, demos de intervalo de entrada e, claro, este layout de blog simples, tudo construído usando pure CSS3. Você pode escolher mostrar o layout como itens de lista, mas também como uma grade. É uma abordagem de layout simplista que se encaixaria bem em qualquer um de seus próximos projetos que exijam um blog. A adaptação a este código será extremamente fácil e indolor.
Layout de cartão responsivo com Flexbox
Mynor Alexander pode lhe ensinar algumas coisas sobre Flexbox e layouts de cartão, e você nem precisa vê-lo pessoalmente! Está tudo bem aqui no código-fonte deste Layout de Cartão Responsivo criado com Flexbox. Hoje em dia, a adaptação de layouts de cartão está crescendo continuamente; o valor que eles fornecem para a experiência de design é inestimável. E assim, nem é preciso dizer que aprender a usar cartões em design como um desenvolvedor front-end será a quintessência para progredir para o futuro do web design.
Layout responsivo somente CSS com transições suaves
Ying Zhang trabalha com várias grandes marcas como desenvolvedora da web e hospeda seu próprio projeto Pure Essence para discutir seu próprio progresso em sua carreira. Entre os trechos que ela compartilhou, você encontrará este layout CSS puro com transição suave suportada, totalmente e completamente responsivo. As transições acontecem por meio de uma seleção de menu na parte inferior da página. Depois de clicar em um item, uma nova página é aberta com uma transição suave. Além disso, você pode personalizar cada aspecto individual da página da maneira que melhor se adapte às suas necessidades. Belo exemplo de como construir interatividade na web.
Grade com Layouts
Esta é mais uma parte da Angular Material; desta vez, eles estão compartilhando um layout de grade simples que você pode usar como um padrão para o desenvolvimento de design futuro. Fique de olho em sua página CodePen enquanto eles continuam a lançar novos layouts e conceitos em preparação para o lançamento completo da estrutura Angular 2.
Layout de artigo Flexbox
Jon Daiello trabalhou em uma série de grandes projetos, a maioria dos quais envolvendo design e desenvolvimento de produtos. Aqui neste layout, ele mostrou-nos o quão flexível o Flexbox pode realmente ser quando se trata de estruturar um layout para o conteúdo. Seja para artigos de revistas ou blogs, com o Flexbox é possível atingir aquela qualidade nítida que você não encontrará em nenhum outro lugar. Este Layout de Artigo Responsivo é construído para se parecer com um layout de conteúdo tradicional dentro de uma grade. Este é o mesmo layout que Jon está usando em seu site, o que é outra forma de dizer que confia em seu próprio trabalho. As áreas de cabeçalho e rodapé poderiam ser melhoradas um pouco, com certeza, e talvez tudo que você precise tirar desse layout é a estrutura real da própria grade.
Layout de tela inteira com transições de página
Na verdade, você viu a versão horizontal desse layout no início do post. Então, o que Furkan Ozden fez aqui foi pegar o layout original e simplesmente convertê-lo em um layout em caixa, talvez mais apropriado para designs de caixas especiais. A funcionalidade é a mesma; você obtém diferentes seleções de caixas (links) que abrem uma janela modal em tela cheia com seu conteúdo dentro. Continua sendo uma boa opção para portfólios e para quem deseja hospedar seus currículos na web. Enquanto isso, as transições de página não perdem sua suavidade.
Exemplo de layout de esqueleto
O SitePoint, como sempre, sabe quais são as melhores coisas para compartilhar. Esses caras têm executado sua plataforma de desenvolvimento web por décadas e são super experientes com as tecnologias mais recentes e o que está em alta na web atualmente. Seu layout de esqueleto é um exemplo de como construir um layout de esqueleto para um site de negócios que pode ser estilizado, ajustado e otimizado livremente por qualquer pessoa que queira praticar suas habilidades de front-end. Você tem uma bela seção de cabeçalho em tela inteira com um widget de navegação central, bons elementos de cartão para mostrar suas habilidades e experiência, um elemento de widget separado para mostrar as informações do seu currículo (descrição, experiência, como contratar) e, por último, no rodapé você tem detalhes de contato e informações de mídia social. Bom design geral, e seria ideal para iniciantes praticarem como posicionar as coisas em um layout usando a mais recente tecnologia de web design.
Layout de estilo de bloco com Flexbox e Flex Wrap
Jack Armley trabalha para a Expedia e passou vários anos criando jogos e sites online com seu próprio toque criativo e exclusivo. Muito de seu trabalho envolve o uso de tipografia e fontes gerais para proporcionar experiências espetaculares para aqueles que têm o privilégio de trabalhar com ele. Esta demonstração de layout CSS3 é baseada em um layout de estilo lado a lado que usa Flexbox e Flex Wrap para criar um design digno de uso em sites de blog, sites de citações, editoriais e sites de compartilhamento de conteúdo geral que se beneficiariam de uma combinação de layout de cartões / grade.
Linha do tempo vertical responsiva
CodyHouse é uma biblioteca gratuita de trechos de código prontos para usar e fáceis de personalizar. Sempre que a CodyHouse lança um novo snippet ou script, eles o acompanham com seus próprios tutoriais e guias. Esses guias e tutoriais podem mostrar como o código funciona e como você pode obter os resultados finais. Neste exemplo, temos um layout de linha de tempo vertical responsivo. Você pode usá-lo idealmente em sites ou portfólios de negócios onde deseja mostrar o quanto você progrediu. Seria incomum ver esse design em revistas. Mas você pode se safar com certos sites de tipo de blog usando um layout de linha do tempo. Aqueles que publicam conteúdo relacionado às últimas atualizações e notícias de negócios também podem utilizar esse recurso.
Kitteh diário fixo
O WCC, também conhecido como Coletivo de Codificação de Mulheres, é uma comunidade de desenvolvedores que visa estritamente ajudar as mulheres. O WCC os capacita por meio da escrita de código. Ele pode preencher a lacuna entre os papéis de gênero que você normalmente encontra nas comunidades de desenvolvimento da web hoje. O WCC fornece às mulheres orientação e recursos sobre como iniciar suas carreiras como desenvolvedoras. Este exemplo de layout do Daily Kitteh é apenas um dos exemplos do tipo de trabalho que o WCC oferece para o aprendizado. As mulheres podem aprender como estruturar uma página de site estática e bonita. O WCC também pode permitir que eles entendam como todos os elementos cooperam entre si para o resultado final.
Spotify Artist Page UI
Adam Lowenthal oferece uma compilação insana de elementos de interface do usuário que vêm diretamente das páginas de artistas do Spotify. Este é um layout enorme que levará um pouco de tempo para retratá-lo e entendê-lo completamente. Você tem barras laterais cheias de menus de navegação que se aprofundam no layout. Esses layouts permitem que os usuários acessem diferentes aspectos das páginas do artista. Você tem as músicas mais recentes e um reprodutor de música integrado, bem como uma adição de artistas relacionados. Você realmente precisa de um tempo para entender totalmente esse layout; no entanto, você pode e deve aproveitar a viagem, pois é um verdadeiro tesouro.
Nêutron
Neutron é uma estrutura CSS baseada em SASS que fornece as ferramentas para criar layouts de site flexíveis, organizados e claros. Você pode fazer isso por meio de marcação semântica. Na maioria das vezes, você trabalhará com colunas. Ele aceita parâmetros individuais que podem ajudá-lo a definir a forma como deseja que seu layout seja. Esses parâmetros incluem listas de colunas, dimensões do contêiner, alinhamentos do contêiner, margens, alvos do seletor e ordem da grade. Cada um desses parâmetros pode ajudá-lo a organizar um layout que melhor reflita suas intenções.
csstyle
CSSTYLE é algo que você sabia que precisava, mas nunca soube como acessar antes de ser construído. Os criadores desenvolveram esta ferramenta incrível para ajudá-lo a criar folhas de estilo compatíveis com o guia de estilo e de fácil manutenção. Hoje em dia, manter grandes coleções de folhas de estilo é simplesmente impossível. Você também pode se ver em uma rotina ao tentar entender todos os seletores e classes. Além disso, você precisa aprender como eles afetam sua base de código principal.
Com CSSTYLE, você pode esquecer esses problemas, pois esta ferramenta ajuda a criar arquivos CSS. Esses arquivos são fáceis de ler e navegar e até mesmo fazem algum trabalho de automação para você. Você pode criar ajustes de estilo genéricos que podem ser aplicados a qualquer instância de componente, peça, elemento, etc. Você também pode aplicar ajustes usando um sinal + antes do nome do ajuste. Esses ajustes substituem automaticamente o estilo de componentes, opções e peças.
Puro
Com todos aqueles lindos layouts de CSS que vimos, você ainda percebe que está faltando alguma coisa. Esses são os elementos e componentes da web que você pode colocar para criar um site totalmente funcional. Claro, codificá-los sozinho é possível, mas por que perder tempo quando você tem frameworks como o Pure para trabalhar? O Pure, na verdade, oferece várias opções de layout. Isso inclui blogs, e-mails, galerias de fotos, páginas de destino, tabelas de preços, menus laterais e outros tipos de menus.
Você pode costurar esses layouts e começar o processo de construção de um web design exclusivo. Os componentes que vêm com o Pure são grades, botões, tabelas, formulários e menus. Todos esses fluem sem esforço quando você os coloca todos juntos. Incluindo o Pure e escrevendo algum CSS, você pode garantir que seu site ou aplicativo funcione corretamente em todos os navegadores. Até terá um aspecto verdadeiramente único. O melhor de tudo é que o tamanho do arquivo CSS permanecerá minúsculo. Esse recurso é ótimo para usuários móveis e outros com conexões lentas.
Estrutura CSS YAML
YAML oferece todos os recursos de design moderno para criar sites realmente responsivos. Seu sistema de grade é conhecido por ser flexível e incomparável por diferentes frameworks. YAML fornece a seus usuários uma extensa documentação. Isso pode ajudar a mantê-lo atualizado e em sincronia com o desenvolvimento de design moderno. Os desenvolvedores organizaram a base de código de uma forma que complementa perfeitamente a estruturação CSS3 e HTML5. YAML já existe há mais de 10 anos. Desde então, ele continua a evoluir e crescer como uma das principais estruturas de front-end para desenvolvimento responsivo rápido.
Esqueleto
Se você está construindo um projeto que não requer todos os recursos abrangentes de grandes estruturas, o Skeleton é sua melhor escolha. Os desenvolvedores superaram esse modelo padrão com alguns elementos úteis para aprimorar seus designs. A grade é uma grade básica de 12 colunas com capacidade de resposta móvel e que se adapta aos dispositivos automaticamente. A tipografia é personalizável e também usa propriedades responsivas para se ajustar de acordo com cada navegador. Você pode escolher entre alguns estilos predefinidos de botões e também implementar formulários personalizados. Todos nós sabemos que isso às vezes pode ser difícil de gerenciar, mas o Skeleton torna esse processo uma brisa. Então você tem elementos como consultas de mídia, destaque de código, tabelas, listas e utilitários básicos. Você também pode baixar a página de destino de demonstração disponível.
Kube CSS Framework
Kube é uma estrutura de desenvolvimento web profissional futurista que você pode usar para inicialização rápida de aplicativos móveis e da web. Em certo sentido, ele atua como o complexo de protótipo para o back-end de todo o seu aplicativo. Você pode usar seus próprios guias de estilo e algoritmos de código para criar o design de que precisa.
Existem muitas razões diferentes pelas quais milhares de desenvolvedores e designers profissionais em todo o mundo escolhem o Kube para seus projetos. Por um lado, o Kube tem apenas 32 KB, o que é bastante impressionante considerando o que pode fazer por você. Outra coisa, cabe totalmente aos desenvolvedores e designers adotar ou não o estilo minimalista do Kube. Eles também podem optar por expandi-lo e estendê-lo para praticamente qualquer escala.
Susy
Susy é a força motriz de uma estrutura que faz todo o trabalho pesado para você. Ele pode colocar suas ideias e padrões de design juntos em um único layout.