• Articles
• admin

à medida que lançamos projetos mais novos, é fácil esquecer a atualização de blogs e sites mais antigos. Neste artigo, quero apresentar 30 ideias sólidas que você pode implementar rapidamente para tornar seu site muito mais fácil de usar. Nem todos eles são baseados apenas no design front-end. Também discutirei técnicas populares de codificação HTML5 que podem ajudar analisadores e spiders da web a categorizar seus dados adequadamente.

nem todo site precisará ser atualizado, e não com todas as técnicas disponíveis neste post. Essas ideias estão aqui para fazer os desenvolvedores pensarem em termos de design e como tornar os sites mais bonitos. Agora é mais fácil do que nunca construir layouts de sites responsivos escaláveis que ficam bem em qualquer tela digital, então vamos começar a criar nossos sites.

1. Teste de UX

eu sou culpado de nem sempre executar testes no meu site é iniciado, mas sempre que possível esta é uma das minhas atividades favoritas. Você pode aprender muito sobre as interações típicas do Usuário estudando como eles jogam com seu site. Os estudos de experiência do usuário podem ser realizados exclusivamente por meio de ferramentas como o Google Analytics ou usando outros recursos de terceiros.

os benefícios potenciais que você pode encontrar são enormes. O teste de experiência do Usuário é útil para os desenvolvedores da web aprenderem quais áreas de seu site são irritantes, quebradas ou podem ser melhoradas. Considere usar não apenas ferramentas digitais, mas também seus amigos e colegas. Ouvir algum feedback humano real em seu site pode fornecer resultados que você não conseguiu obter através de uma tela de computador.

2. Espaços em branco

podemos pensar em espaços em branco como a quantidade de espaço entre os elementos em sua página. Alguns usuários não se importarão com um layout apertado se já estiverem acostumados a isso. Mas considere seu público-alvo e considere quantos deles não são tão alfabetizados em computadores quanto a geração mais jovem.

você pode determinar áreas que precisam de espaçamento extra através de testes A/B divididos e reter o feedback do Usuário. Ou apenas asa – lo e ver o que você pode vir acima com!

3. Fontes Web

as fontes Web dinâmicas permitem que os designers criem páginas Web sem serem restritas às famílias de fontes típicas. Essa tendência se tornou cada vez mais popular agora que a maioria dos usuários médios da Internet está em uma conexão DSL/T1/Fibra Óptica decente. Incluir referências a folhas de estilo de fonte de terceiros não produzirá mais um grande atraso em suas velocidades DL.

muito possivelmente, o melhor provedor de fontes é através do Google Webfonts. Você pode acessar o aplicativo mesmo que não tenha uma conta do Google, embora haja vantagens em se registrar. O processo de configuração completa leva apenas 3 etapas e você pode ter fontes personalizadas do Google em execução em seu site em poucos minutos.

4. CSS3 Shadows

quando estou falando sobre o uso de sombras para melhorar seu layout, estou realmente fazendo referência a duas propriedades distintas. O sempre popular box-shadow é muito legal para divs e caixas dentro do seu layout. Anexar esse efeito em seu recipiente, invólucro ou caixas de página interna fornecerá um efeito 3D de emagrecimento em sua página da web.

mas também vale a pena considerar a propriedade de sombra de texto CSS3 para tipografia que salta da página. A Apple é uma das primeiras empresas a implementar fortemente sombras de texto em todo o seu layout. Você pode criar um efeito assustador adicionando sombras de texto opostas à cor de suas fontes (sombras brancas para texto escuro, sombras pretas para texto claro).

5. Texturas & padrões repetidos

existem muitos sites que podem usar apenas esquemas de cores padrão. Mas para que seu site realmente se destaque da multidão, você pode considerar adicionar texturas e repetir peças em seu fundo. Um dos webapps gratuitos mais legais é o Noise Texture Generator, que pode ser executado em qualquer navegador.

basta escolher a cor BG e a quantidade de ruído que deseja usar, então este aplicativo criará uma imagem de fundo em mosaico dinamicamente. Se você está procurando padrões e azulejos, então eu recomendaria padrões sutis. Eles têm uma enorme coleção de texturas utilizáveis que você pode baixar gratuitamente.

6. Fundos de gradiente CSS3

enquanto estamos discutindo fundos, devo trazer os gradientes CSS3 sempre populares. Eles fornecem aos desenvolvedores da web um enorme benefício mantê-los fora do Adobe Photoshop para fundos da web. E esses gradientes podem funcionar em mais do que apenas o corpo, aplicados em barras de navegação e rodapés e outras áreas importantes em seu layout.

7. Boostrap

o Bootstrap do Twitter é possivelmente o maior framework de interface do usuário de frontend para desenvolvedores da web. Isso inclui botões, entradas de formulário, links, colunas e toneladas de outros objetos de página pré-formatados. O uso mais comum para Bootstrap é dentro de páginas de destino para novos aplicativos.

mas os desenvolvedores de código aberto também utilizam o Bootstrap ao criar páginas de demonstração para as bibliotecas, plug-ins ou mini scripts que publicam.

sinto que o Bootstrap cresceu a uma extensão tão grande que pode ser aplicado em qualquer site atualmente. No entanto, os desenvolvedores que encontram o maior benefício estão usando o Bootstrap como um substituto rápido para lançar seus próprios designs de interface do Usuário. Considere esta biblioteca de front-end da próxima vez que você estiver lançando uma página da web com um único propósito concreto: página de destino, demonstração do Produto, site de aplicativos móveis, etc.

relacionados:

• Introdução ao Twitter Bootstrap
• Bootstrap 201: Plugin de janela Modal

8. HTML5 Kickstart

a maioria dos desenvolvedores da web ainda não ouviu falar sobre HTML5 Kickstart criado por 99Lime. Esta é outra biblioteca de interface do Usuário frontend que se concentra mais na estética de design agradável do que layouts HTML5 comuns. Mas existem amostras de código para gerar ambos em espadas. Você pode escolher entre conjuntos de elementos predeterminados, como botões de gradiente e menus suspensos. Eu não diria que isso tem a mesma popularidade que o Bootstrap, mas, novamente, o que faz?

se você tiver tempo e paciência, eu recomendaria apenas dar a esta biblioteca um teste rápido. Crie um pequeno layout de sandbox e veja se você gosta da sensação padrão de cada elemento da interface do Usuário. Kickstart certamente não é para todos os projetos, mas pode ser uma grande economia de tempo quando pego em um bind.

9. jQuery UI

animações e Controles deslizantes e elementos de desvanecimento geralmente estão sendo executados fora da biblioteca jQuery. Esta é a biblioteca JavaScript de código aberto mais comum para desenvolvedores de frontend, mas também possui uma biblioteca complementar jQuery UI. Os desenvolvedores ignoram isso, pensando que não pode fornecer muito em troca do KB extra.

Mas incluindo a biblioteca UI significa que você pode atualizar a chamada easing para qualquer animação de página dinâmica. Isso significa que você pode personalizar o tipo de animação jQuery para qualquer menu suspenso, itens que desaparecem, apresentações de slides de rolagem e tudo o mais dinâmico.

o site jQueryUI tem uma página de demonstração easing onde você pode testar as muitas variações e ver se você gosta de qualquer tipo de animação específica.

Relacionados:

• Como o Estilo do jQuery UI Acordeão
• Controlador de Volume com jQuery Slider
• Personalização e Temas do jQuery UI Datepicker
• Arrastar e Soltar com o jQuery UI Sortable

10. Fotos extravagantes do BG

existem inúmeros sites hoje em dia que utilizaram o efeito de imagem de fundo em tela cheia. Se você puder encontrar uma amostra de foto de alta resolução que ficaria bem como uma imagem de fundo, essa técnica pode valer a pena adicionar ao seu layout. Fundos grandes fazem um excelente trabalho ao chamar a atenção do Usuário, implicando também o gênero do seu site.

se você está procurando uma solução rápida confira o plugin jQuery Backstretch. Isso requer apenas uma única linha de código para que seus novos fundos sejam dimensionados de maneira adequada e responsiva usando qualquer resolução. Mas para desenvolvedores que são contra Métodos JavaScript eu recomendo a técnica de imagem CSS3 fullpage postado em CSS-Tricks.

11. Ícones de Menu

para chamar mais atenção dos visitantes, pode valer a pena incluir um pequeno ícone definido em sua página da web. Os links de menu padrão costumam funcionar corretamente e ajudam os usuários a navegar entre as páginas.

no entanto, muitas vezes fico impressionado ao ver ícones personalizados projetados para cada link do menu. Você pode encontrar toneladas de conjuntos de ícones gratuitos que ficariam perfeitos em sua navegação superior, barra lateral ou área de rodapé.

12. Esquema de cores atualizado

