Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Desain Web Untuk Anak-Anak: Rangkuman

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Color

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Kita berhasil! Kita telah membuat website pertama dari awal dan kita membicarakan tentang beberapa potongan desain esensial seperti area putih, typografi, dan warna

Dalam tutorial final ini kita akan mengulas secara cepat semua hal yang telah kita pelajari sejauh ini tentang membangun sebuah website dan desainnya, mengulas cara untuk menempatkan website dalam internet sehingga kita dapat mengarahkan teman dan keluarga ke sebuah alamat web, dan menyentuh sedikit tentang beberapa sumber yang penting dalam memajukan pelajaran kita.

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

Rekap

Mari melihat roadmap seri yang kita ambil untuk sampai pada dimana kita sekarang ini.

Fondasi & Persiapan

Kita memulai seri ini dengan menjelaskan bagaimana cara kerja web. Agar dua komputer dapat berbicara satu sama lain mereka harus terhubung ke internet melalui sebuah ISP (Internet Service Provider).

Untuk membolehkan orang mengulas situs kita pada internet situs ini harus ditransfer (dipindahkan) ke sebuah server; sebuah komputer khusus dengan akses langsung ke internet. Kita akan mengulas lebih tentang ini dalam sebuah section di bawah.

Peran kita dalam internet adalah desain web. Adalah tugas kita untuk memastikan sebuah website tampak segar dan super mudah untuk dibaca dan digunakan bagi pengguna.

Dengan tujuan ini kita menentukan untuk membangun situs Kota Tuts+ dengan HTML dan CSS setelah menggambar beberapa sketsa fantastis pada kertas. Untuk menyiapkan bagian proses ini kita harus mempelajari semua tentang penamaan dan pengelolaan file.

Kita sekarang mengetahui file HTML utama selalu disebut index.html dan apakah gambar ditempatkan dalam foldernya sendiri atau tidak berdampak pada atribut src dalam HTML kita.

Terakhir, kita memilih sebuah editor teks dan secara resmi siap untuk mulai menulis beberapa file HTML dan CSS.

Membuat Sebuah Website Dengan HTML & CSS

Untuk membangun situs Kota Tuts+ pertama-tama kita menentukan struktur HTML dan kemudian memasukkan kontennya.

Struktur ini dibuat dari beberapa elemen yang bersarang dalam sebuah elemen html utama dan memiliki fondasi ini membuat memasukkan konten lebih terarah langsung

Setelah konten berada dalam tempatnya kita dengan mulai membuat style semuanya dengan CSS. Pertama-tama, kita perlu menautkan dua dokumen bersama-sama dalam bagian head HTML:

Dalam dokumen CSS kita dapat menyatakan warna, ukuran, layout, dan lebih lagi pada elemen dalam dokumen HTML, yang secara langsung mengarahkan ke desain situs yang telah selesai.

Gambar

Bagian seri ini diselesaikan dengan sebuah tutorial yang mendiskusikan format gambar yang berbeda dan tersedia untuk kita. Kita berbicara tentang mencantumkannya dalam HTML dan beberapa efek yang dapat kita terapkan pada gambar dengan CSS, seperti mengubah opacity:

Seperti yang disebutkan, semua gambar yang digunakan sepanjang seri Kota Tuts adalah SVG, yang berarti mereka dapat diubah ukurannya tanpa kehilangan kualitas dan mudah diedit.

Dasar-Dasar Desain

Setelah kita membuat situs kita mengulas konsep dasar-dasar desain yang membantu bentuk tampilan, perasaan, dan kegunaan bagi situs.

Konten adalah bagian terpenting dalam desain web, jadi setelah membangun konten yang berguna, dibutuhkan, dan ditata dengan baik kita bergerak ke dalam visual.

Hirarki visual dibentuk untuk situs melalui variasi ukuran font, warna, dan area putih, lebih seperti balon di atas yang didesain agar lebih dominan dalam gambar.

Typografi

Typografi ada dimanapun kita melihat huruf dan salah satu bagian terpenting dari desain web. Pengguna kita perlu dapat membaca konten kita namun kita juga perlu memastikan font yang kita pilih cocok dengan nada dan rasa konten dan desain visual kita.

Warna

Section ini menyimpulkan dengan sebuah tutorial pada warna–teori, arti warna tertentu, sistem warna yang berbeda untuk web, dan bagaimana memilih palette yang sukses.

Dengan mengacu pada roda warna primer dan sekunder membantu kita mengerti dengan lebih baik bagaimana warna tertentu dibuat dan mengapa beberapa warna tampak bagus bersama-sama sementara yang lainnya tidak.

Sekarang, mari kita melanjutkan dengan bagaimana kita menampilkan situs kita pada web!

Menempatkan File Pada Web

Seperti yang kita diskusikan pada awal seri ini, situs ini tinggal secara lokal pada komputer kita dan bukan dalam internet. Pada titik ini kita tidak dapat mengarahkan teman dan keluarga pada sebuah alamat web, sehingga mereka belum dapat melihat karya luar biasa kita.

Seperti yang kita diskusikan pada tutorial perkenalan, file-file itu perlu ditempatkan dalam sebuah server agar yang lainnya dapat melihatnya dalam internet.

Catatan Singkat Untuk Melangkah Maju

Proses mendapatkan sebuah situs pada internet sering dapat melibatkan pembayaran dan memiliki alamat email. Jika kamu terlalu mudah untuk mendapatkan akses pada hal tadi paling baik adalah minta ditemani orang dewasa untuk section ini.

Hosting

Ada sejumlah layanan yang akan membantu menjadi host bagi file-file kita, membuatnya dapat diakses pada internet. Selama seri ini kita akan fokus pada hosting melalui NeoCities dan konsep dasar nama domain.

NeoCities

NeoCities adalah pilihan yang fantastis dan gratis untuk hosting file langsung pada web; walaupun kita tetap memerlukan sebuah alamat eie untuk mendaftar!

Mari ikuti langkah-langkah untuk melakukan host file di sini:

  • Untuk mendaftar kita perlu memilih sebuah username (nama situs) dan masukkan sebuah email. Pada titik ini kita akan ingin memberi nama situs dengan sesuatu yang berbeda dari apa yang telah dibuat di bawah, karena semua alamat situs harus unik. Sebagai contoh, alih-alih menggunakan tutsplustown sebuah username kamu dapat memilih sesuatu yang lain yang tersedia atau tambahkan namamu janetutsplustown (sekali lagi, jika ini tersedia dan belum diambil oleh anggota NeoCities lainnya). Situs ini akan live pada (username).neocities.org
  • Setelah kita semua mendaftar kita dapat memilih tombol merah besar "Edit Site" pada sudut kanan atas layar.
  • Kita lalu akan dibawa pada sebuah dashboard file dimana kita dapat menambahkan file dan folder. Kita akan ingin mengupload dua file: file HTML dan CSS untuk situs dan kemudian membuat satu folder: images. Di dalam images kita akan menambahkan empat file gambar.
  • Setelah file ditransfer situs kita telah resmi dalam host NeoCities! Akan ada tautan ke alamat situs live pada bagian paling atas halaman.

Berikut tampilan situs pada NeoCities: tutsplustown.neocities.org

Manfaat lainnya dari layanan ini adalah kita tidak perlu pergi melalui proses pembayaran dan pengaturan domain (alamat khusus web), walaupun kita akan menyentuh bagaimana melakukan ini nantinya.

Penting! Mungkin untuk menggunakan nama domain custom dengan NeoCities dengan pergi ke dalam pengaturan situs setelah pengaturan awal dan mengikuti instruksi di sana; walaupun ini sekarang mempersyaratkan upgrade akun untuk $5.00 USD setiap bulan.

Domain

Domain adalah alamat custom yang kita referensikan ke orang sehingga mereka dapat mengunjungi situs kita. Langkah ini tidak perlu jika kita melakukan host file kita dalam NeoCities karena itu membuat alamat Neocities spesial untuk kita. Bagaimana pun juga, jika kita mencari untuk memiliki sebuah nama domain yang benar-benar bisa diubah (misalnya seperti tutsplustown.com) kita harus membayar nama ini.

Seperti dengan username NeoCities, nama domain kita akan harus unik juga; itu mungkin memerlukan beberapa waktu untuk menemukan sebuah nama yang belum diambil.

Berikut adalah beberapa layanan yang membolehkan kita untuk membayar nama domain setelah kita membuat sebuah akun.

Langkah terakhir untuk mengatur sebuah domain custom dapat dilengkapi melalui layanan hosting (seperti Neocities atau BitBalloon yang disebutkan di bawah) setelah file-file ditransfer.

Lebih Banyak Tentang Hosting

Jika kita memilih tidak untuk menggunakan NeoCities ada beberapa perusahaan hosting lainnya yang menonjol untuk khususnya harga yang terjangkau dan mudah digunakan, namun barangkali salah satu yang menonjol di sini adalah BitBalloon.

BitBalloon gratis untuk dicoba namun mempersyaratkan pembayaran untuk mencantumkan custom domain, lebih seperti NeoCities. Kemudahan file dengan drag and drop ke dalam tampilan muka membuat ini menjadi pilihan yang cukup menarik untuk sebuah situs dasar seperti Kota Tuts+.

Setelah file ditransfer kita dapat menyelesaikan proses pengaturan domain custom melalui tool dalam dashboard BitBalloon.

Domain Kota Tuts+ Kita

Situs Kota Tuts+ kita memiliki alamatnya sendiri yang diperoleh dan diatur dengan cara serupa dengan yang baru saja kita ulas: tutsplustown.com.

Apa Berikutnya?

Sementara seri ini menyediakan sebuah perkenalan ke desain web kita mungkin dengan cepat berakhir ingin memajukan skill setelah berlatih, berlatih, berlatih topik yang diulas di sini.

Lebih Lanjut Tentang HTML & CSS

Buku "Membangun Websitemu Sendiri, Panduan Komik Tentang HTML, CSS, dan WordPress" oleh Nate Cooper menyediakan fondasi yang solid untuk membuat website melalui cerita menyenangkan dalam format komik.

Shay Howe telah menulis seri tutorial mendalam tentang HTML dan CSS baik level pemula maupun lanjutan.

Desain Responsif

Desain web responsif mengacu pada mendesain situs yang memperhatikan ukuran layar yang berbeda-beda. Kita menghabiskan banyak waktu pada smartphone, misalnya, dan karena desainer ingin memastikan situs kita berkerja pada layar yang lebih kecil ini sebaik pada layar desktop.

Ada tutorial fantastis bagi pemula oleh Shay Howe tentang topik ini.

Unit Pengukuran

Kita menggunakan pixel sepanjang seri ini sebagai unit pengukuran pada web. Menggunakan pixel benar-benar OK ketika memulai, bagaimana pun juga, semakin berpengalaman maka kamu akan semakin menyadari betapa terbatasnya itu. Itu merupakan unit pengukuran yang tidak fleksibel dan tidak berkerja dengan baik dalam desain responsif.

Dalam istilah desain sepanjang ukuran layar yang berbeda ada beberapa alternatif yang akan lebih fleksibel daripada pixel, seperti persentase dan rem.

Layout

Sementara kita secara singkat mendisusikan flexbox dalam tutorial CSS Layout ada lebih banyak yang dapat kita capai dengan layout menggunakan itu. Ada beberapa tempat super untuk mempelajari lebih, seperti Panduan Lengkap Flexbox dan Diagram Cheatsheet Flexbox ini.

Dengan memperhatikan layout sebagai keseluruhan dan bukan hanya flexbox, ada sebuah situs kecil yang rapi yang akan membantu kita melalui dasar-dasarnya.

Sampai Jumpa!

Sementara adalah lebih banyak yang dapat kita pelajari untuk memperkuat dan mengembangkan skill desain web, kita telah mencapai begitu banyak sepanjang seri ini dan sekarang memiliki pemahaman yang jauh lebih baik tentang dasar-dasar baik untuk desain dan membangun sebuah situs.

Kita secara resmi menghidupkan sebuah website dari sketsa pada kertas ke sebuah situs sebenarnya dengan alamat webnya sendiri; semuanya dalam harian seorang desainer web!

Website Kota Tuts+ kita akan melayani sebagai panduan yang cantik dan mudah digunakan bagi turis yang memutuskan untuk mengunjungi, jadi terima kasih atas semua kerja kerasmu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.