Freebies ile Killer Web UI Düzenleri Tasarlama - Ultimate Guide
Web tasarımı alanı sadece kısa bir süre içinde kendi başına bir nefes aldı. Dünya çapında şimdiye kadar olmadığı kadar aktif tasarımcı var, hepsi de yenilikçi proje fikirleri üzerinde çalışıyor. Ve bu trendlerin çoğunun arkasındaki kavramlar, profesyonel grafik tasarımcıları tarafından geliştirilmiştir..
Bir kullanıcı arayüzü oluşturmanın teknik özelliklerini tam olarak anlamanız aylar hatta yıllar alabilir. Sayfa öğelerinin boyutlarını ve yerleşimini, ayrıca metin ve etiketlerin okunabilirliğini de göz önünde bulundurmanız gerekir. Biraz boş zamanınız varsa, web siteleri oluşturmak için daha az karmaşık bir yaklaşımla kargaşayı azaltabilirsiniz. Ve o zaman bile, göz önünde bulundurulması gereken onlarca başka tasarım tekniği var..
Bu rehber için bazı eşleştirdim modern kullanıcı arayüzü tasarım teknikleri ile indirebilirsiniz freebies ve oyna. Umarım bu, grafik oluşturma / web tasarımı alanında kariyer yapmak isteyenler için bir motivasyon sağlayacaktır. Profesyonel web tasarımcıları bile bu trendlerden birkaçını bir sonraki projenize yardımcı bulabilirler..
Tam Şablonlarla Pratik Yapın
Kendi düzeninizi sıfırdan tasarlama becerisine sahipseniz, şablonlarla başlamanıza gerek yoktur. Diğer yandan, yeni başlayanlar, tam bir tasarımdan başlayarak daha ince detaylara kadar çalışmak için daha rahat hissedebilirler..
Portföy, ana sayfa, blog ve diğer birçok kategori için tam PSD web sitesi şablonlarının bazı mükemmel ücretsiz indirmeleri vardır. Bunlar, kendinizi tanımak için başlamak için mükemmel tasarımlar. “genel” internet sayfası düzeni. Her web sitesinin sayfa öğeleri için farklı ihtiyaçları olacak ve hangi öğelerin önemli olduğunu belirlemeniz gerekecektir..
Martin Fabricius tarafından tasarlanan "AppCivilization" adlı bir PSD örneği. Düzen mobil uygulamalar ve muhtemelen web siteleri tasarlayan yaratıcı bir stüdyo için özellikli. Alt tarafa doğru, bir portföyde sergilenen küçük bir uygulama simgeleri paneli bulacaksınız. Ayrıca, tüm tasarımın bir başlık, üst slayt gösterisi, ana içerik ve karartılmış altbilgi şeklinde yatay olarak parçalandığını göreceksiniz..
Orijinal Kaynak - İndir
Açılış Sayfalarını Tasarlama
Martin tarafından da tasarlanan başka bir freebie'ye bakalım. Bu sonraki örnek, herhangi bir tür ürünü satmak için kullanabileceğiniz bir açılış sayfasıdır. Genel olarak bunlar, kullanıcılar, yani uygulamalar, fotoğraflar, simgeler, şablonlar vb. Tarafından indirilebilen dijital ürünlerdir..
Orijinal Kaynak - İndir
Ancak, tasarımının en iyi yanı, yeni başlayanlar için çalışmak için çok esnek olmasıdır. Başlık hala büyük görüntüye sahip küçük bir gezinti kullanıyor, ancak özellikle beklenen kullanıcı eylemleri farklı. O büyük bir “Satın al!” Katlamanın hemen üstünde duran düğme. Ürün açılış sayfasında bu, bir jQuery slayt gösterisinden daha fazla dikkat çeker.
Bir diğer harika UI tekniği de, sayfanın ortasındaki küçük iPhone özelliğidir. Martin bir iPhone önizleme çekimi, App Store düğmesi ve küçük bir temel özellik listesi içerir. Ziyaretçiler ürün ayrıntılarını ararken, biçimlendirilmiş bir listeden daha basit bir şey yapamazsınız.
Daha fazla şablon:
Geçişte piyasaya sürdüğümüz birkaç ücretsiz PSD şablonu:
- "BiZ" İşletme Web Sitesi PSD Şablonları
- "ThinkJuice" Ürün Sitesi PSD Şablonu
- Profesyonel İş Sitesi PSD Şablonu
- "Polo360" Portföy Sitesi PSD Şablonu
Ayrıca aşağıdakilerle de ilginizi çekebilir:
- İşletme web sitesi şablonları
- "Yakında geliyor" sayfa öğreticileri + şablonları
Ana Site Gezintisi
Menüler ve düğmeler yalnızca daha büyük sayfa öğeleri oluşturmak için kullanılan araçlardır. Web sitenizin ana navigasyonunun çok önemli bir amacı olduğunu inkar etmek yok. Mobil kullanıcılar için olası geri dönüş yöntemleri ile sitenizin kolayca erişilebilir olması için ihtiyacınız var..
Aşağıda dikiş dokusu efekti olan serin bir gezinti çubuğu bulunmaktadır. Vurgu stili, karartılmış bir kutu veya sayfa içeriğine işaret eden aşağıya doğru bir ipucu olarak gösterilebilir. Bu tarz yıllar içinde öne çıkıyor ve doğru ortamda harika görünüyor.
Orijinal Kaynak - İndir
Bir başka benzer freebie bu tarafından tasarlanmış bu dokulu başlık navigasyon Edi Gil. Bu ikinci gezinme çubuğunun hem bağlantıların listesini hem de bazı ek sayfa düğmelerini içermesini gerçekten seviyorum. Ziyaretçilerinize, profillerinizi Web'de bulabilecekleri ikincil bağlantılar sunmak istersiniz..
Orijinal Kaynak - İndir
Alternatif Menü Stilleri
Tipik yatay gezinme çubuğunun yanı sıra, dikkate alınması gereken başka tasarım stilleri de vardır. Dikey bağlantılar, sayfa içeriği için daha fazla alan bırakan farklı alt başlıklara ayrılabilir.
Mesela Icojam web sitesi tarafından tasarlanan aşağıdaki freebie menüsünü kullanın..
Her başlık, seçilen nesneye bağlı olarak genişletmek ve daraltmak için yapılmıştır. Ek olarak tasarım, küçük bir sayıcı sayacının her bir kategorinin sağ tarafına oturmasını sağlar. Bu, her konunun altında kaç yayın bulunduğunu saymak için en iyi şekilde bir blog gezintisi olarak görünecektir.
Orijinal Kaynak - İndir
Navigasyon ipuçları / Rehberler:
- 50+ Temiz CSS Sekmesi Tabanlı Gezinme Komut Dosyaları
- Breadcrumb Navigation En İyi Uygulamalar ve Örnekler
- JQuery ile Mobil Gezinme Oluşturma
- CSS3'te Breadcrumb Navigasyonunu Kodlama
- LESS CSS ile Navigasyon Tasarımı
Temizleyici Web Formları
İnternetin modern çağı statik bir buluşma noktasından uzaktır. Kullanıcılar sürekli olarak bilgi paylaşıyor ve günlük olarak birbirleriyle etkileşime giriyorlar. Bu metnin ve medya paylaşımının çoğu web formları aracılığıyla yönetilir.
Temiz görünümlü form girişlerini ve düğmelerini nasıl tasarlayabileceğinizle ilgili birkaç örneğe bakmalıyız. Öğelerinizin tasarımı, ziyaretçilerinizi gerçekten kullanmaya davet etmeye doğru uzun bir yol kat edebilir. Bu da sitenize güvenilirlik kazandırır ve daha fazla sayfa görüntüleme sunar.
Giriş Alanları
Kontrol için PSD'lerin giriş formlarından birkaç örnek var. Bu giriş, üzerinden freebie WP Bilim Adamı tüm standart elementleriniz var. Oturum çerezlerini yönetmek için giriş / şifre, gönder düğmesi ve onay kutuları için iki giriş alanı.
Etkilerini jQuery ile uygulayabiliyorsanız, bu tasarım modeli mükemmel. Sağ üst ok başı, açılır pencere stili bir pencere kurulumu hakkında düşünmenizi sağlar. Bir kullanıcı kayıt bağlantısını tıklayana kadar formu gizli tutarak web sitenizde yer kazanmak için harika bir tekniktir.
Orijinal Kaynak - İndir
Tasarımcı sayesinde aşağıdaki formu indirmek ücretsizdir Gil Huybrecht. Grenli bir arka plan ve kağıt dokusu ile benzer bir desen kullandı. Gil'in tasarımında özellikle sevdiğim şey "büyük boy" unsurlar. Tüm sayfayı dolduran bir giriş formunda açılış yapmak çok daha kolay. Kullanıcılar ne yazdıklarını kolayca görebilir ve daha az karmaşa olur.
Orijinal Kaynak - İndir
CSS3 kullanarak bir ön uç geliştiricisi olarak deneyimliyseniz, bu grafiği koda dönüştürmek çok kolaydır. Seçilen dış ışıma efekti ve düğme ve giriş alanları için yuvarlatılmış köşeleri bile uygulayabilirsiniz.
İletişim
Neredeyse her web sitesinde bulacağınız bir başka form bir iletişim formudur. Bu normalde gönderenin adı, e-posta ve mesaj içeriği için alanlar içerecektir.
Aşağıdaki freebie özel dokular ve simgeler kullanmanın harika bir örneğidir.
Tasarım da kullanır yer tutucu metni etiketleri yerine. Bu, form ilk yüklendiğinde her alanın varsayılan bir değere ayarlandığı anlamına gelir (örn: adınız). Ancak daha sonra yazmaya başladığınızda yer tutucu temizlenir ve bunun yerine içeriğiniz görüntülenir. Tüm standartlara uyumlu tarayıcılar bu efekti destekleyecek ve sayfada size biraz yer kazandırabilir.
Orijinal Kaynak - İndir
Kapmak için bir başka harika freebie yetenekli tarafından tasarlanan bu sekmeli iletişim formu Jonno Riekwel. Bu tasarım çok daha basittir ve her girişin üzerinde etiketler içerir. Bu, şirketteki farklı departmanlar aracılığıyla mesaj göndermesi gereken daha büyük işletmeler veya yeni başlayanlar için mükemmel bir çözümdür.
Orijinal Kaynak - İndir
İletişim Formları öğreticiler:
- Giriş / Kayıt Formu: Fikirler ve Güzel Örnekler
- Yığılmış kağıt Etkisi Giriş Formu Oluşturun
- Ajax Tabanlı HTML5 / CSS3 İletişim Formu Oluşturun
Kurdela ve Pankartlar
Sadece 6 ya da 7 yıl önce, popüler tasarım trendlerinde yuvarlatılmış köşeler yükselmeye başlamıştı. Şimdi alt gölgeler ve köşe şeritleri ile daha da ileri gittik.
Orijinal Kaynak - İndir
Bu öğelerin bazıları yorum sayacı gibi tasarım özellikleri veya bir blog için yayınlanma tarihi olarak kullanılabilir. Yukarıdaki dikişli şerit, ziyaretçilerinizin dikkatini çekmek istediğiniz portföyler veya proje sayfaları için mükemmeldir. Tasarımın üstten düştüğü yere benzer bir dikey şerit de deneyebilirsiniz.
Bu küçük sayfa efektleri, düzeninizi geliştirmek için uzun bir yol kat ediyor. Ziyaretçiler bu estetik zevkleri fark eder ve seveceklerdir. Ancak küçük köşe şeritlerinin bu tasarım trendinin sadece bir parçası olduğunu düşünün.
Orijinal Kaynak - İndir
Ayrıca, tam boy afiş tasarımları marka bilinirliğinin arttırılması için son derece popüler hale geldi. Bunları logolarınızda, navigasyonunuzda, ana sayfanızda ve hatta özel blog yayınlarında kullanabilirsiniz. Uygulamalar, iyi tasarım yetenekleri ile pratik olarak sınırsızdır..
Köşeyi sarma
Çok özel bir şerit şerit efekti, tasarımı sayfa köşenizin etrafına sararak gerçekleştirilir. Bu, sayfanızın 3-B olduğu illüzyonunu oluşturur ve şerit web sitenizin üst kısmına sarılır..
Aşağıdaki tasarım indirmek için% 100 ücretsizdir ve kendi proje fikirleriniz için kullanılabilir. Bunun ziyaretçilerden nasıl dikkat çekeceğini ve bu eğilimin neden böyle bir çıldırmaya dönüştüğünü görebilirsiniz. Afişleri fazla kullanmamaya dikkat edin. Toplu olarak, bunlar eski "web 2.0" parlak / yansıtılmış efektler gibi çok can sıkıcı olabilir.
Orijinal Kaynak - İndir
Düğmelerle Tasarım
Köprüler dışında, ziyaretçilerden düğmelerle en fazla etkileşimi elde edersiniz. Bu sayfa öğeleri, örneğin freebie indirmeleri gibi statik içeriğe bağlantı yapmak için düğmeler de kullanabilmeniz dışında, jQuery ve Ajax çağrılarının yardımıyla her şeyi yapabilir.!
Aşağıdaki UI kiti, tarafından tasarlanmıştır. Matt Gentile sadece düğmelerden çok daha fazlası var. PSD seti, benzer formlar oluşturmak için degradeler ve dokular toplamak isteyen yeni başlayanlar için harika. Çoğu zaman UI kitlerinde tekil PSD'lerden çok daha kaliteli düğmeler bulacaksınız.
Orijinal Kaynak - İndir
Varyasyonlar Nasıl Oluşturulur
Bu teknikleri uygulamak için zaman harcarken, zamanla birçok farklı stiller oluşturmak isteyeceksiniz. Bu, farklı projeler ve düzenler arasında benzer düğmelerin değişmesine neden olabilir. Bunun iyi bir örneği tasarımcı tarafından sunulan sütlü düğmelerdir. Robert van Klinken.
Orijinal Kaynak - İndir
Orijinal üç düğmenin her biri, benzer görünen vurgulu ve etkin durumlar dışında, farklı bir degrade stiline sahiptir. Photoshop'ta çalışırken degradeler arasında renkleri eşleştirmeniz veya renkleri bir efekt katmanına taşımanız gerekir. Bu anlayışı kullanarak, indirmek için freebie kendi düğmelerinizi bile oluşturabilirsiniz!
Orijinal Kaynak - İndir
Ahşap + Kağıt Dokular
Temel mizanpaj tasarımlarınızı renklendirmeniz gerektiğinde, daha fazla ustalık yöntemine doğru ilerlemeniz gerekir. CSS arka planları veya ayar genişliği içeriği ile bunları doğru şekilde uygulayabiliyorsanız, dokular her zaman bekler. Ve gördüğüm en popüler dokulardan ikisi ahşap ve boş kağıtlar..
Not defteri fikri gerçekten basittir ancak kullanıcı arabirimi öğesinin bir parçası olarak veya düzeninizin tamamında yerleşik olarak serin bir marka tasarımında çalışabilir. Ancak kağıt her zaman kendi başına en iyi görünmüyor ve başka bir doku stillerin uyumuna yardımcı olabilir..
Orijinal Kaynak - İndir
Görüntüler öne çıkacak ve dış kabuğa sarılı olarak harika görünecek. Tüm doku kavramı web sitenize belirli bir his ya da duygu vermektir. Ahşap temaları bir ev ve doğa hissi uyandırabilir. Jeremiah Wingett tarafından indirmek için harika bir ahşap web UI kiti bile var. Yaratıcı hissediyorsanız, kendi dokularınızı bir araya getirmeyi deneyin ve web tabanlı bir ortamda nasıl performans gösterdiklerini görün..
28 Yüksek Çözünürlüklü Ahşap Dokular
Sonuç
En iyi web tasarımcıları her gün pratik yapan ve asla başarısızlıklarının nihai amaçlarından caydırmasına izin vermeyenlerdir. Hem başarılı hem de başarısız denemelerden hızlı bir şekilde geri tepmeli ve zıplamalısınız. Bu kılavuzdaki ipuçları ve freebies, bir web projesi için farklı sayfa konseptleri oluşturmayı öğrenmeye başlamak için iyi bir başlangıç noktası olmalıdır. Ve tartışma sonrası alandaki konu hakkındaki düşüncelerinizi okumak isteriz.
