Safitriann Portofolio Website

Safitriann Portofolio Website

UI/UX Designer, Web Developer, Content Writer

UI/UX Designer, Web Developer, Content Writer

Apr 28, 2023

Apr 28, 2023

Projek ini merupakan kebimbangan dari seorang pekerja yang ingin memiliki penghasilan tambahan untuk memenuhi kebutuhan sehari-hari, dengan segala pertimbangan waktu dan situasi, maka ia memutuskan untuk fokus mendapatkan proyek pertamanya sebagai freelancer UI/UX Designer.

Website ini diharapkan dapat mengubah portfolio agar terlihat lebih profesional dalam menunjukkan skill, kualitas diri, juga proyek yang telah dikerjakan sebelumnya. Website ini bertujuan untuk memudahkan calon klien atau recruiter dalam mengetahui skill persona, sehingga mereka tertarik dan merekrutnya sebagai UI/UX Designer atau web designer dalam proyek yang akan dijalankan.


Timeline Pengerjaan


Research

Dimulai dengan meresearch beberapa contoh website portfolio dari beberapa website yang dipilih, juga dengan mengikuti kelas UI/UX pembuatan website portfolio guna mengetahui hal-hal yang perlu diperhatikan saat akan membuat desain tersebut. Ditemukan beberapa kebutuhan user dalam pembuatan website portfolio sebagai berikut:   

User Tasks

  • Dapat mengenal freelancer tersebut

  • Dapat melihat proyek yang pernah dikerjakan

  • Dapat membaca details proyek yang dimiliki

  • Dapat menghubungi freelancer dengan mudah

  • Dapat melihat gallery desain yang telah dikerjakan

Key Points

  • Professional

  • Details

  • Minimalist

  • Cheerful

  • Study Case

Pages

  • Landing Page

  • Project Details Page

  • Gallery Page

  • About Page

  • Contact Page

Dari hasil research ini, bisa dilihat kebutuhan user dalam pembuatan website dari setiap section page yang diinginkan. Kemudian dapat dilanjutkan dengan tahap solusi desain, yang mana desain website ini dibuat berdasarkan lingkup/scope yang telah dijelaskan beserta tema dan page yang dibutuhkan. Sehingga, saat melakukan proses desain interface, desain page yang dibuat tetap pada scopenya dan dapat diselesaikan tepat waktu sesuai dengan timeline yang diberikan.


Wireframe 

Pada tahap ini, cukup dengan membuat gambaran dasar mengenai section dan kebutuhan user yang akan ditampilkan di setiap page dengan dibuat secara langsung (digambar dengan pena/pensil) atau dengan menggunakan tools pembuatan wireframe. Dalam proyek ini, wireframe dibuat dengan menggunakan tools whimsical.


Design Interface

Tahap ini adalah tahap yang paling menyenangkan, membuat desain tampilan website. Dimulai dengan pembuatan desain page yang paling mudah hingga desain page yang kompleks/beragam.


Web Development

Ini adalah tahap yang rumit sekaligus mengasyikkan, banyak hal-hal baru dan perlu dipelajari dari segi editing desain, input aset, layouting, animation, CMS, dll. Hingga tak terasa telah menghabiskan banyak waktu berhari-hari untuk sekedar mempelajarinya sampai dapat mempraktekkannya.

Dalam tahap ini, tools yang digunakan adalah framer. Sebuah online tools pembuatan website gratis dan mudah untuk dipelajari tanpa menggunakan coding dengan tampilan dan fungsi yang mirip/familiar bagi pengguna Figma.


Content Writing

Hal yg sangat penting dan krusial yg kadang suka terlewat adalah isi konten yg akan ditampilkan. Saat proses pembuatan desain, yang didahulukan hanya teks judul/utama, subkategori setiap section dan hanya memberikan lorem ipsum untuk isi konten di setiap sectionnya. 

Tahap ini menjadi salah satu hal yang membuat proses pembuatan website portfolio berlangsung lama. Kendala yang dihadapi adalah dalam mempersiapkan dan melengkapi kata-kata dari setiap halaman juga penulisan artikel dari beberapa proyek yang akan ditampilkan.

Dari proyek ini banyak pelajaran yang didapat, pentingnya disiplin waktu pengerjaan agar proyek dapat diselesaikan lebih cepat, dan perlu memperhatikan lebih detail mengenai konsistensi pemberian aset dan warna.

