alininblogu
Üye
- Kayıt
- 24 Ocak 2013
- Mesaj
- 17
- Tepki
- 3
Merhabalar derslerin tümünü http://alininblogu.com'dan takip edebilirsiniz.
Bu dersimizde Dropdown (Açılır) menü nasıl yapılır bunun detaylarına değindim. Açılır Menüler sitelerimizde gezintiye çıktığımızda ihtiyaç duyacağımız 2. derecede önemli bileşenlerdir. 1.sinin buttonlar olduğunu belirtmiştik. Açılır menüler ise bu buttonların içeriklerini barındırır. Örneğin “KURUMSAL” buttonunun içerisindeki, “Tarihçe, Hakkımızda, Misyonumuz” gibi alt kategorilerin yer aldığını düşünün. Bunun gibi içerik sayfalarına özellikle alışveriş ve haber sitelerinde çok ihtiyaç duyarız. Diğer türlü hazırlanan tasarımlar daha çok ortadadır ve sayfaya yayılır çokta fazla kategori ihtiyacı gerektirmez. Bugün Facebook gibi dünyanın en büyük kuruluşlarından birisi bile açılır menü ihtiyacını sınırlı sayıda tutmuştur. Bunun en güzel örneklerini Facebook’un “Ayarlar” kategorisinde görebiliriz.
Video 720p HD formatında hazırlanmıştır. Ayrıca videoda oluşturulan tasarımın .psd si konunun en altındaki linkte yer almaktadır.
Video İçeriği
Arkaplana HD bir şehir manzaralı resim yerleştirdim ve 960 px lik bir alanın içerisine sitenin yapısını oturttum. Bu arada sitenin mantığına uygun olarak menü şeridini sonsuz bir çizgi haline getirerek yatay bir dikdörtgen olarak yerleştirdim. Dropdown yani Açılır Menü alanımı da bu 960 px lik alana yerleştirdim ve kategoride adı geçen buttonun içerik yapısına göre şekillendirdim. Videoda anlatılan kategori “Röportajlar” kategorisiydi ve 2 adet fotoğraf yerleştirip, yazarın adı ile röportaj hakkında açıklama kısmı ekledim. Yazar başlıkları ve sitede genellikle kullandığım şeffaf zeminler, arkaplanda kullandığım renkli Hd şehir manzaralı resme uygun olması için ayrıca özen göstermeye çalıştım. Çünkü resmi arkaplanda kullansakta içerisindeki görseli ön plana çıkartma niyetindeydim ve bunun en iyi yolu sitedeki nesneleri şeffaf kullanmak, yani opacity değerleriyle oynamaktan geçiyordu.
Sade, bir o kadarda şık bununla birlikte kullanıcıya hitap eden bir tasarım olması için, büyük puntolu yazılar ve nesneler arasındaki boşluklara ayrıca dikkat etmeye çalıştım. Açılır menü de bunları destekler nitelikte, aşağı doğru açılsa da sitenin içeriğini engellemeyecek nitelikte tasarlandı. Dropdown menünün de zemini şeffaf olduğu için, hem slider zemindeki şeffaflık, hem de dropdown’un şeffaflığı yani opacity değerleri üst üste gelince, tatlı bir opaklık ortaya çıktı. Bu opaklığın da kullanıcıları rahatsız etmemesi için içerisindeki nesneler, menülere nazaran daha da ufak olarak yerleştirildi.
Drowndown Menü .PSD indirmek için tıklayın
Ali Yıldırım
Bu dersimizde Dropdown (Açılır) menü nasıl yapılır bunun detaylarına değindim. Açılır Menüler sitelerimizde gezintiye çıktığımızda ihtiyaç duyacağımız 2. derecede önemli bileşenlerdir. 1.sinin buttonlar olduğunu belirtmiştik. Açılır menüler ise bu buttonların içeriklerini barındırır. Örneğin “KURUMSAL” buttonunun içerisindeki, “Tarihçe, Hakkımızda, Misyonumuz” gibi alt kategorilerin yer aldığını düşünün. Bunun gibi içerik sayfalarına özellikle alışveriş ve haber sitelerinde çok ihtiyaç duyarız. Diğer türlü hazırlanan tasarımlar daha çok ortadadır ve sayfaya yayılır çokta fazla kategori ihtiyacı gerektirmez. Bugün Facebook gibi dünyanın en büyük kuruluşlarından birisi bile açılır menü ihtiyacını sınırlı sayıda tutmuştur. Bunun en güzel örneklerini Facebook’un “Ayarlar” kategorisinde görebiliriz.
Video 720p HD formatında hazırlanmıştır. Ayrıca videoda oluşturulan tasarımın .psd si konunun en altındaki linkte yer almaktadır.
Video İçeriği
Arkaplana HD bir şehir manzaralı resim yerleştirdim ve 960 px lik bir alanın içerisine sitenin yapısını oturttum. Bu arada sitenin mantığına uygun olarak menü şeridini sonsuz bir çizgi haline getirerek yatay bir dikdörtgen olarak yerleştirdim. Dropdown yani Açılır Menü alanımı da bu 960 px lik alana yerleştirdim ve kategoride adı geçen buttonun içerik yapısına göre şekillendirdim. Videoda anlatılan kategori “Röportajlar” kategorisiydi ve 2 adet fotoğraf yerleştirip, yazarın adı ile röportaj hakkında açıklama kısmı ekledim. Yazar başlıkları ve sitede genellikle kullandığım şeffaf zeminler, arkaplanda kullandığım renkli Hd şehir manzaralı resme uygun olması için ayrıca özen göstermeye çalıştım. Çünkü resmi arkaplanda kullansakta içerisindeki görseli ön plana çıkartma niyetindeydim ve bunun en iyi yolu sitedeki nesneleri şeffaf kullanmak, yani opacity değerleriyle oynamaktan geçiyordu.
Sade, bir o kadarda şık bununla birlikte kullanıcıya hitap eden bir tasarım olması için, büyük puntolu yazılar ve nesneler arasındaki boşluklara ayrıca dikkat etmeye çalıştım. Açılır menü de bunları destekler nitelikte, aşağı doğru açılsa da sitenin içeriğini engellemeyecek nitelikte tasarlandı. Dropdown menünün de zemini şeffaf olduğu için, hem slider zemindeki şeffaflık, hem de dropdown’un şeffaflığı yani opacity değerleri üst üste gelince, tatlı bir opaklık ortaya çıktı. Bu opaklığın da kullanıcıları rahatsız etmemesi için içerisindeki nesneler, menülere nazaran daha da ufak olarak yerleştirildi.
Drowndown Menü .PSD indirmek için tıklayın
Ali Yıldırım
