Tento wikiHow vás naučí, ako navrhnúť webovú stránku, ktorá vyzerá profesionálne a funguje dobre. Aj keď je väčšina dizajnu vašej webovej stránky výlučne na vás, pri vytváraní webovej stránky je potrebné urobiť niekoľko zásadných vecí, ktorým by ste sa mali vyhnúť.
Kroky
Časť 1 z 2: Ako navrhnúť svoj web
Krok 1. Určte, či chcete použiť tvorcu webových stránok
Webové stránky vytvorené úplne od začiatku vyžadujú pomerne podrobné znalosti kódovania HTML, ale webové stránky môžete ľahko vytvoriť pomocou bezplatnej hostiteľskej služby, ako sú Weebly, Wix, WordPress alebo Webové stránky Google. Tvorcovia webových stránok majú tendenciu byť pre začínajúcich dizajnérov oveľa jednoduchšie použiť ako HTML.
- Ak sa rozhodnete kódovať vlastnú webovú stránku, budete sa musieť naučiť kódovanie HTML aj CSS.
- Ak investovanie času a energie do vytvárania vašich webových stránok neznie lákavo, môžete si najať aj webového dizajnéra, ktorý vám ich vytvorí. Nezávislí dizajnéri môžu stáť kdekoľvek od 30 dolárov za hodinu a viac ako 100 dolárov za hodinu.
Krok 2. Mapujte svoje stránky
Pred otvorením tvorcu webových stránok by ste mali približne vedieť, koľko stránok má váš web mať, aký by mal byť obsah na každej z týchto stránok a všeobecné rozloženie dôležitých stránok, ako sú domovská stránka a „Informácie“stránku.
Vizualizáciu stránok vašich webových stránok je možné jednoduchšie, ak nakreslíte hrubé obrázky každého z nich, a nie iba určujete, aký obsah by sa mal zobrazovať
Krok 3. Používajte intuitívny dizajn
Aj keď je niečo, čo je potrebné povedať o nových nápadoch, základný dizajn vašej webovej stránky by sa mal riadiť zavedenými pokynmi, ako sú napríklad tieto:
- Možnosti navigácie (napr. Karty pre rôzne stránky) by mali byť v hornej časti stránky.
- Ak používate ikonu ponuky (☰), mala by byť v ľavom hornom rohu stránky.
- Ak používate vyhľadávací panel, mal by byť v pravom hornom rohu stránky.
- Užitočné odkazy (napr. Odkazy na stránku „O mne“alebo na stránku „Kontaktujte nás“) by mali byť uvedené v spodnej časti každej stránky.
Krok 4. Buďte dôslední
Bez ohľadu na to, aké písmo textu, paletu farieb, tému obrázku a možnosti návrhu si vyberiete, na celom webe používajte rovnaké rozhodnutie. Keď na domovskú stránku použijete úplne iné písmo alebo farebnú schému použitú na stránke „O“, môže byť neuveriteľne otravné.
- Ak napríklad na domovskú stránku svojich stránok používate výlučne studené farby, neimplementujte na ďalšej stránke jasné a hlasné farby.
- Majte na pamäti, že používanie hlasných alebo kontrastných farieb, najmä ak sa farby zobrazujú dynamickým (napr. Pohyblivým) spôsobom, môže u malého počtu používateľov webu vyvolať epilepsiu. Ak sa rozhodnete používať na svojom webe takéto farby, pred všetky relevantné stránky pridajte varovanie pred epilepsiou.
Krok 5. Pridajte možnosti navigácie
Umiestnenie priamych odkazov na dôležité stránky na vašom webe v hornej časti domovskej stránky pomôže nasmerovať prvých návštevníkov na obsah, na ktorom záleží. Väčšina tvorcov stránok tieto odkazy predvolene pridáva.
Je dôležité zaistiť, aby bola každá stránka na vašom webe prístupná kliknutím na možnosti na vašom webe, a nie iba na adresu stránky
Krok 6. Použite farby, ktoré sa navzájom dopĺňajú
Rovnako ako akýkoľvek iný druh dizajnu, dizajn webových stránok sa spolieha na vizuálne príjemné kombinácie farieb; z tohto dôvodu je zásadný výber tematických farieb, ktoré spolu ladia.
Čierna, biela a sivá sú vhodnou kombináciou, ak neviete, kde začať
Krok 7. Zvážte použitie minimalistického dizajnu
Minimalizmus podporuje chladné farby, jednoduchú grafiku, čiernobiele textové stránky a čo najmenšie zdobenie. Pretože minimalizmus vyžaduje len málo efektných prvkov, je to jednoduchý spôsob, ako urobiť svoj web profesionálnym a atraktívnym bez toho, aby ste museli veľa pracovať.
- Mnoho tvorcov webových stránok bude mať „minimalistickú“tému, ktorú si môžete vybrať pri nastavovaní svojej webovej stránky.
- Alternatívou k minimalizmu je „brutalizmus“, ktorý používa drsnejšie čiary, jasné farby, odvážny text a minimum obrazov. Brutalizmus má menej priaznivcov ako minimalizmus, ale v závislosti od obsahu vašich webových stránok môže lepšie vyhovovať vašim požiadavkám na dizajn.
Krok 8. Urobte jedinečné voľby
Rovné čiary a webové prvky uzamknuté v mriežke sú bezpečné stávky, ale urobenie niekoľkých jedinečných štylistických rozhodnutí dodá vašej stránke osobnosť a pomôže jej vyniknúť.
- Nebojte sa ovplyvňovať trendy tým, že prvky webových stránok umiestnite asymetricky alebo pomocou prekrývajúcich sa prvkov vytvoríte vrstvený vzhľad.
- Elegantné, ostré rohy a hranaté prvky (tiež známe ako „kartová“prezentácia) pôsobia menej priaznivo ako zaoblené a mäkké prvky.
Časť 2 z 2: Ako maximalizovať výkon webových stránok
Krok 1. Využite možnosti optimalizácie pre mobilné zariadenia
Mobilné prehliadače predstavujú väčšiu návštevnosť webu než prehliadače pre stolné počítače. To znamená, že pozornosť, ktorú venujete mobilnej verzii svojich webových stránok, by sa mala rovnať minimálne vývoju webových stránok pre stolné počítače. Väčšina služieb pre tvorcov webových stránok automaticky vytvára mobilnú verziu vášho webu, ale pri svojom mobilnom webe by ste mali mať na pamäti nasledujúce informácie:
- Zaistite, aby boli tlačidlá (napr. Odkazy na webové stránky) veľké a aby sa na ne dalo ľahko ťuknúť.
- Vyhnite sa implementácii funkcií, ktoré nie je možné zobraziť na mobilných zariadeniach (napr. Flash, Java atď.).
- Zvážte výrobu mobilnej aplikácie pre svoj web.
Krok 2. Nepoužívajte príliš veľa fotografií na stránku
Stolný aj mobilný prehliadač môžu mať problémy s načítaním stránok, ktoré zobrazujú veľký počet fotografií alebo videí. Aj keď sú obrázky vo webovom dizajne dôležité, použitie viac ako niekoľkých na stránku môže spôsobiť zbytočne dlhé načítanie, čo zabráni ľuďom v návšteve predmetných stránok.
Všeobecne povedané, chcete, aby sa stránky vášho webu načítali do štyroch sekúnd
Krok 3. Pridajte stránku „Kontakt“
Všimnete si, že prakticky všetky zavedené webové stránky majú stránku „Kontaktujte nás“, ktorá obsahuje kontaktné informácie (napr. Telefónne číslo a e -mailovú adresu); niektoré weby majú dokonca vstavaný formulár otázok na tejto stránke. Pridanie stránky „Kontakt“poskytne divákom webových stránok priamu komunikáciu s vami, a tým aj riešenie potenciálnych frustrácií.
Krok 4. Vytvorte si vlastnú stránku 404
Keď niekto navštívi konkrétnu stránku na vašom webe, ktorá buď nebola nastavená, alebo neexistuje, zobrazí sa webová stránka „Chyba 404“. Väčšina prehliadačov má predvolenú stránku 404, ale vy si ju budete môcť prispôsobiť z nastavení tvorcu vašej webovej stránky; ak áno, uistite sa, že zadáte nasledujúce podrobnosti:
- Odľahčené chybové hlásenie (napr. „Blahoželáme - našli ste našu chybovú stránku!“)
- Odkaz späť na domovskú stránku webu
- Zoznam bežne zobrazovaných odkazov
- Obrázok alebo logo pre váš web
Krok 5. Ak je to možné, použite vyhľadávací panel
Ak váš spôsob vytvárania webových stránok podporuje pridanie panela vyhľadávania na váš web, dôrazne vám to odporúčame. To zaistí, že používatelia budú môcť rýchlo prejsť na konkrétnu stránku alebo položku bez toho, aby museli klikať na vaše možnosti navigácie.
Panely vyhľadávania sú tiež užitočné, keď chce vaše publikum hľadať všeobecný výraz bez použitia pokusov a omylov
Krok 6. Investujte najviac času do svojej domovskej stránky
Akonáhle niekto príde na domovskú stránku vášho webu, mal by okamžite získať jadro témy vášho webu; okrem toho by sa mali rýchlo načítať všetky prvky domovskej stránky vrátane možností navigácie a akýchkoľvek obrázkov. Vaša domovská stránka by mala mať nasledujúce aspekty:
- Výzva na akciu (napr. Tlačidlo na kliknutie alebo formulár na vyplnenie)
- Navigačný panel s nástrojmi alebo ponuka
- Pozývajúca grafika (napr. Jedna pevná fotka, video alebo malá skupina fotografií so sprievodným textom)
- Kľúčové slová týkajúce sa služby, témy alebo zamerania vášho webu
Krok 7. Otestujte svoje webové stránky vo viacerých prehliadačoch na viacerých platformách
Je to nesmierne dôležité, pretože rôzne prehliadače môžu aspekty vášho webu spravovať odlišne. Skôr ako začnete propagovať svoj web, skúste ho navštíviť a používať v nasledujúcich prehliadačoch na platformách Windows, Mac, iPhone a Android:
- Google Chrome
- Firefox
- Safari (iba iPhone a Mac)
- Microsoft Edge a Internet Explorer (iba Windows)
- Vstavaný prehliadač na niekoľkých rôznych telefónoch s Androidom (napr. Samsung Galaxy, Google Nexus atď.)
Krok 8. Pokračujte v aktualizácii svojich webových stránok tak, ako starnú
Trendy v dizajne, odkazy, fotografie, koncepty a kľúčové slová sa postupom času menia, takže na svojom webe budete musieť pokračovať vo svojich zmenách. Bude to vyžadovať, aby ste aspoň raz za tri mesiace (najlepšie častejšie) skontrolovali výkonnosť svojich webových stránok spolu s inými podobnými webovými stránkami.
Základná pomoc s HTML
Ukážková webová stránka s HTML
Podporte wikiHow a odomknite všetky vzorky.
Cheatový list HTML
Podporte wikiHow a odomknite všetky vzorky.
Ukážka jednoduchej webovej stránky
Podporte wikiHow a odomknite všetky vzorky.
Tipy
- Prístupnosť webových stránok je ďalším dôležitým aspektom vývoja webových stránok. To zahŕňa napríklad titulky pre sluchovo postihnutých divákov, zvukové popisy pre nevidomých návštevníkov a upozornenia na citlivosť na svetlo, ak váš web používa efekty potenciálne vyvolávajúce záchvaty.
- Väčšina tvorcov webových stránok má sadu šablón, ktoré môžete použiť na vylepšenie rozloženia a dizajnu svojich stránok pred pridaním vami preferovaných prvkov.
Varovania
- Väčšina tvorcov stránok je zadarmo; Ak však chcete používať svoju vlastnú doménu (napr. „www.yourname.com“namiesto „www.yourname.wordpress.com“), budete musieť zaplatiť mesačný alebo ročný poplatok.
- Vyhnite sa plagiátorstvu a dodržiavajte všetky zákony o autorských právach: nepridávajte náhodné obrázky z webu ani štrukturálne prvky bez povolenia.
