Adobe Xd Part 1'de Uygulama Tasarımı Satın Alın

Bunu uzun zamandır photoshop kullanarak yaptım, ancak photoshop becerilerinin olmaması yaşlarımı alıyor ve kötü bir çizimden biraz daha fazlası. Tüm ortak arayüz öğelerini, tema stilini ve benzerlerini içeren bir program istiyorum, böylece bitmiş bir sitenin nasıl görünmesi gerektiğine dair gerçekten kapsamlı bir vizyon oluşturabilirim (görünüm ve his dahil).

Herhangi bir fikir?

  • 11 Wireframing araçları, tanım gereği bitmiş bir düzen tasarlayamamalıdır. (Gerekirse, tel çerçeve araçlarının listesi için bu soruya bakın)
  • 1 Hızlı bir prototip oluşturma aracı, istediğiniz şeye daha yakındır, ancak tasarımı öğrenmek için zaman ayırmak istemiyorsanız ve profesyonel tasarım hizmetleri veya şablonlar için ödeme yapmak istemiyorsanız, genel ve / veya aşırı kullanılan temalar.
  • Zamanında tavsiye, @ Lèsemajesté. Daha dün gece "prototipleme" gibi bir şey arıyordum ama doğru terminolojiyi bulamadım. Zamanında derken, tabii ki benim için demek istiyorum, çünkü yorumunuz neredeyse bir yaşında (1,5 yaşındaki bir Q'ya). :)

John'un da belirttiği gibi, tel çerçeve araçları bitmiş bir düzen tasarlamamalı, ancak tel kafesleri ortadan kaldırıp tarayıcıda tasarlamaya geçmemiz gerektiği fikrinin birçok savunucusu olduğunu söylemiş olsak da, bu da bahsettiğiniz şeydir.

Bunu yapmanın hızlı ve çirkin bir yolu, tüm öğeleri sürükle ve bırak tarzında içeren Dreamweaver gibi bir IDE kullanmak olabilir, ancak bu sizi berbat bir kodla bırakacaktır.

Benim önerim, mockup sitenizi oluşturmak için CSS, HTML ve JavaScript çerçevelerini kullanmaktır, iyi çerçeveler sizin için ayak işlerinin çoğunu yapabilir ve 'tel kafes' kapatıldığında üzerinde çalışacak bir şeyiniz olur.

  • Bir tarayıcıda wireframe'leri atlamanız veya tasarlamanız gerektiğini kim söylüyor? Bu, kontrplak ve çivi kullanarak bir bina tasarlamanız ve planları atlamanız gerektiğini söylemek gibi bir şey. Pek çok farklı seviyede yanlış.
  • Duyarlı tasarımı savunan hemen hemen herkes - hızlı bir Google yapın ve göreceksiniz.
  • Duyarlı tasarımın ne olduğu konusundaki konseptinizi yeniden değerlendirmeniz gerekebileceğini düşünüyorum. Karşılaştığım hemen hemen her duyarlı tasarım iş akışı, kağıt üzerinde en azından taslak çizimleri içeriyor. Aslında birçok duyarlı tasarım çerçevesi (ör. 1140, iskelet vb.), PSD veya tel çerçeve için diğer şablonlarla birlikte gelir. Ve Goldilocks Yaklaşımının arkasındaki insanlar olan Ön / önden tasarım, UX çıktılarında tel kafesleri de içeriyor. Tam anlamıyla deli kodlamaya başlamadan önce tel kafes yapmayın.
  • İşte 24 yolla ne kastettiğime dair böyle bir örnek - 24ways.org/2009/make-your-mockup-in-markup Tel çerçeveleme demiyorum, bunu tarayıcıda yap diyorum.
  • Photoshop'un neden alt piksel AA yapamayacağını hala anlamayan birinin yargılarına güvenmediğimden emin olmasam da, eminim zaten bir tel kafes kurduktan sonra tarayıcıda tasarım yapmaktan bahsediyordur. . Ne de olsa, o "tarayıcıda tasarım" savunucularından biri olan Dan Cederholme'den alıntı yapıyor, ancak Dan bile tarayıcınızda wireframe eskizleri yaratmaktan veya model için tarayıcıyı kullanmaktan bahsediyor. HTML + CSS'de tek bir tane kodlamanız için geçen sürede yaklaşık 50 UI düzeni çizebildiğinizde, kodda başlangıçtan itibaren pratik bir tel çerçeve değildir.

Twitter Bootstrap 2'yi deneyin

Fireworks'ü gerçekten seviyorum. Photoshop'a ve ayrıca Adobe'ye benzer, ancak web sitesi mockupları ve mobil tasarımlar için daha uygundur.

Şablonlarına bakarsanız (Dosya-> Şablondan Yeni'ye tıklayın) jquery, iphone, ipad ve bazı örnek web tasarım düzenleri için tel çerçeveler vardır. Ayrıca, yerlerine sürükleyip bırakabileceğiniz menüler ve tasarım öğeleri içeren bir Ortak Kitaplığa da sahiptirler.

Adobe CS6 Cloud teklifleriyle hemen bir ay ücretsiz alabilirsiniz. Bir reklam gibi görünmekten nefret ediyorum, ancak son tel çerçevenin gerçek bir web sitesi gibi görünmesini istiyorsanız kontrol etmeye değer.

Bu, yazdığım bir uygulama için üzerinde çalıştığım bir tel kafes. Ben tasarımcıdan çok programcıyım. Bunu sadece piksel genişliklerini ölçmek için kullanabilirim. Bir WPF uygulaması olarak sonuçlanabilir ... Emin değilim, ancak bu başlamak için harika bir yol oldu.

Fotoğrafları düzenlemek için olduğu için Photoshop DEĞİL Illustrator kullanıyorum .....

Illustrator'ı, vektör tabanlı olduğu için eksiksiz web sitesi düzenlerine çok yakın bir şekilde alay etmek için mükemmel buluyorum, bir tarayıcının onu nasıl oluşturacağına çok benzer bir şekilde vektörlere, gölgelere vb. Solmalar uygulayabilirsiniz.

  • Belki bir şeyi kaçırıyorum ... ama Illustrator hangi yönden Photoshop'tan daha uygun? Web'de yaygın olarak kullanılan görüntü formatlarının (png, jpg, gif) hemen hemen tümü raster grafiklerdir. Photoshop, raster grafiklerle çalışır. Fireworks, Adobe IMO paketinden en uygun seçimdir, ancak sizin fikrinize hakkınız var ve ben kutsal bir savaş başlatmaya çalışmıyorum.
  • illüstratörde hızlı bir model oluşturmak çok daha kolay. Bir düzen yapıyorsam, istediğim son şey parçaları hareket ettiremediğim rasterleştirilmiş bir görüntüdür.

Axure RP'yi denediniz mi? Bu, daha büyük ajanslarda konsept ve UX / UI çalışanları için tercih edilen araçtır. Tıklanabilir html prototipleri oluşturur ve bitmiş bir ürün gibi görünebilir, ancak kilometreniz değişebilir. Bu gerçekten prototipinizin tasarımına ne kadar zaman ayırdığınıza bağlıdır.

Sizin için çalışmış: Charles Robertson | bize ister?