Paweł jest tłumaczem i nauczycielem języka angielskiego i chińskiego w Ostrowie Wielkopolskim. Prowadzi firmę InterLingua. Potrzebował strony internetowej, która będzie przedstawiała jego ofertę, cennik oraz dane kontaktowe. Paweł chce prowadzić blog o lingwistyce oraz zaczął aktywnie działać w mediach społecznościowych, które chciał połączyć ze stroną. Myślę, że strona iltranstalions.pl spełnia te wymagania.

Brief

---

Paweł nie miał wcześniej strony internetowej, dlatego zaczynaliśmy zupełnie od zera. Musiał wybrać domenę, zastanowić się jakie zakładki potrzebuje na stronie, jakie teksty powinny się na niej znaleźć, czego dokładnie oczekuje od strony oraz jaki jest jej cel.

Paweł musiał zmierzyć się z takimi pojęciami jak identyfikacja wizualna, hosting, sidebar i footer. Rozumiem, że nie dla wszystkich są one jasne, dlatego w formularzu, który wysyłam do klienta przed stworzeniem strony, wszystkie je wyjaśniam.

Jeśli zastanawiacie się, co należy przemyśleć, zanim zlecicie wykonanie strony internetowej, zapraszam na wpis na blogu, który w całości poświęciłam tej tematyce.

Prace przygotowawcze

---

Po otrzymaniu wypełnionego formularza, mogłam przystąpić do pracy.

Zaczęłam od ustalenia architektury strony. W menu miały znaleźć się zakładki: oferta (język angielski i język chiński), cennik, o mnie, blog i kontakt.

Ustaliliśmy w jakich zakładkach będzie pasek boczny z odnośnikami do mediów społecznościowych, a w jakich jest on zbędny i przeszkadza. Zadecydowaliśmy, że stopka będzie miejscem promocji FB, Instagrama i Twittera, który będzie widoczny na każdej podstronie.

Paweł wysłał wstępną identyfikację wizualną. Napisał, że zależy mu na kolorze czerwonym i niebieskim i wysłał dwie przykładowe palety.

Z pomocą narzędzia Color Hexa do czerwonego #b30000 dobrałam idealnie kontrastujący z nim niebieski #0000b3.

Szkic logo, które wysłał Paweł, bardzo mi się spodobał, ale wymagało ono dopracowania. Wyrównałam je, pokolorowałam kolorami z identyfikacji wizualnej, dodałam też nazwę firmy oraz imię i nazwisko. To bardzo ważne, żeby wchodząc na stronę użytkownik wiedział na jakiej stronie jest. Logo to idealne miejsce, które to sygnalizuje. Paweł zaakceptował zarówno kolory, jak i poprawione logo.

Paweł nie miał specjalnych wymagań odnośnie fontów. Stanęło na foncie Lato. Nie wiedział też jakie zdjęcia i grafiki będą najlepiej pasowały, dlatego wybór pozostawił mi. Dostarczył tylko loga firm, dla których pracował. Ja wykonałam wszystkie grafiki i zdjęcia, które są widoczne na stronie oraz dostosowałam rozmiary logo tak, żeby wpasowały się w stronę.

Kiedy upewniłam się, że mam wszystkie teksty, identyfikację wizualną, zakładki i linki do mediów społecznościowych, stworzyłam tablicę w Trello w całości poświęconą projektowi iltranslations.pl.

Makietowanie

---

Zanim przystąpię do pracy bezpośrednio na stronie, rysuję wstępny szkic na papierze. Często różni się od finalnej strony, kiedy zauważę, że układ który wymyśliłam nie sprawdza się na ekranie. Mimo to, lubię od szkicu wyjść, dużo łatwiej i szybciej mi się wtedy pracuje.

Nie projektuję strony w programie graficznym. Robię makietę na papierze, a później pracuję bezpośrednio w WordPressie. Nie jestem programistą, znam podstawy kodowana HTML i CSS, ale nie jestem w stanie samodzielnie zakodować strony od zera.

