Adobe Portföyü Tasarlama

Kasım 2015'te biraz konuştum. Görsel Sanatlar Okulu New York'ta (Portfolio) ve ürün tasarımını tasarlama konusunda (SVA). Yapabilirsin Buradaki konuşmayı izle . Bu makaleyi başlangıçta konuşmaya hazırlarken yazdım, ancak o zamandan bu yana yayınlamak için genişledi. Ürünü tanıtmayı, tasarım sürecine içgörüyü paylaşmayı, eskiz defterimden tarar ve sahne arkasından bazı özellikleri / tasarımları tarar. Umarım onu ​​ilginç bulursun.

Küçük bir intro.

Merhaba ben Andrew . Ben öncü ürün tasarımcısı ve yaratıcı direktörü Adobe Portföyü . Kendimi ve Behance'deki (Adobe) büyük bir geliştirici ekibinin geçtiğimiz yıl içinde neler yaptığını sizinle paylaşacağım.

Adobe Portföy pazarlama sitesi

Adobe Portföyü Nedir?

Temel olarak, işinizi sergilemek için bir web sitesi oluşturmanıza ve stilinize ve ihtiyaçlarınıza uygun şekilde özelleştirmenize olanak tanıyan bir üründür. Bu yeni bir konsept değil, orada sadece onlarca ürün var. Ancak Portföyün bazı önemli farklılıkları vardır:

• Reklam öğelerini portföylerini sergilemek için özel olarak tasarlanmıştır. Anlamı, basitçe ve hızlı bir şekilde yapmanız gereken şeyi yapar.
• Tüm Adobe Creative Cloud planlarında ÜCRETSİZ .
• Web sitenizde kullanmak için tüm Typekit'in yazı tiplerine erişebilirsiniz.

Portföy Behance ile senkronize edilir.

Portföyü en eşsiz kılan şey, Behance ile senkronize olması. Fikir, Portfolyo ile güzel bir özel web sitesi oluşturuyor ve projelerinizi Behance profilinize senkronize ediyor. Orada milyonlarca reklamın kullandığı yaratıcı bir platformda ve reklam öğelerini işe alan kişiler üzerinde çalışmalarınız için paha biçilemez bir pozlama elde edebilirsiniz ! Ama istemiyorsan, Behance'yi kullanmak zorunda değilsin - Portföyü tek başına kullanabilirsin ve Behance ile senkronize etmemeyi tercih et. Seçim senin.

Matthias Heiderich'in fotoğrafı - görüldüğü gibi Portföy ve Behance

Duyarlı düzenler.

Herhangi bir web sitesi kurucusu gibi, bir başlangıç ​​noktasına ihtiyacınız var. Bu nedenle, tasarlamamız gereken birçok şeyden biri, yaratıcı çalışmaları sergilemek için özel olarak tasarlanmış, projelerle kolayca kişiselleştirebileceğiniz ve doldurabileceğiniz bir temel görevi görecek düzenlerdi.

Layouts, farklı yaratıcı alanlara uygun çeşitli stilleri kapsamayı amaçlamaktadır. Bunlar, projelerinizle hızlı bir şekilde doldurmak ve bir web sitesini (dakikalar içerisinde) yayınlamak için bir hazır dağıtım çözümü olarak kullanılabilir veya düzeninizi ve görünümünüzü tarzınıza uyacak şekilde değiştirmek için düzenleyicinin özelliklerini kullanabilirler.

Çok farklı görünmek için aynı düzeni kolayca özelleştirin. Fotoğrafçılık tarafından Bryce Johnson

Aşağıda, başlattığımız düzenler var. İlk yerleşimler (halka açık beta ve ürün lansmanı için) proje kapsamlarına, galerilere ve projelere odaklanarak çok basittir. Ürün elbette tam ekran kapak görüntüleri, HTML ve CSS düzenleme, blog entegrasyonu vb. Gibi daha fazla özellik sunacak. Ve özellikler genişledikçe, başlangıç ​​ve başlangıç ​​noktası olarak seçim yapılacak düzenlerin sayısı da artacaktır.

Layouts ve sonra adlandırılan reklam öğeleri: Lina , Talaş , Matthias , Juco , Mercedes ve Thomas

Reklam öğeleri yayınlandıktan sonra düzenleri seçmeyi seçtik Behance . Çalışmaları, kendisini belli bir düzende iyi bir şekilde ödünç alan ve elbette görsel olarak çarpıcı olan reklam öğelerini kısa listeye aldık.

