czy nauka podstaw projektowania stron internetowych wciąż jest na twojej liście „pewnego dnia”? Dlaczego jeszcze nie zacząłeś? Zebraliśmy 30 porad i zasobów, które pomogą Ci rozpocząć naukę projektowania stron internetowych w tym miesiącu(a może nawet znaleźć sobie nową ścieżkę kariery!)

graficy, projektanci druku i twórcy, którzy chcą nauczyć się czegoś nowego lub włamać się na stronę internetową, muszą przestać zwlekać. Każdy dzień, w którym nie zrobisz pierwszego kroku, pozostawia Cię o jeden dzień dalej w tyle za innymi!

wykonaj poniższe kroki, aby dowiedzieć się, jak stworzyć swoją pierwszą stronę internetową, najlepsze praktyki branżowe i wiele więcej—wszystko w 30 dni!

załóż stronę internetową

najlepszym sposobem na rozpoczęcie nauki projektowania stron internetowych jest rozpoczęcie tego. Oto Rada Davida Kadavy ’ ego, autora projektu <dla hakerów>.

polecam założyć bloga. Założyłem bloga tylko po to, aby mieć plac zabaw dla projektowania stron internetowych, a 7 lat później uruchomiłem bestsellerową książkę na ten temat. Posiadanie osobistego projektu, takiego jak blog, daje Ci miejsce, w którym możesz próbować nowych rzeczy, a twój szef nie zwolni cię, jeśli nawalisz.

