Jeśli chcesz projektować i tworzyć strony internetowe, proces ten będzie znacznie łatwiejszy, jeśli zaplanujesz je z wyprzedzeniem. W fazie planowania projektant i klient mogą współpracować, aby znaleźć format i układ, który odpowiada ich potrzebom. Proces planowania wpływa na styl lub styl witryny, można powiedzieć, że jest to najważniejszy aspekt w projektowaniu stron internetowych, zwłaszcza jeśli jest to dla celów biznesowych.
Krok
Część 1 z 4: Tworzenie podstawowej struktury
Krok 1. Określ funkcję serwisu
Jeśli tworzysz witrynę osobistą, prawdopodobnie znasz już odpowiedź. Jeśli jednak tworzysz witrynę dla innej organizacji, firmy lub osoby, musisz dowiedzieć się, czego chcą i funkcjonalności witryny. Wszystko, co tutaj określisz, zacznie obowiązywać po zakończeniu strony internetowej.
- Czy strona wymaga Storefront? Czy należy dodawać komentarze użytkowników? Czy użytkownik będzie musiał później utworzyć konto? Czy artykuł na stronie jest zorientowany? Lub zorientowany na wizerunek? Wszystkie te i inne pytania pomogą Ci zaprojektować i zaprojektować stronę.
- Ten proces planowania można wciągnąć w rysunek, zwłaszcza jeśli dotyczy on dużej firmy i wiele osób jest zaangażowanych w tworzenie tego projektu.
Krok 2. Utwórz diagram mapy witryny (mapa witryny)
Diagram mapy witryny jest podobny do schematu blokowego, pokazującego, jak użytkownicy przechodzą z jednej strony na drugą. Na tym etapie nie potrzebujesz strony internetowej, wystarczy ogólny przepływ pojęć. Możesz użyć programu komputerowego do tworzenia diagramów lub szkicowania własnych na papierze. Użyj tego diagramu, aby zademonstrować koncepcje uporządkowania hierarchicznego i połączeń stron internetowych.
Krok 3. Wypróbuj metodę rysowania kart
Jedną z popularnych metod grupowego tworzenia stron internetowych jest użycie kilku kart, aby poznać oczekiwania każdego. Weź kilka karteczek i zapisz podstawową zawartość strony internetowej na każdej z osobna. Ułóż te karty razem ze swoim zespołem, aby znaleźć najlepszą koncepcję. Ta metoda jest odpowiednia, gdy współpracujesz z innymi przy tworzeniu stron internetowych.
Krok 4. Użyj papieru i tablicy ogłoszeń lub tablicy
Jest to oryginalna metoda planowania przy niewielkim budżecie, możesz szybko usunąć lub przesunąć zawartość i zmienić przepływ. Narysuj projekt strony internetowej na papierze, a następnie połącz papiery nitką lub narysuj linie na tablicy. Ta metoda jest bardzo odpowiednia do wykorzystania podczas sesji burzy mózgów.
Krok 5. Utwórz spis treści
W rzeczywistości wydaje się, że jest to bardziej odpowiednie do wykorzystania w przeprojektowaniu stron internetowych niż w nowych projektach internetowych. Wstaw każdy gotowy fragment treści lub stronę internetową do arkusza kalkulacyjnego. Zanotuj przeznaczenie każdego fragmentu treści lub strony, korzystając z tej listy, aby określić, co usunąć, a co zachować. Możesz uprościć strukturę sieci i uprościć później proces przeprojektowania.
Część 2 z 4: Tworzenie podstawowego konspektu HTML
Krok 1. Utwórz szkielet, aby ustalić hierarchię stron internetowych
Podstawowy szablon HTML to projekt witryny, którą zbudujesz, używając tylko najbardziej podstawowych tagów i przykładowej treści (bloki/szablony). Ten framework odpowiada na pytanie „Co i gdzie widać w sieci?” Formatowanie i stylizacja nie są wymagane przy tworzeniu tego konspektu.
- Możesz zobaczyć strukturę i schemat blokowy zawartości z podstawowym zarysem przed wybraniem ustawienia stylu.
- Podstawowe szablony HTML nie są statyczne, jak pliki PDF lub obrazy, możesz szybko przesuwać przykładową zawartość, aby tworzyć nowe struktury.
- Podstawowa struktura jest interaktywna, co przynosi korzyści zarówno programistom internetowym, jak i klientom. Ponieważ ta podstawowa struktura jest napisana za pomocą prostego kodu HTML, nadal możesz się po niej poruszać i wiedzieć, jak działa przełączanie stron internetowych. Nie można tego zrobić w formacie PDF.
Krok 2. Wypróbuj metodę Grey Box
Zablokuj lub zaznacz zawartość swojej strony internetowej w Gray Box, najważniejsza treść znajduje się na górze. Sortuj zawartość w jednej kolumnie. Na przykład, jeśli strona to „O firmie”, szczegółowe informacje o firmie znajdują się na górze, a następnie lista pracowników, następnie dane kontaktowe itp.
Nie obejmuje to nagłówków i stopek. Gray Box to wizualna reprezentacja treści, która pojawi się w sieci
Krok 3. Wypróbuj podstawowy program do tworzenia konturów
Istnieją różne programy, których możesz użyć w procesie tworzenia podstawowego frameworka internetowego. Ilość kodu programowania internetowego (języka), który musisz opanować, jest inna dla każdego programu. Niektóre z programów, które są dość popularne, to:
- Laboratorium wzorców. Ta strona jest poświęcona „atomowemu projektowi”, każda treść jest uważana za „cząsteczkę”, która tworzy większą stronę internetową.
- Wykresy skoku. Ta strona internetowa zapewnia usługi planowania i kadrowania oparte na sieci Web. Te witryny są płatne i wymagają subskrypcji, ale możesz szybko tworzyć frameworki internetowe bez konieczności opanowania dużej ilości kodu programowania internetowego.
- Wirefy. Wirefy to kolejna strona, która oferuje „atomowe projektowanie”. Twórcy stron internetowych mogą pobrać to narzędzie za darmo.
Krok 4. Użyj prostego znacznika HTML
Dobry szablon podstawowy z łatwością przekształci się w oryginalną witrynę. Podczas tworzenia tego szablonu nie myśl za dużo o stylach internetowych. Używaj znaczników, które można łatwo zrozumieć i zmienić.
Prosty podstawowy framework jest znacznie lepszy. Celem tworzenia znaczników jest zbudowanie struktury. Wygląd wizualny można później dostosować za pomocą CSS i zaawansowanych znaczników
Krok 5. Utwórz podstawowy zarys dla każdej strony internetowej
Możesz pokusić się o zrównanie każdej strony internetowej z jednym podstawowym zarysem. W rzeczywistości sprawi to, że Twoja witryna będzie prosta i nudna. Stwórz inny zarys dla każdej strony, zrozumiesz, że każda strona potrzebuje własnego projektu.
Część 3 z 4: Tworzenie treści
Krok 1. Przygotuj treść przed utworzeniem strony internetowej
Znacznie łatwiej będzie wyświetlić podgląd widoku internetowego, jeśli masz już rzeczywistą zawartość, zamiast korzystać z próbek lub symboli zastępczych. Nie musisz mieć zbyt dużo treści, ale Twoja makieta będzie wyglądać znacznie lepiej, jeśli użyjesz kopii oryginalnego obrazu.
Nie musisz mieć całego materiału do artykułu, ale przynajmniej powinien on mieć rzeczywisty nagłówek
Krok 2. Pamiętaj, że świetna treść to nie tylko tekst
Internet jest znacznie bardziej złożony niż zwykła strona internetowa z tekstem. Potrzebujesz różnorodnych treści, aby stworzyć świetną witrynę, która przyciąga i zaprasza odwiedzających. Na przykład:
- Zdjęcie.
- Głos.
- Filmy.
- Transmisja internetowa lub webstream (Twitter)
- Integracja z Facebookiem
- RSS
- Kanał internetowy
Krok 3. Poproś o pomoc profesjonalnego fotografa
Jeśli chcesz umieścić zdjęcia na swojej stronie, pierwsze wrażenie, jakie uzyskasz na swojej stronie będzie znacznie lepsze, jeśli będzie ona wypełniona profesjonalną fotografią. Jedno dobre zdjęcie jest warte więcej niż dwadzieścia zdjęć niskiej jakości.
Poszukaj świeżo upieczonego absolwenta sztuki fotograficznej jako tańszego rozwiązania niż profesjonalnego fotografa, który jest w branży od dłuższego czasu
Krok 4. Pisz artykuły wysokiej jakości
Pisemna treść na stronie internetowej określi ilość Twojego ruchu w sieci. Chociaż nie musisz się zbytnio martwić o tworzenie treści w tym procesie projektowania, nie zaszkodzi zacząć o tym myśleć, ponieważ będziesz również potrzebować treści regularnie, gdy Twoja witryna będzie już działać.
Oprócz treści artykułu, istnieje materiał pisemny, który musisz mieć również w procesie kompilacji strony internetowej. Na przykład informacje kontaktowe, nazwa firmy lub cokolwiek innego, co będzie wielokrotnie używane w witrynie
Część 4 z 4: Przekształcanie pojęć w strony internetowe
Krok 1. Ułóż podstawowe elementy
Taki układ elementów, takich jak nagłówki, przypisy i menu nawigacyjne, dotyczy każdej strony w witrynie. Skonfiguruj go w bardzo prostym stylu, abyś mógł sprawdzić, jak wyglądają wszystkie strony. Jest to szczególnie przydatne, gdy przechodzisz do procesu tworzenia układu strony.
Nie przejmuj się zbytnio szczegółami, spróbuj wyświetlić podgląd (podgląd) wyglądu nagłówka
Krok 2. Utwórz prosty układ
Zacznij od przesunięcia pozycji zegara z kolumny zarysu podstawy do rzeczywistej lokalizacji na stronie. Na przykład możesz chcieć przenieść przykładowe menu nawigacyjne w lewo, a listę nagłówków w prawo.
Eksperymentuj z układami stron internetowych dla wielu stron, zanim przejdziesz do następnego kroku. Pozwól innym spojrzeć na to, aby zobaczyć, czy układ, który tworzysz, wydaje się żywy
Krok 3. Stwórz makietę
Użyj programu takiego jak Photoshop, aby stworzyć makiety lub przykładowe strony swojej witryny. Użyj układu, który skompilowałeś jako przewodnika. Możesz szybciej tworzyć makiety i uzyskiwać pożądane rezultaty za pomocą programu do przetwarzania obrazu. Wyniki tych obrazów można później wykorzystać jako odniesienie w procesie pisania kodu programowania internetowego.
Umieść rzeczywistą treść w makiecie, aby wyglądała dobrze
Krok 4. Zastąp przykładową koncepcję oryginalną treścią
Dodawaj zawartość i elementy do stron internetowych. Na razie nie przejmuj się ustawieniami stylu internetowego, po prostu ułóż wszystko we właściwej lokalizacji. Pomoże Ci to przejrzeć zmiany stylu internetowego, które dokonasz później.
Krok 5. Utwórz internetowy przewodnik po stylu
Bardzo ważne jest, aby zachować mieszankę stylów, szczególnie w przypadku dużych witryn. Jeśli witryna jest przeznaczona do celów biznesowych i ma już własną markę lub styl, należy to uwzględnić w projekcie witryny. Rzeczy do rozważenia podczas tworzenia przewodnika po stylu strony internetowej:
- Nawigacja
- Nuta głowy
- Ustęp
- Kursywa
- Pogrubiona postać
- Linki (aktywne, nieaktywne, najedź)
- Wykorzystanie obrazu
- Ikona
- Pokrętło
- lista
Krok 6. Zastosuj styl sieciowy
Gdy znajdziesz odpowiedni styl i projekt, zaimplementuj go. CSS to jeden z najłatwiejszych sposobów implementacji stylów na stronie internetowej lub w całej witrynie. Zapoznaj się z poniższymi instrukcjami, aby lepiej zrozumieć szczegóły korzystania z CSS.
