Isi
- 01. Sudut2
- 02. MADCLEM
- 03. IBM Plex
- 04. Koboi
- 05. Pecinta Antarmuka
- 06. Google Fonts
- 07. Review Teknologi MIT
- 08. Resn
- 10. Monotipe
- 11. LS Production
- 12. O’Neill
- 13. Hipstamatis
- 14. Apel
Desain halaman arahan yang tepat dapat membuat atau menghancurkan situs web - karena ini adalah hal pertama yang akan dilihat pengunjung Anda. Jika Anda salah, kebanyakan orang tidak akan bertahan.
Desain halaman arahan harus dengan jelas menyampaikan nilai jual unik (USP) untuk produk atau layanan, dan fokus pada satu ajakan bertindak (CTA), seperti meminta pengunjung untuk mendaftarkan detail mereka atau melakukan pembelian. Apa pun tujuannya, terserah pada desain laman untuk mengarahkan pengguna ke sana, baik melalui penggunaan ruang kosong, warna kontras, atau petunjuk arah yang lebih eksplisit. (Dan memiliki alat desain web terbaik akan membantu Anda mencapai ini.)
Header dan sub-header yang jelas dan ringkas serta poin-poin penting yang mudah dipindai adalah urutan hari ini. Halaman landing harus diberi merek yang mencolok, sering kali menyertakan gambar hero untuk mengkomunikasikan produk atau layanan secara sekilas, dan langsung mengarah ke poin agar perhatian pengguna tidak teralihkan.
Dengan mempertimbangkan semua itu, kami telah mengumpulkan beberapa contoh desain halaman landing yang sangat efektif dari seluruh web.
Mencari lebih banyak inspirasi desain? Lihat pilihan halaman kesalahan 404 terbaik kami, dan pasangan font yang sempurna ini.
01. Sudut2
Angle2 adalah agen desain digital Ukraina, dengan tim yang percaya sepenuh hati pada kekuatan merek. Tampaknya tidak ada yang lebih menarik bagi mereka selain membuat pengalaman unik dan dipesan lebih dahulu yang "memancarkan DNA merek Anda" sambil mendorong pembungkus UI.
Rumah online baru untuk layanannya ini pasti mendukung klaim tersebut, tidak hanya memperkenalkan beberapa karya luar biasa tetapi juga dua efek mengagumkan. Membuka ke beberapa font Montserrat besar yang dibasahi dengan # 2AF8EB - atau biru kehijauan bagi manusia - kami mendapatkan latihan tipografi yang layak untuk dinikmati. Trik menjadi fitur di seluruh dan menyampaikan sentimen 'sudut' dengan ilusi teks miring yang luar biasa.
Ini pada dasarnya menggunakan elemen div> kiri dan kanan untuk membentuk pemisahan 50/50 di tengah viewport. Dari sini serangkaian baris teks miring yang dibungkus dengan tag span> telah menerapkan fungsi CSS translate3d dan dianimasikan dengan TweenMax saat mengarahkan kursor. Dengan mengaplikasikan warna kontras di setiap sisi, ini mencapai estetika lipat 45 derajat yang menentukan desain keseluruhan.
Memasukkan warna aksen biru yang cerah ke dalam palet yang sebagian besar hitam dan putih menunjukkan eksekusi yang berkelas juga, dengan kesenangan lebih lanjut disediakan untuk bagian 'The Team' dari potret orang-orang yang tersenyum. Di sini, saat bertransisi di antara setiap foto, Anda akan melihat filter terfragmentasi yang luar biasa yang bekerja dengan baik.
02. MADCLEM
Sejak dimulainya web, pengembang dan perancang telah mendorong dan mendorong di tepi luar dari apa yang mungkin, berusaha melakukan sesuatu yang baru atau menarik dan mendorong kembali ekspektasi tentang apa itu situs web dan cara kerjanya. Eksperimen berjiwa bebas ini adalah ciri khas dari jaring liar yang aneh.
Situs portofolio Clément Chenebault, MADCLEM, mengikuti tradisi bertingkat dalam mendorong batas, mengubah kisi sederhana kotak berwarna-warni menjadi gumpalan cair yang cair dan dapat ditempa. Seluruh situs menekuk dan menggembung dengan setiap gerakan yang Anda lakukan, meluas dan menyusut untuk menunjukkan sekilas potongan portofolio saat Anda menemukan jalan melalui massa agar-agar. Situs ini adalah pulau bergelombang yang menyenangkan di antara lautan yang sering monoton dari portofolio desainer dan pengembang yang tampak sama.
03. IBM Plex
IBM baru-baru ini merilis font kustomnya sendiri, IBM Plex; ini adalah penyegaran pertama jenis huruf perusahaannya sejak 1956, jadi ini masalah besar. Untuk membantu memperkenalkan jenis huruf ke dunia, IBM meminta studio XXIX untuk merancang dan membangun situs web untuk memamerkannya. Pemikiran di balik desain ini adalah menggunakan gambar, animasi, dan fotografi untuk menceritakan kisah Plex sambil menampilkan font dengan cara yang menarik.
Yang hebat adalah banyak situs berfungsi sebagai cara untuk menguji font dan menjelajahi beberapa gaya yang tersedia untuk digunakan. Jadi Anda benar-benar dapat melihatnya dalam konteks sebelum Anda memutuskan untuk mulai menggunakannya dalam proyek. Situs ini pasti satu untuk desainer grafis dan agak mengingatkan pada halaman portofolio. Terutama karena, meskipun informasi yang ditampilkan padat, Anda dapat terus menggulir ke bagian yang berbeda, karena Anda akan disambut oleh beberapa animasi yang dipicu oleh gulir inventif.
04. Koboi
Cowboy adalah sepeda listrik generasi baru, ditargetkan untuk penduduk kota di AS. Akibatnya, situs webnya harus apik untuk mengomunikasikan nilai produk yang ingin merevolusi pasar yang terkenal menghasilkan sepeda yang tidak menarik dan kikuk.
Dibuat oleh Ueno, situs ini menggunakan tipografi yang berani, warna yang kuat, fotografi yang bagus dan dibangun dengan sangat baik, menawarkan pengalaman kelas satu kepada pengguna. Motor itu sendiri menjadi pusat perhatian dan langsung menarik perhatian pengguna.
Transisi dan perbesaran fitur sepeda, saat pengguna menggulir ke bawah, dijaga agar sepeda tetap berada di tengah. Fokus pada konten dan bukan rekayasa berlebihan pada pengalaman juga berarti situs memuat dengan cepat di semua perangkat dan sangat responsif. Aplikasi untuk sepeda memiliki halamannya sendiri dan paralaks antara fitur dan data kinerja yang ditawarkan mengungkapkan sifat terhubung produk dan paralaks dalam batas-batas perangkat dengan indah.
05. Pecinta Antarmuka
Merancang laman landas untuk situs yang didedikasikan untuk 'pecinta antarmuka' bukanlah hal yang mudah, tetapi Timothy Achumba - seorang desainer Facebook - telah berhasil melakukannya di sini. Situs ini bertujuan untuk menginspirasi orang, memberikan saran praktis tentang kerajinan desain UI, dan merayakan pengalaman unik desainer yang berbeda.
Desainnya sangat fokus pada konten, dan menggunakan tata letak seimbang yang terinspirasi oleh cinta pertama Achumba: cetak.“Desain Interface Lovers, berdasarkan kisi tiga kolom sederhana yang diambil dari tata letak koran, tidak rumit dan bersih,” katanya. Fotografi potret yang indah menarik pengunjung dan menekankan minat situs pada masing-masing cerita.
Untuk membangun situs, pengembang Iheanyi Ekechukwu memanfaatkan Tachyons, kerangka kerja CSS fungsional yang memungkinkan kontrol granular atas desain. Hasilnya adalah desain yang cantik dan minimal, tanpa adanya gangguan.
06. Google Fonts
Awalnya diluncurkan pada tahun 2010, fonta Google sekarang dilihat di web lebih dari 15 miliar kali sehari, dalam lebih dari 135 bahasa di seluruh dunia. Situs Google Fonts bersih dan sepenuhnya responsif, menggunakan Desain Material untuk kisi dan gayanya.
Dalam postingan blognya tentang proyek tersebut, desainer Yuin Chien menjelaskan bahwa "dengan mengembangkan kemampuan bermain dengan skala, warna, dan pasangan font, kami mengundang semua orang untuk menemukan dan menggunakan tipografi secara mulus dalam proyek mereka." Dan dia benar; antarmukanya mengundang dan indah. Ini juga intuitif dan menyenangkan untuk dijelajahi.
Yang terpenting, ini tidak memaksa Anda untuk melewati rintangan untuk mendapatkan font; mereka ada di sana, di bagian atas laman landas, siap untuk Anda mainkan. Anda dapat mengetik langsung ke bidang teks halaman untuk mengujinya. Dan jika Anda kewalahan dengan pilihan, Google mempermudah mempersempit berbagai hal dengan kotak centang untuk kategori font dan penggeser yang berguna untuk jumlah gaya, ketebalan, kemiringan, dan lebar.
07. Review Teknologi MIT
Begitu banyak situs berusaha keras untuk mendapatkan tampilan laman itu dengan trik-trik keren, sungguh melegakan menemukan situs yang membuat semuanya tetap bagus dan sederhana. Review Teknologi MIT, pertama kali diterbitkan pada akhir abad ke-18, memiliki warisan yang panjang dan membanggakan, dan situsnya telah disesuaikan untuk menampilkan seni yang sangat baik dan menyenangkan untuk dibaca.
Halaman landing sangat menyenangkan untuk dilihat, memulai Anda dengan cerita sampul yang berani, tiga cerita sekunder, dan daftar ringkasan dari berita utama hari itu yang disebut 'Unduhan'. Hal ini memungkinkan pengunjung untuk dengan cepat mendapatkan apa yang penting dengan cara yang tidak masuk akal.
CTA Berlangganan merah besar di kanan atas juga langsung menarik perhatian Anda, mengarahkan pengunjung ke opsi situs web berbayar tanpa menghalangi kenikmatan mereka atas konten gratis yang tersedia.
08. Resn
Dengan kisi-kisi citra indah yang tertata rapi, situs Present & Correct menjangkau audiens intinya: orang-orang yang menyukai alat tulis.
Latar belakang kertas grafik, warna abu-abu pucat, dan font klasik menyalurkan getaran buku latihan sekolah dan setiap panel menampilkan produk yang indah. Saham diatur dengan cermat ke dalam kategori yang ditampilkan di bilah menu atas, dan Anda tergoda untuk mengklik semuanya, dimulai dengan bagian 'Ephemera' yang bertajuk menarik.
10. Monotipe
"Kami adalah perusahaan di balik jenis," kata laman landas Monotype, dan desainnya yang bersahaja namun cerdas sejalan dengan pernyataan percaya diri ini. Seluruh bagian kiri dari desain halaman arahan didedikasikan untuk pernyataan misi perusahaan, dan ada sentuhan cerdas: melalui dropdown Anda dapat melihat teks dalam berbagai font, dan dalam berbagai bobot dan gaya, untuk merasakan apa Monotipe tidak.
Sisi kanan laman diberikan ke tautan ke perpustakaan Monotipe, lisensi perusahaan, dan berita perusahaan, dengan ikon 'M' besar dalam font yang berbeda, berfungsi seperti huruf besar. Palet warna sepia yang tidak bersuara menjaga fokus tetap kuat pada font.
11. LS Production
LS Productions - sebuah perusahaan produksi layanan foto dan gerak yang berbasis di Skotlandia - tahu apa aset terbesarnya, dan itulah yang disajikan saat Anda membuka situsnya. Video perulangan yang memenuhi jendela menampilkan pilihan pekerjaan perusahaan, semuanya diatur di lokasi yang indah. Gulir ke bawah dan Anda akan mempelajari tiga layanan utamanya: gerakan, diam, dan lokasi.
Pada titik ini halaman arahan telah melakukan tugasnya. Semua yang ada di bawah - lokasi yang indah minggu ini, bagian 'bertemu dengan tim' - hanyalah hiasan jendela. Jika Anda ingin mempekerjakan LS Productions, Anda telah beralih ke salah satu laman layanan utama, di mana Anda akan menemukan banyak informasi relevan yang disajikan dengan baik yang meyakinkan Anda tentang kesesuaian perusahaan.
12. O’Neill
Merek gaya hidup Amerika O’Neill sebagian besar berfokus pada dua hal: selancar dan salju. Dan situs AS-nya membuatnya sangat jelas dengan halaman arahan yang dipandu gambar yang menjual kepada Anda rangkaian pakaian dan perlengkapan olahraganya melalui fotografi ombak besar dan pegunungan yang tertutup salju yang menakjubkan.
Seperangkat tautan drop-down di bagian atas halaman arahan dapat membawa Anda langsung ke apa yang Anda inginkan jika Anda tahu apa yang Anda cari, tetapi di bawahnya halaman arahan ditetapkan untuk menggoda Anda, dengan beberapa besar, gambar-dipimpin tautan bagian dan galeri Instagram. Itu semua cukup untuk membuat Anda berlari ke pantai - atau puncak gunung terdekat - tetapi tidak sebelum membeli perlengkapan O’Neill terlebih dahulu.
13. Hipstamatis
Untuk aplikasi fotografi analog retro Hipstamatic, yang terpenting adalah mendemonstrasikan fitur-fitur keren, serta tampilan, nuansa, dan navigasi aplikasi yang intuitif, dengan gaya yang semenarik mungkin untuk menarik pengguna.
Di bagian atas halaman, strip galeri yang bergulir menampilkan 'Estetika Hipstamatik' dalam praktiknya, sementara iPhone yang sangat besar menampilkan versi terbaru aplikasi, dengan ClassicMode jadul dan ProMode baru, dengan lebih banyak fitur terkini . Di bawahnya, garis baru merangkum semua tentang Hipstamatic: "Buat fotografi yang indah", dengan CTA besar yang mengarahkan Anda ke App Store.
14. Apel
Pinterest tahu apa yang diinginkannya, dan tidak ingin bertele-tele: mendaftar atau tidak sama sekali. Buku tempel online yang populer cukup percaya diri dengan mereknya dan reputasinya yang sedang berkembang untuk tidak terlalu khawatir tentang menjual dirinya sendiri, atau memberi pengguna kesempatan untuk melihat-lihat beberapa papan dan berisiko tersimpangkan.
Di balik kartu pendaftaran, salah satu lembar memo Pinterest berisi gulungan fotografi yang menggiurkan ke atas, memberikan gambaran tentang apa yang ditawarkan kepada pengguna. Ini adalah versi yang dipreteli dan dipercantik dari apa yang sebenarnya Anda dapatkan - tidak ada deskripsi bertele-tele, iklan, atau info repin yang mengacaukan versi beranda ini.
