Al iniciar cualquier proyecto de diseño web, una de las partes más difíciles y que más tiempo consume es elegir las imágenes correctas para colocar en cada página y obtener el contenido de su cliente. El uso de imágenes y texto de marcador de posición puede ayudarlo a comenzar ese proyecto rápidamente.
Aquí hay algunos recursos que he usado para generar copias e imágenes para un sitio web de desarrollo.
Imágenes de marcador de posición
Imagen ficticia
Este es uno de los generadores de marcadores de posición de imagen más simples que existen, pero también es uno de mis favoritos. Simplemente especifique un ancho y alto y un formato de imagen (PNG, GIF o JPG) y estará listo para comenzar. También puede personalizar el color de fondo y de primer plano, así como el texto que se muestra.
La imagen se puede usar en su HTML como una etiqueta IMG de esta manera:
<img src="https://www.crazyegg.com/blog/image-text-placeholders-web-design/http://dummyimage.com/600x400/000/00ffd5.png" alt="placeholder image"/>
Flickholdr
Flickholdr elige una imagen de Flickr cuando se le proporciona el ancho y el largo de la imagen que necesita. También puede especificar una etiqueta opcional y elegir entre imágenes en color y en blanco y negro.
La imagen se puede usar en su HTML como una etiqueta IMG de esta manera:
<img src="http://flickholdr.com/640/480" alt="placeholder image"/>
Se devuelve la misma imagen cada vez que se solicita.
Si desea una imagen diferente, especifique un desplazamiento (en este caso: 2):
<img src="http://flickholdr.com/640/480/2" alt="placeholder image"/>
lorem píxel
¿Cansado de usar los mismos marcadores de posición de siempre? Lorem Pixel le proporciona imágenes aleatorias dado un ancho y una altura. También acepta una amplia variedad de categorías, como deportes, animales y alimentos, por nombrar solo algunas. También puede colocar texto en la imagen aleatoria.
La imagen se puede usar en su HTML como una etiqueta IMG de esta manera:
<img src="https://www.crazyegg.com/blog/image-text-placeholders-web-design/http://lorempixel.com/640/480/sports" alt="placeholder image"/>
Si desea un texto de muestra en su imagen (en este caso se usa This-is-sporty):
<img src="https://www.crazyegg.com/blog/image-text-placeholders-web-design/http://lorempixel.com/640/480/sports/This-is-sporty/" alt="placeholder image"/>
Cada solicitud a lorempixel devolverá una imagen completamente aleatoria. ¡Esto significa que no habrá dos vistas iguales de su página web!
Texto del marcador
lorem ipsum
Lorem Ipsum genera texto aleatorio por párrafos o número de palabras y en varios idiomas y conjuntos de caracteres.
¡Además del latín, tiene la opción de varios conjuntos de caracteres de chino, ruso, hindi e incluso hebreo! También puede elegir comentarios diacríticos en varios idiomas, como francés, español y sueco, por nombrar solo algunos.
Generador WP Lorem Ipsum
¿Trabajando en WordPress? Tengo un gran complemento para ti.
WP Lorem Ipsum agrega un botón a su editor WYSIWYG que le permite agregar tanto texto de Lorem Ipsum como desee.
Este complemento no podría ser más fácil de usar.
inconformista ipsum
¿Necesitas algo de jerga hipster en tu página? ¡No busque más! Hipster Ipsum genera texto que contiene palabras hipster como «Gastropub», «Artisan» y «Narwhal», por nombrar solo algunas. ¡Simplemente especifique la cantidad de párrafos que necesita y si necesita latín mezclado con el texto y está listo para tener un poco de texto hipster en su página!
Tener imágenes y texto de marcador de posición hace que el proceso de diseño web sea mucho más fácil. También ayuda a sus clientes a visualizar los datos que deben proporcionar para que pueda completar con éxito su sitio web.