Proses kami membuat desain Landing Page untuk Xivis

Dwinawan
Paperpillar
Published in
5 min readJan 15, 2020

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 😉

--

--

Dwinawan
Paperpillar

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