7 Sfaturi importante pentru proiectarea și menținerea unui sit mare

Proiectele variază în funcție de dimensiune și dimensiune, iar provocările pe care acestea le implică diferă în mod similar. Ca un designer web singuratic, cel mai mare serviciu pentru care sunt responsabil este FlashDen. Împreună cu mii de membri activi, toți vorbind, încărcând și cumpărând, site-ul procesează cantități mari de bani și cantități mari de trafic.

Proiectarea, reproiectarea, întreținerea și lucrul cu o echipă de dezvoltatori mi-a oferit câteva informații utile și sfaturi pentru a face viața mai ușoară. Și din moment ce am lansat ultimul meu redesign al site-ului, se pare că este un moment bun să-mi scriu primele 7 sfaturi!

1. Design și cod pentru mentenabilitate

Primul și cel mai important sfat pe care îl pot oferi este să proiectez site-ul astfel încât să fie ușor de întreținut. Adesea, atunci când proiectați un loc, puteți sacrifica lucrurile pentru estetică. De exemplu, este posibil să utilizați imagini în care textul sau stilurile ar fi suficiente. Sau puteți alege în mod deliberat o structură de meniu care nu are loc să crească. Când site-ul este mare, aceasta devine o idee foarte rea.

Când am construit prima versiune a FlashDen acum aproape doi ani, am folosit imagini pentru butoane. Păreau foarte frumos, dar am terminat cu o bibliotecă de 100 de imagini cu butoane diferite, ca să nu mai vorbim de rollovers. Apoi, în următoarele câteva luni, de fiecare dată când un dezvoltator avea nevoie de un nou buton, trebuia să-mi ceară să creez o imagine. Inutil să spun, am învățat această lecție destul de repede și am trecut la o singură clasă de butoane care poate nu arăta la fel de bună, dar este mult mai bună pentru pacea minții.

Un alt aspect al întreținerii se gândește la modul în care site-ul se va dezvolta și se va schimba. De exemplu, pe măsură ce se adaugă pagini noi, unde merg? Încă de la început, am vrut să navighez pe orizontală, dar acest lucru este cu adevărat limitat. După câteva încercări, am terminat folosind un nav vertical, permițând elemente de submeniu și apoi, pe lângă acestea, am adăugat o structură de file în pagini pentru a permite ca paginile aferente să fie grupate împreună. Nu spun că este cea mai bună navigare din lume, dar cu siguranță înseamnă că nu reproiectăm de fiecare dată când o secțiune nouă este adăugată pe site!

Deci, în proiectarea pentru un site mare, căutați modalități de a face viața mai simplă mai târziu, pentru că veți fi bucuroși că ați făcut-o!

2. Figurați-vă grupurile de utilizatori și sarcinile

Una dintre cele mai mari diferențe dintre un site mare și unul mic este numărul de tipuri diferite de utilizatori care ar putea utiliza site-ul. De exemplu, pe FlashDen există cumpărători, autori, vizitatori, administratori și membri. Fiecare grup are un set diferit de scopuri și sarcini pe care trebuie să le îndeplinească. Uneori, aceste sarcini se suprapun, dar uneori sunt destul de diferite.

Cel mai bun exemplu al unui loc în care sarcinile utilizatorilor sunt în contradicție între ele sunt pe o pagină de pornire. Nicăieri altundeva, pe un site, fiecare grup de utilizatori converg, și nicăieri altundeva este atât de important să se asigure că toată lumea obține ceea ce dorește. Și, bineînțeles, trebuie să fii atent că în servirea unui grup de utilizatori nu ignori altul.

În ultima redesign a FlashDen, cea mai mare zonă pe care am lucrat a fost pagina de pornire. Primul lucru pe care l-am făcut era să-mi enumăr toate lucrurile pe care fiecare grup de utilizatori trebuie să le facă:

  1. Cumpărători: Persoanele care utilizează FlashDen pentru a cumpăra fișiere
    Începeți să răsfoiți articole, să începeți căutarea, să accesați pagina personală personală, să depozitați bani, să aflați cum funcționează site-ul (pentru cumpărători mai noi)
  2. Autori: Persoanele care vând mărfuri pe FlashDen
    Discutați cu alți membri, primiți pe pagina de pornire pentru a vă împinge articolele, pentru a afla informații despre site-ul dvs., pentru a obține rapid portofoliul și câștigurile
  3. Vizitatori noi: cumpărători potențiali / autori / membri, care tocmai au sosit
    Aflați ce este site-ul / site-ul foarte repede, începeți, aflați tipurile de fișiere și prețurile
  4. Membri: Persoane care nu sunt cu adevărat cumpărători sau autori, ci doar participă la comunitate
    Chat cu alți membri, vezi știrile site-ului, răsfoiți fișierele
  5. Admini / Recenzori: Personalul nostru care gestionează aprobările de fișiere, forumuri moderate și, în general, participă
    Obțineți rapid aprobările de fișiere, vedeți cele mai recente fișiere de pe forum, auziți știri despre site-uri

