Web Tasarımı ve Adobe Muse

... konulu sunumlar: "Web Tasarımı ve Adobe Muse"— Sunum transkripti:

1 Web Tasarımı ve Adobe Muse
Yrd. Doç. Dr. Doğan AYDOĞAN

2 ADOBE MUSE Bir web sitesi temel olarak iki unsurdan oluşur; grafik tasarım ve kodlar (HTML,PHP) Tasarım ile ilgilenen ancak kodları bilmeyenler için geliştirilmiş olan ADOBE MUSE programı tek bir satır kod yazmadan gelişmiş web siteleri yapmanın olanağını sunmaktadır. Adobe Muse ile responsible, yani hem bilgisayarda hem tablette hem de telefonda açılabilen web siteleri yapacağız. MUSE; tam standartlara sahip bir web sitesi yapabilir Slideshow, menü, iletişim formu gibi interaktif unsurları kod yazmadan oluşturabilir Tablet ve mobil siteleri oluşturabilir

3 MUSE ne yapamaz? Sahibinden.com / hepsiburada.com gibi veritabanı yönetimine ihtiyaç duyulan uygulamaları yapamaz. Oluşturulan siteler, tek tek mobil, tablet ve pc için yapılan siteler kadar başarılı olmayabilir. MUSE web tasarımına başlamak için en uygun noktadır. Kod yazmadan yapılabilecek, ulaşılabilecek sınırları görebilirsiniz. MUSE öğrendikten sonra dilerseniz HTML, CSS ve JavaScript kodları ile dreamweaver programında çok daha gelişmiş web siteleri yapabilirsiniz.

4 BASKI ve WEB Dizayn farkları.
Santimetre temel birimdir Basılacak resimler en az 300 dpi olmalıdır CMYK renk evreni Font sorunu yoktur Tek bir materyalde görüntülenir Dijital dizayn (WEB DİZAYN) Piksel temel birimdir (96 dpi) RGB renk evreni Kullanıcının ayarları farklı ise fontlar görünmeyebilir Pc, tablet, ve telefon gibi farklı araçlarla ulaşılabilir Hızlı yüklenme (düşük dosya boyutu) çok önemlidir

5 WEB Tasarım için dosya türleri
JPG – fotoğraflar için idealdir, kayıp çok azdır, dosya boyutu çok küçüktür GIF – tek renkli logo çalışmaları, animasyonlu resimler, sınırlı şeffaflık Bir gif örneği : PNG - gelişmiş şeffaflık, fotoğrafta kayıp çok azdır, dosya boyutu büyür (jpg’e göre), renk evreni geniştir Bir png örneği: png İllustrator, corel draw file, psd gibi dosyalar web tasarımında kullanılamaz.

6 Siteye başlarken İnsanlar bu siteye ne amaçla gelecek ve ne arayacak ?
İçeriğin akıllı telefondan, dev ekran monitörlere kadar bir çok araçta görüneceğini göz önünde bulundurun. Site tasarımınızı genel olarak 3 ya da 4 renk üzerine oluşturun. (Adobe Kuler uyumlu renk paletlerini bulabileceğiniz bir uygulamadır) Sitenizin amacına uygun font’u bulun. Pastane web sitesi ile araba tamircisi web sitesi aynı fontla olamaz. Google Fonts adresinden birçok fonta ulaşabilirsiniz. Sitenizi yayınlamadan önce mutlaka değişik araçlarda test edin.

7 ADOBE MUSE arayüzü Plan, tasarım, önizleme ve yayınla paneli Menü
Masaüstü, tablet ve telefon; tasarım tercihleri Kalıplar paneli; Çalışmak istediğimiz sayfayı seçeceğimiz alan

8 Tasarım sekmesi arayüzü
Sayfa görünümü ayarları Ayarlar sekmesi; seçili nesnenin ayarlarını yaptığımız panel Araçlar; kullanabileceğimiz nesneler Paneller; katman Yazı, nesne gibi unsurları Barındıran paneldir. Çalışma alanı

9 Araçlar Sekmesini anlamak
Seçim aracı; çalışma alanındaki nesneleri seçmemizi ve taşımamızı sağlar Kırpma aracı: resimleri tasarım programına gitmeden kırpmamızı sağlar. Metin aracı: Yatay ve dikey yazı alanları oluşturup, yazıla yazmamızı sağlar. Dikdörtgen aracı: tasarımlar genel olarak kare ve diktörtgenler üzerine kuruludur. Bu araç ile çalışma alanımıza tasarım öğeleri oluştururuz. El aracı: sayfanın içinde efektif bir biçimde gezinmeyi sağlar. Herhangi bir araçla çalışırken «space» tuşuna basarsanız el aracı aktif hale gelir. Yakınlaşma Aracı: sayfanın içinde nesnelere daha yakından yada uzaktan bakmanızı sağlar. ctrl+0 tuş kombinasyonu tüm sayfayı tam ekranda görmenizi sağlar.

10 Paneller Panelleri genişletme; panellerin içeriğini ve gelişmiş özelliklerini görebiliriz. Metin ve renk ayarları yapacağımız panel Widget kitaplığı: Düğme, form, sosyal medya ikonu eklyeceğimiz panel Kaydırma Efektleri: Pc ler için fare ile, telefon ve tabletler için parmakla yapılan kaydırmaları ayarlayabileceğimiz panel. Çalışmamızda yer alan katmanlar, unsurlar, nesneler ve bağlantıları görebileceğimiz panel.