Divi Tasarım ve Geliştirme Sürecinizi İyileştirme ve Standartlaştırma

Yayınlanan: 2017-06-02

Divi Web Tasarım İşinizi Organize Etme ve Kontrol Etme serimizin 4/5 bölümüne hoş geldiniz . Bu seride, Divi Web Tasarımcıları olarak hepimizin karşılaştığı günlük mücadelelerin üstesinden gelmenize yardımcı olacak birkaç taktik, araç ve strateji keşfediyoruz. Günlük rutinlerinizi optimize etmekten sistemler ve süreçler oluşturmaya, müşterileriniz için en iyi web tasarım deneyimini sunmaya kadar; İster solo bir serbest çalışan, ister küçük bir ajans veya uzak bir ekip olun, Divi Web Tasarım işinizin kontrolünü elinize almanıza yardımcı olmak amacıyla hemen uygulayabileceğiniz eyleme geçirilebilir öğeler ve adımlar sunuyoruz.

Divi web sitesi tasarlamak ve geliştirmek için standartlaştırılmış bir süreç oluşturmak, bir web tasarımcısı olarak üretkenliğiniz ve refahınız için çok önemlidir. Bir web sitesi tasarım projesi nadiren tam olarak planlandığı gibi gitse de, bağlı kalmanız gereken bir süreç ve yolunuz varsa, ciddi bir zaman kazandıracak ve projeler büyüdüğünde son teslim tarihlerine ulaşma yolunda ilerlemenizi sağlayacaktır.

Divi Tasarım ve Geliştirme Sürecinizi İyileştirme ve Standartlaştırma

Dün, müşterilerinizi hazırlamaya yardımcı olmak için bir başlangıç sayfası oluşturmaya ilişkin önceki bir gönderiye atıfta bulunduk. Bu gönderide, sürecinizi yeni müşterilerinize nasıl sunacağınızdan bahsettik. İşte sürecimi müşterilerime sunma şeklim:

YERLEŞİM VE TASARIM – Bir web sitesi tasarlamanın büyük ve zaman alıcı bir kısmı, sürecin planlama ve yerleşim aşamasındadır. Önce onay için web sitesinin site haritasını (Sayfa/Menü hiyerarşisi) oluşturacağım, ardından onay için ana sayfayı ve bir alt sayfayı (veya istek üzerine daha fazlasını) tasarlayacağım.
GELİŞTİRME – Site düzeni ve tasarımı onaylandıktan sonra, tüm siteyi, sayfaları tasarlamaya ve tüm işlevleri ve eklentileri eklemeye devam edeceğim. Son adıma geçmeden önce sitenizin harika görünmesini ve tüm cihazlarda ve web tarayıcılarında iyi çalışmasını sağlayacağız.
DÜZENLEMELER VE REVİZYONLAR – Site son incelemeye hazır olduğunda, her sayfayı inceleyebileceksiniz ve site tamamen revize edilene kadar ayrıntılı düzenlemeler yapabiliriz. Canlı yayına geçmeden önce tüm yazım, dil bilgisi, adres ve bilgilerin doğru olduğundan emin olmak için lütfen TÜM sayfaları incelemenizi rica ediyoruz.

Artık web tasarımcıları olarak siz, bir web sitesi tasarlamanın ve geliştirmenin 3 adımlık basit bir süreçten daha fazlası olduğunu biliyorsunuz. Benimki aslında 20 adımdan daha fazla bir süreç, ancak müşterilerimi tüm bunlarla aşırı yüklersem, içerik sağlamaya gelince çoğu zaman bir şeyleri fazla düşünürler. Divi Web Tasarım/Geliştirme sürecim aslında biraz daha ayrıntılı olarak şöyle görünüyor:

Onay için sayfa ve gezinme düzeni oluşturun
Üstbilgi ve altbilgi tasarlanmış
Ana sayfa tasarlandı
Alt sayfa(lar) tasarlandı
Onay için müşteriye gönder
Üstbilgi, altbilgi, ana sayfa ve alt sayfada revizyonlar
Onaylandıktan sonra kalan sayfaları oluşturun
Web sitesinin standartlaştırılmış bölümleri ve galeriler, projeler, ürünler vb. gibi yinelenen sayfalar için şablonlar oluşturun
Posta listesi kayıtları, sosyal medya, widget'lar vb. için tüm entegrasyonları uygulayın
Tüm iletişim formlarını oluşturun ve test edin
Mobil ve duyarlı kullanım için tasarımı ayarlayın ve optimize edin
Gerekli SEO ayarlarını girin
Site dilbilgisini ve içeriğini iki kez kontrol edin
Çapraz tarayıcı kontrolü ve hata düzeltmeleri
Son inceleme için gönder
Tüm son müşteri revizyonlarını yapın
Müşteriye özel pano ve eğitim videosu oluşturun (gerekirse)
Gereksiz eklentileri, resimleri ve araçları silin
Siteyi yedekleyin ve yerel olarak kaydedin
Siteyi başlat

