Cum se proiectează un site web (cu imagini)

Thiste parere cum să proiectați un site web care pare profesional și funcționează bine. În timp ce cea mai mare parte a designului site-ului dvs. este în cele din urmă până la dvs., există câteva lucruri critice de făcut - și evitați - atunci când creați un site web.

Pași

Partea 1 din 2:

Cum de a proiecta site-ul dvs. web

1. Determinați dacă doriți să utilizați un creator de site-uri web. Site-urile create de la zero au nevoie de o înțelegere destul de detaliată a codului HTML, dar puteți crea cu ușurință un site web utilizând un serviciu gratuit de găzduire, cum ar fi WeeBil, Wix, WordPress sau site-uri Google. Creatorii de site-uri au tendința de a fi mult mai ușor pentru designerii de prima dată să utilizeze decât HTML.

Dacă decideți să codificați propriul dvs. site web, va trebui să învățați ambele HTML și Css codare.
Dacă investiți timpul și energia pentru a crea site-ul dvs. nu sună atrăgătoare, puteți angaja, de asemenea, un designer de site-uri pentru a vă crea site-ul dvs. pentru dvs. Designerii independenți pot costa oriunde între 30 de ore pe oră și mult peste 100 de dolari pe oră.

Imagine intitulată Design Un site Web Pasul 2

2. Hartă-ul pe site-ul dvs. Înainte de a deschide chiar și un creator de site-uri, ar trebui să știți aproximativ câte pagini doriți să aibă site-ul dvs., ceea ce ar trebui să fie conținutul fiecăruia dintre aceste pagini și la aspectul general al paginilor importante, cum ar fi pagina de pornire și "Despre" pagină.

Paginile site-ului dvs. pot fi mai ușor de vizualizat dacă trageți imagini brute ale fiecăruia, mai degrabă decât să determinați doar ce conținut ar trebui să apară.

Imagine intitulată Design Un site Web Pasul 3

3. Utilizați designul intuitiv. Deși există ceva care trebuie spus pentru idei proaspete, designul de bază al site-ului dvs. web ar trebui să urmeze orientări stabilite, cum ar fi următoarele:

Opțiuni de navigare (e.G., filele pentru pagini diferite) ar trebui să meargă în partea de sus a paginii.

Dacă utilizați o pictogramă de meniu (☰), ar trebui să fie în colțul din stânga sus al paginii.

Dacă utilizați o bară de căutare, ar trebui să fie în apropierea părții superioară a paginii.

Legături utile (E.G., Legături cu "Despre" pagină sau a "Contactează-ne" pagina) ar trebui să meargă chiar în partea de jos a fiecărei pagini.

Imagine intitulată Design Un site Web Pasul 4

4. Fii consistent. Indiferent de fontul textului, paleta de culori, tema imaginii și opțiunile de proiectare pe care le alegeți, asigurați-vă că utilizați aceeași decizie pe întregul site web. Poate fi incredibil de jarring să vadă un font sau o schemă de culori utilizată pentru "Despre" Când a fost folosită o pagină complet diferită pentru pagina de pornire.

De exemplu, dacă utilizați exclusiv culori de tonuri de răcire pentru pagina de pornire a site-ului dvs., nu implementați culori luminoase și puternice pe pagina următoare.

Rețineți că utilizarea culorilor puternice sau de strângere, mai ales atunci când culorile afișează într-o dinamică (E.G., Moda) Moda, poate evoca epilepsia într-un număr mic de utilizatori web. Dacă decideți să utilizați astfel de culori pe site-ul dvs., asigurați-vă că adăugați un avertisment epilepsie înainte de orice pagină relevantă.

Imagine intitulată Design Un site web Pasul 5

5. Adăugați opțiuni de navigare. Plasarea legăturilor directe către paginile importante de pe site-ul dvs. din partea de sus a paginii de pornire va ajuta vizitatorii direcți pentru prima dată la conținutul care contează. Majoritatea creatorilor de site-uri adaugă aceste linkuri în mod implicit.

Este important să vă asigurați că fiecare pagină de pe site-ul dvs. web este accesibilă făcând clic pe opțiunile de pe site-ul dvs., mai degrabă decât să fiți accesibile numai prin adresa paginii.

Imagine intitulată Design Un site Web Pasul 6

6. Utilizați culori care se completează reciproc. La fel ca orice alt tip de design, designul site-ului se bazează pe combinații plăcute vizuale de culoare - din acest motiv, culorile tematice care merg împreună este esențială.

Negru, alb și gri este o combinație bună dacă nu știți de unde să începeți.

Imagine intitulată Design Un site Web Pasul 7

7. Luați în considerare utilizarea unui design minimalist. Minimalismul încurajează culorile de tonuri răcoroase, graficele simple, paginile de text alb-negru și cât mai puțin entuziasm posibil. Deoarece minimalismul necesită puțin în calea elementelor fanteziste, este o modalitate ușoară de a face site-ul dvs. să arate profesional și atractiv, fără a necesita multă muncă.

Mulți creatori de site-uri web vor avea a "minimalist" Tema Puteți selecta la configurarea site-ului dvs. web.

O alternativă la minimalism este "brutalism", care utilizează linii de apărare, culori strălucitoare, text îndrăzneț și imagini minime. Brutalismul are mai puțin de următorii decât minimalismul, dar în funcție de conținutul site-ului dvs., poate să se potrivească mai bine nevoilor dvs. de proiectare.

Imagine intitulată Design Un site Web Pasul 8

8. Faceți alegeri unice. Liniile drepte și elementele Web blocate de rețea sunt pariuri sigure, dar făcând câteva decizii stilistice unice vor împrumuta personalitatea site-ului dvs. și va ajuta site-ul să iasă în evidență.

Nu vă fie frică să vă bucurați de tendințe prin plasarea elementelor de site-uri asimetric sau folosind elemente suprapuse pentru a crea un aspect stratificat.

În timp ce elegante elegante, ascuțite și elemente de oprire (cunoscute și ca a "card bazat pe card" Prezentarea) sunt mai puțin favorabile decât sunt rotunjite, elemente moi.

Partea 2 din 2:

Cum să maximizați performanța site-ului

1. Profitați de opțiunile de optimizare mobilă. Browserele mobile reprezintă mai multe trafice web decât browserele desktop, ceea ce înseamnă că cantitatea de atenție pe care o plătiți la versiunea mobilă a site-ului dvs. ar trebui să fie cel puțin egală cu dezvoltarea site-ului dvs. de desktop. Majoritatea serviciilor de creator de site-uri creează automat o versiune mobilă a site-ului dvs., dar veți dori să păstrați următoarele informații în minte pentru site-ul dvs. mobil:

Asigurați-vă că butoanele (e.G., link-urile site-ului) sunt mari și ușor de atins.
Evitați implementarea caracteristicilor care nu pot fi vizualizate pe Mobile (E.G., Flash, Java, etc.).
Luați în considerare faptul că aveți o aplicație mobilă pentru site-ul dvs. Web.

Imagine intitulată Design Un site Web Pasul 10

2. Evitați utilizarea prea multor fotografii pe pagină. Atât desktop, cât și browserele mobile pot lupta pentru a încărca pagini care afișează un număr mare de fotografii sau videoclipuri. În timp ce imaginile sunt importante în designul web, folosind mai mult de câțiva pe pagină poate provoca timpi de încărcare în mod inutil, care vor împiedica persoanele să viziteze pagina (paginile) în cauză.

În general, doriți ca paginile site-ului dvs. să se încarce în mai puțin de patru secunde.

Imagine intitulată Design Un site web 11

3. Adauga o "a lua legatura" pagină. Veți observa că practic toate site-urile stabilite au o "Contactează-ne" Pagina care are informații de contact (e.G., Un număr de telefon și o adresă de e-mail) - Unele site-uri chiar au un formular de întrebări încorporate pe această pagină. Adăugarea A "Pagina de contact va oferi spectatorilor de site-uri o linie directă de comunicare către dvs., adăugând astfel o soluție la potențialele frustrări.

Imagine intitulată Design Un site web 12

4. Creați o pagină personalizată 404. Când cineva vizitează o anumită pagină de pe site-ul dvs. care nu a fost înființat sau nu există, a "404 eroare" Pagina web va fi afișată. Cele mai multe browsere au o pagină implicită 404, dar este posibil să vă puteți personaliza de la setările creatorului site-ului dvs. - dacă da, asigurați-vă că includeți următoarele detalii:

Un mesaj de eroare cu inima ușoară (e.G., "Felicitări - Ați găsit pagina de eroare!")

Un link înapoi la pagina de pornire a site-ului

O listă de legături vizualizate în mod obișnuit

O imagine sau un logo pentru site-ul dvs. Web

Imagine intitulată Design Un site web 13

5. Utilizați o bară de căutare dacă este posibil. Dacă metoda dvs. de creare a site-ului dvs. acceptă adăugarea unui bara de căutare pe site-ul dvs., este recomandat cu tărie să faceți acest lucru. Acest lucru se va asigura că utilizatorii pot naviga rapid la o anumită pagină sau un element fără a fi nevoie să faceți clic pe opțiunile de navigare.

Barurile de căutare sunt, de asemenea, utile atunci când publicul dvs. dorește să caute un termen general fără a utiliza eroarea de încercare și de eroare.

Imagine intitulată Design Un site web 14

6. Investiți cea mai mare perioadă de timp din pagina dvs. de pornire. Când cineva ajunge pe pagina de pornire a site-ului dvs., acestea ar trebui să primească imediat gistul tezei site-ului dvs. - în plus față de aceasta, toate elementele paginii de pornire ar trebui să se încarce rapid, inclusiv opțiunile de navigare și orice imagini. Pagina dvs. de pornire ar trebui să aibă următoarele aspecte:

Un apel la acțiune (e.G., un buton pentru a face clic sau a unui formular pentru a completa)

O bara de instrumente de navigare sau un meniu

Un grafic invitant (e.G., o fotografie solidă, un videoclip sau un mic grup de fotografii cu text însoțitor)

Cuvinte cheie Se referă la serviciul site-ului dvs., subiect sau focalizare

Imagine intitulată Design Un site Web Pasul 15

7. Testați-vă site-ul web în mai multe browsere pe mai multe platforme. Acest lucru este incredibil de important, deoarece diferite browsere pot gestiona aspecte ale site-ului dvs. diferit. Înainte de a începe să promovați site-ul dvs., încercați să vizitați și să utilizați site-ul dvs. în următoarele browsere pe platformele Windows, Mac, iPhone și Android:

Google Chrome

Firefox

Safari (numai iPhone și Mac)

Microsoft Edge și Internet Explorer (numai pentru Windows)

Browserul încorporat pe mai multe telefoane Android (E.G., Samsung Galaxy, Google Nexus etc.)

Imagine intitulată Design Un site Web Pasul 16

8. Continuați să actualizați site-ul dvs. ca vârste. Tendințe de proiectare, link-uri, fotografii, concepte și cuvinte cheie Toate schimbările pe măsură ce trece timpul, deci va trebui să continuați să faceți modificări pe site-ul dvs. pentru a rămâne la curent. Acest lucru vă va solicita să verificați performanța site-ului dvs. alături de alte site-uri similare cel puțin o dată la trei luni (de preferință mai des).

HTML de bază HTML

Pagina web de probă cu HTML

Suport WikiHow și Deblocați toate probele.

HTML cheat foaie

Suport WikiHow și Deblocați toate probele.

Eșantion de pagină web simplă

Suport WikiHow și Deblocați toate probele.

sfaturi

Accesibilitatea site-ului este un alt aspect important al dezvoltării site-ului web. Aceasta include lucruri precum subtitrările pentru audiențe cu insuficiență audio, descrieri audio pentru vizitatori orbi și avertismente de fotosensibilitate dacă site-ul dvs. utilizează efecte care inducă convulsii.

Majoritatea creatorilor de site-uri au un set de șabloane pe care le puteți utiliza pentru a cimenta aspectul și designul site-ului dvs. înainte de a adăuga elementele preferate.

Avertizări

Majoritatea creatorilor site-ului sunt gratuite, dacă doriți să utilizați propriul domeniu (e.G., "Numele dumneavoastră.COM" in loc de "Numele dumneavoastră.WordPress.COM"), va trebui să plătiți o taxă lunară sau anuală.

Evitați plagiatul și respectați toate legile privind drepturile de autor: nu adăugați imagini aleatoare de pe web sau chiar elemente structurale, fără permisiune.

Partajați pe rețeaua socială: