Jeśli chcesz opracować i stworzyć witrynę, wszystko będzie dużo łatwiejsze, jeśli spędziłeś trochę czasu na planowaniu. Etap planowania pozwala deweloperowi i klientowi współpracować, dopóki nie znajdą formatu i układu, który pasuje do ich potrzeb. Proces planowania wpływa na wybór stylu witryny, a prawdopodobnie jest najważniejszym aspektem projektowania stron internetowych, zwłaszcza dla biznesu.

Kroki

Część 1 z 4:

Tworzenie podstawowej struktury

jeden. Określ funkcjonalność witryny. Jeśli utworzysz stronę internetową dla siebie, prawdopodobnie już znasz odpowiedź na ten przedmiot. Jeśli utworzysz stronę dla innej osoby, firmy lub organizacji, konieczne jest dowiedzieć się, czego oczekują od strony i jego funkcjonalności. Wszystko, co zdecydujesz, że będzie miał wpływ na ostatnią stronę.

Potrzebujesz sklepu elektronicznego? Potrzebujesz komentarzy użytkownika? Czy użytkownicy powinni używać konta? Potrzebujesz witryny zorientowanej na stronie internetowej? Zorientowany na obrazę? Wszystkie te i wiele innych pytań pomoże wypełnić projekt i strukturę witryny.
Może to być długi proces, zwłaszcza dla dużych firm z dużą liczbą osób zaangażowanych w projekt.

2. Utwórz schemat mapy witryny. Schemat mapy - jako schemat blokowy, pokazuje, jak użytkownicy przemieszczają się z jednej strony do drugiej. Nie potrzebujesz nawet stron w tym momencie, tylko całkowity przepływ pomysłów. Możesz użyć programu komputerowego, aby utworzyć diagram lub zarys siebie na kartce papieru. Użyj schematu mapy witryny, aby pokazać, jak wyobrażasz sobie hierarchię stron internetowych i komunikacji (połączenia).

3. Spróbuj sortować karty. Popularną metodą grupy jest użycie stosów kart, aby znaleźć idealne podejście do każdego. Weź stos kart do notatek i poczty elektronicznej głównej zawartości jednej strony na każdym z nich. Niech twój zespół organizuje karty, aby były uważane za najbardziej przydatne. Najlepiej jest dla sytuacji, gdy współpracujesz z innymi, aby utworzyć stronę internetową.

cztery. Użyj papieru i tablicy ogłoszeń lub tablicy. Jest to oryginalna metoda planowania niskiej budżetu, pozwala szybko usunąć lub przenieść zawartość i przekierować ją. Narysuj projektowanie na papierze i podłącz je do sekwencji lub narysuj obwód na płycie. Świetne do burzy mózgów.

pięć. Zrób treść zapasów. Znacznie łatwiej jest ponowić go niż nowe witryny. Wpisz każdą część treści lub istniejących stron w arkuszu kalkulacyjnym. Zapisz spotkanie z każdym z nich, a następnie użyj tej listy, aby określić, co się dzieje i co pozostaje. Pomoże to obniżyć najlepszą część i uprościć proces przeprojektowania.

Część 2 z 4:

Tworzenie ramki HTML

jeden. Utwórz ramkę (Strona schematy konstrukcyjne), aby pomóc w bezpiecznej hierarchii. HTML-Frame to przyszła strona bonekloth, która wykorzystuje tylko najbardziej podstawowe tagi i bloki do prezentacji treści. Odpowiada na pytanie: "Co jest na ekranie i gdzie?". Formatowanie i styl są całkowicie ignorowane w ramce.

Framework pozwala zobaczyć strukturę treści i przepływu do wyboru stylu.
Ramki HTML nie są statyczne, ponieważ pliki PDF lub obrazy, umożliwiają szybkie przemieszczanie bloków zawartości, aby utworzyć nową strukturę.
Rama jest interaktywna, która jest korzystna zarówno dla dewelopera, jak i klienta. Ponieważ ramka jest napisana w prostym HTML, nadal możesz się na niej poruszać i poczuć, jak biegnie między stronami. To nie można wyrazić przez koncepcję PDF.

2. Wypróbuj metodę szarej skrzynki (szare pole). Umieść zawartość strony na szarym polach z najważniejszymi treściami na samym szczycie. Bloki znajdują się w jednej kolumnie, z najważniejszą częścią zawartości na stronie na górze. Na przykład, jeśli strona jest stroną o firmie (o), szczegóły dotyczące firmy mogły przejść do górnego bloku, a następnie lista personelu, a następnie dane kontaktowe i tak dalej.

Nie obejmuje górnej i stopki. Szare pola to tylko wizualna reprezentacja treści, które zostaną znalezione na stronie.

3. Spróbuj użyć programu WIREFRAMING. Istnieje kilka programów, które mogą pomóc w procesie tworzenia interaktywnego prototypu projektowego (wireframing). Ilość wiedzy na temat kodu źródłowego zmienia się z programu do programu. Oto kilka najpopularniejszych programów:

Wzór laboratorium.Ta strona specjalizuje się w "Atomic Design", gdzie wydaje się każda część treści "cząsteczka", co stanowi dużą stronę.

Jumpcharts. Jest to miejsce usługi planowania usług serwisowych dla interaktywnego prototypu projektowego.Wymaga płatnej subskrypcji, ale pozwala szybko zbudować diagramy bloków stron, nie martwiąc się zbytnio o pracę z kodem.

Drapieżnik. Woday inny system"Projekt atomowy". Wszystkie narzędzia są dostępne bezpłatnie dla programistów.

cztery. Użyj prostego znacznika HTML. Dobra ramka może być łatwo konwertowana na rzeczywistą stronę później. Nie martw się ogólnie w stylu w procesie tworzenia interaktywnego projektu prototypowego. Zamiast tego użyj znacznika, które można łatwo zrozumieć i zmienić z niewielkim wysiłkiem.

"Mniej" oznacza "więcej" z ramą. Celem jest po prostu zbudować strukturę. Wygląd można regulować później z CSS i rozszerzoną marką.

pięć. Zrób ramkę dla każdej strony na swojej stronie. Może kusić, aby wykonać prostą ramkę i powiedzieć: "Fajnie, mogę zastosować go na każdą stronę, odpowiada mi". W rzeczywistości doprowadzi to do stworzenia zwykłej i nudnej witryny. Spędź czas na utworzenie interaktywnej konstrukcji prototypowej każdej strony, a wkrótce znajdziesz, że każda strona ma własną organizację "wymagania".

Część 3 z 4:

Tworzenie treści

jeden. Przygotuj pewne treści przed rozpoczęciem tworzenia strony internetowej. Znacznie łatwiej będzie zobaczyć, jak wygląda styl witryny, jeśli masz prawdziwe treści zamiast pustych pól. Nie potrzebujesz zbyt wielu informacji, ale wszystko będzie wyglądać znacznie lepiej w układach, jeśli masz jakiś materiał do artykułów i oryginalnych obrazów.

Nie potrzebujesz większej części artykułu, ale musisz przynajmniej mieć prawdziwe nagłówki.

2. Pamiętaj, że dobra treść jest czymś więcej niż tekstem. Internet - to znacznie więcej niż proste strony internetowe tekstowe. Aby wyróżnić się w swojej niszy, potrzebujesz wielu różnych rodzajów treści, aby przyciągnąć i posiadać odwiedzających. Niektóre możliwe treści do zapamiętywania:

Zdjęcia.

Audio

Wideo

Nici lub strumień (Twitter)

Integracja na Facebooku

RSS (z angielskiego. Naprawdę prosta syndykacja - standardowy system treści)

Wiadomości o treści kanale

3. Wybierz profesjonalny fotograf. Jeśli dodasz zdjęcia do swojej witryny, a następnie profesjonalną fotografią pierwsze wrażenia z tego będą o wiele lepsze. Jedno dobre zdjęcie jest ponad 20 złego.

Praca początkujących fotografów będzie znacznie tańsza niż dzieła doświadczonych specjalistów.

cztery. Napisz artykuły. Pisemna treść na twojej stronie określi ogromną ilość ruchu internetowego. Chociaż nie musisz zbyt wiele martwić o tworzenie treści na tym etapie procesu projektowania, nie zaszkodzisz i pomyślisz o tym, ponieważ treść będzie musiała regularnie tworzyć, kiedy "Inspiracja" W witrynie.

Po napisaniu artykułów wiele rzeczy, które najprawdopodobniej wykorzystasz w procesie tworzenia strony internetowej. Może to obejmować informacje kontaktowe, nazwy firmowe lub coś innego, co będzie używane w kilku miejscach na stronie.

Część 4 z 4:

Obracanie pomysłów na stronie

jeden. Rozwijać wspólne elementy. Są to te rzeczy, które są widoczne na każdym Phette, takie jak: górne i pofinowe, menu nawigacyjne. Utwórz bardzo prosty styl, dzięki czemu widać, jak wszystkie twoje strony będą wyglądać z nimi na miejscu. Będzie bardzo przydatny podczas przeprowadzki do procesu tworzenia układu.

Nie martw się zbytnio o szczegóły, ale spróbuj uczynić je prawie tak samo jak wszystko, co powinno wyglądać.

2. Utwórz podstawowy plan (zakwaterowanie). Zacznij przesunąć ramkę prowadzącej z jednej kolumny w ich ogólnie akceptowanych miejscach na stronie. Na przykład można przenieść blok nawigacyjny na lewą stronę i listę nagłówków - prawy.

Kontynuuj eksperymentowanie z umieszczeniem wielu stron przed przejściem. Niech inni sprawdzą ich, aby zobaczyć, jak są oneorganizowane.

3. Utwórz układ. Użyj programu (np. Photoshop), aby utworzyć układ kilku stron. Użyj układu wybranego jako przewodnik. Możesz pracować znacznie szybciej w programie, aby edytować obrazy i uzyskać wszystko w tym formularzu, ile potrzebujesz. Pozwoli to używać tych obrazów jako odniesień, gdy przyjdzie rzeczywisty kod.

Dodaj tę zawartość do układu, aby upewnić się, że wszystko wygląda dobrze.

Obraz zatytułowany Zaplanuj stronę internetową krok 18

cztery. Wymień zawartość bloków. Zacznij dodawać system i elementy na stronie. Nie martw się jeszcze o styl, po prostu umieść wszystko we właściwym miejscu. Pomoże to dowiedzieć się, czy zmiany stylu będą działać.

pięć. Utwórz przewodnik po stylu. Bardzo ważne jest utrzymanie stylu spoiwa, zwłaszcza dla dużych witryn. Jeśli witryna jest przeznaczona dla biznesu, która ma już markę wizualną, musi być włączony do projektu witryny. Rzeczy do rozważenia w instrukcji opublikuje:

Nawigacja

Nagłówki (

,

, ITP.)

Ustępy

Kursywa (kursywa)

Pogrubienie (pogrubienie)

Referencje (aktywne, nieaktywne, pływające)

Za pomocą obrazu

Ikony

guziki

Listy

6. Nałóż swój styl. Jak tylko styl i projekt na stronie, nadszedł czas na wdrożenie. CSS jest jednym z najłatwiejszych sposobów sprzedaży stylu dla całej strony lub całej witryny. Przeczytaj ten przewodnik, aby uzyskać więcej informacji na temat używania CSS.