Arquivo de Design - Fazendo Web Sites

10 dicas para desenvolver um site amigável

Todo o esforço e dinheiro que você investiu na construção de seu site não significa nada se os motores de busca não podem acessar o seu conteúdo corretamente. Uma maneira importante de garantir que isso não aconteça é ter um site ‘amigável’ em sua arquitetura de busca.

1. Tenha uma marca forte e clara

Seu site deve projetar a imagem que você quer que o mundo veja – e a boa notícia é que através do web design você pode controlar essa imagem completamente. Em termos de design físico, isso significa posicionar seu logotipo ou mensagem-chave no canto superior esquerdo – a parte da tela mais atraída pelos nossos olhos.

2. Fornecer um método de navegação claro e conciso

Um bom web designer irá usar técnicas de design para levar o usuário ao redor da tela e do site. Subseções claramente diferenciadas e até mesmo um mapa do site podem garantir uma rota de navegação concisa e fácil de seguir, enquanto o bom uso da posição, cor, contraste e tamanho podem ajudar a focar o olho. Atenha-se a um menu de navegação principal, permaneça consistente em todo o site, use a sub-navegação e mantenha-o organizado evitando menus suspensos.

3. Torne intuitivamente fácil de usar

Os visitantes podem ser instáveis e, se um site for difícil ou lento para navegar, eles irão sumir. Certifique-se de que os botões de navegação sejam óbvios e facilmente identificáveis - na parte superior da página é bom – e tenha links apropriados diretamente de uma página para outra, para que o usuário possa alternar rapidamente quando algo lhes interessar. Finalmente, siga as funcionalidades que as pessoas esperam. Por exemplo, se o texto for sublinhado, seu usuário naturalmente espera que seja um link.

4. Mantenha-o consistente

Os usuários gostam de saber onde estão dentro de um site e se o estilo de uma página muda drasticamente ou, de alguma forma, parece que visitantes diferentes ficarão desengajados e poderão começar a se sentir perdidos. Mantenha a consistência – e uma imagem profissional – garantindo que tudo corresponda, desde tamanhos de títulos e tipos de letra até ao design, cor e estilo da imagem.

5. Mantenha-o simples

Toda a atração de usar um site é que ele deve ser rápido e fácil de usar. Para este fim, a simplicidade é fundamental. Informações sucintas e úteis devem estar disponíveis com o toque de um botão.

6. Certifique-se de que é fácil de entender

Os visitantes que chegam ao seu website normalmente não querem gastar muito tempo, portanto, garantir que todos os aspectos sejam fáceis de entender é fundamental. Existem técnicas de design que podem ajudar a tornar as informações em uma página mais fáceis de entender – pense em frases mais curtas, fonte maior, seções diferenciadas por contraste e cor. Para este fim, existem algumas regras comuns: nunca use mais de três tipos de letra, ou mais de três tamanhos de pontos diferentes para cada fonte.

7. Faça um site leve

Nem todo mundo tem um computador ou dispositivo mais recente e a banda larga mais rápida, portanto, certifique-se de que seu código seja tão simples quanto possível, sem comprometer os elementos de que você precisa. O código HTML precisa ser leve e carregar rápido.

8. Escreva com o seu público-alvo em mente

Ao escrever, tenha em mente o seu público-alvo. Por mais tentador que seja usar o meio para bombardear o usuário com todas as informações que você puder, mantenha-o de maneira sucinta e use termos leigos, se apropriado – ou inclua um glossário se os termos técnicos forem inevitáveis. Se você pretende atrair visitantes através da otimização do mecanismo de busca (SEO), precisará considerar as palavras-chave que as pessoas usarão em suas pesquisas.

9. Considere a usabilidade

Considere a experiência do usuário final do site.
Pode ser uma boa ideia fazer uma lista das coisas que um usuário deseja usar em seu site e, em seguida, verificar se elas são fáceis de alcançar e, se necessário, estão prontamente disponíveis na página inicial. Faça testes, se coloque no lugar do visitante. A única maneira de realmente verificar se o site é tão amigável quanto possível é testá-lo em pessoas que não sabem nada sobre sua empresa.

10. E finalmente, seja responsivo

Hoje em dia um site tem que rodar em computadores desktop, tablets e celulares, todos os navegadores, ou pelo menos os principais tem que entender o seu código, isso é fundamental para o webdesigner atual.

A importância da hierarquia visual

Como definir uma hierarquia visual

Por que, ainda, os clientes pedem para deixar o número de telefone ocupando todo o espaço da fachada? “Deixa o número bem grande…”. Ninguém vai telefonar para um estabelecimento porque o telefone se destaca no lindo painel de led na frente loja. As pessoas entram em contato por necessidade, alguém que possa resolver o problema delas. Saber como entrar em contato é a última etapa na leitura de uma peça de comunicação.

A hierarquia visual é um dos princípios básicos do design para criar projetos de comunicação visual, sendo ele impresso ou digital, e o exemplo no parágrafo anterior ilustra bem a sua importância. Não estabelecer um critério de leitura, etapa primária para uma boa hierarquia, irá causar um ruído na informação e a assimilação da mensagem será comprometida. Ok, mas como definimos esse critério?

A leitura de uma peça de comunicação passa por no mínimo três momentos:

O que é?
Como é?
Como eu consigo?

O que é?

Momento de curiosidade, aqui estamos falando daquela informação que irá chamar a atenção do leitor e não importa o formato (título, chamada, imagem…) ou o tipo da peça, pode ser uma fachada (oficina mecânica), e-mail marketing (saiba como emagrecer em 21 dias de uma forma saudável), cartaz (show do Foo Fighters). Lógico que a atenção do leitor dependerá de uma necessidade momentânea (meu carro quebrou), necessidade psicológica (preciso me cuidar, vou ficar saradão em 21 dias) e necessidade pessoal (é o Foo Fighters!).

Como é?

Momento de conhecimento, depois que você chamou a atenção o leitor irá querer saber mais informações do que foi oferecido. E novamente não importa o formato, se estamos falando de um cartaz você poderá usar textos curtos, corrido ou em tópicos para apresentar os diferenciais do que está sendo divulgado. No email marketing existe a possibilidade de uma leitura com links para uma landing page, vídeos, ebooks…

Como eu consigo?

Momento de conversão, a pessoa já está convencida de que ela precisa de tal coisa, agora ela quer saber como comprar, baixar, telefonar, mandar um whatts… Ou seja a última etapa do processo de leitura, logo terá uma hierarquia menor no nosso critério. Normalmente no cartaz o espaço reservado para essas informações é o rodapé, no email marketing e/ou landing page é usado um botão call to action ( saiba mais, compre aqui…).

Contraste

Após estabelecer os critérios de leitura, ou definir os pontos de destaque do seu layout, podemos finalmente criar nossa hierarquia visual. E a melhor maneira de hierarquizar é contrastando os elementos. Para isso podemos utilizar os princípios básicos do design:

Peso
Cor
Estrutura
Forma
Tamanho
Alinhamento

Web Design Responsivo

Mas o que é Web Design Responsivo?

O que é Web Design Responsivo?

É uma nova abordagem na maneira de criar páginas de internet e torná-las capazes de se adaptar e responder a todo e qualquer dispositivo que utilizam a navegação na rede mundial de computadores.

Sua meta principal é facilitar a navegação e leitura de um website, diminuindo a necessidade de utilizar o excesso de rolamento e redimensionamento para poder acessar o conteúdo, algo que acontece com frequência em dispositivos de tela pequena.

Segue abaixo algumas das vantagens web design responsivo para um site. Confira!

Flexibilidade

Uma página utilizando um design responsivo é totalmente flexível para vários tamanhos de telas.

Este benefício faz com que um site possa ser acessado em qualquer tipo dispositivo e sem perder a qualidade.

Todas as imagens, linhas e bordas são ajustadas automaticamente, ajustando-se com total fluidez.

Melhora a experiência do usuário

