Ao iniciar um novo projeto de desenvolvimento web ou design, é comum deparar-se com a necessidade de preencher espaços vazios com conteúdo de exemplo antes que o conteúdo real esteja disponível. Essa estratégia é especialmente relevante quando se trabalha em protótipos, designs de site ou temas para blogs, e é aí que entram os sites de placeholder.
Se preferir ouvir o conteúdo na íntegra, basta dar o play logo abaixo.
Essas ferramentas e recursos online oferecem conteúdo fictício que ajuda a simular a aparência e o layout final do seu projeto, permitindo que você visualize como tudo se encaixa antes de preenchê-lo com o conteúdo real. Para saber mais sobre o assunto, continue a leitura deste artigo e confira:
- o que é placeholder;
- 10 ótimos sites de placeholder para usar em seus projetos web;
- quais são os benefícios de contar com sites de placeholder.
O que é placeholder?
Placeholder é uma expressão que vem do inglês: place (lugar) + hold (segurar/reservar) e se trata de um lugar que foi reservado com um propósito específico. Este é um termo comumente usado em desenvolvimento web e design para se referir a conteúdo de amostra temporário.
O placeholder é inserido em um espaço ou campo reservado em um site, aplicativo ou design, até que o conteúdo real seja disponibilizado ou preenchido. Isso é necessário pois, quando se projeta um novo layout de site web, por exemplo, é comum começar a trabalhar e não ter logo de início todas as imagens necessárias para finalizar o arranjo dos elementos.
Geralmente, todos os serviços de placeholder tem o funcionamento parecido: você insere uma imagem normal no HTML da sua página, apontando para o serviço de placeholder, e o resultado é algo como <img src=”https://placekitten.com/g/200/300”>, que resulta na seguinte imagem (cortesia do GLORIOSO PlaceKitten):
[inserir imagem do PlaceKitten]
Qual é a cor padrão do placeholder?
A cor empregada em um placeholder é um tom de cinza claro, alinhando-se com as Diretrizes de Acessibilidade para o Conteúdo da Web. Isso ocorre devido à inadequação do contraste da cor em relação a diversos fundos de tela.
Leia também: Criação de sites: 7 ferramentas gratuitas para criar o seu layout navegável
Conheça 10 ótimos sites de placeholder para usar em seus projetos web
Quantas vezes você começou a criar um site e faltaram aquelas imagens que o designer ficou de mandar? Para ajudar você a contar com um bom placeholder, separamos uma lista com as melhores opções disponíveis para ajudar no seu dia a dia. Confira:
1. Placeholder.com
O Placeholder.com é um serviço online popular, um dos mais simples da área que existe na Internet. Ele oferece imagens de espaço reservado para uso em projetos de desenvolvimento web e design, todas prontas para uso em diferentes tamanhos e formatos. Isso permite que os designers e desenvolvedores as insiram facilmente em seus layouts e designs enquanto trabalham em um projeto.
Você também pode mudar o formato do texto, as cores e o tamanho da imagem, e não muito mais do que isso. O site é ideal para uso no contexto profissional e indicado para todos os níveis de conhecimento da área.
2. Placekitten
Placekitten é um serviço semelhante ao Placeholder.com, mas com um toque cativante e divertido. Em vez de oferecer imagens de espaço reservado genéricas, a plataforma fornece imagens de gatinhos adoráveis como placeholders para uso em projetos de desenvolvimento web e design.
Apesar de ser um pouco mais nichada, é possível utilizá-la em espaços reservados, dentro dos seus designs ou código, apenas colocando o tamanho da imagem e a url.
3. ImgPlaceholder
ImgPlaceholder é um serviço simples que permite gerar imagens de espaço reservado personalizadas. É uma opção flexível para utilizar em projetos de design, e consegue sobrepor ícones do nosso velho conhecido Fontawesome.
Também acompanha um gerador que permite configurar todos os parâmetros – tamanhos, cores e muito mais.
Leia também: 60 Ferramentas de Produtividade Gratuitas
4. PlaceCage
PlaceCage é um serviço divertido que substitui as imagens de espaço reservado por fotos aleatórias do “Deus Supremo da Atuação”, o eterno Nicolas Cage. É uma opção humorística para adicionar um toque inesperado aos layouts.
A plataforma é do mesmo autor que o Fill Murray e Steven SeaGallery (a próxima nesta lista) e oferece a opção de trazer GIFs animados, para que você possa curtir a capacidade de atuação deste grande ator.
5. Steven SeGALLERY
Semelhante ao PlaceCage, o Steven SeGALLERY substitui as imagens de espaço reservado por fotos do ator Steven Seagal. É outra opção opção nichada de placeholder, porém humorística e ideal para projetos criativos.
Por mais que não sirva para todos os tipos de sites e afins, é ótima para páginas de humor e entretenimento.
6. Lorem Picsum
Trocadilho com Lorem Ipsum (que é um texto padrão que se usa quando não se tem o texto que vai no design). É filho do conhecido Unsplash, site que apresenta lindas fotos de uso livre, produzidas pela melhor – e mais generosa! – comunidade de fotógrafos.
Este é um serviço popular que oferece imagens de espaço reservado de alta qualidade, além de permitir a especificação de dimensões e até mesmo a escolha de imagens aleatórias de uma vasta coleção.
7. Placebacon
Placebacon é uma alternativa divertida ao Lorem Ipsum. Ele preenche espaços reservados com texto fictício relacionado a bacon, adicionando um toque de humor aos projetos. Em outras palavras, este aqui é especialmente para os carnívoros de plantão.
Além de agradar quem aprecia a delícia chamada bacon, atende às demandas de quem tem um restaurante e está procurando por imagens atrativas para usar no site ou redes sociais.
Leia também: Site ou rede social: 7 provas de que você precisa de um site
8. Baconmockup
Semelhante ao Placebacon, o Baconmockup oferece imagens de espaço reservado com tema de bacon. É uma opção engraçada para quem aprecia o conceito de “bacon ipsum” e é outro bom exemplo de que plataformas como essa são muito interessantes e mostram que é possível ter um placeholder sobre qualquer coisa.
Inclusive, pode ser um bom tipo de site para investir, afinal de contas, a todo momento as pessoas estão procurando por imagens.
9. Dynamic Dummy Image Generator
Este serviço permite gerar imagens de espaço reservado com texto dinâmico e é possível especificar texto e estilos para criar imagens personalizadas. Isso inclui diversas opções de personalização, como:
- largura;
- altura;
- proporções;
- cor de fundo;
- cor de primeiro plano;
- texto alternativo;
- formato das imagens.
10. Placeit
Embora não seja uma ferramenta de espaço reservado tradicional, o Placeit é uma plataforma de criação que permite gerar mockups de dispositivos e designs com facilidade. É útil para criar apresentações de produtos e designs de alta qualidade e apresenta cerca de 3.000 mockups que variam entre telas de:
- iPhone;
- Samsung;
- desktops;
- laptops;
- tablets.
Quais são os benefícios de contar com sites de placeholder?
Como vimos até aqui, o uso de sites de placeholder oferece eficiência, criatividade e flexibilidade aos profissionais envolvidos em projetos de desenvolvimento web e design. Como resultado, o processo de criação e desenvolvimento se torna mais suave e produtivo.
Por isso, esta é uma ferramenta valiosa para garantir que os projetos atendam às expectativas e necessidades dos clientes e usuários finais.
Leia também: Tudo sobre tamanho de imagens para sites em WordPress
Em se tratando da internet, “não há o que não haja”, né? E você, gostou deste conteúdo? Então aproveite para aprofundar seus conhecimentos e fique por dentro dos principais tipos de hospedagem de site e garanta o mais indicado para as suas necessidades.
