Panduan Desain Web untuk Pengembang

Penulis artikel, terjemahan yang kami terbitkan hari ini, mengatakan bahwa ia membuat situs web pertamanya ketika ia berusia 14 tahun, dalam bentuk proyek sekolah. Kemudian ia memiliki tugas sederhana: mengembangkan situs web yang berisi beberapa teks, gambar, dan tabel. Biasanya, dia berhubungan dengan proyek sekolah dengan cara ini: pada awalnya dia lupa tentang mereka, dan ketika batas waktu datang, dia melakukannya pada saat-saat terakhir. Namun, saat itu sama sekali tidak demikian. Dia sangat tertarik pada bagaimana situs pertamanya akan terlihat. Kemudian, untuk melakukan segala yang seharusnya, dia melakukan yang terbaik. Penulis materi mengatakan bahwa, sejak zaman kuno itu, dia berusaha keras untuk memastikan bahwa apa yang dia lakukan terlihat semenarik mungkin. Keinginan ini masih hidup dalam dirinya. Di sini dia ingin berbagi kiat tentang desain halaman web.

Desain

Itu bisa dikenali, mungkin tidak dikenali, tetapi orang menilai apa pun dari penampilannya. Jika apa yang Anda lakukan terlihat bagus, maka peluang proyek Anda untuk mendapatkan kepercayaan orang lain tumbuh, secara alami, jika kata "baik" tidak hanya dapat menggambarkan penampilannya, tetapi juga fungsinya.

Selama bertahun-tahun saya menciptakan berbagai proyek saya sendiri dan selama waktu ini saya memberi lebih banyak dan lebih banyak perhatian pada pengembangan kemampuan desain saya, dan tidak hanya untuk meningkatkan keterampilan pemrograman saya. Kode itu penting, tetapi jika Anda ingin membuat proyek menguntungkan Anda sendiri, maka Anda harus menyelesaikan banyak masalah, salah satunya adalah desain. Seorang pengembang mandiri, untuk mencapai sesuatu, harus mengembangkan dirinya secara komprehensif.

Desain hebat bukanlah sesuatu yang bisa mengumpulkan banyak suka di Dribbble . Ini adalah sesuatu yang bahkan tidak diperhatikan pada awalnya. Ini adalah keseimbangan antara kesederhanaan total dan sesuatu yang menakjubkan. Desain dapat menjadi keunggulan kompetitif proyek, dan salah satu alasan kegagalannya.

Ini bukan tentang bakat

Ketika saya masih muda, saya banyak bermain Minecraft. Saya melihat keindahan yang dibuat orang lain, tetapi ketika saya mencoba membangun sesuatu milik saya sendiri, semuanya ternyata terlihat seperti sebuah kotak. Baik kecantikan maupun gaya. Dan bagaimana Anda bisa melakukan sesuatu yang indah di Minecraft?

Kemudian saya menemukan satu blogger video di YouTube dan membuat salinan dari apa yang sedang ia buat. Setelah beberapa minggu, saya membentuk gaya saya sendiri dan sudah bisa membuat sesuatu dengan gaya saya sendiri. Tiba-tiba, desain saya berhenti tampak seperti tidak jelas apa. Apa yang bisa saya katakan, saya bahkan memenangkan satu kontes.

Sebenarnya, saya menceritakan kisah ini kepada kenyataan bahwa desain adalah keterampilan, dan, seperti halnya keterampilan lainnya, desain dapat dikuasai.

Pemilihan alat

Dalam pemrograman, Anda dapat mengambil Notepad biasa dan menggunakannya untuk menulis aplikasi yang sama sekali tidak kalah dengan yang dibuat menggunakan IDE yang kuat, meskipun pemrograman di Notepad mungkin bukan tugas yang paling menyenangkan, dan mungkin proses pengembangan akan memakan waktu lebih lama daripada dengan menggunakan alat yang tepat. Jika kita berbicara tentang desain web, peran Notepad di sini dapat dimainkan oleh MS Paint, dan saya harap, seperti pada contoh dengan Notepad dan pemrograman, sangat sedikit yang akan menggunakannya untuk menyelesaikan masalah desain.


Alat desain web populer

Berikut adalah beberapa alat desain web yang populer:

