5 kroków do udanego projektowania stron internetowych

Ten artykuł przeprowadzi Cię przez 5 podstawowych kroków do zaprojektowania strony internetowej, a proces projektowania strony internetowej pomoże Ci stać się bardziej wydajnym i skutecznym projektantem strony.

Jednym z najważniejszych czynników dzisiejszej branży projektowej, zwłaszcza projektowania niezależnego, jest udany przepływ pracy w biznesie i robienie więcej przy mniejszym nakładzie czasu. Aby być efektywnym pod względem czasu, musisz poświęcić trochę czasu na zaplanowanie projektu, dzieląc go na podstawowe kroki w celu osiągnięcia pomyślnego wyniku. W ten sposób zwiększasz wydajność.

„Wydajność nigdy nie jest wypadkiem. Zawsze jest wynikiem zaangażowania w doskonałość, inteligentne planowanie i skoncentrowany wysiłek. ”~ Paul J. Meyer

Każdy projektant ma swój własny ulubiony proces projektowania. W tym artykule wyjaśnię mój sugerowany efektywny czasowo proces projektowania, który działa dla mnie za każdym razem. Ten artykuł jest skierowany do początkujących w branży projektowania stron internetowych, a nie do doświadczonych projektantów. Celem artykułu jest przedstawienie ogólnego 5-etapowego przewodnika po udanym projekcie strony internetowej.

Krok 1: Potrzeby klienta

Zanim zaczniesz planować, będziesz potrzebował jak najwięcej informacji od swojego klienta. Im więcej wiesz, tym więcej e-maili w obie strony będziesz zapisywać.

Posłuchaj ich pomysłów

Zwykle klienci nie powiedzą ci, czego chcą, od Ciebie zależy, czy chcesz ich zapytać. Chcą mieć pewność, że ich zwyczaje zostaną spełnione w sposób, w jaki to wizualizowali, ale trudno im wyjaśnić, jak widzą swoją przyszłą stronę internetową. Najlepszym sposobem na rozwiązanie tego problemu jest komunikacja. Niezbędne jest poznanie klientów projektujących strony internetowe, zadając pytania, które powiedzą o ich działalności. Chcesz dowiedzieć się, na czym polega ich nastrój, co lubią i czego nie.

Kwestionariusz klienta

Moim ulubionym podejściem do poznania mojego klienta jest wypełnienie formularza. Wymień najważniejsze pytania, które pomogą Ci rozpocząć projekt. Jaki jest cel tej witryny? Kto jest grupą docelową? Kim są twoi konkurenci? Jakie działania mają podjąć użytkownicy? Itd .. Formularz nie powinien przekraczać 10 pytań, ponieważ bądźmy realistyczni, nie wszyscy klienci mają czas i cierpliwość, aby wypełnić 20 lub 30 pól. Pamiętaj, aby wysłać klientowi swój formularz, zanim zaczniesz przygotowywać projekt, a nie po nim. Jeśli chcesz zobaczyć przykład, możesz sprawdzić ten formularz. Ze względu na dostępność i łatwość użytkowania polecam skonfigurować formularz w Google Drive Forms.

Teraz, gdy klient wypełnił formularz, możesz wysłać swoją propozycję i sfinalizować formalne porozumienie w sprawie budżetu, zakresu projektu, harmonogramu i własności. Po podpisaniu umowy nadszedł czas na pracę.

Krok 2: Badania, pomysły i szkic

Ten krok jest zawsze najtrudniejszy. Kiedy po raz pierwszy zacząłem w branży, skakałem do Photoshopa i zacząłem projektować. Nie potrafię wystarczająco podkreślić, jak to źle. Najlepiej zacząć od kartki papieru.
Zacznij szkicować

Jeśli jesteś projektantem, a nie masz osobistego notatnika, lepiej udaj się do najbliższej biblioteki. Zapisywanie notatek za pomocą pióra i papieru jest najskuteczniejszym sposobem, jeśli chodzi o jakąkolwiek aktywność wymagającą burzy mózgów.

Poświęć trochę czasu i zacznij szkicować każdy pomysł, który wpadnie ci do głowy. Nie musisz wiedzieć, jak rysować. Możesz zacząć od koła, a twoje pomysły będą płynąć naturalnie. Możesz być w taksówce w drodze do pracy, a kreatywny pomysł może pop. Zapisz to.

Skompiluj swoją inspirację

Utwórz folder zakładek z nazwą projektu. Rozpocznij badania, a następnie zapisz dowolną stronę internetową, którą uznasz za odpowiednią. Upewnij się, że nie kopiujesz dokładnych elementów lub pomysłów, ponieważ zostanie to uznane za plagiat. Znajdź najlepiej wyglądające witryny i układy w oparciu o potrzeby klienta i wyszukaj inne witryny w tej samej firmie. Zapisz to, co lubisz i czego w nich nie lubisz. Układy, kolory, kształty, animacje .. Wszystko, co da Ci pomysły i inspiracje do następnego kroku.

Poznaj swoich konkurentów

Przyjrzyj się dobrze stronom internetowym swoich konkurentów. Sprawdź wszystkich lokalnych i międzynarodowych konkurentów i ucz się z ich treści. Co oni wszyscy mają ze sobą wspólnego? To jest to, co powinieneś umieścić na swojej stronie. Czego brakuje? Właśnie to możesz poprawić w swojej witrynie.

Krok 3: Modele szkieletowe

