Tutorial Cara Menciptakan Desain Web Responsif
tutorial cara membuat desain web responsif
Desain web responsif kini lebih gampang untuk diimplementasikan alasannya ada begitu banyak alat jago untuk membantu Anda membuat dan menguji desain Anda, dan memastikan Anda membuat pengalaman pengguna terbaik. Berikut ini ialah putaran kami beberapa sumber daya terbaik yang akan memandu Anda dalam membuat situs web Anda berfungsi dengan baik dan tampak jago di perangkat apa pun.
01. Aturan tipografi web responsif
Tipografi web responsif sangat sulit - Anda harus mempunyai desain daging dan pengetahuan teknis. Tapi betapapun rumitnya, salah itu bukanlah pilihan, alasannya tipografi ialah landasan desain web. Ikuti prinsip-prinsip desain dan solusi mudah ini untuk memperbaikinya.
2. Desain situs responsif dengan ukuran berbasis em
Dengan memakai unit em untuk ukuran font, Anda sanggup merancang komponen pada halaman yang merespons secara otomatis bila ukuran font berubah. Kemudian, dengan trik cerdas untuk ukuran font responsif, Anda sanggup menghasilkan seluruh halaman yang menyesuaikan secara dinamis menurut lebar viewport browser. Pelajari cara memanfaatkan sikap 'relatif' mereka untuk membuat desain yang sanggup diskalakan dan responsif.
03. Panduan prioritas: alternatif konten-pertama untuk gambar rangka
Wireframes mungkin merupakan alat yang paling banyak dipakai untuk mendesain situs web, aplikasi, dan antarmuka digital lainnya, tetapi mereka bukan tanpa kekurangannya, terutama dalam hal desain responsif. Di sini Heleen van Nues dan Lennart Overkamp memperkenalkan alternatif pilihan mereka untuk gambar rangka: panduan prioritas, yang berisi konten dan elemen untuk layar ponsel, diurutkan menurut hierarki dari atas ke bawah dan tanpa spesifikasi tata letak.
04. Panduan pro untuk desain web responsif
Ditulis oleh Justin Avery, kurator buletin Responsive Design Weekly, panduan dari majalah internet ini membawa web pro melalui dasar-dasar sampai teknik desain web responsif yang lebih maju.
05. Cara merancang formulir responsif dan agnostik-perangkat
Formulir ialah salah satu elemen paling penting dalam setiap desain produk digital, dan apakah Anda memerlukan aliran registrasi atau stepper multi-view, Anda perlu mendesainnya sehingga itu akan bekerja secara efektif pada perangkat seluler ibarat halnya pada desktop. Inilah cara melakukannya, lengkapi dengan tips bermanfaat wacana cara memakai Flexbox.
06. Buat tata letak responsif dengan CSS Grid
Desainer membuat situs web CSS Grid
Bangun situs portofolio yang tampak jago yang cocok untuk semua viewports
CSS Grid Layout berkembang dalam pinjaman browser setiap hari, dan meskipun itu bukan pengganti untuk Flexbox atau bahkan untuk pelampung, ketika dipakai bersama mereka, itu ialah cara yang anggun untuk membuat tata letak responsif yang gres dan menarik. Ikuti panduan langkah demi langkah untuk membangun situs portofolio responsif memakai Grid.
07. Panduan perancang web untuk Flexbox
Kolom Flexbox ditandai 1 2 3 4 5 dengan panah yang memperlihatkan sumbu utama ialah horizontal
Mulai dengan Flexbox
Sudahkah Anda mulai memakai Flexbox? Dalam tutorial ini Wes Bos menawarkan panduan komprehensif untuk konsep-konsep inti yang akan memberi Anda pemahaman yang berpengaruh wacana semua yang Anda butuhkan untuk memahami alat yang ampuh ini.
08. Referensi Codbox Flexbox
Tangkapan layar Codrops menyampaikan 'Flexbox, atau Tata Letak Kotak Fleksibel, ialah mode tata letak gres di CSS3 yang dirancang untuk menyusun aplikasi kompleks dan halaman web'
Panduan lengkap oleh Sara Soueidan
Panduan lengkap untuk Flexbox ini ditulis oleh Sara Soueidan, seorang penulis yang populer alasannya kemampuannya untuk menjelaskan konsep dengan cara yang gampang diikuti tanpa berhemat pada detail. Panduan Codrops diperbarui secara bersiklus sehingga merupakan sumber yang anggun untuk kembali ke ketika Anda membutuhkannya.
09. Stacks: Flexbox for Sketch
Tangkapan layar artikel sedang menyampaikan 'Tata Letak Otomatis: Memperkenalkan Tumpukan - Flexbox untuk Sketsa'
Dapatkan kapabilitas Flexbox dalam Sketsa
Stacks, bab dari plugin Tata Letak Otomatis, menyediakan cara bagi Anda untuk memakai teknologi Flexbox dalam Sketch, tanpa memakai CSS. Artikel ini menjelaskan bagaimana Anda sanggup memakai teknik yang berpengaruh ini untuk desain responsif yang mudah.
10. Kursus kilat di RWD teknis
Kursus kilat dalam tangkapan layar desain web responsif teknis
Dapatkan pegangan dengan dasar-dasar desain web responsif
Menulis di blog Treehouse, Jerry Cao telah memadatkan banyak gosip mempunyai kegunaan menjadi artikel yang relatif singkat dan gampang dibaca.
11. Buat tata letak yang fleksibel dengan Susy dan Breakpoint
Layar perangkat yang memperlihatkan tata letak situs web responsif diubahsuaikan dengan setiap rasio
Ekstensi Sass untuk mengurus matematika yang responsif
Jika Anda tidak ingin memakai kerangka kerja untuk membangun situs responsif Anda, ekstensi Sass ini ialah alternatif yang bagus, masing-masing dengan kekuatannya sendiri. Mereka akan mengurus matematika responsif untuk Anda sehingga Anda sanggup fokus pada desain.
12. Cara membuat panduan responsif di Adobe XD
Panduan responsif dibentuk dalam Adobe XD
Adobe Experience Design (XD) ialah alat UX dan prototyping
Jika Anda ingin mencoba Adobe Experience Design (XD), berikut ialah tutorial yang baik untuk Anda mulai. Ini termasuk demonstrasi video yang akan membawa Anda melalui setiap klik proses.
13. CSS di BBC Sport
Ini bukan tutorial semata, tetapi ada banyak pembelajaran di sini. Dalam posting ini, yang pertama dari seri dua bagian, pengembang frontend Shaun Bent membawa kita pada tur terperinci wacana bagaimana CSS dilakukan di BBC Sport. Mereka telah berhasil menjaga fondasi CSS dari situs besar ini di bawah 9kb, dan menarik untuk melihat bagaimana itu dilakukan.
14. Sticky footer, lima cara
Tangkapan layar CSS Trik memulai artikel dengan 'Tujuan lengket footer ialah bahwa ia "menempel" ke bab bawah jendela browser'
Cara kaki lengket Chris Coyier
Sticky footer ... itu seharusnya cukup sederhana, bukan? Sayangnya tidak. Ini bisa lebih rumit daripada yang Anda harapkan untuk mendapatkan footer di kawasan yang sempurna di setiap perangkat. Untungnya Chris Coyier telah mengumpulkan lima trik yang akan membantu Anda mewujudkannya memakai calc (), Flexbox, margin negatif, dan Grid.
15. Beradaptasi dengan input
Tabel yang memperlihatkan desain teks yang nyaman, nyaman dan ringkas pada aneka macam ukuran layar
Pastikan situs responsif Anda sanggup mendapatkan input dari perangkat apa pun
Desain responsif bukan hanya wacana membuat tampilan halaman Anda dengan baik di perangkat apa pun, Anda juga harus membuatnya berfungsi dengan baik - dan itu berarti harus arif mendapatkan input di dunia di mana desktop mempunyai layar sentuh dan ponsel mempunyai keyboard. Artikel ini oleh Jason Grigsby dari Cloud Four mempunyai beberapa saran yang masuk akal.
16. Praktik terbaik kami ialah mematikan kinerja web seluler
Cuplikan layar pembacaan artikel 'Aturan kinerja web yang diciptakan untuk susukan web desktop perlu direvisi untuk kurun seluler.'
Pertimbangan kinerja juga perlu untuk seluler
Diterapkan tanpa pertimbangan, praktik terbaik tertentu yang dikandung selama kurun desktop sanggup mempunyai imbas yang merugikan pada kinerja web seluler. Artikel ini akan membuat Anda berpikir lebih dalam wacana bagaimana Anda membuat situs Anda berfungsi dengan baik di ponsel.
17. Cara membuat aplikasi web yang responsif dengan undangan kontainer
Pelajari cara mengubah aplikasi web yang indah dan kompleks - dengan komponen, status, dan interaksi - di aneka macam dimensi dan resolusi, memakai kueri kontainer.
Posting Komentar
Posting Komentar