Contoh Desain Web HTML Keren Untuk Inspirasi Blog Kamu Sob!
Beberapa dari situs dibawah ini adalah contoh desain web sederhana yang menggunakan teknologi terbaru dan mungkin bisa menjadi Contoh Desain Web HTML Keren kamu sob, yang lainnya menggunakan prinsip desain tradisional untuk membangun situs yang ciamik dan elegan.
Baik kamu menggunakan HTML sederhana atau menggunakan WebGL dan CSS 3D, kamu akan menemukan banyak contoh web design di sini untuk menginspirasi dalam membangun situs yang elegan.
Kami juga memiliki pilihan contoh CSS yang menginspirasi untuk Anda jelajahi.
01. Contoh Desain Web HTML Keren Appy Fizz
Appy Fizz adalah contoh desain web sederhana dengan nuansa minuman bersoda yang menggambarkan dirinya sebagai ‘sampanye minuman buah’. Situs web Appy Fizz yang baru adalah bagian dari proyek rebranding yang lebih luas oleh firma desain Sagmeister & Walsh yang berbasis di NYC.
Seperti yang dijelaskan pembuatnya dalam studi kasus mereka, identitas “memvisualisasikan gelembung berkarbonasi melalui bahasa grafis dinamis dari bola dan lingkaran 3D.”
Contoh desain web sederhana ini merupakan perpaduan menarik dari elemen tiga dimensi yang super datar dan tersirat. Bahasa melingkar yang ditulis dengan huruf tebal merah, putih dan hitam mengingatkan saya pada karya Yayoi Kusama, seniman terkenal dunia yang terkait dengan seni pop, minimalis, dan polkadot.
Situs ini masuk dalam urutan pertama sebagai Contoh Desain Web html Keren Untuk Inspirasi Blog Kamu Sob!
Seni dan ruangnya dalam industri komersial adalah tema yang dimainkan Sagmeister & Walsh di seluruh karya mereka, dan menarik untuk melihat bagaimana kombinasi ini diterjemahkan ke web. Di sini ada banyak animasi dan elemen kanvas interaktif yang berbicara dalam bahasa visual yang sama – simulasi karbonasi bahkan mengikuti mouse pengguna saat digerakkan melintasi situs web.
Super keren deeh,.!!
02. Contoh Desain Web HTML Keren Allbirds
Allbirds adalah contoh desain web sederhana dengan merek sepatu olahraga dari negeri 29.221.344 domba. Itu dimulai ketika salah satu pendiri Tim Brown mengamati kualitas luar biasa dari wol Merino, dan bertanya-tanya mengapa itu tidak pernah digunakan dalam alas kaki sebelumnya.
Contoh web design ini dibangun menggunakan Shopify ini memadukan fotografi gaya hidup dengan ilustrasi. Hasilnya adalah pengalaman menyenangkan yang tidak hanya menceritakan kisah di balik Allbirds, tetapi juga memberi Anda rasa untuk produk itu sendiri.
“Contoh web design ini dirancang untuk menunjukkan perhatian luar biasa terhadap detail dan pemikiran di balik desain produk kami,” jelas Brown tentang alasan di balik situs tersebut. “Kami banyak berinvestasi dalam fotografi – dan fotografer kiwi yang berbasis di NYC Henry Hargreaves – untuk menghidupkan situs dan mengartikulasikan misi kami untuk membuat sepatu yang lebih baik dengan cara yang lebih baik.”
Baik Brown dan tim Red Antler berbicara tentang dedikasi ekstrim mereka terhadap UX situs dan bagaimana mereka bersandar pada detail yang sering diabaikan. Bagian FAQ duniawi dihidupkan dengan GIF animasi, dan ilustrasi digunakan di seluruh situs sebagai motif penceritaan yang tidak terduga.
Situs ini cukup digunakan sebagai Contoh Desain Web html Keren untuk kamu yang ingin membangun website Toko online
Baca Juga:
7 Contoh Artikel Yang Menarik Untuk Dibaca Dan SEO Friendly03. Contoh Web Design Karim Rashid
Contoh desain web html sederhana berikutnya adalah datang dari seorang Desainer Karim Rashid yang sama produktifnya dengan yang diberitakan. Dengan lebih dari 3.000 desain dalam produksi dan bekerja di 20 koleksi permanen di seluruh dunia, mungkin tidak mengherankan bahwa situs webnya sendiri telah mengambil kursi belakang selama 10 tahun terakhir. Sampai dia menugaskan Anton & Irene.
Dengan pelukan khasnya dari interaksi yang menarik, tipografi emotif, dan tata letak yang benar-benar agnostik perangkat, duo ini telah menghadirkan situs yang mengundang eksplorasi yang kuat. Yang tentu saja intinya: “Tujuan utama kami adalah untuk menampilkan banyak produk dan proyek dengan cara yang menarik secara visual,” kata pasangan itu di blog mereka.
Banyaknya produk ini juga menghadirkan tantangan. Bagaimana cara mengirimkan 5.000 lebih gambar dengan berbagai bentuk dan ukuran dalam lingkungan yang responsif? Solusinya: re-imajinasi tata letak konvensional dan pendekatan lo-fi untuk penataan untuk memberikan grid yang tepat dan fleksibel dikombinasikan dengan tipografi yang berani (namun tidak mencolok).
Mungkin hal yang paling mengesankan tentang situs baru Rashid adalah transisi mulus antara viewports. “Kami selalu mendesain semua layar secara bersamaan … Saat kami memiliki ide untuk komponen atau tata letak, kami mencobanya di semua layar dan melihat apakah itu masuk akal di seluruh papan.”
Contoh web design Karim Rashid yang ringan super kenceng dan pastinya bisa dijadikan Contoh Desain Web html Keren di tahun 2022 ini sob, sekaligus buat inspirasi kamu untuk membangun situs yang ciamik.
04. Contoh Web Design Histography
Contoh Web Design Histography – proyek tahun terakhir desainer dan pengembang Israel Matan Stauber di Bezalel Academy of Arts and Design – adalah garis waktu interaktif yang mencakup tidak kurang dari 14 miliar tahun, dari Big Bang hingga saat ini.
Secara harfiah membentang di seluruh sejarah alam semesta yang diketahui, ini adalah infografis interaktif yang sangat besar yang menantang prasangka kita tentang bagaimana mengomunikasikan subjek yang kompleks.
Contoh desain web html sederhana ini meliputi topik mulai dari sastra dan musik hingga pembunuhan, penemuan, dan agama, garis waktu Histografi mengundang kita untuk menjelajahi peristiwa dari masa lalu kita yang kaya, masing-masing diambil secara dinamis dari Wikipedia dan ditampilkan di layar sebagai titik hitam kecil. Ada dua mode: tampilan horizontal, kiri-ke-kanan yang memungkinkan pengguna untuk masuk pada periode waktu tertentu; atau mesin waktu seperti heliks yang menyajikan daftar peristiwa penting yang dikuratori.
Stauber mengatakan bahwa dia selalu terpesona oleh gagasan menunjukkan sejarah yang terungkap dari waktu ke waktu: “Garis waktu adalah cara paling populer untuk memvisualisasikan sejarah, namun saya merasa mereka selalu sangat terbatas. Sejak awal proyek ini saya tahu saya ingin membuat garis waktu yang tidak terbatas pada satu tahun, dekade, atau periode. Saya ingin garis waktu yang dapat memuat semua sejarah.”
Baca Juga:
Cara Mudah Membuat Website Dengan Wix 2021 ( Video Tutorial )05. Contoh Web Design On the Grid
Meskipun stres bagi banyak orang, pindah kantor juga bisa menjadi sumber inspirasi yang bagus. Ketika Hyperakt pindah ke Gowanus, Brooklyn, kegembiraan tim dalam menemukan harta karun tersembunyi dari lingkungan baru mereka mengarah pada inkarnasi On the Grid: panduan lingkungan internasional, yang dikuratori oleh para desainer.
On The Grid adalah contoh desain web html keren yang minimalis namun mudah dipengaruhi, dan “dirancang untuk menjadi sangat terstruktur, namun menyenangkan dan dinamis, seperti konten di situs”. Estetika tanpa basa-basi menghindari jebakan gambar pahlawan yang khas dan memanfaatkan area pandang dengan baik bahkan pada ukuran ekstrem.
Dan kemudian ada perhatian terhadap detail. Dari logo animasi hingga 100 (dan terus bertambah) ilustrasi kota yang unik dan animasi sederhana, On the Grid jelas bukan sekadar blog gaya hidup.
Di blognya, Hyperakt menjelaskan bagaimana ia ingin menciptakan “sumber daya yang dapat diandalkan yang menangkap esensi sejati dari tempat-tempat yang kita sukai, melalui fotografi yang indah, deskripsi yang jujur, dan kurasi yang didorong oleh desain.” Dengan lebih banyak kurator yang bergabung setiap bulan, On the Grid akan segera hadir di lingkungan terdekat Anda.
Situs yang cocok untuk dijadikan Contoh Desain Web html Keren di tahun ini sob,.cek deh,..
06. Contoh Web Design LS Productions
LS Productions baru-baru ini memperluas wawasannya dari mencari lokasi yang bagus (di bawah moniker Location Scotland) menjadi apa yang sekarang menjadi perusahaan produksi layanan diam dan gerak terbesar di Inggris. Merek dan situs webnya diproduksi oleh agensi Edinburgh Whitespace.
Desainer senior Mike Bryant mengatakan prioritasnya adalah membiarkan pekerjaan perusahaan yang berbicara: “Mereka memiliki portofolio yang luar biasa, mulai dari diam hingga bergerak, sehingga tugas utama kami adalah menciptakan struktur yang melengkapi tipe minimal dengan gambar.” Pendekatan ini langsung terlihat di beranda, yang merangkum penawaran luas perusahaan dengan campuran tipografi animasi dan video yang pas.
Tantangan teknis utama – menjaga waktu muat seminimal mungkin dan mengelola pemotongan yang berbeda untuk citra berkualitas tinggi – diatasi dengan mengganti gambar beresolusi lebih tinggi jika diperlukan, dan menggunakan JavaScript untuk mengelola tinggi dan rasio aspek gambar secara dinamis pada berbagai ukuran layar .
Hasil akhirnya, kata Bryant, adalah “situs sederhana yang menggunakan panel modular, tipe bersih dan palet warna minimal untuk bertindak sebagai latar belakang halus untuk karya yang indah”.
07. Contoh Web Design Lordz
Contoh Web Design Lordz “Bermain lebih tua dari budaya, karena budaya… selalu mengandaikan masyarakat manusia, dan hewan tidak menunggu manusia untuk mengajari mereka bermain.” Maka dimulailah Homo Ludens karya Johan Huizinga, di mana penulis membahas dampak bermain dalam masyarakat.
Unsur bermain adalah salah satu yang Lordz, sebuah akademi tari yang berbasis di Swiss, menganggap serius. Bagi Lordz, menari bukan hanya tentang gerakan; itu adalah bentuk seni, sarana ekspresi budaya yang menyenangkan. Ditugaskan merancang situs untuk akademi, Eidenbenz/Zürcher menggunakan etos ini untuk memandu arah artistiknya.
“Kami ingin menciptakan sesuatu yang menghadapkan pengalaman digital dengan inti Homo Ludens,” jelas direktur seni dan mitra Daniel Zürcher. “Cara yang menyenangkan untuk mendapatkan wawasan tentang praktik menari sehari-hari; gerakan, perasaan, dan sebagainya. Untuk mencapai ini, kami menggunakan teknologi terbaru dalam pembuatan film, pasca produksi dan, tentu saja, pemrograman.”
Hasilnya cukup menakjubkan; contoh web design yang satu ini salah satu situs unik yang dapat dikenali dan menginspirasi yang benar-benar menangkap jantung organisasi melalui penggunaan video – suatu prestasi yang langka akhir-akhir ini.
Contoh desain web html sederhana yang satu ini sebenernya cukup lumayan berat, berkat video HD yang dii tampilkan di dalamnya, tapi cocok sekali dijadikan Contoh Desain Web html Keren untuk kamu yang ingin membangun situs dengan konsep Video HD
08. Contoh Web Design Monotype
Contoh Web Design Situs Monotype, pada pandangan pertama, sangat sederhana. Perjalanannya dari konsepsi hingga peluncuran dimulai ketika iA bergabung dengan tim in-house di type foundry untuk membantu mengembangkan visi masa depan Monotype online.
Proyek ini dimulai dengan penelitian ekstensif untuk menyederhanakan struktur domain dan arsitektur informasi perusahaan. Pengujian pengguna yang ketat selama periode enam bulan menginformasikan prototipe HTML awal, dari mana konsep utama lahir.
“Kami mengerjakan bahasa visual, mengembangkan serangkaian situs mikro font yang diuji dan dioptimalkan dari waktu ke waktu. Ide dasarnya adalah bahwa tipenya adalah bintangnya,” jelas Oliver Reichenstein, pendiri iA. “Homepage direduksi menjadi esensi. Semakin dalam Anda menyelam semakin kaya.” Tim juga memutuskan ide berani menggunakan penguji tipe di beranda.
Konsep dikembangkan menjadi prototipe konten menggunakan Kirby. Hal ini memungkinkan iA untuk tidak hanya menguji desain di lingkungan langsung, tetapi juga menghasilkan konten pendukung baru, dan terus menyempurnakan dan mensistematisasikan desain. “Secara keseluruhan,” kata Reichenstein, “Monotype.com adalah model pengembangan web modern, mulai dari penelitian, konsep, hingga produksi. Dan kami berharap itu terlihat.”
Seluruh situs hampir dibalut Video HD yang cukup membuat sedikit berat saat diakses terutama jika kamu menggunakan thetring mobile nih sob, tapi jangan salah, situs ini sangat cocok dijadikan Contoh Desain Web html Keren di tahun 2021 ini berkat banyak nya Video HD yang disuguhkan.
9. Contoh Web Design Over the Tiny Hills
Over the Hills adalah contoh desain web sederhana yang dibuat oleh studio digital Prancis ultranoir, bekerja dengan ilustrator mcbess untuk mempresentasikan EP grupnya dengan nama yang sama. Perpaduan suara dan eksplorasi terkoordinasi dengan sempurna untuk menciptakan pengalaman yang menawan.
“Kami mencoba mendorong batas dari apa yang kami pikir mungkin dengan 3D interaktif dan suara di web. Kami bersenang-senang bermain dengan gaya kartun bengkok mcbess dalam membangun interaksi lucu berdasarkan pengalaman suara spasial 3D,” kata pengembang utama Jérémy Saint -Prix. Proyek ini bahkan berhasil masuk ke dunia nyata, ketika gramofon yang dibuat untuk proyek tersebut dicetak 3D, dilukis oleh mcbess dan dipamerkan di galeri Paris.
Efek WebGL bekerja dengan mulus dengan gambar, dan karena ini adalah efek yang cukup unik, pengguna tetap ingin tahu tentang apa yang akan mereka temukan di setiap belokan. Mereka dapat menjelajahi terowongan tanpa batas, menggaruk meja putar mereka sendiri, dan mengaktifkan musik sendiri, tetapi bimbingan diberikan agar mereka tidak pernah merasa tersesat di dunia baru UX ini.
Ada Yang Kamu bisa dijadikan Contoh Desain Web html Keren untuk inspirasi membangun web versi Indo sob..? Komen yaah
Salam Blogger
