13 Placeholder untuk Designer dan Developer

Mempermudah proses design dan membangun aplikasi dengan menggunakan placeholder

Hadie Danker
sebulan yang lalu
Software
13 Placeholder untuk Designer dan Developer
{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n h2: \"h2\",\n h3: \"h3\",\n img: \"img\",\n a: \"a\"\n }, _provideComponents(), props.components);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.p, {\n children: \"Ketika membangun sebuah aplikasi web atau mobile, atau mungkin bagi Anda yang berprofesi sebagai designer. Pasti sering membutuhkan contoh konten yang bisa disematkan di project kita sebagai contoh penerapan isi konten pada aplikasi atau project kita.\\r\\nMisalnya saja konten text, logo, atau gambar-gambar yang spesifik atau json dan juga lainya.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Untuk memudahkan disini saya menyusun beberapa contoh placeholder yang bisa kita gunakan.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"text-placeholder\",\n children: \"Text Placeholder\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"1-lipsum\",\n children: \"1. lipsum\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Standard dummy text generator yang biasa digunakan oleh industri.\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/lipsum.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://www.lipsum.com/\",\n children: \"lipsum\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"2-loripsumnet\",\n children: \"2. Loripsum.net\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Versi lebih advance dari lipsum, Anda bisa menyertaakan link, list, quote, dan lainya\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/loripsum.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://loripsum.net/\",\n children: \"Loripsum.net\"\n })]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"image-placeholder\",\n children: \"Image Placeholder\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"3-picsum-photos\",\n children: \"3. Picsum Photos\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Menyediakan gambar acak atau bisa juga spesifik. Dengan ukuran yang bisa ditentukan dengan efek gambar yang bisa kita pilih juga.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/lorempicsum.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://picsum.photos/\",\n children: \"Picsum Photos\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"4-logo-ipsum\",\n children: \"4. Logo Ipsum\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Variant logo yang sangat banyak dengan banyak tipe dengan format SVG.\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/logoipsum.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://logoipsum.com/\",\n children: \"Logo Ipsum\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"5-dicebear\",\n children: \"5. DiceBear\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"DiceBar adalah placeholder Avatar dengan karakteristik terntentu yang tersedia API juga untuk diakses secara gratis.\\r\\n\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/dicebear.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://avatars.dicebear.com/\",\n children: \"DiceBear\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"6-personas\",\n children: \"6. Personas\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"A playful avatar generator for the modern age.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Placeholder avatar juga, tapi kamu bisa menggenerate avatar sesuai karakter yang kamu inginkan. Bisa memilih model rambut, warna kulit, mata dan lainya.\\r\\n\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/personas.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://personas.draftbit.com/\",\n children: \"Personas\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"7-avataaars\",\n children: \"7. Avataaars\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Masih placeholder Avatar juga, seperti halnya Personas, tapi lebih banyak variant yang bisa kamu terapkan pada avatar yang ingin kamu gunakan. Tersedia juga react library yang bisa langsung digunakan pada project reactjs.\\r\\n\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/avataaars.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://getavataaars.com/\",\n children: \"Avataaars\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"8-place-kitten\",\n children: \"8. Place Kitten\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Gambar anak2 kucing untuk placeholder image.\\r\\n\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/place-kitten.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://placekitten.com/\",\n children: \"Place Kitten\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"9-cupcake-ipsum\",\n children: \"9. CupCake Ipsum\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Placeholder gambar kue.\\r\\n\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/cupcake-ipsum.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"http://www.cupcakeipsum.com/\",\n children: \"CupCake Ipsum\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"10-robohash\",\n children: \"10. RoboHash\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Placeholder gambar robot\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/robohash.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://robohash.org/\",\n children: \"RoboHash\"\n })]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"json\",\n children: \"JSON\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"11-random-user\",\n children: \"11. Random User\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Open Source API untuk menggenerate data user\\r\\n\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/randomuser.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"https://randomuser.me/\",\n children: \"Random User\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"12-json-placeholder\",\n children: \"12. JSON Placeholder\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"REST API yang bisa digunakan dimanapun dengan berbagai macam fake data.\", _jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/json-placeholder.png\",\n alt: \"\"\n }), _jsx(_components.a, {\n href: \"http://jsonplaceholder.typicode.com/\",\n children: \"JSON Placeholder\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"13-fake-json\",\n children: \"13. Fake JSON\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Gratis 1000 request JSON data dengan advance editor.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.img, {\n src: \"https://api.dankedev.com/assets/articles/fake-json.png\",\n alt: \"\"\n }), \"\\r\\n\", _jsx(_components.a, {\n href: \"https://fakejson.com/\",\n children: \"Fake JSON\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://javascript.plainenglish.io/15-useful-placeholder-tools-for-designers-and-developers-deea3c410b6b\",\n children: \"Sumber Artikel\"\n })\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}}

Ketika membangun sebuah aplikasi web atau mobile, atau mungkin bagi Anda yang berprofesi sebagai designer. Pasti sering membutuhkan contoh konten yang bisa disematkan di project kita sebagai contoh penerapan isi konten pada aplikasi atau project kita. Misalnya saja konten text, logo, atau gambar-gambar yang spesifik atau json dan juga lainya.

Untuk memudahkan disini saya menyusun beberapa contoh placeholder yang bisa kita gunakan.

Text Placeholder

1. lipsum

Standard dummy text generator yang biasa digunakan oleh industri.

lipsum

2. Loripsum.net

Versi lebih advance dari lipsum, Anda bisa menyertaakan link, list, quote, dan lainya

Loripsum.net

Image Placeholder

3. Picsum Photos

Menyediakan gambar acak atau bisa juga spesifik. Dengan ukuran yang bisa ditentukan dengan efek gambar yang bisa kita pilih juga.

Picsum Photos

4. Logo Ipsum

Variant logo yang sangat banyak dengan banyak tipe dengan format SVG.

Logo Ipsum

5. DiceBear

DiceBar adalah placeholder Avatar dengan karakteristik terntentu yang tersedia API juga untuk diakses secara gratis.

DiceBear

6. Personas

A playful avatar generator for the modern age.

Placeholder avatar juga, tapi kamu bisa menggenerate avatar sesuai karakter yang kamu inginkan. Bisa memilih model rambut, warna kulit, mata dan lainya.

Personas

7. Avataaars

Masih placeholder Avatar juga, seperti halnya Personas, tapi lebih banyak variant yang bisa kamu terapkan pada avatar yang ingin kamu gunakan. Tersedia juga react library yang bisa langsung digunakan pada project reactjs.

Avataaars

8. Place Kitten

Gambar anak2 kucing untuk placeholder image.

Place Kitten

9. CupCake Ipsum

Placeholder gambar kue.

CupCake Ipsum

10. RoboHash

Placeholder gambar robot

RoboHash

JSON

11. Random User

Open Source API untuk menggenerate data user

Random User

12. JSON Placeholder

REST API yang bisa digunakan dimanapun dengan berbagai macam fake data.

JSON Placeholder

13. Fake JSON

Gratis 1000 request JSON data dengan advance editor.

Fake JSON

Sumber Artikel

WebDev