Tek sayfalık web tasarımlarında, genelde içerik tek bir sayfaya sığdırıldığı için css ve javascript’e ağırlık verilmekte.jQuery ile slider vb. uygulamalar yapılırken css3 ile tasarımı ögelerini güçlendirerek daha şık durması sağlanabilir. Aşağıda içeriğinde birçok javascript uygulaması barındıran tasarım örnekleri bulunmakta. Bu örnekleri inceleyerek sizde tek sayfalık tasarımlar hakkında fikir sahibi olabilir veya farklı örnekleri inceleyebilirsiniz. Yaratıcı Tek Sayfalık Web Tasarımları;
Tasarımda ikon ögesi oldukça önemlidir. Tasarımın daha renklenmesi ve bazı bölgelere dikkat çekme gibi birçok farklı yapıda kullanılan ikonlar renkli tasarımlarda olduğu gibi minimalist tasarımlarda da oldukça önemlidir. Arşivlerinizde saklayabileceğiniz veya web sitelerinzde kullanabileceğiniz Muhteşem Minimalist ikon setleri;
eps, png, gif formatlarında siyah ve beyaz 110 tane ikon bulunmakta. Ikonların boyutları : 16×16, 24×24, 32×32, 48×48, 64×64, 128×128, 256×256. Ayrıca bu ikon arşivi creative commons sertifikasına sahip.
250 tane 18×18 boyutunda arka planı beyaz olan minimal ikon bulunmakta. Ayrıca bu ikon arşivi creative commons sertifikasına sahip.
Her geçen gün ajax ile yapılan dolayısıyla jQuery ile yapılan uygulamalar artmakta. Artık flash alternatifi olarak görülen jQuery ile inanılmaz uygulamalar yapılmakta. jquery.com‘dan derlenen haziran ayının en iyi jQuery uygulamaları;
Çift taraflı jQuery tabanlı bir taraflı olan dualSlider ile hem manşet için hazırladığınız alt metin hem de manşetin kendisi küçük bir zaman aralığı ile kayma efektini gerçekleştirir. Birçok sayfa kullanabileceğiniz bu uygulamada resim yerine herhangi bir html dosyası, video, metin gibi birçok alternatif tercihte bulunabilirsiniz. Ayrıca slayt özelelliğini, “Play/Stop” (Başlat/Bitir) tuşu ile başlatıp durdurabilirsiniz.
jQuery Easy Confirm Dialog – Demo
jQuery ile hazırlanan bu farklı tooltip uygulamasını web sayfalarınızdaki ziyaretçilerinize uyarı niteliğinde sunabilirsiniz. Farklı uyarılar olarak kullanabilir veya belirli soruları sormak için kullanabileceğiniz muhteşem bir jQuery tooltip uygulaması.
Adobe illustrator ile muhteşem vektörel grafik örnekleri verebilirsiniz. Aşağıdaki vektörel karakter örnekleri ile kendinizi geliştirebilir veya muhteşem çalışmalarda bulunabilirsiniz.İşte Kaliteli illustrator karakter dersleri;
How To Create Your Own Vector Cartoon Character
(Nasıl Kendi Çizgi Karakterini Yaratırsın?)
The making of a chocolate bar character
(Çikolata Karakter Yapımı)
Create a Cute Vector Monster from a Pencil Sketch
(Kalem Eskizi ile Vektör Karakter Yapımı)
Html 5, henüz tüm tarayıcılar tarafından desteklenmese ve geliştirilme aşamasında olsa da oldukça etkileyici bir dildir. Eklenen yeni elementler sayesinde klasik web yapısı değişerek tamamen interaktif hale gelmiştir. Artık html ile web sayfalarımızda videolar oynatabiliyor veya farklı animasyonlar yaratabiliyoruz. Aşağıdaki uygulamaları inceleyerek siz de benzer çalışmalarda bulunabilirsiniz. İşte Muhteşem HTML5 Animasyon Uygulamaları;
Tunnelers
Bazı tasarımcılar tasarımda kullandıkları teknikleri göze çarptırmak isterler. Herhangi bir tasarım ögesini daha fazla belirginleştirerek ön planda tutarlar. Bu tasarım ögesi logo, metinler, arka plan, bloklar vb. olabilir. Arka plana ağırlık veren tasarımlar genelde çok hoş bir arka plan içerir veya bir kişi/şirket tanıtımı yapar. Aşağıdaki tasarım örneklerini incelyerek sizde benzer çalışmalar yapabilirsiniz. Arka Plan Ağırlıklı Web Tasarım Örnekleri;
Makroda Arial, 8 punto, Kalın, altı çizili ve Madde imli “Bu Bir denemedir” yazısı yerine seçilen metni Verdana, 10 punto, Kalın, altı çizili ve Yazı Rengini kırmızıhaline getiren makro şekline getirelim. Bunun için oluşturduğumuz makroyu açalım.
Düzeltmek için açtığımız makroda belge içerisinde kayıt sırasında yazdığımız metin (“Bu Bir Denemedir”)
Selection.TypeText Text:=”Bu Bir Denemedir”
Selection nesnesinin TypeText metodunun Text dizisinde bulunmaktadır. Biz belgeye “Bu bir denemedir” yazmasını istemediğimiz için bu kodları siliyoruz.
iletişim formu arayüzü web tasasarımının önemli bir parçasıdır. iletişim formunun amacı web sayfası yöneticisinden, web sitesi ile ilgili ya da genel olarak (kişisel /kurumsal) bir konu hakkında daha fazla bilgiye ihtiyaç duyulan durumlarda kullanılmaktadır. iletişim formunda bulunması gereken kriterler ve kullanıcıya geri dönüş için istenilen bilgiler yeterli düzeyde olmalıdır. bu gereksinim için aşağıda farkllı tarzlarda iletişim form örneklerli listelendi.
1- Tony Johnson
2- Bio-bak
3- Vincentmazza
Tasarımcılar, tasarım sürecinin yavaşladığı durumlarla karşı karşıya kalabilirler. Bu durumlarda başkalarının yaptığı tasarımları incelemek herzaman bu süreci hızlandırarak farklı fikirleri ortaya çıkarabilir veya birinden esinlenerek farklı tasarımlar ortaya çıkarabilirler. illüstrasyon tabanlı tasarımlar daha çok grafik olarak oluşturulan çizgi tasarımlardır. Genel kalıplara uymayan bu tasarımları birçok alanda kullanabilirsiniz. İşte Mükemmel illustrasyon tabanlı Web Tasarımlarım örnekleri ;
Web tasarımı bu günlerde HTML5 ve CSS3 ile büyük bir Upgrade yaşamakta. Tarayıcı desteklerinin giderek artması ile somut kullanımını giderek daha sık görmeye başladığımız, web dillerinin bu yeni versiyonları için hazırlanmış örnekleri ve eğitimleri, ilgili web sitelerinde çok daha fazla sayıda görmek mümkün.
Aşağıda listelenmiş olan CSS3 eğitimleri (teknikler, örnekler) ile, daha önceleri yapamadığınız veya yapmak için ek bazı dosyalara/görsellere ihtiyaç duyduğunuz, “göreni kendisine hayran bırakan” tasarımsal özellikleri, CSS3 ile nasıl yapabileceğinizi öğrenebilir ve hemen denemeye başlayabilirsiniz.
Apple HTML5 Showcase: Apple tarafından yakın zaman önce açılan ve içeriğinde HTML5 ve CSS3 tekniklerinin bulunduğu bir tanıtım sayfası.
