Desain Web Dilakukan dengan Baik: Yang Biasa Dibuat Luar Biasa (Bagian 1)

Ide-ide hebat dalam desain web datang begitu tebal dan cepat sehingga mudah terlewat jika Anda tidak berhati-hati. Seri ini adalah penangkal kecil untuk itu, menyatukan percikan inspirasi yang menarik perhatian kita. Baik itu fitur baru yang mencengangkan atau sekadar trik lama yang dihadirkan dengan keanggunan baru, semuanya memiliki kualitas yang membuat kita berpikir sedikit berbeda.

Baru-baru ini saya menulis sebuah artikel yang memuji karya Saul Bass di dunia desain web . Salah satu hadiahnya yang luar biasa adalah membuat detail terkecil menjadi indah. Dengan semangat yang sama kami memulai seri ini dengan mengasah tren situs web dan fitur yang biasa kami gunakan untuk menjadi membosankan. Seperti yang akan Anda lihat, mereka tidak perlu begitu. Triknya sering di eksekusi. Apa saja bisa menjadi indah. Mengapa bertujuan untuk sesuatu yang kurang dari itu?

Halaman Dalam Halaman Glasgow International

Kami terbiasa dengan banyak pengguliran akhir-akhir ini, tetapi situs web festival Internasional Glasgow telah menemukan cara yang sederhana dan cerdas untuk menggaruk gatal itu sambil menyingkat halaman:

Di perangkat seluler, tiga bagian yang sama membentuk satu kolom besar. Ini adalah solusi cerdas untuk hubungan seluler / desktop, dan juga yang cukup bergaya. (Berteriak ke tombol 'Dukungan', yang mulai berputar saat Anda mengarahkan kursor ke atasnya.)

CSS di balik ini cukup sederhana. Ketiga bagian tersebut berada di dalam wadah fleksibel, dengan ketiganya berbagi nilai overflow-y: auto; dan height: 100vh; agar selalu sesuai dengan area pandang desktop. Sentuhan yang sangat bagus di sini menggunakan scrollbar-width: auto; untuk menghapus sidebar. Karena kolom memenuhi seluruh layar, Anda secara intuitif mengetahui cara kerja halaman segera setelah Anda menggerakkan mouse.

Portofolio Pembengkokan Dimensi Kenta Toshikura

Situs baru-baru ini minggu ini di Awwwards, situs web portofolio ini oleh pengembang frontend Jepang Kenta Toshikura sungguh menakjubkan:

Jika ragu, kecenderungannya adalah condong ke pengaturan modular dan datar, tetapi mungkin kita harus berpikir dalam tiga dimensi lebih sering. Ini adalah contoh luar biasa dari pemikiran lateral yang mengubah apa yang dulunya merupakan kolom kotak menjadi sesuatu yang benar-benar berkesan.

Kita mungkin tidak semua diperlengkapi untuk melakukan sesuatu yang semewah ini (tentu saja tidak), tetapi perlu diingat bahwa halaman web bukanlah kanvas kosong, melainkan jendela ke dimensi alternatif.

Dokumentasi Stripe Adalah Guru Yang Kita Semua Inginkan

Dokumentasi terlalu sering menjadi salah satu korban pertama dari kecepatan Web yang sangat cepat. Tidak perlu. Saya tidak ragu menyebut dokumentasi Stripe indah:

Saya yakin sebagian besar dari kita memiliki dasar melalui dokumentasi yang cukup buruk untuk menghargai upaya yang dilakukan dalam pendekatan ini. Navigasi yang jelas dan hierarkis untuk konten, salinan langkah demi langkah berukuran kecil, dan tentu saja cuplikan kode. Pratinjau dinamis kode di berbagai platform dan bahasa ada di atas dan di luar, tetapi mengapa tidak?

Ada beberapa hal yang lebih berharga – dan lebih sulit dipahami – daripada sumber belajar yang berkualitas. Stripe menunjukkan bahwa ada banyak kemungkinan online di luar kata-kata standar di sebuah halaman. Saya telah membagikan ini sebelumnya (dan saya akan membagikannya lagi) tetapi Panduan dokumentasi Write the Doc adalah sumber yang bagus untuk menyajikan konten informatif dengan cara yang dinamis dan berguna.

Technicolor Dream Max Böck

Ada banyak hal yang disukai tentang situs web pribadi Max Böck , tetapi untuk tujuan artikel ini, saya mengasah skema warna. Sebagian besar situs web memiliki satu skema warna.

Terang dan gelap adalah hal baru yang normal, tetapi seperti yang ditulis Böck sendiri dalam postingan blognya tentang pengalih tema , hanya Sith yang berurusan dengan absolut. Melalui properti kustom CSS ajaib, situs beralih di antara skema warna dengan mulus. Untuk perincian lengkap tentang cara kerjanya, saya dengan tulus merekomendasikan membaca posting lengkap yang ditautkan di atas. Dan untuk membaca lebih lanjut tentang properti kustom, Smashing juga memiliki banyak hal:

Tema diberi nama setelah trek Mario Kart 64 , jika Anda bertanya-tanya. Kecuali Hacker News. Itu dinamai Hacker News , dengan sentuhan luar biasa menambahkan 'dianggap berbahaya' di akhir setiap judul posting blog Böck.

Ini adalah twist yang menyenangkan pada dikotomi terang / gelap tradisional, dan juga berbicara tentang bagaimana situs fluid bisa saat ini . Dasar yang sama dapat memungkinkan Anda menyesuaikan skema warna tergantung dari mana orang mengunjungi situs, misalnya.

Overpass Menjual Penjualan

Penjualan bukanlah sektor yang meneriakkan inovasi, tetapi kredit di mana kredit jatuh tempo. Korsel Overpass memantul dan menyusut serta mengembang dengan sangat mulus sehingga hampir terasa seperti Anda berinteraksi dengan sesuatu yang dapat diraba, seperti karet gelang.

Di sini, touch-action dan translate3d() ) digunakan untuk efek yang hebat, membuat wadah kartu menjadi sesuatu yang dapat diseret secara efektif di sekitar layar. Jika wadah diambil, semua kartu menggunakan scale(0.95) ) untuk menyusut sedikit sampai pengguna melepaskannya. Ini memberi carousel rasa kedalaman dan ringan yang indah.

Klip audio adalah sentuhan yang bagus. Integrasi multimedia telah menjadi tema yang sedang berjalan dalam contoh-contoh ini. Selalu meletakkan dasar aksesibilitas, tetapi tetaplah berani. Pada tahap ini, satu-satunya batasan nyata adalah imajinasi kita.

E-Commerce Bertemu Bercerita Panjang Di Mammut

Dari Steve Jobs hingga Seth Godin, sering dikatakan pemasaran adalah permainan mendongeng . Ini adalah sesuatu yang tampaknya dilupakan oleh banyak situs web e-niaga, masing-masing menyajikan halaman demi halaman produk glossy yang mengambang di depan latar belakang putih sempurna. Anda hampir dapat mendengar suara isap corong konversi yang mencoba menarik Anda masuk.

Sungguh menyegarkan saat melihat perusahaan seperti Mammut melakukan semuanya dalam mendongeng untuk menjual produk pendakiannya. Artikel ekspedisi bentuk panjang mereka sama imersifnya dengan fitur New York Times terbaik, dengan klip audio, peta, dan, tentu saja, fotografi yang menakjubkan. Perlengkapan Mammut tentu saja memiliki banyak fitur, tetapi dilakukan dengan cara yang menarik. Lebih penting dari itu, ini asli .

Meskipun ada beberapa gaya super apik yang terjadi di sini, itu bukan alasan saya memasukkannya. Di satu sisi, sungguh luar biasa betapa impersonalnya sebagian besar Web saat ini, dengan e-commerce menjadi pelanggar yang sangat berat.

Ini adalah hal yang akan dibagikan orang-orang meskipun mereka tidak tertarik untuk membeli perlengkapan mendaki gunung. Ini konten yang luar biasa. Postingan influencer Instagram terlihat seperti permainan anak-anak dibandingkan dengan ini. Apakah petunjuk untuk berbelanja itu membawa Anda ke checkout e-commerce bersih yang melengking di atas? Tentu saja. Tapi, demi Tuhan mereka mendapatkannya. Tidak semua orang memiliki sumber daya untuk sesuatu yang canggih ini, tetapi ini menunjukkan bahwa e-commerce tidak harus steril dan tidak bernyawa .

Axeptio Membuat Cookiesnya Lezat

Anda tidak dapat mengayunkan kucing tanpa menekan pop-up penafian saat ini. Aneh, kemudian, begitu banyak dari mereka yang sangat jelek. Lebih sering daripada tidak, mereka merasa terpaku dan tidak bersyukur. Sekarang, untuk bersikap adil, itu karena mereka melekat dan tidak anggun, tetapi beberapa benar-benar ada hanya untuk Meningkatkan Pengalaman Penjelajahan Anda ™.

Alih-alih memperlakukan pop-up cookie-nya seperti bau yang tidak sedap, penyedia solusi izin web Axeptio berjalan dengan membuatnya terlihat gaya, dan bahkan agak menawan. Dengan GDPR (dan kesopanan dasar ) untuk dipikirkan, penting untuk merangkai desain etis ke dalam struktur situs web.

Sentuhan yang bagus adalah itu tidak benar-benar muncul sampai pengguna mulai bergerak di sekitar situs. Mengapa mengganggu orang jika mereka bahkan tidak tertarik dengan kontennya? Perhatikan juga bahwa mereka telah meninggalkan istilah cookie boilerplate demi sesuatu yang lebih bersifat percakapan.

Memang, ini mungkin tidak membuat hal biasa menjadi 'luar biasa' persis, tetapi itu membuatnya jauh lebih berkelas . Ini sentuhan kecil, tapi yang membuat kesan pertama sangat baik. Tanpa menyentuh mouse, saya sudah merasakan perhatian Axeptio terhadap detail dan komitmen terhadap kualitas. Munculan kotak-kotak bertuliskan 'Kami peduli tentang privasi Anda' akan memberikan kesan yang sangat berbeda.

Sejauh cookie dan pop-up diperlukan, kami mungkin juga memilikinya. Hal yang sama berlaku untuk bahan pokok tidak seksi lainnya di web modern. Apakah formulir persetujuan hukum, pendaftaran email, dan halaman privasi harus jelek dan mengelak, atau apakah kita hanya perlu berpikir sedikit berbeda ? Bagikan pemikiran Anda di bawah ini!

April 22, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *