Projektowanie stron i UI/UX
11 godz. 24 min · UI, UX i Webdesign
Grzegorz RógIdea ArchitectPoznasz podstawowe zagadnienia związane z funkcjonowaniem stron WWW w sieci - porozmawiamy o przeglądarce, domenach oraz DNS, wyborze odpowiedniego dostawcy usług hostingowych i najważniejszych parametrach na które należy zwrócić uwagę aby nasza strona WWW mogła skalować się wraz ze wzrostem ruchu. Powiem też o tym jak wygląda podział ról w procesie projektowania a także poznamy podstawowe pojęcia jak serwer i client-side oraz ich najważniejsze technologie html css js, pomówimy o blibliotekach i frameworkach, bazach danych i technologiach serwerowych jak asp net i php. Ta część głównie kierowana jest do osób które stawiają swoje pierwsze kroki w webdesignie i stanowi dopełnienie całego materiału.
Czy wiesz, że aż 25% ludzi na świecie korzysta wyłącznie z urządzeń mobilnych do przeglądania sieci? W tej części kursu będziesz miał okazję zainspirować się nowym podejściem do projektowania w związku ze zmieniającym się ekosystemem urządzeń i technologii mobilnych. Dowiesz się czym jest podejście mobile first oraz jakie są zalety rozpoczęcia procesu projektowego od małych ekranów. Poznasz też aktualne kierunki i trendy związane z wykorzystaniem IOT oraz VR i sensorów. Sprawdzimy statystyki i przygotujemy się do praktycznych aspektów projektowania na wiele ekranów, czyli…
Współczesny proces tworzenia serwisów, czy raczej aplikacji internetowych w ciągu ostatnich lat ewoluował w kierunku sprawnego dostarczania rezultatów i realizacji celów biznesowych w rekordowym czasie. W kursie omówimy dokładnie nowe podejście, wspominając także o metodologii Agile i podejściu Scrum, które z odpowiednimi modyfikacjami zastosujesz do każdego serwisu - niezależnie, czy tworzy go duży zespół osób, czy tylko grafik i programista. Jeśli słyszałeś o Agile UX i Lean UX to prawdopodobnie zainteresuje Cię to w jaki sposób zorganizować pracę tak aby przebiegała ona z nakierowaniem na rezultat. Powiem Ci też jak niemal całkowicie zrezygnować z przestarzałej dokumentacji na rzecz aktywnego angażowania zespołu i właściciela projektu.
Kurs, który masz przed sobą prowadzi Cię w sposób spójny i zrozumiały po kolejnych etapach procesu projektowania stron WWW. Ma on stanowić kompletne źródło wiedzy, do którego będziesz wracał w różnych fazach swoich projektów. Dlatego kolejnym działem jest wyjaśnienie zagadnienia pracy koncepcyjnej i jego pierwszego etapu jakim jest definicja celów oraz stworzenie modelu biznesowego dla powstającej witryny. Pokażę Ci jak zdefiniować cele, akcje oraz funkcje serwisu i jak powinien przebiegać podział tych elementów w fazie koncepcyjnej.
Kolejnym etapem pracy będzie zweryfikowanie tego, czy cele biznesowe serwisu odpowiadają zapotrzebowaniu oraz specyficznym wymaganiom użytkowników. Powiem Ci jak małym nakładem czasu przeprowadzić testy na użytkownikach i wyjaśnię, dlaczego są potrzebne w fazie koncepcyjnej. Zdefiniujemy także użytkowników, do których chcemy kierować swój serwis a także stworzymy persony, które będą towarzyszyć nam podczas kreowania strategii treści dla serwisu.
Ta obszerna część kursu obejmuje niezwykle ważny etap pracy koncepcyjnej, w ramach którego najpierw opracujemy schemat i architekturę treści dla naszego serwisu a następnie zbudujemy relację podstron witryny tworząc tym samym tzw. Sitemapę. Przy okazji pokażę Ci mnóstwo ciekawych narzędzi wspierających ten proces. Zajmiemy się kolejno hierarchią treści i podstron budując tym samym nawigację na naszej stronie. Pokażę Ci także szereg praktycznych, nowoczesnych rozwiązań związanych z nawigacją w serwisie.Kolejno zajmiemy się tworzeniem wizualnego schematu witryny a naszą pracę rozpoczniemy od prostych Wireframe'ów oraz projektowania w oparciu o tekst, by przejść do coraz bardziej zaawansowanych technik pracując nad mockupami oraz prototypami serwisu. Pokażę Ci szereg rozwiązań i narzędzi które będą pomocne również do tworzenia interaktywnych prototypów takich jak UX Pin, Invision czy Adobe Muse.Zbudujemy też tzw. Content Inventory, czyli repozytorium treści, które znajdą się w serwisie. Poznasz sposoby na jego łatwą aktualizację oraz narzędzia chmurowe, które pozwolą na zdalną współpracę nad treścią z innymi autorami.
Zamiast tworzenia klasycznych stron WWW opartych o podstrony, zaproponuję Ci zupełnie nowe podejście bazujące na tworzeniu systemów opartych o komponenty. Poznasz atomy oraz molekuły tworzące gotowy organizm i strony Twojego serwisu i odkryjesz mnóstwo zalet takiego podejścia, które znacznie odciąży Twój serwis i sprawi, że będziesz mógł go łatwo skalować. Pomówimy o graficznych bibliotekach komponentów oraz ich organizacji a także rozwiązaniach opartych o przeglądarkę i HTML oraz CSS. Dowiesz się czym jest Style Guide i jak stworzyć uniwersalne wytyczne do komponentów w Twoim serwisie. Pokażę Ci też najlepiej przygotowane przykłady Style Guide.
Kolejną część kursu poświęcimy na omówienie praktycznych zagadnień związanych z poszukiwaniem inspiracji stylistycznych do projektu. Pokażę Ci narzędzia, które pozwolą w łatwy sposób gromadzić inspiracje w postaci zasobów i tablic a następnie na ich podstawie stworzymy wytyczne do zaprojektowania graficznego UI serwisu. Dowiesz się czym są Style Tiles i dlaczego warto tą część procesu zaplanować w odpowiednim czasie.
To nie wszystko! Jako bonus do tego kursu otrzymasz ponad godzinną lekcję z przeglądem setek serwisów WWW, które zainspirują Cię do dalszej pracy. Przyjrzymy się aktualnym trendom w projektowaniu takim jak Flat UI czy Material Design. Będziesz miał okazję obejrzeć najlepiej zaprojektowane serwisy na Świecie i dowiedzieć się, co sprawia że ich UI i UX są wyjątkowe. To nie wszystko! W ramach kursu otrzymasz darmowe aktualizacje tego materiału w każdym roku tak, abyś mógł dopasować się do zmieniających się trendów!
W kolejnej części kursu porozmawiamy o nowych trendach w zakresie przygotowywania i optymalizacji na strony WWW. Dowiesz się jakie są popularne formaty grafiki, jak możemy zastąpić ją z pomocą typografii czy elementów CSS3 a także jak przygotować pliki na Twoją stronę WWW. Dowiesz się też jak pracować z formatem SVG i popularnymi bibliotekami wspomagającymi pracę z grafiką.Porozmawiamy także o projektowaniu w oparciu o zasoby - przekażę Ci mnóstwo linków do darmowych zasobów jak grafiki - zdjęcia, ikony, czy gotowe zestawy UI przygotowane dla Photoshop, Sketch czy Illustrator, tak abyś mógł pracować wydajniej mając do dyspozycji świetnej jakości źródła.
Kolejna część dotyczy kolorystyki na stronach WWW oraz siatki - poznasz właściwe zastosowania kolorów oraz dowiesz się jak działa psychologia kolorów. Pokażę Ci także szereg narzędzi, które ułatwią i pomogą w wyborze kolorystyki na stronę WWW. Poza tym będziemy także pracować w oparciu o siatkę jako jeden z kanonów projektowania, który łatwo zrozumiesz dzięki aplikacjom optymalizującym pracę na gridzie.
Z kursu dowiesz się także jak skutecznie pracować w zespole. Nieważne, czy jest to zespół składający się z kilkunastu osób pracujących zdalnie, czy z dwóch które ściśle ze sobą współpracują - pokażę Ci jak zautomatyzować procesy oraz jak zarządzać skuteczną komunikacją w zespole z wykorzystaniem nowych, ciekawych narzędzi. Automatyzatory zadań, repozytoria plików, praca w oparciu o chmurę czy biblioteki CC, Slack, OneDrive i wiele innych narzędzi pomoże Ci zrealizować sprawnie zadania projektowe w ramach nowego procesu Parallel Design.
Ostatnia część kursu stanowi wprowadzenie do nowoczesnego SEO, czyli optymalizacji strony pod kątem indeksowania w wyszukiwarkach. Poznasz elementarne składowe procesu zarządzania indeksowaniem oraz sposoby na monitorowanie i analitykę Twojej strony pod tym kątem. Poza tym, będziemy także mówić o promocji strony w sieci, gdzie poznasz podstawowe kanały, którymi warto obecnie docierać do Twoich odbiorców.Jako bonus do kursu znajdziesz również wzory prawidłowo skonstruowanych dokumentów!
Kurs jest przeznaczony dla wszystkich osób, które pracują ze stronami WWW - grafików, programistów, koderów, a także osób które kierują projektami webowymi lub odpowiadają za ich ousourcing w firmach. Jeśli chcesz dowiedzieć się, jak funkcjonują nowoczesne strony WWW - ten kurs jest właśnie dla Ciebie!
Witaj w kolejnej lekcji, w której zajmiemy się następnymi bardzo ważnymi pojęciami.
Mianowicie pomówimy sobie o domenach, serwerach, a także o usługach hostingu,
czyli o tym wszystkim co jest niezbędne do tego aby uruchomić działającą stronę internetową.
To co będziesz potrzebował to przede wszystkim serwer.
Tak jak wspomnieliśmy już przy okazji omówienia technologii Server-Side, jest to niezbędny
element, który umożliwia działanie Twojej strony.
To jest komputer, który po prostu gdzieś sobie działa cały czas i ma on określony adres IP, do którego
użytkownicy mogą wysłać zapytanie z przeglądarki, dzięki temu wyświetlić naszą stronę.
Ten adres IP jest oczywiście dość skomplikowany aby było trzeba za każdym razem go wpisywać w okno przeglądarki,
w związku z tym adresy są przepisywane na adresy domen.
W momencie gdy wykupujemy sobie domenę, przekierowujemy ją na konkretny adres IP
i dzięki takiej sieci serwerów DNS, czyli takich serwerów, które przepisują adresy właśnie na domeny,
użytkownik wpisując np. eduweb.pl może dostać się na nasz konkretny serwer z konkretnym adresem IP.
Zatem na początku porozmawiamy o właśnie hostingu, ponieważ hosting jest usługą polegającą na dostarczaniu rozwiązań
serwerowych dla Twojej strony internetowej.
Popularni dostawcy hostingów w Polsce to np. home.pl czy nazwa.pl, aczkolwiek istnieje również wiele alternatyw
i nowoczesnych dostawców hostingu, którzy oferują bardzo fajne rozwiązania. Przede wszystkim jeśli chodzi
o serwer potrzebny ci jest sam komputer, czyli serwer WWW, ale także prawdopodobnie baza danych.
Jeżeli masz troszkę bardziej skomplikowaną stronę, która potrzebuje schematu bazodanowego, np. blog
oparty o system CMS czy jakąś stronę systemu e-commerce, na pewno będziesz potrzebował bazy danych.
Pamiętaj o tym, że serwery mogą działać na zasadzie jednej z dwóch technologii, czyli mogą to być serwery
Linuxowe głównie postawione na oprogramowaniu Apache, które oferuje hostowanie stron opartych o język
serwerowy PHP.
Z drugiej strony mogą być serwery na Windowsie i te serwery Windowsowe z kolei pozwalają na pisanie
programów z pomocą technologii Microsoft, czyli technologii ASP.NET.
W związku z tym musisz upewnić się w jakiej technologii serwerowej będzie napisana Twoja strona,
tak aby wykupić odpowiedni wariant hostingu.
Jeśli chodzi o dostawców, np. o popularną stronę home.pl, znajdziesz tutaj zakładkę hosting i mamy
rozmaite linie usług hostingu.
Co do zasady mamy możliwość wykupienia podstawowego hostingu, który jest na Linuksie i właśnie obsługuje język
PHP w ramach tutaj linii ekonomicznej czy profesjonalnej, ale mamy również dostęp do hostingu Windows.
Jeżeli nasze aplikacje mają działać na Windowsie i na technologiach bazodanowych typu SQL i ASP.NET
potrzebujesz hostingu Windows.
Na ogół jest on trochę droższy bo trochę droższa jest również licencja Windowsowa, aczkolwiek są to rozwiązania
również wspierane przez Microsoft, w związku z tym można powiedzieć że dla dużych aplikacji w pewnym
stopniu bezpieczniejsze.
Poza popularnymi rozwiązaniami takimi jak np. home.pl, nazwa czy OVH, które szczerze mówiąc nawet nie do
końca polecam, warto zainteresować się serwerami, które oparte są o strukturę GRID'a,
np. takimi skalowalnymi rozwiązaniami jak Microsoft Azure, który oferuje Ci możliwość postawienia
strony internetowej nie tylko na rozwiązaniach Microsoftu, ale również na serwerach Unix'owych, czyli opartych
o Linux z PHP, gdzie możesz bardzo łatwo dodawać do takiej usługi jakieś nowe komponenty tj. np.
sieć CDN.
O tym wszystkim jeszcze będę mówił w kursie, sprawiać żeby twoja aplikacja działała jeszcze bardziej
wydajnie, stawiać nowe bazy danych i przede wszystkim skasować aplikację, czyli w miarę potrzeb
możesz np. bardzo szybko przerzucić się z jakiegoś podstawowego wariantu, który tutaj możesz wybrać
w sieci Web, czyli jakiejś aplikacji sieci Web i możesz bardzo szybko taką aplikację, która jest na serwerach
współdzielonych przerzucić na jakiś osobny dedykowany komputer, który będzie miał określoną ilość zasobów
i np. jeżeli ruch na Twojej stronie jest bardzo duży
można to zrobić dosłownie w przeciągu sekund.
Dodatkowo możesz tworzyć backupy, możesz sobie operować na maszynach wirtualnych i czym te wszystkie komponenty
są,
chciałbym teraz w skrócie wytłumaczyć. A więc pierwszym takim wariantem, w ramach którego hostujemy proste
strony jest serwer współdzielony, czyli serwer, który jest po prostu jednym komputerem i na nim znajduje się
mnóstwo różnych serwisów internetowych.
Każdy serwis internetowy ma jakiś wydzielony fragment pamięci tego serwera.
Jeśli chodzi o przestrzeń dyskową, zasoby serwera takie jak np. przydzieloną pamięć RAM czy zasoby operacyjne
procesora i taki serwer współdzielony to jest serwer, na którym twoja oraz wiele różnych innych stron funkcjonuje sobie
jednocześnie.
Jeżeli taki serwer to jest za mało, wtedy możesz zdecydować się na rozwiązanie indywidualne, takie jak
np. VPN czy serwer dedykowany. VPN często od serwera współdzielonego różni się tym, że na serwerze współdzielonym
czasem nie mamy w ogóle informacji na temat tego ile zasobów może zużywać nasza strona, jaką mamy pamięć
RAM natomiast na VPN'ie na pewno to mamy. VPN już daje nam pewną taką strukturę, że jeżeli nawet jest
to jedna maszyna i działa na niej wiele stron, to mamy zagwarantowaną taką i taką moc obliczeniową procesora,
taką i taką pamięć RAM i wtedy rzeczywiście mamy informacje o tym jasne jakie zasoby możemy zużuć.
Ponadto jeżeli taki VPN nam nie wystarcza możemy pokusić się o wykupienie serwera dedykowanego, który
jest już osobnym komputerem, który albo jest u dostawcy, np. stoi sobie w serwerowni Microsoft Azure i jest
to serwer Microsoftu który niejako dzierżawimy,
albo jest to serwer, który sami gdzieś wstawimy, czyli nasz własny komputer, który możemy skonfigurować,
a następnie wstawić go gdzieś do jakiejś serwerowni na zasadzie tzw. kolokacji.
To jest trochę rzadziej już wybierane w tym momencie rozwiązanie.
Najczęściej korzysta się z serwerów dedykowanych które rzeczywiście są oferowane przez takich dostawców
jak przykładowo Microsoft Azure.
Tam, tak jak pokazałem Ci można bardzo łatwo skalować taki serwer, czyli np. dołożyć ileś pamięci RAM,
dołożyć jakiś transfer, dołożyć również np. zasoby dyskowe, a więc jest to bardzo fajne rozwiązanie, aczkolwiek
tak jak Ci powiedziałem, zaczynając od serwera współdzielonego
są to rozwiązania najtańsze no i później VPN i serwer dedykowany,
są to rozwiązania coraz droższe.
Jeszcze dwa terminy musisz znać jeśli chodzi o stawianie swojego serwera i hosting. To jest Upload
oraz Download.
Jeśli chodzi o główny parametr Twojego serwera to zdecydowanie Upload, czyli prędkość z jaką serwer
wysyła dane do użytkowników. Download, czyli ściąganie danych nie jest istotne w przypadku serwera, ale
jest istotne w przypadku Twoich użytkowników, czyli Twój serwer musi mieć jakiś Upload, który obsłużą
użytkownicy swoim Downloadem.
Jeżeli tych użytkowników jest 100 czy 1000 to pamiętaj o tym, że musimy zapewnić taki Upload serwera, aby
wszyscy mogli wygodnie korzystać z tych danych i wygodnie je pobierać, więc Upload taki referencyjny np.
to ok. 100 mega bitów w tym momencie,
aczkolwiek warto zapytać swojego dostawcę jaki jest Upload przewidziany dla Twojego konta czy dla Twojego
serwera. No i następnym komponentem jest domena, którą można np. wyszukać sobie czy kupić na stronach home.pl,
tutaj znajduje się sekcja domeny. Możemy wpisać nazwę domeny np. "mojafirma" i sprawdzić czy taka domena
jest dostępna.
W tym momencie wyszukiwane są warianty i wyszukiwane są domeny, które możemy kupić, no i wygląda na to, że
"mojejfirmy" już nie ma dostępnej, ale za to możemy np. wykupić sobie "emojafirma.pl" i są tutaj różne inne
sugestie, spośród których możemy wybierać.
Jeżeli szukasz jakiejś fajnej nazwy domeny, możesz też skorzystać z generatorów nazw, które polecam np.
NameMesh czy np. PandaBee. Tutaj
jeżeli wpiszemy jakąś nazwę, wpiszmy może "Panda", bo nie mam innego pomysłu na teraz, to dostaniemy szereg
dostępnych domen, ale również pewnych opcji jeśli chodzi o nazwy czy powiązania, synonimy tego słowa.
Niestety w większości dotyczą one fraz angielskich, ale również możesz znaleźć jakieś generatory nazw
losowych i nazwać w ten sposób Twoją domenę jakimś takim hasłem, które nie jest nazwą własną
i to również bardzo fajnie działa. Jeśli chodzi o nazwę domeny to warto ewentualnie pokusić się o to,
aby były w niej frazy kluczowe, czyli słowa kluczowe, które są związane z Twoją branżą.
Jeżeli na przykład jesteś hydraulikiem w Warszawie, taka najprostsza domena to hydraulikwarszawa.pl, która
będzie dobra w kontekście pozycjonowania,
ale z drugiej strony moim zdaniem fajnie jest też pozwolić sobie na jakąś kreatywność i stworzyć zupełnie
własną nazwę, taką którą użytkownicy będą kojarzyli tylko z naszą firmą i wykupić właśnie taką domenę.
Oczywiście najlepsze domeny na Polskę to domeny .pl, również w kontekście pozycjonowania, domeny globalne
to domeny .com.
Ale istnieje również mnóstwo innych rozszerzeń które możesz sobie wykupić no i możesz to zrobić właśnie
np. na stronach home.pl.
Jestem w tym momencie w panelu dostawcy mojej domeny, czyli zalogowałem się na dane domeny, którą kupiłem,
akurat na home'ie mam jakąś domenę "clothingshop.pl, która jest na potrzeby jednego z naszych kursów,
ale w każdym innym panelu np. na nazwie czy na godaddy.com będziesz miał również na pewno opcję
serwerów DNS, na które trzeba spojrzeć w pierwszej kolejności i przejść do konfiguracji domeny.
Tutaj musisz w pierwszej kolejności ustawić ten serwer na który będzie kierowała twoja domena, czyli
serwer,
adres serwera, na którym znajduje się Twoja strona,
adres Twojego hostingu.
Jeżeli masz hosting u tego samego dostawcy co domenę, a czasem tak jest, to ta konfiguracja może być dużo
prostsza.
Wystarczy zalogować się do konta czy przypisać do jakiejś konkretnej usługi serwerowej, którą mamy np.
na home'ie,
ale jeżeli serwer masz np. na Microsoft Azure to zamiast tego wybierasz polecenie "Korzystaj z serwerów
DNS innego operatora"
i tutaj wpisujesz adresy serwerów DNS, które na 100% znajdziesz w panelu hostingu np. Microsoft Azure
czy Twojego innego dostawcy.
To może być adres IP Twojego serwera, ale może też to być adres typu azure.microsoft.com, czyli jakiś
po prostu adres serwerów DNS, na 100% odnajdziesz go we właściwej zakładce
dostawcy twojego hostingu, wybierasz zapisz i musisz poczekać na propagowanie tej domeny.
To jest tak że istnieje 12 takich dużych serwerów DNS na świecie, poza tymi głównymi serwerami są jeszcze
inne serwery i są jeszcze rozmaici
dostawcy hostingu, dostawcy usług CDN, które mogą w jakiś sposób cache'ować, czyli zapamiętywać nazwy
domen i ich przekierowania do odpowiednich adresów IP.
W związku z tym, w skrócie mówiąc musisz poczekać od paru do parunastu, nawet do czterdziestu ośmiu
godzin zanim ta zmiana będzie miała skutek, więc nie denerwuj się jeżeli zmienisz DNS i nie będzie działać.
Poczekaj, nie odświeżaj za często bo u Ciebie na routerze czy u dostawcy ISP też może się to zcache'ować.
W związku z tym nie otwierać za często, poczekaj trochę i powinno wszystko działać.
Jeśli chodzi o podstawowe informacje odnośnie komponentów uruchomienia strony WWW, takie jak domena, rekord
DNS, a także hosting to myślę że to tyle i mogę zaprosić Cię
w związku z tym do kolejnej lekcji tego kursu. Do usłyszenia.