İşleme Makinelerine Ölüm!

İdeal tasarım sürecinizi sert bir yazı yerine birkaç basit ilkeye bağlı kalarak bulun.

Bir uygulama veya web sitesi tasarlama konusunda gitmek için doğru ve yanlış yolda tonlarca farklı tavsiye duyuyorsunuz.

Sketch'i kullanıyor olmalısın.
“Tasarım Sistemleri veya GTFO.”
“Gerçek Tasarımcılar kodda% 100 tasarım yapıyorlar.”
“Tel kafesler zaman kaybı.”
“Prototip yapmıyorsanız, doğru yapmıyorsunuz.”
“Kağıda başlamalısın.”

Tasarımın doğru yolu ile ilgili hiçbir anlaşmanın olmadığını, ancak genel olarak tartışmasız olan bir noktanın - sürecinizin lineer olması gerektiğine inanıyorsunuz.

Klasik doğrusal yaklaşım şuna benzer:
araştırma → taslak → tel kafes → statik bilgi → prototip → kod

Doritos ve Ding-Dongs yapmak için kullandıkları Rube Goldberg-esque üretim makineleri gibi. Proses makinesine bir fikir verin ve pürüzlenip kalıp haline getirildikten sonra, kalıplar tamamlanırken bitmiş bir ürün diğer tarafa fırlar! Tahmin edilebilir! Verimli!

Biraz.

Proses makineleri çalışır, fakat sadece çalıştıklarında. Uyum sağlayamazlar ve bu onları kırılgan yapar. Tek yapmanız gereken, işlem makinenizi durma noktasına getirmek için küçük bir Sabot.

Hank, a.k.a. “Sabot”

Son zamanlarda Dory Bulma'yı çocuğumla izliyorum ve “yapım” çekimlerinin bir kısmı bana sıçramaya devam ediyor.

Filmde Hank adında bir ahtapot var:

Disney / Pixar

Septopus, teknik olarak. Onun karakter modeli, çalışmak için çok zahmetliydi, onu canlandırmak için dokunaçtan aşağı çekti. Yine de, 4.000 ayrı kontrolle çalışmak için inanılmaz derecede zordu.

Sürecin bu noktasında, eskizleri, renderleri ve animatikleri geçmişler - bir sürü fikri hızlıca ve ucuza atlamanıza yardımcı olan düşük sadakat aşamaları. Onlar da zaten Real Got. Karakter teçhizatı yapıldı, teknik detaylar çözüldü, temel sorular cevaplandı.

Son animasyon aşamasındalar - 3B ortamlarda 3B modeller. Üretim takvimi ve bütçe pahasına dayanabilirlerdi. Bunun yerine, gerçekten ilginç bir şey yaptılar - eskizlerine geri döndüler.

Disney / Pixar

Hank’in dokunaçlarının karmaşık hareketini kağıda çizerek, aradıkları mükemmel, akıcı animasyonu, zamanın bir bölümünde bulaştırabilirler. Dizi ile mutlu olduklarında, eşleşmeleri için 3D olarak animasyon uygularlar. Daha az zamanda daha iyi bir ürün elde ettiler, çünkü süreç reçetesi yerine süreç prensiplerine değer vermeyi seçtiler.

Tanımlayıcı bir işlem için tedavi

Finding Dory ekibi, bir eziyet sürecine bağlı kalmak yerine hız ve kaliteye öncelik veren kararlar alarak daha iyi bir ürün yaptı.

Değer verecek başka şeyler seçebilirsiniz, ancak ticari bir ortamda çalışıyorsanız, hız ve kalite arasındaki tatlı noktaya odaklanmak listenizin başında olmalıdır. Mükemmel işleri çabucak geri çevirmek, sonuçta profesyonel tasarımcılar ve sanatçılar için büyük bir sorun.

Sürecini yönlendiren ilkeleri tanımlamak sadece başlangıçtır. İşte onları nasıl uygulamaya koyabileceğinizi.

Büyük sorularla başla

Hıza değer veriyorsanız, en büyük ve en temel soruların ne olduğunu bularak bir projeye başlayın. Gerçekte, bu "merkez üssü tasarımı" olarak adlandırılır:

Sayfanın özünden başlayın ve dışa doğru oluşturun
Epicenter tasarımı sayfanın gerçek esasına odaklanır - epicenter - ve daha sonra dışa doğru açılır. Bu, başlangıçta, uç noktaları görmezden gelirsiniz: navigasyon / sekmeler, altbilgi, renkler, kenar çubuğu, logo vb. Bunun yerine, merkez üssünden başlayıp önce en önemli içeriği tasarlarsınız.
Sayfanın kesinlikle olmadan yaşayamayacağı şey, bölümdür. Örneğin, bir blog gönderisini gösteren bir sayfa tasarlıyorsanız, blog gönderisinin kendisi merkez üssüdür. Kenar çubuğundaki kategoriler değil, üstteki başlık değil, altta bulunan yorum formu değil, gerçek blog yazısı birimi. Blog postası birimi olmadan, sayfa blog postası değildir.
Yalnızca bu birim tamamlandığında, sayfadaki en kritik ikinci öğe hakkında düşünmeye başlarsınız. Sonra en kritik ikinci elementten sonra, üçüncü, vb. Üzerine geçersiniz. Bu merkez üssü tasarımı.
Epicenter tasarımı, “çerçeveyi oluşturalım sonra içeriğin içine bırakalım” modelini taklit eder. Bu süreçte, sayfa şekli oluşturulur, ardından nav dahil edilir, ardından pazarlama “sayfalar”
 yerleştirilir ve ardından nihayet, sayfanın asıl amacı olan çekirdek işlevsellik, kalan alan ne olursa olsun dökülür. Bu, en yüksek önceliğin ne olması gerektiğini alan ve sona erdiren tasarruf eden geriye dönük bir süreçtir.

İşte bunun neden önemli olduğuna bir örnek. Benzersiz, muhtemelen çalıştırılamaz bir ses arabirimi kullanan küçük bir iOS uygulaması üzerinde çalışıyordum. Hız vermezsem, bu tek garip fikrin temeline dayanan sayısız ayrıntıyı tasarlamak için sayısız saat harcayabilirdim. Her şeyden önce, tasarım klasik doğrusal süreçte koddan önce gelir.

Bunun yerine, bu fikrin uygulanabilir olup olmadığını anlamak için kodlamaya başladım. Öyle değildi! Böylece planlarımı değiştirdim ve kendime muazzam miktarda zaman ve enerji kazandırdım.

Sadece sor, WMGMTCATMQITLAOT?

Önce cevaplanması gereken soruları öğrendikten sonra, kendinize sorun:
“Hangi araç bana sorularıma en kısa sürede en net cevap veriyor?”

Yan projem durumunda cevap koddu. Basecamp.com'daki bir sayfa için cevap genellikle metin veya eskizdir. Senin için tamamen başka bir şey olabilir.

Viteslerin ne zaman değiştirileceğini bilmek

Bu size başlamanız için bir yer sağlar, ancak farklı bir ortama geçmenin zamanı geldiğini nasıl anlarsınız? Direnişe çarptığında.

Araba kullanmayı düşün. Otobanı aşağı doğru sürüyorsun - motor memnun bir kedi yavrusu gibi uzağa gidiyor. Ama sonra bir tepeye doğru sürmeye başlarsın. İçinde bulunduğun donanım seyir için mükemmeldi, ama tepe tırmanışı için değil. Hızınızı yükseltmek için yeni bir vitese geçin.

Burada da aynısı. Ancak otomobillerin aksine, tercih ettiğiniz ortamda çok fazla direnç gösterdiğinizi gösteren sağlam bir gösterge yok. Neyse ki, çoğu tasarımcı ve sanatçının daha fazla sadakat sunan bir ortama geçmeniz gerektiğinde sağlam bir tutuşu var. Klasik düşük sadakat → sonuçta yüksek sadakat doğrusal işlem ile aynı hizada olan kısım budur. Eskizler size yararlı bilgiler vermek için durduğunda eskizlerden devam etmeye hazır olduğunuzu biliyorsunuzdur.

Bu noktaya ulaştığınızda, bir sonraki en önemli soru grubunu bulun ve kendinize tekrar sorun: “hangi ortam bana sorularıma en kısa sürede en net cevap veriyor?”

İkinci durum - daha düşük bir sadakate geri dönüş - daha zor. Her ikisi de, insanlar bu konuda daha az uygulandıkları ve ayrıca zor oldukları için. Kodda çalışın. % 100 aslına uygun bir şekilde çalışıyorsunuz, bu nedenle ortamın soruları yanıtlayabilmesi için bir sınır yok. Ancak sorulara hızlı cevap verebilmenin bir sınırı var.

Kendinizi yollar peşinde koşmadığınızı hissettiğinizde, çok fazla iş gibi hissettiğiniz için, geri çekilmeniz gereken gerçekten iyi bir işarettir. Olaylar, olması gerektiği gibi tıklanmadığını hissedince, yeniden değerlendirmenin zamanı geldi. Dikkatli olun ve bunun için bir his geliştirmeye başlayacaksınız.

Avantajınız için bir ortam kullanmak

Bir ortama geçmek - ya da buna yapışmak için üçüncü bir durum var. Bu, direnişi önemsemiyor, sadece temel bir gerçeği önemsiyor; süreç sonucu etkiler. Tıpkı kalemle çizim yapmak, kalemle çizmekten farklı görüneceği gibi, tarayıcıda tasarım yapmak da Sketch'de tasarlamaktan farklı bir sonuç üretecek.

Bir ortamın işinizi nasıl etkilediğini daha çok anlarsınız - bıraktığı araç işaretleri - avantajınız için daha fazla kullanabilirsiniz. Tasarımınızın etkileyici olmasını ister misiniz? Sketch, Illustrator veya hatta * gasp * Photoshop gibi görsel bir araçla çalışmak muhtemelen daha iyi. Minimal, hafif bir tasarım ister misiniz? Kod tasarımında sopa.

Pratik bir örnek

Şimdi, kuralcı sürecin tehlikeleri üzerine kurulduğuma göre, sizinle paylaşmak istiyorum… işlemimi. Adım adım takip etmen için değil! Sadece size sürecinizi yönlendirmek için ilkeleri nasıl kullanabileceğinizi gösteren gerçek bir hayat örneği vermek için.

Basecamp'taki müşterilerle çalışmanın yeni bir yolunu başlattık ve benim işim Basecamp.com'da pazarlamak için yeni bir sayfa oluşturmaktı. İşte nasıl oynandığı:

Büyük soruları belirlemek, bir araç seçmek

Bu yeni bir site veya tamamen yeni bir düzen değil. Öncelikle, bu sayfanın amacını, ne söylemeye çalıştığını ve genel yapısını çözmem gerekiyordu.

“Hangi araç bana sorularıma en kısa sürede en net cevap veriyor?”

Comps ve eskiz çıktı. Bu, mevcut bir tasarıma ve mevcut bir şablona yerleştirilmiştir. Doğrudan koda atlayabilirim, ancak işaretleme bu noktada gürültüdür. Metin sadece doğru.

Yarı pişmiş kopya bir demet

Sadakat artışı

Sayfanın tüm kopyasını tamamlayacak kadar metin ile yapıştırmadım. Bir taslak ve özellik hakkında nasıl konuşmak istediğime dair bir fikir edindiğimde, vitesleri koda geçirdim.

Niye ya?

Bir metin doktoru bir çizginin dul bırakıp bırakmayacağı, bir paragrafın uzun süre "hissedildiği", görüntülerin nasıl akacağı vs. hakkında bir şey söyleyemedi. Yeni sorulardan bazıları statik bir bilgisayar tarafından cevaplandırılmış olabilir, ancak bilgisayarı tam olarak kodla eşleştirmekle zaman kaybetmediğim sürece, kopya uygunluğu ile ilgili soruları cevaplamazdı. Hayır teşekkürler.

Kod düzenlemelerinde kopya düzenlemeleriyle çalışma

Seçici sadakat azalması

Birkaç tur daha kopya revizyondan sonra, sayfa şekillenmeye başladı. Görme, mekanik ve underwhelming oldu. Daha etkileyici olmasını istedim, bu yüzden bazı fikirlere hitap etmek için Sketch'e geçtim.

Çoğunlukla kodda kalabilirdim, ancak Sketch ile kodlayabileceğimden çok daha hızlı bir şekilde bir sürü fikri ateşleyebilirdim. Aynı zamanda, bu fikirleri doğrudan karşılaştırmamı sağladı ve bir CSS faresinin yuvasını tüm kayıplardan bırakmayacaktı. Win-win-win.

Bir grup yarı pişmiş Sketch kompozisyonu

Hiçbirinin tamamen pişmiş olmadığına dikkat edin. Çünkü onlar önemli değil! Bunlar bir müşteri sunumu veya geliştiricinin devri için değildir. Bir şeyleri çözmeme yardım etmek için oradalar, sonra çöpü. Onları cilalamak için zaman harcamak tam bir çaba kaybı olurdu.

Bitirmek

Bir zamanlar yönü anladığımda, geri kalanını kodlardı. Kopyayı cilalamak, ekran görüntülerini çivilemek ve her zaman son ve ana soruyu değerlendirmek: “Bu gönderilmeye hazır mı?”. Basecamp sayfasından canlı olarak görebilirsiniz.

Bu her projenin nasıl oynandığı değil. Bazen Procreate'da bir şeyler çizeceğim, bazen hızlı ve kirli bir görsel kompozisyonla başlayacağım, bazen Sketch'de kopya yazacağım, bazen% 100 kodla çalışacağım. Hepsi eldeki projeye bağlı.

Umarım bu, tekerleği sürekli olarak yeniden icat ediyormuş gibi hissetmeden, duruma göre süreçlerinizi yönlendirmek için ilkeleri nasıl kullanabileceğinize dair bir fikir verir.

Sürecini ve yaptığın işi düşün. Sizin için önemli olan ilkeleri tanımlayın, ilk önce büyük şeylere odaklanın ve çalıştığınız ortamın şu an için doğru olup olmadığını sorgulamaya devam edin. İşin bunun için daha iyi olacak.