30 wskazówek, jak nauczyć się projektowania stron internetowych w 30 dni
Czy nauka podstaw projektowania stron internetowych wciąż znajduje się na liście „któregoś dnia”? Dlaczego jeszcze nie zacząłeś? Zebraliśmy 30 wskazówek i zasobów, które pomogą Ci rozpocząć naukę projektowania stron internetowych w tym miesiącu (a może nawet znajdziesz nową ścieżkę kariery!)
Projektanci graficzni, graficy i twórcy, którzy chcą nauczyć się czegoś nowego lub włamać na stronę internetową, muszą rzucić zwlekanie. Każdy dzień, w którym nie robisz tego pierwszego kroku, pozostawia Cię o jeden dzień dalej niż inni!
Wykonaj następujące kroki, aby rozpocząć naukę tworzenia pierwszej strony internetowej, najlepszych praktyk branżowych i wielu innych - wszystko w ciągu 30 dni!
1. Uruchom stronę internetową
Najlepszym sposobem, aby zacząć uczyć się projektowania stron internetowych, jest zacząć to robić. Tak radzi David Kadavy, autor Design Hackers.
Polecam założyć bloga. Założyłem bloga, żeby mieć plac zabaw do projektowania stron internetowych, a 7 lat później opublikowałem bestsellerową książkę na ten temat. Posiadanie osobistego projektu, takiego jak blog, daje ci miejsce, w którym możesz wypróbować nowe rzeczy, a twój szef cię nie zwolni, jeśli się zepsujesz.
Nie musisz zaczynać od ogromnej strony internetowej lub szalonego projektu; zacząć od małego. Zagraj ze stroną internetową, dowiedz się, co sprawia, że wszystko działa. (I pamiętaj o sprawdzeniu kodu, abyś mógł zapoznać się z tym, co sprawia, że Twoja witryna działa).
Chcesz szybko zacząć? Kreator stron internetowych, taki jak Wix, może pomóc Ci uzyskać przewagę nad stylowym wyglądem strony internetowej, gdy zaczniesz poznawać koncepcje i elementy składowe tego, co trafia na stronę internetową.
2. Przeczytaj wszystko, co możesz
Zacznij czytać. Ponieważ jesteś na tym blogu, prawdopodobnie przywykłeś do śledzenia tego, co dzieje się w świecie designu. Czytaj dalej.
Przeczytaj wszystko, co możesz na temat projektowania witryn, trendów, technik i najlepszych praktyk. Śledź projektantów, których podziwiasz w mediach społecznościowych.
Zarzuć również szeroką siatkę do czytania projektu swojej witryny. Przeczytaj o podstawach, aby nauczyć się kodu, przeczytaj o teorii projektowania oraz przeczytaj tutoriale i bieżące artykuły.
3. Bądź skutecznym komunikatorem
Jeśli nie jesteś najbardziej elokwentną osobą, odśwież swoje umiejętności. Dużą częścią projektowania stron internetowych jest komunikacja.
Projektanci stron internetowych muszą regularnie komunikować się z klientami, aby dowiedzieć się, jaki problem musi rozwiązać projekt; muszą przekazać te rozwiązania i je również wdrożyć.
4. Subskrybuj Tuts + i Envato Elements
Rozważ subskrypcję Envato Elements, która zapewnia również dostęp do doskonałego zasobu edukacyjnego Tuts +.
Tuts + publikuje regularne kursy z zakresu grafiki i projektowania stron internetowych, od podstawowych technik, po najnowsze zaawansowane podejścia i opracowania. Jest całkowicie samodzielny, nauczany przez doświadczonych instruktorów. Otrzymasz również dostęp do Envato Elements, który jest doskonałym źródłem do znajdowania grafiki, szablonów i innych elementów, które możesz podłączyć do swojej pracy przy projektowaniu stron internetowych.
5. Pomyśl w HTML
HTML lub język znaczników hipertekstowych jest podstawą projektowania stron internetowych. HTML jest szkieletem, który pomaga stworzyć strukturę strony internetowej, a kiedy będziesz w stanie czytać język, świat projektowania stron internetowych nabierze większego sensu.
W3Schools ma świetny samouczek dla początkujących HTML z setkami przykładów HTML, z którymi możesz grać na ekranie, aby zobaczyć, co się dzieje i jak dokładnie działa. (Może się okazać, że jest bardziej intuicyjny, niż sobie wyobrażałeś).
6. Graj z Code w Codeacademy
Chociaż HTML to dobry początek, możesz nauczyć się prawie każdego języka programowania z Codeacademy. Bezpłatny zestaw narzędzi uczy kodowania za pomocą interaktywnych działań i gier.
Możesz wybrać kurs Codeacademy, gdzie i kiedy jest to potrzebne, i rozpocząć i zatrzymać w razie potrzeby. Wybierz przedmiot do nauki - tworzenie stron internetowych, programowanie, nauka danych - lub język, na którym chcesz się skoncentrować - HTML i CSS (świetne miejsce na początek), Python, Java, SQL, Ruby i inne.
7. Naucz się rozumieć CSS
CSS lub kaskadowe arkusze stylów definiują prezentację dokumentu napisanego w HTML lub XML i SVG.
Zgodnie z definicją Mozilli
CSS opisuje, w jaki sposób elementy powinny być renderowane na ekranie, na papierze, w mowie lub na innych mediach.
Mozilla ma również świetny zbiór zasobów CSS na początek, z solidnym wprowadzeniem na temat działania CSS, w tym selektorów i właściwości, pisania reguł CSS, stosowania CSS do HTML, jak określać długość, kolor i inne jednostki w CSS, kaskadowo i dziedziczenie, podstawy modelu pudełkowego i debugowanie CSS. Następnie moduły przechodzą do wyjaśnienia stylizacji tekstu i ramek.
8. Zastosuj swoje umiejętności projektowania w Internecie
Jeśli pracujesz już w obszarze projektowania kreatywnego lub graficznego, zastanów się nad rzeczami, które już wiesz, że możesz zastosować również do projektowania stron internetowych. Zasady, które sprawiają, że coś jest wizualnie atrakcyjne, nie zmieniają się w zależności od medium, a cała teoria projektowania przyda się również w przestrzeni cyfrowej.
Podczas gdy elementy takie jak nauka kodu mogą nie wydawać się naturalne, posiadanie tła projektowego jest ogromną zaletą. Co dobrego ma pięknie zakodowana strona, jeśli nie chce się z nią wchodzić w interakcje?
9. Zwróć uwagę na strony, które kochasz
Zwróć uwagę na strony, które kochasz. Co w nich Cię pociąga? (A jak nauczyć się replikować te elementy?) Zwróć uwagę na:
- Typografia
- Nawigacja
- Wykorzystanie obrazów i przestrzeni
- Projektowanie formularzy
- Animacje i efekty przewijania
- Kolor
10. Narysuj model szkieletowy
Wireframing to burza mózgów projektantów stron internetowych.
Model szkieletowy w najczystszej formie jest szkicem tego, czym będzie strona internetowa. To nie jest zarys elementów estetycznych, a raczej schemat strony internetowej. Rysowanie szkieletu tak naprawdę nie polega na wyglądzie tego projektu, ale na strukturze informacyjnej w nim zawartej.
Nie wiesz, jak utworzyć szkielet? Cyfrowa telepatia ma przewodnik najlepszych praktyk, które pomogą Ci się uczyć.
11. Poświęć trochę czasu na naukę szkicu
Szkic to narzędzie do rysowania wektorów dla komputerów Mac, które ułatwia tworzenie elementów projektu. Wielu projektantów zwraca się do Sketch, aby tworzyć elementy interfejsu użytkownika i powtarzające się bloki projektowe.
Jest wypełniony wtyczkami i pozwala na eksport kodu w celu łatwego użycia i dostępu. Jest to jedno z najpotężniejszych i najpopularniejszych narzędzi dostępnych od czasu Adobe Creative Suite i warte Twojego czasu.
12. Bądź na bieżąco z technologią
AI, VR, AR, wideo 360 stopni, boty.
Nadążanie za wieloma nowymi technologiami i trendami może być trudne. Ale musisz zadbać o to, aby nadążać za tymi zmianami.
Rozwiązuj je pojedynczo i zacznij od technologii, które są najbardziej bezpośrednio związane z twoją pracą. Jeśli masz witrynę internetową z czatem online, zacznij od poznania botów. Lub jeśli używasz dużo treści wideo, baw się z filmem 360 stopni.
Elementy, takie jak sztuczna inteligencja i rzeczywistość wirtualna lub rozszerzona, są jeszcze bardziej złożone, ale prawdopodobnie staną się integralnymi częściami krajobrazu witryny internetowej. Przynajmniej powinieneś wiedzieć, jakie są i jakie mogą być potencjalne zastosowania.
13. Usiądź wygodnie dzięki SEO
Podczas gdy wielu projektantów stron internetowych sądzi, że specjalista SEO poradzi sobie z przygotowaniem strony internetowej do przeczytania przez wyszukiwarki, istnieje wiele prac projektowych związanych z SEO.
Od sposobu, w jaki obrazy są przesyłane, po tworzenie czystego kodu, który szybko włącza meta opisy na stronach i elementach, projektant powinien uwzględnić myślenie w wyszukiwaniu w swoim przepływie pracy.
Freelancerzy, jest to również bardzo ważne dla ciebie. Większość klientów jest na tyle bystra, by poprosić o stronę zoptymalizowaną pod kątem SEO. Jeśli pracujesz sam, musisz mieć wystarczającą wiedzę, aby stworzyć solidne ramy, które Google może odczytać (i być w stanie skierować klienta do specjalisty SEO, jeśli trzeba wykonać więcej pracy).
14. Graj za pomocą Kreatora stron internetowych
Kreator stron internetowych może być świetnym sposobem na zaznajomienie się z najlepszymi praktykami oraz z tym, jak zacząć budować i projektować strony internetowe.
Większość tych narzędzi ma wiele szablonów i pozwala dostosowywać elementy, a nawet dodawać fragmenty kodu. W przypadku prostych witryn wielu twórców witryn ma również bezpłatny plan, w którym możesz utworzyć osobistą stronę portfolio lub podstawową stronę internetową, która służy za plac zabaw dla Ciebie.
Następnie rozłóż elementy w kreatorze stron. Zobacz, jak zostały zaprojektowane i zakodowane, aby poczuć, jak to wszystko się łączy. Będziesz zaskoczony tym, co możesz wymyślić, wybierając inny projekt.
15. Znajdź mentora
Czy jest ktoś, z kim współpracujesz, którego podziwiasz jako projektanta stron internetowych? Zabierz ich na lunch i wybierz mózg dotyczący branży.
Znalezienie mentora, który będzie chętny do współpracy z Tobą i pomoże ci pomyśleć o tej dziedzinie oraz o tym, jak samodzielnie nauczyć się projektowania stron internetowych, może być nieocenione. I chociaż prawdopodobnie można znaleźć mentora w społeczności online, nie ma nic lepszego niż żywa osoba, z którą można się okresowo spotkać twarzą w twarz. (Może warto mieć mentorów online i osobiście.)
16. Dołącz do społeczności CodePen
Kiedy zaczniesz czuć się dobrze z kodem i programowaniem, chcesz dołączyć do społeczności CodePen. Społeczność typu open source pozwala udostępniać i edytować fragmenty kodu w sieci społecznościowej.
Oto trochę więcej od założycieli strony: „CodePen to środowisko rozwoju społecznego. Zasadniczo pozwala pisać kod w przeglądarce i wyświetlać jego wyniki podczas kompilacji. Przydatne i wyzwalające narzędzie dla programistów o dowolnych umiejętnościach, a szczególnie ułatwiające osobom uczącym się kodowania. Koncentrujemy się przede wszystkim na językach frontonu, takich jak HTML, CSS, JavaScript i składnie przetwarzania wstępnego, które zmieniają się w te rzeczy. ”
17. Weź udział w zajęciach
Dla niektórych uczniów najlepsze jest bardziej formalne ustawienie w klasie.
Dostępnych jest mnóstwo zajęć - osobiście i online - do nauki podstaw projektowania stron internetowych. Zacznij od lokalnej uczelni lub internetowych centrów edukacyjnych, takich jak Udemy lub Coursera. Podnieś klasę na obecnym poziomie umiejętności i idź naprzód.
18. Chcesz coś zrobić? Wygoogluj to
Dla niezbyt tradycyjnego ucznia znajdź odpowiedź na problem z projektowaniem stron internetowych w Google. Dostępnych jest tak wiele samouczków i filmów, które przeprowadzą Cię przez prawie każdy problem - i rozwiązanie.
Kluczem do sukcesu jest przeszukanie dokładnie tego, co musisz wiedzieć, i poszukiwanie odpowiedzi na wiarygodne źródło. Oto kolejna wskazówka, jeśli chodzi o samouczki i filmy - prawdopodobnie najnowsze treści zapewnią lepszą, bardziej kompletną i trafniejszą odpowiedź. (Pamiętaj, niektóre z tych rzeczy szybko się zmieniają).
19. Zwróć uwagę na wrażenia użytkownika
Nic nie może stworzyć ani zepsuć strony internetowej, takiej jak projektowanie interfejsu użytkownika. Musisz to zaplanować i zrozumieć.
Oto jak Interaction Design Foundation opisuje projektowanie UX:
Projektowanie doświadczenia użytkownika (UX) to proces tworzenia produktów, które zapewniają znaczące i osobiste wrażenia. Wymaga to starannego zaprojektowania zarówno użyteczności produktu, jak i przyjemności, jaką konsumenci czerpią z jego użytkowania. Dotyczy to również całego procesu pozyskiwania i integracji produktu, w tym aspektów brandingu, projektu, użyteczności i funkcji.
Projektanci UX lub projektanci, którzy są świadomi procesu tworzenia doświadczenia, starają się tworzyć i kształtować czynniki wpływające na proces świadomie. Aby to zrobić, projektant UX weźmie pod uwagę Dlaczego, Co i Jak używać produktu.
20. Zwróć uwagę na trendy w projektowaniu
Jak wygląda nowoczesny projekt strony internetowej? To nie jest podchwytliwe pytanie. Aby projektować nowoczesne strony internetowe i doświadczenia użytkowników, musisz wiedzieć, czego chcą użytkownicy i jak z nimi współpracują. Jeśli ostatni raz pobrałeś aplikację lub przeglądałeś witrynę na telefonie w 2016 r., Masz wiele do zrobienia.
Tworzenie projektów stron internetowych, które mają nowoczesne akcenty i trendy zintegrowane z projektem, pomoże wyróżnić twoje projekty. Skąd wiesz, co jest modne? Czytaj dalej takie strony i zwracaj uwagę na to, co robią inni projektanci. Zwróć uwagę na kolory, style i funkcje zawarte w często odwiedzanych witrynach.
21. Twórz bez koloru
Rozpocznij każdy projekt bez koloru. Wielki projektant powiedział mi kiedyś, że jeśli twój projekt działa w czerni i bieli, będzie miał nieskazitelny kolor.
Może nie zawsze tak jest, ale jest to świetny punkt wyjścia.
Tworząc projekty w czerni i bieli, możesz zobaczyć, gdzie elementy się kontrastują i jak się ze sobą bawią. Pozbyłeś się wszelkich emocjonalnych skojarzeń z kolorem lub ruchem oczu, które się z tego powodu zdarzają. Ta najprostsza forma projektu da ci wyobrażenie, czy coś działa jako koncepcja, zanim przejdziesz do jej finalizacji.
22. Naucz się kochać czcionki Google
Google Fonts to twój przyjaciel.
Niezależnie od tego, co sądzisz o Google, ważna jest możliwość przeglądania, sortowania i wybierania krojów pisma, o których wiesz, że będą działać przy projektowaniu witryn. Nie musisz myśleć o licencjonowaniu, czy kroje pisma są zgodne z określonymi przeglądarkami, czy nie.
Ograniczeniem jest to, że masz tylko to, co jest w bibliotece czcionek Google do pracy. Ale jeśli spróbujesz, możesz znaleźć coś, co pasuje do prawie każdego projektu. Zaoszczędzi ci to dużo czasu na dłuższą metę.
23. Wybierz oddzielnie zestaw interfejsu użytkownika
Pobierz interfejs użytkownika lub zestaw ikon i rozdziel go.
Tak jak możesz sprawdzić kod strony internetowej, spójrz, jak budowane są elementy projektu dla sieci. Zwróć uwagę na skalę i siatkę, spójrz na mieszanki kolorów i sposób organizacji plików w Photoshopie lub Illustratorze.
Poszukaj zestawu do pobrania, który zawiera elementy w wielu formatach dla wyświetlaczy o wysokiej rozdzielczości. (Pobranie kilku plików JPEG nie będzie Ci tak dobrze służyć).
Następnie spróbuj zbudować lub dostosować własny element lub dwa.
24. Zostań typografem
Nowoczesne projektowanie stron internetowych silnie koncentruje się na typografii… dobrej typografii. Od nagłówków bohaterów z gigantycznymi słowami po warstwy tekstu, które przyciągają użytkownika do projektu, niezbędne jest zrozumienie zasad łączenia elementów typu i konstruowania angażujących bloków tekstowych.
Zacznij od Ellen Lupton's Thinking with Type. (Jest też książka o tym samym tytule.) Lupton jest autorytetem w typografii, a jej informacje sprawią, że będziesz myśleć jak typograf w mgnieniu oka.
25. Przejdź do JavaScript
Kiedy zaczynasz czuć się całkiem dobrze z zajmowaniem się projektowaniem stron internetowych, spróbuj ponownie nauczyć się JavaScript. Po HTML i CSS jest to najważniejszy język w sieci.
JavaScript to narzędzie, które pozwala projektantom wdrażać złożone rzeczy i interakcje na stronach internetowych. To właśnie powoduje, że suwak się przesuwa lub animacja paralaksy.
Dowiedz się, że JS ma interaktywny samouczek, który pomoże Ci zacząć.
26. Zaktualizuj swoje portfolio
Po rozpoczęciu projektowania stron internetowych zaktualizuj swoje portfolio o projekty związane z projektowaniem stron internetowych. Ta prosta czynność pomoże Ci pokazać… i innym…, że projektowanie stron internetowych jest częścią Twojego repertuaru.
Zaktualizowana oferta może pomóc potencjalnym klientom zobaczyć, jak wygląda Twój „styl”. Zaprezentuj układy, kolory, typografię i różne techniki, które pokazują, co możesz zrobić.
27. Podejmij wyzwanie
Przy tak wielu skrótach i fragmentach kodu, które pomogą Ci rozwiązać prawie każdy problem z witryną, nie bądź leniwy. Pamiętaj, aby nieustannie rzucać sobie wyzwanie, aby uczyć się nowych umiejętności, nowych technologii i stale ulepszać swoją grę w projektowanie stron internetowych.
Jedną rzeczą w tym polu jest to, że ciągle się zmienia; zawsze jest coś nowego do nauczenia się lub wypróbowania.
28. Maksymalizuj swoje wrażenia
Wyjdź i zaprojektuj. Musisz zacząć projektować strony internetowe, aby być projektantem stron internetowych.
Zacznij od małych, ale podejmuj projekty z innymi. Poproś o dołączenie do projektu z zespołem w pracy. Zajmij się małą stroną internetową dla przyjaciela. Im więcej masz doświadczenia w tworzeniu stron internetowych, tym lepiej i szybciej otrzymasz.
Na co czekasz? Przestań zwlekać.
29. Poproś o opinię
Skorzystaj z sieci, aby zbierać opinie na temat projektów witryn, bez względu na to, jak małe są one. Posłuchaj tych opinii - nawet jeśli ci się nie podoba i zobacz, czego możesz się nauczyć.
Czy oprócz preferencji wizualnych osoba przekazująca informacje zwrotne zaproponowała sugestie dotyczące usprawnienia działania witryny? Czy mogliby łatwo zrozumieć cel projektu? Czy połączyli się z wiadomościami?
30. Ucz się nowych rzeczy
Aby być świetnym projektantem stron internetowych, musisz po prostu grać, próbować i uczyć się nowych rzeczy. Wskaż punkt sieci i komunikuj się z innymi w terenie, abyś był na bieżąco z pożądanymi technikami i zmianami wizualnymi.
Jeśli chcesz nauczyć się projektowania stron internetowych, to prawdopodobnie już robisz to regularnie. Ale jest to obszar ewoluujący i zmienia się prawie codziennie. Zapytaj każdego, kto to robi.