Não é novidade para programadores e web designers que um dos fatores cruciais de um bom posicionamento nos mecanismos de buscas é a experiência do usuário. Inclusive, esta é uma das principais análises feita pelo Google para determinar o rankeamento de um site.

Nada é pior do que acessar seu site favorito pelo smartphone ou tablet e as páginas ficarem totalmente “quebradas”, dificultando a navegação pelas seções.

Web Design Responsivo

Custo

Há alguns anos atrás era preciso desenvolver e programar várias versões diferentes de um mesmo site para que se adaptasse a todos os tipos de dispositivos. E isso gerava um custo muito alto.

Imagine nos dias de hoje, em que acessamos a internet por vários tipos de gadgets (Computador, Smartphone, Tablet e até mesmo TV!). Neste caso o desenvolvedor teria que fazer 5 versões completamente diferentes umas das outras.

Completamente inviável!

Gerenciamento

Se um mesmo site possui várias versões diferentes para se adaptar aos dispositivos, então as estratégias de gerenciamento de SEO têm de ser diferentes também.

Este é mais um ponto chave positivo que esta maneira de programar sites tem. Não é necessário desperdiçar tempo e mão de obra da equipe de SEO para desenvolver estratégias para cada versão alternativa de um mesmo website.

Nos dias de hoje o web design responsivo deixou de ser uma opção e passou a ser uma obrigação. Tanto que é uma recomendação do Google. E quando uma empresa que é líder disparado em mecanismos de buscas, temos que prestar o máximo de atenção no que ela diz, não é mesmo?

As 5 melhores alternativas grátis ao Adobe Photoshop

1. GIMP

O GIMP é um dos melhores aplicativos alternativos gratuitos do Adobe Photoshop disponíveis na Web atualmente. Embora o GIMP esteja disponível para download gratuito, o software é poderoso o suficiente para criar as obras de arte fotográficas. Inclui filtros, camadas, máscaras, ajustes de cor e transformações totalmente personalizáveis. Há também muitas ferramentas, plugins e scripts populares pré-instalados do Photoshop, alguns dos quais são semelhantes aos apresentados no Adobe Photoshop (por exemplo, Liquify). Por meio de ferramentas interessantes de animação, você pode trazer qualquer uma de suas obras de arte para viver, organizá-las em bibliotecas, exposições, coleções, etc.O GIMP é atualizado regularmente. Uma das atualizações mais recentes do GIMP trouxe a possibilidade de acessar ferramentas, paletas e menus em uma única janela. Este último traz um visual realmente inteligente e semelhante ao PS para o software.

2. PhotoScape

O PhotoScape é uma alternativa genuína do Photoshop que se destina a levar sua experiência de edição de fotos para um novo nível. Com essa ajuda, você pode até criar apresentações de slides e até GIFs animados. O aplicativo inclui todos os melhores recursos de edição de imagem para atender às suas necessidades de edição de imagens.É um software simples e dinâmico, que quase não ocupa espaço do seu disco rígido, é rápido e roda bem até em computadores mais antigos, traz uma interface limpa e intuitiva e é repleto de recursos interessantes para aprimorar as suas iimagens.

3. Paint.NET

Uma alternativa gratuita do Photoshop estritamente para as versões 7 a 10 do Windows, a interface do Paint.NET faz lembrar o aplicativo Paint do sistema operacional. As semelhanças não são coincidência, já que a intenção do desenvolvedor original era substituir o MS Paint por algo um pouco melhor.

Isso foi há muito tempo, e o Paint.NET tem crescido aos trancos e barrancos ao ponto de ser comparável em alguns aspectos ao software de edição mais avançado do mercado, tanto gratuito quanto pago. Isso inclui a capacidade de usar várias camadas e mesclagens, enquanto mantém uma interface bastante simples, intuitiva até mesmo para um usuário mais novato. Embora o Paint.NET não ofereça algumas das funcionalidades mais avançadas do Photoshop ou mesmo do GIMP, seu conjunto de recursos pode ser expandido através do uso de plugins de terceiros. Por exemplo, o aplicativo não oferece suporte nativo a arquivos PSD, mas pode abrir documentos do Photoshop assim que o plug-in PSD for instalado.

