Web izstrāde un dizains 101

web_development_101Vai vēlaties uzzināt Web attīstības un dizaina pamatus? Satriecošs…


Bet šai domu līnijai ir problēma, vai arī daudzām no tām ir…

  • Kāds ir vietnes izveidošanas mērķis? Vai tiešām katram tādu vajag?
  • Ja tā, kā jūs izveidojat kvalitatīvu vietni?? Citiem vārdiem sakot, kā jūs iemācāties pamata web attīstību un dizainu, kas ļautu jums pats izveidot šo kvalitatīvo vietni?
  • Vēl svarīgāk ir tas, vai jūs, izmantojot PIRMO mēģinājumu, varat izveidot kvalitatīvu vietni? Vai arī jums ir nepieciešama vairāku gadu pieredze, lai jūs varētu cerēt uz jebkuru rezultātu, kas ir šausmīgāks?

Atbildēsim uz visu šo iesācēju ceļvedis tīmekļa izstrādei un dizainam.

[Spoilera trauksme. Jā, pirmajā mēģinājumā varat izveidot kvalitatīvu vietni.]

Kas ir ietverts šajā rokasgrāmatā?

Labi, pirmkārt, mēs priecājamies, ka esat turpinājis lasīt un ka esat nolēmis izmēģināt tīmekļa attīstību. Lūk, kā tas notiks:

Nodaļas ir parādītas ļoti vienkāršā veidā, un to galvenais saturs ir kreisajā pusē, bet ierakstāmi elementi – labajā pusē. Patīk:

Ceļveža ievads: 1. nodaļa

Tagad, kā rīkoties:

  • Kamēr jūs lasīsit 1. lasījumā: Mēs iesakām jums izlasīt visu lietu no augšas uz leju. Tas ļaus jums labi apskatīt tēmu 10 000 pēdu apjomā un palīdzēs jums saprast vissvarīgākās tās daļas. Tas arī nodrošinās jūs ar pamata rīkiem un metodēm, kā rīkoties ar atsevišķiem uzdevumiem.
  • Atrodoties otrajā lasījumā un tālāk: Izmantojiet TOC un pārejiet uz to daļu, kas jūs visvairāk interesē. Nekautrējieties arī izmantot kopīgošanas pogas blakus katrai nodaļai un nosūtīt saites sev vai saviem draugiem / sekotājiem, kuri varētu būt ieinteresēti.

Gatavs? Pāriesim pie 1. nodaļas.

Kam šī rokasgrāmata?

Ja vēlaties uzzināt pamata web izstrādi un dizainu, šī rokasgrāmata ir paredzēta jums. Lai kāda būtu jūsu motivācija.

Lai sāktu, jums nav vajadzīgas nekādas iepriekšējas tehniskās zināšanas (izņemot pamata “Web prasmes”). Šīs rokasgrāmatas būtība ir būt sava veida “101” kursam ikvienam, kurš ir ieinteresēts vietņu izveidē un tīmekļa attīstības apguvē.

Šie ir daži izplatīti iemesli, kāpēc jūs varētu interesēt:

  • 1. Jums ir nepieciešama sava biznesa vietne (un vēlaties uzzināt, vai varat pats to izveidot).
  • 2. Jūs vēlaties Mācīties tīmekļa attīstību no aizraušanās vai īslaicīgas intereses (nekas slikts par to).
  • 3. Jums ir nepieciešama skolas vietne.
  • 4. Jūs palīdzat draugam vai ģimenes loceklim iegūt viņu vietni tiešsaistē.

Galvenā ideja, kas mūs vadīs

Tas ir svarīgi! Lūdzu, nekautrējieties uz mums, ja esat pieredzējis tīmekļa izstrādātājs, kurš to lasa, bet galvenā ideja, kas mūs vadīs visā tīmekļa attīstības un dizaina 101 resursā, ir šāda:

“Vismazākās pretošanās pieeja”

Šeit ir minēti trīs vismazākās pretestības principi:

  • Mēs esam nesadalot lietas molekulārā līmenī. T. i. mēs neuzskatīsimies par to, kā darbojas programmēšanas valodas vai kā darbojas tīmekļa serveris.
  • Mēs esam neizgudrot riteni no jauna. T. i. ja kāds jau ir atrisinājis doto problēmu un darījis to pieejamu, mēs to izmantosim.
  • Mēs esam vienkārša risinājuma padarīšana par satriecošu, nevis sarežģīts un šķietami funkcionālāks risinājums buggy un nav saprotams.

1. NODAĻA: Plāns

Jūsu ideja, vietnes tips, domēna nosaukums un mitināšana.

Pirms vietnes izveidošanas jums būs nepieciešams plāns

Ironiski, kā tas varētu izklausīties – 80. gadu hitu šovs “A-Team” mūs ir iemācījis, labs plāns ir panākumu atslēga.

Ja jums jau kādu laiku ir bijusi vietne, kurā jūs uzturas, tad jūs noteikti satraukti par vienīgo ideju beidzot nodot to citiem, lai lasītu un pārlūkotu.

Jūs vēlaties, lai jūsu vietne būtu satriecoša. Jūs droši vien zināt, kā tas zināmā mērā izskatīsies. Vai varbūt jums pat ir gatavs ideāls logotips.

Bet…

Tas nepavisam nav tas, kur jums vajadzētu sākt. Ja jūs sākat ar iepriekš noteiktām cerībām, tas jums tikai radīs daudz neskaidrību pa ceļam un beigās nesalīdzināmu rezultātu..

