Desain Web Untuk Anak-Anak: Dasar-Dasar Desain

Selamat datang di pelajaran ke delapan seri Desain Web Untuk Anak-Anak, "dasar-dasar desain"!

Melalui seri ini kita telah memfokuskan pada membawa sebuah desain menjadi hidup, namun kita belum berbicara mengenai keputusan memulai memilih desain itu. Dalam tutorial ini kita akan melalui beberapa dasar-dasar konsep desain yang merupakan bagian dari membuat sebuah website yang bagus.

Jangan lupa untuk mengajukan pertanyaan dalam bagian komentar pada bagian bawah halaman ini!

Pengguna

Hal lain yang telah kita banyak bicarakan sejauh ini adalah pengguna (atau pengunjung). Setiap keputusan yang kita buat dalam desain web dan setiap konsep desain yang kita bicarakan dalam tutorial ini semuanya memiliki goal yang sama: untuk membuat website mudah digunakan dan dimengerti sebaik mungkin.

Desain itu tentang menyelesaikan masalah. Jika pengguna kita merasa sulit menggunakan website kita mereka akan pergi. Tuga kita adalah menghilangkan kesulitan bagi mereka, membuatnya mudah dibaca dan memberikan mereka pengalaman yang super menyenangkan. Keputusan kita meliputi hal-hal seperti konten, pengaturan, penataan, area kosong, grafis, dan typografi

Konten

Konten merupakan bagian paling terpenting dalam desain web. Itu tidak akan sangat berarti bagaimana tampak cantik situs kita jika tidak membuat konten yang ingin dibaca pengguna. Satu hal yang dapat kita tanyakan pada diri sendiri ketika ingin membangun sebuah situs adalah "Apakah orang-orang memerlukan ini?" dan jika iya, "Informasi apa yang esensial?.

Akan menggoda untuk mencantumkan sebanyak mungkin konten pada sebuah website. Membersihkan dan menyempitkan konten akan benar-benar membantu pengguna untuk mendapatkan lebih banyak informasi, karena apa yang terpenting adalah kita tidak tersesat dalam halaman website.

Pengaturan dan Penempatan Konten

Setelah kita siap dengan konten kita perlu mengelolanya ke dalam kategori, atau grup yang relevan, sehingga pengguna dapat menemukan semuanya tanpa masalah.

Website terbaik akan mengalir secara alami dan memastikan pengguna tidak harus berpikir terlalu keras tentang keberadaan sesuatu.

Website Kota Tuts+ tidak memiliki banyak konten, sehingga kita dapat untuk menyeleraskan semuanya di tengah dan menyoroti gambar cantik kita. Jika kita memiliki lebih banyak teks pada situs, bagaimana pun juga, layout ini mungkin tidak berkerja dengan baik.

Visual

Untuk membantu situs kita mudah diarahkan dan dinikmati pengguna kita perlu berpikir tentang tampilan dan sensasinya. Inilah dimana gambar, hirarki (membantunya jelas bagaimana semuanya dibandingkan dengan lainnya), typografi, dan warna mengambil peran.

Grafis dan Gambar

Pada titik ini kita mengetahui semua tentang menggunakan gambar pada sebuah website. Kita mencantumkan empat gambar pada situs Kota Tuts+ dan melalui berbagai jenis gambar untuk digunakan pada web dalam tutorial sebelumnya.

Kapan dan dimana menggunakan gambar dan grafis ini juga penting untuk dipikirkan. Semua gambar yang dicantumkan dalam situs Kota Tuts+ masuk akal dengan konten yang ditempatkan di sebelahnya. Misalnya, website kita tentang Kota Tuts+, sehingga kita memiliki sebagai gambar yang rapi pada bagian paling atas tentang sebuah bangunan penting dalam kota kita. Ketiga gambar yang mengikutinya adalah terkait dengan kelompok bisnis di sebelahnya: hotel, restoran, dan pasar umum.

Kita menggunakan gambar ini untuk memberikan pengguna sensasi yang lebih baik akan rasa kota ini, sama halnya dengan tampilan belanja akan sama bagusnya dengan bangunan kita. Penting bahwa kita tidak mendapatkan perhatian pengguna dengan sebuah gambar yang tidak ada hubungannya dengan konten aktual.

Icon

Icon adalah grafis kecil yang digunakan untuk mewakili sesuatu.

Sebuah icon yang bagus mudah dimengerti dan dapat membuat menemukan informasi penting dalam sebuah website lebih cepat.

Berikut beberapa contoh icon khusus yang sangat berguna:

Ada banyak dapat kita komunikasikan tanpa menggunakan teks sama sekali dan menggunakan icon di tempatnya dalam situasi yang benar akan memberikan kita sebuah situs yang lebih bersih, lebih mudah digunakan.

Hirarki Visual

Hirarki visual adalah semua tentang memilih apa yang menonjol dan menunjukkan hubungan antar informasi. Hirarki adalah bagian website yang dapat ditunjukkan melalui sejumlah pilihan styling yang berbeda, seperti: warna, ukuran, penggunaan area kosong, dan positioning. Semua pilihan ini akan membantu memberi tahu pengguna apa yang super penting, apa yang tidak penting, dan informasi apa yang terkait.

Hirarki tidak hanya ditunjukkan berdasarkan ukuran teks dan gambar, namun juga berdasarkan jarak satu sama lain. Konten sejenis harus dikelompokkan bersama dan dibuat jarak dari konten yang tidak terkait.

Gambar langit Kota Tuts+ ini telah didesain untuk memastikan bawah balon menarik perhatian pengunjung terlebih dahulu, diikuti dengan awan. Semua yang lainnya dalam gambar telah dibuat kurang jelas untuk memastikan balon dan awn lebih menonjol.

Gambar di atas menunjukkan bahwa sebuah perubahan dalam apa yang kita fokuskan terlebih dahulu. Apakah kamu melihat awan terlebih dahulu baru balonnya?

Ada banyak yang terjadi dalam gambar ini dan kita tidak yakin harus melihat yang mana dulu. Tidak ada perubahan warna, tidak ada pengaturan, dan tidak ada jarak untuk memberi tahu kita apa yang penting, membuatnya sulit untuk diikuti.

Area putih

Area putih adalah area kosong pada sebuah situs; itu tidak harus berwarna putih! Itu adalah area dimana tidak ada teks dan tidak ada gambar. Dimana kita memilih untuk memiliki area kosong ini sangat penting karena itu menentukan bagian situs mana yang menonjol dan seberapa baik kita dapat membaca konten.

Gambar di atas adalah sebuah contoh situs yang tidak menggunakan area putih dengan baik. Ada banyak konten dan gambar dan tidak ada ruang cukup di antaranya untuk menunjukkan kepada kita apa yang terpenting.

Jadi, mari kita lihat apakah dapat membersihkan ini!

Jauh lebih baik. Kita membuang beberapa konten non esensial dan membuat sebuah hirarki dengan banyak area putih dan pengaturan yang lebih baik, membuatnya mudah dibuat

Area Putih Kota Tuts+

Area putih yang kita gunakan pada situs Kota Tuts+ benar-benar berwarna kuning cerah.

Kita memiliki area kosong yang luar di kanan dan kiri halaman, juga di antara gambar. Area ini membantu menyoroti konten sembari memastikan tidak ada yang terlalu ramai.

Ingat! Penting untuk memikirkan apa yang tidak ada pada situs sebagaimana apa yang ada, dan ini dimana area putih berperan.

Typografi & Warna

Typografi dan warna begitu penting pada desain web dimana mereka akan memiliki tutorialnya sendiri untuk diikuti, jadi kita akan dengan cepat menyentuhnnya di sana.

Typografi ada seni memilih dan menyusun ketikan dalam sebuah cara yang membuatnya menarik dan mudah dibaca sebaik mungkin. Sementara situs Kota Tuts+ kita tidak memiliki banyak teks, sebenarnya ada banyak pikiran yang masuk ke dalam pilihan font dan penyusunannya.

Pemilihan waarna juga merupakan bagian yang kuat dari desain. Warna memiliki arti dan dapat membantu memberikan pengguna perasaan tertentu tentang sebuah merek atau situs. Warna Kota Tuts+ dapat membantu membuat sebuah perasaan disambut dan menyenangkan bagi kota kita.

Namun lagi, kita akan membicarakan tentang ini lebih banyak lagi segera!

Kesimpulan

Dalam tutorial ini kita menyentuh beberapa konsep desain yang sangat penting. Setelah kita menyiapkan konten kita perlu menyajikan konten ini ke pengguna kita dalam cara yang paling mudah dan paling berurutan.

Desain itu semuanya tentang membuat hal-hal lebih mudah dan dapat dinikmati orang. Kita mencapai ini dengan website Kota Tuts+ melalui layout, gambar, warna, dan area kosong.

Berikutnya kita akan mendiskusikan typografi, seni memilih dan menyusun ketikan; salah satu bagian desain yang paling menarik dan menyenangkan.

Sampai ketemu di sekitar kota!