O autoproclamado editor de imagens mais rápido disponível, o Paint.NET pode ser executado em cerca de 20 de idiomas e é gratuito para uso pessoal ou comercial, sem restrições.

4. Krita

Uma ferramenta interessante de edição e pintura, o Krita é um aplicativo de código aberto que viu seu conjunto de recursos se expandir significativamente nos últimos anos. Com uma paleta bacana e uma quantidade aparentemente infinita de personalizações de pincel que podem ser estabilizadas para suavizar até mesmo a mão mais instável, essa alternativa do Photoshop suporta a maioria dos arquivos PSD, e oferece gerenciamento avançado de camadas.

Gratuito para download, o aplicativo de desktop regularmente atualizado também utiliza o OpenGL e permite que você crie e manipule imagens HDR, entre muitos outros benefícios. Disponível para Linux, Mac e Windows, o Krita possui um fórum bastante ativo, que contém exemplos de ilustrações criadas por membros de sua comunidade de usuários.

Há outra versão do Krita otimizada para ultrabooks e outros PCs touchscreen, chamados Gemini, disponíveis na plataforma Steam.

5. Pixlr

Uma alternativa baseada em navegador para o Photoshop, o Pixlr é de propriedade dos conhecidos desenvolvedores de software Autodesk, e é bastante robusto quando se trata de recursos disponíveis, permitindo a edição e o aprimoramento progressivos, bem como design de imagem original.

Os aplicativos da Web Pixlr Express e Pixlr Editor serão executados na maioria dos navegadores modernos, desde que você tenha o Flash 10 ou superior instalado. Ele oferece um número significativo de filtros integrados, junto com suporte de camada limitada. O Pixlr reconhece os principais formatos de arquivos gráficos, como JPEG, GIF e PNG, e também permite que você visualize alguns arquivos PSD, embora alguns extremamente pesados não possam ser abertos.

O Pixlr é baseado na Web, e tem um recurso útil de Webcam embutido em seu painel, que permite capturar e manipular fotos.

Além da versão do navegador, o Pixlr também possui aplicativos gratuitos para dispositivos Android e iOS, que permitem executar vários recursos de edição a partir do smartphone ou tablet. O aplicativo para Android é tão popular, na verdade, que foi instalado em mais de 1 milhão de dispositivos.

Mais dicas para ser um bom Webdesigner

1 – Estude de graça por meio da internet

A formação acadêmica é sempre válida, mas assim como acontece em outras profissões, o web designer necessita de reciclagem de conhecimento para estar sempre por dentro das novidades da área. Conteúdo sobre o assunto pode ser encontrado em tutoriais no YouTube, fóruns, comunidades em redes sociais e sites oficiais de desenvolvedores de software.

2 – Estude PHP e banco de dados ao máximo

A linguagem de programação PHP irá demorar a ser substituída. Linguagens com enfoque em dispositivos móveis como Android e iOS também são muito requisitadas. “Há dificuldade para contratar profissionais no Brasil com formação nestas ferramentas”, diz. Ainda de acordo com o diretor, conhecimento em MySQL, Oracle e MSSQL é um diferencial.

3 – Olhe pra frente sempre

A tecnologia é dinâmica. E rapidamente muita coisa muda. Foi-se o tempo em que criávamos sites no FrontPage, foi-se o tempo que os gifs tomavam conta dos sites e que o amarelo piscando no preto era sinônimo de inovação.

4 – Faça cursos

Parece clichê, mas não é! Estudar, principalmente se for online, é uma ótima maneira de se qualificar e de aprender de verdade a dominar as ferramentas e conceitos indispensáveis para quem quer se tornar um bom webdesigner.

5 – Coloque em Prática. CRIE!

Não basta só estudar, você deve colocar em prática tudo aquilo que aprendeu, porque se você não fizer isso , o esforço e dedicação em aprender serão em vão. Infelizmente, muitas pessoas são de 8 à 80: ou começam a praticar sem base de conhecimentos ou só estudam e nunca colocam em prática aquilo que estudaram. Eu mesmo conheço muitas pessoas assim.

