Adobe XD Kullanarak Bir Sonraki Web Projeniz İçin Bir Mockup Nasıl Oluşturulur

Yeni bir web sitesi oluşturmanın en heyecan verici kısımlarından biri tasarım oluşturma aşamasıdır. Çoğu durumda, insanlar WordPress'i başlatır ve tasarımları denemeye başlar. Ancak, web sitenizi mümkün olan en kısa sürede çalışır duruma getirmek istiyorsanız bu yaklaşım en iyisi değildir.

Web tasarım maketleri, web sitenizin nasıl görüneceğini çizmenizi sağlar. Bir maketi yerleştirdikten sonra, tek yapmanız gereken onu ekrana çevirmek ve hazırsınız. Bu yazıda, bir sonraki web projeniz için maket kullanmanın neden mantıklı olduğundan bahsedeceğiz. Ardından, size örnekler oluşturmak için kullanabileceğiniz ücretsiz bir araç olan Adobe XD'yi tanıtacağız ve nasıl kullanılacağını öğreteceğiz.

Hadi alay edelim!

Web Sayfalarınız için Neden Mockup Oluşturmalısınız?

Birçoğumuz yeni web siteleri üzerinde çalışmaya başlamadan önce kabataslak tasarımlar yapmaktan hoşlanırız. Süslü bir şey olması gerekmez - bir peçetenin arkasına yapacağınız eskiz türünü hayal edin ve fikri anlayın.

Tasarım 'tel kafes' dediğimiz şey budur. Nihai ürünün neye benzeyeceğinin düşük kaliteli bir temsilidir. Önemli olan, fikirlerinizi kağıda dökebilmeniz, mantıklı olup olmadıklarını görebilmeniz ve başkalarıyla paylaşabilmenizdir.

Öte yandan, maketler çok daha yüksek kalitededir. Peçete yerine muhtemelen özel bir tasarım aracı kullanmak istersiniz. Bu durumda amaç, mümkün olduğunca nihai ürüne benzeyen bir şey tasarlamaktır.

Web projeleriniz için maketler oluşturmanın pek çok avantajı vardır, örneğin:

• Bir kod satırına veya bir sayfa oluşturucuya dokunmadan web sitenizin tüm tasarımını planlamak.
• Her bir öğenin yerleşimini, nasıl görünmeleri gerektiğini ve nasıl bir araya geldiklerini görselleştirebilirsiniz.
• Daha fazla geri bildirim almak için ekibinizin diğer üyeleriyle maketleri gözden geçirebilirsiniz.
• Bir müşteriye bir maket göstermek, tüm bir web sitesi oluşturmaktan ve ardından fikirlerini sormaktan çok daha kolaydır.

Sitenizin sayfaları için örnekler oluşturmanın pek çok olumlu yanı vardır. Ancak, kendilerini bir araya getiremeyecekleri için çok fazla ekstra çalışmayı da içerirler. Aslına uygun bir maket oluşturmak için özel tasarım uygulamaları konusunda deneyime ihtiyacınız olacak. Bunu akılda tutarak, bir sonraki bölüme geçelim.

Adobe XD'ye Giriş

Adobe XD, UX/UI tasarımcılarının aslına uygun tel çerçeveler, çalışma yüzeyleri, etkileşimli prototipler ve maketler oluşturmasına yardımcı olmak için oluşturulmuş hafif bir uygulamadır. Diğer Adobe uygulamalarının aksine Adobe XD'yi kullanmak için bir aboneliğe ihtiyacınız yoktur. Ücretsiz bir Adobe hesabına kaydolun, uygulamayı indirip yükleyin ve hazırsınız.

Uygulama Photoshop gibi diğer programlara benzer özellikler içeriyor olsa da, Adobe XD daha çok UX/UI tasarımına yöneliktir. Örneğin buton, form gibi öğeleri tasarımlarınıza kolayca eklemenizi sağlar. Hepsi aynı web sitesinin parçasıysa, logolar gibi birden çok çalışma yüzeyindeki öğeleri bile güncelleyebilir. Tüm bu özellikler bir araya geldiğinde, maketler oluşturmayı çocuk oyuncağı haline getirir.

Ana Özellikler:

• Tel çerçeveleriniz ve maketleriniz için çalışma yüzeyleri oluşturun.
• Web ve mobil cihazlar için tasarım düzenleri.
• Tasarımlarınıza hayal edebileceğiniz hemen hemen her tür öğeyi kolayca ekleyin.
• Bağlantılı öğeleri (logolar gibi) birden çok tasarımda aynı anda güncelleyin.

Fiyat: Ücretsiz | Daha fazla bilgi

Adobe XD Kullanarak Web Modelleri Nasıl Oluşturulur

Başlamak için Adobe XD ana sayfasına gidin ve XD'yi ücretsiz edinin düğmesine tıklayın. Şimdi yeni bir sayfa açılacak ve indirme işleminiz otomatik olarak başlayacaktır. Tamamlandığında, devam etmeden önce Adobe hesabı kimlik bilgilerinizi isteyecek olan yükleyici dosyasını başlatın:

Bu adımı tamamlamak için ücretli bir aboneliğe ihtiyacınız olmadığını unutmayın, bu nedenle hesabınız yoksa ücretsiz bir Adobe hesabına kaydolmanız yeterlidir. Bu yapıldıktan sonra, yükleyiciye kimlik bilgilerinizi girin ve Adobe XD uygulama indirme işlemi başlayacaktır. İşlem yalnızca birkaç dakika sürecektir, ancak Adobe'nin aynı zamanda Creative Cloud'u da yükleyeceğini unutmayın.

Adobe XD kullanıma hazır olduğunda programı başlatabilirsiniz ve size ilk önce ne tür bir projeyle uğraşmak istediğinizi soracaktır:

Bu eğitim için yukarıdaki resimde gördüğünüz Web 1920 seçeneği ile gittik. Adobe XD'ye girdiğinizde, ekranın ortasında yeni çalışma yüzeyinizi temsil eden boş bir kare göreceksiniz:

Ekranın sol alt kısmındaki Katmanlar düğmesini tıklayarak, her biri benzersiz bir sayfayı temsil eden birden çok çalışma yüzeyi ekleyebilirsiniz. Şimdi ilk çalışma yüzeyinizi seçin, Çoğalt seçeneğini belirleyin; panonuzda yeni bir çalışma yüzeyi görünecektir:

İstediğiniz zaman çalışma yüzeyleri arasında geçiş yapabilirsiniz, ancak şimdilik, ana sayfa modelimiz olacak olan yalnızca birini nasıl düzenleyeceğinize odaklanalım. Devam edelim ve çalışma yüzeylerinden birini seçelim ve ekranın sağ tarafındaki menüyü kullanarak yakınlaştırmayı biraz artıralım:

Aynı menü, çalışma yüzeyinizin boyutunu ayarlama, bir renkle doldurma ve içine yerleştirdiğiniz öğeler üzerinde daha iyi kontrole sahip olmanız için bir ızgara görüntüleme seçenekleri içerir. Şimdilik, arka planınız için bir renk belirleyin:

Şimdi, maketimizin ilk öğesini, ekranın üst kısmındaki ikincil bir gezinme çubuğunu ekleyelim. Bunu sol taraftaki menüdeki dikdörtgen aracını kullanarak yapabiliriz:

Adobe XD'nin menüsündeki Metin aracını kullanarak gezinme çubuğuna metnin yanı sıra biraz arka plan rengi ekledik:

Şimdi devam edelim ve Adobe XD'nin Harekete Geçirici Mesaj (CTA) ile nasıl ilgilendiğini görelim. Bir tane eklemek için Dikdörtgen aracını tekrar kullanalım. Ayrıca sağdaki menüyü kullanarak düğmenin köşelerini yuvarladık, ayrıca bir arka plan rengi belirledik ve buna metin ekledik:

Yukarıdaki ekran görüntüsünde, normal köşeler yerine yuvarlatılmış köşeler kullanma seçeneğini görebilirsiniz ve metin eklemeyi ve arka plan rengini değiştirmeyi zaten biliyorsunuz. Ardından, bir kez daha Metin ve Dikdörtgen araçlarını kullanarak normal menü üzerinde çalışalım. Mockup'ımız birkaç geçişten sonra şöyle görünüyor:

Bu noktada, resim dosyasını bilgisayarımızdan çalışma yüzeyimize sürükleyerek Elegant Themes logosunu eklemeye hazırız:

Fark etmediyseniz, Elegant Themes blog dizininin bir maketini oluşturuyoruz. Oranlar elbette mükemmel değil ve birkaç ayrıntı eksik. Ancak amacımız Adobe XD ile hiç pratik yapmadan da neler yapabileceğinizi göstermekti.

Sırada, Dikdörtgen ve Metin araçlarını kullanarak (tahmin ettiniz) ana başlığı ve bir arama çubuğu ekleyelim:

Şimdi, darbe için, maketimize bazı blog gönderilerinden alıntılar ekleyelim. Başlangıç ​​olarak, çalışma yüzeyimize iki dikdörtgen daha ekleyelim. Bir tane oluşturabilir ve işleri sizin için kolaylaştırmak için çoğaltabilirsiniz. Onları sürüklediğinizde, Adobe XD'nin bunları aynı hizada tutmak için size ölçümler gösterdiğini fark edeceksiniz:

Şimdi iki boş dikdörtgenimiz var. Metin aracını kullanarak bunlara başlık ekleyelim:

Son olarak, devam edelim ve her gönderinin öne çıkan resimlerini ekleyelim. Daha önce olduğu gibi, görüntü dosyalarını bilgisayarınızdan Adobe XD'ye sürüklemeniz gerekir.

Şimdi bir adım geriye gidelim ve tam maketimize bakalım:

Bu, piksel açısından mükemmel bir eğlence değil, ancak acemi bir girişim için yeterince iyi görünüyor. Başka bir deyişle, tasarım araçlarını kullanmaya yeni başlamış olsanız bile Adobe XD'yi kullanmak parkta yürümek gibi olmalı ve onunla gerçekten harika maketler oluşturabilirsiniz.

Sonuç olarak, Adobe XD ile oluşturduğunuz her model, istediğiniz öğeleri eklemeyi, doğru renkleri kullanmayı ve gerektiğinde görüntüleri yerleştirmeyi içerir. Bu eylemlerin her biri oldukça basittir, bu nedenle süreçten korkmak için hiçbir neden yoktur.

Çözüm

Maketler, tüm fikirlerinizi kağıda (veya ekrana) aktarmanın mükemmel bir yoludur. Ardından, web siteniz için mükemmel tasarımı bulana kadar bunları iyileştirebilirsiniz. Birden çok maket oluşturmak ve daha sonra bunları sitenizde çoğaltmaya çalışmak çok daha kolaydır, bu nedenle benimsemeniz gereken bir tekniktir.

Adobe XD kullanarak, aslına uygun maketler oluşturmak çok basit hale gelir. Photoshop kadar güçlü değil, ancak söz konusu tel kafesler ve maketler olduğunda harika bir iş çıkarabilir (artı, ücretsizdir!).

Web siteleriniz için maketler oluşturmak için Adobe XD'nin nasıl kullanılacağı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!

Makale küçük resmi Darko 1981 / Shutterstock.com