Saya benar-benar tertarik mempelajari cara membuat UI kedudukan tertinggi untuk situs web, aplikasi seluler, dll.
Oke, itu topik yang luas. Anda ingin membuat situs web "cantik", "kedudukan tertinggi", terlihat profesional. Jadi, Anda perlu tahu apa yang membuat orang menganggap sesuatu sebagai "indah", bukan? Beruntung bagi Anda, kecantikan tidak terlalu subjektif.
Salah satu kunci untuk desain visual yang indah adalah harmoni .
Kurangnya harmoni adalah apa yang membuat desain Anda terlihat amatir.
Dan, hal terbaik adalah bahwa harmoni visual datang ke matematika. Ini bukan tentang memiliki firasat.
Seperti yang telah ditunjukkan orang lain, saya akan merekomendasikan merancang situs web sendiri. Cobalah untuk menerapkan prinsip-prinsip desain yang Anda pelajari alih-alih menggunakan kerangka kerja yang siap pakai. Mungkin sulit pada awalnya, tetapi itu akan membantu Anda menjadi lebih baik.
Bagaimana menanamkan harmoni dalam desain situs web
Berikut ini adalah contoh praktis dan latihan kecil yang lucu yang dapat Anda lakukan sekarang.
Salah satu cara yang saya pribadi sukai adalah menggunakan skala modular untuk mengukur elemen-elemen situs web dalam proporsi yang harmonis. Situs web yang dapat membantu Anda menghasilkan skala modular adalah ini: modularscale.com
Manfaat menggunakan skala modular adalah dapat membuat keputusan ukuran semudah memilih nomor dari skala.
Misalnya, mari kita ukur judul situs web (untuk mengkomunikasikan hierarki visual).
Katakanlah kita memiliki skala modular ini berdasarkan ukuran font tubuh 19px yang saya pilih (19px karena terlihat paling baik dengan font yang saya gunakan, tetapi Anda dapat melewati langkah ini dan pergi dengan ukuran 16px default) dan rasio 1,412 (Tidak perlu masuk ke perincian mengapa saya memilih rasio ini. Rasio apa saja akan lebih baik daripada tidak ada rasio untuk proyek Anda.):
Melihat itu, saya akan memilih H1 menjadi 2,815em, H2 menjadi 1,994em dan H3 menjadi 1,412em. 3 angka pertama lebih besar dari ukuran font tubuh. Mudah sekali, kan? Teks isi akan 1em (dalam kasus saya 19px). Lalu, saya akan mengukur H4-H6 pada 1em dan menggunakan kontras (berat font atau gaya berbeda) untuk membedakannya dari teks isi.
Jadi, coba ini sekarang:
- Hasilkan skala modular Anda sendiri
- Dapatkan dokumen HTML biasa (konten asli, mohon jangan Lorem Ipsum)
- Gunakan skala untuk mengukur pos.
- Kemudian coba gunakan skala untuk keputusan ukuran lain (margin, paddings, dll)
Itu hanya langkah kecil menuju desain yang lebih baik, tetapi saya berharap ini akan membantu Anda.
Jika menurut Anda ini bermanfaat, Anda dapat membaca daftar 7 tips saya yang lain untuk perancang web pemula yang tahu HTML dan CSS
PS: Anda benar-benar harus banyak membaca
Seperti kata orang lain, baca:
- Elemen Desain Grafis oleh Alexander White
- The Elements of Typographic Style oleh Robert Bringhurst
- Don't Make Me Think oleh Steve Krug
Juga, di sini daftar besar sumber daya online seperti blog dan komunitas yang perlu diperhatikan: enboard.co/webdesign/