Adobe Muse'da prototipler veya web siteleri için tel kafes oluşturma hakkında bilgi edinin.

Not:

Adobe Muse artık yeni özellikler eklemeyecek ve 26 Mart 2020'de desteği sonlandıracak. Ayrıntılı bilgi ve yardım için bkz. Adobe Muse hizmet sonu sayfası.

Adobe Muse, kullanımı son derece kolay olmasının yanı sıra web projelerinin çevrimiçi ortamda görebileceğiniz prototiplerini hızla oluşturmanıza da yardımcı olur. Deneme sürümü siteler oluşturarak bağlantıları potansiyel müşterilerinizle paylaşabilir ve sitenin son halini görüntüleyecek aynı tarayıcıları kullanarak site prototiplerini çevrimiçi ortamda görmelerini sağlayabilirsiniz. Bu şekilde, müşterilerinizin tamamlanan sitenin nasıl görüneceği hakkında bilgi sahibi olmalarına yardımcı olabilirsiniz.

fig01.wireframe.b720
Tel kafesler, sayfa öğelerinin yerlerini belirten yer tutucular içerir.

Siteniz için tel çerçeveler tasarlamayı, yapılandırılmış plan görünümü kurmayı ve yer tutucu öğeler oluşturmayı öğrenmek için makaleyi okumaya devam edin. İçeriğinize son halini verdikten sonra yer tutucu öğeleri gerçek sayfa öğeleriyle değiştirebilirsiniz.

Tel kafeslerle çalışma

Tel kafesler, sitenin sayfa mizanpajlarını gösterir ve site akışını görmek için bağlantıları tıklatarak gezinmenizi sağlar. Tel kafeslerle etkileşim kurduktan sonra sitenin yayındaki son halini ziyaret ederek tel kafeslerle tamamlanmış sürümünü karşılaştırın. Tel kafeslerdeki yer tutucu öğelerin yerine, sitenin son halindeki grafiklerin nasıl yerleştirildiğini göreceksiniz.

Tel kafeslerin nasıl oluşturulduğunu görmek isterseniz, örnek dosyaları indirin (ZIP, 4,5 MB). Sıkıştırılmış ZIP dosyasını açın, klasörü açın ve KevinsKoffeeKartWire.muse dosyasını bulun. Tel kafesleri çift tıklatarak Adobe Muse'da açın. Plan görünümünü kullanarak, site haritası oluşturmak için sayfaların nasıl farklı katmanlar halinde düzenlendiğini inceleyin. Her bir sayfayı çift tıklatarak Tasarım görünümünde açın ve nasıl tasarlandıklarını inceleyin.

Adobe Muse, tel kafes oluşturmanıza yardımcı olacak pek çok özellik sunar:

  • Tasarım görünümünde, mizanpaj öğelerini hizalamanıza yardımcı olan isteğe bağlı bir sütun kılavuzu bulunur.
  • Esnek çizim araçları, grafikler için yer tutucu şekillerini kolayca oluşturmanızı sağlar.
  • Varlıklar panelinde, yer tutucu görüntüleri güncellemenize yardımcı olacak özellikler bulunur.
  • Adobe Muse, bir siteyi yayınlarken veya dışa aktarırken tüm görüntü dosyalarını en iyileştirip dilimleyerek dışa aktarır.
  • Metin üstbilgileri ve paragraf stilleri, yapılandırılmış sayfalar oluşturmanızı ve metin formatını kolayca değiştirmenizi sağlar.
  • Yerleştir komutu, müşterinizin logosunu doğrudan tarayıcıdan kaydederek Adobe Muse dosyanıza yerleştirmenizi sağlar.
fig02.wireframe.b720
Dosya > Yerleştir'i seçerek marka öğelerini hızla tel kafeslere yerleştirebilirsiniz.

Müşteri onayı için tel kafesler tasarlama

Müşterinizle yaptığınız ilk toplantıdan sonra, sitenin bir tel kafes taslağını hazırlayarak sitenin son halindeki grafikler ve metin formatı olmadan sayfa öğelerinin konumlarını ve işlevlerini gösterebilirsiniz. Tel kafes oluşturmanın amacı, renkler veya görsel içerikler eklemeden web sunumunun bir simülasyonunu hazırlayarak her sayfadaki temel öğelerin birer kopyasını oluşturmaktır. Dikdörtgenler, görüntülerin yerlerini belirtmek için yer tutucular olarak, el yazısı veya genel fontlar ise sayfada metin içeriği bulunan alanları göstermek için kullanılır.

Tel kafesler şu avantajları sunar:

  • Müşterilerin sitenin yapısına odaklanmalarını ve sayfa mizanpajları hakkında fikir edinmelerini sağlar.
  • Etkileşimli canlı bir deneyim sunarak müşterilerin siteyi incelemelerini ve tasarıma onay vermelerini kolaylaştırır.
  • Site tasarımı ve işlevselliğini net olarak açıklayacak bir iletişim aracı görevi görür.

