Jak zaprojektować stronę internetową dla początkujących

PATRYK KRUK

18.05.2024

pobierz

To nie jest profesjonalny poradnik w stylu „Od Zera Do Mastera”. To po prostu proces, którego używałem do tworzenia i projektowania stron internetowych bez doświadczenia w projektowaniu i był dla mnie bardzo pomocny. Wiem, że wiele osób ma problemy z rozpoczęciem projektowania strony internetowej od zera, dlatego chciałem podzielić się ze wszystkimi moim procesem.

Pierwszą rzeczą, którą musisz zrobić, to zapoznać się z projektami, które wyglądają dobrze i są praktyczne. Lubię odwiedzać ThemeForest i przeglądać wszystkie najwyżej oceniane motywy Wordpress i po prostu studiować wszystkie sposoby porządkowania treści. Wtedy możesz pożyczyć kilka rzeczy tu i tam i stworzyć coś własnoręcznie. Nie każdy projekt to czysta, oryginalna treść. Projektowanie prawie zawsze opiera się na czymś innym lub jest czymś inspirowane. To pomaga zakodować sobie w podświadomości dobre pojęcie o różnych dostępnych układach stron, jakich się używa.

Jest tam więcej typowych projektów, które można znaleźć w zwykłych firmach. To trochę tak, jak na pokazach mody. Można zobaczyć wiele niesamowitych rzeczy, ale czasami te rzeczy będą za bardzo niesamowite. Weź to również pod uwagę. Może jeśli pracujesz nad jakimś startupem z branży zaawansowanych technologii, niektóre z tych projektów mogą się sprawdzić, ale jeśli tworzysz strony internetowe dla małych i średnich firm, to lepiej używać czegoś stonowanego.

Kiedy już znajdziesz kilka rzeczy, które Ci się podobają, łatwiej będzie narysować projekt na papierze. Możesz skleić 4-5 kawałków papieru i zacząć ołówkiem, a skończyć markerem. Oczywiście to tylko ogólny model szkieletowy. Nic szalonego.

Potem weź ten projekt i spróbuj odtworzyć za pomocą Figmy. Udoskonal i ulepsz, dodając kolory, obrazy, tekst i odpowiednie odstępy.

Załóżmy, że Klientowi się to spodobało, ale miał pewne uwagi i chciał dodatkowych rzeczy lub coś zmienić, co jest normalne. Przyjmujesz te opinie, bawisz się w Figmie i wysyłasz projekt, mając nadzieję, że tego właśnie chcą.

Teraz tak naprawdę wszystko zaczyna układać się w całość, od kartki papieru do Figmy. To jest proces, żeby rozpocząć projektowanie strony internetowej. A teraz szczegółowe informacje na temat tego, JAK lubię projektować strony internetowe.

Dla wyjaśnienia nie jestem z wykształcenia projektantem. Oto rzeczy, których nauczyłem się podczas całego procesu, a które przyniosły pewien sukces i ułatwiły cały proces.

Numer 1: Ważne jest, aby zrozumieć hierarchię wizualną i układ witryny internetowej, czyli które elementy są ważne, a które nie. Chcesz, aby najważniejsze informacje były widoczne, a nie ukryte za innymi elementami.

Bardzo podoba mi się ten film o projektowaniu landing page, który porusza kwestię hierarchii wizualnej, kreatywnego projektowania i białej przestrzeni. Podobają mi się również informacje zawarte w tym krótkim filmie na temat białej przestrzeni.

Biała przestrzeń jest BARDZO WAŻNA. Widzę wiele portfolio i stron internetowych w Internecie, w których treść jest zbyt blisko siebie. Nie ma miejsca do oddychania, a projekt wydaje się zagracony. Na przykład we wszystkich moich witrynach mam dopełnienie o wielkości 50 pikseli u góry i u dołu dla każdej sekcji witryny na urządzeniach mobilnych, aby treść była równomiernie rozmieszczona z dala od krawędzi treści powyżej i poniżej. Czasami widzę, że te sekcje mają tylko 10-20 pikseli przestrzeni, a to po prostu nie wystarczy. Następnie na komputerze zwiększam go do 75-100 pikseli dla moich dużych głównych sekcji. Twój tekst powinien mieć wysokość linii ~1.7rem, aby zapewnić najbardziej optymalne odstępy i łatwą czytelność. A jeśli chcesz umieścić nagłówek nad tekstem, upewnij się, że jest on co najmniej 1,5 razy większy od rozmiaru czcionki tekstu, aby zachować dobrą hierarchię wizualną. Lubię je pogrubiać i lekko pokolorować, aby pomóc je oddzielić i zwrócić na nie uwagę.

