Ako naplánovať webovú stránku?

Vytvorte drôtový model, ktorý pomôže upevniť hierarchiu. Drôtový model HTML je kostrou vášho budúceho webu a na reprezentáciu obsahu používa iba najzákladnejšie značky a bloky. Odpovedá na otázku „Čo a kde je na obrazovke?“ Formátovanie a štýl sú v drôtovom modeli úplne ignorované.

• Drôtový model vám umožní vidieť štruktúru obsahu a postup, než sa rozhodnete pre štýl.
• Drátové rámce HTML nie sú statické ako súbory PDF alebo obrázky a umožňujú vám rýchlo presúvať bloky obsahu a vytvárať novú štruktúru.
• Drôtový model je interaktívny, čo je prospešné pre vývojára aj klienta. Pretože je drôtový model napísaný v jednoduchom HTML, stále sa v ňom môžete pohybovať a cítiť sa, ako funguje pohyb medzi stránkami. To sa nedá vyjadriť prostredníctvom konceptu PDF.

Skúste metódu sivého poľa. Zablokujte obsah svojej stránky v sivých políčkach, pričom najdôležitejší obsah je v hornej časti. Bloky sú usporiadané do jedného stĺpca, pričom najdôležitejší obsah je na stránke v hornej časti. Ak je napríklad stránkou stránka spoločnosti, v hornej časti sa môžu zobraziť podrobnosti o spoločnosti, potom zoznam zamestnancov, kontaktné informácie atď.

• Nezahŕňa to hlavičku a pätu. Sivé políčka sú jednoducho vizuálnym znázornením obsahu, ktorý sa na stránke nachádza.

Skúste program na rámovanie drôtov. Existuje niekoľko programov, ktoré vám môžu pomôcť s procesom wireframing. Množstvo požadovaných znalostí o kódovaní sa líši program od programu. Medzi niektoré z obľúbenejších programov patria:

• Lab Lab. Táto stránka sa špecializuje na „atómový dizajn“, kde je každý obsah považovaný za „molekulu“, ktorá tvorí väčšiu stránku.
• Jumpcharts. Jedná sa o službu plánovania webových stránok a rámcovania káblov. To si vyžaduje platený odber, ale umožňuje rýchlo vytvárať drôtové modely bez obáv sa príliš o kódovanie.
• Wirefy. Wirefy je ďalší systém „atómového dizajnu“. Nástroje sú k dispozícii zadarmo pre vývojárov.

Používajte jednoduché značky HTML. Dobrý drôtový model je možné neskôr ľahko previesť na skutočné stránky. Počas procesu wireframing si vôbec nerobte starosti so štýlom. Namiesto toho použite značky, ktoré je možné ľahko pochopiť a s malým úsilím ich vymeniť.

• Menej je viac s drôtovým rámom. Cieľom je jednoducho vybudovať štruktúru. Vizuály je možné neskôr upraviť pomocou CSS a rozšíreného označovania.

Vytvorte drôtový model pre každú stránku na vašom webe. Môže byť lákavé vytvoriť jeden drôtový model a povedať „Super, môžem to použiť na každú stránku a som dobrý“. V skutočnosti to povedie k generickému a nudnému webu. Nájdite si čas na drôtové modelovanie každej stránky a čoskoro zistíte, že každá stránka má svoje vlastné organizačné potreby.

Než začnete vytvárať webovú stránku, pripravte si nejaký obsah. Bude oveľa jednoduchšie zistiť, ako vyzerá štýl vašich webových stránok, ak namiesto zástupných symbolov máte svoj skutočný obsah. Nepotrebujete príliš veľa obsahu, ale v maketách bude vyzerať oveľa lepšie, ak máte nejaké kópie a originálne obrázky.

• Nepotrebujete nevyhnutne text článku, ale mali by ste mať aspoň skutočné titulky.

Nezabudnite, že dobrý obsah je viac ako text. Internet je oveľa viac ako jednoduché textové webové stránky. Aby ste vynikli vo svojom výklenku, budete potrebovať množstvo rôznych typov obsahu na prilákanie a udržanie návštevníkov. Na nejaký možný obsah by ste mali pamätať:

• Obrázky.
• Zvuk
• Video
• Streamy (Twitter)
• Integrácia Facebooku
• RSS
• Informačné kanály

Objednajte si profesionálneho fotografa. Ak na svoj web zahrniete fotografie, vaše prvé dojmy budú s profesionálnou fotografiou oveľa lepšie. Jedna dobrá fotka má hodnotu viac ako dvadsať zlých.

• Hľadaj nedávne známky z umeleckej fotografie a hľadaj lacnejšie riešenia ako dlhoroční profesionáli.

Píšte kvalitné články. Písomný obsah na vašej stránke určí obrovské množstvo vašej webovej návštevnosti. V tejto fáze procesu navrhovania si síce s tvorbou obsahu nemusíte robiť veľké starosti, ale nie je na škodu začať o tom premýšľať, pretože obsah budete potrebovať pravidelne, keď bude stránka spustená.

• Okrem obsahu článku existujú aj písomné položky, ktoré s najväčšou pravdepodobnosťou budete potrebovať počas procesu vytvárania webových stránok. Môžu to zahŕňať kontaktné informácie, názvy spoločností alebo čokoľvek iné, čo bude použité na viacerých miestach na webe.

Štýl globálnych prvkov. Toto sú veci, ktoré sa zobrazujú na každej stránke vášho webu, ako napríklad hlavička, päta a navigačná ponuka. Vytvorte si úplne základný štýl, aby ste videli, ako budú všetky vaše stránky vyzerať na svojom mieste. To bude veľmi užitočné, keď sa presuniete do procesu rozloženia.

• Nerobte si starosti s podrobnosťami, ale pokúste sa ich priblížiť tomu, ako budú hlavičky nakoniec vyzerať.

Vytvorte základné rozloženie. Začnite presúvať hodiny drôtového modelu z jedného stĺpca do ich všeobecných umiestnení na stránke. Navigačný blok môžete napríklad presunúť na ľavú stranu stránky a zoznam nadpisov napravo.

• Pred pokračovaním experimentujte s rozloženiami na niekoľkých stranách. Nechajte ich otestovať ostatnými, aby ste zistili, či sa cítia organicky.

Vytvorte maketu. Pomocou programu, ako je Photoshop, vytvorte maketu niekoľkých stránok svojho webu. Rozloženie, na ktorom ste sa usadili, použite ako vodítko. V programe na úpravu obrázkov môžete pracovať oveľa rýchlejšie a získať všetko tak, ako chcete. To vám umožní použiť tieto obrázky ako referencie, pokiaľ ide o skutočný kód.

• Zahrňte do makety skutočný obsah, aby ste zaistili, že všetko spolu dobre vyzerá.

Nahraďte svoje bloky obsahom. Začnite na stránku pridávať svoj obsah a prvky. So štýlom si zatiaľ nerobte starosti, jednoducho dajte všetko na správne miesto. Pomôže vám to zistiť, či vaše zmeny štýlu budú fungovať.

Vytvorte sprievodcu štýlom. To je nevyhnutné pre zachovanie súdržného štýlu, najmä pre väčšie weby. Ak je stránka určená pre firmu, ktorá už má vizuálne značky, malo by to byť začlenené do dizajnu stránky. Veci, ktoré je potenciálne potrebné zvážiť v sprievodcovi štýlom:

• Navigácia
• Hlavičky (<h1>, <h2> atď.)
• Odseky
• Kurzíva
• Tučné
• Odkazy (aktívne, neaktívne, vznášajúce sa)
• Použitie obrázku
• Ikony
• Gombíky
• Zoznamy