12-20 423

6 kroków projektowania strony internetowej

6 kroków projektowania strony internetowej

12-20 423

Dobrze – po lekturze ostatniego naszego artykułu, pt. “Ile kosztuje strona internetowa?

wybraliśmy już typ witryny, jaki nas interesuje, mamy określony budżet, spisane własne wymagania i potrzeby. Co dalej? Jak podejść do tematu rozmów z grafikami, programistami? Na co się przygotować?

 

W dzisiejszym wpisie uchylimy nieco rąbka tajemnicy, jak od zaplecza powstaje strona internetowa. Nie jest to żadna tajemna wiedza, jednak jak pokazuje nasze doświadczenie – klienci czasem mają wrażenie tworzenia statku kosmicznego 🙂 

Zatem: Jakie kroki należy przejść by otrzymać swoją stronę internetową?

 

  1. Brief – najświętsza świętość

Każdy proces projektowy musi zacząć się z od wyszczególnienia i wyceny wszystkich prac. Bez dobrze określonych potrzeb nawet najlepszy na świecie grafik nie odgadnie co miał na myśli klient prosząc “o prostą stronę www”.

Zwłaszcza jeśli chodzi o szatę graficzną – dobrze wypełniony i uzupełniony o własne przemyślenia brief będzie na wagę złota. Zdajemy sobie sprawę, że przekazanie tego, co widzi się (albo nie widzi… 🙂 ) oczami wyobraźni bywa trudne do zobrazowania. Wierzymy jednak, że szczera rozmowa z doświadczonym grafikiem jest w stanie rozwiać wiele wątpliwości, usystematyzować i poukładać projekt tak, by był on funkcjonalny i w pełni odpowiadający wyobrażeniom klienta. Warto zatem umówić się na spotkanie z działem graficznym i po prostu opowiedzieć o swoim pomyśle.

 

Często bywa tak, że klient nie ma totalnie pomysłu, jak dany projekt może finalnie wyglądać. Nie zrażajmy się – wówczas jako graficy, jesteśmy w stanie tak poprowadzić rozmowę, by dowiedzieć się jak najwięcej i stworzyć odpowiedni dla danej branży layout.

 

Dobrze spisany brief ma także jeszcze jedną zaletę – w przypadku, gdy w trakcie realizacji zdarzy nam się zapomnieć o jakimś elemencie bądź funkcjonalności, zawsze można do niego wrócić i zweryfikować wytyczne co do projektu.

 

W trakcie omawiania briefu, można od razu “pójść za ciosem” i stworzyć z klientem także całościową architekturę informacji i strukturę menu. Jest to dobre rozwiązanie, zwłaszcza jeśli nasz klient jest z innego regionu czy nawet kraju. Im więcej szczegółów uda się nam dograć i ustalić od razu, tym łatwiej i szybciej będziemy w stanie oddać gotową witrynę do użytku.

 

  1. No to zaczynamy! Makiety.

Jeśli wszystkie potrzeby klienta zostały spisane i omówione, można przystąpić do pracy. Przeważnie w odstępie pięciu do dziesięciu dni, grafik jest w stanie przesłać pierwsze szkice, tzw. makiety, do wglądu klienta. 

 

Przy dzisiejszym postępie technologicznym, w dobie takich narzędzi jak Adobe XD, Sketch czy Figma, wysyłany projekt może być klikalny i naśladować wszystkie funkcjonalności oraz wygląd gotowej strony internetowej. Jest to spore ułatwienie, zwłaszcza gdy mamy do czynienia z klientem, który nie jest w stanie sobie wyobrazić pewnych elementów i zachowań, choćby hover, czy animacji.

