Her yıl yeni bir siteyle yeni web siteleri açılmaktadır. Kendine, “Modern bir web tasarımını nasıl alabilirim?” Diye soruyor olabilirsiniz. Tüm modern web sitelerinin sahip olacağı birkaç genel unsura bir göz atalım, ardından modern bir his elde etmek için kullanabileceğiniz yeni stilleri takip edin ve her web sitesine sığmayabilecek özelliklere yakın ama sizinkileri kendinize pop.
GENELDE ÇAĞDAŞ WEB TASARIMI
TİPOGRAFİ
Tipografi, marka kimliği oluşturmaya yardımcı olabilecek modern bir web tasarım aracıdır. Bir marka ile kullandıkları yazı tipi (ler) arasında bir bağlantı oluşturmak, web’de gezinirken anında tanıdıklık sağlar.
Başlık yazı tiplerini, markanıza geri bağlamak istiyorsanız, mümkünse. Değilse, başlık fontlarınızı, izleyicilerin gözünü web sitenizin farklı bölümlerine yönlendirmek için kullanabilirsiniz.
Başlık fontunuz için, yukarıda gösterilen araçtan, FontSquirrel’deki seçeneklere bakmanızı tavsiye ederim. Ücretsiz indirilebilen font ailesi hizmeti sunarlar. Başlıklarda özel bir yazı tipine sahip olmak, sayfada neyin önemli olduğunu vurgulamak için göz alıcı bir yoldur.
Paragraf metnine ve diğer küçük kopyalara gelince, eski yazı tiplerinin sıkıcı günleri. Times New Roman ve Helvetica, web sitenizde kullanmak istediğiniz yazı tipleri değil. En azından, tümü Google onaylı ve web sitenize uygulaması kolay, ücretsiz bazı Google Fonts ile yaratıcı olabilirsiniz. Vücut yazı tipi için tavsiye edebileceğim birkaçı (p, ul, ol, li) Raleway, Lato ve Open Sans. Lato ve Open Sans daha geleneksel seçimlerdir, ancak Raleway’i çekip çıkarabilirseniz harika görünecek. Sana söz veriyorum.
Font aileleriyle aynı konuda olmasa da, web sayfalarının font büyüklüğünün artma eğilimini fark etmek önemlidir. Artık vücut kopyalarınız için 12pt font kullanmak istemiyorsunuz. 18pt, 21pt ve hatta 24pt bile duyulmadığı anlayışı ile 16pt fontu en düşük düzeyde düşünmeye başlayın.
DUYARLI
Herkes bu noktada duyarlı web tasarımının ne kadar önemli olduğunu biliyor, ancak neden daha fazla vurgulamıyorsunuz? Duyarlı tasarım, ekran boyutuna ve içeriğin yeniden düzenlenmesine dayanır. Bir web sitesinin duyarlı olup olmadığını anlamanın kolay bir yolu, tarayıcı pencerenizi yeniden boyutlandırmaktır;
Özellikle duyarlı olmasını sağlamak istediğiniz bir alan, modern web tasarımında bir başka büyüyen trend olan arka plan resimleriniz olacaktır. Büyük özellikli arka planınız, her birine doğru yüklenmezse, çeşitli ekran boyutlarında ve cihazlarda çok iyi sonuç vermez. Bunu basit bir CSS çalışması ile yapabilirsiniz.
TARZLAR
Tipografiler ve duyarlı görüntüler, bu modern web tasarım stili eğilimlerinin tümüne uygulanacak iki öğe veya eğilimdir.
KAFES
Görünüşe göre Windows 8 arayüzü tarafından popüler hale getirilen ızgara tasarım stili, modern web tasarımında haklı olarak yer aldı. Web sitenize uygulamak nispeten basit ve kolay bir tasarım trendidir ve ziyaretçileriniz için ekranın üstünde daha fazla bilgi alır. Ziyaretçilere çok sayıda dönüşüm yolu sunabilmek, şaşırtıcı özelliklere sahip bir fotoğraf görüntülerken harika olmakla birlikte, çok fazla seçenek sunmadığınızdan emin olun. Dewitt, ziyaretçilerin “Keşfetmesi” için üstte üç seçenek sunuyor. Sunmanız gereken en yüksek değer ve web sitelerine örnek olarak seçmeyi seçmemin nedenlerinden biri budur.
Sağdaki iki görüntünün de bağlantı olup olmadığını hayal edin. Çoğu izleyici için bu, aşırı bilgi olması, sayfanın olması gerekenden daha karmaşık olmasını sağlar. İki resmin birbirinden çapraz olarak görünmesi görsel olarak çekici bir akış oluşturur ve sayfayı basit ve güzel tutar.
EN AZ
Minimalist tasarım çıkarmak zor. Fikir basittir – less is more – ama yürütme küçük ayrıntılar dayanır. Minimalist bir web sitesinin temel özellikleri 1) beyaz alanın miktarı, 2) tipografiye olan bağımlılığı ve bir ölçüde de 3) düğme, gezinme ve bağlantı eksikliğidir. Değil aklınıza gelebilecek her tasarım öğesi bu tür sitelere herhangi olacak. Tüm sayfalarında birleştirilmiş basit bir his var.
Bu modern web tasarım stili kopya yaklaşık tasarım düzeni hakkında daha fazla olduğunu iddia edebilir. Minimal bir tasarımı etkili kılmak için, en önemli kopyaya öncelik vermeli ve sayfadan çıkmasını sağlamalısınız. Artık web üzerinde sözcüklerle değil görüntülü hikayeler anlatıyorsunuz ve bu tarzı bu kadar etkili yapan şey de bu.
Design Lobby, logosu ile çalışan ve estetik açıdan hoş, temiz ve basit bir renk paletine sahip. Minimal üst düzeyde gezinme ve her sayfada minimalist, düz dokunuşlu düğmeler ile birlikte en az sayıda bağlantıya sahiptirler. Her sayfadaki öğelerle önem sırasını oluşturmak için beyaz boşluk kullandılar ve başlıkları için dikkat gerektiren ilginç bir font ailesi kullandılar.
DÜZ
Düz tasarım minimalizm fikrinden kaynaklanıyor. Tamamen aynı olmamakla birlikte, aynı niteliklere sahipler. Düz tasarım kopyanın önüne ve ortasına koyar – izleyiciyi rahatsız edecek çok az şey vardır. Degradelerde veya teknik olarak minimalist tasarımdan farklı olan üç boyut önerecek bir şey yok. Düz tasarımı tanımlayan şey, mükemmel renk seçenekleri ve tipografidir. Bununla birlikte, düz tasarım için, onu minimal tasarımdan ayıran şey, arka plan görüntülerinin olmamasıdır. Düz tasarımda bu bir şey değil. Genellikle, sessiz renkler olan tam renkli arka plan afişlerini veya beyaz metinli parlak kalın renkleri görürsünüz.
450GSM’nin onlar için çalışan güzel bir renk paleti var – kırmızılar logolarından kaynaklanıyor, aqua yeşil renk buna mükemmel bir iltifat. Tüm sayfalarında ne kadar az metin olduğuna dikkat edin? Her sayfada olması gerekenleri kopyalamak için basit bir iş yaptılar. Bunun etkileyici bir başarı olduğunu düşünmüyorsanız, “Hakkında” sayfalarına bakın. Gerçekten normal “Hakkında” sayfasından sapıyor.
Görüntüleri ayrıca, başka bir modern web tasarım trendi olan özel resimlere de dayanıyor.
RESİMLER
Burada kısa bir not: “Game Changers” bağlantısını tıkladığınızda, sizi bir yükleme ekranına götürdüğünü fark etmiş olabilirsiniz. Bu, modern web tasarımı için iyi değildir ve kaçınmak istediğiniz bir şeydir. Ancak, bu sayfa ve bu web sitesinin geri kalanı, illüstrasyonun modern web tasarım trendini o kadar iyi gösteriyor ki, neden olmasın?
Çizim genellikle gerçek görüntüler kullanmaz. Tamamen özel Illustrator veya Photoshop’ta yapılmış. Bu web sitesinin, görünen oyuncular için bu özel görüntüler yerine web tasarımı yapan firmalar gerçek fotoğrafları kolayca kullanabileceğini görebilirsiniz. Yapmaya karar verdikleri şey çok daha ilginç. Onların illüstrasyonları onlara açık bir şekilde hissettiriyor, ki şu anda açıkça stilde, ancak illüstrasyon web tasarımı için tek seçenek bu değil. İkisinin nasıl yığıldığını görmek için Flat vs Realism’e bir göz atın.
Bu stil, her gösterimi oluşturmak için zaman harcadığı için daha yüksek düzeyde bir taahhüt gerektirir. Ancak, sizi öne çıkaran benzersiz bir fotoğrafa sahip değilseniz, bu göz önünde bulundurmak isteyeceğiniz bir seçenek olabilir. Şirketinizin web sitesine özgü, başka kimsenin sahip olamayacağı bir deneyim yaratmanın harika bir yoludur.
ÖZELLİKLER
Bu yazının ilk bölümünün aksine (içinde tipografi ve duyarlı resimlerden bahsedeceğim, her web sitesi stilinin kullanacağı özellikler) bu “Özellikler” bölümü, benzersiz bazı modern web tasarım özelliklerinden bahsediyor: Her web sitesinde.
VİDEO
Video arka planları büyüyen bir trend ve neden olmasın? Güzel, gösterişli ve eşsizler. Büyüyen bir trend, bu yüzden henüz herkes yok. Onu kullananlar, statik bir arka plan görüntüsünden çok daha ilginç bir görünüm sunar. Muhtemelen bunu yapmanın bazı SEO sorunları olduğundan eminim, ancak bir tane yapabilirseniz, bunun için gidin.
DÖNER
Kaydırma efektleri şu anda sıcak. Akılda tutmak istediğin şey, küçük bir etkinin bile çok yol alabileceği. Yukarıdaki örneği seçtim, çünkü neden bahsettiğimi görmek çok daha kolay. Yanıp sönen veya yandan gelen elemanlar oldukça dikkat çekicidir ve daha sonra ne olacağını görmek için sayfayı aşağı kaydırmaya devam etmenizi sağlar. Web’de kaydırma yapmak artık yaygın bir durumdur ve ziyaretçilerinizin içeriğinizin bir kısmına ulaşmak için kaydırma yapması konusunda endişelenmemelisiniz.
KENDİ WEB SİTENİZİ YARATMAK
Kendi web sitenizi oluşturmak veya mevcut sitenizi yeniden tasarlamak olsun, işte bu yazıdaki bilgilere dayanarak sizin için sahip olduğum birkaç ipucu.
Tasarım yapmadan önce, web sitenizde ne tür içerik kullandığınızı bilmek zorundasınız. Bu bazen seçtiğiniz stili belirleyecektir.
Kullanmak istediğiniz modern web tasarım stillerinden birini seçin: ızgara, minimal, düz veya illüstrasyon.
Kullanmak istediğiniz tipografiyi seçin. Vücut kopyası için kullandığınız stilin başlıklarınız için seçtiğiniz stili tamamladığından emin olun.
Seçtiğiniz stille uyumlu olmasını istediğiniz zilleri ve ıslıkları bulun.
Web sitenizin, web sitesinde aynı hissi koruduğundan emin olun. Cidden, sayfalar arasında stilleri değiştirmeye çalışmayın.
Bu yönergelere uymak ve bazı marka kişilikleri eklemek, web sitenizi ziyaretçileri çevrimiçi çekecek şekilde konumlandıran modern bir web tasarımına neden olur.
Web Tasarım 