Webflow bizi daha iyi dijital tasarımcılar yapıyor

Webflow bizi daha iyi dijital tasarımcılar yapıyor
In: Digital Marketing


Size (Velocity’deki Tasarım ekibi) web içeriği oluşturmak için yakın zamanda denemeye başladığımız bir araçtan bahsetmek istiyoruz.

Aslında şunu kazıyın: biz çiş yapmaya ihtiyacımız olan çocuklarız patlama sana bundan bahsetmek için.

Çünkü daha yeni başlamış olmamıza rağmen Web akışızaten büyük bir potansiyel görüyoruz.

Zamanında, Webflow’un tasarımcılar olarak bizleri müşterilerimiz için daha iyi, daha kesin mühendislik çalışmaları yapma konusunda güçlendireceğinden eminiz.

Ve bu sadece yeni başlayanlar için.

Ama ne olduğumuza gelmeden önce gidiyor Webflow ile yapmak için, onunla daha önce neler yaptığımızdan bahsedelim…

Oh – ve Webflow’un ne olduğunu merak ediyorsanız…

Ne cehennem Webflow olduğunu

Webflow, tamamen görsel bir tuval kullanarak HTML5, CSS3 ve JavaScript’in kontrolünü elinize almanızı sağlayan “kodsuz” bir web sitesi oluşturucusudur.

Bir Tasarım POV’sinden bu, bizim (kodlayıcı olmayanlar olarak) bir web sayfası oluşturabileceğimiz ve kodu doğrudan web’de yayınlayabileceğimiz veya bir siteye entegre edilmesi için Geliştirme ekibimize teslim edebileceğimiz anlamına gelir.

Onunla nasıl başladık

Bir zamanlar – tamam, yaklaşık üç ay önce – Baş Geliştiricimiz Dave, Webflow hakkında bir videoya rastladı ve heyecanlandı.

(Tam açıklama: o oldukça fazla Her zaman heyecanlıydı, ama normalden biraz daha heyecanlıydı.)

Dave bize bir bağlantı gönderdi ve Webflow’a bakmamız gerektiğini söyledi: Bu potansiyel bir oyun değiştirici.

Biz merak ettik. Açtık. Öğle yemeği yedik. Öğle yemeğinden döndük. Ve videoyu izledi. Ve etkilendiler.

Bu yüzden Webflow’u denememiz gerektiğine karar verdik. Ve öyle oldu ki, mükemmel denemek için bir çalışma.

Görüyorsunuz, müşterimiz Glance için bir marka değişikliği yapıyorduk ve bu projenin bir parçası olarak bir marka kılavuz belgesi oluşturmamız gerekiyordu.

Normalde, bu belgeyi bir PDF olarak oluştururduk. Ancak PDF’lerle ilgili olan şey (ve bunu okuyan herhangi bir PDF hayranına saygısızlık değil) seyrek ilk format tercihimiz.

Neden? Niye? Yolları sayalım: onlar tıknaz; onlar eski teknoloji; onlar statik; etkileşimli değiller; hantaldırlar; sürüm kontrolü yok…

Tahminimize göre, hepsi oldukça Şeytani bir Biçime ekleniyor. (Lütfen: iniltilerinizi sona saklayın.)

Ve, hey: biz bir dijital ajans, değil mi? Dijital içeriğin en ileri teknolojisini temsil etmemiz gerekiyor. Öyleyse, bu marka kurallarını koymayı amaçlamamalı mıyız? internet üzerinden?

Evet. Evet yapmalıyız.

Daha fazla ikna etmeye ihtiyacınız varsa, işte burada:

Marka yönergelerinin bir web sayfası olarak PDF’den daha iyi çalışmasının 5 nedeni

  1. Bir web sayfasıyla sürüm kontrolünün bakımı daha kolaydır
  2. Bir web sayfası markanızı dünyaya tanıtıyor… (Bu, içine animasyon gibi harika şeyler koymayı sağlar Gerçekten değerli.)
  3. Daha paylaşılabilir… Gelen kutunuzda veya kağıt tepsinizde kaybolmaz.
  4. Ve daha interaktif. (Ve, ergo, ilgi çekici.)
  5. Bir web sayfasının performansını ölçebilir (ve böylece iyileştirebilirsiniz).

How onunla çalıştık

Web akışı, “dev olmadan tasarım” olarak faturalandırıldı. Ve bir dereceye kadar, bu doğru.

Marka yönergeleri işini alın: normalde, tasarım tamamlandıktan sonra bu bir Figma dosyasına konur ve Geliştirme ekibimizin onu çevrimiçi hale getirmek için özel bir yapım işi yapması gerekir.

Design, Webflow’u kullanarak, marka yönergeleri için – bu arada gelecekte tekrar kullanabilecekleri – tek başlarına bir kapsayıcı şablonu oluşturdu.

Ancak bu, geliştiricilerin dahil olmadığı anlamına gelmez. Hayır efendim: kesinlikle oynuyorlar gerekli rol burada.

Ne de olsa tasarımcılar olarak geliştiricilerin evinde çalışıyoruz: CSS arazisi – şimdiye kadar gizemli bir yer, kalın kod katmanlarıyla örtülmüş, isimlerin farklı olduğu, tüzük farklıdır ve acemiler kaymaya eğilimlidir.

Açıklayalım:

Figma’da, varsayılan olarak öğelerin ‘sabit’ veya ‘mutlak’ konumlandırılmasıyla çalışırsınız. Bu, öğeleri bir sayfanın etrafına sürükleyip yerleştirebileceğiniz anlamına gelir. nereye istersen – bu, diğer öğelerde düzen değişikliklerine neden olmadan.

Bunun aksine Webflow’ta şu kuralları kullanıyorsunuz: CSS varsayılan olarak. Bu, öğelerin ‘göreceli olarak’ üst üste istiflenerek yerleştirildiği anlamına gelir.

Webflow’ta bu sistemden çıkmak için, içeri girip belirli bir öğenin konumunu ‘sabit/mutlak’ olarak değiştirmeniz gerekir. Figma’daki ‘sabit/mutlak’ sistemden çıkmak için ‘auto layout’ adı verilen bir sistem kurmanız ve kullanmanız gerekiyor.

Başka bir deyişle, (otomasyon veya geliştirme ekibi aracılığıyla) bu biçime çevrilen bir tasarım aracıyla çalışmak yerine doğrudan web biçimiyle çalışıyorsunuz.

Ve en iyi nasıl tasarlanacağına gelince web kuralları dahilindeöğreniyoruz – ancak geliştiricilerimiz paha biçilmez danışmanlar olmaya devam ediyor.

Onunla ne yaptık

Webflow ile çalışma deneyimi (sınırlı da olsa) olan tasarımcımız Dean, birkaç gün içinde bir kapsayıcı şablonu oluşturdu.

Bu kapsayıcı daha sonra yeni marka öğelerini (önceden tanımlanmış ve onaylanmış) sayfaya aktaran tasarımcılarımız tarafından güncellendi.

Sonuçlardan gerçekten çok memnunuz – ve Glance ekibi de öyle. (Bu arada, bu konuda Glance’ın Marka Performansı ve Pazarlama Direktörü Nadine ile yakın bir şekilde çalıştık. neşe birlikte çalışmak.)

Dean ve benim Webflow kullanarak oluşturduğumuz marka yönergelerine buradan göz atabilirsiniz:

https://brand.glance.net/

Webflow ile çalışmanın bazı avantajları

  1. Tek bir araç kullanarak tasarlayabilir, oluşturabilir ve yayınlayabiliriz

Bu, en azından tam teşekküllü bir web uygulaması için bütçe ayırmadan küçük ölçekli projeler üzerinde çalışırken, Geliştirme ekibimize teslim etmek yerine doğrudan web’de yayınlayarak maliyet tasarrufu sağlayabileceğimiz anlamına gelir.

  1. Tasarım yazılımından daha güçlü ve prototip oluşturma için daha esnektir

Bir prototipe animasyon ve etkileşimli öğeler eklemek istiyorsanız, gidilecek yol Webflow’dur.

Ancak daha da önemlisi, Webflow’ta gördüğünüz şey, site canlı yayına aktarıldığında göreceğiniz şeydir.

Webflow’ta yerleşik olarak duyarlı tasarım mantığı vardır, böylece tasarladığınız içeriğin web’de ve mobilde nasıl davranacağını tam olarak görebilirsiniz – örneğin, bir başlık geçilecek veya garip bir şekilde kapanacaksa.

Bu, tasarım kararlarımızı verimli bir şekilde bilgilendirmekten başka bir işe yaramaz. Sonuçta, web ortamını ne kadar çok anlarsak, onun için içerik tasarlarken o kadar çok düşünülmüş ve uygun kararlar verebiliriz.

  1. Potansiyel olarak süreçlerimizi düzene sokar

En azından içerdiği parçalar için (marka yönergeleri gibi).

Bir şablon oluşturduğumuzda, bu şablonu başka bir müşterinin markasıyla yeniden tasarlamak hızlı ve kolay olmalıdır. Bu bize (ve müşterilerimize) zaman ve para kazandıracak.

bizi nasıl etkiler tüm Ajans

Açık olmalıyız: Webflow’a daha yeni başlıyoruz ve onu düzenli olarak kullanmıyoruz.

Normal şartlar altında, tasarımcılarımızdan biri bir brief aldığında, onu oluşturmak için Webflow’a gitmeyecektir.

Figma’yı (veya Figma gibi bir şeyi) kullanmaya devam edecekler – (diyelim ki) Figma tel kafesleri onaylandıktan sonra, muhtemelen oluşturmak için Webflow’a gidin.

Webflow, tasarımcılarımızı bir Geliştirici zihniyetine sokmaya yardımcı olurken – yerel konumlandırma, düzen yapısı ve duyarlı tasarım gibi şeyleri anlamamıza yardımcı olurken – bu bizim için hala yeni ve garip bir dünya, bizim için biraz zaman alacak (ve birkaç öğretici daha) ile rahat.

Ayrıca, Webflow sadece bir Tasarım ‘şeyi’ değildir. Ne münasebet.

Bir ajans olarak sahip olduğumuz yeteneklerin Webflow ile oluşturduğumuz her şeye yansımasını istiyoruz.

Bu nedenle, ajansımızın her bölümü Webflow ile nasıl çalışacaklarını düşünmelidir.

Örneğin:

  • geliştirici bitiş kodunun iyi kod olduğundan emin olmanız gerekir. (Sonuçta, Webflow’ta bir şeyler yapmanın doğru ve yanlış yolları vardır – tıpkı Geliştirme’nin doğru ve yanlış yolları olduğu gibi.)

En iyi uygulamalara bağlı kalındığını ve kodun temiz olduğunu kontrol etmeleri gerekir. Ayrıca erişilebilirlik, kod çıktı paketi boyutu, performans, SEO, etkileşim optimizasyonu gibi şeyleri de kontrol edecekler…

  • yazarlar kopyalarının nasıl göründüğünü görmek için Webflow’u kullanabilecek yerinde – masaüstü/dizüstü ve mobil cihazlarda, büyütülmüş veya küçültülmüş – ve buna göre düzenleyin. Tasarımcılarımızda olduğu gibi, yazarlarımız da yazdıkları ortamı anlamaktan şüphesiz fayda göreceklerdir. onun için yazarken.
  • Verim SEO ve UX perspektifinden her şeyin mantıklı olup olmadığını kontrol etmeniz gerekecek. (Örneğin, marka yönergeleriyle, kullanıcıların markalı bileşenleri bulmasını, indirmesini ve kullanmasını kolaylaştırmalıyız.)

Müşterilerimiz için içinde ne var?

İçeriği kontrol etmek söz konusu olduğunda, müşteri için basitlik ve özgürlük anlamına gelir. Bize gelmek veya WordPress arka ucunu yönetmekle uğraşmak zorunda kalmadan bir şeyleri güncellemek ve düzenlemek son derece kolaydır.

Webflow’un ‘Düzenleyici’ özelliği içeriğe göre yapılandırılır ve diğer içerik yönetim sistemlerinin gösterge tablolarıyla karşılaştığınız olağan karmaşıklığı ortadan kaldırır – yani istediğiniz şeye giden yol kısadır.

Bu tür sezgisel kontrol, muhtemelen daha iyi içerikle sonuçlanır – tüm mesele bu. Özellikle yakın zamanda yeniden markalaştıysanız, bu şeylerin şarkı söyle. Yönergelerin mekanik ve kuralcı olması gerekmez. Elbette, her şeyden önce işlevsel olmalarını istiyorsunuz – markanız içinde tutarlılık ve bütünlük sağlıyorlar – ama aynı zamanda küçük bir mojo yaymak ve çalışanlarınızı heyecanlandırmak için bir fırsat.

Tbu konuda bize danışın

İşte karşınızda: Webflow’u kullanma deneyimimiz buydu (şimdiye kadar).

Webflow ile çalışmış bir tasarımcı veya herhangi bir dijital reklam öğesiyseniz, ne olduğunu bilmek isteriz. senin deneyimi olmuştur ve onda ne gibi bir potansiyel görüyorsunuz.

Bize bir satır bırakın veya aşağıya bir yorum bırakın.

Bir cevap yazın

Ready to Grow Your Business?

We Serve our Clients’ Best Interests with the Best Marketing Solutions. Find out More

How Can We Help You?

Need to bounce off ideas for an upcoming project or digital campaign? Looking to transform your business with the implementation of full potential digital marketing?

For any career inquiries, please visit our careers page here.
[contact-form-7 404 "Bulunamadı"]