1 / 18

Efficient iPad Design Process for App Development

This guide covers the design process for iPad apps, from wireframing to color palettes and fonts selection, following Apple's interface guidelines and utilizing programs like Illustrator, Photoshop, and Fireworks. Learn tips for creating high-quality designs tailored for iPad retina display resolution.

sopoline-tyson
Télécharger la présentation

Efficient iPad Design Process for App Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. iPadUygulamasi TASARIM SURECI

  2. iPadoranları: 3x-4x • Kullanılanprogramlar:FireWorks Photoshop Illustrator • iPad retina display resolution: 2048 x 1536 • Apple’in guideline sistemidisinacikilmamali • Apple'inios interface guidelines.

  3. KullanılanProgramlar Illustrator Photoshop Fireworks

  4. TasarımSüreci • 1) Wireframe!!

  5. Wireframe kabataslakçizmekiçinyapılıyor. • Kafanızdauygulamayışekillendirmekiçinyaninereyebasılıncanereyegitmelihomepageinasılolmalı home butonunerdeolmalı? • Karelerikutularıyönlendirme • En önemlişeyörnekalmak. Dribbble.com! Butonlar progress bar vsnasılyapılır?! • Ana kullanici ne sekildekullancak, gecislernasilolacakbutunbunlarakarar ver.

  6. 2) Renkpaletibelirlemek • Renkpaletibelirlemekbazen en öncebazende en sonabırakılıyor. • Bununiçinkullanılabilcek site colorlovers.com

  7. www.colorlovers.com

  8. 3) Fontlarıbelirleme Font belirlemektasarımın en önemlibölümlerindenbiri 2 farklı font ailesindenseçiliyorgenellikle Birbirleriyleuyumlu 2 ailebuluncadahaeğlenceli hale geliyor.

  9. Wireframedetasarımşekillendiktensonrarenklervefontlardabelirlenincetasarımabaşlanılıyor.Wireframedetasarımşekillendiktensonrarenklervefontlardabelirlenincetasarımabaşlanılıyor. • iPadtasarımboyutlarıiçin retina displayegöreyapılırsaçokdahakalitelioluyor. Buyukbiralandaçalışılıyorancakipadekranına tam oturuyorç

  10. Fireworks’ünartıları • Vektörelçalışıyor • Büyütüpküçültüncepixellergörülüyorama %100 görüntüsügerçektenasılgörüneceğiolangörüntü. • Hafifbir program amaöğrenmesüreciuzunsürüyor. • Kapladığıalandiğerlerinegöredaha az. • Command + shift + x = elindeolanparcanin flatten resminikaydediyor, en kucukhalini • Photoshop: commant+shift+alt

  11. DosyaKaydetme • Dosyakaydederken retina displaydeçalışılıyorsameselaüst bar tasarlandığındabuşuşekildekayediliyorkiprogramcırahatbuluphızlıçalışabilsin: • Ustbar@2x.png • Kaydedilenherbirdosyayazilimciyagonderilir. • Background sabittir. • Mesela menu butonunabasincarenkdegisiyorsabasilidiyeyazipayrikaydetmeklazimbugenelde problem oluyor. • Ekrandagorebilecegimizherseyitektekkaydetmekgerekiyor.

  12. Detaylar • Ekrandakaymayapmamakgerekiyorkesinlikle. • Meselapiyanotusununbasilihaliylecizilecekse, bironcekiekranikopyalayipustundecalismakgerekiyor. • Sembollerdiyebiryerivarfireworksun. Tasarladiginisemboledonusturdugunzamanorayadusuyoro sembolualipbirkacsayfadakullanipdahasonrasemboludegistirirsen o kullandiginsayfalarda da otomatikolarakdegisiyor.

  13. Google: ipad retina display psdgui • Sunumicin mock up tool kit kullanilirsacokdahaguzelbir hale getirilebilir. • Hazircizilmislerivarveonlarinuzerindendegistirmekdaharahatboyleceboyutlardakaymalarolmuyor. Cunkumeselabirbutonunboyutuparmagin optimum boyutudurondankucukolursa apple kabuletmiyor.

  14. Mock up tool kit

  15. Kullanabilecegimsiteler • www.behance.net • www.dribbble.com • www. Themeforest.com • www.interfacesketches.com • (iphoneun dis hatlaricizilmis. Bu siteyi wireframe icinkullanabilirsiniz)

  16. Tustasarlarkenpngcalisilirsadahaiyiolurcunku hem saydamolarakkaydedilebiliyorhemdekayipsizsikistiriyor. • Photoshop ve illustrator kullanmakdahaiyivedaharahat.

More Related