nie musisz zaczynać od masywnej strony internetowej lub szalonego projektu; zacznij od małych. Baw się stroną internetową, dowiedz się, co sprawia, że wszystko działa. (I upewnij się, że zapoznałeś się z kodem, 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ę dzięki stylowemu projektowi strony internetowej, gdy zaczniesz poznawać koncepcje i elementy składowe tego, co wchodzi w stronę internetową.

Przeczytaj wszystko co możesz

zacznij czytać. Ponieważ jesteś na tym blogu, prawdopodobnie jesteś przyzwyczajony do śledzenia tego, co dzieje się w świecie projektowania. Czytaj dalej.

Przeczytaj wszystko, co możesz o projektowaniu stron internetowych, trendach, technikach i najlepszych praktykach. Obserwuj projektantów, których podziwiasz w mediach społecznościowych.

Dodaj również do swojej strony www. Przeczytaj o podstawach, aby nauczyć się trochę kodu, przeczytaj o teorii projektowania i przeczytaj samouczki i aktualne artykuły.

bądź skutecznym komunikatorem

Jeśli nie jesteś osobą najbardziej elokwentną, odśwież te 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 projekt musi rozwiązać; muszą komunikować te rozwiązania i je również wdrażać.

Subskrybuj Tuts+& Envato Elements

rozważ subskrypcję Envato Elements, która zapewnia również dostęp do doskonałego zasobu Tuts+ learning.

Tuts+ publikuje regularne kursy na temat grafiki i projektowania stron internetowych, od podstawowych technik, po najnowsze zaawansowane podejścia i osiągnięcia. Jest w pełni samodzielne, prowadzone przez doświadczonych instruktorów. Uzyskasz również dostęp do Envato Elements, który jest doskonałym źródłem do wyszukiwania grafiki, szablonów i innych elementów do podłączenia do pracy nad projektowaniem stron internetowych.

myśl w HTML

HTML, czyli hypertext Markup language, jest podstawą projektowania stron internetowych. HTML to szkielet, który pomaga stworzyć strukturę strony internetowej, a gdy już przeczytasz język, świat projektowania stron internetowych będzie miał o wiele więcej sensu.

w3schools ma świetny samouczek HTML starter z setkami przykładów HTML, które można odtwarzać na ekranie, aby zobaczyć, co się dzieje i dokładnie jak to działa. (Może okazać się to bardziej intuicyjne, niż sobie wyobrażałeś.)

baw się kodem w Codeacademy

chociaż HTML jest dobrym początkiem, 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 go potrzebujesz, a następnie rozpocząć i zatrzymać w razie potrzeby. Wybierz temat do nauki – tworzenie stron internetowych, programowanie, data science – lub język, na którym się skupisz-HTML & CSS (świetny początek), Python, Java, SQL, Ruby i inne.

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, jak elementy powinny być renderowane na ekranie, na papierze, w mowie lub na innych nośnikach.

Mozilla ma również świetny zbiór zasobów CSS na początek, z solidnym wprowadzeniem do tego, jak działa CSS, w tym selektory i właściwości, pisanie reguł CSS, stosowanie CSS do HTML, jak określać długość, kolor i inne jednostki w CSS, kaskada i dziedziczenie, podstawy modelu pudełkowego i debugowanie CSS. Następnie Moduły przechodzą do wyjaśnienia stylizacji tekstu i pól.

Zastosuj swoje umiejętności projektowe w Internecie

Jeśli już pracujesz w dziedzinie projektowania kreatywnego lub graficznego, pomyśl o rzeczach, które już wiesz, że możesz również zastosować do projektowania stron internetowych. Zasady, które sprawiają, że coś jest atrakcyjne wizualnie, nie zmieniają się w oparciu o medium, a cała teoria projektowania przyda się również w przestrzeni cyfrowej.

chociaż elementy takie jak nauka kodu mogą nie być naturalne, posiadanie zaplecza projektowego jest ogromnym bonusem. Po co jest pięknie zakodowana strona internetowa, jeśli nie chce się z nią wchodzić w interakcje?

zwróć uwagę na strony, które kochasz

zwróć uwagę na strony, które kochasz. Co w nich jest atrakcyjne dla Ciebie? (A jak można nauczyć się powielać te elementy?) Zwróć uwagę na:

• Typografia
• Nawigacja
• wykorzystanie obrazów i przestrzeni
• projektowanie formularzy
• animacja i efekty przewijania
• Kolor

rysowanie szkieletu

wireframing to burza mózgów projektanta stron internetowych.

w najczystszej formie szkic jest szkicem tego, czym będzie strona internetowa. Nie jest to zarys elementów estetycznych, a raczej plan strony internetowej. Rysowanie szkieletu nie polega tak naprawdę na wyglądzie tego projektu, ale na strukturze informacji w nim zawartej.

nie wiesz, jak utworzyć szkielet? Cyfrowa telepatia ma przewodnik najlepszych praktyk, które pomogą Ci się uczyć.

poświęć trochę czasu, aby nauczyć się szkicu

Sketch to narzędzie do rysowania wektorowego dla komputerów Mac, które ułatwia tworzenie elementów projektu. Wielu projektantów zwraca się do szkicu, aby utworzyć elementy interfejsu użytkownika i powtarzające się bloki projektowe.

jest zapakowany w wtyczki i umożliwia eksportowanie kodu w celu łatwego użycia i dostępu. Jest to jedno z najpotężniejszych i najbardziej popularnych narzędzi dostępnych od czasu pakietu Creative Suite firmy Adobe i warte twojego czasu.

Bądź na bieżąco z technologią

AI, VR, AR, wideo 360 stopni, boty.

trudno nadążyć za tak wieloma nowymi technologiami i trendami. Ale musisz zrobić punkt, aby pozostać na bieżąco z tymi zmianami.

zajmuj się nimi pojedynczo i zacznij od technologii, które są najbardziej bezpośrednio związane z wykonywaną pracą. Jeśli masz stronę internetową z czatem online, zacznij od Poznania botów. Lub jeśli używasz dużej ilości treści wideo, baw się wideo 360 stopni.

elementy takie jak sztuczna inteligencja i wirtualna lub rozszerzona rzeczywistość są jeszcze bardziej złożone, ale prawdopodobnie staną się zintegrowanymi częściami krajobrazu projektowania stron internetowych. Przynajmniej powinieneś wiedzieć, czym są i jakie mogą być potencjalne zastosowania.

Poczuj się komfortowo z SEO

podczas gdy wielu projektantów stron internetowych uważa, że specjalista SEO poradzi sobie z przygotowaniem strony do czytania przez wyszukiwarki, istnieje wiele prac projektowych związanych z SEO.

od sposobu przesyłania obrazów do tworzenia czystego kodu, który szybko zawiera meta opisy na stronach i elementach, projektant powinien włączyć myślenie wyszukiwania do swojego przepływu pracy.

freelancerzy, to jest niezwykle ważne Również dla was. Większość klientów jest na tyle doświadczonych, aby poprosić o stronę zoptymalizowaną pod kątem SEO. Jeśli pracujesz sam, musisz wiedzieć wystarczająco dużo, aby stworzyć solidny framework, który Google może odczytać (i być w stanie skierować klienta do specjalisty SEO, jeśli trzeba wykonać więcej pracy).

Zagraj z kreatorem stron internetowych

Kreator stron internetowych może być świetnym sposobem na komfortowe korzystanie z najlepszych praktyk oraz rozpoczęcie budowy i projektowania stron internetowych.

większość z tych narzędzi ma mnóstwo 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żna utworzyć osobistą stronę portfolio lub podstawową stronę internetową, która służy jako plac zabaw dla Ciebie.

następnie wybierz elementy w kreatorze stron. Zobacz, jak są projektowane i kodowane, aby poczuć, jak to wszystko się łączy. Będziesz zaskoczony tym,co możesz wymyślić, wybierając inny projekt.

Znajdź mentora

czy jest ktoś, z kim pracujesz, którego podziwiasz jako projektant stron internetowych? Zabierz ich na lunch i zastanów się nad przemysłem.

znalezienie mentora, który jest chętny do współpracy z Tobą i pomoże Ci myśleć o dziedzinie i jak nauczyć się projektowania stron internetowych na własną rękę może być nieocenione. I chociaż prawdopodobnie możesz znaleźć mentora w społeczności internetowej, nic nie jest lepsze niż żywa osoba, którą możesz okresowo spotykać twarzą w twarz. (Może warto mieć mentorów online i osobiście.)

Dołącz do społeczności CodePen

gdy zaczniesz czuć się komfortowo z kodem i programowaniem, chcesz dołączyć do społeczności CodePen. Społeczność 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. W jego sercu, to pozwala na pisanie kodu w przeglądarce, i zobaczyć wyniki jego podczas budowania. Przydatne i wyzwalające narzędzie dla programistów o dowolnych umiejętnościach, a w szczególności dla osób uczących się kodowania. Skupiamy się przede wszystkim na językach front-end, takich jak HTML, CSS, JavaScript i wstępnie przetwarzanych składniach, które zamieniają się w te rzeczy.”

Weź udział w zajęciach

dla niektórych uczniów najlepsze jest bardziej formalne ustawienie klasy.

Istnieje mnóstwo zajęć dostępnych – osobiście i online-aby nauczyć się podstaw projektowania stron internetowych. Zacznij od lokalnej uczelni lub centrów nauki online, takich jak Udemy lub Coursera. Wybierz klasę na obecnym poziomie umiejętności i po prostu idź do przodu.

chcesz coś zrobić? Google It

dla nie-tak-tradycyjnego-ucznia, znajdź odpowiedź na problem projektowania stron internetowych w Google. Istnieje tak wiele samouczków i filmów, które mogą przeprowadzić Cię przez prawie każdy problem – i rozwiązanie.

kluczem jest przeszukanie dokładnie tego, co musisz wiedzieć i poszukanie odpowiedzi w renomowanym źródle. Oto kolejna wskazówka, jeśli chodzi o samouczki i filmy – nowsze treści prawdopodobnie dadzą ci lepszą, bardziej kompletną i trafniejszą odpowiedź. (Pamiętaj, że niektóre z tych rzeczy szybko się zmieniają.

zwróć uwagę na doświadczenie użytkownika

nic nie może stworzyć ani zepsuć strony internetowej, jak projektowanie doświadczeń użytkownika. Musisz to zaplanować i zrozumieć.

Oto jak Interaction Design Foundation opisuje projektowanie UX:

projektowanie User experience (UX) to proces tworzenia produktów, które zapewniają znaczące i osobiście istotne doświadczenia. Wiąże się to z starannym zaprojektowaniem zarówno użyteczności produktu, jak i przyjemności, jaką konsumenci będą czerpać z jego używania. Zajmuje się również całym procesem pozyskiwania i integracji produktu, w tym aspektami brandingu, projektowania, użyteczności i funkcji.

projektanci UX, czyli projektanci świadomi procesu powstawania doświadczeń, starają się tworzyć i kształtować czynniki wpływające na proces celowo. Aby to zrobić, Projektant UX rozważy dlaczego, co i jak używać produktu.

zwróć uwagę na trendy w projektowaniu

jak wygląda nowoczesny projekt strony internetowej? To nie podchwytliwe pytanie. Aby zaprojektować nowoczesne strony internetowe i doświadczenia użytkowników, musisz wiedzieć, czego chcą użytkownicy i jak z nimi wchodzą w interakcję. Jeśli po raz ostatni pobrałeś aplikację lub przeglądałeś stronę internetową w telefonie w 2016 roku, masz wiele do nadrobienia.

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 trendy? 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.

twórz bez koloru

rozpocznij każdy projekt bez koloru. Świetny projektant powiedział mi kiedyś, że jeśli twój projekt działa w czerni i bieli, będzie bezbłędny w Kolorze.

To może nie zawsze się uda, ale to świetny punkt wyjścia.

tworząc projekty w czerni i bieli, możesz zobaczyć, gdzie elementy kontrastują i jak ze sobą grają. Pozbyłeś się wszelkich emocjonalnych skojarzeń z kolorem lub ruchem oczu, które dzieją się z tego powodu. Ta najprostsza forma projektu da ci pomysł, czy coś działa jako koncepcja, zanim przejdziesz do finalizacji.

Naucz się kochać Google Fonts

Google Fonts jest twoim przyjacielem.

niezależnie od tego, co myślisz o Google, ważna jest możliwość przeglądania, sortowania i wybierania krojów pisma, o których wiesz, że sprawdzą się w projektach stron internetowych. Nie musisz myśleć o licencjonowaniu lub o tym, czy krój pisma jest zgodny z konkretnymi przeglądarkami, czy nie.

ograniczenie polega na tym, że masz do pracy tylko to, co znajduje się w bibliotece Google Fonts. Ale jeśli spróbujesz, możesz znaleźć coś, co będzie pasować do prawie każdego projektu. Na dłuższą metę zaoszczędzi ci to dużo czasu.

Wybierz zestaw interfejsu użytkownika

Pobierz interfejs użytkownika lub zestaw ikon i wybierz go.

tak jak możesz sprawdzić kod strony internetowej, spójrz na to, jak konstruowane są elementy projektu dla sieci. Zwróć uwagę na skalę i siatkę, sprawdź mieszanki kolorów i sposób organizacji plików w programie Photoshop lub Illustrator.

poszukaj zestawu do pobrania, który zawiera elementy w wielu formatach dla wyświetlaczy o wysokiej rozdzielczości. (Pobieranie kilku JPEG nie będzie Ci tak dobrze służyć.)

następnie spróbuj zbudować lub dostosować element lub dwa własne.

Zostań typografem

nowoczesny projekt strony internetowej skupia się na typografii … dobrej typografii. Od nagłówków bohaterów z gigantycznymi słowami po warstwy tekstu, które wciągają użytkownika w projekt, zrozumienie zasad parowania elementów tekstu i konstruowania angażujących bloków tekstowych jest niezbędne.

zacznij od myślenia Ellen Lupton z typem. (Jest też książka o tej samej nazwie.) Lupton jest autorytetem w dziedzinie typografii, a jej informacje sprawią, że w mgnieniu oka będziesz myślał jak Typograf.

wskocz do JavaScript

gdy zaczynasz czuć się całkiem dobrze z projektowaniem stron internetowych, rzuć sobie wyzwanie ponownie, aby nauczyć się JavaScript. Po HTML i CSS jest najważniejszym językiem w sieci.

JavaScript to narzędzie, które pozwala projektantom implementować złożone rzeczy i interakcje na stronach internetowych. To sprawia, że suwak lub animacja paralaksy ożywiają.

Learn JS ma interaktywny samouczek, który pomoże Ci zacząć.

Zaktualizuj swoje Portfolio

po rozpoczęciu projektowania dla sieci, upewnij się, że zaktualizowałeś swoje portfolio za pomocą projektów projektowania stron internetowych. Ta prosta akcja pomoże Ci pokazać sobie … i innym … że projektowanie stron internetowych jest częścią twojego repertuaru.

zaktualizowane portfolio może pomóc potencjalnym klientom zobaczyć, jak wygląda Twój „styl”. Pamiętaj, aby zaprezentować układy, kolory, typografię i różne techniki, które pokazują, co możesz zrobić.

rzuć sobie wyzwanie

dzięki tak wielu skrótom i fragmentom kodu, które pomogą Ci rozwiązać prawie każdy problem z witryną, nie leniw się. Pamiętaj, aby nieustannie stawiać sobie wyzwania, aby uczyć się nowych umiejętności, nowych technologii i stale ulepszać swoją grę w projektowaniu stron internetowych.

jedyną rzeczą w tej dziedzinie jest to, że ciągle się zmienia; zawsze jest coś nowego do nauczenia się lub wypróbowania.

zmaksymalizuj swoje doświadczenie

Wyjdź i zaprojektuj. Aby zostać projektantem stron internetowych, musisz zacząć projektować strony internetowe.

zacznij od małych, ale podejmuj projekty z innymi. Poproś o dołączenie do projektu z zespołem w pracy. Zrób małą stronę dla przyjaciela. Im więcej masz doświadczenia w budowaniu stron internetowych, tym lepiej i szybciej otrzymasz.

na co czekasz? Przestań zwlekać.

poproś o opinię

wykorzystaj swoją sieć do zbierania opinii na temat projektów projektowania stron internetowych, bez względu na to, jak małe są one według ciebie. Posłuchaj tej opinii-nawet jeśli ci się nie podoba i zobacz, czego możesz się nauczyć.

poza preferencjami wizualnymi, czy osoba udzielająca opinii proponowała sugestie, aby strona działała lepiej? Czy mogą łatwo zrozumieć cel projektu? Połączyli się z wiadomościami?

Ucz się nowych rzeczy

aby być świetnym projektantem stron internetowych, musisz po prostu grać, próbować i uczyć się nowych rzeczy. Zwróć uwagę na Sieć i komunikuj się z innymi w tej dziedzinie, abyś mógł być na bieżąco z technikami i zmianami wizualnymi, które są pożądane.

Jeśli chcesz nauczyć się projektowania stron internetowych, prawdopodobnie jest to już coś, co regularnie robisz. Ale jest to dziedzina ewoluująca i zmienia się prawie każdego dnia. Zapytaj każdego, kto to robi.