Kroki, które należy wykonać podczas projektowania nowej strony internetowej

Opublikowany: 2021-04-19

Świetne projektowanie stron internetowych polega na połączeniu świetnej estetyki z niesamowitą funkcjonalnością. Aby stworzyć genialnie zaprojektowaną stronę internetową, potrzebujesz szeregu umiejętności, odrobiny kreatywnego talentu i odrobiny organizacji na samym początku!

Ten przewodnik ma na celu pomóc Ci stworzyć genialną stronę internetową. Taki, który świetnie wygląda i działa jeszcze lepiej. Przeprowadzimy przez niektóre kluczowe kroki, które należy podjąć, aby uzyskać najlepszą możliwą witrynę internetową. Zacznijmy!

Cel i badania

Zanim przejdziesz do kreatywnej części procesu projektowania stron internetowych, musisz najpierw ustalić kilka rzeczy. Kluczem jest zrozumienie grupy docelowej. To jest niezbędne. W końcu nie ma sensu poświęcać czasu i pieniędzy na stronę internetową, która nie spełnia potrzeb docelowej grupy demograficznej.

Ten pierwszy krok może być dość trudny. Łatwo założyć, że wiesz, czego chcą Twoi odbiorcy. Jednak poświęcenie czasu na dokładne zbadanie tego na początku może zaoszczędzić wiele czasu na później w projekcie i zwiększyć szanse na sukces Twojej witryny. I nie zapomnij, jeśli projektujesz stronę internetową dla klienta, upewnij się, że angażujesz go w ten proces!

Niektóre kluczowe punkty, które warto wziąć pod uwagę, zwłaszcza jeśli witryna jest przeznaczona dla klienta, to:

Czy witryna jest samodzielnym elementem, czy też stanowi część bardziej kompleksowej strategii marketingowej?
Czy istnieje już silna marka – jeśli tak, to ważne, aby strona to odzwierciedlała. Czasami może to być trudne, ponieważ pokusą może być skupienie się na nowoczesnych trendach projektowych, które niekoniecznie pasują do stylu już ustalonego przez markę. Co ważne, nowa witryna nie wygląda na przestarzałą od samego początku, ale nie może też zbytnio odbiegać od podstawowych zasad projektowania już ustalonych przez markę (chyba że marka jest skłonna do całkowitej zmiany swojego wizerunku).
Bardzo ważne jest również przyjrzenie się konkurencji Twojej lub Twoich klientów. Określ ich mocne i słabe strony, aby upewnić się, że nowa witryna zawiera wszystko, co jest potrzebne do odniesienia sukcesu. Spojrzenie na konkurencję może być również pomocne, ponieważ może zapewnić, że nie przegapisz potencjalnie ważnej funkcji lub funkcji.

Po przeprowadzeniu badań powinieneś mieć pewność, że każda nowa witryna, którą zaprojektujesz, spełni wymagania Twojego klienta (lub oczywiście Ciebie!). Badania mogą czasem wydawać się nużące, zwłaszcza gdy czujesz, że jesteś pełen kreatywnych soków, a chęć rozpoczęcia wyświetlania czegoś namacalnego na ekranie może być przytłaczająca. Nie pomijaj tego kroku, jakkolwiek kuszące. W przyszłości zaoszczędzi Ci to DUŻO czasu.

Oś czasu

Zdecydowanie zaleca się utworzenie harmonogramu prac wymaganych do ukończenia strony internetowej, choć nie jest to obowiązkowe. Kamienie milowe na osi czasu mogą pomóc w wyjaśnieniu procesów wymaganych do przejścia od pustej strony do gotowej witryny internetowej i mogą pomóc w dokładnym cytowaniu projektu na początku. W przypadku większych witryn oś czasu z kamieniami milowymi pozwoli ci wydajniej podzielić pracę między członków zespołu, a każdy będzie mógł zobaczyć, jak ich praca (i terminy!) pasują do ogólnego obrazu.

Pomocne w tym procesie może być użycie narzędzia takiego jak Asana. Dokładne rozbicie każdego wbudowanego elementu strony na zadania sprawi, że nic nie prześlizgnie się przez szczeliny i pozwoli pewniej podać klientowi termin ukończenia strony. Jeśli nowa witryna ma zastąpić istniejącą witrynę, nie zapomnij zbudować na czas, aby zarządzać przejściem „uruchom na żywo”, w którym może być konieczne wprowadzenie przekierowań ze starych stron na nowe i tak dalej.