Adobe Muse, bir web tasarımı aracı olmasının yanı sıra proje prototipleri oluşturmak için de mükemmel bir çözümdür. Hemen bir deneme URL'si oluşturup e-postayla müşterilerinize göndererek onay sürecini de kolaylaştırabilirsiniz. Ancak, Adobe Muse ile tel kafes taslakları oluşturmanın avantajları bunlarla sınırlı değildir.

Adobe Muse'da oluşturulan tel kafesler, görüntü düzenleme özellikleri ve düzenlenebilir paragraf stillerinin web tasarımcılarının .muse dosyasını kolayca güncellemesini ve onaylanan tel kafesleri sitenin son haline dönüştürmelerini sağlaması bakımından diğer tasarım araçlarına göre üretkenliği bir adım öne taşır. Müşterinin onayını almak, tel kafesleri bir kenara atmak ve projeyi sıfırdan oluşturmaya başlamak yerine gerçek web içeriğini ekleyip onaylanan tel kafesleri hemen güncelleyerek son sürümü oluşturabilirsiniz. Bu sırada, dilediğiniz sayıda deneme sürümü site yayınlayarak versiyonları belgeleyebilir ve site tasarımı ilerleme aşamasındayken müşterilerinizle bağlantıları paylaşabilirsiniz.

Aşağıdaki temel iş akışını kullanarak tel kafeslerle site oluşturabilirsiniz:

  • Tel kafesler oluşturulur ve ücretsiz bir deneme sürümü site yayınlanır.
  • Müşteri, bağlantıları tıklatıp sitede gezinerek sitenin yayındaki halini inceler.
  • Müşteri değişiklik isteklerini bildirir veya tasarım hakkında daha net bilgiler ister.
  • Gereken revizyonlardan sonra müşteri tel kafesleri onaylar.
  • Tasarımcı tel kafes sitesini güncelleyerek grafik öğeleri ve renkleri ekler.
  • Tasarımcı paragraf stillerini güncelleyerek varolan metin içeriğini formatlar.
  • Müşteri güncellenen sürümü inceler ve diğer değişiklik isteklerini bildirir.
  • Tasarımcı istenen değişiklikleri uygular.
  • Müşteri tamamlanan sürümü onaylar.
  • Tasarımcı siteyi günceller, etki alanını ayarlar ve sitenin son halini kullanıma sunar.

Adobe Muse'da site yapısını Plan görünümünde inceleme

Site sayfalarının, gezinme bağlantılarının üst ve alt düzey katmanlarını tanımlayan hiyerarşide nasıl yerleştirildiğini görmek için tel kafeslerin .muse dosyasını Adobe Muse'da açarak inceleyin. Projeyi açtığınızda, tüm site sayfalarını gösteren Plan görünümü açılır.

fig03.wireframe.b720
Plan görünümünde görüntülenen tel kafes sayfaları.

Site haritasının hiyerarşisini temsil eden bir üst ve bir alt düzey olmak üzere iki katman olduğunu göreceksiniz. Sitenin geliştirilmesi veya bakımı sırasında dilediğiniz zaman bu sayfaları tıklatıp sürükleyerek site yapısındaki yerlerini değiştirebilirsiniz.

Yeni sayfalar oluşturmak için:

  1. Mevcut sayfaların sağındaki veya altındaki artı (+) işaretini tıklatın ve sayfa adı alanını tıklatarak sayfanın adını yazın. 

    Her bir sayfayı olabildiğince açıklayıcı şekilde adlandırmaya özen gösterin.

  2. Sağ tıklatıp açılan menü seçeneklerini kullanarak sayfa minik resimlerini çoğaltabilir, silebilir veya yeniden adlandırabilirsiniz.

    Dilerseniz sayfanın üzerine gelip sağ üst köşedeki X simgesini tıklatarak sayfayı silebilirsiniz.

  3. Talimatların tamamını izlediyseniz, sayfa ekleyerek, yerlerini değiştirerek veya silerek site haritasını değiştirmeyi deneyin. Tel kafes sitesini ilk haline döndürmek isterseniz Düzenle > Geri Al'ı seçin.

    Plan görünümünü kullanmak son derece kolaydır; Adobe Muse tüm sayfa adlarının kaydını tutar ve menü widget'larında açılan bağlantıları korur. Yaptığınız her değişiklik bağlantıların bozuk olmamasını sağlayacak şekilde güncellenir.

Grafik stillerini kullanarak nitelikleri paylaşan yer tutucu öğeler oluşturma

