Cum se face o pagină Web

Efectuarea unui site bun ar putea părea o provocare de tip titanic, dar prin învățarea elementelor de bază veți găsi procesul interesant și distractiv. Va trebui să faci mai mult decât să creezi un aspect bine îngrijit! Iată câteva lucruri de bază și principiile de bază pentru crearea unui site pe care oamenii îl vor vizita cu bucurie.

conținut

Paşi
Metoda 1
Metoda 2
Sfaturi
Avertismente

paşi

Metoda 1

Cele trei reguli de bază

Regula nr. 1: Ascultă-ți clientul. Ai putea face asta "cel mai bun site văzut vreodată pe fața pământului", cu negri vii, personaje sofisticate și culori artistice și curajoase care țipă "vizitează-mă acum!" Din păcate, clientul vostru dorea o bară de meniu portocalie cu un font de culoare roz și portocaliu. Veți fi concediat, iar cel mai bun site - pe care clientul deține acum drepturile - este uitat pe serverul de rezervă și nu va vedea niciodată lumina.

Studiați compania clientului. Întreabă-l să-ți arate site-urile pe care îi place. Acest lucru vă va face să înțelegeți ce li se potrivește și vă va inspira pentru unele idei pe care nu le-ați avut în vedere.
În cazul în care credeți că site-ul portocaliu și roz este o glumă, imaginați-vă cel mai bun site pentru a face publicitate acestui produs:

Imagine cu denumirea Website-dunkin donuts.jpg

Regula 2: Cunoașteți publicul și aflați cum să-i satisfaceți dorințele. Motivul pentru care oamenii creează site-uri este că alții le văd. Acestea ar putea fi educaționale sau comerciale, sau ar putea fi un loc de divertisment pentru un anumit grup demografic. Treaba dvs. ca designer este să vă cunoașteți publicul și să-i păstrați lipiți de pagină când vizitați.

Ai putea crede, "dacă arata bine, vor rămâne." Dar nu este întotdeauna așa. Ia site-urile imobiliare ca un exemplu. Aici puteți vedea un site care are un design curat și distractiv. Are multe spații albe care îi conferă culori aerisite, puternice și un format modern pentru ecrane de 16: 9, cu legături foarte bine evidențiate:

Imagine cu denumirea Santa Monica real estate 1.jpg

Luați în considerare acest stil în schimb: este confuz și comprimat, culori neutre și o mulțime de anunțuri.

Imagine cu denumirea Santa monica trulia.jpg

Ghici care funcționează cel mai bine pentru oamenii care caută o casă? Exact, de fapt publicați anunțuri! Când oamenii se uită "case de vânzare în centrul orașului Milano", nu sunt interesați de estetica site-ului. Nu doresc informații despre proprietarul proprietății sau nu văd imaginile pitorești ale orașului. Vor să vadă case.

Regula 3: Ascultă-te. Înțelegeți ce dorește clientul și știți cum să satisfaceți piața. Acum este timpul pentru ideile tale personale!

Creați un șablon cu programul pe care îl preferați. Pe diferite straturi (astfel încât să puteți edita părți ale site-ului fără a trebui să recreați întregul model) creați elementele care trebuie inserate pe pagină. Aceste elemente pot include:

Antet. Acesta este un element care va fi comun pentru toate paginile site-ului dvs. Antetul este alcătuit din titlul și sigla site-ului și va conține legături către alte secțiuni ale site-ului (de exemplu: informații despre companie, detalii de contact etc.). Antetul va grupa vizual toate acestea și va face pagina mai funcțională. Este o practică obișnuită să alocați primul buton din bara de meniuri la linkul către pagina de pornire.

Luăm site-ul Apple ,:

Imagine intitulată Apple home landing page.jpg

Pe lângă stilul companiei, pagina lor de start este foarte curată și ordonată. Rețineți bara de meniu de sus, cu subiectele atribuite fiecărui buton, plus o casetă de căutare - întotdeauna o atingere elegantă dacă site-ul dvs. o acceptă. Acum ne uităm la o pagină care poate fi deschisă urmând un link, unul pe iPad și putem vedea câteva elemente:

Imagine intitulată Ipad landing page.jpg

Bara de meniuri se modifică doar afișând butonul iPad cu o culoare mai închisă.

Tema paginii se află în litere negre mari, în partea stângă sus.

Se afișează o nouă bara de submeni, cu informații despre produs. Dacă faceți clic pe unul dintre aceste butoane, veți vedea că pagina vă va oferi un conținut nou referitor la subiect, dar va păstra stilul și aspectul.

În multe cazuri, fiecare dintre paginile care pot fi accesate prin bara de meniu va necesita mai multe subcategorii. În loc să creați o bara de meniu secundară, puteți utiliza un meniu pop-up ca în acest exemplu de la Friend`s Friend:

Bară laterală. Acest lucru va fi comun pentru multe pagini de pe site-ul dvs., dar nu neapărat toate - ceea ce contează este conținutul. Dar este un element foarte important și va trebui să-l realizați cu atenție, astfel încât să fie intuitiv și nu confuz. Spre deosebire de bara de meniu, conținutul unei bare laterale poate fi foarte dinamic. Luați în considerare aceste bare laterale pe site-ul de anunțuri imobiliare Trulia. Primul este pentru cumpărători:

Și al doilea pentru cei care vând. Rețineți că focalizarea este complet deplasată, chiar dacă este o informație similară și apare pe aceleași puncte ca și bara:

corp. Acesta va fi corpul paginii, unde să includeți tot conținutul și, în consecință, partea care va varia mai mult decât site-ul dvs. Dacă construiți un site de comerț electronic, de exemplu, o pagină poate conține o descriere a produsului și alte 20 de produse pentru vânzare. Sarcina ta va fi aceea de a face două pagini care nu apar discordante. Utilizați culori, fonturi și elemente de interfață similare pentru a le face.

subsol. Acesta este un element care nu este prezent în fiecare site, deoarece nu toată lumea are nevoie de ea. Este adesea folosit pentru articole care ar putea confunda o interfață ordonată și clară, sau pentru a permite accesul la părți ale site-ului care nu sunt cele pe care atenția utilizatorilor este focalizată. Iată un exemplu preluat de pe site-ul Groupon:

Metoda 2

Orientări

Practicați crearea de pagini cu o interfață de utilizator corectă. Plasarea diferitelor elemente ale site-ului, cum ar fi titlul, barele laterale, logo-ul, grafica și textul, întotdeauna în același loc pe fiecare pagină, va face site-ul dvs. navigabil și intuitiv.

Utilizați același antet în partea de sus a fiecărei pagini. Indiferent dacă site-ul dvs. se dedică repetării conținutului, asigurați-vă că partea de sus a fiecărei pagini este identică.
Utilizați logica în alegerile dvs. stilistice. Elementele unei singure pagini ar trebui să fie sortate logic după importanță sau subiect - acest lucru se aplică și în ordinea paginilor de pe site.

Creați un stil consistent. Chiar dacă aspectul ar trebui să dea site-ului dvs. o coerență structurală, stilul ar trebui să ofere o armonie tematică.

Limitați la două sau trei culori principale și asigurați-vă că acestea se combină bine.

Evitați să folosiți prea multe caractere sau dimensiuni - dacă v-ați hotărât să alterați unele dintre ele, asigurați-vă că le folosiți cu același scop pentru fiecare pagină.

Utilizați coli de stil cascadă (CSS) pentru a gestiona aspectul site-ului și pentru ao face uniformă. De asemenea, va fi mai ușor să schimbați articolele care sunt comune paginilor multiple cu o singură remediere fără a fi necesar să le faceți pentru fiecare pagină.

Preferă lizibilitatea. Pentru a face textul mai ușor de citit, împărțiți-l în secțiuni mai mici.

Utilizați subtitrări și distanțe adecvate pentru a separa fiecare secțiune.

Utilizați caractere aldine sau caractere de dimensiuni diferite pentru a afișa ierarhia și importanța subiectelor.

Acordați atenție gestionării textului. Nu faceți caracterele prea mici și lărgiți spațierea liniei pentru a face mai multe secțiuni de text mai lizibile. Dacă le puteți împărți în secțiuni mai mici.

Faceți site-ul dvs. lizibil pentru toată lumea. Folosiți cod HTML standard și evitați etichetele, funcțiile și pluginurile disponibile numai pentru anumite browsere sau pentru unele versiuni ale acestora.

Deși majoritatea browserelor și calculatoarelor moderne pot gestiona imagini complexe, site-ul dvs. va beneficia de imagini mai mici, optimizate pe web. Echilibrează căutarea de calitate cu cea a vitezei de încărcare.

Testați-vă site-ul. Asigurați-vă că "fiecare link funcționează" așa cum ar trebui, și că imaginile apar în mod corect.

Invitați membrii publicului dvs. să testeze site-ul pentru a verifica claritatea și ușurința utilizării opțiunilor dvs. stilistice și pentru a asculta sfaturile lor cu privire la schimbările care trebuie făcute.

Publicați-vă site-ul. Dacă nu ați făcut deja acest lucru, cumpărați un domeniu. Verificați periodic link-urile pentru a vă asigura că acestea există și pentru a asculta sugestiile care vă vor fi trimise prin e-mail de la cei care vizitează site-ul.

Sfaturi

Deși poate fi preferabil să faceți singur modelul de aspect în funcție de preferințele dvs., ar putea fi mai ușor să cumpărați un model pre-construit.
Pentru a salva cerneala vizitatorilor site-ului, utilizați o foaie de stil separată pentru a formata site-ul dvs. pentru imprimare
Dezactivați imaginile de fundal când setați parametrii de imprimare.
Utilizați textul negru pe un fundal alb.
Scoateți bara de meniu și orice imagine inutilă.
Nu bombardați utilizatorul cu o grafică plăcută și drăguță. Flash animațiile, culorile luminoase, fundalul motivelor și muzica care este reprodusă de fiecare dată când pagina este încărcată ar putea fi experimente amuzante în anii `90, dar vor scăpa de utilizatorii de astăzi. Limitată la fundaluri simple care creează contrast cu culoarea textului pentru a îmbunătăți lizibilitatea.
Pentru a face ca site-ul să fie accesibil utilizatorilor orbi și surzi, puteți să creați subtitrări pentru videoclipuri și imagini, să transcrieți mesaje audio și să includeți note despre accesibilitate. Deși tabelele pot fi o modalitate bună de a organiza informații, utilizatorii orbi care folosesc un cititor de ecran nu pot auzi conținutul coloanelor în ordinea corectă.
Puteți utiliza CSS pentru a crea spațiul potrivit între paragrafe.

Avertismente

Evitați plagiatul și respectați drepturile de autor. Nu adăugați imagini găsite în rețea sau chiar elemente structurale ale site-ului fără permisiune. Orice ați include pe site va trebui să respecte legile și moralul.

Distribuiți pe rețelele sociale:

înrudit