Când știți ce grupuri de utilizatori doriți să faceți, atunci puteți crea o pagină care să le rezolve toate nevoile. Inutil să spun că aceasta este o sarcină care devine mai greu exponențial cu cât mai multe grupuri și sarcini există. În alte pagini de pe site, veți primi adesea un subgrup de grupuri de utilizatori care vă îngrijorează, dar pe pagina de pornire se converg toate acestea. Nu întâmplător, pagina de pornire este cel mai important aspect al muncii de proiectare pe care trebuie să o faceți pe un site.

Înainte de a putea rezolva diferitele nevoi, trebuie să prioritizeze grupurile de utilizatori și, pentru a face acest lucru, va trebui să înțelegeți ce site încearcă să realizeze.

3. Înțelegeți obiectivele site-ului

Deși fiecare grup de utilizatori consideră în mod firesc că este cel mai important, depinde de dvs. să le acordați prioritate în funcție de ceea ce site-ul însuși încearcă să realizeze. De exemplu, pe FlashDen, după ce am stat împreună cu echipa, am tras câteva concluzii după cum urmează:

  • Prioritatea principală pentru site este să servească cumpărătorilor. Atunci când cumpărătorii sunt bine serviți, ei continuă să cumpere, să aducă venituri și să deservească în același timp autorii.
  • Este vital ca vizitatorii noi să învețe rapid despre site și, sperăm, să devină membri. FlashDen se află încă într-o piață relativ nouă, iar noi concurenți încă apar, astfel încât devine mai important să capturați vizitatorii și să le transformați în cumpărători, autori sau membri.
  • Autorii sunt importanți deoarece, în inima sa, FlashDen este într-adevăr despre autorii ei, dar din toate grupurile de utilizatori, ei sunt cei mai angajați ai site-ului.
  • Membrii nu sunt la fel de importanți ca și Autori și cumpărători, dar contribuie la comunitatea din jurul site-ului.
  • Administratorii / recenzenții sunt cei mai puțin importanți deoarece sunt un grup plătit.

Deci, pornind de la aceasta, este posibil să se concluzioneze că pagina de pornire are nevoie pentru a servi utilizatorii în această ordine: Vizitatori> Cumpărători> Autori> Membri> Administratori.

Înțelegerea a ceea ce site-ul dvs. încearcă să realizeze este firul final care coase sarcinile utilizatorului împreună și vă spune ce ar trebui să încercați să puneți pe pagină. În mod ideal, pe fiecare pagină cheie, trebuie să identificați grupurile de utilizatori, sarcinile și prioritățile. Pentru o pagină vitală, cum ar fi pagina de pornire, fac acest lucru în mod oficial pe hârtie, iar pentru paginile mai mici o voi face adesea în cap în timpul proiectării.

4. Design, perfecționarea, perfecționarea, perfecționarea ...

Este doar după ați dat seama grupurilor de utilizatori, sarcinile, obiectivele site-ului, prioritățile și așa mai departe că este timpul să vă proiectați! Este foarte important să faceți acest lucru mai întâi pentru că, la un nivel practic, reduce dramatic șansele de a vă întoarce și de a vă redeschide designul. Ori de câte ori am început să proiectez un site mare fără a analiza mai întâi, am nevoit în mod inevitabil să reprocesez o mulțime de ecrane sau chiar interfețe întregi.

O mulțime de designeri preferă să utilizeze fire-frame-uri în acest moment, și anume să arunce pur și simplu o grămadă de linii și cutii care să indice aproximativ unde ar trebui să meargă lucrurile. Personal, prefer să lucrez în Photoshop de la bun început pentru că sunt suficient de rapid și mă lasă să văd ce se va întâmpla. De asemenea, cred că există mai mult de design informațional decât de unde apare ceva pe o pagină. Pur și simplu modificarea culorilor și a culorilor de fundal poate face dintr-o dată un element de pagină mai jos pe pagină mai important.