Bazuję na motywach dostępnych w WordPressie (zazwyczaj darmowych) i na page builderach – wtyczkach, które umożliwiają budowanie strony. Uważam, że przy niewielkich stronach typu wizytówka, czy też blogach, to rozwiązanie świetnie się sprawdza. No i jest budżetowe. Stworzenie strony na gotowym motywie jest dużo tańsze niż zatrudnienie grafika, który zaprojektuje stronę, i programisty, który ją zakoduje.

Budowanie strony

---

Zaczęłam od założenia domeny testowej na swoim serwerze i wgrania WordPressa.

Motyw wybrałam na podstawie wymagań Pawła – chciał żeby wpisy na blogu układały się w siatce. Ocean WP to darmowy motyw, który daje wiele możliwości edycji: kolorów, fontów, układów. Jest świetny na początek, dla kogoś, kto dopiero uczy się WordPressa i chce się pobawić tworząc swoją stronę.

Stronę zbudowałam z wtyczką Elementor. Rozumiem zarzuty, że może obciążać stronę. Jestem pewna, że nie sprawdziłaby się na dużym i rozbudowanym serwisie, ale na niewielkiej stronie daje radę. Ma tę wspaniałą zaletę, że po krótkim przeszkoleniu, klient jest w stanie sam dokonywać zmian na stronie. Wtyczka jest bardzo intuicyjna.

Przy budowaniu zakładki blog stworzyłam trzy przykładowe wpisy. Dzięki temu mogłam dopracować sekcję „najnowsze wpisy” na stronie głównej (sekcja teraz niewidoczna, bo Paweł jeszcze nie ruszył z blogiem) oraz mogłam pokazać Pawłowi, jak wpisy będą się prezentowały, zarówno w zakładce Blog jak i na stronie głównej.

Tworząc stronę cały czas miałam na uwadze, że musi ona wyglądać dobrze zarówno na komputerze jak i na urządzeniach mobilnych. Sprawdzałam responsywność na bieżąco.

Poprawki

---

Etap budowania strony trwał nie więcej niż tydzień. Po tym czasie pokazałam Pawłowi stronę. Wprowadziliśmy parę poprawek, między innymi:

• Więcej tekstu na stronie głównej;
• Zmiana tytułów elementów w sidebarze;
• Zmiana tytułów na stronie głównej – np. zamiast „pracuję dla” na „zaufali mi”;

Paweł nie miał zastrzeżeń co do warstwy wizualnej strony.

Przeniesienie strony

---

Zanim przeniosłam stronę, sprawdziłam jeszcze raz, czy wszystko działa jak należy. Sprawdziłam wszystkie odnośniki, linki do mediów społecznościowych, teksty, usunęłam niepotrzebne próbne wpisy oraz grafiki i zdjęcia, które ostatecznie nie były wykorzystane na stronie.

Sprawdziłam jeszcze raz responsywność oraz zmieniłam grafikę, która będzie widoczna po wklejeniu linku iltranslations.pl na Facebooku.

Kiedy upewniłam się, że wszystko jest jak należy, poprosiłam Pawła o wykupienie domeny i hostingu. Poleciłam mu Zenbox, bo sama z korzystam z ich usług i jestem pod ogromnym wrażeniem obsługi klienta. Wysłałam Pawłowi szczegółową instrukcję co i jak ma kupić.

Kiedy wszystko było gotowe, przeniosłam stronę z domeny testowej na iltranslations.pl i po raz kolejny upewniłam się, że strona działa tak, jak powinna.

Zakończenie współpracy

---

Na zakończenie współpracy stworzyłam dla Pawła dwie spersonalizowane instrukcje: jak dodawać wpisy na jego blogu oraz jak aktualizować stronę.

Poinstruowałam go też jak założyć skrzynkę pocztową z własną domeną oraz jak dodać ją do Outlooka.

Bonusowo stworzyłam dla Pawła projekt wizytówki w formacie gotowym do druku oraz grafikę do cover photo na Facebooka. Wszystko zgodne z jego nową identyfikacją wizualną.

Opinię Pawła o współpracy ze mną możecie przeczytać na stronie głównej.