Çfarë duhet dhe nuk duhet të Dizajnit të Madh të Uebit

Kur ndiqet, ky udhëzues do të provojë të jetë një burim mjaft i vlefshëm i dizajnit të uebit, veçanërisht nëse planifikoni ta përdorni softuer për zhvillimin e faqeve të internetit në të ardhmen. Nga të papërvojët tek ata me përvojë, ky udhëzues ka diçka për të gjithë.

Procesi i Dizajnit të Madh të Uebit Vetëm për t'u siguruar që të gjithë jemi në të njëjtën faqe, le të fillojmë me përkufizimin bazë për "web design". Sipas Wikipedia, dizajni i faqes në internet është:

“Një proces konceptualizimi, planifikimi, modelimi dhe ekzekutimi i shpërndarjes së mediave elektronike nëpërmjet internetit në formën e gjuhës Markup të përshtatshme për interpretim nga shfletuesi i internetit dhe shfaqje si ndërfaqe grafike e përdoruesit” .

Procesi i dizajnit të faqes në internet mund të krahasohet me procesin e shkrimit të një punimi kërkimor. Në fazën e konceptualizimit/planifikimit, krijohen grafikët e rrjedhës (skica) të cilat ilustrojnë strukturën e lundrimit të faqes suaj të internetit. Në fazën e modelimit, krijohen korniza statike teli (skica e përafërt) të cilat ilustrojnë paraqitjen skeletore për çdo seksion të faqes suaj të internetit. Pasi të krijohen kornizat me tela, grafika, ngjyrat dhe teksti përdoren për të krijuar dizajnin e faqeve tuaja të internetit bazuar në paraqitjen e kornizave me tela. Në fazën e ekzekutimit, dizajni juaj konvertohet në një format të mbështetur nga shfletuesit e uebit, shtohet teksti dhe përmbajtja, dhe më në fund, faqja juaj e internetit publikohet drejtpërdrejt në internet për ta parë botën (drafti përfundimtar).

Të tre fazat e procesit të projektimit janë po aq të rëndësishme. Shumë dizajnerë të internetit kalojnë një fazë për të kursyer kohë ose për shkak se ata nuk mendojnë se është e nevojshme. Sidoqoftë, të tre fazat janë të nevojshme nëse qëllimi juaj është të krijoni një dizajn të suksesshëm dhe një faqe interneti të respektueshme. Edhe nëse përdoren të tre fazat, ka shumë gabime që dizajnerët e uebit mund të bëjnë që do të çojnë në faqe interneti me cilësi të dobët dhe jo miqësore për përdoruesit. Është koha për të pastruar kabinetin nga praktikat e këqija të dizajnit të uebit dhe për ta rimbushur atë me ato të mira.

Faza 1: Konceptualizimi dhe planifikimi
Kjo fazë anashkalohet më shpesh se dy fazat e tjera. Shumica e shkrimtarëve nuk e pëlqejnë krijimin e skicave për punimet kërkimore, dhe shumica e projektuesve të uebit nuk pëlqejnë as krijimin e diagrameve të rrjedhës. Mos u bëni dembel. Nëse bëni përpjekje dhe planifikoni faqen tuaj të internetit, atëherë do të gjeni që procesi i dizajnit të uebit të shkojë pa probleme me më pak gabime të bëra gjatë rrugës.

Ka disa gjëra që do t'ju nevojiten për të konceptuar dhe planifikuar në mënyrë efektive faqen tuaj të internetit:

• një tru
• një stilolaps dhe një letër
• (opsionale) softuer i grafikut të rrjedhës
• një ide e përgjithshme e seksioneve të ndryshme të faqes suaj të internetit

Për të filluar, kapni stilolapsin dhe letrën tuaj ose lëshoni programin tuaj të preferuar të grafikut të rrjedhës. Ne përdorim OmniGraffle Professiona për Mac OS X, i cili kushton 150 dollarë për licencë, por ia vlen nëse krijoni faqe interneti rregullisht. Nëse jeni në një PC, atëherë SmartDraw është një pjesë e shkëlqyer FALAS e softuerit të grafikut të rrjedhës që mund ta përdorni. Megjithatë, një stilolaps dhe një letër funksionojnë mirë.

Ka shumë metoda për krijimin e grafikëve të rrjedhës. Ne do t'ju tregojmë mënyrën më themelore për ta bërë këtë për hir të kohës dhe gjatësisë së këtij artikulli. Nëse dëshironi të mësoni më shumë rreth grafikëve të rrjedhës, kërkoni për grafikët e rrjedhës në Google ose Yahoo.

