Ak chcete navrhovať a vytvárať webové stránky, tento proces bude oveľa jednoduchší, ak plánujete dopredu. Vo fáze plánovania môžu dizajnér a klient spoločne nájsť formát a rozloženie, ktoré vyhovuje ich potrebám. Proces plánovania ovplyvňuje štýl alebo štýl webu, dalo by sa povedať, že toto je najdôležitejší aspekt webového dizajnu, najmä ak ide o obchodné účely.
Krok
Časť 1 zo 4: Vytvorenie základnej štruktúry
Krok 1. Určite funkciu webovej stránky
Ak si vytvárate osobnú stránku, pravdepodobne už poznáte odpoveď. Ak však vytvárate web pre inú organizáciu, spoločnosť alebo osobu, musíte zistiť, čo chcú a funkčnosť webu. Všetko, čo tu zadáte, sa prejaví po dokončení webovej stránky.
- Vyžaduje webová stránka Storefront? Mali by byť vznesené pripomienky užívateľov? Bude si používateľ musieť neskôr vytvoriť účet? Je článok na webovej stránke orientovaný? Alebo orientované na obrázok? Všetky tieto a ďalšie otázky vám pomôžu pri navrhovaní a navrhovaní stránky.
- Tento plánovací proces je možné nakresliť do výkresu, najmä ak je pre veľkú spoločnosť a na vytváraní tohto projektu sa podieľa mnoho ľudí.
Krok 2. Vytvorte diagram mapy webu (mapa stránky)
Diagram mapy webu je podobný vývojovému diagramu, ktorý ukazuje, ako sa používatelia presúvajú z jednej stránky na druhú. V tejto fáze nepotrebujete webovú stránku, iba všeobecný tok konceptov. Pomocou počítačového programu môžete vytvárať diagramy alebo kresliť svoje vlastné na papier. Tento diagram použite na demonštráciu konceptov hierarchického usporiadania a konektivity webových stránok.
Krok 3. Skúste metódu vypracovania karty
Jednou z obľúbených metód skupinového vývoja webu je použiť množstvo kariet na zistenie očakávaní všetkých. Vezmite si niekoľko poznámkových lístkov a na každú z nich si zapíšte základný obsah webovej stránky. Usporiadajte tieto karty spolu so svojim tímom a nájdite najlepší koncept. Táto metóda je vhodná na použitie, keď spolupracujete s inými na vytváraní webových stránok.
Krok 4. Použite papier a nástenku alebo tabuľu
Je to originálna metóda plánovania s malým rozpočtom, môžete rýchlo odstrániť alebo posunúť obsah a zmeniť tok. Nakreslite svoj webový design na papier a potom spojte papiere niťou alebo nakreslite na tabuľu čiary. Táto metóda je veľmi vhodná na použitie pri brainstormingoch.
Krok 5. Vytvorte inventár obsahu
V skutočnosti má tendenciu byť vhodnejšie ich použitie pri redizajne webov než v nových webových dizajnoch. Vložte každý dokončený obsah alebo webovú stránku do tabuľky. Poznamenajte si účel každého obsahu alebo stránky. Pomocou tohto zoznamu určte, čo chcete odstrániť a čo si ponechať. Štruktúru webu môžete zjednodušiť a neskôr aj proces redizajnu.
Časť 2 zo 4: Vytvorenie základného obrysu HTML
Krok 1. Vytvorte drôtový model na vytvorenie hierarchie webových stránok
Základná šablóna HTML je plánom webu, ktorý vytvoríte, pričom použijete iba najzákladnejšie značky a ukážkový obsah (bloky/šablóny). Tento rámec odpovedá na otázku „Čo je viditeľné na internete a kde?“Pri vytváraní tohto prehľadu nie je potrebné formátovanie a štýl.
- Pred výberom nastavenia štýlu si môžete zobraziť štruktúru a vývojový diagram obsahu so základným obrysom.
- Základné šablóny HTML nie sú statické ako súbory PDF alebo obrázky, môžete rýchlo prejsť ukážkovým obsahom a vytvoriť nové štruktúry.
- Základný rámec je interaktívny, čo prospieva webovým vývojárom aj klientom. Pretože je tento základný rámec napísaný pomocou jednoduchého kódu HTML, môžete sa v ňom stále pohybovať a vedieť, ako funguje prepínanie webových stránok. To sa nedá urobiť s PDF.
Krok 2. Skúste metódu Gray Box
Blokujte alebo zvýraznite obsah svojej webovej stránky v sivom poli, najdôležitejší obsah je v hornej časti. Zoraďte obsah v jednom stĺpci. Ak je napríklad stránka „O spoločnosti“, v hornej časti sú podrobné informácie o spoločnosti, za ktorými nasleduje zoznam zamestnancov, potom kontaktné informácie atď.
Nezahŕňa to hlavičky a päty. Gray Box je vizuálnym znázornením obsahu, ktorý sa objaví na webe
Krok 3. Skúste základný program na tvorbu obrysov
Existuje niekoľko programov, ktoré môžete použiť pri vytváraní základného webového rámca. Množstvo kódu (jazyka) webového programovania, ktoré musíte ovládať, je pre každý program odlišné. K niektorým z veľmi obľúbených programov patrí:
- Laboratórium vzorov. Táto stránka je venovaná „atómovému dizajnu“, pričom každý obsah je považovaný za „molekulu“, ktorá tvorí väčšiu webovú stránku.
- Jumpcharts. Táto webová stránka poskytuje služby webového plánovania a rámovania. Tieto stránky sú platené a vyžadujú si predplatné, ale webové rámce môžete vytvárať rýchlo bez toho, aby ste museli ovládať veľa kódu webového programovania.
- Wirefy. Wirefy je ďalší web, ktorý ponúka „atómový dizajn“. Weboví vývojári môžu tento nástroj získať zadarmo.
Krok 4. Použite jednoduché označenie HTML
Dobrá základná šablóna sa dá ľahko previesť na pôvodný web. Počas vytvárania tejto šablóny nad webovým stylingom príliš neuvažujte. Používajte značky, ktoré je možné ľahko pochopiť a zmeniť.
Jednoduchý základný rámec je oveľa lepší. Účelom vytvorenia značky je vytvoriť štruktúru. Vizuálny vzhľad je možné neskôr upraviť pomocou CSS a pokročilého značenia
Krok 5. Vytvorte základný obrys pre každú webovú stránku
Môžete byť v pokušení stotožniť každú webovú stránku s jedným základným obrysom. V skutočnosti to spôsobí, že váš web bude iba čistý a nudný. Vytvorte pre každú stránku iný obrys, pochopíte, že každá stránka potrebuje svoj vlastný dizajn.
Časť 3 zo 4: Vytváranie obsahu
Krok 1. Pred vytvorením webovej stránky pripravte obsah
Oveľa jednoduchšie bude zobraziť ukážku vášho webového zobrazenia, ak už máte skutočný obsah, namiesto použitia vzorov alebo zástupných symbolov. Nemusíte mať príliš veľa obsahu, ale vaša maketa bude vyzerať oveľa lepšie, ak použijete kópiu pôvodného obrázku.
Nemusíte mať všetok materiál k článku, ale aspoň by mal mať skutočný nadpis
Krok 2. Nezabudnite, že skvelý obsah nie je len text
Internet je oveľa zložitejší ako jednoduchá webová stránka s textom. Na to, aby ste vytvorili skvelú webovú stránku na prilákanie a pozývanie návštevníkov, potrebujete celý rad rôzneho obsahu. Napríklad:
- Obrázok.
- Hlas.
- Videá.
- Webový prenos alebo webový stream (Twitter)
- Integrácia Facebooku
- RSS
- Webový kanál
Krok 3. Požiadajte o pomoc profesionálneho fotografa
Ak chcete na svoje stránky zahrnúť fotografie, prvý dojem, ktorý zo svojho webu získate, bude oveľa lepší, ak bude naplnený profesionálnym fotografovaním. Jedna dobrá fotka má hodnotu viac ako dvadsať fotografií v nízkej kvalite.
Hľadaj čerstvého absolventa fotografického umenia ako lacnejšie riešenie ako profesionálneho fotografa, ktorý sa v brandži pohybuje už nejaký čas
Krok 4. Napíšte kvalitné články
Písomný obsah na webovej stránke určí množstvo vašej webovej návštevnosti. Aj keď si s tvorbou obsahu v tomto procese navrhovania príliš nemusíte lámať hlavu, nie je na škodu začať nad ním premýšľať, pretože obsah budete tiež potrebovať pravidelne, keď bude váš web v prevádzke.
Okrem obsahu článku je tu aj písomný materiál, ktorý musíte mať pri zostavovaní webovej stránky. Napríklad kontaktné informácie, názov spoločnosti alebo čokoľvek iné, čo bude na webe použité viackrát
Časť 4 zo 4: Premena konceptov na webové stránky
Krok 1. Usporiadajte základné prvky
Toto usporiadanie prvkov platí pre každú stránku na vašom webe, napríklad pre hlavičky, poznámky pod čiarou a navigačné ponuky. Nastavte ho vo veľmi jednoduchom štýle, aby ste mohli kontrolovať, ako všetky stránky vyzerajú. To je obzvlášť užitočné, keď postupujete do procesu rozloženia webu.
Nerobte si starosti s podrobnosťami, skúste si pozrieť ukážku (ukážku), ako hlavička vyzerá
Krok 2. Vytvorte jednoduché rozloženie
Začnite posunutím polohy hodín zo stĺpca základného obrysu na skutočné umiestnenie na stránke. Môžete napríklad presunúť ukážkovú navigačnú ponuku na ľavú stranu stránky a zoznam nadpisov napravo.
Pred pokračovaním k ďalšiemu kroku pokračujte v experimentovaní s rozložením webu na viacerých stránkach. Umožnite ostatným, aby sa na to pozreli, aby zistili, či vami vytvorené rozloženie pôsobí živo
Krok 3. Vytvorte maketu
Pomocou programu, ako je Photoshop, vytvorte makety alebo vzorové stránky svojho webu. Usporiadanie, ktoré ste zostavili, použite ako vodítko. Pomocou programu na spracovanie obrázkov môžete vytvárať makety rýchlejšie a dosiahnuť požadované výsledky. Výsledky týchto obrázkov možno neskôr použiť ako referenciu v procese písania kódu webového programovania.
Vložte skutočný obsah do makety, aby vyzeral dobre
Krok 4. Nahraďte koncept ukážky pôvodným obsahom
Pridajte obsah a prvky na webové stránky. Nastavenia webového štýlu zatiaľ nespotte, všetko naskladajte na správne miesto. Pomôže vám to neskôr skontrolovať zmeny webového štýlu.
Krok 5. Vytvorte sprievodcu webovým štýlom
Zvlášť pre veľké weby je veľmi dôležité zachovať kombináciu štýlov. Ak sú webové stránky určené na obchodné účely a už majú vlastnú značku alebo štýl, mali by ste to integrovať do dizajnu stránok. Čo je potrebné vziať do úvahy pri vytváraní sprievodcu štýlom webovej stránky:
- Navigácia
- Hlavná poznámka
- Odstavec
- Kurzíva
- Odvážna postava
- Odkazy (aktívne, neaktívne, pri umiestnení kurzora myši)
- Použitie obrázku
- Ikona
- Gombík
- zoznam
Krok 6. Aplikujte webový štýl
Akonáhle nájdete správny štýl a dizajn, implementujte ho. CSS je jedným z najľahších spôsobov implementácie štýlov na webovú stránku alebo na webovú stránku. Nasledujúce pokyny vám pomôžu lepšie porozumieť podrobnostiam používania CSS.