Adobe Illustrator ve Adobe Photoshop yazılımları gibi Adobe Muse da tutarlı bir görünüm oluşturmak ve bunu öğeler grubuna uygulamak istediğinizde grafik stilleri oluşturmanıza yardımcı olur. Mevcut bir grafik stilini değiştirerek bu stilin uygulandığı diğer tüm sayfa öğelerini kolayca güncelleyebileceğiniz için bu işlem tel kafes oluştururken (ayrıca sayfa tasarlarken) oldukça kullanışlı bir yol sunar. Varolan stilleri kopyalayarak bu stillerin çeşitlemelerini oluşturmanız da mümkündür.

Grafik stillerini kullanarak nitelikleri şekillere uygulamak ve bir tel kafes sitesinde görüntü dosyalarının yer tutucularını oluşturmak için:

  1. Tasarım görünümünde dikdörtgen aracını kullanarak bir sayfaya üç dikdörtgen çizin.

  2. Dikdörtgenlerden birini seçin ve düzenleyerek kontur rengi ile dolgu rengini ayarlayın, opaklık ayarını belirleyin ve alt gölgeler gibi efektler ekleyin.

  3. Dikdörtgen seçiliyken, Grafik Stilleri panelinin alt kısmındaki Yeni Grafik Stili Oluştur'u tıklatın. Stil, seçilen dikdörtgenin formatına göre belirlenir. Yeni grafik stilini çift tıklatın ve açıklayıcı bir ad verin.

  4. Diğer dikdörtgenlerden birini seçin ve stil adını tıklatarak bu dikdörtgene de aynı grafik stilini uygulayın. Bu işlemi üçüncü dikdörtgene de uygulayarak her birinin aynı stile sahip olmasını sağlayın.

  5. Dikdörtgenlerden birini seçin ve düzenleyerek stilini hafifçe değiştirin. Grafik Stilleri panelinde, düzenlenen stil adının yanında bir artı (+) işaretinin belirdiğini göreceksiniz.

  6. Grafik Stilleri panelinde stil adını sağ tıklatın ve Stili Yeniden Tanımla'yı seçin. Diğer iki dikdörtgenin bu yeni stille eşleşecek şekilde güncellendiğini ve artı (+) işaretinin kaybolduğunu göreceksiniz.

  7. Grafik stillerini kullanarak şekilleri hızla formatlayabilir ve tutarlı tel kafesler oluşturabilir, ayrıca müşteriniz değişiklik isteğinde bulunduğunda site varlıklarını kolayca güncelleyebilirsiniz.

Yapılandırılmış web sayfaları oluşturma ve metni paragraf stilleriyle formatlama

Bir tel kafes site oluştururken, Metin aracını kullanarak metin çerçeveleri oluşturabilir ve daha sonra yerini doldurabileceğiniz yer tutucu (veya lorem ipsum) metin ekleyebilirsiniz. Müşterinizin zaten bir web sitesi varsa metni doğrudan tarayıcıdan kopyalayarak metin çerçevelerine yapıştırabilirsiniz. Metin öğelerini oluşturduktan sonra, Metin panelini kullanarak metni formatlayabilirsiniz.

Paragraf stillerini kullanarak üstbilgi metnini ve paragraf metinlerini tanımlayabilir ve sayfanın metin içeriğini yapılandırabilirsiniz:

  1. Tasarım görünümünde, Metin aracını kullanarak metin çerçevesini sayfaya sürükleyin. Metin çerçevesine yazarak veya metin yapıştırarak çerçeveyi doldurun.

  2. Metin panelini veya Tasarım görünümü çalışma alanının üst kısmındaki Kontrol panelinde bulunan seçenekleri kullanarak fontu, font boyutunu, font rengini ve diğer özellikleri seçme gibi formatlama seçeneklerini ayarlayın.

  3. Paragraf Stilleri panelinin alt kısmında bulunan Yeni Paragraf Stili Oluştur'u tıklatarak yeni bir paragraf stili oluşturun. Yeni stilin adını çift tıklatarak açıklayıcı bir ad verin.

  4. Stili sağ tıklatın ve Stil Seçenekleri'ni seçin. Paragraf Etiketi menüsünü kullanarak, belirli bir HTML etiketini hedefleyen P, H1, H2 veya H3 gibi bir paragraf stili ayarlayın.

    fig04.wireframe.b720
    Paragraf Stilleri panelinde bir stil adını sağ tıklatın ve Stil Seçenekleri iletişim kutusunu kullanarak belirli bir üstbilgi veya paragraf etiketine göre stil tanımlayın.

  5. Metin içeren birkaç metin çerçevesi daha oluşturun. Bir metin çerçevesi seçiliyken paragraf stilinin adını tıklattığınızda, paragraf stili formatının seçili olan metin çerçevesine uygulandığını göreceksiniz. Daha sonra, paragraf stili uygulanmış metin çerçevelerinden birini seçip değiştirirseniz Paragraf Stilleri panelinde stil adının yanında bir artı (+) işareti belirecektir. Bu işaret, grafik stillerinde kullanılan davranış kullanılarak stilin değiştirildiğini belirtir.

  6. Aynı stili kullanarak tüm metin çerçevelerini otomatik olarak güncellemek için Paragraf Stilleri panelinde stil adını sağ tıklatın ve Stili Yeniden Tanımla'yı seçin.

    Bu hızlı örnekte de gördüğünüz gibi, farklı metin kapları oluşturabilir ve belirli stiller kullanmak için bunları ayarlayarak tutarlı bir tasarım oluşturabilirsiniz. Ardından, sitenizin son halini tasarlarken tel kafesleri müşterilerinizden gelen istekler doğrultusunda kolayca güncelleyebilirsiniz. Metin kaplarıyla yapılandırılmış web sayfaları oluşturmak, arama motoru optimizasyonu sıralamasını yükselttiği için iyi bir uygulamadır.