Shikoni grafikun e rrjedhës që krijuam kur konceptuam faqet Chromatic. (1) Në krye të grafikut të rrjedhës rendisim emrin e faqes sonë të internetit. (2) Më pas, ne përfshijmë çdo seksion kryesor të faqes sonë të internetit: Shtëpia, Rrethi dhe Shërbimet. Këto seksione janë navigimi kryesor për faqen tuaj të internetit. Se cilat do të jenë emrat e secilit seksion varet tërësisht nga përmbajtja e faqes suaj të internetit. Mundohuni të përdorni sa më pak seksione që të jetë e mundur në mënyrë që vizitorët tuaj të mos mbingarkohen kur lundrojnë në faqen tuaj të internetit.

(3) Më pas, shtoni të gjitha faqet dytësore (nënseksionet) që do të renditen në secilën prej faqeve kryesore. Për Shtëpinë, ne kemi përfshirë Dizajn Profesional të Uebit, Zhvillimin e Uebit dhe Optimizimin e Motorit të Kërkimit. Lundrimi dytësor duhet të jetë më përshkrues se navigimi parësor. Sa më e thellë të shkojë hierarkia lundruese e faqeve tuaja të internetit, aq më përshkrues duhet të jetë çdo etiketë.

Dosët

• Më pak është më shumë; mbajeni numrin e seksioneve kryesore në minimum. Ne përdorim 6 seksione në faqen tonë të internetit që është më se e mjaftueshme
• Pavarësisht nëse përdorni një stilolaps dhe letër ose softuer grafiku, mbajini gjërat sa më të pastra dhe të organizuara që të jetë e mundur. Megjithëse ju (dhe kushdo që punon me ju) jeni të vetmit që do të përdorni grafikun e rrjedhës, ai duhet të ketë ende kuptim - Seksionet tuaja kryesore duhet të përdorin terma më të gjerë, ndërsa termat dytësorë dhe terciorë duhet të jenë më përshkrues

Donts
Krijimi i një grafiku rrjedhash është mjaft i drejtpërdrejtë; megjithatë, ka disa gabime që mund të bëhen lehtësisht:

• Mos përdorni terma shumë përshkrues në navigimin tuaj parësor, përveç nëse e gjithë faqja juaj e internetit fokusohet në një temë të ngushtë - Mos u përpiqni të grumbulloni tema të shumta në të njëjtën faqe. Krijoni një seksion të përgjithshëm për këto tema dhe nga ai seksion krijoni nënseksione. Kjo do të bëjë që faqet e internetit të nënseksioneve (përshkruese) të kenë një renditje më të mirë në motorët e kërkimit (Google, Yahoo, MSN, Pyet) Pasi të keni krijuar një diagram konciz dhe përshkrues, jeni gati të kaloni në fazën e dytë. e procesit të dizajnimit të faqes në internet:

Faza 2: Modelimi
Në fazën e modelimit, krijohen modele statike "wireframe". Çdo model ilustron një skelet të zhveshur të paraqitjes për secilën nga faqet e internetit që do të përfshihen në faqen tuaj të internetit. Kjo fazë është e rëndësishme sepse na jep një ide se ku do të vendosen elementë të ndryshëm në dizajnin tonë. Disa nga këta elementë janë:

• logo
• menyja e lundrimit
• përmbajtje
• imazhe, video

Për të krijuar këto modele, mund të përdorni një stilolaps dhe letër ose softuerin tuaj të preferuar të modelit. Në të kaluarën kemi përdorur Photoshop, por së fundmi kemi përdorur OmniGraffle Professional. OmniGraffle nuk është aq intensiv i burimeve sa është Photoshop dhe na lejon të mbledhim modelet tona të kornizës së telit shumë më shpejt.

Përveç kësaj, sigurohuni që të keni grafikun(et) e rrjedhës që keni krijuar afër, pasi do t'ju duhet t'i referoheni herë pas here për t'u siguruar që po tallni të gjitha faqet që do të shfaqen në faqen tuaj të internetit.

Këtu është shembulli ynë se si duhet të duket një model me kornizë teli. Siç mund ta shihni, nuk ka ngjyra ose grafikë të përfshirë. Kjo është saktësisht se si duhet të jetë një model me kornizë teli - një plan urbanistik i dizajnit tuaj. Qëllimi është që të kemi një ide të përgjithshme se ku do të vendoset secili prej elementeve të faqes së internetit.

Zakonisht fillojmë nga lart majtas dhe ecim poshtë në fund. Nuk ka asnjë mënyrë specifike se si duhet të duket një kornizë teli. Perdor imagjinaten tende. Megjithatë, sigurohuni që gjatë krijimit të kornizave tuaja teli të mos harroni të përfshini elementët më të rëndësishëm të një faqe interneti (logo, meny lundrimi, vendosje e përmbajtjes, vendosje imazhesh/video).

Nëse disa nga faqet tuaja do të përdorin të njëjtin plan urbanistik, atëherë nuk është e nevojshme të talleni me të gjitha ato faqe (edhe pse sigurisht që mundeni). Vetëm sigurohuni që të bëni modele të çdo plani unik që do të ketë uebfaqja juaj. Do ta falënderoni veten më vonë.

Do's

• modeloni të gjitha faqet unike
• përfshini elementë të rëndësishëm (logo, navigacion, vendosje përmbajtjeje, imazhe/vendosje video) -filloni nga lart dhe shkoni poshtë -referoni grafikun tuaj të rrjedhës të krijuar në fazën 1 për t'ju bërë të mos harroni të bëni modele të ndonjë faqeje -ruani, ruani, ruaj – si me çdo gjë në kompjuter, ruajeni modelin(ët) tuaj çdo 10 minuta ose më shumë
• përqendrohuni në paraqitjet e pastra dhe miqësore për përdoruesit - etiketoni elementët tuaj në mënyrë që të mos harroni se çfarë janë kur i referoni në fazën 3, ekzekutimi - përdorni ueb sajte të tjera si frymëzim; nuk ka asgjë të keqe të marrësh elementë nga sajte të tjera dhe t'i bësh ato të tuat (shih "mos")

Të Dont's

• mos përfshini grafika ose ngjyra (kjo është për fazën tjetër) - mos i bëni modelet tuaja shumë "të zënë"; përqendrohuni në paraqitje të pastra, të organizuara mirë dhe miqësore për përdoruesit - mos e kaloni këtë fazë; është po aq i rëndësishëm sa i pari dhe i fundit - nëse merrni elementë nga faqet e tjera të internetit, sigurohuni që të mos bëni plagjiaturë; ka një ndryshim midis frymëzimit nga një uebsajt tjetër për të krijuar elementë të caktuar të dizajnit tuaj dhe heqjes së hapur të paraqitjes dhe ngjyrave të tyre

Faza 3: Ekzekutimi
Në fazën e tretë dhe të fundit, ekzekutimin, planifikimi nga fazat 1 dhe 2 kombinohen për të ndihmuar në krijimin e një faqe interneti të drejtpërdrejtë, interaktive.
Faza e tretë është larg nga koha më intensive pasi do të jeni 1) krijimi i grafikëve 2) krijimi i përmbajtjes dhe së fundi, 3) konvertimi i dizajneve të uebit nga imazhet në kod që shfletuesit e uebit përdorin për të paraqitur faqen tuaj të internetit në botë.

Deri në momentin që të arrini fazën e tretë, duhet të keni një ide të qartë për:

• si do të kalojnë vizitorët tuaj nga një vend në tjetrin (faza 1, grafiku i rrjedhës) -si do të vendosen faqet tuaja të internetit (faza 2, modele me kornizë teli)

Nëse nuk keni një ide të qartë për këto dy gjëra, kthehuni në fazën e parë dhe të dytë dhe vazhdoni t'i zhvilloni ato. Do të zbuloni se faza e tretë është më e lehtë kur të keni ndërtuar një plan të qartë dhe konciz beteje për hartimin e faqes tuaj të internetit.

Hiqni stilolapsin dhe letrën
Në fazën 3, duhet të përdorni Photoshop ose një program tjetër të redaktimit të imazheve pasi do të përdorni ngjyrat dhe grafika për të krijuar paraqitjen për faqen tuaj të internetit.

Zakonisht fillimisht fillojmë të krijojmë faqen "home" (indeksin). Përdorni kornizat tuaja teli që keni krijuar në fazën 2 si një shabllon për secilën nga faqet që krijoni. Sidoqoftë, në vend që të përdorni kuti të forta, përdorni grafikë, ngjyra dhe tekst në vend. Çdo faqe duhet të duket saktësisht se si dëshironi të duken në internet pasi kjo është faza e fundit e procesit të projektimit.

Sigurohuni që të përfshini sfondin për navigimin tuaj (por në fakt mos e shtoni tekstin në imazhin tuaj). Kur konvertohet duke përdorur CSS (fletë stili kaskadë), navigimi juaj duhet të jetë në formën e tekstit dhe jo në formën e imazheve. Imazhet nuk mund të zvarriten nga motorët e kërkimit (fjalë kyçe të përdorura në navigimin tuaj nuk do të indeksohen në faqet e rezultateve të motorit të kërkimit, që do të thotë se më pak njerëz do të mund të gjejnë faqen tuaj të internetit).

