Jak zrobić schemat strony internetowej

Gdy Twoja strona internetowa firmy wykracza poza podstawowy schemat witryny, możesz zacząć podejmować decyzje dotyczące tego, co dzieje się na poszczególnych stronach. Schemat witryny lub szkieletowy przedstawia nakrętki i rygle funkcjonalności strony bez uwzględniania elementów projektu, schematów kolorów, stylów czcionek lub elementów interaktywnych. Potraktuj schemat jako plan piętra i gotową stronę jako umeblowany pokój. Zamiast odmalowywać ściany i zmieniać meble lub zmieniać meble, aby zmienić sposób łączenia stron, możesz planować przestrzeń online za pomocą pól i symboli zastępczych, które określają sposób działania stron witryny.

1.

Wymień powtarzające się przedmioty, które pojawią się na Twoich stronach. Należą do nich elementy takie jak logo, nawigacja po stronie, obszary zdjęć, obszary tekstowe, nagłówki, stopki i paski boczne.

2.

Narysuj diagram pokazujący względne rozmiary elementów strony oraz ich pozycje pionowe i poziome. Możesz szkicować ten diagram na papierze, przerabiać go w programie do edycji grafiki lub ilustracji lub zestawić go za pomocą aplikacji wireframingowej online.

3.

Utwórz diagram strony dla każdego typu strony, której wymaga twoja strona internetowa. Twoja strona główna może zawierać inny podzbiór elementów strony niż strona produktu lub usługi, strona kontaktowa lub blog.

4.

Użyj tekstu zastępczego, aby wskazać, gdzie pojawia się słówka. Możesz wybrać między serifami serif i sans serif, ale schemat nie jest miejscem eksperymentów i demonstracji stylu.

5.

Opisuj swoje wireframe z uwagami o tym, jak działają elementy i gdzie się łączą. Dodaj ikony, które zawierają linki do zewnętrznych stron lub usług, w tym RSS, Twittera, Facebooka oraz witryn partnerów lub producentów.

6.

Obieguj swoje wireframe do przeglądu, dyskusji i zatwierdzenia, zmieniając je w razie potrzeby. Kiedy osiągniesz punkt, w którym Twoje schematy zawierają wszystkie powtarzające się elementy, których wymagają twoje rzeczywiste strony, a względna pozycja i rozmiar elementów pasuje do potrzeb twojej strony internetowej, możesz przejść dalej niż etap szkieletowy.

Wskazówki

• Schematy stron internetowych zazwyczaj poprzedzają makiety i prototypy w procesie projektowania. Makiety przedstawiają schematy kolorów, style i inne szczegóły projektu w formularzach, które rzeczywiście planujesz wdrożyć. Prototypy wykraczają poza makiety i ściśle sformatowane przykłady pokazujące prawdziwy wygląd strony.
• Jeśli planujesz utworzyć wersję witryny na urządzenia mobilne, a także przeglądarkę, być może będziesz musiał opracować schematy dla więcej niż jednego przepływu projektu.
• Jeśli narysujesz swoje schematy ręcznie, użyj kolorowych długopisów lub ołówków, aby podkreślić konkretne obszary układów stron, które mają większe znaczenie w procesie projektowania lub rozwoju. Na przykład możesz wybrać konkretny kolor do przedstawienia modułów, które mają być kodowane przez konkretną osobę. Te kolory wskazują elementy planowania, a nie wybory projektowe.

Ostrzeżenie

• Jeśli opracujesz swoje schematy w narzędziu do projektowania stron internetowych i utworzysz CSS dla swoich modeli krawędziowych, unikaj przekształcania fazy projektowania stron w projekt. Modele szkieletowe przenoszą cechy, a nie styl.