Na tym etapie dobrze jest ustali\u0107 kamienie milowe projektu i przedstawi\u0107 specyfik\u0119 pracy.<\/p>\n\n\n\n
Krok 2 – Analiza wymaga\u0144 przez zesp\u00f3\u0142<\/h2>\n\n\n\n
Wsp\u00f3lnie z programistami i UX designerami analizujemy dostarczone materia\u0142y. Zapisujemy ewentualne w\u0105tpliwo\u015bci i pytania. Musimy sprawdzi\u0107 czy mo\u017cliwym jest spe\u0142nienie wszystkich wymaga\u0144 klienta w okre\u015blonym czasie i bud\u017cecie. W zale\u017cno\u015bci od tego czy mamy do czynienia z ca\u0142kiem nowym przedsi\u0119wzi\u0119ciem (start-up) czy podmiotem, kt\u00f3ry ju\u017c istnieje na rynku pojawi\u0105 si\u0119 pytanie dot. identyfikacji wizualnej (projekt logotypu, kolorystyka i typografia, szata graficzna ewentualnych materia\u0142\u00f3w drukowanych itp.), kt\u00f3re maj\u0105 te\u017c znaczny wp\u0142yw na ca\u0142y proces.<\/p>\n\n\n\n
Krok 3 – Ponowne spotkanie z klientem<\/h2>\n\n\n\n
Przegl\u0105damy wsp\u00f3lnie z klientem notatki z naszego wewn\u0119trznego spotkania. Precyzujemy szczeg\u00f3\u0142y i ustalamy konkrety. Analizujemy i omawiamy ewentualne kompromisy, kt\u00f3re zapewne trzeba b\u0119dzie poczyni\u0107, aby ka\u017cda ze stron by\u0142a zadowolona.<\/p>\n\n\n\n
Krok 4 – Analiza konkurencji<\/h2>\n\n\n\n
Robimy research serwis\u00f3w o pokrewnej tematyce, aby sprawdzi\u0107 jakie metody i \u015brodki zastosowa\u0142y firmy zajmuj\u0105ce si\u0119 takim samym lub podobnym produktem w budowie swoich serwis\u00f3w. Pozwoli to zapozna\u0107 si\u0119 ze stronami konkurencyjnych firm i skonfrontowa\u0107 to z wymaganiami klienta. Na tym etapie bierzemy pod uwag\u0119 aspekt wizualny, struktur\u0119 serwisu, rozmieszczenie poszczeg\u00f3lnych modu\u0142\u00f3w oraz dodatkowe elementy, kt\u00f3re maj\u0105 wp\u0142yw na atrakcyjno\u015b\u0107 i funkcjonalno\u015b\u0107 serwisu. Oczywi\u015bcie nie wszystkie serwisy mog\u0105 stanowi\u0107 dobry punkt odniesienia wi\u0119c naszym zadaniem jest przefiltrowanie wynik\u00f3w i wybranie tych najlepszych.<\/p>\n\n\n\n
Krok 5 – Zaplanowanie struktury serwisu<\/h2>\n\n\n\n
To jeden z najwa\u017cniejszych krok\u00f3w ca\u0142ego procesu projektowego. Chodzi o ustalenie struktury serwisu czyli sposobu organizacji tre\u015bci na stronie. Jest to o tyle wa\u017cne z punktu widzenia u\u017cytkownika, poniewa\u017c dobrze zaprojektowana hierarchia u\u0142atwi mu nawigacj\u0119 oraz pozwoli szybko dotrze\u0107 w poszukiwane miejsce. Dobrze przemy\u015blana struktura przydatna jest te\u017c z punktu widzenia SEO.<\/p>\n\n\n\n <\/meta>Strona jest wi\u0119c grupowana w zak\u0142adki g\u0142\u00f3wne (lub kategorie) oraz podzak\u0142adki (lub podkategorie). W zale\u017cno\u015bci od wielko\u015bci serwisu dzielimy ten podzia\u0142 na menu g\u0142\u00f3wne oraz stopk\u0119. Czasem jest to trudne, poniewa\u017c klient nie zawsze wie jakie podstrony chcia\u0142by mie\u0107 w serwisie. Dlatego te\u017c maj\u0105c na uwadze zanalizowane strony konkurencyjnych firm oraz wcze\u015bniejsze wymagania klienta nale\u017cy zaproponowa\u0107 jak najlepsze rozwi\u0105zania zostawiaj\u0105c te\u017c sobie margines na zmiany (dodanie\/usuni\u0119cie zak\u0142adki).<\/p>\n\n\n\n Podczas tego etapu warto te\u017c zaprojektowa\u0107 sobie kilka \u015bcie\u017cek dotarcia do jakiej\u015b informacji przez u\u017cytkownika (user flows). W tym przypadku przydatnym wi\u0119c b\u0119dzie rozpisanie przyk\u0142adowych scenariuszy. Dla przyk\u0142adu:<\/p>\n\n\n\n Stworzenie takiego rodzaju \u015bcie\u017cek nie musi by\u0107 praco i czasoch\u0142onne. Wystarczy kartka,d\u0142ugopis i kilka chwil na zastanowienie. Najistotniejsze jest tutaj w\u0142a\u015bnie przeanalizowanie kilku tego typu potencjalnych dzia\u0142a\u0144.<\/p>\n\n\n\n Ustalamy rozmieszczenie poszczeg\u00f3lnych element\u00f3w na stronie (miejsce na tekst, grafiki, odst\u0119py, dodatkowe modu\u0142y itd.). Na pocz\u0105tku jest to menu g\u0142\u00f3wne, szkielet strony g\u0142\u00f3wnej i stopka. Planujemy prac\u0119 tak, \u017ceby najwa\u017cniejsze podstrony serwisu by\u0142y zrobione w pierwszej kolejno\u015bci. Dobrze by by\u0142o gdyby na tym etapie mie\u0107 wiedz\u0119 o docelowej tre\u015bci bo tak naprawd\u0119 ona stanowi istot\u0119 strony. Po to w\u0142a\u015bnie u\u017cytkownik wchodzi na nasz serwis.<\/p>\n\n\n\n Niestety, najcz\u0119\u015bciej zdarza si\u0119, \u017ce takie informacje dostaje si\u0119 na ko\u0144cu, ale mo\u017ce da si\u0119 ustali\u0107 ich orientacyjn\u0105 ilo\u015b\u0107.<\/p>\n\n\n\n Na tym etapie komunikujemy si\u0119 r\u00f3wnie\u017c z programistami \u017ceby to co zaprojektujemy nie nios\u0142o ze sob\u0105 problem\u00f3w na etapie wdro\u017cenia. Czasami najpi\u0119kniej zaprojektowane rozwi\u0105zania nie maj\u0105 odzwierciedlenia w u\u017cywanej technologii. Cz\u0119sto staj\u0105 si\u0119, kr\u00f3tko m\u00f3wi\u0105c, nie przydatne.<\/p>\n\n\n\n Przedstawiamy klientowi efekty dotychczasowej pracy i omawiamy rzeczy, kt\u00f3re si\u0119 podobaj\u0105 oraz takie, kt\u00f3re musimy jeszcze poprawi\u0107. To moment, gdzie tych potencjalnych zmian i ustale\u0144 powinno by\u0107 jak najwi\u0119cej \u017ceby u\u0142atwi\u0107 i uprzyjemni\u0107 prac\u0119 UX designerowi na kolejnym etapie.<\/p>\n\n\n\n Do tego etapu trzeba si\u0119 dobrze przygotowa\u0107. Klient cz\u0119sto mo\u017ce mie\u0107 racj\u0119, poniewa\u017c zna sw\u00f3j biznes i swoich klient\u00f3w. Mo\u017ce te\u017c nie mie\u0107 racji poniewa\u017c nie zajmuje si\u0119 profesjonalnie projektowaniem UX. W takim wypadku trzeba umie\u0107 poprze\u0107 swoje wybory rzetelnymi informacjami, na przyk\u0142ad wynikami bada\u0144 na u\u017cytkownikach.<\/p>\n\n\n\n Po akceptacji prototyp\u00f3w zabieramy si\u0119 za projektowanie graficzne. Ustalamy palet\u0119 barw, kroje font\u00f3w i og\u00f3ln\u0105 estetyk\u0119 projektu. W zale\u017cno\u015bci od rodzaju projektu przygotowujemy wektorowe ikony, grafiki, dodajemy ilustruj\u0105ce teksty zdj\u0119cia. Dbamy o konsekwentny uk\u0142ad element\u00f3w, po to, by programista m\u00f3g\u0142 mo\u017cliwie jak najdok\u0142adniej zakodowa\u0107 zaprojektowany przez nas layout. Wi\u0119cej informacji o tym etapie prac oraz o wsp\u00f3\u0142pracy UI designera z programist\u0105 znajdziesz w naszym artykule: Jak przygotowa\u0107 UI dla kodera?<\/a><\/p>\n\n\n\n Ka\u017cdy gotowy projekt jest sukcesywnie dostarczany do klienta. Wymiana informacji odbywa si\u0119 p\u0142ynnie i wszystkie ewentualne modyfikacje s\u0105 stopniowo adaptowane.<\/p>\n\n\n\n Kiedy klient zaopiniuje pozytywnie projekt, do akcji wchodz\u0105 programi\u015bci, kt\u00f3rzy rozpoczynaj\u0105 pisanie kodu strony.<\/p>\n\n\n\n O tym jak wygl\u0105da wsp\u00f3\u0142praca z Software House przeczytasz w naszym innym artykule: Dlaczego warto wsp\u00f3\u0142pracowa\u0107 z Software House: 6 g\u0142\u00f3wnych powod\u00f3w.<\/a><\/p>\n <\/p> ![\"\"](\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/struktura-en-1.png\")
<\/figure>\n\n\n\n![](\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/marcin-stawowiak-56x56.jpeg\"\n\t\t\t\tclass=\"size-[56px])
\n\t\t\t<\/div>\n\t\n
Krok 6 – Prototyp (projektowanie UX)<\/h2>\n\n\n\n
![\"\"](\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/ux-flow-1.png\")
<\/figure>\n\n\n\nKrok 7 – Analiza gotowych wireframes przez klienta<\/h2>\n\n\n\n
Krok 8 – Projekt graficzny (UI design).<\/h2>\n\n\n\n
![\"\"](\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/ux-u-2.png\")
<\/figure>\n\n\n\nKrok 9 – Wdro\u017cenie (kodowanie).<\/h2>\n\n\n\n
![](\"https:\/\/smultron.software\/content\/uploads\/2024\/01\/681c046dafbd67a84a6a2820a207caa9-e1706629988730-768x515.jpeg\"\n\t\t\t\twidth=\"327\"\n\t\t\t\theight=\"204\"\n\t\t\t\tclass=\"w-full)
\n\t\t\t
Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t<\/ul><\/div>\n