Odată ce aveți o idee grosolană despre modul în care informațiile trebuie să funcționeze împreună, ar trebui să veniți cu un design de lucru care este, în general, în regulă, și apoi să perfecționați, să rafinați, să rafinați. Deseori, voi termina cu cinci sau șase versiuni ale aceluiași aspect, unde am încercat diverse lucruri, cum ar fi dimensiunile de tip, imaginile, modificările layout-ului, fundalurile și așa mai departe, pentru a vedea cum afectează informațiile pe care le prezentați.

Nu contează cât de bine credeți că este primul layout, vă pot garanta că, după ce ați petrecut mai mult timp și ați venit cu mai multe versiuni, ați descoperit că originalul dvs. nu a fost la fel de bun pe cât credeți pentru prima oară. Uneori, v-ați încheiat aruncând întregul design și începând din nou, dar dacă aveți o bază bună, atunci rafinarea ar trebui să vă ajungă la un finisaj extraordinar.

5. Obțineți opinii ale altora, dar faceți apelurile finale

În orice loc de muncă mare, veți avea o mulțime de alte opinii implicate. În cele mai multe cazuri, acestea vor fi opiniile clientului dvs. Înainte de a începe să lucrez cu FlashDen, am lucrat cu tot felul de companii care creează site-uri web. Printre ei, am avut nenorocirea de a proiecta pentru mai multe companii mari de asigurări și câteva organizații guvernamentale. Eu spun nenorocirea pentru că atunci când ajungi la acea dimensiune de client ai de-a face cu o mult a părților interesate și, în multe situații, nu este clar unde este adevărata putere de decizie. Acest lucru poate duce la întâlniri nesfârșite, la schimbări nesfârșite și la un grad ridicat de dificultate pentru a-ți purta viziunea.

Oricare ar fi clientul, este foarte important să-ți primești opiniile. În afară de orice altceva, în majoritatea cazurilor, ei știu mult mai multe despre afaceri decât tu. Sperăm că, de asemenea, știu mai multe despre utilizatori decât dumneavoastră, iar cu aceste cunoștințe vor putea oferi sfaturi constructive.

De asemenea, este important să obțineți opinia echipei de dezvoltare cu care lucrați. La FlashDen, suntem norocosi sa avem doi oameni care au o multime de abilitati in designul si usurinta utilizarii interfetei. Și contribuția lor, împreună cu restul echipei, a făcut o mare diferență pentru produsul final.

Dar, în cele din urmă, depinde de dvs. ca expert de design pentru a veni cu apelul final. Dacă aveți un client greu, acest lucru poate fi dificil, deoarece un client crede adesea că ar trebui să facă apelurile finale. Dacă este cazul, trebuie (a) să găsiți modalități de a explica, educa și a arăta clientului că alegerile dvs. sunt în folosul lor; și (b) să mutați uneori gloanțele și să acceptați directivele clientului ca o altă constrângere în proiectul dvs. și să găsiți modalități de a face să funcționeze.

6. Organizați-vă pentru viitor

