Adityads Blogs
18:10
0
Dalam artikel ini penulis mencoba menyusun daftar tahapan dasar-dasar untuk belajar web desain. jika anda menyukainya ikuti langkah-langkahnya sampai akhir artikel.
Pengertian web desain
Desainer web mengambil apa yang konseptual dan menerjemahkannya ke dalam visual, gambar, tipografi, warna, teks, ruang negatif, dan struktur bersatu pada untuk tidak hanya menawarkan pengalaman pengguna tetapi juga saluran untuk mengkomunikasikan ide.
Seorang desainer web yang baik memahami pentingnya setiap bagian dari sebuah desain. Mereka membuat pilihan pada tingkat granular, menata setiap elemen, sementara tidak pernah melupakan bagaimana elemen akan bersatu dan berfungsi dalam mewujudkan tujuan desain yang lebih besar.
Logika perlu memandu pengaturan ide dan visual pada setiap halaman, serta mengarahkan bagaimana pengguna akan melakukan perjalanan melaluinya.
Desain web dapat dipecah menjadi beberapa subdisiplin. Beberapa desainer berkarier dengan spesialisasi di bidang-bidang seperti UI, UX, SEO, dan bidang keahlian lainnya. Saat Anda memulai perjalanan Anda sebagai seorang desainer, Anda harus tahu sedikit tentang semua aspek berbeda dari desain web ini.
Backend dan Frontend
1. Pengertian Backend
Back end adalah segala sesuatu yang berjalan di belakang layar dalam menampilkan sebuah website. Situs web berada di server. Misalnya, Ketika pengguna membuat permintaan seperti menavigasi ke bagian tertentu dari sebuah situs web. Lalu server mengambil informasi yang masuk ini dan pada gilirannya menembakkan semua HTML dan kode lainnya sehingga ditampilkan di browser pengguna dengan benar. Kemudian Server meng-host atau mengeksekusi data yang dibutuhkan situs web untuk berfungsi.Pengembang web yang berspesialisasi dalam pengembangan back-end sering kali adalah pemrogram yang bekerja dalam bahasa seperti PHP, mungkin menggunakan kerangka kerja Python seperti Django, menulis kode Java, mengelola basis data SQL, atau menggunakan bahasa atau kerangka kerja lain dalam memastikan bahwa server, aplikasi, dan database melakukan konektivitas dalam bekerja sama.
Untuk menjadi seorang web designer, Anda tidak perlu belajar terlalu dalam tentang apa yang terjadi di belakang, tetapi setidaknya Anda harus memahami tujuannya. Karena nantinya, mungkin kalian akan sering terlibat dalam suatu project kerjasama.
2. Penjelasan Frontend
Jika bagian belakang merupakan Backend, maka bagian depan interface atau antarmuka dengan pengguna merupakan Frontend. Bagian depan ini tempatnya HTML, CSS, JavaScript, dan kode lainnya bekerja sama untuk menampilkan situs web. Ini adalah bagian dari desain web yang melibatkan banyak kerjasama.Saat Anda memiliki kemajuan dalam karir Anda, Anda mungkin menjelajah ke area pengembangan web yang lebih khusus. Yang pada akhirny Anda mungkin menggunakan dengan kerangka kerja seperti React atau Bootstrap atau masuk lebih dalam dengan JavaScript atau jQuery. Ini adalah area yang lebih maju yang tidak perlu Anda khawatirkan terlalu banyak di awal.
Bagaimana tugas Web desain
Tugas desainer web adalah mengambil ide besar itu dan memecahnya menjadi potongan-potongan kecil, dan kemudian menerjemahkan potongan-potongan ini menjadi instruksi yang dapat dipahami komputer -- termasuk meletakkan semua instruksi ini dalam urutan atau sintaks yang benar.
Setiap halaman di web yang Anda kunjungi dibuat menggunakan urutan instruksi terpisah, satu demi satu. Peramban Anda (Chrome, Firefox, Safari, dan sebagainya) adalah aktor besar dalam menerjemahkan kode menjadi sesuatu yang dapat kita lihat di layar kita dan bahkan berinteraksi dengannya.
HTML dan CSS sebenarnya bukan bahasa pemrograman secara teknis; itu hanya struktur halaman dan informasi gaya. Tetapi sebelum beralih ke JavaScript dan bahasa sebenarnya lainnya, Anda perlu mengetahui dasar-dasar HTML dan CSS, karena keduanya ada di ujung depan setiap halaman web dan aplikasi.
Fungsi HTML, CSS, Javascript dalam web desain
CSS : CSS digunakan untuk mengontrol presentasi, pemformatan, dan tata letak .
Javascript : digunakan untuk mengontrol perilaku elemen yang berbeda.
Kenali Web Visual yang menarik
Titik awal yang bagus adalah Mempelajari konsep-konsep seperti reifikasi, kemunculan, dan invarian akan memungkinkan Anda untuk memasukkan prinsip-prinsip ini ke dalam pekerjaan Anda.
Prinsip-prinsip visual web desain
Jika anda telah siap untuk membuat desain menarik yang mewakili merek Anda, Terapkan prinsip desain visual dasar sederhana ini.Saat Anda menjalankan suite pengeditan atau meletakkan pena di atas kertas, setiap desain visual yang Anda gunakan menciptakan kesatuan di antara elemen yang berbeda atau secara kreatif meningkatkan kesatuan itu untuk mendorong suatu tindakan.
Prinsip desain visual membantu kita memahami komposisi visual. Prinsip dasar desain meliputi:
- Ruang : Dalam desain web, ini sering disebut sebagai "ruang putih", atau area antar elemen.
- Hirarki : Pentingnya beberapa elemen dalam kaitannya dengan yang lain.
- Kontras : Bagaimana elemen yang berbeda dapat menciptakan komposisi yang lebih kohesif.
- Skala/Proporsi : Hubungan antara ukuran elemen.
Cara belajar web desain
1. Memahami konsep kunci desain visual
Garis : Setiap huruf, batas, dan pembagian dalam tata letak terdiri dari garis-garis yang membentuk strukturnya yang lebih besar. Mempelajari desain web berarti memahami penerapan garis dalam menciptakan keteraturan dan keseimbangan dalam suatu tata letak.Bentuk : Tiga bentuk dasar dalam desain visual adalah persegi, lingkaran, dan segitiga. Kotak dan persegi panjang berfungsi untuk blok konten, lingkaran berfungsi untuk tombol, dan segitiga sering digunakan untuk ikon yang menyertai pesan penting atau ajakan bertindak.
Tekstur : Tekstur mereplikasi sesuatu di dunia nyata. Melalui tekstur, kita mendapatkan gambaran apakah sesuatu itu kasar atau halus. Tekstur dapat dilihat di seluruh desain web.
Dari latar belakang seperti kertas hingga gumpalan warna-warni dari Gaussian blur, perhatikan berbagai jenis tekstur yang dapat membuat desain Anda lebih menarik dan dapat memberi kesan fisik.
Warna : Untuk membuat desain yang tidak melelahkan mata, Anda harus mendidik diri sendiri dalam teori warna. Memahami roda warna, warna pelengkap, warna kontras, dan emosi yang terkait dengan warna berbeda akan membuat Anda menjadi desainer web yang lebih baik.
kisi-kisi Grid berakar pada hari-hari awal desain grafis. Mereka berfungsi sangat baik dalam menertibkan gambar, teks, dan elemen lain dalam desain web. Pelajari cara menyusun tata letak web Anda menggunakan kisi.
2. Mengerti dasar-dasar HTML
Hypertext markup language (HTML) memberikan arahan tentang bagaimana konten, gambar, navigasi, dan elemen lain dari situs web ditampilkan di browser web/blog seseorang.Meskipun Anda tidak perlu menjadi ahli dalam HTML, namun tetap membantu untuk mengetahui cara kerjanya, seperti yang anda lihat di blog sederhana WQ, menggunakan Html .
Tag HTML adalah instruksi yang digunakan browser untuk membuat situs web. Judul, paragraf, tautan, dan gambar semuanya dikendalikan oleh tag ini.
Anda terutama ingin mengetahui bagaimana tag header seperti tag H1, H2, dan H3 digunakan untuk hierarki konten. Selain memengaruhi struktur tata letak, tag tajuk penting dalam cara perayap web mengklasifikasikan desain dan memengaruhi cara mereka muncul di peringkat penelusuran organik.
3. Pahami CSS
CSS (atau cascading style sheets) menyediakan gaya dan instruksi tambahan tentang bagaimana elemen HTML akan muncul. Melakukan hal-hal seperti menerapkan font, menambahkan padding, menyetel perataan, memilih warna, dan bahkan membuat kisi semua dimungkinkan melalui CSS.intinya CSS merupakan baju untuk sebuah web/blog. Mengetahui cara kerja CSS akan memberi Anda keterampilan untuk membuat situs web yang terlihat unik dan menyesuaikan template yang ada.
4. Biasakan diri anda dengan UI
Sama seperti tombol dan mekanisme lain di dunia nyata yang memungkinkan seseorang untuk berinteraksi dengan mesin, elemen antarmuka pengguna di situs web memungkinkan seseorang untuk melakukan tindakan.Mari kita tinjau dua prinsip utama UI: desain intuitif dan kesederhanaan :
1. Cara membuat antarmuka intuitif
Berinteraksi dan terlibat dengan situs web harus konsisten dan mengikuti pola yang berulang. Orang yang membuka situs web harus segera memahami sistem yang ada dalam menavigasinya.
2. Jadikan UI sesimple mungkin
UI ada untuk mengoptimalkan kegunaan. Ini berarti membuat kontrol mudah digunakan, serta jelas fungsinya. Baik Anda meminimalkan jumlah opsi navigasi, mempercepat proses checkout, atau mengintegrasikan elemen interaktif lain yang meningkatkan aksesibilitas, memahami UI akan membantu Anda menyederhanakan pengalaman seseorang dalam berinteraksi dengan situs web.
5. Memahami dasar-dasar tata letak
Mengetahui pola desain akan membantu Anda membuat situs web yang memiliki aliran konten dan visual yang lancar. Dua pola tata letak web umum yang perlu Anda ketahui adalah pola-Z dan pola-F.1. Z-pola : Untuk tata letak dengan penghematan kata dan gambar serta ruang negatif dalam jumlah besar, pola-Z merupakan cara yang efisien untuk menjelajahi situs web. Saat Anda mulai memperhatikan ke mana mata Anda melihat sebuah desain, Anda akan langsung mengenali ketika pola-Z ada di tempatnya.
2. F-pola : Desain berat pada teks, seperti untuk publikasi online atau blog, sering mengikuti pola-F yang berbeda. Di sisi kiri layar, Anda akan melihat daftar artikel atau posting, dan di badan utama halaman, Anda akan melihat deretan informasi terkait. Pola ini dioptimalkan untuk memberi orang semua informasi yang mereka butuhkan, bahkan jika mereka dengan cepat melihatnya.
6. Pelajari tentang tipografi
Font dapat memberikan nada atau emosi yang berbeda serta memengaruhi keterbacaan. Jika Anda belajar tentang desain web, mengetahui cara menggunakan tipografi sangat penting.Tipografi melayani beberapa tujuan dalam desain web. Pertama, ini melayani tujuan utilitarian untuk membuat konten dapat dibaca. Tapi itu juga bisa berfungsi sebagai dekorasi, dan penggunaan tipografi bergaya dapat menambah estetika keseluruhan.
Berikut adalah tiga konsep dasar tipografi yang harus Anda ketahui :
- Serif : Jenis huruf serif memiliki garis sangat kecil yang dikenal sebagai serif yang menghiasi setiap huruf. Gaya tipografi ini dapat ditelusuri kembali ke cetakan.
- Sans-serif : Seperti namanya, tipografi sans serif tidak memiliki garis pengidentifikasi dari tipografi serif. Jenis huruf ini ditemukan melalui ranah digital situs web dan aplikasi.
- Display : Tampilan tipografi sering digunakan untuk tajuk utama dan bisa besar dan berdampak atau dibuat dari garis tipis dan tajam. Mereka biasanya memiliki bentuk huruf yang canggih dan dimaksudkan untuk menarik perhatian seseorang.
7. Ide dan gagasan anda
Anda dapat menonton tutorial, membaca posting blog, mendaftar di kursus online, dan menyerap semua teori dan informasi yang Anda dapat tentang desain web, tetapi satu-satunya cara untuk menjadi desainer web adalah dengan mulai mendesain web. Dan imolementasikan semua ide anda dalam webdesaign.8. Dapatkan mentor belajar
Mentor sangat berharga karena mereka pernah berada di tempat Anda berada — pada awalnya — dan memiliki keinginan untuk membantu Anda melalui pelajaran yang diperoleh dengan susah payah yang telah mereka pelajari.Mereka memiliki keahlian dan pengetahuan yang dalam. Mereka adalah sumber yang bagus untuk mendapatkan umpan balik tentang pekerjaan Anda dan menemukan apa yang Anda lakukan dengan benar dan apa yang perlu ditingkatkan.
9. Pelajari dasar UX
UX adalah keajaiban yang menghidupkan situs web, mengubahnya dari susunan elemen statis menjadi sesuatu yang melibatkan emosi seseorang yang menelusurinya.Skema warna, konten, tipografi, tata letak, dan visual semuanya bersatu untuk melayani audiens Anda. Desain pengalaman pengguna adalah tentang presisi dan membangkitkan perasaan.
Ini menawarkan seseorang tidak hanya perjalanan yang mulus tetapi juga pengalaman yang menghubungkan mereka dengan entitas atau merek di balik desain web.
Berikut ini adalah prinsip UX :
- User personas
- Information architecture
- User flows
- Wireframes
10. Pelajari Javascript
JavaScript adalah bahasa pemrograman berbasis logika yang dapat digunakan untuk memodifikasi konten situs web dan membuatnya berperilaku dengan cara yang berbeda dalam menanggapi tindakan pengguna.Mempelajari Javascript untuk web desagn tidak ada ruginya, justru ini sangat membantu tugas anda dalam membuat web desain bila di perlukan bisa menjadi solusi.
Yang memungkinkan pengembang web mendesain situs interaktif. Menurut pribadi belajar webdesaign HTML,CSS,Javascript sudah sepaket komplit.
Sebagian besar perilaku dinamis yang akan Anda lihat di halaman web adalah berkat JavaScript, yang menambah kontrol dan perilaku default browser.
Demikan langkah-langkah untuk memulai belajar webdesaign. Tentu saja, begitu banyak yang dibutuhkan untuk membuat desain web yang bagus.
Mempelajari dasar-dasar di balik desain visual, dasar-dasar UI dan UX, dan mengetahui bagaimana fungsi ujung depan dan ujung belakang akan menjadikan Anda seorang desainer yang lebih berpengetahuan luas.
