Website portofolio kreatif: buku dongeng peri saya

Bagaimana membangun website portofolio kreatif yang menunjukkan siapa Anda dan tetap terlihat profesional? Saya baru lulus dari jurusan Digital Marketing, dan saya ingin portofolio pertama saya lebih dari sekadar daftar proyek. Jadi saya membangunnya sebagai buku cerita interaktif, tempat seorang peri kecil memandu pengunjung melewati karya saya.

Untuk siapa tulisan ini: lulusan baru, pekerja pemasaran, dan kreator yang sedang membangun portofolio pertama dan ingin portofolionya terasa seperti dirinya tanpa kehilangan kejelasan.

Bedah portofolio saya ini terdiri dari tujuh bagian. Tiap bagian dimulai dari apa yang saya lakukan dan alasannya, lalu apa yang bisa Anda tiru:

• Tujuh pilihan, dari gagasan dan identitas visual sampai animasi, kegunaan, bukti, dan pertimbangannya.
• Tes reviewer 30 detik untuk dicoba di situs Anda sendiri, serta kesalahan portofolio yang dihindari pilihan-pilihan ini.
• Biaya tiap pilihan, dalam bobot dan perawatan, agar Anda bisa menghitungnya sebelum menirunya.

Mengapa saya membuat sesuatu yang berbeda: portofolio perlu mencerminkan karakter

Sebagai lulusan baru, saya tahu saya menginginkan portofolio yang lebih dari sekadar daftar proyek dan pencapaian. Saya ingin dunia kecil yang mencerminkan siapa saya. Saya suka kreativitas, bercerita, dan mewujudkan ide-ide yang tidak biasa, jadi templat tradisional tidak pernah terasa cocok. Saya ingin sesuatu yang benar-benar milik saya.

Cara menirunya. Mulailah dari hal yang Anda suka buat, bukan dari templat. Reviewer tidak membaca setiap kata. Nielsen Norman Group mencatat bahwa sangat jarang manajer perekrutan meluangkan waktu membaca seluruh portofolio Anda kata demi kata, dan Designlab memperingatkan bahwa Anda hanya punya beberapa detik untuk terhubung dengan pengunjung sebelum mereka menutup situs.

Karakter adalah yang membuat orang berhenti dalam detik-detik itu. Portofolio pemasaran membuat klaim sebelum menunjukkan satu pun contoh: orang ini bisa membuat sebuah merek terasa seperti seseorang. Jika halaman di sekitar contoh hanyalah templat netral, klaim itu tidak punya bukti. Beranda saya memuat satu kalimat tentang ini: “Pemasaran bukan sekadar bercerita. Pemasaran membuat orang merasakannya.” Panduan portofolio dari Shopify menempatkan identitas merek di urutan pertama: warna, jenis huruf, dan gambar membantu menentukan nada situs, dan gaya bahasa sama pentingnya.

Layar pertama saya melakukan ini sebelum penjelasan apa pun. Layar itu menampilkan nama saya dalam huruf sambung dengan huruf N berwarna mawar yang lebih pekat, baris “Marketing · Creative · Da Nang → United States”, dan dua tombol, View Work dan Get in Touch.

Menemukan identitas visual saya: peri, palet warna, dan tipografi

Saya selalu tertarik pada dongeng, alam, dan ilustrasi yang penuh keajaiban, jadi konsep peri terasa seperti perpanjangan alami dari kepribadian saya. Saya memilih hijau lembut, merah muda, detail bunga, dan unsur gambar tangan agar situs ini ceria tetapi tetap profesional. Saya ingin pengunjung mengenali kepribadian saya lewat desain sebelum membaca satu kata pun tentang saya.

Cara menirunya. Pilih beberapa hal yang membawa identitas Anda. Identitas saya bertumpu pada seorang peri, bingkai anggrek hijau, dan nama dalam huruf tulisan tangan. Palet dan huruf di bawah menyiapkannya, dan bagian berikutnya menghidupkannya.

Dua palet, satu rasa