W przypadku struktury witryny lubię robić tak:

LANDING

• h1 - Główny nagłówek z najważniejszymi słowami kluczowymi
• h2 - Krótki opis usług związanych z h1
• 1-2 przyciski CTA (jaka jest pierwsza rzecz, którą chcesz, aby zrobił klient, gdy trafi na Twoją witrynę?)

USŁUGI

• Co oni robią? Jakie problemy rozwiązują? Zwykle lubię robić karty do tych sekcji. Może jakieś ikony dla dodania koloru

O NAS

• Historia firmy, kim jest, dlaczego jest ekspertem itp. Pozwól klientowi poznać firmę, pomoże mu to uczłowieczyć ją i lepiej się z nią zapoznać. To tutaj klient sprzedaje siebie i mówi dlaczego jest najlepszym wyborem

DODATKOWA ZAWARTOŚĆ

• To może być wszystko. Google lubi widzieć treść i polecam dodać co najmniej 1200 słów na Twojej stronie głównej. Lubię używać środkowej części witryny, aby dodawać dodatkowe treści dotyczące słów kluczowych i oferowanych usług. Pomaga w lepszym rankingu. Umieszczam to tutaj, ponieważ ludzie mają tendencję do zapamiętywania pierwszej i ostatniej części strony. Dlatego na górze mamy usługi, ponieważ chcemy, aby ludzie pamiętali, czym się zajmują, a referencje na dole, aby pamiętali miłe rzeczy, które ludzie mają do powiedzenia na ich temat, i stanowili dla nich ostatnią zachętę do wybrania ich według swoich potrzeb. Umieść więc swoją dodatkową treść pośrodku. To naprawdę działa. Lubię też umieszczać w tej sekcji „powody, dla których warto nas wybrać”.
• Ta sekcja może również zawierać dodatkową treść, którą klient może chcieć pokazać na swojej stronie. Może coś w stylu "krok po kroku, jak wygląda proces szacowania kosztów", lub wyróżnienie kilku produktów i usług, cokolwiek.

GALERIA/PORTFOLIO

• Zbiór najlepszych prac Twojego klienta.

RECENZJE/PORÓWNANIE DO KONKURENCJI

• Zakończ dobrym akcentem, aby ludzie pamiętali, dlaczego Twoje usługi są najlepsze i jakie problemy rozwiązują. Lubię linkować do dedykowanej strony z referencjami i dodawać wszystkie ich recenzje. To kopalnia treści. To organiczna, naturalna treść napisana przez prawdziwych ludzi, zawierająca wszystkie słowa kluczowe Twoich klientów. Referencje są DOSKONAŁE w przypadku bezpłatnych treści, które pomagają w pozycjonowaniu w Google. Dodaj jak najwięcej do tej strony.

STOPKA

• Umieść tutaj dane kontaktowe, być może mapę witryny, logo i linki do mediów społecznościowych

I to jest ogólny „układ” strony internetowej, który lubię robić. Kiedy już masz taką strukturę, łatwiej jest zaprojektować stronę internetową, ponieważ wiesz, JAKICH treści potrzebujesz i GDZIE powinny się znaleźć. To trochę jak malowanie po numerach, ale zamiast malować pędzlem i akrylem, malujesz treścią.

I to wszystko!

Po prostu zapoznaj się z dobrymi projektami i przestudiuj sposoby organizacji treści, przygotuj ogólną strukturę, narysuj ją na papierze, dopracuj w Figmie, użyj tego, aby wysłać do klienta do zatwierdzenia i wprowadzenia poprawek, a następnie opracuj na tej podstawie. Kiedy już to opanujesz, wszystko stanie się dużo łatwiejsze.

W Internecie jest mnóstwo świetnych artykułów na temat tego, jak być lepszym projektantem. Ale tak naprawdę nie widzę jednego dobrego procesu ani planu działania dla każdej witryny dla programistów dopiero rozpoczynających projektowanie. Przeglądanie wszystkich zasad i wytycznych dotyczących projektowania może być przytłaczające, a tak naprawdę nie widziałem żadnych dobrych zasobów, które pomogłyby uporządkować te informacje i stworzyć proces, w którym można będzie wykorzystać te elementy konstrukcyjne. . Chciałem więc napisać post, który będzie szybki i może mieć natychmiastowy wpływ na Twoją pracę projektową i pomóc Ci zacząć. Myślę, że bardzo pomaga wiedza, jak zaplanować witrynę internetową, a następnie pomaga korzystanie ze wszystkich innych samouczków i przewodników dotyczących projektowania, aby udoskonalić, ulepszyć i stworzyć coś wyjątkowego. Mamy nadzieję, że to pomoże!