| 26 dicas de webdesign 
                                          (parte 3) | 
                                       
                                     
                                   | 
                                 
                               
                              artigos 
                              >> <web>design >> 26 dicas de 
                              webdesign (parte 3) 
                              (artigo originalmente publicado no 
                              site Aranha Internet e design) 
                               
                              Fábio Carvalho 
                              31/3/2001 
                              otimização 
                                de gráficos 
                                 
                                Nunca é demais lembrar: escolha o formato 
                                correto de arquivo gráfico (GIF 
                                ou JPEG) de acordo com sua finalidade. 
                                 
                                 
                                Os arquivos GIF são ideais para 
                                imagens simples, com cores sólidas  
                                como logos, títulos (como o apresentado 
                                acima desta caixa), botões e bordas/molduras 
                                (como o contorno desta caixa de texto). Já 
                                os arquivos JPEG são mais indicados 
                                para fotos e imagens com grande quantidade de 
                                cores e gradientes. 
                                 
                                Para conseguir um download mais rápido, 
                                quando usar arquivos gráficos no formato 
                                GIF, utilize o mínimo de cores possíveis. 
                                Use anti-aliasing em seus gráficos apenas 
                                quando for realmente necessário, pois este 
                                recurso aumenta o número de cores de seus 
                                gráficos, o que os torna mais pesados. 
                                 
                                Para os arquivos gráficos no formato JPEG, 
                                utilize algum programa de edição 
                                que lhe permita ajustar de maneira fina o nível 
                                de compressão da imagem, e que exiba ao 
                                mesmo tempo uma amostra de como ficará 
                                a imagem com a compactação que você 
                                está definindo. Selecione a maior compactação 
                                possível, que ainda mantenha o nível 
                                de qualidade desejado. 
                              testado em humanos 
                               
                              A melhor maneira de testar seu projeto de design 
                              para um site é submetê-lo à.... 
                              humanos! Por mais óbvio que isto pareça, 
                              muitas vezes esquecemos que talvez um projeto que 
                              acreditamos claro e intelegível seja na verdade 
                              um enigma para outras pessoas. 
                               
                              Consiga uma pessoa não muito familiarizada 
                              com internet para testar seu site. Não dê 
                              qualquer tipo de instrução  
                              deixe que a própria pessoa tente encontrar 
                              o seu caminho. 
                               
                              Observe bem seu comportamente face a cada estágio 
                              do site, e faça anotações. 
                              Registre todas as dúvidas desta pessoa. Anote 
                              suas sugestões.  
                               
                              Com base neste teste, verifique o que pode ser mudado 
                              em prol de uma maior clareza e facilidade de navegação. 
                              indo além das 216 
                                cores 
                                 
                                Se você está cansado de só 
                                poder usar as 216 cores da "safe palette", 
                                use esta dica para aumentar o número de 
                                cores que você pode usar em seus gráficos, 
                                sem perigo de alteração quando seu 
                                site for aberto em um computador com monitor configurado 
                                para apenas 256 cores. 
                                 
                                Esta técnica envolve a seleção 
                                de duas cores da paleta de 216 cores e sua disposição 
                                lado a lado, pixel a pixel. Estas cores irão 
                                se misturar criando uma nova cor que não 
                                sofrerá "dither".  
                                 
                                 Por 
                                exemplo, a cor #993300 
                                colocada ao lado da cor #CC9966 
                                cria um tom de marrom que não é 
                                muito comum na web (veja ao lado), que não 
                                faz parte da "safe palette", e que mesmo 
                                assim não será deteriorado quando 
                                visualizado em um monitor com apenas 256 cores, 
                                uma vez que se trata de uma retícula composta 
                                de duas cores "seguras".  
                                 
                                Tenha em mente que esta técnica aumenta 
                                em vários Kb o tamanho de suas imagens, 
                                portanto use-a em situações onde 
                                a imagem é pequena, por exemplo, como background 
                                de uma tabela, célula ou mesmo de toda 
                                a página. 
                              segue 
                                >> 
                               
                             |