Tā vietā padomājiet par sekojošo:

  1. Atdalieties no visiem iespējamiem tehniskajiem mērķiem. Piemēram, mērķis apgūt vietņu tehnoloģijas vai noteiktu vietnes programmatūru.
  2. Uzdodiet sev vienu galveno jautājumu: “Kam man vajadzīga vietne?”

Tas nav saistīts ar jums, tas attiecas uz vietnes mērķi.

Jautājumi, kas jums jāuzdod sev, pirms izveidojat savu vietni

  1. Ko vietne ir paredzēta, lai sasniegtu?
  2. Kāda būs galvenā “lieta”, kas tiek parādīta vietnē? (piemēram, jūsu bizness, produkts, jūsu emuāra ziņas utt.)
  3. Vai vietnei būs kāds īpašs mērķis? (piemēram, e-komercijas veikals, fotogrāfa portfelis utt.)
  4. Kas ir mērķauditorija?
  5. Kāpēc viņus interesē vietnes tēma?
  6. Kādas sāpes vietne atrisina atsevišķiem auditorijas locekļiem?

Par šiem pēdējiem 3 jautājumiem uzminēsim minūti uz auditoriju …

Ir 2 galvenie vietņu veidošanas noteikumi. 1. noteikums:

 Lasītājs / apmeklētājs ir pirmais. Viņi ir galvenā persona, kas jūsu vietnei ir jāpatīk.

Savā ziņā jūsu vietne nav jūsu. Tas ir savējais.

(2. noteikums tiks apspriests minūtes laikā.)

Aizmirstot par šo vienkāršo vadlīniju, jūs varat nonākt līdz nepareizam ceļam pat līdz vietai, kurā atrodaties vietnē, kas mulsina visus apkārtējos, izņemot jūs.

“Ugh! Cilvēki vienkārši nesaprot, par ko ir šī vietne. Kā viņi var būt tik nezinoši?! ” – jūs galu galā domājat. Bet kā izrādās, nezinošais tu biji tu.

Vienīgais veids, kā no tā izvairīties, ir izveidot savu vietni, paturot prātā lasītāju, jau no sākuma.

Tātad… paņemiet šo papīra lapu un atbildiet uz visiem iepriekš minētajiem jautājumiem.

Kad esat pabeidzis, jums ir galīgais vadlīniju komplekts, uz kuru jūs rīkosities, strādājot savā vietnē.

Šīs atbildes būs ārkārtīgi spēcīgs rīks, ejot līdzi. Jūs varēsit atgriezties pie viņiem ikreiz, kad nāksies saskarties ar lēmumu par jūsu vietni.

Vai jums jādara * tas * vai * tas *? Dodieties uz atbilžu lapu un uzziniet. Vai jums vajadzētu izmantot plašu vai šauru sānjoslu? Dodieties uz atbildēm, uzziniet, kura, visticamāk, rezonē ar mērķa lasītāju. Utt.

Domēna vārdi un tīmekļa mitināšana

Ja vēlaties būt vietnes īpašnieks, jums ir nepieciešams domēna vārds un tīmekļa resursdators.

Nu, labi, tehniski runājot, jūs varat izveidot testa vietni visu savā datorā un pēc tam palaist to no vietējā tīmekļa servera (arī instalēta kā programmatūra datorā), taču tas nebūtu izmantojams risinājums 99% no gadījumi, tāpēc to vienkārši izlaidīsim.

Resurss un domēns…

Sliktā ziņa ir tā, ka viņi abi maksā naudu.

Labās ziņas … tā ir ne tik daudz nauda, ​​cik liela ir lietu shēma. Turklāt, mācoties, jūs pat varat atvērt vairākas mazas vietnes ar vienu domēna vārdu un vienā tīmekļa resursdatorā.

Bet sāksim sākumā.

Tīmekļa mitinātāji:

  • Vienkārši izsakoties, tīmekļa mitinātājs ir vieta, kur atrodas jūsu vietne un kur to var atrast jūsu apmeklētāji. Savā ziņā vietņu tīmekļa mitinātāji ir tāpat kā dzīvokļi cilvēkiem. Zem pārsega tīmekļa mitinātāji ir uzņēmumi, kas apmaiņā pret naudu iznomā savus serverus (… mazi dzīvokļi jūsu vietnēm).
  • Lai sāktu, tiks darīts parasts dalīta hostinga plāns. Jūs varat saņemt tos par jebko, sākot no USD 3 mēnesī. Šeit ir jauks populāro tīmekļa mitinātāju salīdzinājums. Pārbaudiet to un izlemiet, kurš no šiem uzņēmumiem jums šķiet piemērots. Tomēr mūsu ieteikumi attiecas uz vietnēm SiteGround, A2 Hostings un Dreamhost.

Domēni:

  • Ja tīmekļa mitinātājs ir dzīvoklis, domēns ir šī dzīvokļa adrese. Piemēram, šīs vietnes domēns ir hostfacts.com.
  • Lai sāktu, izvēlieties vēlamo domēna vārdu un iegādājieties to no reģistratūras. Šeit ir visaptverošs ceļvedis, kā iegādāties domēna vārdu, un šeit ir domēnu vārdu ģeneratoru saraksts.

 

Ieteikumi un padomi domēna vārda izvēlei

Labi, ka viena lieta ir doties pie kāda domēna reģistratūras un faktiski iegādāties domēnu, bet kā izvēlēties pareizo domēna vārdu?