Not:

Arka plan renkleri düz olan sayfalar tasarlarken, arka plan dolgusunu metin çerçevelerinin rengine uygun şekilde ayarlayın. Bu şekilde, Adobe Muse metin içeriğini daha verimli bir şekilde yayınlayabilir. Arka plan dolgusu bilinmiyorsa Adobe Muse metin çerçevesinin arka plan rengini saydam olarak ayarlayacağı için yayınlanan metin çok düzgün görünmeyecektir. Ancak, sayfanın arka planında degradeler veya görüntüler varsa metin çerçevelerinin dolgu rengini Yok olarak bırakın.

Yer tutucu görüntüleri son site grafikleriyle güncelleme

Müşteriniz tel kafesleri onayladıktan sonra, siteyi gerçek görüntü dosyalarını kullanarak kolayca güncelleyebilirsiniz.

  1. Sayfada bir yer tutucu görüntü seçin.

  2. Varlıklar panelini açarak seçilen sayfa öğesini bulun.

  3. Sayfa öğesini sağ tıklatın. Açılan menüde, tel kafes sitesini oluşturduğunuz yapıya bağlı olarak, görüntü dosyasını güncellemenize yardımcı olacak iki seçenek sunulur.

    Adobe Photoshop veya Adobe Fireworks yazılımlarında oluşturduğunuz bir dosyayı sayfaya yerleştirirseniz Orijinali Düzenle'yi seçerek orijinal dosyayı, dosyayı oluşturmak için kullandığınız üründe düzenleyebilirsiniz. Kalıp dosyayı kaydedip Adobe Muse'a döndüğünüzde, dosyanın yerleştirilen örnekleri sitede otomatik olarak güncellenir.

    Alternatif olarak, görüntü dosyalarının yer tutucularını Adobe Muse'da Dikdörtgen aracını kullanarak oluşturduysanız Tüm Örnekleri Yeniden Bağla'yı işaretleyip bilgisayarınızda bulunan dosyayı seçerek yer tutucu dosyayı son grafik görüntüsüyle değiştirebilirsiniz.

    fig05.wireframe.b720
    Varlık adını sağ tıklatın ve Orijinali Düzenle'yi seçip yer tutucu dosyanın kalıbını, oluşturmak için kullandığınız görüntü düzenleme programında açın.

  4. Sayfadaki tüm yer tutucu görüntülerin yerine gerçek görüntü dosyalarını yerleştirmek için bu adımları tekrar edin.

    Not:

    Varlıklar panelinde bir varlık adını sağ tıklattığınızda, Varlığa Git seçeneğini de belirleyebilirsiniz. Bu seçenek, hızla güncelleyebilmeniz için Adobe Muse'un seçilen varlığı içeren sayfayı açmasını sağlar.

Adobe Muse tarafından oluşturulan en iyileştirilmiş görüntü dosyalarına erişme

Oluşturduğunuz Adobe Muse sitelerini barındırma sunucusuna yayınlamanın yanı sıra sitenin tamamını dışa aktararak görüntü dosyalarının dilimlere ayrılmış ve dışa aktarılmış klasörünü alabilirsiniz:

  1. Dosya > HTML Olarak Dışa Aktar'ı seçin.

    HTML Olarak Dışa Aktar iletişim kutusu görüntülenir.

  2. Bilgisayarınızda site dosyalarının dışa aktarılacağı konumu seçin ve Tamam'ı tıklatın.

Bu işlem tamamlandıktan sonra Adobe Muse, dosyaları dışa aktararak belirttiğiniz yerel klasöre kaydeder. Klasöre gidip görüntü klasörünü açarak en iyileştirilmiş görüntü dosyalarına ulaşabilirsiniz. Bu görüntü dosyalarını farklı amaçlarla kullanabilir, bülten, mobil uygulamalar, sosyal ağ sayfaları ve diğer ilgili projeler oluşturabilirsiniz.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi