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 chciałbym podsumować to czego nauczyliśmy się o fontach. Typografia
na stronach internetowych jest bardzo ciekawym tematem, więc poświęciliśmy na niego dużo czasu, ale znasz
teraz wszystkie metody i wszystkie sposoby jak można osadzić fonty na stronach internetowych.
Wiesz czym jest Open Type, wiesz czym są fonty hostowane,
wiesz co to jest media queries, naprawdę wszystkie aktualne technologie są już dla Ciebie na wyciągnięcie
ręki.
Teraz w związku z tym jako bonus mam dla Ciebie jeszcze przegląd najciekawszych moim zdaniem fontów,
przede wszystkim tych fontów, które znajdują się w bibliotece Google Fonts i są całkowicie darmowe.
Uważam, że zawiera ona szereg świetnych fontów i przede wszystkim polecam Ci link na githubie, który jest linkiem
do pobrania, który umożliwia pobranie wszystkich fontów z biblioteki Google i zainstalowanie ich u siebie
lokalnie na komputerze, zamiast pojedynczo pobierać sobie te fonty,
to jest takie miejsce, które jest aktualizowane regularnie i możesz stąd pobrać wszystkie te fonty wybrać
sobie polecenie Download ZIP, pobrać wszystko, rozpakować, zainstalować w systemie i masz wszystkie fonty
Googla. Te najciekawsze, które polecam to Open Sans,
Lato, lato również patriotycznie zaprojektowane przez Polaków, Ubuntu, Droid i Droid Sans, bardzo fajne
fonty, PT Mono, też taki nowoczesny, fajny font, z którego możesz skorzystać.
Jest też font Roboto, który jest fontem systemowym w Androidzie, więc może jeszcze nie jest aż tak oklepany, a
naprawdę jest bardzo fajny i nowoczesny
i warto z niego korzystać.
Jest Gravitas One, też fajny font, PT Serif i Old Standard TT. Nie będę pokazywał Ci teraz tych fontów,
bo myślę, że spokojnie możesz sobie sam je wyszukać w bibliotekach Google'a na google.com łamane
przez /fonts no i warto żebyś wszystkie te fonty również sobie pobrał abyś mógł projektować z ich pomocą
w aplikacjach graficznych.
Pozostałe fonty, które polecam,
które głównie dostępne są w Typekit'cie, ale również na stronie MyFonts do kupienia czy na innych, w innych,
na innych stronach to font Proxima Nova, bardzo fajney, nowoczesny,
bezszeryfowy font, Museo sans, w niektórych odmianach Museo jest darmowe, w niektórych jest płatny,
dlatego umieściłem go tutaj, Futura też świetny krój pisma, Sofia Pro.
San Francisco to nowy font systemowy dla iOS'a, czyli
zaczęło się od Apple Watch, a teraz jest i na MacOS'ie i na iOS'ie jako font systemowy, ale też możesz używać
go w swoich projektach,
kiedy spełniając tam warunki licencyjne, więc warto sobie je doczytać, Avenir bardzo fajny font.
I jeszcze jest Frutiger i Gill Sans.
Polecam wszystkie sprawdzić, zobaczyć jak wyglądają.
Jeżeli wpiszesz sobie w przeglądarce parę haseł typu porównanie fontów czy najfajniejsze fonty w internecie
to myślę, że znajdziesz mnóstwo screenów, mnóstwo zestawień tych fontów i będziesz mógł podejrzeć jak
wyglądają.
A więc to są moje typy, jeśli chodzi o te najciekawsze fonty,
natomiast jeszcze jest fajna strona właśnie MyFonts.com, na której znajdziesz sekcję Top WebFonts, która jest regularnie uzupełniana.
I tutaj znajdują się te najczęściej pobierane i wykorzystywane w sieci fonty
i właśnie są jakieś screeny z ich wykorzystania, więc jak widzisz jest tutaj właśnie Futura, jest
Museo Sans, o którym wspominałem.
Jest masa różnych fontów i tutaj sobie możesz przejrzeć jak one wyglądają, jest Proxima, możesz też np. zmienić
sobie wielkość tego tekstu, który się wyświetla żeby dostosować to do swoich potrzeb, zmienić różne inne
jego parametry.
A jeżeli jakiś font Ci się spodobał oczywiście możesz wykupić go tutaj na MyFonts albo pobrać za darmo
jeśli jest darmowy.
Także polecam to zestawienie myfonts.com/topwebfonts. Kolejne fajne narzędzie, które chciałbym Ci polecić
to narzędzie, które też znajduje się na stronie MyFonts.
Jest to myfonts.com/whatthefont, czyli pozwala nam ono znaleźć konkretny krój pisma, rozpoznać
po obrazku, który załadujemy. W zasadzie przeglądając internet jeżeli spodoba Ci się jakiś krój pisma, możesz
zawsze zajrzeć do narzędzi deweloperskich, czyli kliknąć prawym przyciskiem myszy, a następnie wybrać
polecenie zbadaj element i o narzędziach developerskich de facto jeszcze będę mówił w jednej z części
tego kursu
przy narzędziach wspomagających tworzenie stron, ale tutaj możesz zaznaczyć sobie tę ikonkę, która pozwoli
zaznaczyć wskazany element, spróbujmy to zrobić, a następnie podejrzeć w stylach CSS jaki font został
wykorzystany no i tutaj prawdopodobnie widać od razu, że to jest font RooneySans-Medium, ale nie zawsze jest to
możliwe.
Nie zawsze możemy tak łatwo to sprawdzić jak zrobiłem to teraz i czasem wystarczy wtedy po prostu zrobić
screen, czyli np. zrobię sobie zrzut ekranu, tego kawałka ekranu.
Następnie przechodzę na stronę myfonts.com/whatthefont, teraz wystarczy, że załaduje obrazek, czyli wybieram
polecenie wybierz plik i znajduje sobie zrzut ekranu, który zrobiłem.
Następnie wybieram polecenie Continue.
Zobaczymy czy się uda jeszcze tego nie robiłem na tym kroju pisma.
Teraz mamy poniżej do wskazania konkretne literki, czyli wpisujemy, sprawdzamy w zasadzie tylko czy się
zgadza, to jest T, to jest h, to jest e, 5, 0, m, o, wygląda na to, że wszystko zostało rozpoznane prawidłowo, wybieram polecenie Continue.
Gdyby było jakieś, np. gdyby to było O, trzeba było zmienić na U i tyle.
No i mamy.
Proszę bardzo to jest twój obrazek, to są fonty, które zostały wybrane jako pasujące albo podobne.
No i jak widać nie znalazł idealnie tego fonta, z którego chciałem skorzystać, ale przynajmniej
podał mi jakieś rekomendacje co do tego jaki font można w zamian wykorzystać.
Także to jest fajne narzędzie WhatTheFont, z którego można skorzystać,
no i w zasadzie jeśli chodzi o takie przydatne rzeczy to mam dla Ciebie jeszcze tylko kilka podsumowujące, dodatkowych
wskazówek. Pozostaje mi w związku z tym tylko zaprosić Cię do kolejnej, ostatniej lekcji z tego działu
o fontach.
Do usłyszenia.