Ir pāris skolas:

  • Zīmolu domēna vārdi. Tie ir domēni, kas sastāv no neeksistējošiem vārdiem. Padomājiet, piemēram, Google.com vai Yahoo.com. Pirms šo uzņēmumu ienākšanas šie vārdi neko nenozīmēja. Firmas domēna vārda augšdaļa ir tāda, ka tas ir… labi, viegli zīmols, neaizmirstams un jūsu vietni ir viegli atšķirt no citām.
  • Uz atslēgvārdiem balstīti nosaukumi. Tie sastāv no esošiem vārdiem, kas ievietoti secībā, kas apraksta vietnes mērķi. Padomājiet, piemēram, Pizza.com vai StartBloggingOnline.com. Izmantojot tādu domēna vārdu, jūsu apmeklētāji varēs precīzi paredzēt, kāda veida vietni viņi tikai gatavojas apmeklēt. Negatīvie ir tas, ka šie domēni parasti nav tik viegli zīmoloti.
  • Kombinētie nosaukumi. Tie ir domēnu ar firmas zīmi un domēnu, kas balstīti uz atslēgvārdiem. Padomājiet, Facebook.com vai Copyblogger.com. Šādi nosaukumi apmeklētājam norāda uz “vietnes” dabu, taču tie joprojām ir ļoti viegli ražojami.

Dažas vispārīgas vadlīnijas neatkarīgi no jūsu izvēlētā domēna veida:

  • Padariet domēnu viegli iegaumējamu.
  • Padariet to īsu un vienkāršu. Jo ilgāks domēns, jo mulsinošāks tas ir.
  • Iegūstiet .com (ja iespējams). .Com ir galvenais pieejamais “augstākā līmeņa domēns”. Nesamierinieties ar neko citu.
  • Centieties izvairīties no defisēm. Iegūstiet savu vārdu viena burbuļa formā, piemēram, “cakerecipes.com”, nevis “cake-recipes.com”.

Pēc šīs nodaļas gatavās lietas:

  • Domēna vārds.
  • Tīmekļa mitinātājs.
  • Jūsu atbilžu lapa – vietnes mērķi un tas, kā tā kalpos auditorijai.

Vai nepieciešama papildu palīdzība? Tālāk jums lasīsim tālāk:

  • Kāpēc dalīta mitināšana? Galvenie saimnieku veidi salīdzināti
  • 10 lietas, kas tīmeklim rada labu
  • 12 noteikumi pareiza domēna vārda izvēlei
  • Visaptverošs vietņu plānošanas ceļvedis

2. NODAĻA: Projektēšana un stiepļu ietvaru veidošana

Paņemiet papīru un pildspalvu un saskrāpējiet kopā ar savas vietnes struktūru

Labi, sāksim projektēšanas fāzi.

Pirmkārt, šeit ir darba ētika, ko mēs šeit izmantosim:

  • Mēs izmantojam pildspalvu un papīru tik ilgi, cik varam, un tikai pēc tam pārslēdzamies uz datoru. Ticiet mums, katra minūte, kas pavadīta, strādājot pie sava dizaina, uz papīra, tiek ietaupīta stunda, kad jūs sākat lietot lietas datorā.
  • Mēs strādājam iteratīvi. Mēs darām »pārbaudām rezultātus» uzlabojam »pārbaudām rezultātus» atkārtojam, kamēr tas nav izdarīts.

1. nodaļā mēs pieminējām kaut ko, ko mēs saucām par vietņu veidošanas 1. noteikumu. Tagad ir pienācis laiks noteikumam Nr. 2:

Tīmekļa vietnes veidošanas 2. noteikums:

Vispirms padomājiet par saturu.

Vietnē svarīgs ir saturs. Ne dizains. Saturs.

Cilvēki nāk pēc satura. Viņi nenāk par dizainu. Dizains ir tikai līdzeklis satura nodošanai.

Nekad nesāciet ar to, kā izskatās jūsu vietne. Sāciet ar saturu. Saturs. Saturs. Saturs.

Ko mēs domājam ar “saturu”? Īsāk sakot, tā ir lieta, ko cilvēki vēlas iegūt no jūsu vietnes. Emuāra ziņas, produkti veikalā, forumu pavedieni, ja veidojat forumu, ziņu raksti, biznesa piedāvājums utt.

“Tiešām? Izskatam tiešām nav nozīmes? ” – Tu jautā.

Tā vietā, lai mēs to pārspētu, apskatiet šo lapu:

Vienkārša vietne

Šī vienkāršā tīmekļa lapa līdz šim ir labākais skaidrojums par to, kas ir dizains un kādam mērķim tā kalpo tiešsaistē.

Tāpēc atcerieties, vispirms saturs!

Vietnes saturs un struktūra

Labi, tā kā saturs ir vissvarīgākā lieta, jums tas (lielākajai daļai) jābūt iepriekš sagatavotam. Vai vismaz jums ir jābūt labai idejai par to, cik daudz satura būs un kādā formā.

Piezīme. Mēs zinām, ka šī daļa var būt smaga. Sākums ar saturu vietņu dizainam šķiet diezgan nedabisks, taču tas tiešām ir labākais veids, kā beigās iegūt lielisku rezultātu. Tāpēc padomājiet par saturu, kuru vēlaties dalīties ar lasītāju, un to, kā vēlaties to parādīt.