Bu süreç genellikle daha fazla ayrıntıya bölünür, ancak bu, ister 5 sayfalık broşür tarzı bir site, ister etkinlikler, e-ticaret vb. tüm bunlar bir kontrol listesi olarak ve bir siteyi başlatmadan önce hiçbir şeyi gözden kaçırmadığımdan emin olmak benim için iyi bir uygulama oldu. Bunun gibi bir kontrol listesi oluşturmak ve onunla birlikte bir zaman çizelgesi koymak, tasarım/geliştirme sürecinizin proje teslim tarihlerinize uygun olduğundan emin olmak için çok etkili bir yol olabilir.

Tamam, artık iç tasarım/geliştirme sürecimi nasıl organize ettiğime dair bir fikriniz olduğuna göre, Divi Web Tasarım süreçlerinizi nasıl optimize edebileceğiniz konusunda biraz daha ayrıntıya girelim.

1) Standart Tasarım Süreci Oluşturma

Divi Facebook gruplarında gördüğüm en iyi yinelenen sorulardan ve tartışmalardan biri "Divi sitenizi nasıl tasarlarsınız?" Photoshop veya Illustrator'da alay ediyor musunuz? Müşterinin onaylaması için temel bir tel kafes oluşturuyor musunuz? Divi'ye dalıp onu yaşıyor musunuz?

Elbette bunu yapmanın doğru ya da yanlış bir yolu yoktur. Tasarım sürecinizi nasıl seçerseniz seçin, 3 şey yapması gerektiğini buldum:

Sizin veya ekibiniz için çalışması gerekiyor
Müşteriniz için çalışması gerekiyor
Size zaman kazandırması gerekiyor

Yeni bir projeye başladığımda, kağıt üzerinde çok kaba bir taslak oluşturma eğilimindeyim ve ilk onay için üstbilgi, altbilgi, ana sayfa ve alt sayfaları tasarlamak için doğrudan Divi'ye daldım.

İşte nedeni:

Benim için işe yarıyor – Geleneksel olarak web tasarımı, kağıt veya Adobe Illustrator gibi bir program aracılığıyla müşteriye çevrimiçi olmadan önce tasarım yapmak ve onay için göstermek için kapsamlı bir tel çerçeve süreciyle başlar. Bu yöntem bazıları için işe yarar ve özellikle bir ekipteyseniz ve tasarımınızı kodlaması için bir geliştiriciye devrederseniz çok verimli bir yol olabilir. Ama Divi bir kez ortaya çıktığında, sürecimi tamamen değiştirdi. Aklımda ve kağıt üzerinde temel bir yapı ve görsel bir konsept oluşturduktan sonra şimdi Divi'ye dalıyorum.
Müşterilerim için işe yarıyor - Müşterilerin bir tarayıcıda görebilecekleri gerçek bir canlı önizlemeyi düz bir maketten çok daha fazla sevdiklerini buldum. Bazen bir sitenin akışı ve hissi tek sayfalık bir modelde kaybolabilirken, bir müşteri siteyi bir tarayıcıda canlı olarak gördüğünde, bu genellikle çok daha büyük bir "vay faktörü"ne yol açar. Harika bir ilk izlenim ve genellikle daha az düzenleme ve revizyon sağlayan site tasarımının üzerine gelmeleri, kaydırma efektlerini ve akışını görebilirler.
Bana zaman kazandırıyor – CSS ve Divi'deki kayıtlı mizanpajlarım ve ayarlarım ile her şeyi o kadar hızlı değiştirebiliyorum ki, bu revizyonları photoshop veya illüstratörde yapmak zorunda kalmam anlamsız olurdu, sonra aynısını stil sayfamda ve Divi ayarlarımda çoğaltmak. Divi geliştirme sitemde doğrudan inspect öğesini kullanarak işleri canlı olarak yaparak revizyonlar ve ilk tasarım ile muazzam miktarda zaman kazanıyorum. Ayrıca müşterilerle telefondayken sitelerde sık sık değişiklik ve revizyonlar yapabilirim. Bir müşteri sizden birkaç şeyi değiştirmenizi istediğinde ve siz bunu onlarla telefonda konuşurken veya birkaç dakika içinde tamamladığınızda gerçek bir web tasarımcısı rock yıldızı gibi görünebilirsiniz.

Şimdi yine, bu tasarım süreci benim için tek kişilik bir dükkan olarak çalışan şeydir. Bir ekiple, sürecin ilgili herkes için çalışması gerekir. Ancak çoğu serbest çalışan web tasarımcısı bir tasarımcı/geliştirici karışımıdır, bu nedenle sizin için hangi süreç çalışıyorsa onu yapın, müşterileriniz için çalışır ve size zaman kazandırır!

2) Divi Kütüphanesini ve Önceki Çalışmanızı Kullanmak

Divi'nin en sevdiğim özelliklerinden biri mizanpajlarınızı ve sayfa tasarımlarınızı kaydetme yeteneğidir. Bu özellik ezber bozan bir özelliktir ve Divi ile tasarım ve geliştirme yaparken size ciddi zaman kazandırabilir. Yakın tarihli bir DiviChat bölümünde, panel birden fazla sayfa tasarımı şablonunu kaydetmekten ve ardından yeni bir sitede kullanmadıklarını silmekten bahsediyor. Biraz zaman kazanmanın bir yolu hakkında konuşun! Bir dizi sayfa düzeni ve sayfa şablonu bulabilirseniz ve tüm yapmanız gereken içeriği, renkleri ve görüntüleri içe aktarmak ve değiştirmekse, saatlerce süren potansiyel tasarım ve geliştirmeden tasarruf edersiniz.

Divi Kitaplığı öğelerini ve önceki çalışmaları kaydetmeye gelince sunacağım 3 hızlı ipucu:

CSS'nizi kaydedin - Diğer sitelerde taklit etmek istediğim belirli modüller, sayfa bölümleri ve sınıflar için yazdığım CSS kodunun çoğuna sahip bir "ana stil sayfam" var. Bu şekilde onu açabilir ve mevcut projede kullanmak istediğim kodu çekebilirim. CSS satırlarını tekrar tekrar yazmak yerine zamandan tasarruf etmek için harikalar yarattı.
Divi Kitaplık Öğeleri Oluşturun - Düzenleri kitaplık öğeleri olarak kaydetmek, çalışmanızı sayfalar halinde veya çoğaltılabilen ve resimler ve renklerle kolayca değiştirilebilen tam bir site olarak kaydetmenin harika bir yolu olabilir. Bunu nasıl yapacağınızdan emin değilseniz, bu öğreticiyi izleyin.
json Dosyalarını Dışa Aktar – Sık sık önceki bir siteden bir sayfaya referans verecek istemcilerim olacak, bu yüzden onu sıfırdan yeniden oluşturmak yerine, genellikle o sayfayı eski siteden dışa aktaracağım, yeni siteme aktaracağım ve stilleri ve görüntüleri buna göre ayarlayın! Yine, Divi'nin tasarım ve geliştirme sürecinde bize zaman kazandıran bir başka harika yolu. Tanıdık değilseniz, burada daha fazla ayrıntı.

3) Web Sitenizin Müşteriye İfşa Edilmesi

Bu benim görüşüme göre web tasarımının en önemli, ancak gözden kaçan ve hafife alınan yönlerinden biri. İlk izlenime ve müşterinin yeni tasarımınızı gördüklerinde başlangıçta ne düşündüğüne çok şey bağlı. Bir maket veya tel kafes yaparsanız, doğal olarak ilk izlenim, müşteri tamamen anlaşılabilir bir çevrimiçi canlı sürüm görene kadar biraz bunaltıcı olacaktır ve yine, tasarımdan geliştirmeye kadar sürecinizin karmaşıklığına bağlı olarak çalışabilir. Yukarıdaki sürecimde gördüğünüz gibi, üstbilgi ve altbilgiyi hazırlıyorum ve ana sayfayı, projenin ihtiyaçlarına bağlı olarak tipik olarak bir veya daha fazla alt sayfa ile birlikte tasarlıyorum ve incelemeye gönderiyorum. Müşteriye nasıl gönderdiğim, ilk tasarımım yakın zamanda değişti, ancak büyük bir etki yarattı.

Eskiden canlı geliştirme bağlantısını gönderirdim, böylece müşteri siteyi kendi boş zamanlarında görebilirdi. Bu oldukça işe yaradı, ancak şahsen veya Skype üzerinden bir önizleme yapma şansımın nadir olduğunu gördüm, bu ilk izlenimler daha da iyi gitti ve neden? Bunun nedeni, müşterinin siteyi gördüğünde vizyonumu duyması ve tasarım, renk ve estetik fikirlerimi, onlar ilk önce kendi kararlarını vermelerine gerek kalmadan gözden geçirmeme izin verdiği için olduğuna inanıyorum.

Şimdi onları sitede gezdirdiğim hızlı (genellikle 5 dakikadan az) bir ön izleme videosu oluşturuyorum! Bu, şu ana kadar ezici bir çoğunlukla olumlu geri bildirimlerle karşılandı. Biraz zaman alıcı mı ama müşterilerimden harika bir ilk izlenim edinmeye değer buluyorum.

İşte Basecamp'ta bir müşteriye yeni bir siteyi nasıl gösterdiğimin ekran görüntüsü:

Adım adım videolarımı Mac için Screenflow ile kaydediyorum. Daha sonra videoyu Vimeo kanalıma yüklüyorum ve onu özel bir video haline getiriyorum. Oradan, yukarıdaki anlık görüntüde görebileceğiniz gibi, istemciye bu video bağlantısını kısa bir açıklama, daha sonra ne bekleyeceğine dair bir madde işareti listesi ve istemcinin tarayıcısında görmesi için geliştirici sitesinin gerçek URL'si ile birlikte gönderiyorum. videoyu izledikten sonra.

Yeni siteleri müşterilere nasıl sunduğumu görmek isterseniz, son önizleme videolarımdan birkaçını burada bulabilirsiniz:

Web Sitesi Önizleme Videosu 1

Web Sitesi Önizleme Videosu 2

4) Revizyonları ve Düzenlemeleri İşleme

Son olarak, tasarım ve geliştirme sürecinizin büyük bir kısmı, müşteri revizyonlarını ve düzenlemelerini nasıl ele alacağınız olacaktır. Herhangi bir süredir web siteleri tasarlıyorsanız, bu sürecin zaman alıcı olabileceğini bilirsiniz. Yüz yüze toplantılar, uzun aramalar ve burada küçük değişikliklerle rastgele e-postalar veya düzenleme ve revizyon sürecinde büyük zaman kaybı olabilir.

Bununla mücadele etmenin birkaç yolu var. Tüm müşterilerimin revizyonlarını (gerekirse sayfa başına) revizyonlar için bir tartışma oluşturduğum Basecamp'ta göndermelerini sağlamaya çalışıyorum. Gerekirse bir telefon görüşmesi veya yüz yüze görüşmeyi kabul edeceğim, ancak yalnızca ilk değişiklikler, onları ilk önce almak istediğim şekilde gönderdikten sonra. Ayrıca, e-posta yoluyla birden fazla gün boyunca birer birer revizyon almak istemediğimi de ÇOK net bir şekilde ifade ediyorum. Müvekkillerime, eğer mümkünse, birkaç gün içinde bunları toplamalarını ve hepsini bir kerede veya birçok müşterimin yapmaktan hoşlandığı şekilde yayınlamalarını, hepsini bir .doc veya .pdf formatında düzenlemelerini söylüyorum.

Bu serideki bir önceki gönderiye ve Artillery Media'dan adamlarla yaptığım konuşmaya geri dönersek, müşterilerinin düzenlemelerini Google Drive'da bir dokümanda göndermelerini istedikleri ve daha sonra düzenlemeleri yapabilmeleri için çok basitleştirilmiş bir revizyon sürecine sahipler. hepsi birden. Bu aynı zamanda büyük bir zaman tasarrufu sağlar. Buradaki püf nokta, düzenleme ve revizyon işlemlerini sizin için mümkün olan en fazla zaman kazandıracak şekilde yapmaktır. Ve sadece bir tavsiye, her müşterinin kendi işleri yapma şekli vardır, bu yüzden revizyonları ve düzenlemeleri nasıl istediğiniz konusunda onlara rehberlik etmek sizin işiniz.

Kapanışta

Umarım bu fikirler ve benim tasarım/geliştirme sürecim, halihazırda standartlaştırılmış bir süreciniz yoksa kendinizinkini yaratmanız için sizi cesaretlendirmiştir! Sizin için iyi çalışan bazı süreçleriniz varsa, aşağıdaki yorumlarda bize bildirmekten çekinmeyin!

Sıradaki: Birden Çok Divi Web Tasarım Projesini Etkili Bir Şekilde Yönetme

Devam eden birden fazla projeniz olduğunda, yaratıcı kalırken, son teslim tarihlerini dengelerken ve müşteri beklentilerini karşılarken hepsini yönetmek zordur. Bu serideki son yazımızda, tüm Divi Web Tasarım projelerinizi etkili bir şekilde yönetmenin bazı yollarından bahsedeceğiz, böylece yeni müşteriler edinme, tasarlama, geliştirme ve belirlediğiniz son teslim tarihlerine bağlı kalma arasında denge kurabilirsiniz. vurmak için dışarı. Hepsi yaratıcı ve taze kalırken. O zamana kadar!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!