Udoskonalenie i standaryzacja procesu projektowania i rozwoju Divi

Opublikowany: 2017-06-02

Witamy w części 4 z 5 naszej serii Organizowanie i przejmowanie kontroli nad Twoim biznesem Divi Web Design. W tej serii odkrywamy kilka taktyk, narzędzi i strategii, które pomogą Ci przezwyciężyć codzienne zmagania, z którymi wszyscy mamy do czynienia jako Divi Web Designers. Od optymalizacji codziennych czynności, przez tworzenie systemów i procesów, po zapewnianie klientom najlepszych doświadczeń w projektowaniu stron internetowych; dostarczamy przydatne elementy i kroki, które możesz wdrożyć natychmiast, aby pomóc Ci przejąć kontrolę nad swoim biznesem Divi Web Design, niezależnie od tego, czy jesteś samotnym freelancerem, małą agencją czy zdalnym zespołem.

Stworzenie ustandaryzowanego procesu projektowania i tworzenia strony internetowej Divi ma kluczowe znaczenie dla Twojej produktywności i dobrego samopoczucia jako projektanta stron internetowych. Chociaż projekt strony internetowej rzadko przebiega dokładnie zgodnie z planem, jeśli masz proces i ścieżkę, której musisz się trzymać, zaoszczędzi to trochę czasu i pozwoli ci dotrzymać terminów, gdy projekty będą rosnąć.

Udoskonalenie i standaryzacja procesu projektowania i rozwoju Divi

Wczoraj odnieśliśmy się do poprzedniego posta o tworzeniu strony wprowadzającej, która pomoże przygotować Twoich klientów. W tym poście rozmawialiśmy o tym, jak zaprezentować swój proces nowym klientom. Oto sposób, w jaki przedstawiam mój proces moim klientom:

  1. UKŁAD I PROJEKT – Duża i czasochłonna część projektowania strony internetowej znajduje się na etapie planowania i układu. Najpierw stworzę mapę witryny (hierarchię stron/menu) witryny do zatwierdzenia, a następnie zaprojektuję stronę główną i podstronę (lub więcej na życzenie) do zatwierdzenia.
  2. ROZWÓJ – Po zatwierdzeniu układu i projektu witryny zajmę się projektowaniem całej witryny, stron oraz dodawaniem wszystkich funkcji i wtyczek. Przed przejściem do ostatniego etapu zadbamy o to, aby Twoja witryna wyglądała świetnie i działała poprawnie na wszystkich urządzeniach i przeglądarkach internetowych.
  3. EDYCJE I ZMIANY – Gdy witryna będzie gotowa do ostatecznego przeglądu, będziesz mógł przejrzeć każdą stronę, a my będziemy mogli wprowadzać szczegółowe zmiany, dopóki witryna nie zostanie całkowicie poprawiona. Prosimy o przejrzenie WSZYSTKICH stron, aby upewnić się, że pisownia, gramatyka, adresy i informacje są poprawne przed uruchomieniem.

Teraz Ty, jako inni projektanci stron internetowych, wiesz, że projektowanie i rozwijanie strony internetowej to coś więcej niż prosty 3-etapowy proces. Mój jest właściwie bardziej 20-etapowym procesem, ale odkryłem, że jeśli przeciążę moich klientów tym wszystkim, co się z tym wiąże, często przemyślą rzeczy, jeśli chodzi o dostarczanie treści. Oto, jak wygląda mój proces projektowania/rozwoju Divi Web w bardziej szczegółowy sposób:

  1. Utwórz układ strony i nawigacji do zatwierdzenia
  2. Zaprojektowany nagłówek i stopka
  3. Strona główna zaprojektowana
  4. Zaprojektowane podstrony
  5. Wyślij do klienta do zatwierdzenia
  6. Poprawki nagłówka, stopki, strony głównej i podstrony
  7. Po zatwierdzeniu utwórz pozostałe strony
  8. Twórz szablony dla ustandaryzowanych sekcji witryny i stron cyklicznych, takich jak galerie, projekty, produkty itp
  9. Zaimplementuj wszystkie integracje dla rejestracji na listy mailingowe, mediów społecznościowych, widżetów itp.
  10. Twórz i testuj wszystkie formularze kontaktowe
  11. Dostosuj i zoptymalizuj projekt pod kątem zastosowań mobilnych i responsywnych
  12. Wprowadź niezbędne ustawienia SEO
  13. Dokładnie sprawdź gramatykę i treść witryny
  14. Sprawdzanie w różnych przeglądarkach i poprawki błędów
  15. Wyślij do ostatecznej recenzji
  16. Dokonaj wszystkich ostatecznych poprawek klienta
  17. Utwórz niestandardowy pulpit nawigacyjny klienta i wideo szkoleniowe (jeśli to konieczne)
  18. Usuń niepotrzebne wtyczki, obrazy i narzędzia
  19. Utwórz kopię zapasową i zapisz lokalnie
  20. Uruchom witrynę

Ten proces jest często podzielony na jeszcze bardziej szczegółowe informacje, ale jest to podstawowa struktura wszystkiego, co jest związane z każdą z moich kompilacji, niezależnie od tego, czy jest to 5-stronicowa witryna w stylu broszury, czy 50-stronicowa witryna z wydarzeniami, e-commerce itp. Mam wszystko to jako lista kontrolna i dobrą praktyką było dla mnie upewnienie się, że niczego nie przeoczyłem przed uruchomieniem witryny. Utworzenie takiej listy kontrolnej i umieszczenie wraz z nią harmonogramu może być bardzo skutecznym sposobem na upewnienie się, że proces projektowania/programowania jest zgodny z terminami projektu.

Ok, teraz, gdy masz już pomysł na to, jak zorganizowałem mój wewnętrzny proces projektowania/programowania, przejdźmy do bardziej szczegółowych informacji o tym, jak możesz zoptymalizować TWOJE procesy Divi Web Design.

1) Tworzenie standardowego procesu projektowania

Jednym z najbardziej powtarzających się pytań i dyskusji, jakie widzę w grupach Divi na Facebooku, jest coś w stylu „Jak zaprojektujesz swoją witrynę Divi?” Czy wyśmiewasz to w Photoshopie lub Illustratorze? Czy tworzysz podstawowy szkielet do akceptacji klienta? Czy po prostu zanurzasz się w Divi i robisz to na żywo?

Oczywiście nie ma na to dobrego ani złego sposobu. Odkryłem, że niezależnie od tego, jak wybierzesz proces projektowania, musisz wykonać 3 rzeczy:

  1. Musi działać dla Ciebie lub Twojego zespołu
  2. Musi działać dla twojego klienta
  3. To musi zaoszczędzić Twój czas

Kiedy rozpoczynam nowy projekt, zwykle tworzę bardzo szorstki szkic na papierze i zanurzam się w Divi, aby zaprojektować nagłówek, stopkę, stronę główną i wszelkie podstrony potrzebne do wstępnego zatwierdzenia.

Dlatego:

  • To działa dla mnie – Tradycyjnie projektowanie stron internetowych zaczyna się od rozbudowanego procesu makiety za pomocą papieru lub programu, takiego jak Adobe Illustrator, w celu zaprojektowania i przedstawienia klientowi do zatwierdzenia, zanim jeszcze przejdzie do trybu online. Ta metoda działa dla niektórych i może być bardzo wydajną trasą, szczególnie jeśli jesteś w zespole i przekazujesz swój projekt programiście do kodu. Ale kiedy pojawiło się Divi, całkowicie zmieniło mój proces. Teraz zanurzam się w Divi po tym, jak mam podstawową strukturę i koncepcję wizualną w moim umyśle i na papierze.
  • To działa dla moich klientów – odkryłem, że klienci uwielbiają oglądać rzeczywisty podgląd na żywo, który widzą w przeglądarce, o wiele bardziej niż płaską makietę. Czasami w jednostronicowej makiecie można zgubić przepływ i wrażenie witryny, podczas gdy klient widzi witrynę na żywo w przeglądarce, często prowadzi to do znacznie większego „efektu wow”. Widzą najechanie kursorem, efekty przewijania i przepływ projektu witryny, co zapewnia świetne pierwsze wrażenie i często mniej edycji i poprawek.
  • Oszczędza mi to czas – mogę tak szybko zmieniać rzeczy za pomocą CSS i moich zapisanych układów i ustawień w Divi, że nie ma sensu dokonywać tych poprawek w Photoshopie lub Illustratorze, a następnie powielać je w moim arkuszu stylów i ustawieniach Divi. Oszczędzam ogromną ilość czasu dzięki poprawkom i początkowemu projektowaniu, wykonując rzeczy na żywo za pomocą elementu kontrolnego bezpośrednio na mojej stronie programistycznej Divi. Mogę też często wprowadzać zmiany i poprawki w witrynach, gdy rozmawiam przez telefon z klientami. Możesz wyglądać jak prawdziwa gwiazda rocka projektanta stron internetowych, gdy klient poprosi Cię o zmianę kilku rzeczy, a Ty to zrobisz, rozmawiając z nim przez telefon lub w ciągu kilku minut.

Teraz znowu ten proces projektowania jest tym, co działa dla mnie jako sklepu jednoosobowego. W zespole proces musi działać dla wszystkich zaangażowanych. Ale większość niezależnych projektantów stron internetowych jest mieszanką projektanta / programisty, więc rób każdy proces, który działa dla Ciebie, działa dla Twoich klientów i oszczędza Twój czas!

2) Korzystanie z biblioteki Divi i twojej poprzedniej pracy

Jedną z moich ulubionych funkcji Divi jest możliwość zapisywania układów i projektów stron. Ta funkcja zmienia zasady gry i może zaoszczędzić trochę czasu podczas projektowania i programowania w Divi. W ostatnim odcinku DiviChat panel mówi o zapisywaniu wielu szablonów projektów stron, a następnie usuwaniu tych, których nie używają w nowej witrynie. Porozmawiaj o sposobie na zaoszczędzenie czasu! Jeśli potrafisz wymyślić serię układów stron i szablonów stron, a wszystko, co musisz zrobić, to importować i zmieniać zawartość, kolory i obrazy, oszczędzasz godziny potencjalnego projektowania i rozwoju.

Oto 3 krótkie wskazówki, które zaoferuję, jeśli chodzi o zapisywanie elementów biblioteki Divi i wcześniejszej pracy:

  1. Zapisz swój CSS – mam „główny arkusz stylów” z większością kodu CSS, który napisałem dla niektórych modułów, sekcji stron i klas, które chcę naśladować w innych witrynach. W ten sposób mogę go otworzyć i pobrać dowolny kod, którego chcę użyć w bieżącym projekcie. Zdziała cuda, oszczędzając czas, zamiast ciągłego przepisywania wierszy CSS.
  2. Twórz elementy biblioteki Divi — zapisywanie układów jako elementów biblioteki może być świetnym sposobem na zapisanie pracy na stronach lub jako pełną witrynę, którą można powielać i łatwo zmieniać za pomocą obrazów i kolorów. Jeśli nie wiesz, jak to zrobić, skorzystaj z tego samouczka.
  3. Eksportuj pliki json – często mam klientów, którzy będą odwoływać się do strony z poprzedniej witryny, więc zamiast odtwarzać ją od podstaw, często eksportuję tę stronę ze starej witryny, importuję ją do mojej nowej witryny i odpowiednio dostosuj style i obrazy! Ponownie, kolejny świetny sposób, w jaki Divi oszczędza nam czas w procesie projektowania i rozwoju. Więcej szczegółów na ten temat tutaj, jeśli nie jesteś zaznajomiony.

3) Ujawnianie swojej witryny klientowi

Jest to moim zdaniem jeden z najważniejszych, ale pomijanych i niedocenianych aspektów projektowania stron internetowych. Tak wiele zależy od pierwszego wrażenia i tego, co klient myśli na początku, gdy zobaczy Twój nowy projekt. Jeśli robisz makietę lub szkielet, oczywiście pierwsze wrażenie będzie nieco rozczarowujące, dopóki klient nie zobaczy wersji online, która jest całkowicie zrozumiała i znowu może działać w zależności od złożoności twojego procesu od projektu do rozwoju. Jak widzieliście w powyższym procesie, przygotowuję nagłówek i stopkę oraz projektuję stronę główną w całości wraz z typowo jedną podstroną lub kilkoma w zależności od potrzeb projektu, a następnie przesyłam do recenzji. Sposób, w jaki wysyłam klientowi, mój pierwotny projekt zmienił się ostatnio, ze świetnym skutkiem.

Kiedyś po prostu wysyłałem link do programowania na żywo, aby klient mógł sam obejrzeć witrynę, w wolnym czasie. Działało to całkiem nieźle, ale odkryłem, że rzadko zdarza mi się zrobić podgląd osobiście lub przez Skype, te pierwsze wrażenia poszły jeszcze lepiej i dlaczego? Wierzę, że dzieje się tak dlatego, że klient usłyszał moją wizję, gdy zobaczył witrynę, co pozwoliło mi na zapoznanie się z moimi pomysłami na projekt, kolor i estetykę bez wcześniejszego osądzania.

Teraz tworzę krótki (zwykle mniej niż 5 minut) film podglądowy, na którym chodzę po witrynie! Jak dotąd spotkało się to z bardzo pozytywnymi opiniami. Czy to trochę czasochłonne, ale uważam, że warto uzyskać niesamowite pierwsze wrażenie od moich klientów.

Oto zrzut ekranu pokazujący, jak pokazuję nową witrynę klientowi na Basecamp:

Nagrywam filmy instruktażowe za pomocą Screenflow na Maca. Następnie przesyłam film na mój kanał Vimeo i robię z niego prywatny film. Stamtąd, jak widać na powyższym zrzucie, wysyłam klientowi link do filmu wraz z krótkim opisem, wypunktowaną listą tego, czego można się spodziewać w dalszej kolejności, oraz faktycznym adresem URL witryny dewelopera, który klient może zobaczyć w swojej przeglądarce po obejrzeniu filmu.

Oto kilka moich ostatnich filmów poglądowych, jeśli chcesz zobaczyć, jak prezentuję nowe witryny klientom:

Podgląd witryny wideo 1

Wideo podglądu witryny 2

4) Obsługa poprawek i edycji

Wreszcie, główną częścią procesu projektowania i rozwoju będzie sposób obsługi poprawek i edycji klienta. Jeśli projektujesz strony internetowe od dłuższego czasu, wiesz, że ten proces może być czasochłonny. Spotkania osobiste, przedłużone rozmowy telefoniczne i losowe wiadomości e-mail z niewielkimi zmianami tu lub tam mogą być ogromną stratą czasu w procesie edycji i weryfikacji.

Jest kilka sposobów na zwalczenie tego. Staram się, aby wszyscy moi klienci opublikowali wszystkie swoje poprawki (w razie potrzeby na stronie) w Basecamp, gdzie tworzę dyskusję na temat poprawek. Wyrażam zgodę na telefon lub spotkanie osobiste w razie potrzeby, ale dopiero po przesłaniu wstępnych zmian w sposób, w jaki chcę je najpierw otrzymać. BARDZO jasno zaznaczam, że nie chcę otrzymywać poprawek pojedynczo, przez wiele dni za pośrednictwem poczty elektronicznej. Jeśli to możliwe, mówię moim klientom, aby zebrali je w ciągu kilku dni i opublikowali je wszystkie na raz lub jak wielu moich klientów lubi, aby uporządkować je wszystkie w formacie .doc lub .pdf.

Wracając do poprzedniego postu z tej serii i mojej rozmowy z chłopakami z Artillery Media, mają bardzo uproszczony proces poprawek, w którym wymagają, aby ich klienci wysyłali swoje zmiany w dokumencie na Dysku Google, aby mogli następnie wprowadzać zmiany wszystko na raz. To także duża oszczędność czasu. Sztuczka polega na tym, aby proces edycji i poprawek działał dla Ciebie w jak najbardziej oszczędzający czas sposób. I tylko słowo rady, każdy klient ma swój własny sposób robienia rzeczy, więc Twoim zadaniem jest poprowadzić ich, jak chcesz poprawiać i edytować

W zamknięciu

Cóż, mam nadzieję, że te pomysły i mój proces projektowania/rozwoju zachęciły Cię do stworzenia własnego, jeśli nie masz jeszcze standardowego procesu! Jeśli masz jakieś procesy, które działają dobrze dla Ciebie, daj nam znać w komentarzach poniżej!

Następny w górę: Jak skutecznie zarządzać wieloma projektami Divi Web Design

Kiedy masz wiele projektów, trudno zarządzać nimi wszystkimi, zachowując kreatywność, żonglując terminami i spełniając oczekiwania klientów. W naszym ostatnim poście z tej serii omówimy kilka sposobów skutecznego zarządzania wszystkimi projektami Divi Web Design, aby móc zrównoważyć wdrażanie nowych klientów, projektowanie, rozwijanie i przestrzeganie ustalonych terminów na uderzenie. Wszystko przy jednoczesnym zachowaniu kreatywności i świeżości. Do tej pory!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!