Adobe XD kullanarak bir sonraki web projeniz için nasıl bir maket yapılır
Yeni bir web sitesi oluşturmanın en ilginç bölümlerinden biri tasarım aşamasıdır. Birçok durumda, insanlar sadece WordPress oynar ve tasarım yapmaya başlar. Ancak, web sitenizin etkin olmasını ve mümkün olan en kısa sürede çalıştırılmasını istiyorsanız bu yaklaşım en iyisi değildir. Web tasarım modelleri, web sitenizin nasıl göründüğü gibi bir eskiz yapmanızı sağlar. Bir maket yaptıktan sonra, tek yapmanız gereken ekrana çevirmek ve bunu yapmaya hazırsınız. Bu makalede, bir sonraki web projeniz için bir maket kullanmanın neden mantıklı olduğunu tartışacağız. Sonra sizi bir maket yapmak için kullanabileceğiniz ücretsiz bir araç olan Adobe XD ile tanıştıracağız ve size nasıl kullanılacağını öğreteceğiz.
Onunla alay edelim! Neden web sayfalarınız için bir maket yapmanız gerekiyor, birçoğumuz yapmaya başlamadan önce yeni bir web sitesi için kaba bir tasarım çizimi yapmayı seviyoruz. Lüks bir şeye gerek yok – peçetenin arkasında yapacağınız eskiz türünü hayal edin ve fikri elde edersiniz. ‘Tasarım çerçevesi’ tasarımı diyoruz. Bu, nihai ürünün nasıl olacağına sadakatin düşük bir temsilidir. Mesele şu ki, fikirlerinizi kağıt üzerine yazabilir, mantıklı olup olmadığını görebilir ve başkalarıyla bölünebilirsiniz. Öte yandan Mockup çok daha kaliteli. Peçete yerine özel bir tasarım aracı kullanmak isteyebilirsiniz. Amaç, bu durumda, nihai bir ürüne mümkün olduğunca görünen bir şey tasarlamaktır.
Web projeniz için maket yapmanın birçok avantajı vardır, örneğin:
Kod satırına veya sayfa üreticisine dokunmak zorunda kalmadan tüm web sitesi tasarımlarınızı planlamaya başlayın. Her öğenin yerleşimini, nasıl göründüğünü ve birbirleriyle nasıl eşleştiklerini görselleştirebilirsiniz.
Daha fazla geri bildirim almak için diğer ekip üyeleriyle maketleri kontrol edebilirsiniz.
Müşteriye bir maketin gösterilmesi, tüm web sitelerini oluşturmak ve daha sonra görüşlerini istemekten çok daha kolaydır.
Site sayfalarınız için maket yapmanın birçok avantajı vardır. Bununla birlikte, kendilerini birleştirmeyecekleri için çok fazla çalışma da içeriyorlardı. Yüksek doğrulukla maket yapmak için özel tasarım uygulamalarıyla ilgili deneyime ihtiyacınız var. Bunu hatırlayarak, bir sonraki bölüme devam edelim.
Adobe XD’ye Giriş
Adobe XD, UX/UI tasarımcılarının iskelet görüntüleri, sanat tabelaları, etkileşimli prototipler ve yüksek doğruluk maketleri yapmasına yardımcı olmak için oluşturulan hafif bir uygulamadır. Diğer Adobe uygulamalarından farklı olarak, Adobe XD kullanmak için abone olmanıza gerek yoktur. Bir Adobe Ücretsiz Hesap almak için kaydolun, uygulamayı indirip yükleyin ve bunu yapmaya hazırsınız. Uygulama Photoshop gibi diğer programlara benzer özellikler içererken, Adobe XD daha UX/UI tasarımına yönlendirilir. Örneğin, bu, tasarımınıza düğmeler ve formlar gibi öğeler kolayca eklemenizi sağlar. Her şey aynı web sitesinin bir parçasıysa logolar gibi çeşitli sanat panolarında öğeleri bile güncelleyebilir. Birleştirildiğinde, tüm bu özellikler maketlerin yapımını kolaylaştırır.
Çerçeveniz ve maket çizimleriniz için eserler oluşturun.
Web ve mobil cihazlar için düzen tasarımı. Tasarımınıza hayal edebileceğiniz hemen hemen her türlü öğeyi eklemek kolaydır.
Bağlantılı öğeleri (logolar gibi) aynı anda birkaç tasarımda güncelleyin.
Fiyat: Ücretsiz | Başlamak için Adobe XD kullanarak bir web maketinin nasıl oluşturulacağı hakkında daha fazla bilgi için Adobe XD ana sayfasını açın ve Ücretsiz XD düğmesini tıklayın. Yeni sayfa şimdi açılacak ve indirmeniz otomatik olarak başlayacak. Bittiğinde, devam edebilmeniz için adobe hesap kimlik bilgilerinize soracak yükleme dosyasını başlatın:
Bu adımı tamamlamak için ücretli bir aboneliğe ihtiyacınız olmadığını unutmayın, bu yüzden sahip değilseniz ücretsiz bir adobe hesabı almak için kaydolun. Bittiğinde, kimlik bilgilerinizi kuruluma girin ve Adobe XD uygulamasının indirilmesi başlayacaktır. Süreç sadece birkaç dakika sürer, ancak Adobe’nin yaratıcı bulutu aynı anda kuracağını unutmayın. Adobe XD kullanıma hazır olduktan sonra, programı başlatabilirsiniz ve önce ne tür bir proje yapmak istediğinizi soracaksınız:
Bu öğretici için, yukarıdaki resimde gördüğünüz 1920 Web seçeneğini kullanıyoruz. Adobe XD’ye girdikten sonra, ekranın ortasında yeni sanat tahtasını temsil eden boş bir kutu göreceksiniz: Ekranın sol alt kısmındaki Katmanlar düğmesini tıklayan benzersiz bir sayfa by’i temsil eden bazı Artboard-Eac ekleyebilirsiniz. Şimdi ilk sanat tahtanızı seçin, yinelenen seçeneği seçin, yeni sanat tahtası gösterge tablounuzda görünecektir: Artboard arasında istediği zaman atlayabilirsiniz, ancak şimdilik, Mockup ana sayfamız olacak yalnızca birini nasıl düzenleyeceğinize odaklanalım. Devam edelim ve sanat tahtasından birini seçelim ve zoom’u hafifçe büyütelim, ekranın sağ tarafındaki menüyü kullanın: Aynı menü, sanat tahtası boyutunuzu değiştirme, renkle doldurma ve bir ızgara görüntüleme seçeneğini içerir, böylece daha iyi kontrole sahip olursunuz İçine yerleştirdiğiniz unsurların üzerinde. Şimdilik, arka planınız için rengi ayarlayın: Şimdi, ekranın üst kısmına maket, ikincil navigasyon bıçaklarımızın ilk öğesini ekleyelim. Bunu sol yan menüde dikdörtgen bir cihaz kullanarak yapabiliriz: Adobe XD menüsünden metin araçlarını kullanarak navigasyon çubuğuna ve metinlere devam ediyor ve arka plan renkleri ekliyoruz:
Şimdi devam edelim ve Adobe XD’nin nasıl harekete geçtiğini (CTA) nasıl ele aldığını görelim. Eklemek için dikdörtgen aracını tekrar kullanalım. Ayrıca sağdaki menüyü kullanarak düğmenin açısını yuvarlıyoruz ve arka plan rengini ayarlıyoruz ve metin ekliyoruz:
Yukarıdaki ekran görüntüsünde, sıradan bir açı yerine yuvarlak bir açı kullanma seçeneğini görebilirsiniz ve zaten metin ekleyeceğinizi ve arka plan rengini nasıl değiştireceğinizi zaten biliyorsunuz. Ardından, bir kez daha metin ve dikdörtgen araçlar kullanarak olağan menüde çalışalım. İşte birkaç işlenenden sonra mockup’umuzun görünümü: Bu noktada, görüntü dosyalarını bilgisayarımızdan sanat tahtamıza sürükleyerek zarif bir tema logosu eklemeye hazırız: Eğer fark etmediyseniz, zarif bir tema blogu dizin maketi yapıyoruz. Oran elbette mükemmel değil ve bazı detaylar kayboluyor. Ancak amacımız, herhangi bir egzersiz yapmadan bile Adobe XD ile neler yapabileceğinizi göstermektir. Ayrıca, ana başlığı ve arama çubuğunu (tahmin edebilirsiniz), dikdörtgen ve metin aracını kullanarak ekleyelim: Şimdi, Coup de Grace için, Mockup’ımıza bazı blog yazısı alıntıları ekleyelim. Başlamak için, sanat tahtamıza iki dikdörtgen daha ekleyelim. Sizin için kolaylaştırmak için bir tane yapabilir ve ikiye katlayabilirsiniz. Sürüklediğinizde, Adobe XD’nin şunlara paralel kalması için ölçümler gösterdiğini göreceksiniz: Şimdi iki boş dikdörtgenimiz var. Metin araçlarını kullanarak başlığı ekleyelim: Son olarak, devam edelim ve her yazının üstün bir resmini ekleyelim. Daha önce olduğu gibi, görüntü dosyasını bilgisayarınızdan Adobe XD’ye sürüklemeniz gerekir.Şimdi geri adım atalım ve tam makullerimizi görelim:
