Ovaj wikiHow vas uči kako dizajnirati web stranicu koja izgleda profesionalno i ima dobre performanse. Premda najveći dio dizajna vaše web stranice u konačnici ovisi o vama, postoje neke kritične stvari koje trebate učiniti i izbjeći ih pri izradi web stranice.
Koraci
1. dio 2: Kako dizajnirati svoju web stranicu
Korak 1. Odredite želite li koristiti kreatora web stranice
Web stranice izrađene od nule zahtijevaju prilično detaljno razumijevanje HTML kodiranja, ali web stranicu možete jednostavno stvoriti pomoću besplatne usluge hostinga poput Weeblya, Wixa, WordPressa ili Google web mjesta. Kreatori web stranica dizajnerima koji su prvi put u upotrebi obično su mnogo lakši za korištenje od HTML-a.
- Odlučite li kodirati vlastitu web stranicu, morat ćete naučiti HTML i CSS kodiranje.
- Ako ulaganje vremena i energije u izradu vaše web stranice ne zvuči privlačno, možete angažirati i dizajnera web stranice koji će vam izraditi web stranicu. Samostalni dizajneri mogu koštati od 30 USD na sat do preko 100 USD po satu.
Korak 2. Nacrtajte svoju web lokaciju
Prije nego uopće otvorite kreatora web stranice, trebali biste otprilike znati koliko stranica želite da vaša web stranica ima, kakav bi trebao biti sadržaj svake od tih stranica i opći izgled važnih stranica, poput početne stranice i "O" stranica.
Stranice vaše web stranice mogu biti lakše vizualizirane ako nacrtate grube slike svake od njih, a ne samo odredite koji bi se sadržaj trebao pojaviti
Korak 3. Koristite intuitivni dizajn
Iako se ima što reći za svježe ideje, osnovni dizajn vaše web stranice trebao bi slijediti utvrđene smjernice, poput sljedećih:
- Opcije navigacije (npr. Kartice za različite stranice) trebale bi se nalaziti pri vrhu stranice.
- Ako koristite ikonu izbornika (☰), ona bi se trebala nalaziti u gornjem lijevom kutu stranice.
- Ako koristite traku za pretraživanje, ona bi se trebala nalaziti blizu gornje desne strane stranice.
- Korisne veze (npr. Veze na stranicu "O nama" ili stranicu "Kontaktirajte nas") trebale bi se nalaziti pri samom dnu svake stranice.
Korak 4. Budite dosljedni
Koji god font teksta, paletu boja, temu slike i mogućnosti dizajna odabrali, pobrinite se da koristite istu odluku na cijeloj web stranici. Može biti nevjerojatno uznemirujuće vidjeti jedan font ili shemu boja koji se koriste za stranicu "O programu" kada se za početnu stranicu koristio potpuno drugačiji.
- Na primjer, ako za početnu stranicu svoje web lokacije koristite isključivo hladne boje, nemojte primjenjivati svijetle, glasne boje na sljedećoj stranici.
- Imajte na umu da upotreba glasnih ili sukobljenih boja, osobito kada se boje prikazuju dinamično (npr. U pokretu), može izazvati epilepsiju kod malog broja korisnika weba. Ako odlučite koristiti takve boje na svom web mjestu, svakako dodajte upozorenje o epilepsiji prije bilo kojih relevantnih stranica.
Korak 5. Dodajte navigacijske opcije
Postavljanje izravnih veza na važne stranice na vašoj web stranici na vrhu početne stranice pomoći će posjetiteljima koji prvi put usmjere sadržaj na bitan sadržaj. Većina kreatora web lokacija prema zadanim postavkama dodaje ove veze.
Važno je pobrinuti se da svaka stranica na vašoj web stranici bude dostupna klikom na opcije na vašoj web stranici, a ne samo putem adrese stranice
Korak 6. Koristite boje koje se međusobno nadopunjuju
Kao i svaka druga vrsta dizajna, dizajn web stranica oslanja se na vizualno ugodne kombinacije boja; zbog toga je odabir boja tema koje idu zajedno ključan.
Crna, bijela i siva dobra su kombinacija ako ne znate odakle početi
Korak 7. Razmislite o upotrebi minimalističkog dizajna
Minimalizam potiče hladne boje, jednostavnu grafiku, crno-bijele stranice s tekstom i što manje uljepšavanja. Budući da minimalizam ne zahtijeva mnogo elegantnih elemenata, to je jednostavan način da vaša web stranica izgleda profesionalno i atraktivno, a da ne zahtijeva mnogo rada.
- Mnogi tvorci web stranica imat će "minimalističku" temu koju možete odabrati prilikom postavljanja svoje web stranice.
- Alternativa minimalizmu je "brutalizam", koji koristi oštrije linije, svijetle boje, podebljani tekst i minimalne slike. Brutalizam ima manje sljedbenika od minimalizma, ali ovisno o sadržaju vaše web stranice, mogao bi bolje odgovarati vašim dizajnerskim potrebama.
Korak 8. Napravite jedinstvene izbore
Ravne linije i mrežni elementi zaključani mrežom sigurne su oklade, ali donošenje nekoliko jedinstvenih stilskih odluka dat će osobnost vašoj web stranici i pomoći joj da se istakne.
- Ne bojte se uskladiti trendove postavljanjem elemenata web stranice asimetrično ili korištenjem preklapajućih elemenata za stvaranje slojevitog izgleda.
- Dok su elegantni, oštri kutovi i kvadratični elementi (također poznati kao prezentacija "na karti") manje povoljni od zaobljenih, mekih elemenata.
Dio 2 od 2: Kako povećati performanse web stranice
Korak 1. Iskoristite mogućnosti optimizacije mobilnih uređaja
Mobilni preglednici imaju veći promet od web preglednika, što znači da bi količina pažnje koju posvećujete mobilnoj verziji vaše web stranice trebala biti barem jednaka razvoju vaše web stranice za stolna računala. Većina usluga za izradu web stranica automatski stvara mobilnu verziju vaše web lokacije, ali za svoju web lokaciju za mobilne uređaje trebate imati na umu sljedeće podatke:
- Uvjerite se da su gumbi (npr. Veze na web lokaciju) veliki i da ih je lako dodirnuti.
- Izbjegavajte implementaciju značajki koje se ne mogu vidjeti na mobilnim uređajima (npr. Flash, Java itd.).
- Razmislite o izradi mobilne aplikacije za svoju web stranicu.
Korak 2. Izbjegavajte korištenje previše fotografija po stranici
I stolni i mobilni preglednici mogu imati problema s učitavanjem stranica koje prikazuju veliki broj fotografija ili videozapisa. Iako su slike važne u web dizajnu, korištenje više njih po stranici može uzrokovati nepotrebno dugo vrijeme učitavanja, što će spriječiti ljude da posjete dotične stranice.
Općenito govoreći, želite da se stranice vaše web stranice učitaju za manje od četiri sekunde
Korak 3. Dodajte stranicu "Kontakt"
Primijetit ćete da gotovo sve uspostavljene web stranice imaju stranicu "Kontaktirajte nas" koja sadrži podatke za kontakt (npr. Telefonski broj i adresu e -pošte); neke web stranice čak imaju ugrađen obrazac pitanja na ovoj stranici. Dodavanjem stranice "Kontakt" gledatelji web stranice dobit će izravnu komunikaciju s vama, dodajući tako rješenje potencijalnim frustracijama.
Korak 4. Izradite prilagođenu stranicu 404
Kad netko posjeti određenu stranicu na vašoj web stranici koja ili nije postavljena ili ne postoji, prikazat će se web stranica "Greška 404". Većina preglednika ima zadanu stranicu 404, ali možda ćete moći prilagoditi svoju unutar postavki kreatora web stranice; ako je tako, svakako uključite sljedeće detalje:
- Lagana poruka o pogrešci (npr. "Čestitamo - pronašli ste našu stranicu s pogreškom!")
- Veza natrag na početnu stranicu web stranice
- Popis često pregledavanih veza
- Slika ili logotip za vašu web stranicu
Korak 5. Koristite traku za pretraživanje ako je moguće
Ako način izrade vaše web stranice podržava dodavanje trake za pretraživanje na vašu web stranicu, toplo se preporučuje da to učinite. To će osigurati da korisnici mogu brzo doći do određene stranice ili stavke bez klikanja kroz vaše mogućnosti navigacije.
Trake za pretraživanje također su korisne kada vaša publika želi tražiti opći pojam bez upotrebe pokušaja i pogreške
Korak 6. Uložite najviše vremena u svoju početnu stranicu
Kad netko dođe na početnu stranicu vaše web stranice, trebao bi odmah shvatiti suštinu teme vaše web stranice; osim toga, svi elementi početne stranice trebali bi se brzo učitati, uključujući mogućnosti navigacije i sve slike. Vaša početna stranica trebala bi imati sljedeće aspekte:
- Poziv na radnju (npr. Gumb za klik ili obrazac za popunjavanje)
- Alatna traka ili izbornik za navigaciju
- Grafika koja poziva (npr. Jedna čvrsta fotografija, video zapis ili mala grupa fotografija s popratnim tekstom)
- Ključne riječi koje se odnose na uslugu, temu ili fokus vaše web stranice
Korak 7. Testirajte svoju web stranicu u više preglednika na više platformi
To je nevjerojatno važno jer različiti preglednici mogu različito upravljati aspektima vaše web stranice. Prije nego počnete promovirati svoju web stranicu, pokušajte posjetiti i koristiti je u sljedećim preglednicima na platformama Windows, Mac, iPhone i Android:
- Google Chrome
- Firefox
- Safari (samo za iPhone i Mac)
- Microsoft Edge i Internet Explorer (samo Windows)
- Ugrađeni preglednik na nekoliko različitih Android telefona (npr. Samsung Galaxy, Google Nexus itd.)
Korak 8. Nastavite ažurirati svoju web stranicu kako stari
Trendovi u dizajnu, veze, fotografije, koncepti i ključne riječi mijenjaju se kako vrijeme prolazi, pa ćete morati nastaviti s promjenama na svojoj web stranici kako biste bili u tijeku. To će zahtijevati da barem jednom u tri mjeseca (po mogućnosti češće) provjeravate izvedbu svoje web stranice uz ostale slične web stranice.
Osnovna HTML pomoć
Uzorak web stranice s HTML -om
Podržite wikiHow i otključajte sve uzorke.
HTML Cheat Sheet
Podržite wikiHow i otključajte sve uzorke.
Primjer jednostavne web stranice
Podržite wikiHow i otključajte sve uzorke.
Savjeti
- Pristupačnost web stranice drugi je važan aspekt razvoja web stranice. To uključuje stvari poput naslova za publiku oštećenog sluha, audio opise za slijepe posjetitelje i upozorenja na fotoosjetljivost ako vaša web stranica koristi efekte koji izazivaju napadaje.
- Većina kreatora web stranica ima skup predložaka koje možete koristiti za učvršćivanje izgleda i dizajna web stranice prije dodavanja željenih elemenata.
Upozorenja
- Većina kreatora web stranica je besplatna; međutim, ako želite koristiti vlastitu domenu (npr. "www.vašeime.com" umjesto "www.vašeime.wordpress.com"), morat ćete platiti mjesečnu ili godišnju naknadu.
- Izbjegavajte plagijat i pridržavajte se svih zakona o autorskim pravima: nemojte dodavati nasumične slike s weba, pa čak ni strukturne elemente, bez dopuštenja.
