O navegador da Web é provavelmente um dos aplicativos mais usados no computador de uma pessoa. Para designers e desenvolvedores, um tema do navegador pode ser uma tela que fornece horas de exposição ao artista ou marca disposta a criar um tema para sua base de fãs. Mas com uma orientação de paisagem tão extrema e uma variedade de obstruções funcionais, o design de temas do navegador é um empreendimento criativo com muitas armadilhas e betchas.
Há muitas coisas a considerar ao abordar um novo tema – desde evitar imagens protegidas por direitos autorais até a obtenção de designs que funcionam dentro dos limites de um navegador específico. Este guia contém algumas dicas cruciais e diretrizes gerais para projetar temas de navegador personalizado para Chrome, Firefox e Internet Explorer. 
O tema do navegador Phoenix Suns é bem equilibrado com imagens.
Considerações importantes para o design do tema do navegador
A parte mais complicada de projetar temas do navegador é a variabilidade do meio ambiente.
Manter os designs flexíveis o suficiente para exibir bem no Firefox e no Internet Explorer no Linux, Mac e PC, e em diferentes versões dos navegadores é essencial. Por exemplo, o Firefox 4 e o IE mostram parte dos gráficos de fundo na barra de título, enquanto o Firefox 3.6 e abaixo não.
Dimensões e lidando com a variabilidade ambiental
Firefox oferece a maior flexibilidade de design, especialmente no Navegador Chromeque é a área em que o botão de navegação e a barra de endereço da URL estão localizados, bem como as áreas fora da visualização do navegador. 
Firefox 3.6 Browser Chrome no sistema operacional Windows. 
Ou seja, 9 navegador no sistema operacional Windows.
Compare as diferenças com a acima. Quando projetamos um tema de navegador cruzado, o Firefox é a linha de base da qual os outros projetos evoluem. Abaixo, você verá o tema do navegador de Indianapolis Colts mostra o design decrescente de design do Firefox ao IE ao Chrome. 
Tema do navegador do Firefox Colts. 
Colts, ou seja, tema do navegador. 
Colts tema do navegador Chrome. A pegada vertical do design é mantida no mínimo.
Embora os gráficos altos de 200px sejam necessários para o Firefox, a realidade é que apenas os 85 pixels superiores são geralmente visíveis. Para o Internet Explorer, a dimensão vertical é bloqueada em 50 pixels; E para o Chrome, ainda menos. Os designs que dependem do usuário que podem ver a imagem completa podem não funcionar, pois o Chrome superior ou inferior nem sempre será visível.
O tamanho horizontal da imagem também tem suas considerações especiais. À medida que uma janela do navegador é aumentada horizontalmente, as imagens em segundo plano mudarão. Os designers devem ter isso em mente, pois um navegador aberto a 500 pixels em comparação com um navegador aberto a 1024 pixels terá looks completamente diferentes da perspectiva da imagem em segundo plano.
Diretrizes de dimensão para temas do navegador em nossa empresa. A largura total da imagem é de 3000 pixels. Usar imagens que abrangem o plano de fundo completo ou um único elemento que ocupa um espaço inteiro é um método para resolver o problema, mas também pode levar a um tamanho de arquivo excessivamente grande (e, portanto, um tema mais lento).
Usando fundos repetidos
Um método para garantir um plano de fundo totalmente com estilo e tamanhos de arquivo inferior implica usando elementos rastreados, texturas de azulejos ou imagens parciais. Esses fundos padronizados podem fornecer uma elegância simples, tamanhos de arquivo reduzidos, maior flexibilidade e potencialmente um design mais bem -sucedido.
Escolhendo formatos de arquivo de imagem
Escolher o formato de arquivo certo para o design do tema do seu navegador é um processo semelhante para decidir qual formato usar em web design.
Se as imagens precisarem de transparência, use formato .gif ou .png. Se eles não forem transparentes, use .jpg como formato de arquivo.
Animação
Os componentes animados do design também estão disponíveis para o Firefox e o IE. Isso pode ser um bom aprimoramento (por exemplo, ao adicionar luzes cintilantes a um tema do navegador de árvore de Natal), mas pode ser facilmente exagerado. Mantenha a animação no mínimo, pois pode ser perturbador para o usuário.
O Firefox permite GIFs animados ou PNGs. O IE só pode exibir GIFs animados.
Lidar com os componentes da interface do usuário do navegador exigidos
Os designers devem ter em mente que existem elementos específicos que precisam ser visíveis ao criar qualquer design. Por exemplo, no Microsoft Windows, os controles estão no canto superior direito do navegador.
Chrome, Firefox e IE têm diferenças visuais na opacidade da aba, dependendo se uma guia estiver em foco ou em segundo plano. A visibilidade do design por trás dos controles de navegação, barra de endereço e caixas de pesquisa também varia entre os navegadores e os sistemas operacionais. 
O tema antigo do navegador cômico é um conceito divertido, com muitos problemas de legibilidade.
Mantenha -o simples e evite fadiga visual
Lembre -se: o navegador é usado por horas por dia e o usuário terá que olhar para o design do tema do navegador toda vez que iniciar seu navegador da web.
Manter o design agradável aos olhos é um critério vital para evitar a fadiga visual e um usuário perdido.
Lidando com a experiência do usuário da “nova guia”
Muitas vezes, ao projetar um tema do navegador, o Chrome do navegador deve ser o foco, porque é para isso que o usuário é exposto por horas por vez. A experiência “New Tab” – o evento em que o usuário abre uma guia em branco ou abre outra janela do navegador – no entanto, também cria oportunidades de temas dentro do navegador. No caso do Google Chrome, esta é a área menos sobrecarregada por restrições.
Em vez de uma página em branco aguardando o próximo URL do usuário, a nova imagem da guia pode trazer um elemento de design para esta área. Uma imagem é usada no Chrome e HTML no Firefox. O tamanho do arquivo é novamente uma consideração para manter a guia carregando rapidamente.
A guia do navegador, cada vez mais, tornou -se cada vez mais funcional; Tornou -se um local de espera para novos recursos, como caixas de pesquisa, imagens de miniaturas e contagens dinâmicas (como quantos e -mails não lidos você tem no Gmail). Aconselhamos que você coloque a força do seu design na parte inferior, para que a chance de ser obstruída seja limitada. 
O tema do navegador Porsche Panamera mostra a experiência de “nova guia”.
Coisas a evitar no design do tema do navegador
Agora que você conhece algumas considerações gerais de design para criar temas do navegador, vamos dar uma olhada em algumas coisas que você deve evitar.
Logos de temas do navegador que são muito largos
O Firefox permite a inserção de um logotipo à esquerda dos botões de navegação.
Seu logotipo pode realmente mudar toda a interface do usuário do navegador para a direita. Os usuários, no entanto, têm uma forte preferência pelo botão traseiro do navegador para ficar onde está – chame de “memória muscular” – e isso cria frustração se o tema do navegador o mover muito para longe de sua posição original. Mantenha a largura do logotipo no mínimo.
Projetos que dependem da colocação perfeita de pixels
Os projetos que dependem da colocação exata dos elementos verticais devem ser eliminados da consideração devido às variações da plataforma de navegador cruzado. Por exemplo, os elementos gráficos em segundo plano podem mudar para cima em alguns casos e criar um conflito entre o design e o layout do navegador. 
O tema do navegador da Brown University precisava de uma atualização para corrigir o desalinhamento no Firefox 4 criado pela linha horizontal.
Introdução ao design do tema do navegador
O tema do navegador oferece um ótimo lugar para envolver seu público on -line.
Para as empresas, ele estende sua marca a um aplicativo amplamente utilizado. Para os designers, os temas do navegador são um local desafiador para mostrar habilidades de design e sua criatividade na superação de restrições impostas pelo meio ambiente. Você está interessado em começar a construir seu próprio tema de navegador personalizado?
É fácil começar. Aqui estão alguns recursos para colocá -lo em funcionamento.
Conteúdo relacionado
FAQ sobre design de temas do navegador
1. Qual é a importância de considerar a variabilidade do ambiente ao projetar um tema de navegador?
Ao projetar um tema de navegador, é crucial considerar a variabilidade do ambiente, como diferentes navegadores, sistemas operacionais e versões. Isso garantirá que o seu design seja exibido corretamente em todos os cenários possíveis.
2. Quais são as melhores práticas para lidar com dimensionamento e fundos repetidos em um tema de navegador?
Ao lidar com dimensionamento e fundos repetidos em um tema de navegador, é recomendável usar elementos rastreados, texturas de azulejos ou imagens parciais para garantir um plano de fundo estiloso e tamanhos de arquivo reduzidos.
3. Qual formato de arquivo de imagem é recomendado para designs de temas de navegador?
Para designs de temas de navegador, é aconselhável usar formatos de arquivo como .gif ou .png se as imagens precisarem de transparência, e .jpg se não forem transparentes.
4. Como lidar com elementos da interface do usuário do navegador ao projetar um tema?
Ao projetar um tema de navegador, é importante considerar elementos específicos da interface do usuário, como controles de navegação e barras de endereço, para garantir que o design seja funcional e esteticamente agradável em todos os navegadores e sistemas operacionais.
5. Quais são algumas coisas a serem evitadas no design de temas de navegador?
Alguns dos erros a serem evitados no design de temas de navegador incluem logotipos muito largos que interferem na usabilidade, projetos que dependem de posicionamento exato de pixels e designs que não levam em consideração a variabilidade do ambiente do navegador. Certifique-se de manter o design simples e evitar fadiga visual.