6 – Crie um blog ou um canal do Youtube

A internet tem um poder assombroso. É impressionante como ela pode elevar a sua carreira de de qualquer profissional, de qualquer segmento, de um jeito fantástico, desde que utilizada com inteligência. E do mesmo jeito, pode jogá-la no limbo, caso seja utilizada de maneira errada.

7 – Estude e pratique Photoshop

Photoshop é definitivamente uma fonte de possibilidades criativas para se construir algo original e legal! Tudo vai depender de sua imaginação. Comece lendo livros sobre o programa e verá que não é tão difícil assim em se tornar um mestre na criação!

8 – Seja um observador

Tente visualizar os trabalhos de outros designers o máximo que puder! Isso vai lhe ajudar a buscar inspiração e você vai aprender um bocado com pessoas que estão a anos no mercado, mas que já estiveram no seu lugar um dia! Se você encontrou um layout que realmente gostou, tente seguir as tendências expressas – durante o processo, suas idéias vão surgir e você colocará seu estilo e quem sabe, deixá-lo ainda melhor!

9 – Analise

Você encontrou um site que serviu como inspiração. Então, tente analisar como ele foi criado – comece analisando o background, quais fontes foram usadas, quais brushes ou gradientes foram desenvolvidos para criar determinado efeito. Tente encontrar uma sequência lógica das coisas criadas para esse exemplo.

10 – E finalmente, acredite em si mesmo

Acredite que tudo vai acabar bem e não perca a fé na sua capacidade e em você mesmo. Isso é muito importante e vai lhe ajudar a ter sempre uma motivação para caminhar por caminhos mais corretos.

Saiba como ser um bom web designer

Você é um web designer e gostaria de desenvolver suas habilidades para garantir um trabalho aprimorado? Confira algumas dicas e saiba como tornar isso possível.

O início de ano costuma trazer a vontade de mudança à tona para a maioria das pessoas e, realmente, esse período pode ser ideal para inovar hábitos e então encontrar melhores maneiras para lidar com diversos aspectos do dia a dia. Para estudantes, esse fato está ainda mais presente, uma vez que o começo de um ano letivo sempre vem acompanhado por alterações.

Se você estuda web design ou já trabalha com isso, aproveite essa época para fazer o mesmo e modificar pontos essenciais da sua rotina, garantindo que você utilize suas habilidades ao máximo. Pode parecer complicado, mas se você seguir os passos corretos conseguirá encontrar o caminho ideal.

Muitos designers não precisam comparecer a um ambiente de trabalho específico para realizarem suas tarefas. Isso é um ponto positivo, mas se você não tiver cuidado, pode se prejudicar. Para que você possa usufruir desse fator, aproveite a facilidade de estar em casa para aprender coisas novas e aprimorar seus conhecimentos.

Além disso, você também pode procurar por outras oportunidades de trabalho freelance, por exemplo. Assim você garante uma renda extra e ainda ganha novas habilidades para citar em seu currículo e se tornar um profissional mais capacitado. Contudo, tenha cuidado para não se sobrecarregar de tarefas: organize seus horários para que todas suas metas diárias possam ser atingidas.

Com o foco voltado para a qualidade de seu trabalho, encontre um ponto em suas criações que seja como sua marca pessoal e então procure por pessoas que possam se interessar pelos seus projetos. Não tenha medo de riscos e batalhe pelo que deseja.

Dez dicas para otimizar seu site

1. Crie um Site Map

Antes de partir para o desenvolvimento, crie um “rascunho”, um pequeno guia/esquema de seu site das seções e suas ramificações. É algo bastante simples de fazer e que fará uma diferença enorme na hora de criar o site. Com uma visão completa do que irá fazer, fica tudo mais claro para criar um site funcional.

2. Menos é mais

Pense de forma simples. Páginas de Web rebuscadas e cheias de movimento, que mostram ícones se mexendo e animações complexas levam à perda de foco para o que realmente deve ser destacado. Pense no que de fato é necessário para o seu site.

3. Cuidado com as animações

Com o surgimento de programas gráficos de animação como o Flash, o uso de animações se tornou indiscriminado. Caso a animação inicial se faça necessária, inclua a opção de pular a abertura do site e ir direto ao conteúdo.

4. Marca à esquerda

Esse já é um padrão na Internet mundial e que vale a pena ser levado em conta. Sempre que possível, use a marca da empresa no canto esquerdo superior do site. Esse local facilita a visualização, além de ser um dos principais pontos de atenção que as pessoas têm ao acessar um site.

5. Botões do lado esquerdo

Assim como a logomarca da empresa já se tornou padrão ficar à esquerda do site, os botões de acesso às seções também. Não é uma regra, mas já está hoje no inconsciente coletivo dos internautas. Sendo assim, aproveite-se dessa ideia para criar seu site.

6. Na página inicial já diga a que veio

Deixe bem claro o que você e sua empresa fazem e quais as suas especialidades. Dê a quem visita o seu site todas as informações relevantes a respeito do seu negócio para criar uma oportunidade de venda.

7. Separe os assuntos por temas

Se a quantidade de conteúdo for muito grande, facilite o entendimento de suas informações agrupando os tópicos em temas. Isso facilita demais na hora de buscar determinado assunto dentro do site.

8. Contatos sempre visíveis

Uma das utilidades mais básicas de um site é aproximar o internauta da empresa. Por isso, deixe bem visível as informações como telefone, endereço e e-mail. Um formulário de contato prático e simples também pode ser utilizado.

9. Mapa do site

Um mapa auxilia o usuário caso haja muito conteúdo no site e a quantidade de seções acabou ficando maior do que deveria ser. De forma simples e direta, o mapa dará o entendimento imediato de como estão dispostas as informações.

10. Botão de página inicial sempre acessível

Quando falamos em facilitar o acesso às seções, não esqueça que a Home também é uma delas, na verdade a mais importante. Portanto, inclua sempre um botão de acesso à página inicial por todo o site, de preferência a própria marca da sua empresa.

Dicas para criar um bom site

1) Defina o objetivo do seu site

Esse parece ser um item básico, mas que é deixado de lado por muitas pessoas. Antes de colocar a “mão na massa” reflita se o seu site será um comércio eletrônico, um portal de notícias, um site de conteúdo específico, etc. Isso irá determinar, por exemplo, quais itens aparecerão em destaque, qual a tecnologia deverá ser usada no desenvolvimento, qual plano de hospedagem contratar. Tendo isso em mente, você facilita a sua vida e simplifica o trabalho de quem irá desenvolver o site, diminuindo o número de alterações e o custo final do serviço.

2) Conheça o seu público-alvo

Quem irá ver o seu site? Idosos, jovens, mulheres, roqueiros, executivos? Cada tipo de público exige comunicação e ferramentas diferentes. Fique atento a isso para não cometer gafes e espantar a sua audiência.

3) Crie um layout atraente

Site feio e mal organizado espanta, não transmite credibilidade e transparece amadorismo. Quem está conhecendo você ou sua empresa pela web não tem uma referência anterior. E como diz o ditado: “A primeira impressão é a que fica”. Seduzir o visitante com belas imagens, vídeos e fontes apropriadas é essencial para segurá-lo no site pelo maior tempo possível.

4) Tenha um conteúdo objetivo

O tempo das pessoas é precioso. Daí cresce a importância do seu site ter um conteúdo relevante e objetivo. Textos longos e mal escritos colocam o seu site na lista dos esquecidos da internet.

5) Pense na usabilidade

Não adianta criar um site incrível, se ele não for intuitivo e fácil de usar. Não coloque coisas inúteis e sem funcionalidade. Se o visitante não encontrar logo o que ele quer, fecha o browser e nunca mais volta a visitá-lo.

6) Garanta a portabilidade

As pessoas não acessam a web somente de um computador tradicional. Garanta que elas tenham uma boa experiência vendo seu site em qualquer dispositivo, seja em um celular ou um smartphone. Seja usando um PC ou um Mac. Navegando no Mozzila Firefox, no Safari ou no Internet Explorer.

