Tips untuk Meningkatkan Handoff Desain Situs Web Anda

Dalam proses membangun website ada beberapa tahapan yang dilakukan. Jika kita menyederhanakannya dan melihat situs web standar, tahapannya adalah:

1. Kebutuhan - Seseorang membutuhkan situs web karena satu dan lain alasan.
2. Brainstorming - Memutuskan struktur umum, tujuan, dan lainnya.
3. Proposal - Klien menemukan freelancer atau agensi untuk membangun situs.
4. Konten - Artikel, gambar, dll., Apa pun yang dapat ditemukan di halaman arahan, peta situs, dll.
5. Desain - Seseorang / tim mengerjakan desain dan tata letak berdasarkan konten.
6. Pengembangan - Seseorang / tim mengembangkan bagian fungsional situs berdasarkan desain.

Sering kali, Anda dapat mencampurnya di sini. Anda dapat mengubah urutan hal-hal yang dilakukan, dan tim tetap dapat memberikan hasil yang bagus. Namun, ini bisa jadi sulit ketika Anda memiliki orang-orang dari agensi yang berbeda yang mengerjakan proyek yang sama, yang merupakan alasan utama untuk memilih agensi serba guna yang dapat menangani semuanya.

Untuk artikel ini, kami mengambilnya dari langkah 5, Desain ke langkah 6, Pengembangan. Di sinilah segala sesuatunya bisa salah dengan memperlambat pengembangan dan mengacaukan apa yang sebelumnya telah diputuskan dalam proses perencanaan.

Hal-Hal yang Harus Dipertimbangkan oleh Desainer

“Haruskah desainer tahu cara membuat kode?” adalah pertanyaan umum dan itu pertanyaan yang sangat masuk akal. Jika seorang desainer memahami kode di baliknya dan idealnya mereka dapat memproduksinya (sampai batas tertentu), maka dia dapat membantu seluruh tim untuk menyelesaikan proyek lebih cepat.

Berikut beberapa alasan mengapa hal ini terjadi:

1 - Pada akhirnya, semuanya berakhir di browser.

Setiap desain yang Anda buat di Figma, Adobe, dll akan muncul di browser. Semua Browser menggunakan jenis bahasa pemrograman yang dikenal sebagai HTML / CSS untuk merender halaman. Jika Javascript digunakan, Anda dapat membuat desain Anda menjadi interaktif.

Catatan penting untuk diambil dari ini adalah bahwa desain apa pun harus dapat dilakukan dalam HTML / CSS. Banyak pengembang front-end berbakat dapat mengimplementasikan hampir semua hal selama teknologinya memungkinkan. Tapi ingat, - ini tidak selalu tentang "Bisakah Anda melakukannya?", Ini tentang "Bisakah Anda melakukannya dengan baik dan membuatnya dapat dipelihara".

2 - Konsistensi

Dapat dipelihara adalah rahasia proyek yang sukses. Anda tidak ingin menghabiskan waktu berjam-jam untuk mengutak-atik elemen situs yang ada dan menambahkan yang baru karena basis kodenya berantakan. Terkadang desain yang sangat rumit dengan sedikit atau tidak ada komponen yang dapat digunakan kembali berakhir dengan berantakan.

Beberapa tip desainer web:

• Desain dengan mempertimbangkan komponen. Kebanyakan alat sekarang menyediakan fungsionalitas ini (Figma, Adobe XD, Sketch). Paksakan diri Anda untuk menggunakannya lebih sering hingga tidak lagi mengganggu.
• Sejajarkan elemen dengan baik. Bagian yang serupa harus memiliki jarak yang sama antara satu sama lain. 80px adalah pemisahan yang baik untuk dipertahankan, misalnya. Jangan secara acak memberi spasi pada bagian menggunakan 80 di sini, 86 di sana, 92 di bagian ketiga dan 78 di sisi lain. Jaga agar tetap rapi dan rapi.
• Gunakan kisi! Semua alat menyediakan sistem grid. Idealnya gunakan kisi a12 kolom.
• Pamerkan desain Anda di layar lebar (1920px atau lebih). Ini membantu para pengembang mengetahui bagaimana setiap bagian dan latar belakang mereka bekerja.

3 - Berat situs

Kita semua menginginkan situs web yang cepat, bukan? Perancang juga bagian dari ini. Pertimbangkan ini: Situs web dengan 8 gambar beresolusi tinggi besar, empat video, dan elemen animasi. . Semoga berhasil mengoptimalkan ini tepat waktu. Meskipun dapat dilakukan, diperlukan waktu pengembangan dan teknik tambahan untuk memuat gambar dan video secara lambat, mengoptimalkan media saat diunggah, mendukung format file gambar yang lebih baik, dan menambahkan pendekatan animasi cerdas untuk kinerja tinggi ..

Jika pengembang tidak terlalu berpengalaman atau tidak khawatir tentang kecepatan, situs web Anda bisa menjadi sangat lamban pada smartphone dan laptop tingkat rendah hingga menengah.

Bagaimana Membantu Pengembang?

Sebagai seorang desainer, salah satu tujuan Anda yang perlu diingat adalah membuat pengembangan lebih mudah dan lebih cepat dengan tetap mempertahankan tampilan dan nuansa situs.

Anda harus mempertimbangkan apa yang mudah dilakukan di web.

• Kotak - Semuanya kotak. Anda bisa membulatkan beberapa sudut, ya, Anda bisa membuat elips (yang ditentukan dalam kotak) dan banyak lagi. Namun, ketika Anda menggunakan bentuk yang lebih kompleks yang berinteraksi dengan tata letak, maka segalanya menjadi sulit.
• Membuat animasi posisi yang akurat itu sulit - Bayangkan Anda ingin mengeklik gambar, lalu memindahkannya ke sisi lain teks? Kedengarannya "mudah" tapi sebenarnya tidak. Posisi gambar akan dipindahkan harus tetap relatif terhadap penampung situs, yang berubah berdasarkan area pandang dan banyak lagi. Lalu apa yang terjadi jika gambarnya lebih besar?
• Dimensi kotak animasi memengaruhi tata letak. Ini mengacu pada setiap perubahan tentang bagaimana elemen diurutkan selama animasi. Ini bisa menjadi sangat berat pada browser dan sering kali akan mengakibatkan kelambatan yang sangat besar.

Pertimbangkan konten yang berbeda!

Bagaimana tampilan desain dengan 2x teks? Atau sebagai gambar potret bukan gambar lanskap? Anda tidak pernah tahu apa yang akan diunggah oleh tim editorial. Haruskah ada batasan seperti rasio aspek atau bahkan tepi gambar? Jika Anda bisa, tunjukkan ini dalam desain.

Sediakan desain Anda dalam alat seperti Zeplin

Kebanyakan alat desain seperti Figma atau Adobe XD memiliki cara untuk "berbagi" desain dengan pengembang. Dari sana, tim front-end dapat memeriksa warna, pengaturan tipografi, jarak dan properti visual lainnya dari lapisan, yang akan memungkinkan mereka untuk melekat erat pada desain.

Berikan aset lain seperti font atau video

Jika Anda telah menggunakan font tertentu di situs, berikan kepada pengembangnya. Jika berlisensi dan dapat diakses melalui URL tertentu, pastikan untuk membagikannya juga. Penting bagi pengembang untuk bekerja dengan font yang benar sejak hari pertama. Jika ada video - pastikan untuk membagikannya juga! Apakah videonya ada di YouTube, Vimeo, atau dihosting sendiri?

Jangan pilih "pixel perfect"

Gagasan untuk menjaga tampilan akhir situs tetap sama dengan desainnya adalah cara mudah untuk membuat tim pengembang membenci Anda dan dapat menghancurkan peluang untuk ditayangkan tepat waktu. Di hampir setiap kasus, desainnya TIDAK akan sempurna. Tidak mungkin untuk 100% yakin bahwa sebelum setiap tombol Anda memiliki jarak tepat 18px? Dan bukan 19px? Atau bahwa setiap judul berukuran 38px dan bukan 37px? Atau mungkin setiap batas #ddd dan tidak ada yang hitam tetapi memiliki 15% opasitas?

Pengembang mengumpulkan kesalahan kecil seperti ini di sana-sini untuk menjaga konsistensi di seluruh situs. Mereka membangun komponen yang mengikuti aturan yang sama. Selama tidak ada perubahan yang jelas disengaja dalam kasus tertentu, seharusnya tidak ada alasan mengapa suatu elemen tidak boleh sama di seluruh papan.

Pada akhirnya, situs web yang diberi kode harus mengikuti tampilan dan nuansa desain secara umum.

Tinggalkan komentar di desain

Jika Anda ingin elemen tertentu menjadi interaktif seperti tab, akordeon, penggeser, dan sejenisnya, luangkan beberapa detik untuk menuliskan cara kerjanya di desktop, seluler, dan apa yang dapat diklik, jika ditukar.

Berpikirlah seperti seorang pengguna

Setelah selesai, berhentilah sejenak dan bayangkan Anda sedang menggunakan situs tersebut. Bacalah dari atas, gulir ke bawah, klik di suatu tempat untuk melihat lebih banyak. Apakah ada sesuatu yang mungkin hilang dari alur kerja? Apakah ada pandangan dari elemen tertentu yang berubah pada interaksi pengguna? Jika itu benar dan tidak ada desain, maka Anda meninggalkan pengembang Anda untuk mengetahuinya, yang menambah tekanan pada pekerjaan .. Jika tenggat waktu ketat, Anda dapat membagikan file umum dengan tim Anda dan memberi tahu mereka bahwa a beberapa penayangan "negara bagian" akan datang (pastikan untuk menyebutkan yang mana).

Tampilan responsif

Mengerikan untuk mendesain 15 halaman di Desktop dan kemudian membuat versi seluler. Bahkan lebih menjengkelkan untuk melakukan versi tablet yang sedikit berbeda di atas itu. Itulah sebabnya beberapa desainer mengabaikan penambahannya. Namun, itu berarti pengembang harus melakukannya dalam kode. Dan membuat keputusan karena itu. Jika Anda melihat elemen yang rumit, idealnya tunjukkan tampilan tabletnya meskipun Anda tidak melakukan keseluruhan situs.

Singkatnya

Perancang dapat membuat kehidupan pengembang menjadi mimpi buruk atau pengalaman yang sangat bagus. Kunci untuk mencapai yang terakhir adalah untuk lebih memahami teknologi yang digunakan, HTMl / CSS, elemen interaktif mana yang dapat dilakukan, dll.

Jika Anda beruntung berada di sekitar pengembang dan Anda khawatir tentang elemen tertentu, hubungi mereka untuk melihat semuanya. Mereka pasti akan memberi Anda petunjuk tentang apa yang rumit dan apa yang mudah.