Ak chcete rozvíjať a vytvoriť si stránku, potom všetko pôjde oveľa jednoduchšie, ak trávite nejaký čas na jeho plánovaní. Plánovacia fáza umožňuje vývojárovi a klientovi spolupracovať, až kým nenájdu formát a usporiadanie, ktoré zodpovedajú ich potrebám. Proces plánovania ovplyvňuje výber štýlu stránky a prípadne je najdôležitejším aspektom webového dizajnu, najmä pre podnikanie.

Kroky

Časť 1 z 4:

Vytvorenie základnej štruktúry

jeden. Určite funkčnosť stránky. Ak vytvoríte webovú stránku pre seba, pravdepodobne poznáte odpoveď na túto položku. Ak vytvoríte stránku pre inú osobu, spoločnosť alebo organizáciu, je potrebné zistiť, čo očakávajú od lokality a jeho funkčnosti. Všetko, čo sa rozhodnete, bude mať vplyv na poslednú stránku.

Potrebujete elektronický obchod? Potrebujete pripomienky používateľa? Mali by používatelia používať účet? Potrebujete webovú stránku orientovanú stránku? Obraz orientovaný? Všetky tieto a mnohé ďalšie otázky pomôžu naplniť návrh a štruktúru stránky.
Môže to byť dlhý proces, najmä pre veľké spoločnosti s veľkým počtom ľudí zapojených do projektu.

Obrázok s názvom Plán webovej stránky Krok 2

2. Vytvorte si stránku mapy webových stránok. Schéma mapy - ako bloková schéma, ukazuje, ako sa používatelia presúvajú z jednej stránky do druhej. V tomto bode si ani nepotrebujete stránky, len celkový tok nápadov. Môžete použiť počítačový program na vytvorenie diagramu alebo načrtnúť sami na hárku papiera. Použite schému mapy stránky, aby ste ukázali, ako si predstavujete hierarchiu webových stránok a komunikácie (pripojenia).

Obrázok s názvom Plán webovej stránky Krok 3

3. Skúste triediace karty. Populárnou metódou pre skupinu je použitie kartových stohov, aby zistili dokonalý prístup každej. Vezmite stoh kariet pre poznámky a e-mail na hlavný obsah jednej stránky na každom z nich. Nechajte svoj tím organizovať karty, aby boli považované za najužitočnejšie. Je to najlepšie pre situácie, keď spolupracujete s ostatnými, aby ste vytvorili webovú stránku.

Obrázok s názvom Plán webovej stránky Krok 4

4. Použite papierovú a bulletinovú dosku alebo palubu. Toto je pôvodná low-rozpočtová metóda plánovania, umožňuje rýchlo odstrániť alebo presunúť obsah a presmerovať. Nakreslite návrh na papier a pripojte ich do sekvencie alebo nakreslite okruh na doske. Skvelé pre Brainstorming.

Obrázok s názvom Plán webovej stránky Krok 5

päť. Urobte obsah inventára. Je oveľa ľahšie ho redo ako nové stránky. Zadajte každú časť obsahu alebo existujúcich stránok v tabuľke. Zaznamenajte si vymenovanie každého z nich, potom použite tento zoznam, aby ste zistili, čo sa deje a čo zostáva. To pomôže znížiť tú najlepšiu časť a zjednodušiť proces redesign.

Časť 2 zo 4:

Vytvorenie HTML-rám

jeden. Vytvorte rám (konštrukčné schémy stránky) na pomoc pri zabezpečenej hierarchii. HTML-rám je budúcnosť BonECLOTH, ktorá používa iba najzákladnejšie tagy a bloky na prezentáciu obsahu. Odpovedá na otázku: "Čo je na obrazovke a kde?". Formátovanie a štýl sú úplne ignorované v ráme.

Rámec vám umožňuje vidieť štruktúru obsahu a prúdenie až do výberu štýlu.
HTML Rámy nie sú statické ako PDF súbory alebo obrázky, umožňujú rýchlo presunúť bloky obsahu na vytvorenie novej štruktúry.
Rám je interaktívny, čo je prospešné pre vývojára aj klienta. Vzhľadom k tomu, rám je napísaný v jednoduchom HTML, potom sa môžete na ňom stále pohybovať a cítiť, ako beží medzi stránkami. To je to, čo nemôže byť vyjadrené prostredníctvom konceptu PDF.

Obrázok s názvom Plán webovej stránky Krok 7

2. Vyskúšajte metódu šedého boxu (sivé pole). Umiestnite obsah svojej stránky do sivého polia s najdôležitejším obsahom na samom vrchole. Bloky sa nachádzajú v jednom stĺpci, s najdôležitejšou časťou obsahu na stránke na vrchole. Ak je napríklad stránka o spoločnosti (približne), podrobnosti o spoločnosti by mohli prejsť na horný blok, za ktorým nasleduje zoznam zamestnancov, potom kontaktujte informácie a tak ďalej.

Nezahŕňa hornú a pätu. Šedé polia je len vizuálne znázornenie obsahu, ktorý sa nachádza na stránke.

Obrázok s názvom Plán webovej stránky Krok 8

3. Skúste použiť program WIREFRAMING. Existuje niekoľko programov, ktoré vám môžu pomôcť v procese vytvorenia interaktívneho dizajnového prototypu (drôtový prostriedok). Výška znalosti zdrojového kódu sa líši od programu do programu. Tu sú niektoré z najobľúbenejších programov:

Vzor Lab.Táto stránka sa špecializuje na "Atómový dizajn", kde sa zdá, že každá časť obsahu "molekula", ktorý tvorí veľkú stránku.

Jumpcharts. Toto je stránka plánovania servisného servisného servisného servisu pre interaktívny dizajnový prototyp.Vyžaduje si zaplatené predplatné, ale umožňuje vám rýchlo vybudovať stránky blokové diagramy, bez toho, aby ste sa starali o prácu s kódom.

Wirefy. Drôtený iným systémom"atómový projekt". Všetky nástroje sú k dispozícii zadarmo pre vývojárov.

Obrázok s názvom Plán webovej stránky Krok 9

4. Použite jednoduchú značku HTML. Dobrý rám možno ľahko previesť na aktuálne miesto neskôr. Nebojte sa vo všeobecnosti o štýle v procese vytvárania interaktívneho prototypového dizajnu. Namiesto toho použite značku, ktoré možno ľahko pochopiť a zmeniť s malým úsilím.

"Menej" znamená "viac" s rámom. Cieľom je jednoducho postaviť štruktúru. Vzhľad môže byť nastavený neskôr s CSS a rozšíreným značkou.

Obrázok s názvom Plán webovej stránky Krok 10

päť. Urobte rám pre každú stránku na vašej stránke. Môže byť lákavé, aby urobili jednoduchý rám a povedal: "Cool, môžem ho použiť na každú stránku, vyhovuje mi". V skutočnosti to povedie k vytvoreniu bežnej a nudnej stránky. Tráviť čas na vytvorenie interaktívneho prototypového dizajnu každej stránky a čoskoro zistíte, že každá stránka má vlastné organizačné "potreba".

Časť 3 zo 4:

Vytvorenie obsahu

jeden. Pripravte si nejaký obsah pred začatím vytvárania webovej stránky. To bude oveľa jednoduchšie vidieť, ako vyzerá štýl lokality, ak máte skutočný obsah namiesto prázdnych polí. Nepotrebujete príliš veľa informácií, ale všetko bude vyzerať oveľa lepšie v rozloženiach, ak máte nejaký materiál pre články a originálne obrázky.

Nepotrebujete objemovú časť článku, ale musíte mať aspoň skutočné titulky.

Obrázok s názvom Plán webovej stránky Krok 12

2. Pamätajte, že dobrý obsah je viac ako text. Internet - Je oveľa viac ako jednoduché textové stránky. Ak chcete vyniknúť vo vašom výklenku, budete potrebovať veľa rôznych typov obsahu na prilákanie návštevníkov. Niektoré možné obsah na zapamätanie:

Fotografia.

Zvuk

Video

Vlákna alebo prúd (Twitter)

Integrácia Facebook

RSS (z angličtiny. Skutočne jednoduché syndikácie - štandardizovaný obsahový systém)

NOVINKA NOVINKY

Obrázok s názvom Plán webovej stránky Krok 13

3. Vyberte si profesionálneho fotografa. Ak pridáte fotografie na svoje stránky, potom s profesionálnou fotografiou, prvé dojmy z toho bude oveľa lepšie. Jedna dobrá fotografia je viac ako 20 zlá.

Práca nováčikov fotografi budú oveľa lacnejšie ako diela skúsených profesionálov.

Obrázok s názvom Plán webovej stránky Krok 14

4. Kvalitné predmety. Písomný obsah na vašej stránke určí obrovské množstvo webovej prevádzky. Aj keď sa nepotrebujete príliš veľa o vytváraní obsahu v tejto fáze procesu navrhovania, nebudete ublížiť a premýšľať o tom, pretože obsah bude musieť pravidelne vytvoriť, keď "Život inšpirácie" na mieste.

Po písaní článkov veľa vecí, ktoré budete s najväčšou pravdepodobnosťou použiť v procese vytvárania webovej stránky. To môže zahŕňať kontaktné informácie, názvy firiem alebo niečo iné, ktoré sa použijú na niekoľkých miestach na stránke.

Časť 4 zo 4:

Zapnutie nápady na stránke

jeden. Vyvinúť spoločné prvky. Toto sú tie veci, ktoré sú viditeľné na každom Pheette, ako sú: horná a stopa, navigačné menu. Vytvorte veľmi jednoduchý štýl, takže môžete vidieť, ako sa všetky vaše stránky pozerajú na mieste. Bude to veľmi užitočné pri prechode k procesu vytvorenia usporiadania.

Nebojte sa príliš veľa o detailoch, ale pokúste sa ich urobiť takmer rovnaké, keď by sa všetko malo vzhľad.

Obrázok s názvom Plán webovej stránky Krok 16

2. Vytvorte základný plán (ubytovanie). Začnite s pohybom vodiaceho rámca z jedného stĺpca vo svojich všeobecne akceptovaných miestach na stránke. Napríklad môžete presunúť navigačný blok na ľavú stranu stránky a zoznam hlavičiek - vpravo.

Pokračujte v experimentovaní s umiestnením pre viac stránok pred prejdením. Nechajte ostatným kontrolovať, aby videli, ako sú onorganizované.

Obrázok s názvom Plán webovej stránky Krok 17

3. Vytvorte rozloženie. Použite program (napr. Photoshop) na vytvorenie rozloženia niekoľkých stránok stránok. Použite rozloženie, ktoré ste si vybrali ako sprievodca. Môžete pracovať oveľa rýchlejšie v programe na úpravu obrázkov a získať všetko v tomto formulári, ako potrebujete. To vám umožní používať tieto obrázky ako odkazy, keď príde skutočný kód.

Pridajte tento obsah na usporiadanie, aby ste sa uistili, že všetko vyzerá dobre.

Obrázok s názvom Plán webovej stránky Krok 18

4. Vymeňte obsah blokov. Začnite pridávať systém a položky na stránku. Nebojte sa o štýl, len umiestnite všetko na správnom mieste. To vám pomôže naučiť sa, či vaše zmeny štýlu budú fungovať.

Obrázok s názvom Plán webovej stránky Krok 19

päť. Vytvorte Sprievodcu štýlom. Je veľmi dôležité udržiavať štýl spojiva, najmä pre veľké miesta. Ak je stránka pre obchod, ktorý už má vizuálnu značku, musí byť zahrnutý do dizajnu lokality. Veci, ktoré treba zvážiť v príručke, uverejní:

Navigácia

Hlavičky (

,

, ATĎ.)

Odseky

Talianska (kurzíva)

Odvážne (tučné)

Referencie (aktívne, neaktívne, plávajúce)

Pomocou obrázka

Ikony

Tlačidlá

Zoznamy

Obrázok s názvom Plán webovej stránky Krok 20

6. Použite svoj štýl. Akonáhle štýl a dizajn pre stránku, prichádza čas na implementáciu. CSS je jedným z najjednoduchších spôsobov, ako predať štýl pre celú stránku alebo celú stránku. Prečítajte si túto príručku pre viac informácií o používaní CSS.