7) Facilite a vida dos portadores de deficiência

Eles também usam a internet e são um público cada vez maior. Pensando nisso desde o começo do seu projeto, as dificuldades para tornar seu site acessível são mínimas.

8) Escreva corretamente

Acho que nesse item eu não preciso me aprofundar. Ninguém gosta de ler um texto confuso e cheio de erros.

Tenha em mente que as regras acima são apenas recomendações. Existem muitos outros fatores importantes que devem ser pensados. O desenvolvimento de um site profissional é complexo e exige a contratação de um bom profissional. Fique atento.

Os diferentes tipos de arquivos de imagem

Com tantos formatos de imagem, às vezes é difícil decidir qual é o melhor para cada aplicação. Cada uma das extensões possui características próprias, sendo indicadas para situações diferentes. O JPEG é mais utilizado na web por seu pequeno tamanho, mas o PNG é mais versátil e recomendado para uma qualidade um pouco maior. Alías, falando em qualidade, o EXIF e o TIFF fazem bonito, mas possuem problemas de compatibilidade com programas comuns, então não existe um formato que seja “bom em tudo”. Conheça os mais comuns utilizados atualmente e quais as suas características mais marcantes.

JPEG/JFIF (Joint Photographic Experts Group)

Formato padrão da grande maioria dos usuários, possui uma altíssima taxa de compressão capaz de fazer com que um papel de parede com resolução Full HD (1920×1080) ocupe apenas 100 KB em disco, mas isso só é possível porque a compressão joga fora parte da qualidade.

Em vários casos, em especial nas páginas da internet, o tamanho menor do arquivo supera a desvantagem da perda de qualidade, mas este não é o formato recomendado para quem deseja fidelidade nos detalhes de suas fotos e imagens. Isso não torna o JPG ruim, já que possui um excelente nível de compressão – ele apenas é menos indicado para essas situações.

GIF (Graphics Interchange Format)

Formato desenvolvido pela CompuServe antes do JPEG para os antigos computadores de 8 bits. Na época, esta era uma boa solução devido às limitações de qualidade dos monitores e dos modems de conexão discada. Em imagens web que não necessitam de muita qualidade, o GIF passa a ser uma opção melhor do que o JPG tanto pelo maior nível de compressão quanto por oferecer cores mais vivas, mas está caindo em desuso devido à popularização do PNG e TIFF, que são mais versáteis e compatíveis com a maior velocidade da internet disponível atualmente.

BMP (Windows Bitmap)

Se o JPG pode ser considerado ‘o MP3 do mundo das imagens’, o Windows Bitmap pode ser comparado ao WAVE. Ele preserva todos os detalhes do arquivo original, mas gera arquivos finais bastante grandes por não utilizar nenhuma compressão. A extensão utilizada é .BMP ou .DIB (Device Indepedent Bitmap) e não suporta transparência, sendo mais comuns em computadores com Windows.

PNG (Portable Network Graphics)

Desenvolvido para suprir as limitações do formato GIF, suportando milhões de cores em vez das poucas centenas do formato anterior. Suporta também fundo transparente, compressão sem perdas e até animações, embora não nativamente. Para animações é necessário salvar como APNG (Animated Portable Network Graphics), que funciona de forma muito semelhante ao GIF, mas com um nível de compressão maior (também usa LZW) e alta qualidade.

PSD (Adobe Photoshop Document)

Muito utilizado por profissionais da área de design, o formato PSD é indicado principalmente para usuários das versões do Photoshop por possuir suporte a máscaras, modo CMYK, camada de texto, canais alfa e outras ferramentas avançadas. Muitos profissionais da área preferem salvar a imagem original em PSD para manter a estrutura original e gerar outros formatos (como JPEG, PNG, assim por diante) conforme a necessidade.

Para arquivos maiores o Photoshop utiliza a extensão .PSB (Photoshop Big), que é capaz de salvar um arquivo de até 300 megapixels, sendo uma das melhores opções do mercado para armazenar o original de imagens criadas e depois convertê-las para o meio que será utilizado, sendo tanto PNG para web quanto TIFF para situações onde a qualidade é altamente necessária.

