MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Akan terlihat seperti apa website anda?

Terjemahan ini belum lengkap. Mohon bantu menerjemahkan artikel ini dari Bahasa Inggris.

Akan terlihat seperti apa website mu? diskusikan terlebih dahulu perencanaan dan desain pekerjaan yang harus kamu lakukan untuk website mu sebelum menulis kode , termasuk, "Informasi apa saja yang website mu tawarkan?" "Font dan warna apa saja yang kamu inginkan?" "Apa yang website mu lakukan?"

Hal penting yang pertama: Perencanaan

Sebelum melakukan sesuatu, kamu pasti perlu ide. Apa yang harus benar-benar website mu lakukan? Pada dasarnya sebuah website dapat melakukan apapun, tapi untuk percobaan pertama kamu harus membuat sesuatunya sederhana. Kita akan mulai dengan membuat halaman web sederhana dengan judul, gambar, dan beberapa paragraf.

Untuk memulai, kamu harus menjawab beberapa pertanyaan berikut ini:

  1. Tentang apa sih isi website nya? Apakah kamu suka anjing, New York, atau Pacman?
  2. Informasi apa yang akan kamu sajikan? Tulis sebuah judul dan beberapa paragraf, dan pikirkan gambar yang ingin kamu tampilkan di halaman website.
  3. Akan terlihat seperti apa website mu, dalam kondisi paling sederhana. Apa warna latar belakang? Apa jenis huruf yang tepat: formal, kartun, bold and loud, halus?

Catatan: Proyek yang kompleks perlu pedoman rinci yang masuk ke semua rincian warna, jenis huruf, jarak antara item pada halaman, gaya penulisan yang sesuai, dan sebagainya. Hal ini kadang-kadang disebut panduan desain atau buku merk, dan anda bisa melihat contohnya di Firefox OS Guidelines.

Gambar desainnya

Selanjutnya, ambil pulpen dan kertas kemudian buatlah sketsa kasar bagaimana tampilan web kamu nantinya. Untuk web pertamamu, tidak banyak yang akan digambar, tapi kamu harus terbiasa melakukan hal ini. Akan sangat membantu-- dan gambarnya tidak perlu sebagus lukisan Van Gogh!

Catatan: Bahkan yang nyatanya, dalam website yang kompleks, tim desain biasa nya membuat sketsa kasar dulu, setelah itu baru membuat desain digital nya dengan editor grafik atau teknologi web.

Dalam tim yang membangun sebuah web, biasanya ada seorang grafik desainer dan seorang user-experience (UX) desainer. Grafik desainer kerjaanya memperindah tampilan website. UX desainer kerjaanya lebih abstrak. Karena mereka yang melihat bagaimana pengguna akan berinteraksi dengan website.

Memilih aset

Sampai disini, lebih baik untuk mulai memilih konten apa yang akan kamu tampilan dalam halaman web-mu.

Teks

Kamu harus menulis paragraf dan judul dari awal. Jangan sampai lupa

Warna tema

Untuk memilih warna, lihatlah Color Picker dan pilih warna kesukaan mu. Saat kamu meng-klik sebuah warna, kamu akan melihat 6-karakter kode yang aneh seperti #660066. Itulah yang disebut kode hex(adecimal), dan menunjukkan warnanya. Copy kode nya ketempat aman supaya bisa dipakai nanti.

Gambar

Untuk memilih gambar, lihatlah Google Images dan cari sesuatu yang cocok.

  1. Ketika kamu sudah menemukan yang kamu inginkan, klik gambarnya.
  2. Pilih View image.
  3. Dihalaman selanjutnya, klik kanan pada gambar (Ctrl + klik di Mac), pilih Save Image As..., dan pilih tempat untuk menyimoan gambarnya. Bisa juga di-copy alamat Web nya dari address bar browser kamu supaya bisa dipakai nanti.

Catatan: Kebanyakan gambar dari Web, termasuk Google Images, biasanya memiliki hak cipta. Untuk mengurangi kemungkinan pelanggaran hak cipta, kamu bisa gunakan filter lisensi dari Google. Tinggal 1) klik Search tools, lalu pilih 2) Usage rights:

Font

Untuk memilih font:

  1. Pergi ke Google Fonts dan lihatlah disitu sampai kamu menemukan yang pas. kamu juga bisa melakukan filter yang berada dikanan layar supaya pencarian lebih mudah
  2. Klik Add to collection tepat disebelah nama font.
  3. Klik Use di panel bagian bawah.
  4. Di halaman selanjutnya, skrol ke bawah ke seksi 3 dan 4, dan copy baris kode yang diberi oleh Google ke Text Editor untuk dipakai nanti nya.

 

Tag Dokumen dan Kontributor

 Kontributor untuk laman ini: dovansan, yayansupiana
 Terakhir diperbarui oleh: dovansan,