28 Ocak Pazartesi ´13   —   6 Yorum


Geçtiğimiz hafta, iOS geliştiricilerimizden biri, varolan iPhone uygulamamızı iPad'e sadece birkaç ayarla oynadıktna sonra derleyerek çalışır hale getirdi, sonuç tabi ki götü başı dağılmış bir uygulama, ama fonksiyonel. Tabi ki iPhone ve iPad arasında deneyim tasarımı farklılıkları var fakat teknik olarak çok küçük problemler var. Uygulamanın uyumsuzluğunun 95%'i sadece görsel problemler ve bu problemler tasarımın özellikle iPhone ekran çözünürlüğüne göre yapılmış olmasında.

Mobil uygulamalar çok iyi örnekler değiller bu yazı için çünkü uygulamanın çalışacağı cihazlar belirli ve çözünürlükleri belirli, yazılan uygulamalar da çalışacakları cihazlara oldukça bağlılar.

Web'de ise durum biraz daha farklı, cihazları veya ekran çözünürlüklerini kontrol edemezsiniz, ayrıca web uyuglamalardan daha universal bir içerik türü, çok farklı cihazlar tarafından okunabilen çok daha geniş bir kitleye hitap edebildiginiz bir içerik dağıtım türü. Bu yazıda size bu farklılıkların bazı çıkış noktaları anlatacağım ve farklı bir arayüz geliştirme yaklaşımdan bahsedeceğim.

Az önce mobil uygulamalar bu problemin açık şekilde görüleceği ortamlar olmayabilir demiştim fakat Android işletim sistemi üsütnde çalışan uygulamalar bu yazıya daha yakın örnekler olabilirler çünkü piyasadaki farklı ekran çözünürlüğüne sahip cihaz sayısı oldukça yüksek, dolayısıyla web örneğine daha yakınlar.

Farklı çözünürlüklere sahip kullanıcı kitlesine üretilen klasik bir tasarım senaryosunda, kullanıcı analitikleri analizi yapılıp en çok kullanılan ekran çözünürlüğü belirlenir. Vazgeçilebilecek ekran çüzünürlüklerinden kurtulduktan sonra kabul edilebilecek minimum ve maksimum ekran çözünürlüğü tanımlandıktan sonra buna göre bir tasarım çalışması yapmak genel yaklaşımdır. Kullanıcı deneyimi tasarlandıktan sonra arayüz tasarımı yapılır ve arayüz tasarımı bittikten sonra tasarlanan asset'ler (resimler, ikonlar, butonlar, arka plan grafikleri vs) çoğu zaman arayüz geliştiricisinin ekran çözünürlüğünde test edilir ve az sonra belirteceğim deneyler yapılmaz.

Devamını Oku →
20 Temmuz Pazar ´08   —   18 Yorum

Web İkonları

v0.7'de sitenin alt kısmına yerleştirmek üzere tasarladığım, web 2.0 button görünümüne sahip ikonları Dosyalar bölümünde Grafik dizininde "rss_xhtml_icons.psd" ve "valid_css_xhtml_icons.psd" dosyaları olarak bulabilirsiniz. (Her ne kadar sayfalar valid olmasa da :-) )

http://www.mfyz.com/?/dosyalar/Grafik

Kullanımı Creative Commons 2.5 lisansına uygun olmalıdır. Lisans hakkında bilgi almak için de http://www.mfyz.com/?/hakkinda/lisans/ adresini ziyaret edebilirsiniz.
20 Temmuz Pazar ´08   —   2 Yorum

Bazı İkonlar

Sitede kullandığım ve zamanında yaptığım bazı ikonlar. PHP logosunun web 2.0 patlamadan önce aqua buton denemelerimden ortaya çıkardığım versiyonu, şu an günlük sayfalarında tarihi görüntülediğim takvim ikonu ve anasayfada kullandığım firefox bannerı ve alternatifi.

Dosyalar bölümünde Grafik dizininde psd dosyalarını bulabilirsiniz.
http://www.mfyz.com/?/dosyalar/Grafik

Kullanımı Creative Commons 2.5 lisansına uygun olmalıdır. Lisans hakkında bilgi almak için de http://www.mfyz.com/?/hakkinda/lisans/ adresini ziyaret edebilirsiniz.

Popüler Etiketler

login mysql session blog html db database service free api google social network app facebook developer mootools jquery web app php open source apple macosx javascript js plugin box apache kurulum newsletter mail ios iphone ipad app store store in-app purchase purchase subscription verification storekit itunes connect itunes rss xml language lifestream parse integration server örnek kod cms url table query select css radio button switch date sql diff search pharma hack wordpress seo spam export htaccess route router mod_rewrite zaman tarih svn subversion git version control deployment windows linux fstab ntfs screen konsol terminal kitap tebrik osx player mobile banner opengraph graph share code development portfolio imza signature iOS pear mdb2 prepare execute mssql pgsql html5 form input cache startups www subdomain redirect crossdomain ajax media meta link injection sosyal chart grafik gimp phpstorm jetbrains ide editor css3 browsers support twitter job mfyz design cookie assets ruffles wanda oyun xhtml digital internet statistics while applications kontrol yapıları if nasıl music textarea dokuman ubuntu bootstrap framework optimizasyon analyse procedure generator ui ux webkit proje firefox logo nedir xmlhttprequest object optimization connect style doritos less compile compiler on-the-fly workspace tool http widget howto icons wireless coding istatistik insanlar medya ipucu ingilizce auth ie browser fql calendar download license tytz sitemap lisans regex kampanya laptop notebook internet explorer icon ikon