Cara Mendesain Ulang Situs Web Agar Terlihat Luar Biasa di Ponsel
Diterbitkan: 2016-01-24[ Proto .io adalah alat pembuatan prototipe aplikasi seluler yang digunakan oleh pengusaha dan pemula untuk membuat prototipe realistis yang sepenuhnya interaktif yang terlihat dan terasa seperti aplikasi nyata.]
Lima belas tahun yang lalu, mendesain ulang situs web adalah upaya yang jauh lebih mudah – Anda cukup memutuskan bagaimana tampilan desktop Anda, mengatur konten Anda sesuai dengan itu, dan membangun situs web. Luar biasa, beberapa situs web masih kekurangan pengalaman seluler yang sebenarnya, baik itu desain ulang situs web yang terpisah sama sekali atau desain responsif yang terencana dengan baik.
Desain terkadang terasa seperti permainan mengejar ketinggalan tanpa akhir, tetapi pakar aplikasi seluler ini dapat membantu memandu Anda melalui proses mendesain ulang pengalaman web Anda sehingga tampak hebat di perangkat, desktop, atau seluler apa pun.
Cara Mendesain Ulang Situs Web untuk Pengalaman Seluler yang Tampan
Handsome (@HandsomeMade) adalah perusahaan desain dan teknologi yang nilai-nilai intinya meliputi “pemikiran yang berpusat pada manusia di setiap tingkat” dan “perangkat lunak yang sengaja dibuat indah dan menyenangkan.” Direktur Kreatif Brandon Termini dan Direktur Teknis Alex Zub menjelaskan bagaimana mereka menerapkan prinsip-prinsip tersebut pada desain ulang situs web seluler:
Kata Termini, kunci untuk mendesain ulang situs web Handsome adalah dengan mengambil “pendekatan desain yang mengutamakan seluler”, membuat pengalaman pengguna seanggun dan semudah mungkin digunakan. “Salah satu cara kami menerapkan desain mobile-first adalah memulai dengan ukuran layar yang lebih kecil, yang memaksa kami untuk menyederhanakan antarmuka sebanyak mungkin dan hanya menempatkan apa yang paling penting di layar.”
Zub menambahkan, “Memanfaatkan teknologi dan praktik terbaik – seperti desain responsif dan desain adaptif, dengan implementasi teknis yang kompatibel – adalah kuncinya. Untuk banyak produk, masuk akal untuk tetap menggunakan sistem grid responsif, yang menyederhanakan upaya yang diperlukan untuk membuatnya, sambil mempertahankan tampilan yang bagus di semua jenis layar.”
Cara Mendesain Ulang Website agar Terlihat Cantik di Ponsel
Kami meminta Termini untuk membagikan beberapa praktik terbaik desain visualnya. “Ada ratusan hal yang harus dan tidak boleh kami lakukan selama bertahun-tahun,” katanya. Ini adalah tiga praktik terbaik teratas yang dia terapkan di tampan:
- Pikirkan baik-baik ke dalam hierarki tata letak Anda. “Tata letak yang berhasil berarti bahwa pengguna harus dapat memandu Anda melalui apa yang mereka lihat/baca dalam urutan yang Anda inginkan. Penggunaan ruang putih yang baik, teori warna, tipografi, dll. Semuanya memainkan peran penting dalam hal ini.”
- Gunakan warna dengan tepat. “Pilih warna yang sesuai untuk merek Anda dan pastikan warnanya selaras dengan baik. Gunakan warna pahlawan yang Anda kaitkan dengan elemen UI penting seperti tombol ajakan bertindak. Pastikan Anda menggunakan warna dengan hemat di tempat yang tepat yang membuat pengguna Anda mengalir melalui antarmuka dan tidak macet.”
- Tipografi harus nyaman di mata. “Pastikan tipografi Anda sesuai untuk merek dan dapat dibaca pada perangkat yang Anda rancang, dan gunakan jenis ornamen dengan hemat.”
Menguji Desain Ulang Situs Seluler Anda
Tentu saja, setelah Anda membangun situs seluler, Anda harus melakukannya untuk memastikan pengalaman pengguna yang luar biasa. Kata Termini, “Sering melakukan pengujian dan penyesuaian sangat penting. Mulai pengujian segera setelah Anda menunjukkan sketsa gambar tangan pertama dengan calon pengguna, dan terus uji selama proses Anda, hingga sistem yang dirancang sepenuhnya. Disiapkan untuk dapat mendengar, mensintesis, dan mengulangi umpan balik sangat penting untuk keberhasilan produk apa pun.”
Direkomendasikan untukmu:
Apa Arti Ketentuan Anti-Profiteering Bagi Startup India?
Bagaimana Startup Edtech Membantu Tenaga Kerja India Meningkatkan Keterampilan & Menjadi Siap Masa Depan...
Saham Teknologi Zaman Baru Minggu Ini: Masalah Zomato Berlanjut, EaseMyTrip Posting Stro...
Startup India Mengambil Jalan Pintas Dalam Mengejar Pendanaan
Platform Pemasaran Digital Logicserve Bags Pendanaan INR 80 Cr, Berganti Nama Sebagai LS Dig...
Laporan Memperingatkan Pengawasan Peraturan yang Diperbarui Pada Lendingtech Space
Zub menambahkan, “Jaminan kualitas merupakan bagian penting dalam membangun produk yang digunakan pada berbagai jenis perangkat. Dan karena hampir tidak mungkin untuk memiliki setiap perangkat yang memungkinkan di kantor, kami menggunakan layanan online yang menyediakan akses ke lusinan perangkat 'virtual' di cloud, mengotomatiskannya sebanyak mungkin. Dengan investasi otomatisasi yang tepat, melakukan pengujian lintas perangkat dengan mudah dan cepat.”
Kami ingin mempelajari lebih lanjut tentang cara menguji dan QA desain ulang situs web seluler. Untuk itu, kami mendengar dari Simon Papineau, CEO Crowdsourced Testing(@crowdsourcingqa). Papineau membuat Crowdsourced Testing untuk mengatasi beberapa masalah yang dia temui dalam pengalamannya menguji berbagai aplikasi seluler, situs web, game, dan banyak lagi.
Apa yang Berfungsi di Desktop Tidak Selalu Berfungsi di Seluler — Dan Sebaliknya
Papineau berkata, “Satu hal yang cenderung dilupakan oleh pengembang adalah Anda tidak memerlukan kedalaman yang sama atau konten yang sama di situs seluler Anda dengan yang akan Anda tampilkan di situs desktop Anda. Maksud, pola pikir, dan tujuan pengguna ponsel sangat berbeda. Pengunjung tidak akan menghabiskan 20 menit di telepon mereka membaca tentang sejarah perusahaan Anda dan cetakan halusnya.
Sebaliknya, berikan apa yang mereka inginkan secara langsung dan secepat mungkin. Jika itu informasi kontak Anda, letakkan itu langsung di beranda tanpa tambahan apa pun. ”
Salah satu tantangannya, kata Papineau, adalah memastikan bahwa desain ulang situs web seluler Anda akan terlihat bagus dan berkinerja baik di banyak perangkat: “Pengujian untuk melihat apakah situs web responsif bisa sangat memakan waktu dan mahal. Hal terbaik yang dapat dilakukan perusahaan adalah fokus pada 15-20 perangkat teratas yang mewakili sebagian besar kunjungannya. Akan selalu ada perangkat seluler di mana situs tidak terlihat sempurna. Tetapi jika perangkat itu mewakili 0,05% pengunjung Anda, itu mungkin tidak sebanding dengan upaya pengembangan ekstra.
Cara Mendesain Ulang Situs Web Menggunakan Desain Responsif
Bob Bentz adalah presiden ATS Mobile (@atsMobile), agen pemasaran seluler layanan lengkap yang mengawasi desain ulang situs web untuk klien di berbagai industri. Bentz bersemangat untuk memastikan bahwa pengalaman situs web terlihat dan terasa sama bagusnya di perangkat seluler seperti halnya pada monitor desktop resolusi tinggi, dan salah satu cara utama ATS Mobile menyelesaikannya untuk kliennya adalah dengan menggunakan desain responsif.
Mengapa Desain Responsif? Sebuah Primer
“Desain web responsif (RWD), paling umum dirancang dengan HTML5, akan menjadi pilihan yang mungkin di hampir semua pembuatan web seluler baru,” kata Bentz. “Itu juga dapat dirancang menggunakan CSS3 dan Javascript. Desain responsif memiliki keunggulan mencolok karena sangat fleksibel karena dapat berubah dengan lancar untuk mengakomodasi perangkat apa pun. RWD bekerja dengan mengirimkan kode yang sama, apa pun perangkatnya, dan kemudian mengaturnya kembali di sisi klien, sehingga memungkinkan halaman web yang sama ditampilkan di perangkat apa pun.”
Untuk melihat desain responsif beraksi, tarik posting blog ini di layar desktop, jika Anda belum melakukannya (kami akan menunggu!). Anda akan melihat bahwa ada beberapa ukuran jendela di mana antarmuka pengguna "rusak" dan mengatur ulang sendiri, sehingga halaman terlihat berbeda berdasarkan perangkat apa yang Anda gunakan (dan seberapa besar jendela di dalam perangkat itu).
Jadi bagaimana tepatnya cara kerja desain responsif — dan mengapa Anda harus menggunakannya untuk mendesain ulang situs web Anda? “Desain ulang situs web responsif menyajikan kode HTML yang sama pada URL yang sama, terlepas dari apakah perangkat pengguna adalah desktop, tablet, phablet, smartphone, ponsel menengah, atau perangkat yang dapat dikenakan (seperti Apple Watch),” kata Bentz. “Itu juga dapat merespons secara berbeda berdasarkan ukuran layar situs. Pengembang dapat memutuskan grafik dan konten mana yang akan digunakan untuk pengguna ponsel dan tablet. Teks dan gambar dapat disesuaikan berdasarkan browser atau ukuran layar apa pun.”
Dengan desain responsif, Anda menjamin diri Anda untuk tidak membuat pembaruan baru setiap kali ada perubahan pada status quo perangkat seluler. “Ketika perangkat baru memasuki pasar dan mengakses situs web Anda, tidak ada pemrograman tambahan yang diperlukan jika situs tersebut dibuat dengan desain responsif,” kata Bentz. “Namun, yang paling penting, desain responsif adalah praktik terbaik desain yang direkomendasikan Google. Untuk banyak situs web, RWD mencapai keseimbangan yang wajar antara keramahan seluler dan kemudahan implementasi.”
Praktik Terbaik dalam Desain Visual Responsif
Menurut Bentz, dengan mempertimbangkan praktik terbaik berikut ini akan membantu membuat desain ulang situs web responsif Anda terlihat dan beroperasi sebaik mungkin:
- Sebuah sundulan yang sederhana dan mencolok. “Header dan masthead harus sederhana agar tidak menghilangkan nilai jual utama. Logo adalah citra merek utama; logo yang terlalu horizontal mungkin tidak terlihat bagus di layar vertikal yang lebih kecil.”
- Navigasi yang mudah digunakan. “Navigasi jauh lebih rumit di layar kecil. Seringkali, desainer akan menggunakan tombol navigasi yang ditunjukkan oleh tiga garis horizontal, biasanya di kanan atas situs. Ini disebut "menu hamburger," karena terlihat seperti burger yang dikelilingi oleh roti. Beberapa situs menggunakan navigasi sisi kiri yang dapat diperluas ke luar untuk menutupi sebagian besar layar.”
- Banyak gambar. “Sulit untuk memasukkan terlalu banyak gambar di layar ponsel, tetapi kata-kata dapat dengan cepat membanjiri UI. Oleh karena itu, desainer sering menggunakan carousel gambar yang memungkinkan pengguna untuk menggesek beberapa gambar produk alih-alih menjepit layar dengan salinan.”
- Penggunaan footer yang cerdas. “Konsumen terbiasa menggunakan footer sebagai alat navigasi, dan itu tidak memakan tempat yang berharga seperti header flip atas. Itu juga harus menyertakan tautan 'Hubungi Kami' yang sangat penting.”
Desain Ulang Situs Web yang Cantik Dimulai dengan Prototipe yang Cantik
Mempelajari cara mendesain ulang situs web untuk seluler bukanlah prestasi kecil, tetapi memiliki alat prototipe cepat yang kuat untuk membantu Anda menguji pengalaman membuat perbedaan terbesar. Setelah memangkas salinan, mengurangi elemen, dan mencari tahu skema navigasi Anda, Anda dapat dengan cepat mendapatkan umpan balik dari pengguna tentang apakah desain ulang situs web seluler Anda masih dapat digunakan dan intuitif. Kemudian, seperti yang disarankan Termini, terus lakukan iterasi sampai Anda memiliki prototipe yang benar-benar Anda banggakan.