6 maneiras de melhorar o design do seu blog
Blogs podem ser deixados de lado quando se trata de design. Muitos de nós descartam a necessidade de um design intensivo quando se trata de nossos blogs - seja para nossas empresas ou para nós mesmos.
Mas é importante que percebamos que todos os aspectos de nossa identidade on-line devem ser projetados de maneira limpa e intuitiva com qualquer estilo que você preferir. Esse aspecto indescritível do trabalho na web é algo pelo qual devemos nos esforçar constantemente. E sim, isso inclui o tempo que passamos trabalhando com blogs.
Na maior parte do tempo, os blogs se perdem na confusão porque os consideramos grandes "lixões de texto" quando se trata de arquitetura da informação, e isso certamente é um aspecto de sua identidade, mas eles têm mais potencial do que isso.
Alguns blogs, quando projetados adequadamente, são ótimos para exibir nosso fluxo de pensamentos, bem como algumas informações de portfólio, enquanto outros são ótimos para exibir notícias e fotos.
O ponto é, um blog pode ser um grande reservatório para uma variedade de tópicos e a exibição se resume nas escolhas específicas de design que você faz. Nos últimos cinco anos, muitas coisas surgiram para tornar o mundo dos blogs muito mais fácil do que costumava ser. Por exemplo, o WordPress é ótimo e os temas fazem muito do trabalho de design para nós, mas se você quiser incrementá-lo, há algumas coisas que você precisa ter em mente.
Da mesma forma, se você quiser editar a navegação ou o layout do tema, também há algumas coisas que você deseja conhecer. Isso vale para quase todos os mecanismos de blog, ou quando você trabalha sozinho. Aqui estão vários dos meus pensamentos sobre o que eu acho que são esses bits importantes.
Trabalhando com efeitos de texto baseados em sombra
Os efeitos de texto são ótimas maneiras de apresentar títulos de cabeçalhos, barras de navegação ou apresentações de conteúdo em seu blog, desde que sejam usados com moderação. Vamos analisar alguns dos efeitos mais comuns que vemos em excesso na Web e como usá-los corretamente.
Texto retro
Muitas vezes é uma dor para trabalhar, mas parece ter feito as rondas no ano passado e meio, apesar desse fato. E com o advento do CSS3 é muito mais fácil manipular e encontrar esse sombreamento perfeito. Eu tenho um exemplo aqui para nos ajudar a entender como criar esse efeito corretamente, então eu irei quando e quando não usá-lo. O nome do jogo com efeitos retro não é um raio de desfoque, e usando sombras duplas. Então, digamos que estamos trabalhando com uma fonte de cor escura (# 707070I), queremos usar uma sombra de texto dupla para conseguir isso. Seria algo parecido com isto:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Isso deve dar a você um belo efeito de borda dupla, com um visual bem de 70 anos. É claro que, para obter a verdadeira vibração dos anos 70, você pode ter que adicionar todos os tipos de manipulação de cores, mas pelo menos temos o efeito de base baixo. Lembre-se, porém, não fique muito louco com a coloração - e definitivamente não fique muito louco com o deslocamento xey para as sombras de texto (pois ele pode se tornar ilegível muito rapidamente). Quando se trata de usar um efeito retro, o melhor uso é em títulos de cabeçalho. Esse não é um efeito que funcione bem com texto de tamanho pequeno ou informações descritivas. Melhor deixá-lo ficar no topo do seu blog e deixá-lo sozinho.
Tipografia e texto inserido
Outro recurso popular que a oferta de sombra CSS3 é um tipo de estilo inserido, também conhecido como "impressão tipográfica". Este é definitivamente um tema quente no mundo dos efeitos de texto CSS3, então vamos ver como fazê-los corretamente. Um estilo inserido normalmente é obtido ao se compensar um pouco o eixo Y para dar a impressão de um destaque sutil no fundo imediato do texto. Muitas vezes você verá que ele está sendo usado como um oposto ao contraste de fundo (claro x escuro), de modo que o efeito tenha mais impacto sobre o leitor. Vamos atropelar um exemplo.
Fundo claro, texto escuro:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Fundo escuro, texto claro
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
Isso vai dar um efeito muito bom em camadas / inserir que pode ser usado para cabeçalhos ou títulos de blogs. Use-o com moderação, embora em todo o site, porque nada é pior do que alguém usando excessivamente os efeitos de texto. Nesse caso, não há problema em usar em vários sub cabeçalhos ou com várias barras laterais ou elementos de rodapé, mas apenas certifique-se de não usar isso em uma informação descritiva. Novamente, qualquer efeito de texto baseado em sombra não deve ser usado para tal coisa.
Trabalhando com imagens no seu blog
Vamos enfrentá-lo, como web designers adoramos mostrar nosso trabalho. Adoramos tanto que até nossos blogs pessoais podem ficar repletos de imagens de portfólio e legendas espalhadas. Então, por que não consolidar esses dois? A melhor maneira de trabalhar com informações de legenda é conter informações relevantes dentro da própria imagem, e a melhor maneira de fazer isso é implementar um efeito CSS3 diretamente na imagem.
Se você está curioso para saber por que eu acho que esse é um aspecto tão importante de trabalhar com imagens, basta acessar a loja on-line do Google Chrome (complementos). Eles são capazes de exibir milhares de imagens sem qualquer texto em torno deles, e ainda assim nos fornecer informações suficientes sobre a imagem para saber se queremos clicá-la ou não. Isso é brilhante, e muito mais de nós deve implementar essa técnica para não apenas limpar texto de legenda desnecessário, mas também para dar um impulso na experiência do usuário.
Então, vamos recriar isso para o seu blog pessoal, mas com o seu próprio toque, para que você possa exibir informações do cliente para imagens do site em que você trabalhou:
Primeiro, precisamos criar um contêiner para a imagem e, em seguida, precisamos criar outro contêiner para o texto que queremos usar. Nesse caso, usaremos um sub-cabeçalho, um pouco de texto e um link. Em seguida, criamos um container para o texto e links para o site do cliente que estamos exibindo.
Nesta seção, o que estamos fazendo é fazer a transição da imagem real e preparar o texto para a transição. Também estamos identificando que queremos que a imagem saia ao longo do eixo X e não do eixo Y, o que significa nós teremos um tipo de efeito de porta deslizante.
Agora vamos configurar o efeito de passar o mouse sobre o mouse e obter a transição para iniciar este evento.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Como você pode ver aqui, o que fizemos foi semelhante ao que fizemos acima para a imagem. Nós simplesmente trouxemos o texto após a imagem restante, e demos um atraso de + 0.1s para ter certeza de que tudo corra bem. E é sobre isso.
Há um monte de outras maneiras que você pode personalizar isso e, definitivamente, uma tonelada de outros efeitos de transição que você pode usar. Lembre-se, porém, se trabalhar com transições mais avançadas não as use de maneira tão repetitiva quanto você faria com algo tão simples quanto isso. Eles são melhor usados com moderação para enfatizar as principais imagens.
Trabalhando com layouts criativos
Frequentemente, como web designers, veremos as tendências excessivamente usadas que foram abusadas ano após ano, e queremos ser uma voz de mudança em relação a elas. Mas ir contra a corrente pode ser uma prática arriscada, especialmente se você não estiver fazendo isso corretamente (como uma nota - eu não estou dizendo que você tem que ser criativo no 'caminho certo' porque não existe um 'caminho certo' para seja criativo). Mencionei isso porque acho que ser criativo é, na sua própria definição, desvincular-nos de restrições ou normas criativas, e na verdade eu encorajaria isso, mas também acho que devemos ter cuidado com a razão pela qual tais normas foram enraizadas em nossa web. temas de design e o que podemos fazer para inovar com eles, com isso em mente.
Alinhamento de texto exclusivo
Ao trabalhar com texto de maneira criativa ou exclusiva (ou seja, sem alinhamento central Arpt de 12pt), é muito importante lembrar que seu texto não é mais o conteúdo principal da página. Foi relegado a um elemento de apoio, ainda que importante.
Uma pergunta para sempre se perguntar ao trabalhar com texto é: "Isso se equilibra bem com o resto da página?" Pode ser adjacente a algum trabalho de portfólio, alguma imagem aleatória ou talvez apenas várias outras colunas de texto em ambos os lados do texto. a página.
Mas, independentemente do que é adjacente ou perpendicular, você precisa tentar equilibrá-lo da melhor maneira possível. Pense em linhas de grade, e estude os sistemas de grade lá fora se você tiver que ( Sistema de grade 960 é o que eu recomendo). Estude onde eles colocaram o layout da grade na página e, em seguida, pergunte-se por que - então deduza se o seu é tão equilibrado quanto isso. Imagine que você está colocando seu conteúdo no próprio sistema de grade e tente pensar em como seria nesse caso - depois replique isso no CSS.
Rodapés criativos
Rodapés criativos podem realmente adicionar muita personalidade a um blog ou site, e parece meio que contra-intuitivo pensar assim. Não importa se estamos falando de rolagem jQuery que nos coloca em um belo rodapé com o tema "sob a terra", ou apenas para o final do site ou blog de uma empresa, é uma parte muito pequena de um site, mas que pode ter um impacto muito poderoso. As opiniões estão divididas sobre até que ponto é esse o caso e por que isso pode acontecer. Eu tenho minha própria teoria: quando lemos uma página da Web, começamos no topo e vamos para o final, e é no pé da página que tiramos nossas conclusões sobre o que lemos.
Ao trabalhar com um rodapé criativo, há algumas coisas que você deve ter em mente e algumas práticas recomendadas que eu notei sendo usadas nos rodapés que eu mais amo. Para mim, a parte mais importante de usar um rodapé dessa maneira é usar o mesmo esquema de cores do seu site, mas com um contraste diferente . Isso é incrivelmente importante, e você pode obviamente aumentar ou diminuir o contraste na cor da fonte em relação ao contraste com o qual você está trabalhando para o tema geral no rodapé.
O importante é lembrar que você deseja ter um bom conjunto de estilos para esta seção. Dá uma boa sensação de conclusão ao site. Ao usar essa técnica, você pode deixar o rodapé o mais alto possível, porque, com o esquema de cores contrastado, é óbvio que essa é realmente uma seção de rodapé.
No que diz respeito ao conteúdo, no mundo do new-footer pode ser apropriado adicionar sua ilustração do logotipo e nome do blog, suas imagens ou links da rede social, seu tweet mais recente e até mesmo um formulário simplista de contato. Isso pode variar, é claro, com base em suas preferências pessoais, mas meu ponto em mostrar todas essas opções é ilustrar a evolução do passado para o presente no que é apropriado exibir na parte inferior de um site ou blog.
Rolagem de jQuery
Essa é uma das minhas maneiras favoritas de navegar em um site, e também acho que é especificamente aplicável para navegar em postagens em um blog. Existem algumas maneiras diferentes de trabalhar com o jQuery para isso, então aqui eu vou falar sobre o que é uma das minhas maneiras favoritas (e mais fáceis) de fazer uma rolagem suave e depois passar pelo que está acontecendo e como implementá-lo.
Este é o código para rolagem vertical, pois a rolagem horizontal não é tão desejável.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000); event.preventDefault ();});});O que está acontecendo aqui pode parecer complicado, mas na verdade é bem simples. Estamos abrindo uma função na classe ".class" do elemento de navegação no qual estaremos clicando (chamamos isso de um evento de clique). Portanto, a parte mais importante aqui é intitular a classe da lista (ul) para “nav”. Ou substitua o "nav" no código com o que você nomeou essa classe. E isso é muito bonito para um pergaminho jQuery funcionando, basta lançar isso em seu site e link para o jQuery minificada (preferível) e você está pronto para ir.
Tanto quanto o uso vai com um rolo vertical como este, é bastante ilimitado. Muitas pessoas gostam de não ter que rolar manualmente, elas realmente curtem a página fazendo isso por elas, e também é uma maneira brilhante de passar de post para postar em um site, especialmente se essas postagens forem grandes. Muitas vezes, vou usá-lo para passar para várias subseções de portfólio em meus blogs ou por meio de categorias em sites. Também é uma técnica perfeita se você estiver criando um tema para o seu site, como fazer um tema do dia para a noite, ou temas para suas categorias ou tópicos do blog.
Espero que algumas dessas técnicas tenham sido úteis para todos vocês na tentativa de aplicar várias estéticas de design em seu blog. Lembre-se, use-os com moderação e tente certificar-se de agir de acordo com seu bom senso ao usar efeitos chamativos. Temos a obrigação de criar uma internet que não seja tão feia quanto certos aspectos do mundo exterior se tornaram. Embora seja uma tarefa grande e esmagadora, é uma tarefa que podemos realizar se considerarmos apenas um design de cada vez e um dia de cada vez. Mantenha-o simples, mantenha-o honesto, mantenha-o real e sempre coloque paixão naquilo que faz - como sempre vai brilhar.
Quais são as suas melhores dicas de design de blog? O que contribui para um design de blog realmente bom? Deixe-nos saber nos comentários!