• Sketsa adalah alat khusus untuk MacOS. Jika Anda menggambar paralel dengan dunia pemrograman web, itu akan menjadi sesuatu seperti Bereaksi untuk desain. Ada perasaan bahwa penyebutan Sketch hadir di setiap lowongan desainer. Hal ini berharga $ 99 per tahun.
• Adobe XD adalah alat lintas platform gratis yang, melanjutkan analogi pemrogramannya, mirip dengan Vue. Di sekitar Adobe XD, sebuah komunitas tidak terbentuk sebesar Sketch, tetapi untuk menguasai alat ini sangat sederhana.
• Adobe Photoshop adalah sesuatu seperti pisau Swiss dalam dunia desain, yang diketahui semua orang, dan yang dapat dibandingkan dengan jQuery. Anda dapat menggunakan Adobe Photoshop untuk $ 9,99 per bulan.

Hampir tidak ada perbedaan apakah Anda menggunakan Sublime atau VS Code untuk menulis kode. Hal yang sama dapat dikatakan tentang apakah Anda memilih React atau Vue untuk pengembangan antarmuka. Ini masalah selera. Hal yang sama dapat dikatakan tentang alat perancang. Masing-masing dari mereka memiliki kelebihan dan kekurangan.

Saya menggunakan Adobe XD. Alasan utama untuk pilihan ini adalah cross-platform, sebagai hasilnya, seperti yang saya lakukan jika saya memilih Sketch, saya bukan sandera ekosistem Apple. Selain itu, Adobe XD didukung oleh Adobe, sehingga Anda dapat berharap bahwa proyek ini akan ada untuk waktu yang sangat lama. Dan akan sangat menyenangkan bagi pemula bahwa sejak Mei 2018 Adobe XD dapat digunakan secara gratis, meskipun dengan beberapa pembatasan (meskipun mereka tidak akan mengganggu Anda).

Tentang suasana hati yang tepat

Masalah utama yang harus saya pecahkan ketika memasuki dunia desain web adalah mengembangkan sikap yang benar. Sebelumnya, saya terlibat dalam proses desain situs. Saya pikir semuanya harus diatur dalam urutan tertentu. Elemen ditempatkan dari kiri ke kanan dan dari atas ke bawah. Benar, pendekatan seperti itu adalah cara yang pasti untuk menjadi desainer yang mengerikan.

Alat desain membuat Anda bekerja seolah-olah setiap elemen memiliki posisi absolut. Setelah konstruksi yang jelas yang dapat dilihat dalam kode program, konstruksi yang dioperasikan oleh desainer mungkin tampak tidak teratur dan berantakan. Tapi itu harus diterima. Ini memberi kebebasan, kemampuan untuk dengan cepat mengubah segalanya dan banyak bereksperimen. Dan ini mungkin yang paling penting, karena desain adalah proses yang berkelanjutan. Dalam desain, sangat diharapkan bahwa sebelum Anda mendapatkan hasil yang sangat baik, Anda harus sering mengulang semuanya.

Alat belajar

Saat menulis kode untuk halaman web, elemen HTML digunakan, seperti div , span , bidang entri data, yang memungkinkan browser untuk mengubahnya menjadi sesuatu yang dapat dilihat di layar. Dengan bekerja dengan alat desain, Anda mendapatkan kesempatan untuk menghilangkan mediasi dan menggunakan elemen visual, seperti bentuk geometris atau fragmen teks, secara langsung.

Saya memilih empat alat desainer yang paling umum digunakan, tidak begitu banyak, sehingga Anda tidak dapat menghabiskan terlalu banyak waktu untuk mengembangkan alat-alat ini. Waktu lebih baik dihabiskan, pada kenyataannya, pada desain. Artinya, dengan cepat memahami dasar-dasarnya, Anda bisa segera mulai berlatih. Mari kita bicara tentang alat-alat ini menggunakan Adobe XD sebagai contoh.

Alat ToolRectangle - Rectangles

Persegi panjang adalah sosok geometris yang paling umum digunakan dalam desain. Saat Anda mendesain, Anda akan menemukan diri Anda terus bekerja dengan mereka. Pikirkan persegi panjang seolah-olah itu adalah elemen div HTML. Persegi panjang digunakan dalam desain berbagai elemen halaman - dari bidang teks ke wadah.


Persegi panjang

