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

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