Nākamais solis ir izdalīt atsevišķus vajadzīgo lapu veidus (piemēram, sākumlapa, produkta lapa, kategorijas lapa, par lapu, kontaktu lapa, galvenā pārdošanas lapa, dažas biļetenu abonēšanas galvenās lapas, galvenais emuāru saraksts, atsevišķas ziņas, iespējams, veikals un kas cits šķiet vajadzīgs).

Padomājiet, kurš ir visefektīvākais veids, kā sakārtot savu saturu vietnē?

Dariet to visu uz papīra. Jums, visticamāk, būs vieglāk un ātrāk, nekā uz vietas iemācīties kādu diagrammu zīmēšanas programmatūru.

Piemērs:

satura struktūra

Ieskrūvējiet stiepļu rāmi

Stiepļu rāmis tīmekļa dizainā ir vienkārši lapas shēma vai plāns – vizuāls ceļvedis, kas attēlo vietnes ietvaru (Wikipedia stāsta mums).

Stiepļu rāmji ir satriecoši! Mēs tos izmantojam lielākajā daļā savu darbību, kuru mērķis ir parādīties tiešsaistē. Piemēram, šeit ir šī paša ceļveža karkass:

Saskrūvējiet stiepļu rāmi

Kā redzat, tas atkal ir uz papīra. Kaut arī šāda veida darbam ir vairākas lietotnes, mēs tos faktiski neiesakām izmantot. Tie varētu būt lieliski piemēroti profesionālajiem dizaineriem, taču iesācējs vai starpnieks zaudē laiku tikai to apguvei, un galu galā viņi neiegūs daudz uzlabojumus salīdzinājumā ar to, ko viņi sasniegtu ar pildspalvu un papīru.

Tātad, kā izveidot karkasu?

Ja esat iesācējs, ir divas pieejas:

  • Dodieties līdzi plūsmai, ja jūtaties spēcīgi, un vienkārši aizvelciet prom (ne vienmēr ir ideāls risinājums).
  • Iegūstiet īsas zināšanas par to, kā pareizi izveidot ietvaru (parasti labāk).

Pēdējam dodieties šeit – lielisks ceļvedis.

(Pārliecinieties, lai izveidotu stiegrojumu katram svarīgam lapu veidam, kuru uzskaitījāt iepriekšējā solī.)

Pēc šīs nodaļas gatavās lietas:

  • Lielākā vietnes satura daļa vai vismaz tās lielākā daļa paredzētā (piemēram, ja jūs paļaujaties uz lietotāja ģenerētu saturu, tad iepriekš to ir grūti iegūt).
  • Jūsu vietnes satura struktūra ir sagatavota kā diagramma.
  • Atsevišķu veidu lappuses, kas jums būs vajadzīgas.

Papildu informācija:

  • 9 soļi vietnes satura plānošanā
  • Vai esat jauns Web dizains? Sāc šeit.

3. NODAĻA: UX un UI

Nekad nenovērtējiet par zemu lietotāja pieredzes un lietotāja interfeisa nozīmi

Tāpat kā lietotāja pieredzē un lietotāja interfeisā.

WebDesignerDepot sniedz mums diezgan poētisku divu definīciju:

UI ir segli, stilbi un valdīšanas tiesības.

UX ir sajūta, ka jūs spējat vizināties ar zirgu un virvē savus liellopus.

Praktiskāka definīcija:

  • Lietotāja saskarne ir tā, ko lietotājs redz, apskatot jūsu vietni.
  • UX ir tas, kā viņi to izjūt.

Pāris un tas, cik labi tas tiek izpildīts, galvenokārt nosaka jūsu vietnes noderīgumu galalietotājam / apmeklētājam..

Gan UX, gan UI dizains pats par sevi ir lielas tēmas, un ir daudz mazāku elementu, kuriem ir nozīme galarezultātā.

Īsāk sakot, ir daudz ko mācīties, ja jūs tikko sākat savu ceļojumu.

Tā vietā, lai mēģinātu piemeklēt visu UX un UI dizaina kursu, ļaujiet mums vienkārši norādīt uz dažiem svarīgiem elementiem un pēc tam nosūtīt jūs tālāk citur tālākai lasīšanai.

Lietotāju mērķi

UX ir saistīts ar lietotāju mērķiem… Ne tik daudz no jūsu mērķiem… Lietotāju mērķiem.

Labi, ko tas nozīmē? Pirmkārt, atgriezieties pie savas vietnes mērķa – lietas, pie kuras jūs strādājāt iepriekšējās nodaļās. Iemesls, kāpēc jūs veidojat vietni, un kā tā palīdz lietotājam / apmeklētājam.

Kā tas izpaužas kā apmeklētāja mērķis? … Kas ir tas, ko apmeklētājs vēlas iegūt vai sasniegt, ierodoties jūsu vietnē? Tas ir viņu mērķis.

Cik viegli šos mērķus sasniegt?

Tālāk pievērsiet uzmanību šādam jautājumam:

  • Vai apmeklētājs var viegli sasniegt savu mērķi? – Vai viņi var vienkārši iegūt precīzu informāciju par konkrēto informāciju?

Lai atbildētu uz šo, jums ir jāatgriežas pie sava karkasa, satura struktūras un vēlreiz jāpārbauda lietas.

Pārliecinieties, ka satura struktūrai un pārdomātajām lapām ir jēga no lietotāja viedokļa. Pārliecinieties, vai viņiem ir iespējams brīvi un bez sajaukšanas pārvietoties starp svarīgajām lapām.

Būtībā šeit mēs pārliecināmies, ka vietne piešķir jūsu apmeklētājiem vērtību.

Grūti to visu izdomāt pats, vai ne??

Ir ļoti ieteicams izpētīt resursus, kas uzskaitīti šīs nodaļas sadaļā “Turpmākais lasījums” … taču varat arī izmēģināt “kapāt”.

Proti, padomājiet, kas jūs satrauc, kad apmeklējat vietnes, kuras ir līdzīgas tai, kuru vēlaties izveidot? Varbūt ir kāda informācija, kurai patiešām ir grūti nokļūt, vai kāds interfeisa elements, kas vietni mulsina.

Veiciet piezīmes, izdariet secinājumus un nepieļaujiet vienādas kļūdas savā vietnē.

Emociju kā rīka izmantošana

Strādājot pie vietnes UI un UX, jūs galvenokārt cenšaties piesaistīt apmeklētājam noteiktas emocijas..

Jūs vēlaties, lai viņi justos noteiktā veidā, kas pārliecinās viņus rīkoties noteiktā veidā. Tādējādi padarot jūsu vietni patiesi noderīgu.

Lai strādātu pie emocionālās darba daļas, viens no labākajiem instrumentiem ir krāsa.

Krāsām dažādās kultūrās ir atšķirīga nozīme. Izpratne par šīm atšķirībām var padarīt jūsu darbu daudz vieglāku. Šeit ir jauka krāpšanās lapa.

Kad atrodaties ballīšu parkā par to, kādas krāsas vēlaties (iespējams) izmantot, šeit ir dažas vispārīgas vadlīnijas, strādājot ar krāsu:

  • Izvēlieties vienu galveno krāsu shēmu, kas sastāv no pāris krāsām, kas labi sader kopā. Šeit ir lielisks krāsu shēmu ģenerators.
  • Izvēlieties vienu krāsu, kas būs jūsu akcenta krāsa – krāsu, kas tiks izmantota darbību pogām, pirkšanas pogām utt. Būtībā jebkas, kas prasa lietotāja uzmanību.

Tipogrāfija

Daudzos gadījumos ar tipogrāfiju jūs uzvarējat (vai zaudējat) vietnes veidošanas spēli.

Ir tik ļoti vienkārši aizmirst par tipogrāfiju un visam izmantot tikai Arial.

Nav ieteicams.

Mūsdienās strādāt ar pielāgotajiem fontiem ir ļoti viegli, un jums pat nav jādara nekas tehnisks, lai šos pielāgotos fontus iespējotu jūsu vietnē.

Mūsdienās modē ir liela, grandioza tipogrāfija, un tas ievērojami atvieglo arī dizainera darbu – it īpaši iesācēja dizainera darbu..

Pārbaudiet šo vietni, piemēram:

bonobos

Vai esat kaut ko pamanījis? Jā, fonti ir milzīgi, un tie izskatās lieliski!

Lai to paveiktu, rīkojieties šādi:

  • Parasti katram vietnes dizainam ir vajadzīgs divu veidu teksts: virsraksti un rindkopas. Vairumā gadījumu katram fontam būs tikai viens fonts.
  • Dodieties uz Google Fonts – paša Google bezmaksas fontu bibliotēku, ko varat izmantot savā vietnē – un meklējiet virsraksta fontu, kas jums patiešām patīk.
  • Pēc tam paņemiet šī fonta vārdu un meklējiet to fontu pārī – tā ir iepriekš izveidotu fontu pāru bibliotēka, kas labi iet kopā.
  • Izvēlieties pārus, kas izskatās satriecoši.
  • Ierakstiet abu fontu nosaukumus, tie būs nepieciešami vēlāk.

Šādi rīkojoties, jūs paātrināsit procesu un tomēr iegūsit lielisku rezultātu.

Piemēram, vietnē Google Fonts mēs atradām fontu ar nosaukumu Bree Serif, kas mums ļoti patīk:

Bree-Serif

Pēc tam mēs to nogādājām fontu pārī, un vietne ieteica, ka Bree Serif labi darbojas ar Open Sans. Ideāls:

Bree-Serif-open-sans

Galīgā struktūra

Visbeidzot, pēdējais solis!

Šīs nodaļas būtība ir pievērsties galīgajam izkārtojumam / struktūrai, kuru izmantosit savai vietnei. Šajā brīdī jums jābūt pārliecinātam par lietām, kuras vēlaties darīt ar savu dizainu un lietotāja saskarni.

Pēc šīs nodaļas gatavās lietas:

  • Jūsu lietotāja mērķi ir skaidri uzskaitīti.
  • Jūsu režģis ir divreiz pārbaudīts, lai pārliecinātos, ka šie mērķi nav mulsinoši.
  • Atlasītā krāsu shēma.
  • Izdomāta tipogrāfija.
  • Viss jūsu vietnes izkārtojums / vietnes struktūra / organizācija.

Papildu informācija: 

  • UX žurnāls
  • UX kabīne
  • Krāsu psiholoģija un emocijas tīmekļa dizainā
  • Kas ir lietotāja pieredzes dizains? Pārskats, rīki un resursi
  • Viedā biznesa mērķu iestatīšana vietnei
  • 8 noteikumi efektīvas tipogrāfijas izveidošanai

4. NODAĻA: WordPress, HTML vai veidnes?

