Haber Uygulamamamızın Anasayfa Çizimi

Haber Uygulamamamızın Anasayfa Çizimi

Haber Uygulamamamızın Anasayfa Çizimi

Haber Uygulamamamızın Anasayfa Çizimi

Daha önce söylediğimiz gibi çizim yaparken Photoshop programı kullanacağız. Fakat bizler öyle bir tasarım yapmalıyız ki, hem İOS platformlarına uyumlu olmalı hem de Android platformlarına. Aksi takdirde her iki platform için farklı farklı tasarımlar yapmak zorunda kalacağız. Bu da biz tasarımcılar için vakit kaybı demektir.

Android tasarımlarımızı CSS mantığı ile düşünerek olursak Repeat-x Repeat-y mantığı ile çalışmaktadır. Yani ekranımızda tasarımlarımızı oturttuktan sonra 1px  alın aynı CSS’de yaptığımız gibi devam edeceğiz. Bu yüzden bizler İOS standartlarında çalışıp aynı zamanda bu tasarımımızı Android telefonlarımıza da uyarlayabiliriz. O halde bizim için en ideal çalışma ekranı 640×960 diyebiliriz.

Programımızı açalım ve File >New diyerek yeni bir sayfa oluşturalım.

İki Tasarımada Uygun

İki Tasarımada Uygun

Sayfamızı 640×960 ebatında tasarlayacağız. Hem android için hemde İphone için en ideal ekran çözünürlüklüğümüz ekranımızda gördüğümüz ölçülerdir. Bir mobil tasarım ürünü geliştirirken daima Navigation barımızı yapalım öncelikle;

Ekranda gördüğümüz barımızın ebatı 640×60 ebatındadır. Burada bir şeye karar vermeliyiz, ekranımızda status bar görünecek mi görünmeyecek mi? Bunun anlamı aslında şu, ekranımız da saat şarj gibi iconların yer aldığı iconlar siyah zeminde görünsün.

Status bar dediğimiz siyah zeminimizi istersek ekleriz istersek eklemeyiz, o tamamen bize kalmış. Fakat eklemek her zaman bir avantaj. Çünkü kullanıcılar saatini, şarjını ve wifi iconunu sürekli olarak görmek isteyecekler. Saati görmek istediğinde uygulamdan çıkmasına gerek olmamalı. Şimdi ise uygulamamamızın üzerine logomuzu yerleştirelim.

Bu kısım aslında bizleri en düşündüren kısım haline gelebilir. Navigation bar alanımız genişlik olarak bizlere imkân sağlasa da alan olarak yükseklik olarak aynı performansı göstermiyor maalesef. Mesela bazen yaptığımız işlerde öyle logolar geliyor ki, navigation bar alanımızın üzerine bu logoyu nasıl yerleştireceğim diye kara kara düşündüğüm anlar oluyor.

Logoyu navigation bar alanamızın üzerine eklemek küçük bir yapı ile mümkün değildir. Eğer logomuzu küçültüp o alana sığdırmaya çalışırsak çok biçimsiz duracaktır. Bu da müşterilerimizin çalışmamızı eleştirmesine neden olabilir. Zaten görüntü itibari ile de bir tasarımcı böyle bir şey yapıp müşteriye sunmaz, sunmamalıdır. Peki ne yapacağız bu tip küçük logolarımız var ise.

Logomuz tıpkı üstte yazdığım gibi yüksek bir biçimde, ufaltırsam çok küçük duracaktı uygulamamızda, navigation barımızın yapısını değiştirerek daha farklı bir görsel sundum, altına bir çerçeve koyarak logomuzu o çerçevenin üzerinde biraz daha farklı yerleştirdim. Bu tip standartların dışına çıkmak aynı zamanda müşterilerimizi de memnun edecektir. Bizler istediğimiz gibi navigation barımız üzerinde tasarımsal değişiklikler yapabiliriz. Hem Android hem iOS bize bu imkânları sunmuştur.

Bizlerin yapacağı haber uygulamamızın örnek olarak kullanacağımız MEDEN logosu navigation barımızda oldukça şık duracaktır.