Wreszcie, zawsze pamiętaj, aby dotrzymać obietnicy i dostarczyć więcej. Witryny, jak większość projektów, zawsze trwają dłużej, niż początkowo można było oszacować, więc dobrą zasadą jest dodanie dodatkowych 20% wartości czasu do początkowego oszacowania, aby nie wpaść w starą pułapkę polegającą na tym, że biegasz krótki czas (a zatem prawdopodobnie nie dotrzyma terminu) od samego początku.

Mapa strony

Kolejnym krokiem w procesie projektowania jest stworzenie mapy witryny. Nawet jeśli Twoja witryna jest mała, dobrze jest ją mieć. Mapy witryn nie tylko pomagają w pełni zwizualizować układ nowej witryny (a tym samym zapewniają, że nie przegapisz niczego istotnego lub nie masz mylącej struktury nawigacji), ale także ostatecznie pomagają Google indeksować Twoją witrynę po jej uruchomieniu, co może pomóc w poprawie SEO.

Niektórzy projektanci chętnie szkicują mapę witryny za pomocą swojego ulubionego narzędzia do ilustracji, ale możesz skorzystać z dedykowanego narzędzia do map witryn, takiego jak WriteMaps, aby ułatwić sobie życie.

Szkielety, makiety i prototypy

Wikipedia definiuje szkielet witryny jako „wizualny przewodnik, który reprezentuje szkielet witryny”. Tworzenie makiety strony internetowej jest zwykle pierwszym krokiem podczas projektowania strony internetowej, ponieważ pomagają one uzyskać pewną ważną przejrzystość układu witryny. Modele szkieletowe są również doskonałym narzędziem do wykorzystania podczas omawiania nowej witryny z klientem i zespołem, ponieważ zapewniają znacznie bardziej namacalną wizualizację proponowanego projektu, ale co najważniejsze, można je stworzyć znacznie szybciej niż prawdziwa makieta strony. Pozwala to zainteresowanym stronom na krytykę projektu przed wieloma godzinami zatopionych w witrynie.

Makieta przenosi model szkieletowy na wyższy poziom. Niektórzy projektanci mogą zdecydować się na stworzenie makiety strony, która jest nieco bardziej rozwiniętą wersją szkieletu (prawdopodobnie trzymającą się skali szarości), podczas gdy inni tworzą pełne makiety zawierające obrazy, kolory, a nawet niektóre funkcje. To, jak daleko chcesz popchnąć swoją makietę, będzie zależeć od tego, jak pewny jesteś w proponowanym projekcie. Jeśli uważasz, że klient może nadal chcieć zmienić znaczną część projektu witryny, to wyraźnie ma sens, aby makieta była tak prosta, jak to konieczne, aby przekazać proponowany projekt/funkcję.

Gdy Ty i Twój klient macie zaufanie do projektu, możecie stworzyć pełną makieta, która w pełni pokazuje projekt strony lub całej witryny.

Istnieje wiele narzędzi online, które mogą znacznie przyspieszyć proces tworzenia makiet. Należą do nich Mockflow i Moqups, z których oba mogą przenieść Cię z modelu szkieletowego do pełnej makiety witryny.

Nawet jeśli makieta nie pozwala w pełni przekazać funkcji strony internetowej, zapewnia, że Ty, Twój zespół i klient jesteście w 100% na tej samej stronie, jeśli chodzi o projekt witryny. I, jak wie każdy z nas, którzy zarabiają na życie, kodując witryny, o wiele łatwiej jest zmienić projekt witryny w makiecie niż w samej ostatecznej witrynie!

Ostatnim krokiem, jaki możesz chcieć podjąć, jest zbudowanie prototypowej strony internetowej. Tradycyjnie byłoby to czasochłonne (i prawie tak samo, jak budowa samego ostatecznego miejsca). Jednak dzięki narzędziom takim jak Framer teraz łatwiej niż kiedykolwiek można przenieść swoje makiety na wyższy poziom, wprowadzając elementy funkcjonalne do projektu makiety, co pozwala klientowi naprawdę „wyczuć” działanie witryny.