TIFF (Tagged Image File Format)

Considerado por muitos como o melhor formato de imagem de alta qualidade para se trabalhar, o TIFF utiliza compressão sem perdas, mas é preciso lembrar que ele não aumenta a qualidade automaticamente. É necessário utilizar o TIFF desde o começo, pois abrir uma imagem em JPG e salvá-la em TIFF não alterará absolutamente nada.

EXIF (Exchangeable Image File Format)

Bastante similar ao TIFF, suporta 8, 16, 24 e até 48 bits de cores, portanto, é altamente recomendado em situações onde a qualidade final da imagem é muito mais importante do que o tamanho do arquivo, como em imagens médicas, por exemplo. Algumas câmeras digitais de alta qualidade salvam a captura em EXIF para não jogar fora nenhum detalhe. Mas se o EXIF é tão bom, por que não constumamos achá-lo com frequência na web? Basicamente porque existe mais de um tipo, não sendo um formato padronizado. Isso faz com que alguns programas, como os navegadores, não o suportem nativamente, deixando-o restrito a aplicações específicas.

RAW

Utilizado principalmente em câmeras digitais utilizando compressão sem perdas ou com quase nenhum desperdício de informação. Visto como uma excelente opção para os fabricantes por sua alta qualidade, sofre do mesmo problema do EXIF, que é a falta de um padrão que normalize todas as imagens no formato RAW.

WEBP

Desenvolvido pelo Google em 2010, o WEBP traz a proposta de fazer com que as imagens fiquem até 40% menores do que o JPEG sem sacrificar a qualidade. Segundo a empresa, cerca de 65% de todo o tráfego da internet é composto por imagens, das quais mais de 90% são JPEG, então a mudança para esse formato diminuiria o tráfego mundialmente e diminuiria os custos de armazenamento das empresas.

Muitas vezes visto como o futuro formato padrão da internet, no papel o WEBP supera de longe os JPEGs, mas como é comum no mundo da informática, a simples superioridade técnica do WEBP não o tornará padrão, já que o JPEG já faz parte do cotidiano da maioria das pessoas.

Comparativo JPG versus GIF versus PNG

Para ilustrar o que foi dito acima, colocamos imagens de uma paisagem nos formatos mais utilizados na web para mostra a diferença entre um e outro. Confira!

JPEG 100% Qualidade – 305 KB

JPEG 60% Qualidade – 55 KB

JPEG 20% Qualidade – 29 KB

PNG 100% Compressão – 401 KB

PNG 50% Compressão – 406 KB

GIF – 127 KB

O que é um site responsivo?

Criados para se adaptarem a plataformas mobile, esses sites se tornaram uma importante ferramenta para o e-commerce.

Plataformas mobile se tornaram ferramentas importantes de comercialização dos produtos via comércio eletrônico, e por isso o empreendedor deve ter um site responsivo. Sites responsivos são aqueles que adaptam o tamanho das suas páginas (alteração do layout) ao tamanho das telas que estão sendo exibidos, como as telas de celulares e tablets.

Suas vantagens derivam da adaptação a qualquer ferramenta que os usuários estejam usando para facilitar a sua visualização. Além disso, os sites responsivos também podem expandir para visualizações de detalhes da página dando um zoom.

Veja alguma das adaptações nas páginas para sites responsivos que precisam ser feitas:

Alterações no layout do site.
Colocar as principais ferramentas de acesso para os usuários, para facilitar nas telas menores.
Alterar as imagens e cores do site.
Aumentar o espaço entre os links para que o dedo não encoste em dois links ao mesmo tempo.

Conforme dados divulgados pelo site Blog Webop, em pesquisa feita no Brasil em dez capitais pela WMcCann em parceria com o Instituto Ipsos, 41% dos entrevistados utilizam o celular para acessar a internet.

É aconselhável que os empresários adaptem seus sites e lojas virtuais para que abranjam maior número de usuários. Facilitar mais o acesso e visualização dos sites das empresas tem sido a tônica de sites responsivos.