Când codificați un design pentru un site mare, este foarte important să vă gândiți din nou la viitor. Modul în care gestionați fișierele și folderele dvs. vă va afecta mult mai târziu. De exemplu, recent am decis să construim un site surori pentru FlashDen, care să se concentreze doar pe audio, numit AudioJungle. Pentru a face lucrurile mai simple, site-ul va rula acelasi cod HTML, doar cu foi de stil pentru a arata ca un alt site. O astfel de dezvoltare aruncă tot felul de noi provocări la structurile mele de fișiere și foldere, foile de stil și HTML-ul meu. Iată câteva lucruri de reținut:

  1. Organizați-vă într-o structură de dosare bună
    Scripturile, foile de stil, imaginile de interfață, imaginile de conținut și altele trebuie păstrate separat. Cu un site mic, ați putea să aruncați lucrurile împreună, dar cu cât veți obține mai mult, cu atât mai important este să găsiți ceea ce aveți nevoie.
  2. Utilizați un sistem de numire coerent și inteligent pentru fișierele dvs.
    Nu este nimic mai rău decât să te uiți la o grămadă de imagini cu nume precum "gd_l3.jpg". Cum faceți acest lucru este în mare măsură o chestiune personală, dar găsesc că numirea folosind prefixe comune și numele fișierelor descriptive ajută foarte mult. De exemplu, s-ar putea să încep fiecare imagine care merge în antet cu cuvântul 'header_', fiecare fundal cu 'bg_' și apoi un fond de meniu din antet va fi denumit 'header_bg_menu.jpg'. Prefixele au avantajul că, atunci când fișierele sunt sortate după nume, toate apar împreună.
  3. Utilizați Subversion
    Acest lucru mi-a fost forțat de dezvoltatorii noștri, dar mulțumesc bunătate! Subversion urmărește fișierele și modificările fișierelor și vă oprește să suprascrieți alți designeri / dezvoltatori care lucrează la același proiect. De asemenea, important, vă ajută să reveniți la vechile versiuni ale lucrurilor. Este nevoie de ceva obișnuit, dar chiar și minus toate motivele pentru care dezvoltatorii o folosesc, este utilă pentru designerii HTML / CSS. Nu știți despre Subversion? Check out Subversion pentru designeri.
  4. Fii atent la modul în care îți creezi codul HTML și CSS
    Este foarte ușor să faceți o problemă cu fișierele HTML și CSS și este foarte greu să le curățați. După patru redesignuri, utilizez încă multe din aceleași fișiere CSS și este o misiune de curățare a claselor care nu mai sunt folosite sau găsirea unor definiții obscure înfășurate în multe straturi. Utilizați o mulțime de comentarii, eventual chiar mai multe stiluri și asigurați-vă că vă numiți bine stilurile!

  5. Obțineți compatibilitatea Browser Compatibility EARLY
    Aceasta este o zonă în care am greșit cu FlashDen și de atunci am plătit pentru ea. Modul meu inițial a funcționat în IE7 și am ignorat IE6 până când am terminat construirea întregului site. De atunci, am adăugat condiționalități IE, hacks și soluții. Este mult mai ușor să faci ceva compatibil când sunt doar câteva elemente pe pagină decât atunci când ai construit un site masiv, așa că nu-mi urma nebunia!

7. Faceți-o ușor să se dezvolte cu foaia dvs. de stil

Cu cât site-ul este mai mare, cu atât mai puțin probabil un designer va vedea sau modifica fiecare pagină. Dacă sunteți un singur designer pe un site mare ca mine - atunci, de asemenea, ar putea să nu doriți să fiți chemați la tot. Deci, merită să faceți o foaie de stil care, aproape în mod implicit, face ca lucrurile să arate bine. De exemplu:

  1. Asigurați-vă că stilul de elemente implicite cum ar fi , , si asa mai departe.
    În acest fel, pagina se va prezenta automat în mod automat. Dacă te bazezi pe oameni care fac lucruri de genul atunci inevitabil vei termina cu variante pe pagini.
  2. Creați elemente reutilizabile pe care dezvoltatorii le pot utiliza.
    De exemplu, pe FlashDen, avem o clasă de tabel numită "general_table", ceea ce face un stil de rezervă bun pentru date. Când am o șansă de a modela o pagină, pot să fac mai multe tipuri de tabele și date evidențiate, dar cel puțin un dezvoltator care pune împreună o pagină are un stil de masă,.
  3. Asigurați-vă că aspectul paginii dvs. are o structură care arată bine chiar și atunci când are doar text în ea.
    În mod inevitabil, vor exista pagini pe care nu ați avut ocazia să le adăugați și care ar putea părea puțin plictisitoare. Prin utilizarea unor elemente precum stilurile de titlu, barele laterale și așa mai departe, vă puteți asigura că ele încă arată plăcut și au un stil vizual. De exemplu, pe FlashDen, înfășurăm majoritatea blocurilor de text în:


    rubrică
    Conţinut

    Și acest lucru implicit împachetează textul cu un mic margine în jurul acestuia și cu o poziție. Este ușor pentru un dezvoltator să lucreze cu și face o treabă bună de separare a textului și a face să pară mai ușor de citit. Avem, de asemenea, o componentă a barei laterale, care este doar un alt pachet pentru conținut suplimentar de text, dar din nou face ca pagina să arate mai vizibilă.

Firește, este optimă dacă fiecare pagină trece printr-un designer, dar este și mai puțin stresantă, știind că chiar dacă nu o vor face, va arăta totuși profesională și uniformă.

Care este parerea ta?

Astea sunt sfaturile mele. Dacă aveți unele dintre dvs. de a lucra pe site-uri mai mari, lăsați un comentariu!

Cod