School of Information Systems

Bagaimana Mendesain Ulang Situs Web Perusahaan Dalam 2 Jam (Bagian 4)

1 Jam pertama  dan 1 Jam kedua

Memilih Gambar Hero Banner Bagian I (30 menit)

Pindah ke desain halaman yang sebenarnya, saya menghabiskan 30 menit (15 menit dari setiap jam) untuk mencari gambar hero banner yang sempurna. Yang bisa saya selesaikan di babak pertama ini hanyalah banner. Tapi saya tidak punya waktu untuk panik. Dari pengalaman saya, saya tahu bahwa panik tidak pernah membantu saya. Faktanya, itu selalu memperburuk keadaan. Oleh karena itu, saya perlu berimprovisasi, beradaptasi, dan mengatasi kemunduran awal ini. Saya memilih bidikan bawah air dan mendapatkan beberapa gambar Freepik tentang merpati terbang. Sisi baiknya dari investasi satu jam ini adalah saya mendapat cerita yang bagus secara tidak sengaja. Dapat dikatakan bahwa merpati yang terbang di bawah air adalah metafora visual untuk mengatasi kesulitan, bahkan dalam situasi yang paling sulit sekalipun.

1 Jam Kedua

Bagian Proyek Fitur (20 menit)

Saya perlu mengalokasikan waktu untuk sisa garis besar. Jadi, untuk bagian proyek fitur, saya menggunakan bagian kiri dan kanan standar, dengan gambar produk fokus di sebelah kanan dan salinan detail pendek di sebelah kiri. Saya biasanya ingin memiliki ruang putih yang cukup di antara konten visual. Ini memberi konten ruang bernapas dan menciptakan fokus pada apa yang penting.

Tips: Selalu gunakan kisi 8 titik sebagai panduan praktis untuk alur kerja cepat jika Anda ingin membuat jarak yang sesuai di antara elemen desain.

Untuk salinannya, saya menggunakan teks yang merinci fitur utama produk. Hal utama di sini adalah tidak membuatnya terdengar seperti promosi penjualan; melainkan untuk menunjukkan kebanggaan kami telah menciptakan mereka.

Layout for the first featured product.

Tujuan kami adalah menjadi pengrajin produk digital yang bermartabat dan bangga, dengan produk kami ditampilkan sebagai lencana kehormatan. Saya mengadopsi pendekatan serupa untuk Aplikasi Learn Python kami, tetapi menukar penempatan gambar dan teks. Bahasa visual mulai membuahkan hasil saat saya bergerak, dan kecepatan desain saya mulai meningkat.

Layout for the second featured product: Learn Python app with a reverse layout.

Tempatkan sisa produk dan footer (20 menit)

Berikutnya datang, Kompilator online dan Datamentor. Saya ingin menempatkan bagian produk individual kami dalam bentuk kotak. Karena hanya ada dua produk lagi yang ingin kami pamerkan, saya memilikinya dalam tata letak dua kolom.

All remaining products showcase using a grid layout

Tata letak ini memberi saya fleksibilitas untuk menambahkan lebih banyak produk saat dibuat nanti. Katakanlah jika kita menskalakan dan memiliki 10 produk lagi, saya hanya bisa menampilkan kisi 2×2 dan menambahkan tombol “Lihat semua produk” di bagian akhir.

How the grid layout can be expanded later by adding a “View all products” button in the future.

Saya kemudian membungkus semuanya dengan footer dasar. Saya baru saja melewati yang satu ini dengan formulir kontak dasar dan desain info kontak.

Final design untuk footer.

Footer design that was implemented.

5 menit terakhir dan desain seluler

Saya masih punya 5 menit lagi tapi sejujurnya, rencana dua jam itu gagal. Ini karena meskipun saya menyelesaikan tampilan desktop, saya tidak dapat mengelola tampilan seluler. Itu berarti tidak ada desain mobile-first juga. Bagaimanapun, saya memberikan desain kepada pengembang dan mulai mengerjakan desain seluler secara paralel yang memakan waktu sekitar 30 menit.

The Real Talk

Sebagai desainer, waktu tidak selalu berpihak pada kita. Sangat menggoda untuk menyempurnakan bahkan piksel terkecil. Kami tidak ingin memiliki hambatan kreatif. Namun, kita juga perlu menghargai waktu orang lain, yang berarti membuat yang terbaik dari apa yang kita miliki. Ini terutama berlaku untuk startup. Hal yang berhasil bagi saya adalah kembali ke dasar selama kerangka waktu yang ketat ini. Kami tidak dapat berkompromi pada kualitas – dan dasar-dasarnya selalu berhasil dalam situasi ini. Seperti yang mereka katakan “Kuasai dasar-dasarnya sebelum Anda menghancurkannya”. Ini sangat benar dan meskipun tidak sempurna, saya cukup senang dengan hasilnya (atau begitulah yang saya katakan untuk menghibur diri sendiri mengetahui bahwa kami, desainer, tidak pernah senang dengan pekerjaan kami).

Key Takeaways

  • Memiliki proses desain yang fleksibel. Kami terjebak dalam sprint dan proses desain kami sehingga kami tidak ingin melihatnya dengan cara lain. Proses desain kami harus selalu fleksibel sesuai dengan waktu dan sumber daya yang kami miliki.
  • Terkadang tindakan terbaik adalah menetapkan tantangan untuk diri sendiri dan mencoba menguji batas Anda. Ini adalah latihan yang menyenangkan bagi saya untuk melihat apakah saya bisa melakukan ini atau tidak.
  • Selalu ingat desain adalah proses berulang. Meskipun Anda tidak mampu menambahkan barang sekarang, Anda harus mempertimbangkan skalabilitas untuk menambahkannya nanti. Jadi, berpikir ke depan tentang saat desain dapat berkembang dan mengevaluasi desain Anda sekarang membantu.

References:

Nuril Kusumawardani