Na koniec tej sekcji warto pamiętać, że zbyt duży wybór może być złą rzeczą. Ostatecznie, bez względu na to, co powie klient, jesteś ekspertem od projektowania i w połączeniu ze swoim zespołem prawdopodobnie najlepiej zrozumiesz, co zapewni optymalny efekt w projekcie strony internetowej. Z tego powodu czasami lepiej jest przedstawić kolory i układ, które Twoim zdaniem będą najlepsze, i nie mylić rzeczy, zapewniając również szereg opcji, z których klient może wybrać. Pozwala to uniknąć sytuacji, w której klient „wybiera i wybiera” spośród elementów, które w połączeniu mogą nie być kompatybilne. Mniej czasem zdecydowanie może oznaczać więcej!

Pisanie świetnych treści

Bez względu na to, jak dobry jest projekt strony internetowej, ostatecznie nie ma to znaczenia, jeśli kopia na stronie nie przekazuje pożądanego komunikatu. Z tego powodu doskonałą praktyką jest zaangażowanie copywritera w projekt od samego początku. Mogą pomóc w tworzeniu treści, które naprawdę zaangażują czytelnika, a następnie możesz z nimi współpracować, aby zapewnić, że zostaną one umieszczone w witrynie w optymalny sposób.

Na przykład copywriter może wymyślić niesamowity slogan, który w jednym zdaniu przedstawia produkt/usługę. To oczywiście ważna informacja, ale jeśli zaangażujesz copywritera tylko na końcowym etapie projektu, może się okazać, że nie projektowałeś w odpowiednim miejscu do wyświetlania tego tekstu. Oczywiście byłby to duży błąd.

Copywriting to często pomijany element strony internetowej. Wszyscy jesteśmy wciągnięci w atrakcyjność wizualną, ale kopia może stać się dodatkiem „w ostatniej chwili”, który nikomu nie sprzyja.

Innym powodem, dla którego warto zaangażować copywritera od samego początku (jeśli miałeś wątpliwości), jest zapewnienie optymalizacji witryny pod kątem SEO. Kopiowanie może spowodować lub zepsuć SEO witryny, więc jeśli uważasz, że nie jest to ważne, pomyśl jeszcze raz! Używając słów kluczowych i fraz kluczowych we właściwy sposób, jest bardziej prawdopodobne, że wyszukiwarki nadadzą Ci wyższy priorytet w SERP. Istnieje kilka świetnych narzędzi, które pomagają ulepszyć SEO, takie jak Planer słów kluczowych Google, Pająk SEO Screaming Frog, Trendy Google i wiele innych.

A jeśli nie masz luksusu zatrudniania copywritera i myślisz o „robieniu tego sam”, możesz chcieć sprawdzić kilka zasobów i narzędzi do pisania, które mogą ułatwić Ci życie. Pierwszym narzędziem wartym uwagi jest Grammarly, który jest łatwym w użyciu asystentem pisania. Grammarly może pomóc w uniknięciu literówek, a także ulepszyć sposób formatowania tekstu (z perspektywy lingwistycznej), pomagając zapewnić jak największą czytelność tekstu.

Drugie, które sugerujemy, to mniej narzędzie, a bardziej zasób marketingowy o nazwie Storybrand. Storybrand prowadzi warsztaty, które pomogą Ci „doprecyzować swój przekaz”. W ten sposób możesz zwiększyć sukces swojej strony internetowej, wzmacniając komunikat, jaki przekazuje o Twojej firmie w jasnych, jednoznacznych słowach. Jeśli ich warsztaty są zbyt drogie, sprawdź książkę na temat ich ram marketingowych.

Wizualizacje

Pierwszą rzeczą, która prawdopodobnie uderzy w mózg odwiedzającego witrynę, są wizualizacje na stronie! Nie trzeba dodawać, że są one zatem bardzo ważne.

Bez wątpienia jako projektant będziesz miał konkretne przemyślenia na temat rodzaju wizualizacji, których chcesz użyć. Mogą to być animowane rysunki, zdjęcia produktów lub zdjęcia przedstawiające markę i jej produkt. Niezależnie od tego, czego zdecydujesz się użyć, upewnij się, że te wizualizacje są wysokiej jakości, w przeciwnym razie wszystkie Twoje wysiłki zostaną zmarnowane.

Wizualizacje to kluczowe obszary, w których możesz mieć nadzieję, że naprawdę wyróżnisz się na tle konkurencji. Nie zmarnuj tej okazji! Przed wyceną i akceptacją projektu upewnij się, że omówiłeś z klientem wizualizacje, które chcesz wykorzystać. Dowiedz się, czy mają własną bibliotekę obrazów, z której możesz skorzystać, a może planują sesję zdjęciową, aby uzyskać niezbędne zdjęcia. Jeśli tak nie jest i nie masz pod ręką obrazów odpowiedniej jakości, czy możesz znaleźć rozsądne „ogólne” obrazy w bibliotekach zdjęć, takich jak Shutterstock?

Na koniec, na etapie rozwoju, zwróć uwagę na rozmiary tych obrazów i upewnij się, że są one zoptymalizowane, aby nie spowalniały witryny. Korzystanie z narzędzia takiego jak TinyPNG jest opłacalne lub alternatywnie Twój host może świadczyć równoważną usługę, taką jak narzędzie Image Smacing, którego używamy w Pressidium.

Gdy układ jest gotowy, skopiuj napisane i odpowiednie obrazy na miejscu, osiągnąłeś ekscytujący kamień milowy… rozwój! Rzućmy okiem na to, co to oznacza i na niektóre pułapki, na które należy uważać.

Rozwój

O ile nie zajmujesz się kompilacją samodzielnie, nadejdzie czas, aby wysłać projekt witryny do programistów, aby zrobili swoje. Im jaśniejszy projekt, a także opis wszelkich dodatkowych funkcji, których potrzebujesz, tym łatwiej będzie programistom dostarczyć wizualizowaną przez Ciebie witrynę. W tym miejscu prototypowa witryna stworzona za pomocą narzędzia takiego jak Framer może naprawdę zaistnieć.

Podczas kompilacji wielu programistów zapewni linki programistyczne, które można przekazać klientowi, aby mogli zobaczyć, jak nadchodzi kompilacja. Na pierwszy rzut oka wydaje się to dobrym pomysłem, ponieważ zawsze fajnie jest móc zademonstrować, że prace są w toku (szczególnie, jeśli klient wywiera presję, aby wykonać witrynę!). Wielu programistów tworzy linki programistyczne, aby pokazać klientowi, że prace są w toku.

Jeśli masz ochotę to zrobić, zatrzymaj się i zastanów, czy to naprawdę dobry pomysł. Większość klientów nie rozumie przepływu pracy, który będzie śledzić programista i prawdopodobnie wróci do Ciebie z dowolną liczbą zapytań, a może nawet prośbami o zmianę. Konieczność radzenia sobie z nimi na tym etapie jest nieproduktywna i może być sporą stratą czasu, więc najlepiej poczekać, aż ostateczna strona będzie gotowa, zanim usiądziesz z nimi w celu pełnego przeglądu.

Testowanie jakości

Gdy ostateczna strona jest gotowa do uruchomienia, nadszedł czas na sprawdzenie, zanim rozważysz uruchomienie. Mogą one być dość obszerne i warto stworzyć listę kontrolną wielokrotnego użytku, którą można odhaczyć, aby upewnić się, że nic nie zostanie pominięte. Niektóre z rzeczy, które możesz chcieć sprawdzić (w dowolnej kolejności), to:

Walidacja HTML i CSS: Sprawdź poprawność kodu HTML i CSS za pomocą narzędzi takich jak W3C HTML Validator i CSS Validator. W3C zapewnia również narzędzie do sprawdzania internacjonalizacji, które pomaga sprawdzić, czy Twoja witryna może być łatwo przetłumaczona na inne języki.
Linki: na tym etapie ważne jest, aby sprawdzić, czy wszystkie linki wewnętrzne i zewnętrzne działają prawidłowo.
Gramatyka i pisownia: Mam nadzieję, że tekst został skopiowany i wklejony z dokumentów dostarczonych przez Twojego copywritera, powinno być w porządku. Niemniej jednak mogą wystąpić wpadki, więc ponowne przeczytanie jest warte czasu.
Formularze: Sprawdź te prace zgodnie z oczekiwaniami i przyjdą wszelkie zgłoszenia. Zaleca się ponowne przetestowanie tych formularzy po uruchomieniu witryny, a następnie poinstruowanie klienta, aby zaplanował przyszłe testy, być może co miesiąc.
Czasy ładowania: szybka strona internetowa jest koniecznością. Narzędzia takie jak WebPageTest, GTMetrix, PageSpeed Insights czy Pingdom można wykorzystać do sprawdzenia, czy czasy ładowania są przyjemne i szybkie. Jeśli Twoja witryna jest hostowana na serwerze deweloperskim, który nie będzie używany jako serwer na żywo, będziesz chciał ponownie przetestować, gdy witryna zostanie uruchomiona.
Responsywność mobilna: upewnij się, że Twoja witryna wyświetla się poprawnie na wszystkich rodzajach urządzeń. W tym celu możesz użyć narzędzia takiego jak BrowserStack.
Funkcjonalność: Jeśli masz w swojej witrynie bardziej zaawansowane funkcje niż takie, jak formularz kontaktowy, będziesz chciał dokładnie przetestować te funkcje. Na przykład, jeśli uruchamiasz witrynę WooCommerce, prawdopodobnie proces testowania będzie musiał być bardziej intensywny niż w przypadku witryny w stylu broszury. Na przykładzie WooCommerce przetestuj bramki płatnicze, funkcjonalność koszyka, jak działają takie rzeczy jak kody promocyjne i tak dalej. Testuj test i testuj jeszcze raz!
Kontrola wizualna: spójrz na spójność swojej palety kolorów i odstępów, marginesów, dopełnień itp. To samo dotyczy typografii i pozycjonowania obrazów, rozdzielczości i optymalizacji.
Zachowanie przeglądarki: Następna na liście jest sprawdzanie zachowania witryny w wielu przeglądarkach i urządzeniach.
SEO: Sprawdź ponownie swoje SEO! Obejmuje to wszystkie elementy Twojej struktury semantycznej, takie jak nagłówki, akapity, listy i inne rodzaje tagów, których możesz używać, a także tytuły i opisy meta, a także ustawienia Open Graph dla mediów społecznościowych.

Jeśli jesteś zadowolony, że Twoja witryna działa zgodnie z oczekiwaniami i wygląda tak dobrze, jak oczekiwałeś, możesz pomyśleć, że jesteś gotowy do uruchomienia. Sugerujemy, że w rzeczywistości masz teraz około 5 osób, które nie były zaangażowane w projekt, aby przetestować również Twoją witrynę. Idealnie byłoby, gdyby ci użytkownicy byli również mniej „zorientowani na technologię” niż Ty. Zdziwiłbyś się, co może wychwycić świeża para oczu. W ten sposób można uniknąć problemów z „prawdziwymi” klientami po uruchomieniu i dać możliwość dalszej poprawy przepływu witryny.

Początek

To jest to! Najlepiej uruchomić witrynę w porze dnia, w której ruch jest prawdopodobnie niewielki. Korzystanie z dostawcy DNS, takiego jak Cloudflare, może pomóc uniknąć problemów z buforowaniem DNS. Najlepiej też uruchomić program, gdy programista jest pod ręką, aby mógł wkroczyć i pomóc, jeśli coś pójdzie nie tak.

Teraz jesteś na żywo, upewnij się, że poświęcisz trochę czasu na ponowne sprawdzenie witryny i nie martw się, jeśli znajdziesz jakieś usterki! Prawie niemożliwe jest uniknięcie upadku czegoś, ale miejmy nadzieję, że użycie dokładnej listy kontrolnej pomoże upewnić się, że większość głównych elementów działa zgodnie z oczekiwaniami.

Wniosek

Zaprojektowanie dobrej strony internetowej to ciężka praca i taka, w której łatwo jest poczuć się trochę zniechęconym wykonywanym zadaniem. Podział pracy na łatwe do opanowania części i naprawdę planowanie rzeczy, zanim zbytnio się w niej utkniesz, może naprawdę pomóc w uczynieniu tego procesu zarówno bardziej udanym, jak i przyjemnym.

Powodzenia!