IPad Uygulamasi TASARIM SURECI. iPad oranları: 3x-4x Kullanılan programlar: FireWorks Photoshop Illustrator iPad retina display resolution: 2048 x 1536.

... konulu sunumlar: "IPad Uygulamasi TASARIM SURECI. iPad oranları: 3x-4x Kullanılan programlar: FireWorks Photoshop Illustrator iPad retina display resolution: 2048 x 1536."— Sunum transkripti:

1 iPad Uygulamasi TASARIM SURECI

2 iPad oranları: 3x-4x Kullanılan programlar: FireWorks Photoshop Illustrator iPad retina display resolution: 2048 x 1536 Apple’in guideline sistemi disina cikilmamali Apple'in ios interface guidelines.

3 Kullanılan ProgramlarKullanılan Programlar  Illustrator  Photoshop  Fireworks

4 Tasarım Süreci 1) Wireframe!!

5 Wireframe kabataslak çizmek için yapılıyor. Kafanızda uygulamayı şekillendirmek için yani nereye basılınca nereye gitmeli homepagei nasıl olmalı home butonu nerde olmalı? Kareleri kutuları yönlendirme En önemli şey örnek almak. Dribbble.com! Butonlar progress bar vs nasıl yapılır?! Ana kullanici ne sekilde kullancak, gecisler nasil olacak butun bunlara karar ver.

6 2) Renk paleti belirlemek Renk paleti belirlemek bazen en önce bazende en sona bırakılıyor. Bunun için kullanılabilcek site colorlovers.com

7 www.colorlovers.com

8

9  Font belirlemek tasarımın en önemli bölümlerinden biri  2 farklı font ailesinden seçiliyor genellikle  Birbirleriyle uyumlu 2 aile bulunca daha e ğ lenceli hale geliyor.

10 Wireframede tasarım ş ekillendikten sonra renkler ve fontlarda belirlenince tasarıma ba ş lanılıyor. iPad tasarım boyutları için retina displaye göre yapılırsa çok daha kaliteli oluyor. Buyuk bir alanda çalı ş ılıyor ancak ipad ekranına tam oturuyorç

11 Fireworks’ün artıları Vektörel çalı ş ıyor Büyütüp küçültünce pixeller görülüyor ama %100 görüntüsü gerçekte nasıl görünece ğ i olan görüntü. Hafif bir program ama ö ğ renme süreci uzun sürüyor. Kapladı ğ ı alan di ğ erlerine göre daha az. Command + shift + x = elinde olan parcanin flatten resmini kaydediyor, en kucuk halini Photoshop: commant+shift+alt

12 Dosya Kaydetme Dosya kaydederken retina displayde çalı ş ılıyorsa mesela üst bar tasarlandı ğ ında bu ş u ş ekilde kayediliyorki programcı rahat bulup hızlı çalı ş abilsin: Ustbar@2x.png Kaydedilen herbir dosya yazilimciya gonderilir. Background sabittir. Mesela menu butonuna basinca renk degisiyorsa basili diye yazip ayri kaydetmek lazim bu genelde problem oluyor. Ekranda gorebilecegimiz herseyi tek tek kaydetmek gerekiyor.

13 DETAYLAR Ekranda kayma yapmamak gerekiyor kesinlikle. Mesela piyano tusunun basili haliyle cizilecekse, bir onceki ekrani kopyalayip ustunde calismak gerekiyor. Semboller diye biryeri var fireworksun. Tasarladigini sembole donusturdugun zaman oraya dusuyor o sembolu alip birkac sayfada kullanip daha sonra sembolu degistirirsen o kullandigin sayfalarda da otomatik olarak degisiyor.

14  Google: ipad retina display psd gui  Sunum icin mock up tool kit kullanilirsa cok daha guzel bir hale getirilebilir.  Hazir cizilmisleri var ve onlarin uzerinden degistirmek daha rahat boylece boyutlarda kaymalar olmuyor. Cunku mesela bir butonun boyutu parmagin optimum boyutudur ondan kucuk olursa apple kabul etmiyor.

15 Mock up tool kit

16

17 Kullanabilecegim siteler  www.behance.net www.behance.net  www.dribbble.com www.dribbble.com  www. Themeforest.com  www.interfacesketches.com www.interfacesketches.com  (iphoneun dis hatlari cizilmis. Bu siteyi wireframe icin kullanabilirsiniz)

18  Tus tasarlarken png calisilirsa daha iyi olur cunku hem saydam olarak kaydedilebiliyor hemde kayipsiz sikistiriyor.  Photoshop ve illustrator kullanmak daha iyi ve daha rahat.