Modele szkieletowe to projekt Twojej witryny. To daje twojej stronie wizualną strukturę. Niektórzy projektanci mają tendencję do umieszczania elementów projektu w swoich modelach szkieletowych. Powinno się tego całkowicie unikać, ponieważ rozprasza to cel szkieletów, czyli określa, gdzie się dzieje, a nie jak rzeczy wyglądają. Modele szkieletowe powinny być w skali szarości, aby skupić się tylko na układzie.

http://sanrahpo1.pl/tworzenie-stron-internetowych
http://sanrahpo1.pl/tworzenie-stron-siedlce
http://sanrahpo1.pl/tworzenie-stron-warszawa
http://sanrahpo1.pl/strony-www-krakow
http://sanrahpo1.pl/strony-www-lodz
http://sanrahpo1.pl/strony-www-poznan
http://sanrahpo1.pl/strony-www-gdansk
http://sanrahpo1.pl/strony-www-szczecin
http://sanrahpo1.pl/strony-www-bydgoszcz
http://sanrahpo1.pl/strony-www-lublin
http://sanrahpo1.pl/strony-www-bialystok

Pierwsze podejście do modelu szkieletowego to tak, pióro i papier. Wymień wszystkie elementy, które chcesz umieścić na stronie internetowej. Następnie ułóż je na stronie.

Umieszczenie elementu

Nie możesz uruchomić swojej witryny bez wiedzy o tym, co się dzieje. Tutaj decydujesz o tym. Możesz nawet spotkać się z klientem, aby omówić najlepsze miejsce na treść.

Hierarchia informacji

Mapa witryny z listą linków może być przytłaczająca dla klienta, a nawet projektanta. Układając mapę witryny, będziesz mógł zobaczyć, w jaki sposób strony układają się na miejscu, co pozwoli ci na dokonanie regulacji, zanim zajdziesz za daleko.

Interaktywność

Tworząc szkielet, musisz zadać sobie pytanie: jak te elementy będą ze sobą oddziaływać? Czy odwiedzający podejmie działania, które chcę, aby zrobił? W jaki sposób użytkownik poruszy się po witrynie? Oto, gdzie doświadczenie użytkownika odgrywa swoją rolę. Więc stworzyłeś swój układ. Następnie utworzysz swój interfejs.

Krok 4: Styl płytek

Płytki stylów (zwane również przewodnikami po stylach) to elementy projektu, składające się z czcionek, kolorów i elementów interfejsu, które przekazują istotę wizualnej marki dla sieci. Płytki stylów oparte są na wizualnych dyskusjach preferencji z klientem. Zwykłe elementy to logo, typografia, kolory i ton głosu. Oto dwa szybkie przykłady kafelków stylów.

Od koncepcji do wizualizacji

Komponowanie kafelków stylu przełoży nastrój, odczucia i ton Twojej witryny w oparciu o to, czego nauczyłeś się na potrzeby swojego klienta. Pomoże ci dokonać wyborów dotyczących sposobu wykorzystania elementów projektu w sposób zrozumiały dla klienta.

Utrzymuj spójność

Dzięki kafelkowi stylu możesz zachować wygląd i wrażenie, tworząc zestaw reguł, które są zgodne z projektem. Proces staje się elastyczny, łatwy do utrzymania i spójny.

Czas efektywny

Projektowanie płytek stylu pokaże klientowi skórę strony. Zamiast tworzyć pełną zaprojektowaną witrynę w określonym stylu, teraz możesz szybko i sprawnie aktualizować kafelki stylu za pomocą żądań klienta. Teraz, kiedy zaprojektowałeś swoją skórę. Następnie zastosujesz go.

Krok 5: Prototyp

Projektowanie strony internetowej jest bardzo podobne do budowania domu; plany pięter są modelami szkieletowymi, a wizualna aranżacja wnętrz to płytki w twoim stylu. Wspaniałą rzeczą w tym procesie projektowania jest łatwość tego kroku. Komponując szkielet i płytki stylów, wszystko, co musisz zrobić, to połączyć je razem. Tutaj zaczniesz widzieć, jak będzie wyglądać Twoja witryna.

Prototypowanie oznacza budowanie modelu strony internetowej przed zbudowaniem rzeczywistej strony internetowej. Niektórzy projektanci lubią projektować swoje prototypy w Photoshopie, podczas gdy inni lubią pomijać Photoshopa i przenosić się do struktury internetowej, takiej jak inVision i UXpin.

Prototypowanie opiera się na 3 etapach:

Prototyp

Zaimplementuj kafelki stylów w układzie, jednocześnie dostosowując doświadczenie użytkownika i zapewniając łatwość użycia.

Test

Ten krok jest niezbędny, ponieważ ocenia, czy witryna spełnia potrzeby i oczekiwania klienta. Możesz nawet udostępniać prototyp swoim użytkownikom, aby przetestować swoją interaktywność i wrażenia użytkownika.

Dostroić

Tutaj możesz udoskonalić wszelkie zmiany i elementy, które wymagają ulepszenia. Ten proces może zająć trochę czasu w zależności od liczby cykli, które ty użytkownik / klient zajmie się ostatecznym polerowanym projektem.

Kończąc

Teraz powinieneś mieć pomysł na najlepszy proces udanego projektowania stron internetowych. Postępując zgodnie z tym tokiem pracy, możesz teraz planować swoją witrynę, zapobiegać niespodziankom, które mogą blokować przepływ pracy, a co najważniejsze unikać czasochłonnych projektów.

Następnym krokiem będzie część rozwojowa. Jeśli masz umiejętności rozwijania swojej witryny, proces powinien być Ci znany. Jeśli nie, należy zatrudnić programistę. W kolejnych artykułach wyjaśnię samouczki krok po kroku dla każdej sekcji wymienionej w tym samouczku. Bądźcie czujni!