Tarayıcıda tasarım yapmak beni korkutuyordu. Çok zor göründüğü için değil, ama çok fazla küçük kutudan oluşan bir tasarımla sonuçlanacağımı düşündüğümden, çok genel ve mülayim olan bir şey onu Photoshop'ta yeniden bitirmek olurdu.
Bu korkunun tamamen yersiz olduğu ortaya çıktı. Tasarımlarım daha odaklanmış hale getirmekle kalmadı, aynı zamanda onları daha hızlı tamamladım ve müşterileri daha önce etkileşime girerek ve tartışarak sürece dahil ettim.
Tasarım tasarımdır. Bir yazılım programında veya kodda yazılmakta olmasının önemi yoktur. Tarayıcıda tasarlama, Photoshop'ta tasarlamadan daha zor değildir. Herhangi bir araç gibi, onu öğrenmek ve sonunda ustalaşmak için onu kullanmanız gerekir.
Tasarım, müşteriler için çalışarak daha da zorlaştırılan yinelemeli bir süreçtir. Bazen müşterilerinizin tam olarak ne anlattığınızı resmetmesi zor; Tarayıcıda tasarım yapmak, sadece tasarım aşamasından ziyade süreç boyunca sürece dahil olabilir.
Temel olarak tasarım ve geliştirme aşamaları birleştiriliyor ve eğer tasarım ve ön uç geliştirme konusunda doğal olarak iyiysen, tarayıcıya bir ördek gibi suya atmak gibi bir şey tasarlayacaksınız.
Tarayıcıda tasarımlamanın en büyük yararı, gerçekçi beklentilere göre tasarlayabilmemizdir. Bazen yazılımda tasarım yapmak, ön uç geliştirme için öngörülemeyen sorunlar yaratabilir. Kullanıcı Arayüzü unsurları tasarımlı olabilir ya da belki de herhangi bir anlam ifade etmiyorlar, bir müşteriyi neden değiştirdiğini açıklamak zor, çünkü anlamadıkları için değil, zaten tasarımın içine dalmış olduğunuzdan ve ona sahip olduğunuzdan onayladı. Tarayıcıda tasarım yapmak, basitlik fikrine kendisini borçludur.
Tasarım hakkında düşünmeden önce bir plana ihtiyacım var. Sadece farklı bir araç kullanıyorum, süreç değişimlerim anlamına gelmez. Tasarım yapmaya başlamadan önce oldukça sağlam bir plana sahip olmayı seviyorum ve ne tasarladığımı, neden tasarladığımı, kimin için tasarladığımı, müşteri arka planını ve odaklanmam gerekecek herhangi bir servis veya ürün bilgisini bilmem gerekiyor. üzerinde.
Bu şeyleri belirledikten sonra, ürünün ne olduğunu, müşterinin ne yaptığını, ne kadar zamandır yapıyor olduklarını, onları rakiplerinden ayıran, kullanıcı tabanının kim olduğunu ve birincil ve ikincil olarak ne hakkında daha iyi bir fikre sahip olacağım. web sitesinin hedefleri olacak.
Ben şahsen her şeyin belgelenmesini istiyorum. Genellikle site haritası, içerik, harekete geçirici mesajlar ve site mimarisi için belgelerim var. Tasarım yapmaya başladığım zaman, tasarım için net bir stratejiye sahip olmalı ve içeriğin tamamı toplanmış olmalıydı.
Tarayıcıda bir şey tasarlamaya gidersem eskiz anahtarıdır. İçerik alanlarını kalem ve kağıt ile pürüzlendirebilir, geri bildirim alabilir ve tasarımımın temeli üzerinde hızlıca yineleyebilirim.
Yukarıda tarif ettiğim plana dayanarak çizim yapıyorum ve tüm içerik alanlarına ve harekete geçirme eylemlerine sahip olduğumdan emin oluyorum. Eskiz hızlı olmalı, hiçbir şeyi mükemmelleştirmek için çok fazla zaman harcamayın. Bir müşteriye gösterecek kadar sağlam olmalı, ancak bir saatten kısa bir sürede bitirebilmeniz için yeterince özendirilmelidir.
Daha sonra siteyi HTML ve CSS'deki skeçlerimden prototiplemek istiyorum. Prototip, yer tutucular için metin ve resimler içeren çok sayıda gri kutu. Ben tasarlamaya başladığımda gri kutular içerik için konteyner görevi görüyor. Kod ile prototip oluşturmanın en büyük yararı, müşterinin prototip ile etkileşimde bulunabilmesi ve site mimarisinin nasıl çalıştığını görebilmesidir. Bu şekilde, herhangi bir şey kapalıysa veya rafine edilmeye ihtiyaç duyuyorsa, lansman gününden ziyade bunun üstesinden gelebiliriz.
Tasarım yapmaya başlamadan önce, tasarımımızın temelini almak için bir çeşit stile ihtiyacımız var. Potansiyel doku ve desenlerle kullanacağımız renkleri ve yazı tiplerini belirlememiz gerekiyor. Bu, stil karolarının devreye girdiği yer.
Stil fayans Samantha Warren tarafından yaratıldı ve bir süredir onları kullanıyordum. Müşterilerin tasarım yapmaya başlamak için kullanabileceğimiz erken ve çok basit bir stil rehberi görmelerine yardımcı oluyorlar. Müşterinin hangi şekilde tercih edeceğini görmek için bunlardan birkaçını yaratmayı seviyorum. Bunların da onay sürecinde çok önemli olduğunu ve tamamen reddedilmenin önlenmesine yardımcı olduğunu düşünüyorum.
Şimdi tasarım yapmaya hazırız. Photoshop veya Sketch gibi bir yazılım programında tasarım yapmak için kullanılıyorsanız, bu çok farklı değildir. Prototip dosyamızı kullanarak markalamamıza mock içerik eklemeye başladık. Bu noktada, işaretlemede her bir içerik bölümüne tam olarak ne olduğunu biliyoruz ve ızgara zaten tanımlanmış ve bu kadar uzun sürmemeli.
Şimdi içeriklerime katman stilleri başlatacağım. Renk, tipografi ve düzen için temel stiller ekleyeceğim. Baz stilleri bittiğinde, adım atıp ona bakacağım. Daha sonra başvurmak için tasarımın belirli bölümlerini ekrana almayı seviyorum.
Baz katmandan memnun kaldığımda, neyin düzeltileceğine dair notlar almak istiyorum. Büyük ihtimalle kullanacağım notlara dayanarak Photoshop veya kroki doku veya somut bir his ile herhangi bir şey eklemek. Photoshop ve Sketch, karmaşık UI öğelerini hızlı bir şekilde hassaslaştırmak için harika araçlardır. Bu nedenle, birden çok kez kod yazmak için acı çekebilecek herhangi bir şeyi kaydediyorum
Bunu yapmamın sebebi, kod tabanımın yalın ve temiz olmasını ve kod, yorum ve silme işlemlerinin daha fazla olmasını, çünkü kod dizininizin daha özensiz ve şişirilmiş olmasını sağlamaktır.
Tarayıcıda her seferinde sıfırdan tasarlamanız gerekiyorsa, işler sonsuza kadar sürecek gibi görünebilir, ancak özel bir tabandan, bir çerçeveden başlarsanız, herhangi bir yinelenen adımı ortadan kaldırabilirsiniz. İle başlamak için özel bir sürümü var Initializr Sass (http://sass-lang.com/) içinde yerleşik bir özel duyarlı ızgara ile kullandığım. Özel bir çerçeve kullanmak bana prototipleme ve tasarım için bir başlangıç sağlar.
Ortak kullanıcı arayüzü kalıplarından oluşan bir kütüphaneye sahip olmak, hızlı bir prototip oluşturmak için harika bir yoldur ve tarayıcıda tasarımı daha verimli hale getirir. kullanırım Yüce metin kodlamak ve yararlanmak için öğrendiğim bir şey, oluşturabileceğiniz özel snippet'lerdir. Snippet'ler listeme birçok gezinme, liste, kenar çubuğu ve diğer ortak öğeler ekledim, böylece bunları basit bir eylemle hızlı bir şekilde işaretleme şeklimize yerleştirebiliyorum. Ayrıca hesapları da kullanıyorum Codepen ve JSFiddle desenler kaydetmek için. Dan Cederholm, adında ortak kalıpları saklamak için harika bir WordPress teması oluşturdu Armutlar . Değişiklikleri test etmek ve önizlemek için ön uçta canlı olarak düzenleyebileceğiniz kodu depolamak için yayınları kullanır.
Pratik ve pratik uygulama, tarayıcıda tasarım yaparken sizi daha iyi hale getirecektir. Şanslar, herhangi bir ön uç geliştirme gerçekleştirirseniz, başlangıç için temel bir çerçeveye sahipsiniz ve zaten kullanabileceğiniz bazı ortak kalıplarınız var demektir.
Artık yapmanız gereken tek şey tarayıcıda tasarım yapmaya başlamak ve sonuçta verimli ve işinizin içinde çalışan bir iş akışı ile ortaya çıkacaksınız. Uygulama ile sadece daha hızlı olacaksınız.