Jak nauczyć się projektowania stron internetowych (w 9 krokach)

zrozumieć kluczowe pojęcia projektowania wizualnego

linia

każda litera, obramowanie i podział w układzie składa się z linii, które tworzą ich większą strukturę. Nauka projektowania stron internetowych oznacza zrozumienie zastosowań linii w tworzeniu porządku i równowagi w układzie.

kształty

trzy podstawowe kształty w projektowaniu wizualnym to kwadraty, okręgi i trójkąty. Kwadraty i prostokąty działają w przypadku bloków treści, kółka w przypadku przycisków, a Trójkąty są często używane w przypadku ikon towarzyszących ważnej wiadomości lub wezwaniu do działania. Kształty mają również poczucie emocji, z kwadratami związanymi z siłą, okręgi z harmonią i komfortem, a Trójkąty z znaczeniem i działaniem.

Tekstura

Tekstura replikuje coś w prawdziwym świecie. Dzięki teksturze mamy pojęcie, czy coś jest szorstkie, czy gładkie. Tekstury można zobaczyć podczas projektowania stron internetowych. Od tła przypominającego papier po kolorowe smugi Gaussa, pamiętaj o różnych rodzajach tekstur, które mogą uczynić twoje projekty bardziej interesującymi i nadać im poczucie fizyczności.

Kolor

aby tworzyć projekty, które nie są męczące dla oczu, powinieneś nauczyć się teorii koloru. Zrozumienie koła kolorów, uzupełniających się kolorów, kontrastujących kolorów i emocji, z którymi wiążą się różne kolory, sprawi, że będziesz lepszym projektantem stron internetowych.

siatki

siatki mają swoje korzenie w najwcześniejszych czasach projektowania graficznego. Funkcjonują one tak dobrze, aby uporządkować obrazy, teksty i inne elementy w projektowaniu stron internetowych. Dowiedz się, jak strukturyzować układy sieciowe za pomocą siatek.

Poznaj podstawy HTML

Hypertext Markup language (HTML) zapewnia wskazówki dotyczące sposobu wyświetlania treści, obrazów, nawigacji i innych elementów Witryny w czyjejś przeglądarce internetowej. Chociaż nie musisz być ekspertem w dziedzinie HTML, nadal pomaga znajomość tego, jak to działa, nawet jeśli używasz wizualnej platformy projektowej, takiej jak Webflow.

znaczniki HTML są instrukcjami używanymi przez przeglądarkę do generowania strony internetowej. Nagłówki, akapity, linki i obrazy są kontrolowane przez te tagi. Będziesz szczególnie chciał wiedzieć, w jaki sposób tagi nagłówka, takie jak Tagi H1, H2 i H3, są używane do hierarchii treści. Oprócz wpływu na strukturę układu znaczniki nagłówka są ważne w tym, jak roboty sieciowe klasyfikują projekt i wpływają na ich wyświetlanie w organicznych rankingach wyszukiwania.

aby dowiedzieć się więcej o podstawowych pojęciach HTML (jest też sekcja o CSS), zapoznaj się z tą lekcją, którą przygotowaliśmy na Uniwersytecie Webflow.

zrozum CSS

CSS (lub kaskadowe arkusze stylów) zapewnia stylowanie i dodatkowe instrukcje dotyczące wyglądu elementu HTML. Wykonywanie takich czynności jak stosowanie czcionek, dodawanie wypełnień, ustawianie wyrównania, wybór kolorów, a nawet tworzenie siatek jest możliwe dzięki CSS.

Wiedza o tym, jak działa CSS, da ci umiejętności tworzenia unikalnych stron internetowych i dostosowywania istniejących szablonów. Omówmy kilka kluczowych pojęć CSS.

klasy CSS

Klasa CSS to lista atrybutów, które łączą się w stylizacji pojedynczego elementu. Coś takiego jak tekst może mieć czcionkę, rozmiar i kolor jako część jednej klasy CSS.

klasy combo CSS

Klasa combo jest zbudowana na istniejącej klasie bazowej. Dziedziczy wszystkie atrybuty, takie jak rozmiar, kolor i wyrównanie, które mogą już być na miejscu. Atrybuty mogą być następnie zmieniane w górę. Klasy Combo oszczędzają czas i pozwalają skonfigurować odmiany klasy, które można zastosować wszędzie tam, gdzie trzeba w projektowaniu stron internetowych.

Wiedza o tym, jak działa CSS, jest niezbędna podczas nauki projektowania stron internetowych. Jak wspomniano w sekcji dotyczącej HTML, zalecamy udanie się na Uniwersytet Webflow, aby dowiedzieć się więcej o tym, jak działa CSS.

Poznaj podstawy UX

UX to magia, która ożywia stronę internetową, przekształcając ją ze statycznego układu elementów w coś, co angażuje emocje kogoś przewijającego się przez nią.

kolorystyka, treść, typografia, układ i grafika łączą się, aby służyć odbiorcom. User experience design to precyzja i wzbudzanie uczuć. Oferuje komuś nie tylko płynną podróż, ale doświadczenie, które łączy go z podmiotem lub marką stojącą za projektowaniem stron internetowych.

oto kilka zasad UX, które musisz znać.

personas użytkownika

projektowanie stron internetowych oznacza zrozumienie użytkowników końcowych. Powinieneś nauczyć się, jak robić badania użytkowników i jak tworzyć personas użytkowników. Ponadto musisz wiedzieć, jak wykorzystać te informacje w tworzeniu projektu zoptymalizowanego pod kątem ich potrzeb.

architektura informacji

bez jasnej organizacji ludzie będą się mylić i odbijać. Architektura informacji i mapowanie treści zapewniają schemat współpracy witryny i każdej sekcji w celu zapewnienia jasnej podróży klienta.

przepływy użytkowników

konstruowanie przepływów użytkowników może wejść w grę, gdy pracujesz nad bardziej rozbudowanymi projektami projektowymi, ale lepiej będzie w przyszłości, jeśli zaczniesz myśleć o nich i budować je dla swoich wczesnych projektów. Przepływy użytkowników komunikują, w jaki sposób ludzie będą poruszać się po projekcie. Pomagają ustalić priorytety najważniejszych sekcji i upewnić się, że ludzie mają do nich dostęp.

Wireframes

Wireframes pokazuje, gdzie na stronie internetowej zostaną umieszczone nagłówki, tekst, wizualizacje, formularze i inne elementy. Nawet jeśli tworzysz prosty jednostronicowy projekt internetowy, mapowanie szkieletu daje solidny przewodnik do pracy. Gdy przechodzisz do bardziej skomplikowanych stron internetowych, szkielety są niezbędne do tworzenia spójnego środowiska, strukturyzowania układów i nie brakuje niczego, co należy uwzględnić.

Prototypowanie

prototypy mogą mieć różne poziomy wierności, ale działają jako reprezentacja funkcjonującego projektu. Obrazy, interakcje, zawartość i inne ważne elementy są na miejscu i powielają rzeczywisty projekt. Prototypy są używane w celu uzyskania informacji zwrotnych i dostrojenia projektu w całym procesie.

zapoznaj się z UI

interfejs użytkownika jest mechanizmem, który wprowadza w życie pewną technologię. Klamka jest interfejsem użytkownika. Regulacja głośności w radiu samochodowym, z którą twój znaczący inny nie przestanie się bawić, to interfejs użytkownika. A klawiatura, do której wprowadzasz kod PIN w bankomacie, to interfejs użytkownika. Tak jak przyciski i inne mechanizmy w realnym świecie pozwalają komuś na interakcję z maszynami, tak elementy interfejsu użytkownika na stronie internetowej pozwalają komuś na uruchamianie działań.

przyjrzyjmy się dwóm kluczowym zasadom interfejsu użytkownika: intuicyjnemu projektowi i prostocie.

jak tworzyć intuicyjne interfejsy

interakcja z witryną powinna być spójna i powtarzalna. Osoby lądujące na stronie internetowej powinny natychmiast zrozumieć systemy, które są na miejscu w poruszaniu się po niej.

zrób prosty interfejs użytkownika

interfejs istnieje, aby zoptymalizować użyteczność. Oznacza to, że sterowanie jest łatwe w użyciu, a także oczywiste w ich funkcjonalności. Niezależnie od tego, czy minimalizujesz liczbę opcji nawigacji, przyspieszasz proces realizacji zakupu, czy integrujesz inne interaktywne elementy zwiększające dostępność, zrozumienie interfejsu użytkownika pomoże Ci usprawnić interakcję z witryną.

oczywiście UI to rozległy temat, którego nie da się uchwycić w zaledwie kilku akapitach. Sugerujemy zapoznanie się z postem na blogu „10 essential UI (user interface) design tips” jako podkład do interfejsu użytkownika.

podobne odsłony: UX vs UI: kluczowe różnice każdy projektant powinien znać

zrozumieć podstawy tworzenia układów

nasze oczy automatycznie zwracają uwagę na pewne wzorce projektowe, co ułatwia projektowanie stron internetowych. Intuicyjnie wiemy, gdzie szukać, ponieważ widzieliśmy te same wzorce w kółko, jak konsumowaliśmy media przez całe nasze życie. Znajomość wzorców projektowych pomoże Ci stworzyć strony internetowe, które mają płynny przepływ do treści i wizualizacji. Dwa popularne wzorce układu internetowego, o których musisz wiedzieć, to wzorce z i wzorce F.

Z-pattern

w przypadku układów z oszczędnością słów i obrazów oraz dużą ilością negatywnej przestrzeni, z-pattern zapewnia skuteczny sposób na poruszanie się po stronie internetowej. Kiedy zaczniesz zwracać uwagę na to, gdzie twoje oczy przechodzą przez projekt, od razu rozpoznasz, kiedy Wzór Z jest na miejscu.

