Proses kami membuat desain Landing Page untuk Xivis

Dwinawan
Dwinawan
Jan 15 · 5 min read

Obrolan awal dengan klien

Xivis adalah Software Agency yang berasal dari Argentina. Mereka menghubungi Paperpillar untuk memperbarui desain landing page dari Xivis.

Di project ini kami berkomunikasi dengan Emilio, CEO dari Xivis. Pada desain landing page yang baru ini Ia ingin menonjolkan 3 layanan utama dari Xivis, hasil pekerjaan mereka, dan juga ingin menggunakan ilustrasi pada landing page mereka.

Setelah ngobrol dengan Emilio, kami mendapatkan gambaran besar project ini. Dan kami siap memulai nya…


Membahas cara bekerja

Sebelum memulai mendesain, kami berdiskusi mengenai workflow (cara bekerja) di project ini.

Salah satu ide workflow nya adalah membuat wireframe (konsep layout) untuk semua halaman, di-ubah sedikit demi sedikit dan setelah wireframe nya benar benar oke baru dilanjutkan ke tahap selanjutnya.

Tetapi sepertinya hal tersebut akan memakan waktu, karena design yang dikerjakan adalah landing page yang fungsi utama nya menampilkan informasi yang tidak terlalu banyak.

Beda hal nya kalau yang dikerjakan adalah website yang memiliki banyak fitur dan interaksi yang kompleks.

Akhirnya kami memutuskan untuk melewatkan proses wireframe, dan langsung menuju high fidelity design. Workflow ini dirasa tepat karena informasi di setiap halaman tidak terlalu banyak.

Pahami masalah dan kebutuhan nya terlebih dahulu, setelah itu baru menentukan cara kerja nya. Terkadang kita bisa melewati beberapa prosesdur, semua tergantung dari masalah dan kebutuhan nya


Kami memulai dari Homepage

Akhirnya kami siap untuk memulai, halaman pertama yang akan dikerjakan adalah homepage.

Kami berdiskusi mengenai apa saja yang perlu ditampilkan di homepage. Setelah berdiskusi, kami lalu membuat beberapa eksplorasi layout untuk homepage, dan dibawah ini adalah layout yang terpilih


Membuat Ilustrasi

Setelah menyelesaikan layout, selanjutnya kami membuat ilustrasi. Ada beberapa tempat yang membutuhkan ilustrasi. Kami memulai dari ilustrasi pada bagian atas.

Di bagian atas, Emilio menginginkan ilustrasi yang menggambarkan proses kerja Xivis. Dimulai dari mendefinisikan kebutuhan, membangun software dan melakukan scale up atau peningkatan software.

Karena merasa yakin, kami pun langsung membuat ilustrasi nya tanpa melalui proses diskusi, dimana itu merupakan suatu kesalahan. Berikut adalah hasil ilustrasi nya

Setelah kami menunjukkan hasil ilustrasinya, Tim kreatif dari Xivis merasa bahwa ilustrasi nya kurang menunjukkan proses, sehingga ilustrasinya perlu diganti.

Karena merasa yakin, kami pun langsung membuat ilustrasi nya tanpa melalui proses diskusi, dimana itu merupakan suatu kesalahan


Membuat ilustrasi yang baru

Kami pun memulai diskusi untuk pembuatan ilustrasi yang baru. Konsep ilustrasi yang baru ini adalah membagi ilustrasi menjadi 3 bagian, sehingga kesan proses kerja nya bisa terasa.

Dan berikut adalah beberapa sketsa untuk ilustrasi yang baru

Setelah kami menunjukkan hasil sketsa ilustrasi, klien menyukai konsep nya, dan kami pun melanjutkan ke proses pembuatan ilustrasi high fidelity.

Boleh boleh saja melewati beberapa prosedur atau tahapan, tapi jangan pernah melewatkan tahapan diskusi dengan klien


Menyelesaikan ilustrasi high fidelity

Berikut adalah ilustrasi ilustrasi high fidelity yang akan digunakan pada bagian atas website

Dan berikut setelah di gabungkan dengan layout website


Menyelesaikan homepage

Setelah melakukan diskusi berkali kali, melakukan iterasi design berkali kali dan menyelesaikan ilustrasi di beberapa bagian homepage, akhirnya kami menyelesaikan design untuk halaman homepage. Dan design ini akan menjadi landasan untuk halaman halaman lain nya


Dan berikut adalah beberapa design untuk halaman lain nya…

Halaman Service


Halaman Works


Halaman Culture


Beberapa hal yang bisa menjadi catatan

  • Sebelum memulai project, ngobrol intens dengan klien agar mengetahui gambaran besar dan goal dari project
  • Bicarakan mengenai cara kita akan bekerja di project ini, pastikan klien nyaman dengan hal cara kita bekerja atau proses kreatif kita
  • Jangan melewatkan tahap diskusi dengan klien
  • Selalu informasikan kepada klien apa yang akan kita lakukan untuk menghindari kesalahpahaman

Apa kata Xivis tentang bekerja dengan Paperpillar?

“Project was great. We felt Paperpillar’s work was high quality and quick. Will certainly consider working with you again in the near furture”

Emilio Silva — CEO Xivis

________________________

Visit the website 👉 xivis.com


Tertarik bekerja dengan Paperpillar?

Silahkan mengirimkan email ke hello@paperpillar.com
Kami tunggu email dari kalian 😉

Paperpillar

Story about paperpillar

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Have a question? find me on twitter.com/dwinawan_

Paperpillar

Story about paperpillar

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade