<\/p>\n\n\n\n Placeholder \u00e9 uma express\u00e3o que vem do ingl\u00eas: place (lugar) + hold (segurar\/reservar) e se trata de um lugar que foi reservado com um prop\u00f3sito espec\u00edfico. Este \u00e9 um termo comumente usado em desenvolvimento web e design para se referir a conte\u00fado de amostra tempor\u00e1rio.<\/p>\n\n\n\n O placeholder \u00e9 inserido em um espa\u00e7o ou campo reservado em um site, aplicativo ou design, at\u00e9 que o conte\u00fado real seja disponibilizado ou preenchido. Isso \u00e9 necess\u00e1rio pois, quando se projeta um novo layout de site web, por exemplo, \u00e9 comum come\u00e7ar a trabalhar e n\u00e3o ter logo de in\u00edcio todas as imagens necess\u00e1rias para finalizar o arranjo dos elementos. <\/p>\n\n\n\n Geralmente, todos os servi\u00e7os de placeholder tem o funcionamento parecido: voc\u00ea insere uma imagem normal no HTML da sua p\u00e1gina, apontando para o servi\u00e7o de placeholder, e o resultado \u00e9 a imagem.<\/p>\n\n\n\n A cor empregada em um placeholder \u00e9 um tom de cinza claro, alinhando-se com as Diretrizes de Acessibilidade para o Conte\u00fado da Web. Isso ocorre devido \u00e0 inadequa\u00e7\u00e3o do contraste da cor em rela\u00e7\u00e3o a diversos fundos de tela.<\/p>\n\n\n\n Leia tamb\u00e9m: <\/em><\/strong>Cria\u00e7\u00e3o de sites: 7 ferramentas gratuitas para criar o seu layout naveg\u00e1vel<\/em><\/strong><\/a><\/p>\n\n\n\n Quantas vezes voc\u00ea come\u00e7ou a criar um site<\/a> e faltaram aquelas imagens que o designer ficou de mandar? Para ajudar voc\u00ea a contar com um bom placeholder, separamos uma lista com as melhores op\u00e7\u00f5es dispon\u00edveis para ajudar no seu dia a dia. Confira:<\/p>\n\n\n\n O Placeholder.com \u00e9 um servi\u00e7o online popular, um dos mais simples da \u00e1rea que existe na Internet. Ele oferece imagens de espa\u00e7o 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.<\/p>\n\n\n\n Voc\u00ea tamb\u00e9m pode mudar o formato do texto, as cores e o tamanho da imagem, e n\u00e3o muito mais do que isso. O site \u00e9 ideal para uso no contexto profissional e indicado para todos os n\u00edveis de conhecimento da \u00e1rea. <\/p>\n\n\n\n Placekitten \u00e9 um servi\u00e7o semelhante ao Placeholder.com, mas com um toque cativante e divertido. Em vez de oferecer imagens de espa\u00e7o reservado gen\u00e9ricas, a plataforma fornece imagens de gatinhos ador\u00e1veis como placeholders para uso em projetos de desenvolvimento web e design. <\/p>\n\n\n\n Apesar de ser um pouco mais nichada, \u00e9 poss\u00edvel utiliz\u00e1-la em espa\u00e7os reservados, dentro dos seus designs ou c\u00f3digo, apenas colocando o tamanho da imagem e a url.<\/p>\n\n\n\n ImgPlaceholder \u00e9 um servi\u00e7o simples que permite gerar imagens de espa\u00e7o reservado personalizadas. \u00c9 uma op\u00e7\u00e3o flex\u00edvel para utilizar em projetos de design, e consegue sobrepor \u00edcones do nosso velho conhecido Fontawesome<\/a>.<\/p>\n\n\n\n Tamb\u00e9m acompanha um gerador que permite configurar todos os par\u00e2metros \u2013 tamanhos, cores e muito mais.<\/p>\n\n\n\n Leia tamb\u00e9m: <\/em><\/strong>60 Ferramentas de Produtividade Gratuitas <\/em><\/strong><\/a><\/p>\n\n\n\n PlaceCage \u00e9 um servi\u00e7o divertido que substitui as imagens de espa\u00e7o reservado por fotos aleat\u00f3rias do \u201cDeus Supremo da Atua\u00e7\u00e3o\u201d, o eterno Nicolas Cage. \u00c9 uma op\u00e7\u00e3o humor\u00edstica para adicionar um toque inesperado aos layouts.<\/p>\n\n\n\n A plataforma \u00e9 do mesmo autor que o Fill Murray e Steven SeaGallery (a pr\u00f3xima nesta lista) e oferece a op\u00e7\u00e3o de trazer GIFs animados, para que voc\u00ea possa curtir a capacidade de atua\u00e7\u00e3o deste grande ator.<\/p>\n\n\n\n Semelhante ao PlaceCage, o Steven SeGALLERY substitui as imagens de espa\u00e7o reservado por fotos do ator Steven Seagal. \u00c9 outra op\u00e7\u00e3o op\u00e7\u00e3o nichada de placeholder, por\u00e9m humor\u00edstica e ideal para projetos criativos.<\/p>\n\n\n\n Por mais que n\u00e3o sirva para todos os tipos de sites e afins, \u00e9 \u00f3tima para p\u00e1ginas de humor e entretenimento.<\/p>\n\n\n\n Trocadilho com Lorem Ipsum (que \u00e9 um texto padr\u00e3o que se usa quando n\u00e3o se tem o texto que vai no design). \u00c9 filho do conhecido Unsplash<\/a>, site que apresenta lindas fotos de uso livre, produzidas pela melhor \u2013 e mais generosa! \u2013 comunidade de fot\u00f3grafos.<\/p>\n\n\n\n Este \u00e9 um servi\u00e7o popular que oferece imagens de espa\u00e7o reservado de alta qualidade, al\u00e9m de permitir a especifica\u00e7\u00e3o de dimens\u00f5es e at\u00e9 mesmo a escolha de imagens aleat\u00f3rias de uma vasta cole\u00e7\u00e3o.<\/p>\n\n\n\n Placebacon \u00e9 uma alternativa divertida ao Lorem Ipsum. Ele preenche espa\u00e7os reservados com texto fict\u00edcio relacionado a bacon, adicionando um toque de humor aos projetos. Em outras palavras, este aqui \u00e9 especialmente para os carn\u00edvoros de plant\u00e3o.<\/p>\n\n\n\n Al\u00e9m de agradar quem aprecia a del\u00edcia chamada bacon, atende \u00e0s demandas de quem tem um restaurante e est\u00e1 procurando por imagens atrativas para usar no site ou redes sociais. <\/p>\n\n\n\n Leia tamb\u00e9m: <\/em><\/strong>Site ou rede social: 7 provas de que voc\u00ea precisa de um site<\/em><\/strong><\/a><\/p>\n\n\n\n Semelhante ao Placebacon, o Baconmockup oferece imagens de espa\u00e7o reservado com tema de bacon. \u00c9 uma op\u00e7\u00e3o engra\u00e7ada para quem aprecia o conceito de “bacon ipsum” e \u00e9 outro bom exemplo de que plataformas como essa s\u00e3o muito interessantes e mostram que \u00e9 poss\u00edvel ter um placeholder sobre qualquer coisa.<\/p>\n\n\n\n Inclusive, pode ser um bom tipo de site para investir<\/a>, afinal de contas, a todo momento as pessoas est\u00e3o procurando por imagens.<\/p>\n\n\n\n Este servi\u00e7o permite gerar imagens de espa\u00e7o reservado com texto din\u00e2mico e \u00e9 poss\u00edvel especificar texto e estilos para criar imagens personalizadas. Isso inclui diversas op\u00e7\u00f5es de personaliza\u00e7\u00e3o, como:<\/p>\n\n\n\n Embora n\u00e3o seja uma ferramenta de espa\u00e7o reservado tradicional, o Placeit \u00e9 uma plataforma de cria\u00e7\u00e3o que permite gerar mockups de dispositivos e designs com facilidade. \u00c9 \u00fatil para criar apresenta\u00e7\u00f5es de produtos e designs de alta qualidade e apresenta cerca de 3.000 mockups que variam entre telas de:<\/p>\n\n\n\n Como vimos at\u00e9 aqui, o uso de sites de placeholder oferece efici\u00eancia, criatividade e flexibilidade aos profissionais envolvidos em projetos de desenvolvimento web e design. Como resultado, o processo de cria\u00e7\u00e3o e desenvolvimento se torna mais suave e produtivo.<\/p>\n\n\n\n Por isso, esta \u00e9 uma ferramenta valiosa para garantir que os projetos atendam \u00e0s expectativas e necessidades dos clientes e usu\u00e1rios finais.<\/p>\n\n\n\n Leia tamb\u00e9m: <\/em><\/strong>Tudo sobre tamanho de imagens para sites em WordPress<\/em><\/strong><\/a><\/p>\n\n\n\n![\"banner-kinghost\"](\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2023\/06\/banner_1.png\" "\\"\\"")
<\/a><\/figure>\n\n\n\nO que \u00e9 placeholder?<\/strong><\/h2>\n\n\n\n
Qual \u00e9 a cor padr\u00e3o do placeholder? <\/strong><\/h3>\n\n\n\n
Conhe\u00e7a 10 \u00f3timos sites de placeholder para usar em seus projetos web<\/strong><\/h2>\n\n\n\n
1. Placeholder.com<\/strong><\/h3>\n\n\n\n
2. Placekitten<\/strong><\/h3>\n\n\n\n
3. ImgPlaceholder<\/strong><\/h3>\n\n\n\n
4. PlaceCage<\/strong><\/h3>\n\n\n\n
5. Steven SeGALLERY<\/strong><\/h3>\n\n\n\n
6. Lorem Picsum<\/strong><\/h3>\n\n\n\n
7. Placebacon<\/strong><\/h3>\n\n\n\n
8. Baconmockup<\/strong><\/h3>\n\n\n\n
9. Dynamic Dummy Image Generator<\/strong><\/h3>\n\n\n\n
\n
10. Placeit<\/strong><\/h3>\n\n\n\n
\n
Quais s\u00e3o os benef\u00edcios de contar com sites de placeholder?<\/strong><\/h2>\n\n\n\n