Apa yang saya lakukan. Beranda dan blog saya berbagi rasa, tetapi tidak berbagi palet. Beranda adalah kertas krem (#F2EDE3) dengan merah muda, sage, hijau hutan, zaitun, cokelat, dan emas. Blog berwarna putih murni dengan segelintir warna merek. Kesan lembutnya datang dari mawar pudar (#D4A8B4) dan hijau sage (#8B9E7A) yang dipasangkan dengan hijau hutan (#4A6741), dan bingkai bunga di bagian atas dibuat dalam dua lapisan: latar kertas yang diam dan lapisan bunga terpisah yang bergerak.

Blog menjadi putih karena sebuah koreksi yang tercatat di lembar token-nya sendiri. Versi pertama memakai kertas krem, tetapi krem itu ternyata mewarnai cangkang aplikasi, bukan artikel. Diukur pada halaman artikel, lima dari lima permukaan baca bawaan berwarna putih murni. Maka kehangatan dipindahkan ke tempat yang tidak menyentuh teks bacaan: warna aksen, lencana, dan satu lapisan hangat di belakang kotak keterangan.

Huruf dipasangkan menurut tugas, teks tetap lugas

Apa yang saya lakukan. Nama di beranda disusun dengan Dancing Script, huruf N berwarna merah muda lebih lembut, dan baris di atasnya memakai huruf yang sama dalam ukuran lebih kecil. Judul bagian memakai Cormorant Garamond, label kecil memakai Caveat, dan teks antarmuka memakai Inter. Blog memisahkan tugasnya lebih ketat: Geist untuk antarmuka dan judul, Source Serif 4 untuk membaca, 20 piksel dengan jarak baris 32 dalam kolom 680 piksel.

Mengapa reviewer peduli. Huruf tulisan tangan adalah pilihan buruk untuk paragraf, sehingga ia hanya muncul di tempat halaman itu menjadi seseorang: nama dan baris di atasnya. Beranda mampu memakai empat jenis huruf karena ia sebuah poster. Blog tidak, karena orang membacanya.

Teks mengikuti pembagian yang sama. Kepala blog adalah “The Fairy’s Field Notes” di atas judul “Where Curious Ideas Grow”, yaitu sang karakter berbicara dalam dosis kecil. Bagian praktis tetap lugas: navigasi beranda berbunyi Social, Mobile, Design, SEO, Web App, Writing, About, Sign in, dan Contact, masing-masing jenis pekerjaan yang mungkin dicari manajer perekrutan, bukan teka-teki.

Cara menirunya. Beri tiap jenis huruf satu tugas dan ucapkan keras-keras: yang ini nama, yang ini bacaan. Biarkan suara Anda muncul di kepala blog dan slogan, dan jaga label navigasi cukup sederhana untuk dipindai.

Menghidupkan portofolio saya: ilustrasi, maskot, dan animasi

Saya tidak menginginkan presentasi yang statis. Saya ingin buku cerita interaktif, tempat seorang peri kecil memandu pengunjung melewati proyek-proyek saya, ilustrasi menjadi hidup, dan setiap bagian punya karakternya sendiri. Animasi dan interaksi kecil ada agar menjelajah terasa seperti pengalaman, bukan menggulir selembar CV.

Cara menirunya. Beri gerakan sebuah tugas, dan bangun sakelar matinya bersamaan. Dua bagian di bawah menunjukkan caranya.

Maskot dengan tugas, dan sakelar mati

Apa yang saya lakukan. Peri adalah hal pertama yang dianimasikan beranda. Ia ada dalam tujuh lembar sprite, satu per pose (terbang, mengepak, duduk, berpikir, senang, mengetuk, dan berbalik), masing-masing delapan bingkai. Ketujuh lembar PNG itu beratnya sedikit di atas 1 MB, dan itulah seluruh biaya sebuah maskot yang bisa bergerak.

Ia juga bereaksi pada pengunjung. Ia mengetuk saat Anda menekan, tampak senang saat Anda sampai di tautan atau tombol, dan berbalik menghadap arah geraknya. Itu tiga dari tujuh pose yang ia punya.

Ia layak berada di sana karena melakukan sesuatu. Di perangkat dengan penunjuk, ia mengikuti kursor dengan pegas teredam, sehingga ia menyusul di belakang penunjuk alih-alih langsung menempel. Di ponsel tidak ada kursor yang bisa diikuti, jadi ia ikut bergerak bersama gulir dan mampir ke judul-judul. Pose punya makna di tempat ia diletakkan: ia berpikir di samping judul SEO, duduk di samping judul About, dan senang di samping judul kontak.

Mengapa reviewer peduli. Maskot dengan tugas adalah tanda tangan sekaligus pemandu. Maskot yang ditempel di pojok hanyalah stiker. Ia muncul di judul bagian dan di tepi, tidak pernah di atas contoh karya, sehingga karya tetap menjadi pokoknya.

Sakelar mati. Gerakan adalah tempat karakter berubah menjadi risiko. Peramban bisa melaporkan apakah pengguna telah meminta perangkatnya meminimalkan gerakan yang tidak esensial, dan MDN mencatat bahwa animasi semacam itu dapat memicu rasa tidak nyaman pada orang dengan gangguan gerak vestibular. Di perangkat dengan penunjuk, beranda menyembunyikan kursor sistem, menggambar peri, dan menjaga titik kecil 15 piksel tepat di posisi penunjuk, dengan jejak percikan empat sudut di belakangnya. Jejak itu tidak berjalan bagi pengunjung yang meminta gerakan lebih sedikit, dan juga tidak di layar sentuh. Di blog, peri beristirahat di jejaknya dengan bingkai sayap pertama, dan di beranda ia dipasang tetap pada penunjuk alih-alih mengikuti dengan pegas.

Interaksi kecil mengikuti aturan yang sama. Tombol naik 2 piksel saat kursor di atasnya, lalu turun dan sedikit menggelap saat ditekan, dan satu karya terangkat saat kursor di atasnya. Buku di bawah terbuka saat Anda menyeret sampulnya atau menekan Enter, dan tombol panah membalik halamannya.

Cara menirunya. Pilih satu motif. Tentukan di mana ia muncul (judul dan tepi) dan di mana ia tidak pernah muncul (di atas contoh karya), lalu tulis versi gerakan-dikurangi bersamaan dengan efeknya.

Satu kosakata ilustrasi, dipakai ulang

Apa yang saya lakukan. Bingkai anggrek di beranda, kupu-kupu, percikan, dan sulur adalah satu kosakata. Semuanya berulang di berbagai bagian, sehingga pengunjung belajar apa yang menjadi milik situs ini setelah layar pertama. Gambar vektor dengan urat, bintik, dan bayangan menggantikan potongan raster awal yang tampak buram. Kupu-kupu tetap mengepak dan tunas tetap mekar dengan satu bunga, dan semuanya diam ketika pengunjung meminta gerakan dikurangi.

Kosakata itu merambat ke karya itu sendiri. Bab Mobile Marketing digambar sebagai buku: sampul hijau berbingkai emas dengan tanda saya yang terangkat ke halaman bab di samping mockup ponsel, dan halamannya berbalik melewati empat kanal.

Mobile
Marketing

CeraVe × Creva

Chapter II

Mobile Marketing

• I. SMS Messages
• II. MMS Rich Media
• III. Email Campaign
• IV. Push Notifications

Mengapa reviewer peduli. Designlab merekomendasikan seperangkat mockup yang konsisten yang membantu menyatukan portofolio Anda secara visual. Kosakata yang berulang melakukan tugas itu untuk seluruh halaman, dan vektor tetap tajam di ukuran apa pun sementara raster yang direntangkan tidak.

Cara menirunya. Tetapkan sekumpulan kecil bentuk dan warna, pakai ulang di setiap bagian, dan terapkan juga pada cara contoh karya Anda disajikan. Siapkan perhatian lebih besar daripada yang dibutuhkan foto stok.

Mendesain untuk manusia, bukan sekadar estetika: UX, keterbacaan, dan aksesibilitas

Tantangan terbesar adalah menyeimbangkan ilustrasi yang detail dengan pengalaman pengguna yang bersih dan profesional. Sebagai orang pemasaran, saya tahu desain yang indah tidak berarti banyak jika pengunjung tidak menemukan apa yang mereka cari. Jadi saya menjaga proyek tetap terlihat, navigasi tetap jelas, dan blog nyaman dibaca.

Cara menirunya. Inilah pemeriksaan yang saya lakukan untuk keterbacaan, aksesibilitas, dan ponsel. Di blog, kenyamanan membaca berupa kolom selebar 680 piksel dengan teks 20 piksel di atas baris 32 piksel, tinta gelap di atas putih, ukuran yang dipakai Medium untuk isi artikelnya.

Kontras yang bisa diukur

Mengapa reviewer peduli. Kontras rendah terkesan ceroboh dan melelahkan mata. Pedoman aksesibilitas web meminta rasio kontras minimal 4,5:1 untuk teks biasa. Tinta teks blog saya 15,52:1 di atas putih dan hijau untuk tombol 6,35:1. Emas dan mawar gagal sebagai huruf, pada 2,29:1 dan 2,24:1, sehingga blog hanya memakainya sebagai isian dan menyimpan kembaran yang lebih gelap untuk huruf: tinta mawar 5,56:1 dan tinta emas 6,10:1. Saya menggelapkannya sampai lolos alih-alih membuang warna-warna itu.

Cara menirunya. Pilih dulu warna identitas Anda, lalu uji tiap warna sebagai teks di latar halaman Anda. Jika sebuah warna gagal, simpan sebagai isian dan gelapkan kembarannya untuk kata-kata. Taruh kehangatan di bingkai dan biarkan teks bacaan berada di latar polos berkontras tinggi.

Gerakan, layar sentuh, dan langkah berikutnya yang jelas

Setiap efek di atas punya versi gerakan-dikurangi, dan layar sentuh mendapat jalurnya sendiri, karena ponsel tidak punya kursor untuk diikuti. Navigasi beranda diakhiri tombol Contact dan hero menawarkan Get in Touch, sehingga pengunjung yang menyukai karya tahu apa yang harus dilakukan berikutnya. Designlab menyarankan agar pengalaman seluler sederhana dan mudah dipakai dan ada ajakan bertindak yang jelas. Kontrol juga punya keadaan ditekan, bukan hanya keadaan kursor di atasnya, karena jari tidak pernah melayang di atas layar, dan kontrol yang sedang fokus mendapat garis tepi 2 piksel yang terlihat.

Tes reviewer 30 detik untuk portofolio Anda

Buka portofolio Anda di ponsel, nyalakan pengatur waktu, dan jawab ini berurutan. Ini tes yang saya pakai untuk membaca halaman seperti reviewer yang memindai, bukan standar.

1. 5 detik pertama. Bisakah Anda menyebutkan siapa ini dan jenis pekerjaan apa yang mereka lakukan? Jika perlu menggulir, layar pertama belum menjalankan tugasnya.
2. 10 detik berikutnya. Hitung karyanya. Designlab menempatkan titik ideal di 3-5 proyek, dan Nielsen Norman Group menamai langkahnya pilih 3-5 proyek sebagai studi kasus terperinci.
3. 5 detik berikutnya. Temukan cara menghubungi. Designlab menyarankan tombol “Get in touch” yang menonjol sebagai ajakan bertindak.
4. 5 detik berikutnya. Baca satu paragraf isi. Apakah teksnya minimal 4,5:1 terhadap latarnya, dan apakah panjang barisnya nyaman?
5. 5 detik terakhir. Periksa satu angka atau klaim. Apakah ada label di sebelahnya yang menyatakan apa itu dan apa yang bukan?
6. Lalu nyalakan gerakan dikurangi di pengaturan perangkat dan muat ulang. Halaman harus tetap masuk akal, dengan efek dalam keadaan diam.

Membiarkan karya berbicara sendiri: cara saya menyajikan proyek

Portofolio saya menyatukan media sosial, SEO, desain grafis, dan kampanye kreatif. Portofolio ini menunjukkan pekerjaan yang pernah saya lakukan: mengembangkan komunitas media sosial, membuat konten, dan mengerjakan proyek pemasaran. Saya percaya kreativitas harus selalu punya tujuan: desain menarik perhatian, tetapi karyalah yang menceritakan kisah sebenarnya.

Apa yang saya lakukan. Beranda menyebut lima bab (media sosial, pemasaran seluler, desain grafis, SEO, dan sebuah aplikasi web), dan karyanya hanya satu gulir dari layar pertama. Halaman yang banyak hiasan mengundang kecurigaan bahwa isinya tipis, jadi bagian bukti sengaja ditulis lugas. Di tempat angka bisa disalahartikan, halaman menjelaskannya tepat di sebelahnya: “Total akun ini adalah cuplikan, bukan hasil pribadi saya atau pertumbuhan yang dapat dikaitkan dengan saya.” Setiap kartu bab juga membawa label yang jelas di samping merek, seperti Account snapshot, Coursework atau Live product.

Mengapa reviewer peduli. Karakter menarik perhatian, dan label yang apa adanya menjaga perhatian itu tidak berubah menjadi keraguan. Reviewer yang sedang memindai bisa memercayai angka yang membawa batasnya sendiri.

Cara menirunya. Namai setiap karya menurut apa adanya dan apa yang Anda kerjakan. Taruh catatannya di sebelah angka, bukan di catatan kaki. Semakin berhias halamannya, semakin lugas klaimnya.

Apa yang dihindari pilihan-pilihan ini? Kesalahan portofolio yang umum

Setiap pilihan di atas menutup satu kesalahan yang disebut panduan portofolio.

Pertimbangan di balik keajaiban: performa dan biaya desain

Ada pertimbangan yang harus diambil. Kadang saya menyederhanakan ilustrasi, mengurangi animasi, atau memilih tata letak yang lebih mudah dibaca daripada sesuatu yang tampak lebih seru. Personal branding yang kuat bukan tentang menambahkan setiap ide kreatif. Ini tentang memilih detail yang membuat pengalamannya lebih baik.

Cara menirunya. Hitung harga tiap ide sebelum Anda mempertahankannya. Inilah harga ide-ide saya, dalam bobot dan perawatan. Dua pilihan di bawah sengaja dibuat polos: blog tetap putih, dan peri beristirahat saat pengunjung meminta gerak yang lebih sedikit.

Yang diajarkan pembuatan portofolio kepada saya tentang personal branding

Membangun portofolio ini mengajari saya bahwa personal branding adalah memahami diri sendiri dan menemukan cara kreatif untuk mengomunikasikannya. Saya tidak menyembunyikan kepribadian saya yang ceria demi terlihat profesional, karena kreativitas dan profesionalisme bisa berjalan bersama.

Yang ingin saya bagikan:

• Pilih satu karakter atau motif dan beri tugas. Maskot yang duduk di samping judul dan bereaksi pada kursor adalah sebuah sistem. Maskot yang ditempel di pojok adalah stiker.
• Biarkan karakter hidup di dalam bingkai. Jaga teks bacaan di latar polos berkontras tinggi.
• Periksa kontras sebelum jatuh cinta pada sebuah warna. Jika warna merek gagal sebagai huruf, pakai sebagai isian dan gelapkan kembarannya untuk teks.
• Bangun sakelar mati bersamaan dengan efeknya. Gerakan dikurangi dan layar sentuh juga pengunjung.
• Beri label bukti Anda dengan kata-kata sederhana. Semakin berhias halamannya, semakin lugas klaimnya.

Saya membangun portofolio bukan hanya untuk menunjukkan apa yang sudah saya kerjakan. Saya membangun dunia kecil yang menunjukkan siapa saya.

FAQ: cara membuat portofolio menonjol

Berapa banyak proyek yang sebaiknya ditampilkan website portofolio kreatif?

Lebih sedikit dari yang Anda kira. Designlab mengatakan titik ideal biasanya berada di kisaran 3-5, dan Nielsen Norman Group menyarankan 3-5 proyek sebagai studi kasus terperinci. Beranda saya menampilkan lima bab, dan masing-masing menyebut apa karyanya.

Apakah maskot atau ilustrasi akan membuat portofolio saya terlihat tidak profesional?

Tidak, bila ia punya tugas dan tidak menghalangi karya. Maskot saya muncul di judul dan tepi, tidak pernah di atas contoh karya, dan setiap efek punya versi gerakan-dikurangi. Risiko yang disebut panduan adalah dekorasi yang mengalihkan dari isi, itulah sebabnya bagian bukti dibuat lugas.

Bagaimana memilih warna untuk portofolio personal branding?

Mulailah dari identitas, karena Shopify menempatkan identitas merek di urutan pertama, lalu uji setiap warna sebagai teks. Pedoman aksesibilitas meminta minimal 4,5:1 untuk teks biasa. Warna yang gagal masih bisa dipakai sebagai isian, dengan kembaran yang lebih gelap untuk kata-kata.

Apakah reviewer akan membaca uraian saya?

Kemungkinan tidak sampai habis, jadi buat singkat dan mulai dari apa yang Anda kerjakan. Saran Shopify untuk deskripsi karya adalah buat singkat, dan seorang manajer perekrutan yang dikutip Nielsen Norman Group berkata “Jangan hanya tunjukkan produk jadinya kepada saya.”

Haruskah saya menulis tentang cara saya membangun portofolio sendiri?

Ya, jika Anda menulisnya dari pengalaman. Panduan konten bermanfaat dari Google bertanya apakah konten Anda jelas menunjukkan keahlian langsung dan kedalaman pengetahuan. Bedah situs Anda sendiri, dengan pilihan nyata dan biayanya, bersifat pengalaman langsung dari asalnya.

Jika Anda sedang merencanakan portofolio kreatif sendiri, saya harap pertimbangan di atas menghemat beberapa jalan memutar. Jika ingin melihat semuanya bersama, portofolio adalah tempat memulai, dan blog menunjukkan versi yang lebih tenang dari identitas yang sama. Anda bisa menghubungi saya lewat halaman kontak.

Ini adalah catatan orang pertama tentang situs saya sendiri, bukan standar desain. Sumber yang ditautkan menetapkan panduan kontras, gerakan dikurangi, dan portofolio; setiap klaim lain menggambarkan situs ini sebagaimana dibangun.