Izlemiet, pa kuru ceļu doties – satura pārvaldības sistēmas vai kodējiet to no jauna

Šeit sākas īstais, netīrais un netveramais darbs!

Šī, iespējams, ir arī visbīstamākā procesa daļa (atzīstiet to!).

Vienreiz ir īstais laiks, lai noliktu pildspalvu un papīru un sāktu strādāt ar kādu programmatūru.

Un tieši ārpus vārtiem ir daudz jautājumu …

  • Vai man vajadzētu iemācīties HTML??
  • Kas par CSS?
  • Vai gatavas HTML vietņu veidnes man izdarīs to triku?
  • Vai man jāapgūst tāda programmēšanas valoda kā PHP?
  • Esmu dzirdējis, ka WordPress ir veids, kā mūsdienās izveidot vietni.
  • Es redzēju Squarespace Super Bowl sludinājumu. Kas ar to notiek??
  • Kā sauc šo lietu Joomla? Vai Drupal?
  • un vēl un vēl un vēl.

Atbilde uz visiem šiem jautājumiem ir jā.

Tāpat kā, jā, jūs varat izdarīt vienu vai visas no šīm darbībām, un tikai jūsu ziņā ir izlemt, kuru ceļu izvēlēties.

Mēs cenšamies pateikt, ka šeit nav vislabākās pieejas. Tas viss ir atkarīgs no tā, cik daudz jūs vēlaties iesaistīties tīmekļa izstrādē, cik daudz vietņu veidošanas pamatus vēlaties apgūt, cik ātri jums nepieciešama kvalitatīvas vietnes izveide un cik pielāgojama vēlaties, lai tā būtu vēlāk.

Tātad, lūk, kā mēs turpināsim šo nodaļu uz priekšu. Pirmkārt, izvēlieties personību, kas jūs vislabāk raksturo:

  • a) Es vēlos uzzināt, kas ir tīmekļa izstrāde, visi pamati, visas iekšējās vietnes darbības un visi mehānismi, kas vietnei liek darboties.
  • b) Es vēlos uzzināt, kā izmantot uzticamu vietņu veidotāju, kurš man izturēs lielāko daļu smago darbu.
  • c) Es nezinu, ko darīt. Es tikai vēlos vietni, kuru varu izveidot pats un kura darbotos pareizi.

Atbildēja a)? Pāriet uz 5. nodaļu.

Atbildēts b)? Pāriet uz 6. nodaļu.

Atbildēts c)? Nekautrējieties izlasīt šo rakstu un pēc tam atgriezties (tam vajadzētu palīdzēt izvēlēties labāko ceļu):

  • Pārskatītas 8 labākās emuāru veidošanas un vietņu veidošanas platformas … Katra platforma ir aprakstīta kopā ar tās plusiem un mīnusiem, un resurss arī piedāvā vislabāko pieejamo izvēli (Wix vai SB) jūsu īpašajām vajadzībām..

Vai esat to lasījis? Lieliski! Tātad, kura no iepriekš minētajām personām vislabāk raksturo jūs – a) vai b)?

Rīki, kas varētu noderēt pa ceļam:

  • Grafika: Paint.NET, Gimp, Pixlr.
  • Kodu rakstīšana: Notepad ++, TextWrangler, SublimeText.
  • Darba vadība: Trello.
  • Dizains: krāsu shēmas, Google Fonts, šeit pieejamie rīki.
  • Fotografēšana: Unsplash, AllTheFreeStock

5. NODAĻA: Ievads HTML, CSS & Javascript

Kā vietnes ir iebūvēta realitāte

Šajā nodaļā mēs norādīsim uz vienkāršajiem Web izstrādes pamatiem, izskaidrosim svarīgākos terminus un pēc tam nosūtīsim jūs uz dažiem īpašiem resursiem, kur jūs varat papildināt savas zināšanas un prasmes.

HTML

HTML ir vietņu valoda. Katra vietne kādā brīdī tiek veidota vai pārveidota HTML.

Piemēram, lai redzētu šī ļoti ceļveža HTML struktūru, kuru jūs šeit lasāt, vienkārši nospiediet tastatūras taustiņu “Ctrl + U”..

HTML definē katru bloku, kuru redzat tīmekļa vietnē. Dienas beigās, lai tīmekļa vietnē tiktu parādīts kaut kas, tas jāpārvērš HTML.

Lai efektīvi apgūtu HTML, mēs iesakām reģistrēties vienā no (bezmaksas vai maksas) kursiem, kas pieejami tīmeklī. Daži no labākajiem ir atrodami Codeacademy vai Treehouse.

Piemēram, šeit ir īpaša sadaļa Codeacademy par HTML un CSS.

CodeCademy mājas lapa

Tā ir visaptverošā pieeja HTML.

CSS

CSS – lai izlaistu garlaicīgu tehnisko informāciju – ir atbildīga par visa, kas redzams vietnē, veidošanu.

CSS ņem HTML tagus un pēc tam tos strukturē un pievieno stilu. Tādas lietas kā: trekns teksts, krāsu pielāgojumi, ēnas, izkārtojumi un pat animācijas tagad tiek darīti galvenokārt ar CSS.

Lai labāk izprastu, kā tas precīzi darbojas, pārejiet uz šo ātro kursu Codeacademy.

Lai iegūtu padziļinātu apmācību, pārbaudiet arī CSS sadaļas Codeacademy vai Treehouse.

JavaScript, jQuery, Bootstrap utt.