Söylemeliyim ki, bu düzenler tasarlanacak en son şeylerden biriydi (ön-beta), ama ben bu yazının iyiliği için, ürünün ne yaptığını ya da en azından onun ne olduğunu size tanıtmak için onlarla liderlik yapıyorum. 'mamul'.

Editör.

Ürün (kendisi), kullanıcının web sitelerini hızlı ve basit bir şekilde düzenlemesini, yukarıdaki düzenlerden birini başlangıç ​​noktası olarak kullanarak etkinleştirmesini sağlamalıdır. Kullanıcı arayüzü çok az - yoldan çıkıyor ve web sitenizin tasarımına odaklanmanıza izin veriyor. Yaptığınız tüm değişiklikler editörde yaşıyor.

Kulağa biraz kulağa benziyor, ama marketten, pazarlama sitesinden ve özellikle editörden her şeyi tasarlarken aklımda üç şey vardı:

Kullanıcının şunları yapması için güçlendirmelidir:

• Gördükleri her şeyi kolayca düzenleyin.
• İçeriği yönet ve ekle.
• Web sitelerini sorumlu bir şekilde önizleyin.
• Canlı bir web sitesini yayınlayın ve güncelleyin.

Aşağıda, üründen (editör) bir dizi düzenleme senaryosu bulunmaktadır:

Editörden çeşitli ekranlar. Fotoğrafçılık tarafından Chris Burkard ve tasarım Andrew Couldwell

Bir ürün tasarımcısının rolü.

Portföyde bir tasarımcı olarak kendi rolüm, konseptten fırlatmaya kadar yıl içinde oldukça değişti. Dijital bir ürün ilerledikçe, bir ürün tasarımcısı olarak rolünüz de var. Yani baştan başlamak için:

ProSite.

Portföy, aslında ProSite adı verilen mevcut bir Behance ürününün (emekli) evrimi. 5 yaşında, bu yüzden o üründen öğrenebileceğimiz çok şey vardı: Neler iyi çalıştı? Ne yapmadı?

Behance Ağı.

Ayrıca yaratıcı topluluk hakkında öğrendiklerimiz ve çalışmalarını sergileme, Behance Ağını tasarlama, küratörlük etme (ve kullanma!) İle Portföy gibi bir ürünün nasıl oluşturulacağını anlamak çok değerli.

Bu nedenle, Behance'nin yıllar boyunca edindiği tüm bu bilgileri emen ve aynı zamanda ProSite'in evrimi için ilk tasarımlarını inceleyen çok zaman harcadım. Soru sormak. Notlar yapmak. Eskiz fikirleri.

Behance Ağı ve ProSite

Her zaman bir kalem ve bir eskiz defteri ile başlarım.

Yazmak ve eskiz yapmak gerçekten odaklanmamı sağlıyor ve fikirler oradan akıyor. Bazen sadece ürünle ilişkilendirdiğim kelimeleri yazarım ya da ne yapması gerektiğini listeliyorum, sadece kafamdan çıkarmak için. Zihni dağıtmaya ve neyin önemli olduğuna odaklanmaya yardımcı olur.

Bu eskiz defteri çalışması doğal olarak UI skeçlerine dönüşüyor. Bazen bir özelliği veya küçük bir UI detayını veya UI'ye tamamen yeni bir yaklaşım çizeceğim. Bu, sadece ve sadece fikirleri tasarlamanın ve keşfetmenin hızlı bir yoludur. Belki de en önemlisi, bilgisayar yazılımı kullanırken yaptığınız gibi piksel mükemmelliği, yazı tipleri, renk, ızgaralar, kılavuzlar vb.

Bu adımı daha da ileri taşıyacağınızı ve aslında bu fikirleri ortaya çıkarmaya başladığınızı bildiğinizde her zaman bir nokta vardır. Geçmişte bunun için Adobe Illustrator veya Omnigraffle'ı tel kafeslere kullandım. Ama bu proje için zaman çok sıkıydı, bu yüzden doğrudan Photoshop'a gittim.

Aşağıda benim eskiz defterimden bazı taramalar vardır. Bazıları ürün (editör), bazıları pazarlama sitesi ve marka ile ilgilidir:

Benim eskiz defterimden birkaç tarama

Yukarıda işaret edilmesi gereken ilginç bir resim sonuncudur (sağ alt). Resmimin sonunda tasarladığım şeye yakın olduğunu görebilirsiniz.

Kavram ve prototipleme.

Tüm bu fikirler ve tasarımlar, ekiple kavramlaştırma, prototip oluşturma ve tartışma yoluyla bilgilendirilir ve geliştirilir. Diğer tasarımcılar ve geliştiricilerle ve hatta mümkün olduğunda hedef kitle ile fikir alışverişinde bulunmak iyidir. Örneğin: Bir MFA illüstrasyon öğrencisi ile erken (ürün) tasarımı tartışırken benden bir fikir geldi SVA . Yeni bir bakış açısı, özellikle bu karmaşıklığın bir ürünü için her zaman yardımcı olur.

Bu projede oldukça yoğun zaman dilimleri için çalışıyorduk. Herhangi bir karmaşık prototip inşa etmek için zaman yoktu. Ama yaptığım şey, Photoshop'ta Layer Comps kullanarak bir dizi PDF adımı oluşturmaktı. Bu, fare imlecinin ekran etrafında hareket etmesini sağlayarak ürün içindeki her etkileşimi, özelliği ve kullanıcı akışını gösterdi. Bu geliştiricilerin (ve diğer paydaşların) tüm işlevselliği ve kullanıcı akışını eleştirmelerini ve / veya anlamasını sağlamaları için izin verilir. Bu sayede ne inşa edileceğini biliyor ve aynı zamanda UI / UX'teki herhangi bir olası kusurları inşa etmeden ve test etmeden önce tespit ediyorlar.

Aşağıda, bu PDF örneklerinin bir örneği (bir video) yer almaktadır:

Proje düzenleyicide küresel özelleştirmeyi gösteren prototip / adım adım

Detay tasarımı.

Basitçe şunu söyleyin: Geliştiriciler için tahmin yapalım. Ekibinizin nelerin yapılması gerektiğini anlaması gerekiyor. Boşlukları doldurmak, yanıt vermek veya herhangi bir senaryoda ne olduğunu tahmin etmek onların görevi değildir. Yeterince abartmıyorum - bir ürünün% 20'sini tasarlayan ve düşünen pek çok tasarımcıyı deneyimledim ve bir şeyleri düşünmüyorum.

Daha önce de bahsettiğim, kullanıcı akışları ve prototiplerin yanı sıra, tüm UI bileşenleri, özellikleri ve markası için ayrıntılı özellikler oluşturmak istiyorum. Büyük bir ekibiniz olduğunda bunların önemli olduğunu hissediyorum, bu yüzden herkes aynı sayfada, bir merkezi nokta (lar) referans ile. Spesifikasyonlar, rollover durumlarından, hatalara, aktif / inaktif durumlara vb. Tüm senaryoları kapsamayı ve ayrıca px değerlerini ve boyutlarını kapsamayı (hatta temel CSS'yi de içerdiğim kadarıyla) hedeflemektedir.

Tasarımlarınıza dahil ettiğiniz daha fazla ayrıntı, geliştiricilerin sahip olacağı daha az soru ve yapıyı yönetmek için harcayacağınız daha az zaman. Böylece ürünü tasarlamaya, test etmeye ve iyileştirmeye odaklanabilirsiniz.

Ayrıca, bu 'UI kitlerini' oluşturmak için zaman ayırmanın güzel yanı, ürünü (tasarım) gelecekte güncellemenin daha kolay olmasıdır. Yüzlerce mockup güncellemeye gerek yok, sadece özellikleri güncellersiniz.

Aşağıda bu stil kılavuzlarına ve özelliklere birkaç örnek verilmiştir:

Pazarlama ve marka.

Şimdiki aylar, tasarlanan ve üretilmekte olan ürün (editör) ile dikkatimi pazarlama, tekneye ve markaya yeniden odakladım. Bu ürün nedir? Kullanmaya nasıl başlıyorsunuz? Bir sese ihtiyacı vardı. Bir kimlik.

İsim.

Behance'a ilk katıldığımda, bu proje biraz şaka yollu olarak “Prosite 2.0” olarak adlandırılıyordu. ProSite ürünü zamanına hizmet etti, ancak halefi, farklı bir canavara dönüştü. Behance ile olan bağlantılarının yanı sıra, çok farklı ürünlerdi ve 1: 1 korelasyonu yoktu. Bu yeniden tasarım / lansman değildi. Sıfırdan yeni bir ürün üretiyoruz ve emekliye ayrılıyoruz. Bu iletmek önemliydi - ve bu isimle başlıyor.

Eskiz defterime geri döndüm ve bu ürünün yazdığı her şeyin yazılmasının yanı sıra pazardaki benzer ürünlerin hangi dili kullandığını gösteren bir kelime derleme alıştırması yaptım. Bütün bunların doğal ilerlemesi “Portfolyo” ya geri dönüyordu. Bu yüzden biraz düşündükten sonra, 'Neden olmasın?' - Teneke üzerinde tam olarak ne yazıyor. Bir portföy oluşturmak için özel olarak tasarlanmış bir web sitesi oluşturucusu / editörüdür. İsminin sadeliği ve cesurluğu, ürünün tasarımına ve değerlerine iyi uyum sağlamıştır. Ve bu yüzden 'Adobe'nin ürün paketi ile uyumlu olacak' Adobe Portföyü 'haline gelen' Portfolio 'adını verdik.

Bir fotoğrafın yer aldığı pazarlama sitesi ana sayfası Tanya Timal

Marka.

Portfolyo çok kendi kimliğine ve kişiliğine sahiptir. Portföy kurumsal bir ürün değildir (konuşmak için). Beyaz etiket. Seninkini kendin yapmak. Dostu, basit ve ulaşılabilir. (Ürün) kullanıcısı boyunca marka, pazarlama sitesi, onboarding, metin yazarlığı ve mesajlaşma, kullanılan dili, tipografi, ızgara, görüntü ve renkleri kullanarak tüm bunları deneyimlemeye çalışmaktadır.

Diğer senaryolar, hafif kalpli mesajlaşma ve esprili görüntüler içerir. Proje fotoğrafı, dua - Alexander Esslinger

Duyarlı tasarım.

Tasarım konusundaki ayrıntılar hakkında daha önceki noktalara geri dönüyorum: Web tasarımı, tıpkı ürün tasarımında olduğu gibi, aynı detaylara dikkat etmelidir. Bu durumda, pazarlama sitesinin yanıt vermesi elbette önemlidir, ancak bir web sitesinin farklı ekran boyutlarında nasıl yanıt verdiğini anlamak için geliştiricilerin işi değildir.

Aşağıda, geliştiricilere inşa edilecek duyarlı tasarımların birkaç örneği verilmiştir myportfolio.com :

Marka kimliğinin erken bir versiyonunu gösteren pazarlama sitesi için duyarlı tasarımlar

Görüntüle pazarlama sitesinin tam durum çalışması burada

Farklı senaryoları kapsayan, birkaç düzen için duyarlı tasarımlar

Görüntüle paftaların tam durum çalışması burada

Kullanıcı testi.

Dijital bir ürün, kullanıcı davranışını en iyi kullanıcı deneyimini vermek için kullanan kişilere uyacak şekilde gelişmelidir. İdeal olarak, ürünler herkese sunulmadan önce bir alfa / beta aşamasından (sınırlı sürümler) geçecektir. Bunu Portföy ile yaptık. Bu, sorunları çözmek, UI / UX'in çalışıp çalışmadığını öğrenmek ve ürünü iyileştirmek amacıyla gerçek kullanıcı geri bildirimi elde etmemize yardımcı oldu. Sınırlı bir kullanıcı grubuyla test etmek, öğrenmek ve iyileştirmek, binlerce insanı milyonlarca insana fırlatmak ve çok geç olduğunda sorunları bulmaktan daha iyidir.

Ölçek. Öğrenin. Revize. Tekrar et.

Bu ürün tasarımında önemlidir. Ürünü kullanan kişilerden çok şey öğreniyorsunuz.

Ne keşfettiğine şaşıracaksın:

… İnsanlar her zaman bir ürünü nasıl kullanacaklarını tahmin etmiyorlar!

• Sen öğren,
• Geliştirirsin
• Ürün üzerinde yineleyin,
• Test yapmaya devam ediyorsun
• Ve bu işlemi tekrarlayın.

Ve dürüstçe, bazen bunun gibi biraz hissediyor:

… Ama ürün bunun için daha iyi olacak.

Sonuç olarak.

Bundan uzak bir şey alırsam şu olurdu:

Yavaşla.

İlham almak. Kitlenizi anlayın. Not al. Eskiz fikirleri.

Konsept.

Ekibiyle çalış. Fikirleri keşfedin. Bunu düşünün.

Detay tasarımı.

Birisi (başkalarının) tasarladığınız şeyi inşa etmesi gerekiyor.

Test edin ve geliştirin.

Çalışıyor mu? nasıl geliştirilebilir? Her zaman geliştirilebilir.

Öğrenin.

Her zaman. Tasarımdaki her deneyim iyi bir öğrenme deneyimidir.

[- Bu yazı aslen Medium.com , yazarın izniyle yeniden yayınlandı -]

• ← Uber, Yeni Marka Kimliği ile Yeniden Başladı
• Tatil Günleri Tasarlamak →