Desain Web Responsif [ditutup]

Question

Saya seorang desainer otodidak dan belajar saat ini dari IDF. Saya memiliki sedikit keraguan tentang desain responsif.

1. Sebagai seorang desainer, saat saya mendesain layar untuk diberikan kepada pengembang, untuk ukuran apa saya harus mendesain layar? Saya sedang mempertimbangkan semua perangkat dan semua kemungkinan resolusi ... ponsel, laptop (windows, mac), tablet dll.

2. Sumber daya atau tautan yang bagus untuk memahami penggunaan kolom untuk membuat layar.

3. Bagaimana cara menentukan font untuk ukuran yang berbeda? Saya menggunakan panduan Desain Material untuk layar seluler, tetapi bagaimana untuk web? Misalnya, jika saya menggunakan 16px untuk paragraf di layar 1366 * 768, lalu seberapa besar ukuran font untuk 1440, 1920, 3072 (MacBook Pro 16 ")? Saya benar-benar bingung dalam memberi tahu ukuran font kepada pengembang untuk berbagai ukuran layar .

Adakah hal penting lainnya yang dapat membantu saya dalam memahami desain responsif?

Answer 1

1. itu tergantung pada pengembang dan titik putus yang mereka gunakan yaitu. jika pekerjaan dengan bootstrap, titik putus Anda adalah: // Perangkat ekstra kecil (ponsel potret, kurang dari 576px) // Tidak ada kueri media karena ini adalah default di Bootstrap

// Perangkat kecil (ponsel lanskap, 576px dan lebih tinggi) @media (min-width: 576px) {...}

// Perangkat sedang (tablet, 768px dan lebih tinggi) @media (min-width: 768px) {...}

// Perangkat besar (desktop, 992px dan lebih tinggi) @media (min-width: 992px) {...}

// Perangkat ekstra besar (desktop besar, 1200px dan lebih tinggi) @media (min-width: 1200px) {...}

1. https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

2. Secara pribadi saat mendesain tipografi saya menggunakan skala modular: https://www.modularscale.com/?18&px&1.5biasanya untuk versi desktop body text yang bagus berukuran antara 16-20px. Ukurannya tergantung pada konten situs web. Yaitu. jika banyak konten tertulis seperti koran saya akan mempertimbangkan ukuran yang lebih besar. Jika itu adalah dashboard / platform berbasis data, saya akan mempertimbangkan tipografi yang lebih kecil.