JavaScript ir programmēšanas valoda, kas ļauj ieviest dažas dinamiskas darbības jūsu vietnē. Piemēram, varat veikt citas darbības, piemēram, apstiprināt tīmekļa veidlapas vai mijiedarboties ar lietotāju pilnveidotāk, nepārlādējot lapu, kurā viņi atrodas. Piedāvājam jauku w3school apmācību.

Paturot to prātā, jQuery ir JavaScript bibliotēka, kas ļauj jums izveidot uzlabotas lietas ar mazāku kodējumu. Ļoti ērts tīmekļa izstrādātājam. Uzziniet vairāk šeit.

Visbeidzot, Bootstrap ir ļoti interesants izgudrojums. Sākotnēji to ieviesa Twitter, tā būtībā ir priekšējā vide, kas paātrina vietnes izveidošanas procesu, piegādājot lielāko daļu jau iebūvēto vietnes elementu. Tas izklausās sarežģīti, vai ne??

Bet tā nav. Vienkārši apskatiet šo sākuma kursu Codeacademy (starp citu, šādi mēs sākotnēji iemācījāmies Bootstrap).

Pēc šīs nodaļas gatavās lietas:

  • Būtībā jūsu HTML / CSS vietnes pirmais melnraksts ir pilnībā izveidots. Pēc tam jūs varat sākt atkārtot un uzlabot gala rezultātu.

6. NODAĻA: Vietņu veidošanas platformas

Vai iestatāt savu pirmo vietni? Izmēģiniet bezmaksas vietņu platformas, piemēram, WordPress, Joomla vai Drupal

6. nodaļa: Vietņu veidošanas platformas

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Vietņu veidotāju ir vairāk, nekā jūs varat sakratīt nūju vietnē. (Ja jūs esat tāds cilvēks, kurš kratot lietas.)

Labi, joki malā.

Skaidrs, ka, ja jums nav vēlēšanās iemācīties kodēt lietas ar roku, tie noteikti ir vairāki risinājumi, kas var jums palīdzēt.

Piezīme. Lūdzu, paturiet prātā, ka viss pārējais, ko mēs apspriedām 1.-4. Nodaļā, joprojām ir spēkā šeit. Pat ja jūs izmantojat vietņu veidošanas risinājumu, kas ir tāds kā praktisks risinājums, jums joprojām ir jābūt uzmanīgam, lai galaprodukts būtu draudzīgs lietotājiem un atbilstu visiem izvirzītajiem mērķiem. Šie vietņu veidošanas rīki ir tieši tādi… rīki.

Sākot ar tiem, kurus ir visvieglāk aptvert:

SquareSpace

Vienīgā vietnes platforma, kas reklamē Super Bowl laikā.

Īsāk sakot, ļoti ērts risinājums, kuru var izmantot ikviens. Iepriekšējas prasmes nav vajadzīgas.

Tas ļauj jums izveidot klasiskas vietnes, emuārus, pat e-komercijas veikalus, par kuriem mēs pat uzrakstījām pārskatu. Saskarni un visu tās lietošanas procesu ir diezgan viegli aptvert, turklāt Squarespace puiši piedāvā daudz interesantu mācību materiālu. Pārbaudiet tos šeit.

WordPress

Ja godīgi, mēs mīlam WordPress.

Lielākoties tā ir ideāla platforma vietnes izveidošanai ar. Tam ir ideāls līdzsvars starp sarežģītību un lietošanas vienkāršību, un tas principā ir bezgalīgi pielāgojams.

WordPress animācija

Turklāt tā šobrīd ir visu to populārākā vietņu platforma. Kā dalījās WordPress veidotājs – Metjū Mullenvega – WordPress tagad pārvalda 25% no visa interneta. Vai visi šie cilvēki var kļūdīties??

Labi, tāpēc, lai sāktu darbu ar WordPress, jums galvenokārt ir nepieciešams tikai savs domēns un mitināšana. Pati WordPress programmatūra ir pilnīgi bezmaksas.

Lai sāktu, nekautrējieties izvēlēties vienu no šiem ceļiem:

a) “Ātrs sākums”

  • Dodieties šeit, lai uzzinātu vienkāršotu WordPress instalēšanas un vietnes atvēršanas veidu pēcpusdienā.
  • Izvēlieties bezmaksas motīvu no oficiālā direktorija – pārliecinieties, vai tas atbilst jūsu vietnes mērķiem un vai izkārtojums / dizains nav tālu no vēlamās struktūras (jūs to nedaudz pielāgosit).
    • Pārbaudiet šos divus resursus, lai uzzinātu, kā pielāgot esošo motīvu.
    • Alternatīvi, jūs varat izvēlēties daudzfunkcionālu premium motīvu, kuru var pielāgot, izmantojot ērtu lietotāja interfeisu (kodēšana nav saistīta). X tēma ir labs šādas lietas piemērs.
  • Instalējiet dažus no populārākajiem un labākajiem spraudņiem, lai iegūtu papildu funkcijas.

b) “padziļinātais ceļš”

  • Sāciet apgūt WordPress tiešsaistes kursā. Treehouse piedāvā lielisku.
  • Izvēlieties savu motīvu un spraudņus tāpat kā iepriekš. Pārmaiņus izveidojiet pats savu tēmu no paša sākuma.

Galu galā WordPress, iespējams, ir daudzpusīgākā vietņu platforma tirgū. Ar tās palīdzību jūs varat izveidot praktiski jebkura veida vietnes, ne tikai emuārus vai vienkāršas biznesa vietnes. Šeit ir 47 (!) Dažādu WordPress lietošanas veidu saraksts, tikai lai jūs aizdomātos.

