Özet:
Bu makalede, gençlere kodlamayı öğretmeyi amaçlayan kar amacı gütmeyen bir kuruluş için bir açılış sayfasını nasıl yeniden tasarladığımı gözden geçireceğim. Chicago, Illinois merkezli bir 501 (c) (3) kuruluşu olan Code Your Dreams ve bu yeniden tasarımın müşterisi.
Zaman aralığı:
Beş gün, Pazartesi-Cuma.
Araçlar:
Figma, Adobe Photoshop, Kalem, Kağıt
Tasarım Metodolojisi:
Araştırma, Eskiz, Tel Çerçeve Oluşturma, Test Etme, Geri Bildirim ve Yineleme
Bağlam: Araştırma ve rekabet analizi
Öncelikle şunu söylemeliyim ki Figma çoğunluğundayım. Mükemmel olmaktan uzak harika bir araçtır, ancak eklentiler için teşekkür ederiz, topluluk için teşekkür ederiz ve en çok bloblar, tüm bloblar için teşekkür ederim. Yukarıda belirtildiği gibi, Chicago merkezli kar amacı gütmeyen bir kuruluş için açılış sayfasını yeniden tasarlamak için bir çalışma haftam vardı.
Pazartesi:
Amaç basitti, küçük şirket hakkında 24 saat içinde olabildiğince çok şey öğrenmek. Denver'da olduğum ve kar amacı gütmeyen çoğu bağış web sitesinden ve açılış sayfalarından habersiz olduğum için, kazmamı yapmak zorunda kaldım. Konuştuğum sosyal açıdan bilinçli bazı kişilerin rehberliğinde, ABD'deki birkaç sivil toplum kuruluşunu ve bağışa özgü harekete geçirici mesajlar kullanan diğer web sitelerini rekabetçi bir şekilde analiz etmeye başladım . Precise- olmak austinparks.org , aspca.org , foodbankrockies.org ve capitalareafoodbank.org . Bu sitelere bakmanın yanı sıra, son açılış sayfamda kullanmamaya karar verdiğim ilham ve resimler için Unsplash'a da baktım .
Code Your Dreams , Coder Hero's (ortağı) ve ortak kurucusunu araştırdım . Herkese açık sosyal medya içeriklerine, Instagram'lara, LinkedIn'lere ve yapabildiğim neredeyse her şeye baktığımda, erken tasarım kararımı nasıl tasarlayabileceğimi görüyorum. Gönüllü Düğmesi ve Bağış Düğmesi, Coder'ın iyileştirmeler giderken ihtiyaç duyduğunuzu hayal ettiğiniz iki temel özellik. Code Your Dreams'in orijinal açılış sayfasını derinlemesine inceledikten sonra, çoğu şeyin Python'da yapıldığını fark ettim.
Kurucunun bir kodlayıcı olduğu ortaya çıktı, çılgınca doğru. Ayrıca, gerçekten harika şeyler yapıyor; Şikago bölgesinin dışına açılmanın yanı sıra çok ihtiyaç duyulan bir hizmeti sunmak istiyor. Bazı YouTube röportajlarına ve Instagram ve LinkedIn'de listelenen diğer bazı kamuya açık bilgilere göre, 250'den fazla öğrenciye yardım etti, 100'den fazla sorunu başarıyla tanımladı, bugüne kadar 80'den fazla uygulama oluşturdu, 50'den fazla topluluk belirlendi ve bir öğrenci 15: 1 eğitmen oranı.
Öğrendiğim ve paylaşmak zorunda olduğum bir şey de ortak site Coder Heros'u paylaşmalıyım: “ Beyaz insanlar, teknoloji sektörünün yöneticileri kategorisinde özel sektörün geri kalanına göre daha yüksek bir oranda temsil ediliyor,% 83 - 15'ten fazla Bilgisayar programlama gibi işleri içeren profesyonel kategorisindeki temsillerinden% daha yüksek. Yazılım geliştirme, uygulama ve sistem işlerinde çalışanların yalnızca yüzde dördü Afrikalı-Amerikalı ve yalnızca yüzde beşi Hispanik veya Latin kökenli. " - Code Your Dreams Kurucusu Brianne Capian.
Amaçları basit ve Hispanik bir UX tasarımcısı olarak, olabildiğince en iyi şekilde yardım vermeye meyilli hissettim. Ancak kar amacı gütmeyen kuruluşlara bağış yapmak ve fon sağlamak hiç bu kadar zor olmamıştı, özellikle şu anda Covid-19 ile ve her şey uzak.
Yöntem ve yaklaşım: Eskiz
Salı :
Her zaman olduğu gibi, ilk eskiz hızlı ve kirli olabilir; burada tel çerçeveme dahil etmek istediğim birkaç şeye birkaç örnek. Sonunda çoğu şeyle ilgili video bağlantılarını ve sahip olmadıkları blog hikayelerini kestim. Her şeyden çok, bu benim gerçek Figma tel çerçevem için kullandığım şablonumdu. Nihai tasarımımı içeren kağıt üzerinde buraya dahil ettiğim şeyler, altbilgi, ortaklar bölümü, bağış ve eylem için gönüllü çağrı düğmeleri, etkinlikler hakkında bilgi, öğretim müfredatı ve biyografi gibi özelliklerdi.
Hedefler: Figma'da Wireframing
Çarşamba:
Çok az zaman ve hata için çok az yer ile, hızla Figma'da tel çerçeve oluşturmaya başladım. Bu benim UX / UI yazılımını ilk kez kullandığım için etkilendim. Figma'daki eklentiler delice yardımcı oldu ve iş akışımı hızlandırmama gerçekten yardımcı oldu. Son projemde Axure kullandığım için Figma muazzam bir temiz hava soluydu ve hızlı bir şekilde çalışıp birkaç fikri test edebildim. İlk tel çerçevem yalnızca siyah beyazdı, ancak birkaç meslektaşımdan erken geri bildirim alıp yineleyebildim.
Test ve Geri Bildirim
Açılış sayfamın erken sürümüyle ilgili geri bildirim aldıktan sonra, bu müşteri için rengin önemini çabucak öğrendim ve biraz zamanım varken geriye döndüm. Burada bir stil kılavuzu oluşturmaya bakıyorum; burada, web sitesine baktım ve yorumum için benzer yazı tiplerini eşleştirmeye çalıştım. İstediğim renk paletini ve düzenini oluşturmak için içeriğinin çoğuna da bakıyorum. Görüntüler ve resimler de burada çekildi ve photoshop ile düzenlendi ve çektiğim içeriğin çoğu daha sonra kolay kullanım için [.png] formatına dönüştürüldü.
Yineleme ve Değişiklikler
Perşembe:
Neyse ki, renkli açılış sayfamın ilk sürümüyle ilgili çok sayıda geri bildirim alabildim. Bana birçok öneri ve girdi verildi; işte burada büyük bir pivot alıp görsel tasarımcı olarak biraz daha eğlenmeye başladım. İlk versiyonlarım çok kutsandı ve içeriği okumak zordu. Ortağın grubu ve diğer birkaç kişi boşa harcanan alanı kapladı ve bağış yapma ve gönüllü olma yönündeki kritik çağrılardan dikkatleri başka yöne çekti.
Bunlar, yaptığım değişikliklerin sadece birkaç örneği, ancak dikkate aldığım bir şey kahraman bölümü oldu. Kahraman bölümünün oldukça sıkıcı ve çekici olmadığını fark ettim. Bu açılış sayfası için amaçladığım orijinal varsayımsal karakter ve hedef kitle hem öğrenci hem de ebeveyn olduğundan, sayfanın hem eğlenceli hem de bilgilendirici olmasını istedim. Aktarmak istediğim dil pratikti, özel ve bilgilendirici değildi.
Son Konsept:
Cuma:
Diyelim ki Cuma çabuk geldi. Bunun gibi tasarım sprintleri tahmin edilemez. Bu benim ikincim olduğu için, özellikle geri bildirim ve yinelemenin değerinden çok şey öğrendim. Çoğunlukla aldığım tüm geri bildirimleri uyguladıktan sonra, açılış sayfam oldukça beklenmedik bir şey oldu. Biraz gerçek bir kişilik kazandı ve tüm bunlar bloblar ve daha fazla Figma eklentisi aracılığıyla sağlandı. Sayfadaki bilgilerin çoğunu sıralamak için boşlukla oynamaya ve blobları kullanmaya karar verdim. Renk ve fon kullanarak, daha davetkar ama eğlenceli ama bilgilendirici bir görünüm eklemeye çalıştım. Eklenmesi gereken şeyler arasında sayılar, gerçekler, alıntılar, olaylar, daha sezgisel bir gezinme çubuğu ve bir altbilgi de vardı.
Sonraki adımlar:
1. Hayallerinizi Kodlamak İçin Gönüllü Olun! Cidden, bu günlerde işler çok uzak olduğundan, bunu gerçekten düşünüyorum. Bunun gibi bir şey işlevsel bir site olarak geliştirilebilir. Orada olmayı ve yardım etmeyi çok isterim, o yüzden göreceğiz. Yine de, bağış ve gönüllü hizmetlerinin olduğunu hatırlatmak isteriz, bu yüzden sitelerine bakın. Gerçekten benzersiz bir kar amacı gütmeyen kuruluş ve onların yerini burada bulabilirsiniz codeyourdreams.com
2. Yeniden tasarlanan açılış sayfasını iyi kırılma noktalarına göre yeniden tasarlayın. Yalnızca masaüstü için bir açılış sayfası oluşturduğum için, geliştirmeden önce diğer satışların ve boyutların yapılması gerekiyordu. Blobları kullanmanın asıl amacı, sayfanın boyut olarak küçültüldüğü alan yaratmaktı; Diğer ekran veya cihaz boyutları kullanılırken öğeler, gerekirse boyuttan küçültme veya büyütme işlemini kolayca biçimlendirmelidir.
3. Devam etmeden önce AB testi ve müşteri tartışması da gerekli olabilir.
Okuduğunuz için teşekkürler -Micahel Lahrgoue
Kaynaklar:
Coder Heroes: coderheroes.com
Stok Görüntüler: unsplash.com
Flo'daki ilk günümden bu yana sadece birkaç hafta geçti, ancak bir süredir buradaymışım gibi geliyor! UX İçerik ekibini (konuşmaya dayalı tasarım ekibimiz de dahil) yönetmek ve büyütmek için işe alındım ve kendimi bu zorlu göreve verdim. Hızlı tempolu bir başlangıçta yeni bir içerik ekibi kurmaya yönelik yaklaşımımı paylaşacağımı düşündüm.
Meraklı kullanıcı araştırmacısı için… Sık sık web3'te kullanıcı araştırmacısı olarak çalışmanın nasıl bir şey olduğu sorulur. Alanımdaki diğerlerinin deneyimlerini yansıtabilecek veya yansıtmayabilecek kendi kişisel deneyimlerimi aktarmanın zamanının geldiğini düşündüm.
Darren Hood Apple Fandom Wiki'ye göre, Don Norman 1993'te Apple'a katıldı. “Kullanıcı Deneyimi Mimarı” unvanına sahipti.
Bir ürün tasarımcısı olarak başarılı olmak için belirli teorilerin temelden anlaşılmasının şart olduğuna inanıyorum. Bu yazıda, sanat ve tasarım arasındaki farkları öğrenecek, tasarımın gerçekte ne anlama geldiğini ve ürünlerin kalitesini nasıl etkilediğini anlayacaksınız.
Bu makale çoğunlukla iPad'lere odaklanmıştır, ancak aynı ilkeler Android tabletlere de uygulanabilir. Duyarlı web epeydir ortalıkta.
Olağanüstü durumlar için 3 ürün dersi. Kara kuğu olayları, aşırı nadir olmaları, şiddetli etkileri ve sonradan anlaşıldıklarında açık oldukları yaygın ısrarı ile karakterize edilir.