Projek ini merupakan kebimbangan dari seorang pekerja yang ingin memiliki penghasilan tambahan untuk memenuhi kebutuhan sehari-hari, dengan segala pertimbangan waktu dan situasi, maka ia memutuskan untuk fokus mendapatkan proyek pertamanya sebagai freelancer UI/UX Designer.

Website ini diharapkan dapat mengubah portfolio agar terlihat lebih profesional dalam menunjukkan skill, kualitas diri, juga proyek yang telah dikerjakan sebelumnya. Website ini bertujuan untuk memudahkan calon klien atau recruiter dalam mengetahui skill persona, sehingga mereka tertarik dan merekrutnya sebagai UI/UX Designer atau web designer dalam proyek yang akan dijalankan.


Timeline Pengerjaan


Research

Dimulai dengan meresearch beberapa contoh website portfolio dari beberapa website yang dipilih, juga dengan mengikuti kelas UI/UX pembuatan website portfolio guna mengetahui hal-hal yang perlu diperhatikan saat akan membuat desain tersebut. Ditemukan beberapa kebutuhan user dalam pembuatan website portfolio sebagai berikut:   

User Tasks

  • Dapat mengenal freelancer tersebut

  • Dapat melihat proyek yang pernah dikerjakan

  • Dapat membaca details proyek yang dimiliki

  • Dapat menghubungi freelancer dengan mudah

  • Dapat melihat gallery desain yang telah dikerjakan

Key Points

  • Professional

  • Details

  • Minimalist

  • Cheerful

  • Study Case

Pages

  • Landing Page

  • Project Details Page

  • Gallery Page

  • About Page

  • Contact Page

Dari hasil research ini, bisa dilihat kebutuhan user dalam pembuatan website dari setiap section page yang diinginkan. Kemudian dapat dilanjutkan dengan tahap solusi desain, yang mana desain website ini dibuat berdasarkan lingkup/scope yang telah dijelaskan beserta tema dan page yang dibutuhkan. Sehingga, saat melakukan proses desain interface, desain page yang dibuat tetap pada scopenya dan dapat diselesaikan tepat waktu sesuai dengan timeline yang diberikan.


Wireframe 

Pada tahap ini, cukup dengan membuat gambaran dasar mengenai section dan kebutuhan user yang akan ditampilkan di setiap page dengan dibuat secara langsung (digambar dengan pena/pensil) atau dengan menggunakan tools pembuatan wireframe. Dalam proyek ini, wireframe dibuat dengan menggunakan tools whimsical.


Design Interface

Tahap ini adalah tahap yang paling menyenangkan, membuat desain tampilan website. Dimulai dengan pembuatan desain page yang paling mudah hingga desain page yang kompleks/beragam.


Web Development

Ini adalah tahap yang rumit sekaligus mengasyikkan, banyak hal-hal baru dan perlu dipelajari dari segi editing desain, input aset, layouting, animation, CMS, dll. Hingga tak terasa telah menghabiskan banyak waktu berhari-hari untuk sekedar mempelajarinya sampai dapat mempraktekkannya.

Dalam tahap ini, tools yang digunakan adalah framer. Sebuah online tools pembuatan website gratis dan mudah untuk dipelajari tanpa menggunakan coding dengan tampilan dan fungsi yang mirip/familiar bagi pengguna Figma.


Content Writing

Hal yg sangat penting dan krusial yg kadang suka terlewat adalah isi konten yg akan ditampilkan. Saat proses pembuatan desain, yang didahulukan hanya teks judul/utama, subkategori setiap section dan hanya memberikan lorem ipsum untuk isi konten di setiap sectionnya. 

Tahap ini menjadi salah satu hal yang membuat proses pembuatan website portfolio berlangsung lama. Kendala yang dihadapi adalah dalam mempersiapkan dan melengkapi kata-kata dari setiap halaman juga penulisan artikel dari beberapa proyek yang akan ditampilkan.

Dari proyek ini banyak pelajaran yang didapat, pentingnya disiplin waktu pengerjaan agar proyek dapat diselesaikan lebih cepat, dan perlu memperhatikan lebih detail mengenai konsistensi pemberian aset dan warna.

Let's Work Together!

Let's Work Together!

If we can't keep up with the times
we can only feel left behind

If we can't keep up with the times
we can only feel left behind

Hire Me