En iyi 21 JavaScript örneği
Sayfa 1/2: Sayfa 1- Sayfa 1
- Sayfa 2
JavaScript, bir kullanıcının ilgisini çekebilecek ve sitenizi hatırlamalarını ve tekrar ziyaret etmeye devam etmelerini sağlayabilecek platformlar oluşturur. Oyunlar, API'ler, kaydırma yetenekleri ve çok daha fazlasını oluşturmak için kullanılabilir.
İnternet dolu web tasarım ilhamı , bir web sitesini hayata geçirmek ve harika kullanıcı deneyimleri sağlamak için kullanılan harika JavaScript örnekleri dahil. Burada ilham almanız için en sevdiğimiz JavaScript örneklerinden bazılarını seçiyoruz.
01. Histografi
Daha önce Cosmos'u izlediyseniz, Carl Sagan'ın Kozmik Takvim hakkında konuştuğunu hatırlayabilirsiniz. Evrenin yaşı bir yıla indirgenmiş olsaydı, kayıtlı insanlık tarihi 31 Aralık'ın son saniyelerine sığacaktı.
14 milyar yıllık olaylar çok büyük bir veri kümesidir ve bunu bir tarayıcıda görüntülemek kolay bir iş değildir. Ancak tasarımcı ve geliştirici Matan Stauber zorluğun üstesinden geldi - bunun mümkün olacağından emin olmasa da: 'Bence asıl engel oranlar olmalıydı' diye açıklıyor. 'Bildiğimiz geçmişin yüzde 99,9'unun ekranın bir pikselinden daha azına yoğunlaştırılması gerekecekken nasıl bir zaman çizelgesi yaratırsınız?'
Bir tarihçinin oğlu olan Stauber, Ronel Mor'un rehberliğinde Bezalel Sanat ve Tasarım Akademisi'nde öğrenci olarak Histografiyi yarattı. 'İnsanların tarihi görselleştirme yollarını düşünürsek, zaman çizelgeleri muhtemelen en yaygın olanıdır ve yine de basılı gazete günlerinden bu yana pek değişmemişlerdir' diyor. 'Bunu özellikle büyük veri kaynaklarına erişimle bugün heyecan verici bir tasarım fırsatı olarak gördüm.'
Site, Wikipedia'daki olayları tarar ve dizine ekler, makaleyi alır ve bir Google resmi ve YouTube videosu çeker. Veriler kolayca keşfedilebilir ve tüketilmesi zevklidir. Wikipedia makalelerini keşfederken saatlerinizi kaybettiyseniz, bunun için bolca zaman ayırın.
02. Filippo Bello
İtalyan 3D sanatçısı Filippo Bello'nun yeteneklerini sergileyen bu çevrimiçi portföy, şirket içinde tasarlandı, tasarlandı ve geliştirildi. Adoratorio Enea Rossi ve Alessandro Rigobello tarafından. Takıma nasıl tasarlanacağı konusunda tam bir özgürlük verildi.
Web sitesinde derinlemesine oyun çok etkilidir - görüntüler izleyiciye doğru yavaşça hareket ederek her projeye dalmış izlenimi yaratır. Bu, segment efekti adı verilen şey kullanılarak elde edilir: arka plan görüntüsü, izleyiciye doğru hareket eden farklı kutularda çoğaltılır. Ekip, en bariz teknolojilerden kaçınarak kendilerine meydan okudu. Sanat direktörü ve kurucu ortak Rossi, 'WebGL her tür kullanıcı için uygun değildir' diyor. Bu nedenle, bu sitenin asıl zorluğu, yalnızca CSS3 ve JavaScript kod dizelerini kullanarak ekranın nasıl derinleştirileceğini anlamaktı. '
Sayfa geçişleri ve resimler üzerindeki küçük yakınlaştırma efektleri, nihai sonuca hoş bir dokunuş, Rossi'nin de tanımladığı gibi, 'kesinlikle beklentilerimizin ötesinde' oldu.
03. St. Louis Browns
Dijital ajans olan St. Louis Browns beyzbol takımının tarihini anlatan bu web sitesi için HLK çok güzel bir deneyim yarattı. Site, bölümler ve dokulu tipografi ile tamamlanmış, iyi hazırlanmış bir eski kitap gibi okuyor. Kullanıcılar, zamana dayalı, hikaye benzeri bir deneyim için her bölümde ilerleyebilir.
Site için ilham, 1920'lerin el yazmalarından ve reklamlarından alındı, resimlerin çoğu doğrudan anlattıkları yıllara ait. Bu, modern, dijital bir alana benzersiz bir tarih hissi getiriyor. Bu, tek bir turuncu tonu ile vurgulanan gri ve kahverengi tonlu bir renk şemasıyla tamamlanmaktadır.
Bu sitenin en sevdiğim kısımlarından bazıları, fareyle üzerine gelindiğinde beysbol topuna dönüşen menü düğmesi (içinde hamburger menüsü bulunan dairesel) gibi küçük ayrıntılar. Sol taraftaki, ekranı takip eden ve kaydırma sırasında güncellemeleri takip eden zaman çizelgesini de seviyorum.
Site, içerik arasında sorunsuz güncelleme ve akışa izin vermek için Node.js ve Express çerçevesi kullanılarak oluşturulmuştur.
04. Bacak Çalışma Stüdyosu
Bacak Çalışması grafik tasarımdan etkileşime ve medyaya kadar web üzerinde pek çok harika iş yapıyor. Bu nedenle, kendi kişisel sitesinin bir istisna olmadığını görmek şaşırtıcı değildir. Stüdyonun kişiliği eğlenceli, karma medya illüstrasyonlarıyla öne çıkıyor. Ajansı temsil edecek benzersiz bir sanat yaratmak için eski fotoğraf efektlerini (nokta ızgara deseni gibi) dijital olarak boyanmış beyaz vurgular ve fiziksel el yazısı taramalarıyla birleştirir.
Ancak, bu web sitesini dikkate değer kılan sadece resimler değildir - interaktif animasyonlar onu gerçekten hayata geçirir. Resimlerden bazıları aslında After Effects ile oluşturulan statik görseller yerine videolardır ve kenar çubuğu gibi web sitesi bileşenleri sorunsuz bir şekilde hareket eder.
Web sitesi mobil düşünülerek tasarlandı ve mobil etkileşimler, kullanıcının bölümler arasında geçiş yapmak için izleme pedi ile kaydırabileceği masaüstü deneyiminde yansıtılıyor. Web sitesi, uyumluluğu sağlamak için Modernizr ve etkileşimler için jQuery kullanılarak oluşturulmuştur.
05. Conf Kodu
CodeConf sitesi gerçekten standart konferans web sitesinin çok ötesine geçiyor. Konferans Nashville, Tennessee'de yapıldı ve bu tasarımla ilgili her şey bu yere saygı gösteriyor.
Web sitesinin kendisi güzel bir şekilde yanıt veriyor ve sıcak, uyumlu bir renk paletine sahip. Tuhaf resimler siteye karakter verir ve sayfa boyunca (ve hatta etkinliğin kendisinde) devam eden eğlenceli bir country-rock estetiği yaratır.
Menünün dekoratif yatay kuralları (yalnızca daha küçük ekran boyutlarında görülür) bile country-rock estetiğiyle aktığı için hiçbir ayrıntıdan kaçınılmaz. Site, konum özellikleri için Google Haritalar'ı uygular ve jQuery ve AngularJS ile oluşturulmuştur.
Her şey resmedilmiştir: tüm mekanlar, konuşmacıların 'set listesi', bilet satın almak için harekete geçirme çağrısı ve bölümler arasındaki molalar. Sitenin etrafında noktalı olarak bulunabilen eğlenceli bir karakter kadrosu da var: vektör kaktüsler, tek boynuzlu atlar, ejderhalar, sekizli kediler ve kovboylar ve sayfa etrafında müzik çalan ve şakacı bir şekilde poz veren kızlar.
06. IBM Tasarım
Geçtiğimiz birkaç yıl içinde IBM, bir tasarım programını büyütmeye ve şirketi yazılım oluşturmaya yönelik insan merkezli bir yaklaşıma yönlendirmeye yatırım yaptı. Kısa süre önce, animasyon sözlüğü için bir güncelleme içeren IBM Design Language ile çıktı. Web geliştiricileri için tümü GitHub'da açık kaynaklı tasarım rehberliği ve kaynaklar sağlar.
Bu animasyon güncellemesinde sevdiğim şey (açık kaynaklı olmasından bile daha fazla), stüdyonun diğer dijital özellikler yerine ilham almak için IBM'in mirasına ve fiziksel dünyaya nasıl baktığıdır. IBM tasarım dili lideri Hayley Hughes, ekibin makinelerden ilham aldığını söylüyor; özellikle katı düzlemleri, fiziksel kütleleri ve sert yüzeyleri.
'Bir baskı kolunun güçlü vuruşundan bir daktilo arabasının düz kaymasına kadar, her hareket amaca uygun ve niyetle tasarlandı' diye açıklıyor. 'Yazılımımız, ürünlerin canlı ve gerçekçi hissetmesini sağlamak için ayrıntılara aynı özeni göstermeyi gerektirir.'
IBM'in Tasarım Dili için animasyon neden bu kadar kritik? Hughes, 'Bir kişinin vücut dilinin konuşmayı okumanıza yardımcı olması gibi, animasyon da kullanıcıların ürünlerimizde nasıl gezineceklerini ve ürünlerimizi nasıl kullanacaklarını anlamalarına yardımcı olan kritik bilgileri aktarıyor' diyor.
07. Masi Tupungato
Uluslararası dijital reklam ajansından bu harika web sitesi Bu İtalya merkezli bir şarap yapımı projesi olan Masi Tupungato için neredeyse görüntülerin kendi adına konuşmasına izin veriyor.
Olağandışı bir şekilde, net tam ekran görüntüler yüklenirken sayfaların her biri için bir yükleme ekranı kullanılır. Genellikle bu büyük bir hayırdır - kullanıcılar içeriği mümkün olan en kısa sürede ister. Ancak burada, herhangi bir içerik ortaya çıkmadan önce görüntülerin tam olarak yüklenmesini sağlayarak kullanıcının deneyimini gerçekten iyileştirir. Tasarım, kullanıcıların şaraphaneye gitmiş ve üzümleri kendileri seçmiş gibi hissetmesini sağlayarak bir empati duygusu yaratıyor.
Site, bazı sayfalarda ağır tarafta olabilir (ağırlık olarak 1,2MB'den 5MB'ye kadar), bu da bazı tembel yükleme teknikleri eklenerek geliştirilebilir. Bununla birlikte, ağırlığına rağmen, site iyi inşa edilmiştir, başlangıç bir saniyenin altında oluşturulur ve geri dönüş ziyaretleri de ikinci işaret içinde yüklenir. Çerçeve, 960 Grid Sisteminin halefi olan unsemantic.com'a dayanmaktadır.
Siteyi masaüstünde ve daha büyük vitrinlerde görüntülerken, kullanıcılar her bir şarabı ayrı ayrı görebilir ve etkileşime girebilir. Tüm şarap özelliklerini ve ayrıntılarını yan yana görüntülemek için daha büyük ekran boyutundan yararlanabilirler. Aksine, mobil sitede ayrıntılar ve açıklama kayar ve tekrar sorunsuz bir şekilde kaydırılabilir.
08. tota11y
Erişilebilir web siteleri oluşturmak kritik derecede önemlidir. Bununla birlikte, dahil edilen teknikler ve testler, genellikle web geliştiricilerinin ve tasarımcıların sürüklenmiş gibi hissetmelerine neden olabilecek derin uzmanlık gerektiriyor gibi görünüyor.
Tota11y'yi girin: Bir sayfaya JavaScript dosyası olarak eklenebilecek veya daha basit bir şekilde herhangi bir sitede yer imi olarak kullanılabilecek basit bir araç. Sayfadaki erişilebilirlik yönergelerine aykırı olan öğeleri işaretler - örneğin, düşük görsel kontrast veya resimler için eksik metin alternatifleri.
Geriye dönük öğeler görsel olarak işaretlenir, bu da bir ekran yakalamayı ve ekip üyelerine veya müşterilere sorunların tam olarak ne olduğunu göstermeyi kolaylaştırırken, genişletilmiş açıklamalar, hataları hızlı bir şekilde düzeltmek için yöntemler konusunda kullanıcılara rehberlik eder.
Khan Academy 'nin tüm web sitesi açık bir şekilde göz alıcı değildir, ancak o zaman, önemli işler her zaman gösterişli değildir. Metnin hem görünüm hem de içerik olarak iş dünyasına indirgenmiş basitliği, aracın kendisinin gidermeyi amaçladığı sorunun karmaşıklığına inanmaktadır.
09. Lupus'u Tanıyın
Amerika Lupus Vakfı (LFA), lupus'un gizemini çözmeye çalışan ulusal bir organizasyondur. gelişir Genel halkın hastalığı anlamasına yardımcı olmak için halka açık bir halkı bilinçlendirme projesinde LFA ile ortaklık kurdu.
Kullanıcı deneyimi tasarımcısı ve proje lideri Laura Sweltz, 'LFA, bu sorunun üstesinden gelmeye yardımcı olmak için halkı ilgi çekici bir şekilde eğitmeye yardımcı olacak eğlenceli ancak bilgilendirici bir oyun oluşturmak istedi' diyor. 'Tasarım sürecimiz bu hedefe ulaşmaya odaklanırken, aynı zamanda lupuslu insanların paylaşmaktan heyecan duyacakları bir şey yaratmaya odaklandı.'
Viget'in çözümü, her kartın lupus hakkında bir gerçeği vurguladığı, React kullanılarak geliştirilmiş, kumarhaneden ilham alan bir kart oyunuydu. Tasarımcı Blair Culbreth'in özel illüstrasyonları, ciddi konulara değinirken oyunun gönülsüz kalmasını sağlıyor. Kumarhaneden esinlenilen ses efektleri oyun boyunca yayılır.
Animasyonlar pürüzsüz ve hızlıdır, oyuna başka bir zevk katmanı ekler. Mobil deneyim, masaüstü bilgisayar kadar interaktiftir ve duyarlı geçişler tamamen düşünülmüştür. Sonuç, öğrenmeyi zahmetsiz hale getiren eğlenceli bir deneyimdir.
10. Bot
Uzun biçimli hikaye anlatımı, haber ve medya sitelerinde sürekli olarak popülerlik kazanıyor, ancak yayın ağı SBS Nam Le'nin bir hikayesine dayanan çevrimiçi bir çizgi roman olan 's The Boat, hem tarzı hem de icrası açısından benzersiz hissediyor. Sumi mürekkebi çizimleri, ustalıkla hazırlanmış animasyonlar ve tüyler ürpertici bir ses manzarası, genç bir Vietnamlı mültecinin yolculuğunun hikayesini yakalıyor.
Hikayeyi hayata geçirmek için illüstratör Matty Huynh, Nam Le'nin orijinal nesiriyle altı ay geçirdi, küçük resimler çizdi ve karakterleri yinelemeli olarak yarattı.
Yapımcı Kylie Boltin, 'Gördüğünüz dengenin bu uzun geliştirme döneminden geldiğini düşünüyorum' diyor. Bu derin içe bakış dönemi, çekirdek ekip üyelerinin hikayeyi içten dışa bilmelerini sağladı. Hikayenin attığını biliyorduk ve hangi anların vurgulanması gerektiğini biliyorduk. Yol gösterici ilke, onu alt etmek veya sadece uğruna bir unsur eklemek yerine, temel hikaye anlatımını tamamlamaktı. '
Grafik paneller günlük eskizler gibi hissediyor - acil, kusurlu ve son derece duygusal. Bu site, çevrimiçi hikaye anlatımının doğru ellerde ne kadar güçlü ve ilgi çekici olabileceğini kanıtlıyor.
on bir. Run4Tiger
Moskova merkezli Aç Çocuklar Save The Tiger kampanyası için halkın farkındalığını artırmak amacıyla Rusya Dünya Vahşi Yaşam Fonu için bu şaşırtıcı kampanya sitesini tasarladı. GPS takipli bir Amur kaplanıyla yarışabilecekken neden arkadaşlarınızla yarışasınız?
Site, seçtiğiniz koşu uygulamanızı senkronize etmenize izin veriyor (şu anda dokuz farklı uygulamayı destekliyor!) Ve sizi ve diğer koşucuları günde ortalama 20 km olan büyük kediyle karşı karşıya getiriyor. Kaplan sizi yenerse, WWF'ye 5 dolar bağış yaparsınız.
Bu harika bir konsept ve buna uygun harika bir tasarım var. Bir hayır kurumu uygulaması için alışılmadık derecede kalın olan keskin siyah ve sarı renk paleti, Save The Tiger girişiminin aciliyetini yansıtıyor.
Run4Tiger'ın yaratıcısı Ksenia Apresyan, ekibin tasarım sırasında kesinlikle hareketlilik gösterdiğini söylüyor: 'Web sitesini olabildiğince dinamik hale getirmek istedik. Bu nedenle en yeni teknolojileri kullanmaya ve dinamik parçacıklardan oluşan ana mesajımızı ana sayfada göstermeye karar verdik. '
Sonraki sayfa: Size ilham verecek en iyi 10 JavaScript örneği ...
- 1
- iki
Geçerli sayfa: Sayfa 1
Sonraki Sayfa Sayfa 2