Şimdi Uygulamamızda düşünmemiz gereken bir kısım var. Bir haber sitesinde 10’a yakın menü olur ve biz bunların hepsini yazmak zorundayız. Bu 10 menüyü direkt anasayfaya yazma imkânımız yok maalesef, uygulamamızı oldukça kötü gösterecektir, bu yüzden sol tarafa doğru açılı bir menü kullanacağız. Şimdi ise bu uygulamamızın iconunu yerleştirelim;

3 tane çizginin alt alta durması bir mobil uygulamada oranın menü olduğunu teşkil eder. Tüm kullanıcılar bunu bilmektedir. Her kullanıcının bunu bilmesindeki en büyük neden sanırım facebook kullandığı içindir. Tüm haber sistemleri artık kategorilerini daha hızlı şekilde sunabilmek için böyle bir yönetim deniyorlar. Gerçekten oldukça kullanışlı bir sistem diyebiliriz.

Sağ kısıma iconumuzu yerleştirelim;

Yenile iconumuzu da yerleştirdik. Burada kullandığımız iconlar yaptığı işi yansıtmalı. Çünkü kullanıcılar kalıplaşmış şeyleri bilseler de her kullanıcı bunu bilmeyebilir. Bu konuyu dikkat etmeliyiz. Uygulamamızın Navigation bar alanını bu şekilde tamamladık. Burada iconlarımızın eklerken bir diğer dikkat etmemiz gereken husus iconlarımızın altındaki zeminlerimizde bir derinlik olmalı.

Bunlarla beraber daima tıklandıktan sonraki halinide yapmalıyız. iPhone gibi cihazlarda kullanıcının o butonu tıkladığı anlaşılmaktadır fakat, Android için aynı şey geçerli değildir. O yüzden bizler iconlarımızda ve butonlarımızda her zaman kullanıcının tıkladıktan sonraki halinide tasarlamalıyız.

Şimdi ise Slider alanımızı yapalım;

Burada şuna dikkatinizi çekmenizi istiyorum, bir haber sitesinin mobil tasarımını yapıyorsanız, kullancağınız resimler o sitenin resmi ile kadrajlı olmalıdır. Yani resimler orantılı şekilde küçültülmelidir.

Ekranda gördüğünüz 500×320 manşet alanımızın ebatıdır, bizler bunu uygulamamıza alırken ebatını daima kadrajlı ufaltmalıyız. Bunu yapmak için ise Photoshop‘da image menümüzden image size sekmemize tıklayalım.

Image Size

Image Size

Image size penceremizde gördüğünüz gibi Width değerini değiştirdiğimizde hangi alanı ufaltsak kadrajlı olarak ufaltacaktır. Eğer resimlerimizi kadrajlı ufalmıyor ise, aşağıda Constrain Proportions kutucuğunun seçili olduğundan emin olmalıyız. Eğer seçili ise kadrajlı olarak ufaltacaktır. Örneğin 500 yerine 250 yazalım.

Kadrajlı bir şekilde ufalttı ve 250 genişliğimizin yüksekliğini 160 olarak belirledi. Aynı zamanda resmimizi shift tuşuna basarak da kadrajlı şekilde göz kararı ufaltabiliriz. Bu konuyu anladığımıza göre kaldığımız yerden devam edelim. Şimdi Slider alanımızın ebatı 640×300 bu ebatındaki bir resmi bu şekilde mobile koymamız mümkün değil. O yüzden kadrajlı olarak ufatmalıyız. Bu yüzden resmimizi yerleştirelim, bakalım resmimiz mobil ekranımızda kaça kaç oturacak.

Resmimizi ekledim ve üst kısma baktığımızda 640×300 ebatında bir resim eklediğimizde 620×291 oldu. Şimdi haberlerimizin başlıklarını çekmemiz gerekiyor, ister altına çekeriz ister üstüne bir bar yapar direkt üstüne çekeriz bu bize kalmış açıkçası. Ben direkt alt kısma bir bar yapacağım ve başlığımızı ortaya çekeceğim, bu sayede zeminimizi yazı ile doldurmamış olacağız.

Bu gönderiyi paylaş

Bir cevap yazın