wzór F

projekty ciężkie od tekstu, jak w przypadku publikacji online lub bloga, często podążają za wyraźnym wzorem F. Po lewej stronie ekranu zobaczysz listę artykułów lub postów, a w głównej części strony zobaczysz wiersze powiązanych informacji. Ten wzór jest zoptymalizowany, aby dać ludziom wszystkie potrzebne informacje, nawet jeśli szybko je przeglądają.

podobne wątki: układ strony www: anatomia strony internetowej każdy projektant musi się nauczyć

poznaj typografię

czcionki mogą nadawać różne dźwięki lub emocje,a także wpływać na czytelność. Jeśli uczysz się o projektowaniu stron internetowych, umiejętność korzystania z typografii jest niezbędna.

Typografia służy kilku celom w projektowaniu stron internetowych. Po pierwsze, służy utylitarnemu celowi czytelności treści. Ale może również służyć jako dekoracja, a gustowne użycie stylizowanej typografii może dodać do ogólnej estetyki.

oto trzy podstawowe pojęcia typograficzne, które powinieneś znać.

Serif

czcionki Serif mają minuskułowe linie zwane serifami, które łaczą każdą literę. Ten styl typograficzny można przypisać do druku.

Bezszeryfowe

jak sama nazwa wskazuje, czcionki Bezszeryfowe nie mają linii identyfikujących czcionki serif. Te typy można znaleźć w cyfrowej sferze stron internetowych i aplikacji.

Display

krojniki są często używane w nagłówkach i mogą być duże i efektowne lub wykonane z ostrych, cienkich linii. Zazwyczaj mają wyrafinowane formy liter i mają przyciągnąć czyjąś uwagę.

podobne odsłony: projektowanie typograficzne: style czcionek i zasoby dla projektantów

wykorzystaj swoją wiedzę i zbuduj coś

możesz oglądać samouczki, czytać posty na blogu, zapisywać się na kursy online i absorbować całą teorię i informacje na temat projektowania stron internetowych, ale jedynym sposobem na zostanie projektantem stron internetowych jest rozpoczęcie projektowania stron internetowych.

zacznij od prostego projektu. Może ktoś, kogo znasz, potrzebuje pomocy w tworzeniu portfolio lub ma Zgiełk strony, któremu brakuje jakiejkolwiek obecności w sieci. Zaproponuj zaprojektowanie im czegoś za darmo.

blog to kolejny świetny projekt dla początkujących. Zapewni to praktyczne doświadczenie projektowe w nauce korzystania z rzeczy takich jak CMS, a także zapewni wizytówkę Twoich umiejętności pisania.

budowanie strony internetowej dla fałszywej firmy lub firmy to kolejne zabawne, kreatywne ćwiczenie w rozwijaniu projektu. Dodatkowo możesz dodać go do swojego portfolio.

Zdobądź mentora

mentorzy są cenni, ponieważ byli tam, gdzie jesteś — na samym początku — i mają pragnienie, aby pomóc ci przez ciężko zarobione lekcje, których się nauczyli. Mają głęboką studnię wiedzy i doświadczenia. Są doskonałym źródłem informacji zwrotnych na temat twojej pracy i znalezienia tego, co robisz dobrze i co wymaga poprawy.

szukając odpowiedniego mentora, upewnij się, że znajdziesz kogoś, kto robi projekt, który podziwiasz i specjalizuje się w tym, czego chcesz się nauczyć. Mentorzy mogą dać ci jasną ścieżkę z lat spędzonych w terenie, dzięki czemu nie musisz potykać się o naukę projektowania stron internetowych.

żaden kod nie zapewnia łatwego wejścia do projektowania stron internetowych

nie tak dawno temu był czas, kiedy trzeba było mieć głębokie zrozumienie HTML i CSS, aby ręcznie napisać kod za projektowaniem stron internetowych. Obecnie, bez narzędzi kodowych, takich jak Webflow, można stworzyć stronę internetową i uruchomić ją w krótkim czasie. To, co zajęło dni lub tygodnie, może teraz wydarzyć się w godzinach.

oczywiście, tak wiele idzie w tworzeniu dobrego projektu strony internetowej. Poznanie podstaw projektowania wizualnego, podstaw UI i UX oraz wiedzy o tym, jak funkcja front-end I back-end sprawi, że będziesz bardziej wszechstronnym projektantem.

niezależnie od tego, czy dopiero zaczynasz, czy jesteś ekspertem, Webflow oferuje intuicyjną platformę wizualną, która pomoże Ci w realizacji twojej kreatywności. Oprócz łatwego w użyciu sposobu uruchamiania witryn internetowych, Webflow ma całą społeczność, która udziela porad i pomaga podnosić swoje umiejętności. Czekamy na Twoją pracę w naszym Showcase.