▍Alat Teks - Label Satu Baris

Sekilas, tampaknya bekerja dengan teks sangat sederhana. Namun, ada satu fitur, yang terdiri dari fakta bahwa alat untuk bekerja dengan teks memiliki dua mode operasi. Salah satunya dirancang untuk membuat tulisan satu baris, yang kedua - untuk membuat blok uji multi-baris. Untungnya, terlepas dari fitur ini, alat untuk bekerja dengan teks mudah dipelajari dan digunakan.

Dalam mode pertama, yang dirancang untuk bekerja dengan tulisan satu baris, ukuran wadah teks disesuaikan dengan ukuran teks yang terkandung di dalamnya. Ini mirip dengan tag span , kecuali bahwa teks dalam wadah tersebut tidak akan secara otomatis dibungkus dengan baris baru kecuali jika Anda secara eksplisit menggunakan umpan baris. Kekuatan mode operasi ini adalah bahwa ukuran wadah secara otomatis menyesuaikan dengan parameter teks yang terkandung di dalamnya.

Untuk membuat fragmen teks satu baris, pilih alat Teks di bilah alat Adobe XD, klik di mana teks seharusnya berada, dan masukkan. Seharusnya diambil sebagai aturan bahwa mode ini harus digunakan untuk prasasti satu baris, yang lebarnya dapat dipilih secara otomatis. Ini adalah header dan label objek baris tunggal.


Alat teks - label garis tunggal

▍Tool Text - potongan besar teks

Mode kedua alat untuk bekerja dengan teks digunakan untuk membentuk wadah teks dengan ukuran tertentu, yang berperilaku seperti tag p dengan lebar yang diberikan, atau seperti tag p terletak di sel kisi. Kekuatan dari kondisi ini adalah ia dapat mengontrol ukuran blok teks. Untuk membuat fragmen teks, Anda harus memilih alat Teks dan memilih area yang harus ditempati fragmen. Sebenarnya, mode ini harus digunakan untuk fragmen teks multi-baris.


Alat teks - cuplikan teks multi-baris

▍ Pilih alat - pemilihan objek

Menggunakan alat Pilih, objek dipindahkan, diubah ukurannya, dan disalin. Pada gambar di bawah ini, Anda dapat melihat elemen tambahan dari alat ini, yaitu garis merah muda yang membantu menentukan jarak antara objek, dan garis biru yang dengannya nyaman untuk menyelaraskan objek.


Pilih alat

▍Alat Baris - garis

Terkadang garis sangat berguna, misalnya, untuk memisahkan elemen halaman. Karena itu, kita berbicara di sini tentang alat Line. Dari sudut pandang teknis, Anda dapat menggunakan alat Rectangle untuk hal yang sama, tetapi apa yang bisa Anda lakukan, elemen div HTML dapat digunakan untuk mengimplementasikan apa pun.


Alat Garis

Desain: rekomendasi dan trik

▍ Tata Letak

Dalam pengembangan web, tata letak biasanya diwakili oleh tajuk halaman, menu, konten halaman, dan footer. Semua ini adalah bagian dari tata letak, tetapi tata letak itu sendiri adalah sesuatu yang lebih dari jumlah bagian-bagian ini. Layout adalah bagaimana elemen-elemen diatur pada sebuah halaman.

Misalnya, ketika saya merancang halaman informasi untuk Sidemail , saya menempatkan elemen-elemen secara merata di dalam wadah. Gambar berikut, di bagian bawahnya, menunjukkan dengan tepat opsi desain ini, yang saya anggap berhasil, dan di bagian atas ada opsi yang tidak berhasil. Akibatnya, apa yang terjadi dirasakan, dibandingkan dengan opsi lain, sebagai sesuatu yang lebih integral, opsi ini terlihat lebih akurat daripada yang saya anggap tidak berhasil.


Contoh tata letak yang gagal dan sukses

▍Warna

Saat memilih warna untuk proyek Anda berikutnya, waspadai konsep seperti psikologi warna . Untuk menemukan kombinasi warna yang baik berdasarkan warna primer, Anda dapat menggunakan proyek Paletton .

Untuk membuat hierarki halaman visual, gunakan nuansa foreground dan warna teks. Saat menggunakan latar belakang berwarna, bereksperimenlah dengan nuansa warna yang digunakan untuk teks.


Contoh bekerja dengan warna dan teks

YpTipografi

Font yang digunakan untuk label berbeda sangat memengaruhi persepsi halaman, jadi berhati-hatilah dengan pilihan mereka. Biasanya, font komersial terlihat lebih baik daripada font yang ditemukan di Google Font, tetapi jika Anda baru memulai sebagai perancang web, Anda tidak perlu membuang uang untuk membeli font. Bahkan di antara apa yang ada di Google Font, Anda dapat menemukan opsi hebat.

Untuk memisahkan fragmen teks secara visual, saya sering menggunakan teknik ini, yang terdiri dari fakta bahwa teks prasasti dibuat dalam huruf kapital dengan jarak yang semakin jauh antara karakter. Teks huruf besar simetris, terlihat menarik, namun lebih sulit dibaca, jadi jangan terlalu terbawa olehnya.


Contoh Teks Huruf Besar

Desain beranda (atau pendaratan)

Saya selalu berusaha menghindari godaan untuk membuat desain yang modis, dan kemudian memeras apa yang ingin saya komunikasikan melalui halaman. Sebagai gantinya, saya menyoroti kelebihan proyek (dan bukan fitur fungsionalnya), membuat cerita dari mereka dan menceritakan kisah ini menggunakan halaman yang menarik secara visual.

Setelah saya mengerti cerita apa yang ingin saya sampaikan melalui halaman, saya biasanya mulai mencari inspirasi. Sumber inspirasi yang hebat bagi saya adalah proyek land-book.com , yang merupakan katalog luas desain hebat untuk desain halaman arahan yang dapat Anda pilih. Proyek lain di mana Anda dapat mencari inspirasi adalah interfaces.pro . Anda dapat memilih halaman dari tipe tertentu, misalnya, bisa berupa halaman dengan informasi tentang harga, halaman 404, atau halaman dengan informasi tentang situs. Saya hanya menonton semua ini sampai saya berhasil menemukan cukup banyak situs yang saya sukai, tampilan halaman yang sesuai dengan ide-ide saya tentang gaya proyek yang saya lakukan.


Halaman arahan

Setelah saya membentuk ide umum tentang apa yang saya butuhkan, tiba saatnya untuk menyelesaikan tugas sulit mengumpulkan semuanya. Sayangnya, tidak ada cara mudah. Untuk membuat sesuatu yang baik, Anda perlu banyak bereksperimen, melakukan ini sampai Anda menyukai apa yang Anda dapatkan.

Mungkin Anda bertanya-tanya apakah ini normal jika desain yang benar-benar cocok untuk Anda seminggu yang lalu tiba-tiba mulai tampak tidak begitu baik bagi Anda, tetapi mungkin sama sekali tidak dapat diterima. Ini benar-benar normal, dan, pada kenyataannya, jika Anda mengalami sensasi seperti itu, maka itu bahkan bagus. Ini karena Anda tumbuh, belajar, dan menjadi lebih baik di bidang desain. Akibatnya, apa yang tampak tugas yang menakutkan kemarin tidak terlihat begitu rumit hari ini. Ingatlah hal ini dan Anda tidak akan merasa seperti tupai di dalam roda.

▍ Kesimpulan dan rekomendasi

• Pemilihan font yang cermat adalah salah satu hal kecil yang membedakan desain yang baik dari yang buruk.
• Gambar itu penting. Coba gunakan ilustrasi atau foto yang sesuai di halaman Anda, setidaknya dalam jumlah kecil.
• Bangun hierarki visual elemen menggunakan nuansa warna. Tidak cukup hanya menggunakan beberapa warna, salah satunya adalah yang utama, dan yang kedua adalah warna teks.
• Jangan gunakan wadah yang terlalu lebar. Lebar 1.100 piksel biasanya cukup.
• Ruang kosong antara elemen adalah elemen desain yang penting.
• Cerita yang diceritakan oleh halaman web harus dibangun berdasarkan kemampuan proyek, dan bukan pada fitur fungsionalnya.
• Jika Anda merasa bahwa ide-ide Anda habis - cari inspirasi di proyek lain.

Desain aplikasi web (atau panel kontrol)

Seperti halnya dengan desain halaman pendaratan, saat membuat aplikasi web, Anda tidak perlu langsung mengambil ke susunan elemen pada halaman. Situasi yang dipertimbangkan berbeda dari yang sebelumnya di sini Anda tidak menceritakan kisahnya kepada pengunjung. Kali ini Anda membuat alat, dan tujuan utama Anda adalah membuat alat ini nyaman. Ambil selembar kertas dan pensil dan buatlah rencana kerja untuk aplikasi Anda. Pikirkan tentang apa itu tergantung, bagaimana memfasilitasi pekerjaan dengan aplikasi ini.

Jika perlu, lakukan beberapa sketsa atau tata letak. Jelajahi desain proyek yang bersaing, pikirkan kekurangannya. Mungkin Anda memutuskan untuk melakukan sesuatu yang tidak mereka miliki, dan ini dapat menjadi keunggulan kompetitif proyek Anda. Ingatlah bahwa kadang-kadang, sebelum menggambar tata letak dan mencari tahu opsi desain, Anda perlu memberi waktu bagi diri Anda untuk berpikir.

Saran terbaik yang tidak terkait dengan fitur spesifik dari berbagai proyek yang dapat saya berikan di sini adalah memilih tata letak halaman yang sesuai. Biasanya, aplikasi web menggunakan dua pendekatan untuk tata letak halaman. Pilihan satu atau yang lain tergantung pada tujuan aplikasi. Kita berbicara tentang wadah dengan lebar tetap, dan tentang wadah fleksibel yang memenuhi seluruh layar.


Aplikasi web

▍ Fixed Width Containers

Saya lebih suka menggunakan wadah dengan lebar tetap, karena lebih mudah bagi pengguna untuk fokus pada area terbatas karena untuk melihat apa yang terletak di area ini, Anda tidak perlu gerakan mata yang tidak perlu. Aplikasi yang menggunakan wadah tetap, di samping itu, biasanya terlihat lebih rapi, dan pengguna baru dari aplikasi semacam itu lebih mudah dinavigasi. Perlu dicatat bahwa aplikasi seperti itu, karena lebar wadah yang terbatas, lebih sulit untuk dirancang.

Berikut adalah beberapa contoh aplikasi web yang menggunakan wadah tetap: Twitter , Buffer , DigitalOcean , Netlify , GitHub .

▍ Wadah fleksibel

Wadah fleksibel bagus untuk proyek web seperti obrolan, aplikasi spreadsheet, atau dengan banyak informasi yang disajikan dalam format lain. Biasanya, saat merancang aplikasi semacam itu, penting agar sebanyak mungkin data ditempatkan di layar. Kelemahan dari wadah fleksibel adalah kenyataan bahwa sejumlah besar data yang ditampilkan di layar dapat membingungkan pengguna.

Contoh aplikasi yang menggunakan wadah fleksibel termasuk Slack , Intercom , Hotjar , Google Sheets , Trello , Spotify .

▍ Kesimpulan dan rekomendasi

• Memilih wadah yang tepat untuk konten aplikasi penting karena dua alasan. Pertama, tata letak halaman akan tergantung pada ini. Kedua, untuk beralih ke wadah jenis lain, pekerjaan serius akan diperlukan. Setiap proyek unik dan membutuhkan solusi unik, jadi jangan takut untuk bereksperimen.
• Berjuang untuk kesederhanaan.
• Gunakan font yang labelnya mudah dibaca.
• Saat mengeluarkan data dalam jumlah besar, gunakan hierarki visual.
• Analisis keputusan para pesaing, dan, temukan kekurangannya, jangan biarkan mereka muncul di proyek Anda, atau, berdasarkan analisis semacam itu, lengkapi proyek Anda dengan peluang yang akan menjadi keunggulan kompetitifnya.

Ringkasan

Pengembang yang terbiasa bekerja dengan kode daripada gambar visual mungkin merasa sulit untuk beralih ke gelombang desain. Tetapi desain adalah sesuatu yang bisa Anda pelajari. Ingatlah bahwa desain dapat menjadi keunggulan kompetitif proyek Anda, jadi perhatikanlah dan ciptakan situs menarik yang nyaman dan menyenangkan untuk dikerjakan.

Pembaca yang budiman! Apakah Anda pikir seorang programmer bisa mencapai hasil desain yang bagus?