Kur jeni të kënaqur me modelet tuaja dhe mendoni se ato janë gati për t'u vendosur në internet, është koha për t'i ndarë dizajnet në mënyrë që të krijoni një plan urbanistik të bazuar në CSS. Për më shumë informacion mbi konvertimin e paraqitjeve tuaja në CSS ose shënimin e faqes suaj të internetit në CSS, vizitoni w3schools.com. Pasi kërkuam nëpër internet, nuk mundëm të gjenim një tutorial të mirëfilltë imazh-në-CSS – prandaj prisni një nga ne në javët e ardhshme. Konvertimi i modeleve tuaja në CSS është jashtëzakonisht i rëndësishëm pasi paraqitjet e tabelave janë një gjë e së kaluarës.

Këtu është një shembull i një faqe interneti pothuajse të përfunduar të paraqitjes që tallëm në fazën 2. Kjo është marrë direkt nga shfletuesi ynë i internetit dhe siç mund ta shihni, tani ka një logo, ngjyra, një sistem të bukur navigimi, një fund, dhe më e rëndësishmja, një plan urbanistik i pastër dhe i organizuar.
Falë planifikimit në fazat 1 dhe 2, faqosja jonë është e mirëorganizuar dhe e lehtë për t'u përdorur.

Dosët

• referojuni shablloneve tuaja që janë krijuar në fazën 2; edhe pse është mirë të devijoni nga faqosja juaj origjinale, nuk duhet të keni nevojë
• bëni disa kërkime përpara se të krijoni dizajnin tuaj aktual; merrni ide nga faqe të tjera dhe bëjini tuajat (pa plagjiaturë)
• përfshini ngjyra dhe grafikë për të krijuar pamjen përfundimtare për faqet tuaja të internetit - përdorni CSS (fletë stili kaskadë) për të kthyer dizajnet tuaja nga imazhet në shënime të kuptueshme nga shfletuesit e uebit - referoni grafikun tuaj të rrjedhës nga faza 1 kur kodoni faqet tuaja me hiperlidhje; është më mirë të përdorni një menu drop-down që përfshin të gjitha (ose shumicën) e lidhjeve në faqen tuaj të internetit në çdo faqe; kjo do të mundësojë navigim më të lehtë dhe gjithashtu do t'i bëjë faqet tuaja më të lehta për t'u zvarritur kur merimangat e motorit të kërkimit ndalojnë; një vend i mrekullueshëm për të marrë menutë e lëshimit të CSS është në DynamicDrive.com - finalizoni dizajnin tuaj ndërsa punoni në Photoshop ose çfarëdo softueri për modifikimin e imazheve që përdorni; mund të jetë një dhimbje për të bërë ndryshime në dizajnin tuaj pasi të konvertohet në markup (kod)

Donts

• mos e përfshini tekstin në menytë tuaja të navigimit kur konvertoni në CSS; në vend të përdorimit të tekstit të imazhit, përdorni tekst të rregullt që është i lexueshëm nga merimangat e motorëve të kërkimit
• mos përdorni tabela gjatë konvertimit; edhe nëse keni nevojë të blini një libër në CSS, do t'ia vlejë; tavolinat janë të vdekura
• mos i anashkaloni dy fazat e para vetëm për të kursyer kohë; faqja juaj e internetit do të jetë më e mirë nëse filloni nga fillimi i procesit të dizajnit të uebit (në vend të fundit)
• mos harroni të kompresoni imazhet tuaja kur ato shkëputen për CSS; nuk ka asgjë më të keqe se një uebsajt me ngarkim të ngadaltë për shkak të skedarëve të mëdhenj të imazhit; Photoshop ka një opsion "Ruaj i optimizuar për ueb" (CS3 - "Ruaj për ueb dhe pajisje")

Procesi e bën të përsosur
Duke ndjekur një proces të projektimit të uebit siç është ai i ilustruar në këtë artikull, ju rritni shanset për të krijuar një faqe interneti të mirëorganizuar, lehtësisht të lundrueshme dhe shumë miqësore për përdoruesit. Le të përballemi me të – nëse vizitorët humbasin ose hutohen gjatë përpjekjes për të shfletuar faqen tuaj të internetit, ata mund të shtypin butonin prapa dhe të kërkojnë një faqe interneti më miqësore për përdoruesit. Njerëzit nuk u pëlqen të mendojnë kur bëhet fjalë për të gjetur rrugën e tyre rreth faqeve të internetit. Mos i bëni ata të mendojnë. Ju mendoni duke planifikuar faqen tuaj të internetit nga faza 1 në fazën 3 dhe do të zbuloni se më shumë njerëz do të kënaqen duke vizituar faqen tuaj të internetit.