Baru memulai dalam desain web? Panduan ini akan membuat Anda siap untuk menangani proyek pertama Anda sebagai pemula.
Desain web adalah komponen penting dari proses pengembangan web. Jika Anda tertarik dengan desain web, kami menduga Anda memiliki garis kreatif. Dan bagaimana mungkin Anda tidak bersemangat untuk terjun dan membuat situs web pertama Anda? Desain web adalah tentang membuat karya seni fungsional — tetapi dari mana Anda memulai? Jika Anda bertanya-tanya apa yang perlu Anda ketahui sebelum memulai, panduan ini akan membantu Anda.
Pilih sesuatu yang mendasar untuk desain situs pertama Anda
Ini sepertinya tidak perlu dijelaskan lagi, bukan? Tetapi terkadang kita bisa menjadi terlalu ambisius dan akhirnya putus asa. Untuk proyek pertama Anda, ada baiknya Anda memilih sesuatu yang sederhana dan menyenangkan. Situs e-niaga lebih rumit dan akan lebih baik untuk ditangani setelah Anda memiliki lebih banyak pengalaman.
Blog adalah tempat yang tepat untuk memulai. Ini akan menjadi latihan desain yang baik dan Anda akan belajar bagaimana Sistem Manajemen Konten (CMS) bekerja, yang akan penting untuk diketahui untuk desain situs di masa depan. Yang terbaik dari semuanya — Anda tidak harus memulai dari awal. Ada banyak template blog yang memudahkan untuk menyatukannya.
Template adalah alat pembelajaran yang berharga. Menonton bagaimana elemen HTML, CSS, dan Javascript ditata dan disatukan akan memberi Anda wawasan yang lebih dalam tentang apa yang membuat desain berfungsi. Anda dapat menggunakan template sebagai fondasi untuk membuat perubahan dan penyesuaian.
Mungkin Anda tidak ingin memulai blog – cobalah menarik dari pengejaran atau hobi kreatif Anda. Bagaimana kalau membangun etalase untuk keterampilan fotografi Anda atau untuk koleksi cerita pendek Anda? Membuat desain untuk menampilkan hasrat Anda membuat proyek pertama yang menyenangkan.
Temukan inspirasi dari desainer lain
Anda pasti pernah menemukan situs web yang membuat Anda kagum dengan desainnya yang menakjubkan.
Buat dokumen inspirasi dengan tautan ke situs yang Anda sukai, atau tandai saat Anda pergi. Pinterest adalah tempat yang tepat untuk menemukan desain situs yang hebat — Anda dapat menemukan dan menyematkan ilustrasi, sampul buku, poster, blog, dan jenis pekerjaan desain lainnya untuk dirujuk. Desainer menggunakan istilah “mood board” untuk koleksi ini. Papan suasana hati adalah sumber referensi cepat jika Anda terjebak. Yang akan Anda lakukan.
Di luar penemuan yang Anda buat sendiri, ada beberapa koleksi pilihan yang harus Anda periksa.
• Awwwards selalu memiliki karya baru dan segar serta berbagai koleksi bertema
• Behance adalah kompilasi karya desain situs web yang fantastis, di mana fokusnya adalah pada kualitas dan kreativitas
• Dribbble berfokus pada desainer individu, menyediakan forum untuk mendapatkan umpan balik dan berkomunikasi dengan orang lain tentang pekerjaan mereka
Dan tentu saja, pergilah ke pameran WebToz untuk melihat berbagai cara orang menggunakan platform desain kami. Ada begitu banyak hal keren untuk diperiksa dan begitu banyak template yang tersedia untuk dikloning sebagai milik Anda sendiri.
Lihat di luar web untuk sumber inspirasi
Desain web diinformasikan oleh bahasa visual yang dapat ditemukan di mana saja, seperti sampul novel grafis atau kios digital di bank Anda. Kembangkan mata untuk mengenali desain yang baik dan mulailah menganalisis mengapa sesuatu bekerja atau tidak berfungsi, apa pun medianya.
Perhatikan tipografi
Kita sering membaca bahkan tanpa menyadari tipografi. Perhatikan jenis efek yang ada saat Anda mengonsumsi konten. Apakah font pada menu itu dapat dibaca? Apa yang membuat tanda tulisan tangan untuk bisnis lokal itu bekerja dengan sangat baik? Surat ada di mana-mana. Catat penggunaan tipografi yang baik dan buruk.
Typewolf adalah sumber daya yang sangat baik untuk mengawasi font populer. Ini memiliki banyak daftar untuk dijelajahi, situs unggulan hari ini, dan lookbook yang memiliki kombinasi font spektakuler. Sangat membantu untuk melihat contoh sebenarnya dari tipografi yang digunakan, dan situs web seperti Typewolf adalah tempat yang tepat untuk melihat aplikasi praktisnya. Membiasakan diri dengan font yang berbeda akan membantu Anda memilih jenis yang tepat untuk desain situs pertama Anda.
Biarkan seni rupa memengaruhi Anda
Oh, apakah kami menyebutkan ada seluruh sejarah seni untuk diambil? Begitu banyak gerakan dan seniman yang masih membentuk karya kreatif saat ini — terutama desainer web. Berjalan-jalanlah melalui desain Web dan karya sejarah seni kami untuk menemukan banyak pencapaian artistik monumental. Tidak hanya dipenuhi dengan informasi berharga, ini adalah contoh yang sangat baik tentang bagaimana konten dan kesenian dapat bersatu untuk menceritakan sebuah kisah.
Belajar tentang sejarah seni akan semakin memperluas pengetahuan desain Anda.
Teliti berbagai jenis desain
Ada begitu banyak disiplin desain yang harus dipahami. Pengetahuan tentang desain produk, ilustrasi, dan bahkan branding dapat lebih mengembangkan indera kreatif Anda.
Untuk inspirasi yang melampaui desain web, Abduzeedo menawarkan contoh brilian. Baik itu seni poster, koper, atau furnitur, Anda akan melihat contoh desain fantastis yang dilakukan dengan benar. Terbukalah terhadap berbagai jenis desain dan secara aktif mencari inspirasi. Semakin banyak pengetahuan yang Anda miliki, semakin mudah untuk mendesain situs web pertama Anda. Pendidikan menginformasikan intuisi.
Abduzeedo adalah kumpulan proyek desain multidisiplin yang menampilkan praktik desain suara di berbagai bidang.
Siapkan konten sebelum memulai
Mengutamakan konten berarti memiliki konten yang siap digunakan sebelum Anda mulai mendesain situs web pertama Anda.
Itu tidak harus sempurna. Anda selalu dapat mengedit dan mengoptimalkan untuk Google SEO (optimasi mesin pencari) nanti. Tetapi memiliki setidaknya draf kasar tentang apa yang akan ditayangkan akan membantu memastikan desain ditata untuk mengakomodasinya. Mendesain dengan konten nyata memberi Anda representasi yang lebih baik tentang bagaimana situs web akan terlihat dan berfungsi. Ini juga memberi Anda kesempatan untuk membuat perubahan lebih awal dalam proses desain.
Untuk blog, Anda harus memiliki posting yang siap untuk diuji di CMS. Memiliki beberapa posting yang ditulis sebelum Anda meluncurkan akan menghemat berebut untuk menulis sesuatu setelah fakta.
Jaga agar desain Anda tetap sederhana dan intuitif
Baik itu menulis, navigasi, atau CTA, tidak ada yang mau bergumul dengan desain Anda.
Pendekatan desain Anda harus berakar pada kesederhanaan dan ketertiban. Logika harus memandu seseorang melalui situs dengan mudah. Dan karena kita berbicara tentang orang-orang yang akan berinteraksi dengan apa yang telah Anda buat, ini adalah tempat yang baik untuk memperkenalkan UX.
Memahami dasar-dasar pengalaman pengguna (UX)
Situs web lebih dari sekadar teks mengambang di luar angkasa. Skema warna, konten, tipografi, tata letak, dan citra semuanya bersatu untuk melayani audiens Anda dan membangkitkan emosi. Seseorang yang berkeliaran di ruang digital yang Anda buat harus memiliki jalan yang jelas bebas dari rintangan.
UX berfokus pada pemahaman audiens Anda. Apa yang mereka cari — dan bagaimana desain Anda akan membuatnya mudah? UX adalah tentang masuk ke kepala audiens Anda dan melihat desain Anda melalui mata mereka.
Saat membangun situs web pertama Anda, ingatlah prinsip-prinsip UX panduan ini:
• Buat semuanya sederhana dan intuitif
• Mengkomunikasikan konsep dalam suksesi logis
• Penuhi kebutuhan audiens Anda dan tahan godaan untuk menunjukkan keahlian Anda dengan mengorbankan kegunaan
Belajar tentang audiens Anda akan membantu Anda membuat desain yang disesuaikan dengan keinginan dan kebutuhan mereka. Lihat panduan Pemula kami untuk penelitian pengguna untuk wawasan lebih lanjut tentang cara melakukannya.
Memahami dasar-dasar antarmuka pengguna (UI)
Jika Anda baru mengenal desain web, Anda mungkin bingung dengan perbedaan antara UI dan UX. Kebanyakan dari kita adalah. Ketahuilah ini — mereka adalah dua konsep yang berbeda.
Di mana UX berkaitan dengan nuansa keseluruhan desain, UI adalah tentang spesifikasinya. Jika Anda berada di lift, UI akan menjadi ukuran dan pengaturan tombol lantai, sementara UX akan mencakup warna, tekstur, dan pilihan desain interior lainnya dari ruang lift. UI adalah tentang memberi seseorang alat yang mereka butuhkan untuk mengalami situs web Anda bebas dari komplikasi.
Saat membangun situs web pertama Anda, ingatlah prinsip-prinsip UI ini:
• Fungsionalitas elemen interaktif harus jelas
• Keseragaman harus memandu kegunaan — tindakan harus mengikuti pola logis
• Pilihan desain harus dibuat dengan tujuan yang jelas
Lihatlah 10 tips desain UI penting untuk menyelam lebih dalam ke UI.
Siap untuk menghilangkan rasa takut dari lepas?
Memperkenalkan Perjalanan Freelancer: kursus gratis yang mengajarkan Anda cara sukses sebagai desainer web lepas — mulai dari mendapatkan klien hingga meluncurkan situs web mereka.
Gunakan prinsip-prinsip desain untuk memandu proses desain web pemula Anda
Desain yang efektif dipandu oleh aturan tertentu dan penting untuk memahami keterampilan desain web yang penting sebelum Anda mulai. Ada praktik standar yang akan menyederhanakan proses dan membuat produk akhir yang lebih halus.
Tata letak
Jika Anda ingin merancang dan membangun situs web, memahami tata letak yang baik adalah kuncinya. Kami menyarankan untuk menjaga hal-hal minimal dan bekerja hanya dengan beberapa elemen untuk fokus pada penempatan yang sempurna.
Ketika Anda pertama kali mulai mendesain, pikirkan kisi-kisi. Kisi-kisi meratakan elemen, seperti blok div dan gambar pada halaman web, dengan cara yang menciptakan urutan.
Struktur tata letak harus mengikuti hierarki visual. Apa ide-ide penting yang Anda ingin orang lihat dan dalam urutan apa? Hierarki visual harus mematuhi pola umum yang digunakan orang saat membaca. Ada dua jalur yang umumnya diikuti mata orang di web: pola-F dan pola-Z. Menjadi akrab dengan bagaimana pola-pola ini bekerja akan membantu Anda mengatur konten Anda sendiri.
Pola-F lebih umum untuk desain dengan blok konten yang padat. Mata orang-orang akan memindai sisi kiri tata letak sampai hal-hal menarik perhatian mereka dan kemudian membaca dari kiri ke kanan. Bayangkan melihat-lihat menu di restoran — Anda dapat melewati nama-nama tebal hidangan yang sejajar di sebelah kiri sampai Anda menemukan sesuatu yang menarik Anda, yang akan mendorong Anda untuk membaca detail pendukung yang menjelaskan hidangan tertentu itu.
Kebanyakan orang akan membaca sesuatu seperti posting blog dalam pola-F ini. Dengan teks rata kiri dan kalimat berpoin, Nelson Abalos memanfaatkan teknik desain ini, membuat postingannya mudah dinavigasi dan diikuti.
Pola Z dikaitkan dengan desain yang kurang berat teks. Banyak halaman arahan sesuai dengan pola ini. Semua elemen utama di situs Panduan Konservasi mematuhi pola-Z. Jika Anda seorang desainer web pemula, ini adalah trik tata letak sederhana untuk membantu kegunaan.
Warna
Anda memiliki warna pelangi dan seterusnya yang tersedia untuk Anda. Dan kita semua tahu bahwa “dengan kuasa yang besar datanglah tanggung jawab yang besar.” Kekuatan pemetik warna dapat digunakan untuk kebaikan atau kejahatan.
Berikut adalah beberapa pendekatan langsung dalam memilih skema warna untuk situs web pertama Anda.
Monokrom
Gunakan satu warna sebagai alas, variasikan jumlah saturasi, sertakan lampu dan gelap, dan mainkan dengan berbagai warna untuk skema warna yang seragam. Terlepas dari niche Anda, situs monokrom adalah pilihan desain yang cerdas. Dan ingat, warna apa pun yang Anda pilih untuk teks, pastikan Anda berpikir tentang keterbacaanhttps://webaim.org/resources/contrastchecker/.
Dalam contoh dari Unik ini, setiap bagian digambarkan dengan skema warna monokromatik. Anda tidak perlu mendapatkan kemewahan ini dalam desain pemula Anda, tetapi senang melihat penggunaan variasi warna monokromatik yang berbeda. Perhatikan bagaimana setiap bagian terbuat dari warna yang terkait dengan tas unggulan? Ini adalah trik desain yang bagus yang membuat skema warna yang harmonis.
Pelengkap
Ambil warna yang berlawanan pada roda warna dan gabungkan. Cukup mudah, bukan?
Gunakan warna pelengkap dengan hati-hati. Dalam desain di bawah ini dari situs web Ignisis, perancang menggunakan biru dan oranye dalam kombinasi yang berbeda bersama dengan spasi putih dan abu-abu untuk tata letak yang tidak pernah melelahkan mata. Kontrasnya terasa renyah dan menyegarkan.
Tipografi
WebToz hadir dengan berbagai pilihan font dan opsi untuk menambahkan lebih banyak.
Tipografi adalah arsitektur dua dimensi, berdasarkan pengalaman dan imajinasi, dan dipandu oleh aturan dan keterbacaan.
-Hermann Zapf
Jadi apa aturan yang perlu Anda, perancang pemula, ketahui?
Tipografi menginformasikan nada
Pikirkan undangan pernikahan atau pengumuman pemakaman. Keduanya adalah peristiwa kehidupan yang mendalam — yang satu perayaan yang menyenangkan dan yang lainnya biasanya lebih suram. Di mana jenis huruf bunga hiasan bekerja dengan baik untuk pernikahan, itu tidak cocok untuk pemakaman.
Saat mendesain situs web pertama Anda, ingatlah nadanya. Jika Anda menginginkan getaran ringan, seperti blog makanan, menenun dengan font yang menyenangkan masuk akal. Tetapi jika Anda membuat situs web untuk firma hukum, tetap berpegang pada tipografi yang lebih profesional.
Serif versus non-serif
Kesalahan umum desainer baru adalah mencampur font serif dan non-serif. Anda dapat membedakannya karena ujung huruf serif memiliki garis atau goresan tambahan yang ditambahkan secara vertikal atau horizontal.
Simak perbedaan PT Serif dan PT Sans (tanpa serif).
Serif adalah artefak dari masa mesin cetak ketika sebagian besar kata yang kita baca dicetak dengan tinta di atas kertas. Serif menambatkan kata-kata ke halaman dan membuatnya lebih mudah dibaca. Pada hari-hari awal web, serif dijauhi oleh desainer web karena resolusi layar yang lebih rendah mencairkannya. Sekarang layar lebih baik dioptimalkan untuk tipografi dengan serif, mereka telah kembali.
Garis-garis kecil itu membuat perbedaan besar. Anda akan melihat jenis huruf PT Serif di atas terasa lebih formal dan versi sans-serif tampak lebih ringan dan lebih longgar.
Karena font serif lebih rumit, mereka paling baik digunakan dalam jumlah sedang. Header adalah tempat yang ideal untuk font serif, dan blok konten yang lebih besar mendapat manfaat dari font yang lebih sederhana tanpa serif.
Ornamen versus kepraktisan
Loop dan lingkaran dari font yang berkembang akan menambah kepribadian dan keanggunan pada desain, tetapi jangan terlalu sering menggunakan font berenda. Situs web adalah tentang berkomunikasi dengan audiens melalui konten. Seperti yang dikatakan Hermann Zapf, keterbacaan adalah salah satu karakteristik font yang paling penting.
Teknis tipografi
Ada banyak hal yang harus dipelajari dengan tipografi. Saat Anda maju sebagai desainer, Anda harus tahu cara menggunakan tinggi garis, kerning, dan bobot yang berbeda dalam tipografi Anda. Tapi jangan terlalu terjebak dalam mengutak-atik semua seluk-beluk untuk situs pertama Anda. Fokus untuk memastikan semuanya dapat dibaca — Anda dapat bereksperimen menyempurnakan detailnya nanti.
Lihat “Web Typography 101” untuk mempelajari lebih lanjut tentang tipografi dan bagaimana hal itu dapat ditata.
Mulai mendesain
Tutorial dan penelitian sangat berharga untuk pembelajaran Anda, tetapi pada akhirnya Anda hanya perlu menggali dan mendesain. Bahkan jika Anda menciptakan sesuatu yang tidak akan pernah dilihat siapa pun, itu masih merupakan pemecahan masalah latihan dan menerapkan apa yang telah Anda pelajari. Jangan khawatir jika itu tidak luar biasa. Tapi banggalah karena melewati ambang batas itu dari calon desainer menjadi benar-benar menjadi satu — Anda sedang dalam perjalanan!
Dapatkan umpan balik
Anda menyelesaikan desain pertama Anda — selamat! Anda bekerja keras dan Anda siap untuk menunjukkannya kepada dunia. Tetapi sebelum Anda menekan publikasikan, dapatkan beberapa perspektif luar tentang apa yang Anda buat.
Mendapatkan kritik yang membangun bisa jadi tidak nyaman. Membuat sesuatu, apakah itu esai, lukisan, atau situs web adalah tindakan kerentanan. Hal-hal yang Anda masukkan ke dunia adalah perpanjangan dari siapa Anda dan apa yang Anda mampu. Untuk diberi tahu apa yang Anda buat bisa lebih baik atau salah mungkin terasa seperti serangan pribadi.
Dalam desain web, umpan balik adalah bagian normal dan penting dari proses. Pelajari cara mengesampingkan ego Anda dan pisahkan umpan balik dari harga diri Anda. Saat Anda mendapatkan pengalaman, Anda akan dapat mengidentifikasi dan menerapkan umpan balik yang praktis dan berguna dan melepaskan sisanya. Anda akan menemukan bahwa desainer yang lebih berpengalaman tahu bagaimana rasanya menjadi pemula — mereka senang melihat desainer yang kurang berpengalaman berhasil.
Jika Anda mendesain dengan WebToz, bagikan pekerjaan Anda di WebToz Showcase atau minta bantuan di forum desain WebToz. Saat Anda maju, Anda pasti ingin tunduk ke tempat-tempat seperti Dribbble dan Behance untuk mendapatkan lebih banyak perhatian pada pekerjaan Anda. Anda tidak hanya akan mendapatkan kritik yang membangun, Anda juga akan mendapatkan umpan balik tentang apa yang Anda lakukan dengan baik — yang selalu terasa luar biasa.
WebToz membuat desain web untuk pemula dapat diakses
Lewatlah sudah hari-hari harus mempelajari kode front-end yang kompleks untuk membangun situs web. Di masa lalu, Anda harus bergantung pada pengembang untuk menghidupkan desain Anda. Hari ini, Anda dapat merancang, membangun, dan meluncurkan situs web yang kompleks hanya dalam beberapa jam menggunakan WebToz.
Mengetahui beberapa konsep kunci, dan mampu mengetahui perbedaan antara desain yang baik dan buruk akan memberi Anda kepercayaan diri dan keterampilan untuk membuat situs web pertama Anda. WebToz membebaskan Anda dari keharusan membuat kode, membuka bandwidth kreatif Anda, dan memungkinkan Anda segera mulai mendesain.
Jika Anda memiliki pertanyaan sebelum menyelami proyek pertama Anda, posting di komentar di bawah. Kami di sini untuk membantu.