A preocupação com o consumo de recursos e desempenho das aplicações deveria ser uma constante durante o desenvolvimento. Visto que, a velocidade de carregamento e processamento das páginas web é um dos fatores mais importantes de viabilização e aceitação de ferramentas desse tipo.
Para as páginas web, os conteúdos multimídias (imagens, vídeos, áudios etc.) são os arquivos mais pesados e que demandam maior tempo de transferência. As páginas que contêm muitas imagens demandam um grande número de requisições individuais para obtê-las. Uma solução seria a aplicação dos chamados CSS Sprite.
A técnica CSS Sprite consiste em condensar todas as imagens utilizadas pela aplicação em uma única, reduzindo a sua obtenção a uma única requisição. Uma vez transferida para o cliente, ela é picotada e exibida com uso da linguagem CSS, juntamente com o HTML.
O conceito de design flat segue uma linha de desenho minimalista onde são priorizadas formas geométricas claras, com cores sólidas para exprimir uma ilustração. Além de produzir imagens livres de poluição visual, também geram arquivos mais leves devido à redução de detalhes desnecessários.
A metodologia empregada foi o traçado de vetores sobre os principais componentes das imagens e ajustes conforme as originais. A estrutura dos ícones e os elementos informacionais foram mantidos. Apenas o estilo foi renovado. As cores adotadas foram consonantes com os ícones tradicionais e especialmente planejadas para fundos claros e escuros.
- GIMP 2.8
#e5e5e5lua#d7d9daclatera rasa da lua#ccccccclatera profunda da lua#bdc3c7nuvem e névoa#95a5a6nuvem escura#7f8c8dnuvem muito escura#e67e22sol#3498dbgota d'água, folha e ícone#297fb8caule da folha#f3c70eraio#d35400seta I#a21912seta II#0198baseta III#0f4698seta IV
Seguem abaixo os registros dos resultados gráficos obtidos com o desenvolvimento do projeto.
|
|-- icones flat individuais em tamanhos diversos (EG, GG, G, M, P, PP)
|-- css-sprite dos ícones flat nos tamanhos médio, pequeno e muito pequeno
|-- projetos-xcf com ícones flat desenvolvidos em formato vetorial para edição
`-- icones-originais compõe o arquivamento dos ícones tradicionais reestruturados