Co ważne – warto dobrze wytłumaczyć czemu mają służyć i co przedstawiają makiety. W przypadku serwisów, rozbudowanych systemów, pierwsze makiety będą bardzo proste, pozbawione “smaczków i efektów”, co może zrazić albo wręcz przestraszyć klienta. Dobrze jest więc, zadbać o obustronne zrozumienie idei makiet.

  1. Właściwy projekt


    Jeśli wszystkie makiety i ich funkcjonalności zostaną zaakceptowane przez klienta, możemy przystąpić do właściwego zaprojektowania strony, na bazie wypracowanego stylu i rozwiązań. Przeważnie odbywa się to etapowo: projektujemy i przesyłamy projekt strony głównej, do którego klient może zgłosić zmiany i poprawki. Po akceptacji, tworzymy resztę (ustalonych na początku) podstron – przeważnie jest to robione w sposób analogiczny, korzystamy z podobnych wizualnie modułów, tak, by całość witryny była spójna i korespondowała ze sobą. Gdy klient otrzymuje komplet widoków, zgłasza jeszcze ostatnie korekty. Po ich naniesieniu, następuje finalny akcept szaty graficznej. W tym miejscu, graca graficzna w pewien sposób się kończy.

 

  1. Kodowanie strony internetowej

W tym etapie, grafik przekazuje cały projekt i dodatkowe wytyczne, których nie dało się zawrzeć w plikach graficznych, programiście, który koduje stronę w wybranym na początku środowisku. W tym etapie, developer krok po kroku, podstrona po podstronie wdraża witrynę, sprawia by zaczęła ona realnie żyć.

 

Grafik w tej fazie, może, choć nie musi (często tę rolę sprawuje sam project manager) nadzorować wyświetlanie kodowanego projektu – głównie jeśli chodzi o wielkość poszczególnych elementów czy wyświetlanie się poszczególnych wersji na urządzeniach mobilnych.

 

  1. Testowanie

    Ponownie – testy funkcjonalności i poprawności może przeprowadzać project manager, grafik lub specjalnie oddelegowany tester, którego zadaniem jest wychwycenie wszystkich nieścisłości i błędów w wyświetlaniu strony na wszelkich systemach operacyjnych i urządzeniach mobilnych. Logicznym jest, aby kwestie graficzne (czyli np. odległości interlinie, typografia, czy marginesy) weryfikował grafik – który najlepiej będzie wiedział, czy zakodowana strona wizualnie jest 1:1 zgodna z projektem, jaki zaakceptował klient.

 

  1. Oddanie strony do użytku

Klient otrzymuje link roboczy z kompletną witryną, który także, we własnym zakresie może samodzielnie przetestować i przeklikać na dostępnych urządzeniach. Na tym etapie nie ma już miejsca na zmiany polegające na “bo mi się nie podoba ta sekcja, zmieńmy ją” – nie zmieniamy stylistyki, układu treści, czy samych sekcji. 

 

Klient oczywiście może chcieć tutaj zmieniać użyte fotografie, czy podmieniać teksty – po odpowiednim przeszkoleniu, może także rozbudowywać stronę o kolejne podstrony.

Gdy testowanie zostaje zakończone, a całość jest zaakceptowana, nic nie stoi na przeszkodzie, by finalnie opublikować stronę w domenie klienta.

 

Tutaj także, wszystko zależy od początkowych ustaleń – na jakim hostingu i pod jaką domeną witryna będzie widniała, kto będzie odpowiedzialny za przeniesienie (przeważnie robi to agencja, jednak w niektórych przypadkach, przesyłana jest cała paczka zawierająca stronę, którą firmowy informatyk wgrywa na serwer) i wreszcie – kto będzie odpowiedzialny za serwis i aktualizacje zabezpieczeń. 

O takiej usłudze możesz dowiedzieć się tutaj: KLIK! (link do obsługi posprzedażowej)

Filmy

X

06-27 367

Website Safe - Website Style

X

06-24 543

Website Style - Team

X

06-24 643

Website Style - Park Naukowo Technologiczny Gdynia

COPYRIGHT 2011 - 2022 ALL RIGHTS RESERVED