Joomla un Drupal

Kaut arī Joomla un Drupal ir nedaudz atšķirīgas viena no otras, tās ir lieliskas satura pārvaldības sistēmas progresīvākiem tīmekļa projektiem.

Viņi nav tik spēcīgi, lai izstrādātu dizainu, taču ir ļoti pielāgojami un spēj darboties ar jebkura veida vietnēm, kuras jums varētu būt iecerētas.

Dažkārt, atkarībā no jūsu projekta sarežģītības, viņiem varētu būt nepieciešams daudz vairāk laika, lai to apgūtu, un daudz vairāk pūļu.

Lai iegūtu padziļinātu apmācību, vietnē Lynda.com ir pieejami lieliski kursi gan Joomla, gan Drupal.

Pēc šīs nodaļas gatavās lietas:

  • Jūsu vietnes pirmais melnraksts ir pilnībā izveidots neatkarīgi no tā, vai esat nolēmis izmantot WordPress vai kādu citu platformu.
  • Pārliecinieties, ka tas atbilst jūsu sākotnējiem mērķiem, mērķauditorijai un nodrošina labu UX.

7. NODAĻA: Reaģējošs mobilais dizains

Vairāk nekā 60% cilvēku tīmekļa pārlūkošanai izmanto mobilos tālruņus un planšetdatorus

Mobilā atsaucība tagad ir ļoti svarīgs vietņu veidošanas aspekts, iespējams, vairāk nekā tas jebkad ir bijis.

Lūk, par ko ir viss jautājums:

Būtībā šobrīd vairāk cilvēku nekā jebkad agrāk izmanto mobilās ierīces, lai piekļūtu tīklam. Faktiski tiek lēsts, ka tagad mobilā interneta lietotāju ir vairāk nekā interneta galddatoru (75,1% pret 52,7%).

Bet tur ir problēma.

Ne katrs vietnes dizains tiks optimizēts, lai to varētu skatīt mobilajās ierīcēs tieši ārpus vārtiem.

Dažas izplatītas problēmas ietver:

  • fonti ir par mazu,
  • pats izkārtojums nemaz nepielāgojas mazākam ekrānam,
  • vai vietnes izveidošanai izmantotā tehnoloģija, kas nav pieejama mobilajām ierīcēm.

Šajā vietā tiek izmantota mobilās atsaucības ideja.

Adaptīva vietne reaģē uz vidi, kurā tā tiek skatīta. Ja tas ir galddators, vietne tiek atveidota noteiktā veidā. Ja tas ir mobilais, tas tiek veidots citā veidā.

Šis ir labāks skaidrojums: kāds Heck ir adaptīvs tīmekļa dizains?

Tāpēc šobrīd būtu jāpārbauda un jāpārliecinās, ka jūsu vietne darbojas mobilajās ierīcēs. Izmantojiet savas ierīces, lai to pārbaudītu, kā arī izmēģiniet Google mobilajām ierīcēm paredzētu testu vai pārejiet uz tādu rīku kā Responsive Design Tester..

Ja ir problēmas, jums tās jānovērš.

Daži risinājumi:

  • Adaptīvs tīmekļa dizains – kā rīkoties
  • Kā padarīt vietni atsaucīgu aptuveni 15 minūšu laikā

8. NODAĻA: Saliekot to visu kopā

Jūs zināt pamatus, tagad ir jūsu kārta

Turieties, mēs esam gandrīz tur!

Šī ir pēdējā nodaļa mūsu diezgan garajā ceļojumā.

Šajā brīdī jums vajadzētu izveidot savu pirmo vietni… Neatkarīgi no tā, vai izmantojat WordPress, ar rokām veidotu HTML / CSS, kādu vietņu veidotāju vai kādus citus darbam atlasītos rīkus..

Īsi sakot, apsveicu! Bet joprojām ir pāris lietas, kuras vērts darīt:

  • Vēlreiz pārbaudiet lietas, kuras mēs apspriedām 1. un 2. nodaļā. Pārliecinieties, vai mērķi patiešām darbojas tiešajam lietotājam un vietne nav mulsinoša..
  • Apstipriniet koda struktūru, izmantojot W3C atzīmju validācijas pakalpojumu.
  • Pārbaudiet, vai vietnē nav nekādu drošības problēmu. Šim nolūkam izmantojiet Sucuri skeneri.
  • Saņemiet atsauksmes no kopienas. Pārbaudiet, ko citi cilvēki domā par jūsu darbu. Vietnes vietnes forumi tam var būt labi.

Ja tas ir jūsu pirmais lasījums par šo resursu, tad mēs patiešām aicinām jūs pāris reizes atgriezties pie tā un uzskatīt to par atsauces failu savai tālākizglītībai.

Kā mēs teicām sākumā, jūtieties brīvi izmantot TOC un pārejiet no nodaļas uz nodaļu un pēc resursiem pie resursiem, kā jums liekas..

Visbeidzot, mēs esam ziņkārīgi … kāds ir jūsu lielākais izaicinājums attiecībā uz vietņu izveidi, tīmekļa attīstību vai dizainu? Lūdzu, dalieties komentāros vai caur Twitter. Mēs visi esam ausīs!

Paldies, ka lasījāt, jūs esat satriecoši!

  • Kopā116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map