na verdade, não quero dizer alterar o design geral do esquema de cores, mas mais como adicionar novas cores a ele. Depois de executar o mesmo layout por meses após meses, é bom atualizar áreas menores e pegar visitantes repetidos de surpresa.

alguns itens de interesse podem incluir links de âncora, cabeçalhos, fundos e barras de ferramentas. Considere o uso de ferramentas on-line, como o Color Scheme Designer, para melhorar sua trajetória.

13. Suporte aprimorado ao navegador

é difícil construir um Site Totalmente compatível com todos os principais navegadores legados. Embora muito poucas pessoas estejam executando o Internet Explorer 6, ele ainda aparece em alguns dos meus relatórios do Google Analytics. Os desenvolvedores que procuram ideias podem considerar fazer um pequeno teste de testes de navegador.

O mais importante mainstream browsers incluem a versão mais recente do IE9, Mozilla Firefox, Opera, Chrome, Safari, e, possivelmente, Camino/SeaMonkey. Mas o Internet Explorer 6-8 também ainda é amplamente utilizado entre empresas e laboratórios de informática mais antigos. Você pode executar testes de renderização rápida usando o software IETester. Da mesma forma, o IE8 tem um modo de Ferramenta de desenvolvedores onde você pode alternar para mecanismos de renderização mais antigos para depuração.

14. Tipografia ajustada

você pode achar que seus layouts antigos ainda estão utilizando estilos de texto de forma eficiente, mas nem sempre é o caso. Eu sinto que a grande tipografia vai caber em layouts muito mais fácil. Sem mencionar que é mais fácil de ler e ocupará mais espaço em resoluções de tela maiores.

a ideia de “tipografia ajustada” é estilizar o texto para que ele se encaixe perfeitamente no seu site. Você pode passar por algumas páginas e atualizar esses estilos em 10-15 minutos.

15. Compartilhamento de mídia Social

até agora, tenho certeza de que a maioria dos desenvolvedores está familiarizada com os emblemas de compartilhamento usados em sites populares de redes sociais. Facebook, Twitter, Reddit, Pinterest, Dzone e muitas outras redes externas fornecem códigos que você pode incorporar em seu site. Em seguida, os visitantes podem compartilhar seu link nessas redes sem precisar sair do seu site.

em alguns blogs ou revistas da web, você notará que esses emblemas o seguirão rolando pela página. Esta é uma excelente técnica, pois muitas vezes você pode tê-los pairando fora da área do corpo, onde eles não estão bloqueando nenhum conteúdo importante. Também recomendo navegar em nossa postagem em barras de ferramentas de mídia social que podem ter um efeito semelhante.

16. Discussão do Usuário

se você estiver executando um CMS como WordPress ou Drupal, poderá incluir formulários de comentário por padrão. No entanto, ao criar páginas estáticas, você precisaria configurar seu próprio sistema de banco de dados para imitar essa funcionalidade. Mas com o aumento da tecnologia de código aberto, os desenvolvedores podem agora implementar melhores soluções, como Disqus.

usando este método, você não está constantemente lidando com a limpeza de spam e lixo da área de discussão. Os usuários que ainda não possuem uma conta Disqus podem se conectar rapidamente usando perfis populares de redes sociais ou se inscrever diretamente de sua página. Mesmo os usuários do WordPress que estão cansados do Akismet podem mudar usando o plugin Disqus Comment System.

17. Amplie a área do rodapé

a maioria dos layouts de sites menores será muito conservadora com a seção inferior do rodapé. Isso pode incluir algumas informações básicas sobre direitos autorais e alguns links da página principal. Mas as tendências modernas de Web design apoiam a ideia de grandes rodapés com muitos meta links.

estes são comumente vistos em startups e sites de grandes empresas com muitas informações adicionais. Certamente não tente forçar isso em um layout onde ele não pertence, no entanto, vale a pena alguma contemplação se abrir uma área de rodapé maior pode melhorar a experiência do seu site.

18. Responsify imagens

fluido dinâmico e responsivo imagens da página da web tornaram-se uma tendência em si mesmos. Agora é quase ridículo ainda ter suas imagens definidas em larguras fixas, saindo do invólucro do contêiner à medida que as janelas são redimensionadas. A técnica mais comum é aplicar width: 100% usando CSS em todos os elementos img.

mas você também pode considerar alguns outros métodos de código aberto que podem ser úteis em um bind. ResponsiveImg é um desses plugins jQuery com um tamanho de arquivo muito pequeno. Basta incluir isso em sua página e executar o código de linha única visando todas as imagens na página. Esta é uma excelente adição aos layouts móveis que ainda estão usando conteúdo baseado em desktop.

19. Acessibilidade do Menu

eu não diria que isso é algo que você deve estar constantemente tentando atualizar em seus layouts, mas é algo que desenvolvedores e designers não acertam na primeira vez. Eu sinto que vale a pena olhar para trás em seus sistemas de navegação e brainstorming se houver melhores maneiras de implementar links de submenu.

as barras laterais e as áreas de conteúdo costumam conter menus de acordeão, pois há espaço suficiente verticalmente. Mas pense em barras de navegação horizontais com menus suspensos ou submenus deslizantes. Contanto que seus links de menu sejam rápidos e fáceis de Acessar, não deve haver problemas entre sua base de usuários.

20. Microformatos semânticos / microdados

microformatos e a especificação de Microdados mais recente são usados para estender metadados dentro do seu código HTML. Esses atributos fornecem informações extras sobre seu conteúdo e como ele se relaciona com outro conteúdo na página. E, finalmente, esses resultados ajudam o Google a determinar a classificação do seu site para palavras-chave individuais e em outros mecanismos, como pesquisa de imagens e vídeos.

a versão documentada mais notavelmente suportada dos microdados é chamada Schema.org. seu site fornece todas as informações necessárias para voltar e editar seu conteúdo HTML com marcação de esquema semântico. Essa sintaxe de esquema é apoiada e suportada por todos os principais mecanismos de pesquisa e provavelmente evoluirá para o futuro do design de metadados semânticos.

21. Reorganizar os links de navegação

para alguns sites, executar a navegação de conteúdo fixo pode não ser um problema real. Mas descobri em alguns sites ou portfólios de negócios maiores que certos links de navegação têm muita precedência. E da mesma forma, existem alguns itens que raramente podem ser encontrados! Aproveite o tempo para navegar em seu site e se comportar como se fosse qualquer outro visitante.

considere quais links você está mais interessado e, possivelmente, quaisquer links que você gostaria de ver adicionados. Isso pode incluir um breve histórico do seu site, informações sobre a equipe, detalhes de contato, preocupações com a privacidade, comunicados de imprensa, etc. Também pode ajudar a coletar feedback do Usuário e ver se há correlações entre seus desejos e demanda por páginas novas ou atualizadas.

22. Voltar ao topo Link

se o seu site publica páginas muito longas de conteúdo, então este é um elemento obrigatório em seu layout. A rolagem de volta para os links superiores pode ser encontrada em quase todos os lugares nos dias de hoje. Os usuários não pensam em acertar a tecla Home e pode ser irritante rolar todo o caminho de volta. A melhor localização para este link está flutuando ao lado de seu contêiner, ou sentado bem no rodapé, como implementamos no Hongkiat.

23. Personalize código / pré Tags

ao criar uma folha de estilo de site pela primeira vez, muitos desenvolvedores ignorarão os elementos típicos da página. Cabeçalhos e parágrafos são muito comuns, mas e as pré-tags ou tags de código inline? Eles são usados para encapsular a sintaxe do código-fonte pré-formatado, como você veria em um arquivo text/NFO. Alguns sites não precisam desses elementos, mas ainda é considerado uma boa prática tê-los estilizados por precaução.

24. Adicionando atributos de largura/altura da imagem

agora esta tarefa pode facilmente demorar um pouco, dependendo de quantas imagens você teria que passar. Mas se você encontrar imagens em seu site sem uma largura/altura definida, pode valer a pena atualizá-las.

normalmente, imagens sem esses atributos serão exibidas como um quadrado de 1×1 px antes de serem carregadas na íntegra. Isso fará com que suas páginas da web e barra de rolagem saltem à medida que novas imagens são carregadas. Novamente, isso não será útil para todos, mas vale a pena notar como um fixador rápido em alguns casos. E ainda existem técnicas CSS para imagens responsivas usando atributos fixos.

25. Notificações JavaScript

qualquer desenvolvedor que tenha trabalhado em JavaScript sabe sobre as caixas de diálogo típicas. Você pode configurar uma caixa de alerta que oferece ao usuário um botão OK, apenas exibindo informações. Mas também há alertas de confirmação com botões Sim/Não junto com a caixa de prompt que solicita a entrada do Usuário.

todos estes podem ser personalizados usando alertify.js. Esta é uma biblioteca de código aberto muito pequena para projetar suas próprias caixas de alerta frontend. É muito rápido de configurar e fácil de personalizar se você precisar combinar seus próprios estilos CSS.

26. Consultas de mídia responsivas

isso pode não parecer um pouco rápido de código a ser adicionado, no entanto, realmente não leva muito tempo. Consultas responsivas podem ser adicionadas à sua folha de estilo existente ou adicionadas a um novo responsivo.documento css. De qualquer forma, você pode configurar rapidamente estilos recorrentes para lidar com vários tamanhos de exibição de monitores, tablets e smartphones.

as consultas responsivas nem sempre precisam responder totalmente ao seu layout. Às vezes, eles podem apenas ocultar bits de conteúdo, como sua barra lateral alongada ou rodapé maior. Você pode exibir um mini rodapé totalmente responsivo que está originalmente oculto no layout da área de trabalho. Você pode aprender mais sobre consultas de mídia em nossa coleção de tutoriais da Web Responsivos.

27. Links afiliados

sempre haverá sites semelhantes conteúdo de construção on-line relacionado ao seu campo. Raramente há novas ideias sendo criadas; a maioria delas são ramificações e paródias de conteúdo existente. Mas em vez de transformar a web em uma competição, por que não criar uma atmosfera amigável? Se você tem o espaço extra em seu layout enviar alguns e-mails para sites relacionados em seu nicho (Pesquisa Google) pedindo para afiliado.

você pode trocar links e ajudar a trazer tráfego um ao outro. Isso abre portas para novos usuários encontrarem seu site muito mais rápido e ver que você também está incluído na comunidade de outros sites. Além disso, ganhar backlinks de sites com autoridade no Google só pode ajudar a credibilidade do seu domínio.

28. Fontes baseadas em ícones

recentemente, eu estava lendo um artigo sobre 24ways que discutia fontes de ícones e atributos de dados. Isso me fez pensar sobre o futuro do web design e como HTML/CSS afetou drasticamente a codificação frontend. As fontes baseadas em ícones são perfeitas por vários motivos, incluindo menus de navegação, listas ordenadas/não ordenadas e até mesmo conteúdo básico da página.

muitas dessas fontes podem ser adicionadas rapidamente ao seu site usando @font-face. Isso significa que você não precisa confiar em um serviço de terceiros como o Typekit para hospedar suas fontes. Também significa um estilo de design mais semântico do que apenas usar Ícones PNG.

29. Sombras de caixa de imagem

se você quiser manter os visitantes em sua página por mais tempo, precisará oferecer algum conteúdo de qualidade real. Isso já pode ser o caso do seu site, no entanto, se seus estilos forem brandos, as pessoas procurarão em outro lugar. Atmosfera e estética são enormes em bom web design.

eu recomendo construir uma classe de imagem rápida que envolve uma borda em torno de suas imagens de página. Isso pode incluir uma pequena sombra de caixa junto com bordas e preenchimento também. Qualquer coisa para ajudar suas imagens a pular da tela e se destacar nos parágrafos do texto.

30. Folhas de estilo alternativas

considere todos os vários estilos de mídia que você deve incluir ao criar um único layout de site. Isso teria que ficar bem em monitores de mesa, laptops, tablets e possivelmente até smartphones. E não se esqueça da projeção e da mídia impressa, que nem sempre é suportada.

se você tem um grande público que usa esses tipos obscuros de mídia, recomendo estilizar suas próprias folhas de estilo alternativas. Estes podem ser rotulados com base no tipo de mídia, como impressão.css, ou adicionado em suas folhas de estilo existentes. Se houver demanda suficiente, seus visitantes serão eternamente gratos. E, honestamente, não leva muito tempo para editar o layout padrão do site para impressoras comuns.

Pensamentos finais

designers criativos e especialmente desenvolvedores web frontend espero encontrar algumas técnicas úteis entre esta lista. A maioria dessas idéias não deve levar mais de 1-2 horas para implementar, enquanto muitas podem ser realizadas em apenas 15-30 minutos.

reavaliar os layouts do seu site e atualizar com novas tendências de tempos em tempos é muitas vezes uma boa ideia, especialmente com lançamentos mais recentes de propriedades CSS3 que permitem sombras nativas do navegador, animações e cantos arredondados. Esta é uma excelente coleção de ideias que vale a pena dar uma olhada se você precisar de algumas atualizações rápidas.

além disso, se você tiver dúvidas ou idéias sobre o artigo, sinta-se à vontade para compartilhar conosco na área de discussão do post.