Žiniatinklio kūrimas ir dizainas 101

web_development_101Norite žinoti interneto svetainių kūrimo ir dizaino pagrindus? Nuostabu…


Tačiau kyla šios minties linija ar iš tikrųjų nemažai jų…

  • Koks tikslas turėti svetainę?? Ar tikrai visiems to reikia?
  • Jei taip, kaip galite sukurti kokybišką svetainę? Arba kitaip tariant, kaip jūs išmoksite pagrindinį internetinio puslapio kūrimą ir dizainą, kuris leistų jums patiems susikurti tą kokybišką svetainę?
  • Dar svarbiau, ar galite savo PIRMĄJĮ bandymą sukurti kokybišką svetainę? Arba jums reikia ilgamete patirtimi, kad galėtumėte tikėtis bet kokio aukščiau bauginančio rezultato?

Atsakykime į visa tai pradedančiųjų žiniatinklio kūrimo ir dizaino vadovas.

[Spoilerio signalas. Taip, pirmą kartą bandydami galite sukurti kokybišką svetainę.]

Kas aprašyta šiame vadove?

Gerai, visų pirma, mes džiaugiamės, kad nuolat skaitote ir nusprendėte išbandyti interneto svetainių kūrimą! Štai kaip tai sužais:

Skyriai pateikiami labai paprastai, jų pagrindinis turinys yra kairėje, o elementai, su kuriais galima remtis – dešinėje. Patinka taip:

Vadovo įvadas: 1 skyrius

Dabar, kaip elgtis toliau:

  • Nors jūs pirmą kartą skaityti: Mes rekomenduojame perskaityti visą dalyką iš viršaus į apačią. Tai suteiks jums gerą 10 000 pėdų temos vaizdą ir padės suprasti svarbiausias jos dalis. Tai taip pat pateiks pagrindinius įrankius ir metodus, kaip tvarkyti atskiras užduotis.
  • Būdami 2-ajame skaitykite ir toliau: Naudokite TOC ir pereikite prie tos dalies, kuri jus labiausiai domina. Taip pat nedvejodami naudokite bendrinimo mygtukus, esančius šalia kiekvieno skyriaus, ir nusiųskite nuorodas sau arba savo draugams / stebėtojams, kurie gali būti įdomūs.

Pasirengęs? Pereikime prie 1 skyriaus.

Kam skirtas šis vadovas?

Jei norite išmokti pagrindinio internetinio puslapio kūrimo ir dizaino, šis vadovas skirtas jums. Kad ir kokia būtų jūsų motyvacija.

Be to, norint pradėti, nereikia jokių išankstinių techninių žinių (išskyrus pagrindinius „žiniatinklio įgūdžius“). Pagrindinis šio vadovo tikslas yra būti savotišku „101“ kursu visiems, besidomintiems svetainių kūrimu ir internetinių svetainių kūrimu.

Čia yra keletas bendrų priežasčių, kodėl jus gali sudominti:

  • 1. Jums REIKALINGA jūsų verslo svetainė (ir norite sužinoti, ar galite patys sukurti).
  • 2. Norite išmokti interneto svetainių kūrimą iš aistros ar laikinų pomėgių (nieko blogo tame nėra).
  • 3. Jums REIKALINGA svetainė mokyklai.
  • 4. PAGALBAI draugu ar šeimos nariu galite rasti jų svetainę internete.

Pagrindinė idėja, kuria vadovausimės

Tai yra svarbu! Ir nesijaudinkite dėl mūsų, jei esate pažengęs žiniatinklio kūrėjas, skaitantis tai, tačiau pagrindinė mintis, kuria vadovausimės visame interneto kūrimo ir dizaino 101 šaltinyje, yra:

„Mažiausio pasipriešinimo metodas“

Štai trys mažiausio pasipriešinimo principai:

  • Mes esame neskaidyti daiktų molekuliniame lygmenyje. T.y. mes nesigilinsime į tai, kaip veikia programavimo kalbos arba kaip veikia interneto serveris.
  • Mes esame neišradinėdamas rato. T.y. jei kas nors jau išsprendė nurodytą problemą ir padarė ją prieinamą, mes ja pasinaudosime.
  • Mes esame paprastas sprendimas yra nuostabus, o ne sudėtingas ir, atrodo, funkcionalesnis sprendimas, klaidingas ir nesuprantamas.

1 SKYRIUS: Planas

Jūsų idėja, svetainės tipas, domeno vardas ir priegloba.

Prieš kurdami svetainę, jums reikės plano

Ironiškai, kaip tai gali skambėti – 80-ųjų hito šou „A-Team“ mus išmokė, geras planas yra raktas į sėkmę.

Jei jau kurį laiką jūsų tinklalapyje yra svetainė, jūs tikrai esate sujaudintas vienintelės idėjos, kad pagaliau išleistumėte ją kitiems skaityti ir naršyti.

Norite, kad jūsų svetainė būtų nuostabi. Tikriausiai žinote, kaip tai atrodys tam tikru laipsniu. O gal net turite puikų logotipą.

Bet …

Tai visai nėra tas dalykas, nuo kurio turėtumėte pradėti. Jei pradėsite nuo iš anksto nustatytų lūkesčių, tai sukels tik daug sumaišties pakeliui ir sub-par rezultatą pabaigoje.

Verčiau pagalvokite apie tai:

  1. Atskirkite save nuo visų galimų techninių tikslų. Kaip, pavyzdžiui, tikslas mokytis interneto svetainių technologijų ar tam tikros svetainės programinės įrangos.
  2. Užduokite sau vieną pagrindinį klausimą: „Kam man reikalinga svetainė?“

Tai ne apie jus, tai apie svetainės tikslą.

Klausimai, kuriuos turite užduoti sau prieš kurdami savo svetainę

  1. Ką siekiama pasiekti svetainėje?
  2. Koks bus pagrindinis „dalykas“, pateikiamas svetainėje? (pvz., jūsų verslas, produktas, jūsų tinklaraščio įrašai ir kt.)
  3. Ar svetainė turės kokį nors specialų tikslą? (pvz., el. prekybos parduotuvė, fotografo aplankas ir kt.)
  4. Kas yra tikslinė auditorija?
  5. Kodėl juos domina svetainės tema?
  6. Kokį skausmą svetainė išsprendžia atskiriems auditorijos nariams?

Pakalbėkime minutę apie šiuos paskutinius 3 klausimus …

Yra 2 pagrindinės svetainės kūrimo taisyklės. Štai 1 taisyklė:

 Skaitytojas / lankytojas yra pirmas. Jie yra pagrindinis asmuo, kuris turi patikti jūsų svetainei.

Tam tikra prasme jūsų svetainė nėra jūsų. Tai jų.

(2 taisyklę aptarsime per minutę.)

Pamiršę šią paprastą gairę, galite nukreipti jus visiškai netinkamu keliu, net iki tos vietos, kur atsidursite svetainėje, kuri painioja visus aplinkinius, išskyrus jus.

Ugh! Žmonės tiesiog nesupranta, apie ką yra ši svetainė. Kaip jie gali būti tokie neišmanantys ?! “ – galų gale galvoji. Bet kaip paaiškėja, neišmanėlis buvo tu.

Vienintelis būdas to išvengti yra sukurti savo svetainę atsižvelgiant į skaitytoją jau nuo pat pradžių.

Taigi … paimkite tą popieriaus lapą ir atsakykite į visus aukščiau pateiktus klausimus.

Baigę turėsite galutinį gairių rinkinį, į kurį atsižvelgsite dirbdami savo svetainėje.

Šie atsakymai bus nepaprastai galingas įrankis einant kartu. Galėsite su jais grįžti, kai tik turėsite sprendimą dėl savo svetainės.

Ar turėtumėte daryti * tai * ar * tą *? Eikite į atsakymų lapą ir sužinokite. Ar turėtumėte naudoti plačią ar siaurą šoninę juostą? Eikite į atsakymus, sužinokite, kuris labiau linkęs į tikslinį skaitytoją. Ir tt.

Domenų vardai ir interneto priegloba

Jei norite būti svetainės savininkas, jums reikia domeno vardo ir žiniatinklio prieglobos.

Na, gerai, techniškai kalbant, jūs galite susikurti bandomąją svetainę savo kompiuteryje ir paleisti ją iš vietinio serverio (taip pat įdiegto kaip programinė įranga jūsų kompiuteryje), tačiau tai nebus tinkamas sprendimas 99% atvejų, todėl tiesiog praleiskime.

Taigi, pagrindinis kompiuteris ir domenas …

Bloga žinia yra ta, kad jie abu kainuoja pinigus.

Geros naujienos … tai ne tiek pinigų, kiek didžiausia dalykų schema. Be to, mokydamiesi netgi galite paleisti kelias mažas svetaines viename domeno pavadinime ir naudodami vieną žiniatinklio prieglobą.

Bet pradėkime nuo pradžių.

Žiniatinklio prieglobos:

  • Paprastai tariant, žiniatinklio priegloba yra vieta, kur yra jūsų svetainė ir kur ją gali rasti jūsų lankytojai. Tam tikra prasme internetiniai svetainių prieglobos įrankiai yra lygiai taip pat kaip butai žmonėms. Pagal gaubtą žiniatinklio prieglobos yra įmonės, nuomojančios savo serverius už pinigus (… maži apartamentai jūsų svetainėms).
  • Norėdami pradėti, tai atliks standartinis bendrojo prieglobos planas. Galite gauti bet ką, pradedant nuo 3 USD per mėnesį. Čia yra puikus populiarių žiniatinklio prieglobų palyginimas. Peržiūrėkite ir nuspręskite, kuri iš šių bendrovių jums atrodo tinkama. Tačiau mūsų rekomendacijos yra „SiteGround“, „A2 Hostingas“ ir „Dreamhost“.

Domenai:

  • Jei žiniatinklio priegloba yra butas, tada domenas yra to buto adresas. Pavyzdžiui, šios svetainės domenas yra hostfacts.com.
  • Pradėjimo būdas yra pasirinkti norimą domeno vardą ir nusipirkti jį iš registratoriaus. Čia pateiktas išsamus domeno vardo pirkimo vadovas ir pateiktas domenų vardų generatorių sąrašas.

 

Pasiūlymai ir patarimai, kaip pasirinkti domeno vardą

Gerai, kad vienas dalykas yra kreiptis į domenų registratorių ir iš tikrųjų nusipirkti domeną, tačiau kaip pasirinkti tinkamą domeno vardą?

Yra kelios mokyklos:

  • Firminių domenų pavadinimai. Tai yra domenai, sudaryti iš neegzistuojančių žodžių. Pagalvok, pvz., Google.com ar Yahoo.com. Prieš ateinant įmonėms, šie žodžiai nieko nereiškė. Firminio domeno vardo aukščiausia pusė yra ta, kad jis yra… gerai, lengvai firminis ženklas, įsimenamas ir nesunku atskirti savo svetainę nuo kitų.
  • Raktiniai žodžiai pagrįsti vardai. Juos sudaro esami žodžiai, sudėti į seką, apibūdinančią svetainės paskirtį. Pagalvok, pvz., „Pizza.com“ ar „StartBloggingOnline.com“. Turėdami tokį domeno vardą lankytojai galės tiksliai nuspėti, kokią svetainę jie tiesiog ketina aplankyti. Neigiama yra tai, kad šie domenai paprastai yra mažiau firminiai.
  • Suvestiniai vardai. Tai yra firminiai domenai ir raktiniai žodžiai pagrįsti domenai sudėti. Pagalvokite, „Facebook.com“ arba „Copyblogger.com“. Tokie pavadinimai rodo „tam tikrą“ svetainės prigimties dalį lankytojui, tačiau jie vis tiek yra labai firminiai.

Kelios bendrosios gairės, neatsižvelgiant į pasirinktą domeno tipą:

  • Padarykite domeną lengvai įsimenamą.
  • Padarykite tai trumpai ir paprastai. Kuo ilgesnis domenas, tuo painiau.
  • Gaukite .com (jei įmanoma). .Com yra pagrindinis „aukščiausio lygio domenas“. Negalima atsiskaityti už nieką kitą.
  • Stenkitės vengti brūkšnelių. Gauk savo vardą vienos formos dėme, pavyzdžiui, „cakerecipes.com“, o ne „cake-recipes.com“

Dalykai, kuriuos reikia paruošti po šio skyriaus:

  • Domeno vardas.
  • Žiniatinklio priegloba.
  • Jūsų atsakymų lapas – svetainės tikslai ir kaip ji tarnaus auditorijai.

Reikia daugiau pagalbos? Čia jums skaitykite toliau:

  • Kodėl bendras hostingas? Palyginti pagrindiniai šeimininkų tipai
  • 10 dalykų, kurie daro interneto prieglobą naudingą
  • 12 taisyklingo domeno vardo pasirinkimo taisyklių
  • Išsamus svetainės planavimo vadovas

2 SKYRIUS: Projektavimas ir vielos rėmų sudarymas

Paimkite popierių ir rašiklį ir subraižykite kartu su savo svetainės struktūra

Gerai, įeikime į projektavimo etapą.

Pirmiausia, čia yra darbo etika, kurios mes laikysimės:

  • Mes naudojame rašiklį ir popierių tiek laiko, kiek galime, ir tik tada pereiname prie kompiuterio. Patikėkite, kiekviena minutė, praleista dirbant prie savo dizaino ant popieriaus, yra sutaupyta valanda, kai tik pradedate derinti dalykus kompiuteryje.
  • Mes darome kartojamąjį darbą … Mes »tikriname rezultatus» tobuliname »tikriname rezultatus» kartojame, kol tai bus padaryta.

1 skyriuje mes paminėjome tai, ką vadinome internetinių svetainių kūrimo taisykle Nr. 1. Dabar atėjo laikas taisyklėms Nr. 2:

Svetainės kūrimo 2 taisyklė:

Pirmiausia pagalvokite apie turinį.

Turinys yra tai, kas svarbu svetainėje. Ne dizainas. Turinys.

Žmonės ateina ieškoti turinio. Jie ateina ne dėl dizaino. Konstrukcija yra tik priemonė pateikti turinį.

Niekada nepradėkite nuo to, kaip atrodo jūsų svetainė. Pradėkite nuo turinio. Turinys. Turinys. Turinys.

Taigi ką mes turime omenyje „turinys“? Trumpai tariant, tai yra dalykas, kurį žmonės nori gauti iš jūsų svetainės. Tinklaraščių įrašai, produktai parduotuvėje, forumų gijos, jei kuriate forumą, naujienų straipsniai, verslo pasiūlymas ir kt.

„Tikrai? Išvaizda tikrai nesvarbi? “ – Jūs klausiate.

Užuot mus sumušę, peržiūrėkite šį puslapį:

Paprasta svetainė

Šis paprastas internetinis puslapis yra geriausias paaiškinimas, kas yra dizainas ir kokiu tikslu jis naudojamas internete.

Taigi atminkite, pirmiausia turinio!

Svetainės turinys ir struktūra

Gerai, kad kadangi turinys yra pats svarbiausias dalykas, jūs (prieš tai) turite jį paruošti. Arba bent jau turite gerai žinoti, koks turinio turinys bus ir kokia forma.

Pastaba. Mes žinome, kad ši dalis gali būti sunki. Pradėti nuo turinio atrodo gana nenatūralu kuriant svetaines, tačiau tai tikrai yra geriausias būdas pasiekti puikų rezultatą. Taigi pagalvokite apie turinį, kurį norite bendrinti su skaitytoju, ir kaip norite jį pateikti.

Kitas žingsnis – išskirti reikiamus puslapių tipus (pvz., Pagrindinį puslapį, produkto puslapį, kategorijos puslapį, apie puslapį, kontaktų puslapį, pagrindinį pardavimo puslapį, kai kuriuos naujienlaiškių prenumeratos nukreipimo puslapius, pagrindinis tinklaraščio sąrašas, atskiri įrašai, galbūt parduotuvė ir visa kita, ko reikia).

Pagalvokite, koks yra efektyviausias būdas organizuoti savo turinį svetainėje?

Visa tai darykite ant popieriaus. Jums greičiausiai bus lengviau ir greičiau, nei mokantis vietoje kažkokios schemų piešimo programinės įrangos.

Pavyzdys:

turinio struktūra

Nubraukite vielinį rėmą

Tinklo kūrimo schema yra paprasčiausia puslapio schema arba brėžinys – vaizdinis vadovas, vaizduojantis svetainės struktūrą (Vikipedija pasakoja mums).

Vielos rėmeliai yra nuostabūs! Mes naudojame juos daugeliui dalykų, kuriuos darome ir kurie yra skirti pasirodyti internete. Pavyzdžiui, štai šio vadovo laido rėmas:

Nubraukite vielinį rėmą

Kaip vėl matote, tai yra popieriuje. Nors tokio tipo darbui yra kelios programos, mes iš tikrųjų nepatariame jų naudoti. Jie gali būti puikūs profesionaliems dizaineriams, tačiau pradedantiesiems ar tarpininkams neteks laiko mokytis, o galų gale jie nepagerins to, ką jie pasiektų naudodami rašiklį ir popierių..

Taigi, kaip sukurti rėmą?

Na, jei esate pradedantysis, yra du būdai:

  • Eikite su srautu, jei jaučiatės stiprūs, ir tiesiog atsitraukite (ne visada puikus sprendimas).
  • Gaukite trumpų žinių, kaip tinkamai sudaryti rėmus (paprastai geriau)..

Dėl pastarųjų eikite čia – puikus gidas.

(Būtinai sukurkite kiekvieno svarbaus tipo, kurį išvardijote ankstesniame veiksme, rėmelį.)

Dalykai, kuriuos reikia paruošti po šio skyriaus:

  • Didžiąją svetainės turinio dalį ar bent jau didžiąją jos dalį numatė (pavyzdžiui, jei pasikliaujate vartotojo sukurtu turiniu, sunku iš anksto tai turėti)..
  • Jūsų svetainės turinio struktūra parengta kaip schema.
  • Atskirų tipų puslapių, kurių jums prireiks, rėmas.

Papildoma literatūra:

  • 9 žingsniai svetainės turinio planavimui
  • Nauji interneto dizainai? Pradėti čia.

3 SKYRIUS: UX ir UI

Niekada neįvertinkite vartotojo patirties ir vartotojo sąsajos svarbos

Kaip ir vartotojo patirtis ir vartotojo sąsaja.

„WebDesignerDepot“ pateikia gana poetišką šių dviejų apibrėžimą:

UI yra balnas, varnai ir karaliavimas.

UX yra jausmas, kurį jūs jaučiatės galėdami jodinėti arkliu ir virvę savo galvijais.

Norėdami gauti daugiau praktinio apibrėžimo:

  • UI yra tai, ką vartotojas mato žiūrėdamas į jūsų svetainę.
  • UX yra tai, kaip jie jaučiasi.

Pora ir tai, kaip gerai ji vykdoma, iš esmės nusako jūsų svetainės naudingumą galutiniam vartotojui / lankytojui.

Tiek UX, tiek UI dizainas yra didelės temos, ir yra daug mažesnių elementų, kurie vaidina svarbų vaidmenį galutiniame rezultate.

Trumpai tariant, dar daug ką reikia išmokti, jei tik pradedate savo kelionę.

Taigi, užuot bandę čia sutramdyti visą UX ir UI projektavimo kursą, tiesiog nurodykime keletą svarbių elementų ir nusiųsime jus kur nors kitur toliau skaityti.

Vartotojo tikslai

UX yra susijęs su vartotojo tikslais … Ne tiek daug jūsų tikslų … Vartotojo tikslais.

Gerai, ką tai reiškia? Visų pirma, grįžkite prie savo svetainės tikslo – to, ką dirbote ankstesniuose skyriuose. Priežastis, kodėl kuriate svetainę, ir kaip ji padeda vartotojui / lankytojui.

Kaip tai paverčiama lankytojo tikslu? … Ką lankytojas nori gauti ar pasiekti lankydamasis jūsų svetainėje? Tai yra jų tikslas.

Kaip lengva pasiekti tuos tikslus?

Tada sutelkite dėmesį į šį klausimą:

  • Ar lankytojas gali lengvai pasiekti savo tikslą? – Ar jie gali paprastu būdu sužinoti tikslią informaciją, kurios jie ieškojo??

Norėdami atsakyti į tai, turite grįžti į savo rėmus, turinio struktūrą ir dar kartą patikrinti dalykus.

Įsitikinkite, kad turinio struktūra ir jūsų apgalvoti puslapiai yra prasmingi vartotojo požiūriu. Įsitikinkite, kad jie gali laisvai ir netrukdomai naršyti po svarbius puslapius.

Iš esmės čia mes rūpinamės, kad svetainė lankytojams suteiktų vertę.

Sunku viską išsiaiškinti savarankiškai, ar ne??

Labai rekomenduojama perskaityti šaltinius, išvardytus šio skyriaus „tolesniame skaityme“ skyriuje … bet taip pat galite pabandyti „nulaužti“..

Būtent, pagalvokite, kas jus gąsdina, kai lankotės svetainėse, kurios yra panašios į tas, kurias norite kurti? Gal yra tam tikros informacijos, į kurią sunku patekti, arba sąsajos elemento, dėl kurio svetainė gali būti paini.

Padarykite pastabas, darykite išvadas ir nedarykite tų pačių klaidų savo svetainėje.

Emocijų kaip įrankio naudojimas

Kai dirbate su savo svetainės UI ir UX, tai, ko iš esmės siekiate, yra tam tikrų lankytojo emocijų sukėlimas..

Norite, kad jie jaustųsi tam tikru būdu, o tai įtikins juos elgtis tam tikru būdu. Taigi, jūsų svetainė taps tikrai naudinga.

Norint dirbti emocinę darbo dalį, viena geriausių priemonių yra spalva.

Spalvos turi skirtingas reikšmes skirtingose ​​kultūrose. Suprasdami tuos skirtumus, jūsų darbas gali būti daug lengvesnis. Štai gražus apgaulės lapas.

Kai esate žaidimų aikštelėje, kokias spalvas norite (galbūt) naudoti, pateikiame keletą bendrų darbo su spalvomis rekomendacijų:

  • Pasirinkite vieną pagrindinių spalvų schemą, susidedančią iš poros spalvų, kurios gerai dera. Čia yra puikus spalvų schemos generatorius.
  • Pasirinkite vieną spalvą, kuri bus jūsų akcento spalva – spalvą, kuri bus naudojama veiksmo mygtukams, pirkimo mygtukams ir tt. Iš esmės viskas, kas reikalauja vartotojo dėmesio.

Tipografija

Daugeliu atvejų tipografija yra ta, kai jūs laimite (arba pralošiate) svetainių kūrimo žaidimą.

Taip labai lengva pamiršti tipografiją ir viskam naudoti „Arial“.

Nerekomenduojama.

Šiomis dienomis dirbti su tinkintais šriftais yra labai lengva, ir jums net nereikia daryti nieko techninio, kad įgalintumėte tuos tinkintus šriftus savo svetainėje..

Didelė, grandiozinė spausdinimas šiais laikais yra labai madingas, be to, tai žymiai palengvina dizainerio, ypač pradedančiojo, darbą..

Patikrinkite šią svetainę, pavyzdžiui:

bonobos

Nieko pastebėjote? Taip, šriftai yra didžiuliai ir jie atrodo puikiai!

Štai kaip tai padaryti:

  • Apskritai kiekvienam svetainės dizainui reikia dviejų tipų teksto: antraštės ir pastraipos. Daugeliu atvejų veiks tik vienas šriftas kiekvienam.
  • Eikite į „Google Fonts“ – savo „Google“ nemokamų šriftų biblioteką, kurią galite naudoti savo svetainėje – ir ieškokite antraštės šrifto, kuris jums tikrai patinka.
  • Tada paimkite to šrifto pavadinimą ir ieškokite jo šriftų poroje – tai yra iš anksto sudarytų šriftų porų, suderintų kartu, biblioteka.
  • Pasirinkite porą, kuri atrodo nuostabiai.
  • Užrašykite abiejų šriftų pavadinimus, jų prireiks vėliau.

Tokiu būdu paspartinsite procesą ir vis tiek gausite puikų rezultatą.

Pavyzdžiui, „Google“ šriftuose radome šriftą, vadinamą Bree Serif, kuris mums labai patinka:

Bree-Serifas

Tada mes nuvežėme jį į „Font Pair“, o svetainė pasiūlė, kad „Bree Serif“ gerai derėtų su „Open Sans“. Puikus:

Bree-Serif-open-sans

Galutinė struktūra

Pagaliau paskutinis žingsnis!

Visa šio skyriaus esmė yra nusileisti ant galutinio išdėstymo / struktūros, kurią naudosite savo svetainei. Šiuo metu turėtumėte būti tikri dėl dalykų, kuriuos norite padaryti su savo dizainu ir vartotojo sąsaja.

Dalykai, kuriuos reikia paruošti po šio skyriaus:

  • Jūsų vartotojo tikslai aiškiai išvardyti.
  • Dukart patikrintas jūsų rėmas, kad įsitikintumėte, jog šie tikslai nėra painūs.
  • Pasirinkta spalvų schema.
  • Išspausdinta tipografija.
  • Visas jūsų svetainės išdėstymas / struktūra / svetainės struktūra.

Papildoma literatūra: 

  • „UX“ žurnalas
  • UX kabina
  • Svetainių kūrimo spalvų psichologija ir emocijos
  • Kas yra vartotojo patirties dizainas? Apžvalga, įrankiai ir šaltiniai
  • Pažangaus verslo tikslų nustatymas svetainėje
  • 8 efektyvios tipografijos kūrimo taisyklės

4 SKYRIUS: „WordPress“, HTML arba šablonai?

Nuspręskite, kurį kelią pasirinkti – turinio valdymo sistemas arba koduokite ją nuo nulio

Štai čia prasideda tikras, nešvarus, po rankomis nešiojamas darbas!

Tai turbūt ir pati baisiausia proceso dalis (prisipažink!).

Vieną kartą yra tinkamas laikas atidaryti rašiklį ir popierių ir pradėti dirbti su kokia nors programine įranga.

Ir tiesiai į vartus kyla daugybė klausimų …

  • Ar turėčiau išmokti HTML?
  • O CSS?
  • Ar paruošti HTML tinklalapių šablonai padarys mane apgaulingą?
  • Ar man reikia išmokti programavimo kalbą, pavyzdžiui, PHP?
  • Aš girdėjau, kad „WordPress“ yra būdas sukurti svetainę šiomis dienomis.
  • Mačiau tą „Squarespace Super Bowl“ skelbimą. Kas čia su tuo??
  • Kas yra šis dalykas, vadinamas Joomla? Arba Drupal?
  • ir dar ir dar ir dar.

Atsakymas į visus šiuos klausimus yra „taip“.

Kaip ir taip, taip, jūs galite padaryti vieną arba visus šiuos veiksmus, ir tik jūs turite nuspręsti, kurį kelią pasirinkti.

Ką mes norime pasakyti, yra tai, kad čia nėra geriausio metodo. Viskas priklauso nuo to, kiek norite įsitraukti į internetinių svetainių kūrimą, kiek svarbių svetainių kūrimo pagrindų norite išmokti, kaip greitai reikia atlikti kokybišką svetainę ir kiek norite ją pritaikyti vėliau.

Taigi štai kaip mes eisime toliau nuo šio skyriaus. Pirmas, išsirinkite asmenį, kuris geriausiai apibūdina jus:

  • a) Noriu sužinoti, kas yra interneto svetainių kūrimas, visi pagrindai, visi vidiniai svetainės veiksmai ir visi mechanizmai, kurie priverčia svetainę veikti.
  • b) Noriu išmokti naudotis patikimu internetinių svetainių kūrėju, kuris sutvarkys didžiąją dalį manęs keliančių sunkumų.
  • c) Aš nežinau, ką daryti. Aš tik noriu svetainės, kurią galėčiau susikurti pati ir kuri tinkamai funkcionuotų.

Atsakyta a)? Eikite į 5 skyrių.

Atsakyta b)? Eikite į 6 skyrių.

Atsakyta c)? Nesivaržykite perskaityti šį straipsnį ir tada sugrįžti (tai turėtų padėti pasirinkti geriausią kelią):

  • Apžvelgtos 8 geriausios internetinių dienoraščių kūrimo ir svetainių kūrimo platformos … Kiekviena platforma yra aprašyta kartu su jos privalumais ir trūkumais, o šaltiniuose taip pat siūlomas geriausias pasirinkimas (Wix ar SB) jūsų specifiniams poreikiams..

Ar jūs perskaitėte? Puiku! Taigi, kuris iš aukščiau aprašytų asmenų apibūdina jus geriausiai – a) arba b)?

Priemonės, kurios gali būti naudingos pakeliui:

  • Grafika: „Paint.NET“, „Gimp“, „Pixlr“.
  • Kodo rašymas: „Notepad ++“, „TextWrangler“, „SublimeText“.
  • Darbo valdymas: „Trello“.
  • Dizainas: spalvų schemos, „Google“ šriftai, įrankiai iš čia.
  • Fotografija: „Unsplash“, „AllTheFreeStock“

5 SKYRIUS: Įvadas į HTML, CSS & „Java“ scenarijus

Kaip svetainės yra integruota tikrovė

Šiame skyriuje mes papasakosime apie paprastus žiniatinklio kūrimo pagrindus, paaiškinsime svarbiausius terminus ir pasiųsime jums į kai kuriuos specifinius išteklius, kuriuose galėsite patobulinti savo žinias ir įgūdžius..

HTML

HTML yra svetainių kalba. Kiekvienas puslapis tam tikru metu yra sukuriamas arba konvertuojamas į HTML.

Pvz., Norėdami pamatyti šio skaityto vadovo HTML struktūrą, tiesiog paspauskite „Ctrl + U“ klaviatūroje.

HTML apibrėžia kiekvieną bloką, kurį matote tinklalapyje. Dienos pabaigoje, norint ką nors parodyti tinklalapyje, jį reikia konvertuoti į HTML.

Norėdami efektyviai išmokti HTML, patariame prisiregistruoti prie vieno iš (nemokamų ar mokamų) internetinių kursų. Kai kuriuos geriausius galite rasti „Codeacademy“ ar „Treehouse“.

Pvz., Čia yra konkretus skyrius „Codeacademy“ apie HTML ir CSS.

„CodeCademy“ pagrindinis puslapis

Taigi tai yra išsamus požiūris į HTML.

CSS

CSS – praleisti nuobodžias technines detales – yra atsakinga už visko, kas matoma tinklalapyje, stilių.

CSS paima HTML žymas, tada jas struktūruoja ir prideda stilių. Tokie dalykai kaip: paryškintas tekstas, spalvų derinimas, šešėliai, išdėstymai ir netgi animacijos dabar daugiausia daromi naudojant CSS.

Norėdami geriau suprasti, kaip tai tiksliai veikia, pereikite prie šio greitojo kurso Kokademijoje.

Norėdami gauti išsamesnių žinių, taip pat patikrinkite CSS skyrius „Codeacademy“ arba „Treehouse“.

„JavaScript“, „jQuery“, „Bootstrap“ ir kt.

„JavaScript“ yra programavimo kalba, leidžianti pristatyti kai kuriuos dinaminius veiksmus savo svetainėje. Pvz., Galite atlikti tokius veiksmus kaip patvirtinti žiniatinklio formas arba sąveikauti su vartotoju racionaliau ir nereikia iš naujo įkelti puslapio, kuriame jie lankosi. Štai puikus w3 mokyklų mokymas.

Turint tai omenyje, „jQuery“ yra „JavaScript“ biblioteka, leidžianti kurti sudėtingesnius dalykus, naudojant mažiau kodavimo. Labai patogu interneto programuotojui. Sužinokite daugiau čia.

Galiausiai, „Bootstrap“ yra labai įdomus išradimas. Iš pradžių tai pristatė „Twitter“, iš esmės tai yra „front-end“ aplinka, kuri pagreitina svetainės kūrimo procesą pateikdama daugumą jau paruoštų bendrosios svetainės elementų. Skamba sudėtingai, ar ne??

Bet taip nėra. Tiesiog peržiūrėkite šį pradedančiųjų kursą „Codeacademy“ (beje, taip mes iš pradžių išmokome „Bootstrap“).

Dalykai, kuriuos reikia paruošti po šio skyriaus:

  • Iš esmės pirmasis HTML / CSS svetainės projektas yra visiškai sukurtas. Nuo tada galite pradėti kartoti ir gerinti galutinį rezultatą.

6 SKYRIUS: Svetainių kūrimo platformos

Kuriate savo pirmąją svetainę? Išbandykite nemokamas svetainių platformas, tokias kaip „WordPress“, „Joomla“ ar „Drupal“

6 skyrius: Svetainių kūrimo platformos

  • „SquareSpace“
  • „WordPress“
  • Joomla & Drupalis

Čia yra daugiau svetainių kūrėjų, nei galite sukratyti lazdą. (Jei esate toks žmogus, kuris smogia į daiktus.)

Gerai, anekdotai panaikinami.

Aišku, jei neturite noro išmokti koduoti rankomis, jie tikrai yra keli sprendimai, kurie gali jums padėti..

Pastaba. Atminkite, kad visa kita, ką aptarėme 1-4 skyriuose, vis dar taikoma čia. Net jei naudojatės svetainių kūrimo sprendimu, kuris yra praktiškas, vis tiek turite būti atsargūs, kad galutinis produktas būtų draugiškas vartotojams ir atitiktų visų tikslus. Tie svetainių kūrimo įrankiai yra būtent tokie… įrankiai.

Pradėkite nuo tų, kuriuos lengviausia suvokti:

„SquareSpace“

Vienintelė svetainės platforma, kuri reklamuojasi „Super Bowl“ metu.

Trumpai tariant, labai patogus sprendimas, kuriuo gali naudotis bet kas. Nereikalaujama išankstinių įgūdžių.

Tai leidžia kurti klasikines svetaines, tinklaraščius, netgi elektroninės prekybos parduotuves, apie kurias net parašėme apžvalgą. Sąsaja ir visas jos naudojimo procesas yra gana lengvai suprantami, be to, „Squarespace“ vaikinai pateikia daug įdomių vadovėlių. Peržiūrėkite juos čia.

„WordPress“

Sąžiningai, mes mėgstame „WordPress“.

Dažniausiai tai puiki platforma kuriant svetainę. Jame yra puikus balansas tarp sudėtingumo ir patogumo naudoti, o iš esmės jis yra be galo pritaikomas.

„WordPress“ animacija

Be to, šiuo metu ji yra populiariausia visų jų svetainių platforma. Kaip pasidalijo „WordPress“ kūrėjas – Mattas Mullenwegas -, „WordPress“ dabar valdo 25% viso interneto. Ar gali visi tie žmonės klysti??

Gerai, kad norint pradėti naudotis „WordPress“, jums iš esmės reikia tik domeno ir prieglobos. Pati „WordPress“ programinė įranga yra visiškai nemokama.

Norėdami pradėti, drąsiai eikite vienu iš šių būdų:

a) „Greito starto kelias“

  • Eikite čia ir sužinokite apie supaprastintą „WordPress“ diegimo ir savo svetainės paleidimo po pietų būdą.
  • Pasirinkite nemokamą temą iš oficialaus katalogo – įsitikinkite, kad ji atitinka jūsų svetainės tikslus ir kad išdėstymas / dizainas nėra toli nuo jūsų norimos struktūros (ketinate ją šiek tiek pakoreguoti).
    • Patikrinkite šiuos du šaltinius ir sužinokite, kaip tinkinti esamą temą.
    • Taip pat galite pasirinkti daugiafunkcinę „premium“ temą, kurią galima pakoreguoti naudojant patogią vartotojo sąsają (kodavimo nereikia). X tema yra geras tokio dalyko pavyzdys.
  • Įdiekite kelis populiariausius ir geriausius papildinius, kad gautumėte papildomų funkcijų.

b) „Išsamus kelias“

  • Pradėkite mokytis „WordPress“ per internetinius kursus. „Treehouse“ siūlo nuostabų.
  • Pasirinkite savo temą ir papildinius, kaip aprašyta aukščiau. Arba kurkite savo temą nuo pat pradžių.

Galų gale „WordPress“ yra turbūt pati universaliausia svetainių platforma rinkoje. Su ja galite sukurti praktiškai bet kokio tipo svetaines, ne tik tinklaraščius ar paprastas verslo svetaines. Pateikiame 47 (!) Skirtingų būdų, kaip naudoti „WordPress“, sąrašą, kad priverstumėte susimąstyti.

Joomla ir Drupalis

Nors „Joomla“ ir „Drupal“ šiek tiek skiriasi viena nuo kitos, jos yra puikios turinio valdymo sistemos pažangesniems interneto projektams.

Jie nėra tokie tvirti pagal dizainą, tačiau yra lengvai pritaikomi ir geba valdyti bet kokias jūsų planuojamas svetaines.

Kartais, atsižvelgiant į jūsų projekto sudėtingumą, jiems gali prireikti daug daugiau laiko įsisavinti ir daug daugiau pastangų.

Norėdami išsamesnių mokymų, Lynda.com rasite nuostabius kursus, skirtus tiek Joomla, tiek Drupal.

Dalykai, kuriuos reikia paruošti po šio skyriaus:

  • Pirmasis jūsų svetainės projektas visiškai sukurtas, nesvarbu, ar nusprendėte naudoti „WordPress“ ar kokią kitą platformą.
  • Įsitikinkite, kad jis atitinka jūsų pradinius tikslus, tikslinę auditoriją ir ar jis užtikrins gerą UX.

7 SKYRIUS: Mobilusis reaguojantis dizainas

Daugiau nei 60% žmonių mobiliesiems telefonams ir planšetiniams kompiuteriams naudoja internetą

Reagavimas į mobilųjį telefoną dabar yra labai svarbus svetainių kūrimo aspektas, turbūt labiau nei bet kada.

Štai visa tai yra ši tema:

Iš esmės dabar daugiau žmonių nei bet kada anksčiau naudojasi mobiliaisiais prietaisais prie interneto. Tiesą sakant, apskaičiuota, kad dabar yra daugiau mobiliojo interneto vartotojų nei stalinio interneto vartotojai (75,1% ir 52,7%).

Bet yra problema.

Ne kiekvienas tinklalapio dizainas bus optimizuotas, kad jį būtų galima žiūrėti mobiliuosiuose įrenginiuose tiesiai į vartus.

Tarp keleto bendrų problemų yra:

  • šriftai per maži,
  • pats išdėstymas visiškai nepritaikomas mažesniam ekranui,
  • arba svetainės kūrimui naudojama technologija, kuri nėra prieinama mobiliesiems.

Štai čia ir suvokiamo mobiliojo reagavimo idėja.

Patogi svetainė reaguoja į aplinką, kurioje ji yra žiūrima. Jei tai yra stalinis kompiuteris, svetainė tam tikru būdu atvaizduojama. Jei tai mobilusis telefonas, jis pateikiamas kitu būdu.

Čia yra geresnis paaiškinimas: koks „Heck“ yra žiniatinklio dizainas?

Taigi dabar reikia patikrinti ir įsitikinti, kad jūsų svetainė veikia mobiliuosiuose įrenginiuose. Norėdami tai patikrinti, naudokite savo įrenginius, bet taip pat išbandykite „Google“ mobiliesiems skirtą testą arba pereikite prie tokio įrankio kaip „Responsive Design Tester“..

Jei yra problemų, turite jas išspręsti.

Keletas sprendimų:

  • Reaktyvus interneto dizainas – kaip atlikti veiksmus
  • Kaip priversti svetainę reaguoti maždaug per 15 minučių

8 SKYRIUS: Visa tai sujungkite

Jūs žinote pagrindus, dabar jūsų eilė

Palaukite, mes jau beveik ten!

Tai paskutinis mūsų gana ilgos kelionės skyrius.

Šiuo metu turėtumėte sukurti savo pirmąją svetainę … Ar tai būtų „WordPress“, rankomis sukurtas HTML / CSS, koks nors svetainių kūrėjas ar kiti įrankiai, kuriuos pasirinkote šiam darbui.

Trumpai tariant, sveikinu! Tačiau dar reikia atlikti keletą dalykų:

  • Dar kartą patikrinkite dalykus, kuriuos aptarėme 1 ir 2 skyriuose. Įsitikinkite, kad tikslai iš tikrųjų tinka galutiniam vartotojui, o svetainė nėra paini.
  • Patikrinkite savo kodo struktūrą naudodamiesi W3C žymėjimo patvirtinimo tarnyba.
  • Patikrinkite, ar svetainėje nėra jokių saugos problemų. Tam naudokite Sucuri skaitytuvą.
  • Gaukite atsiliepimų iš bendruomenės. Patikrinkite, ką kiti žmonės mano apie jūsų darbą. Tam gali pasitarnauti „Sitepoint“ forumai.

Jei tai yra jūsų pirmasis šio šaltinio perskaitymas, tada tikrai raginame dar keletą kartų grįžti prie jo ir traktuoti jį kaip jūsų tolesnio mokymo informacinį failą..

Kaip sakėme pradžioje, nesinaudokite TOC ir eikite iš skyriaus į skyrių ir išteklius prie išteklių, kaip jums atrodo tinkama..

Galiausiai mums įdomu … koks yra didžiausias jūsų iššūkis, susijęs su svetainių kūrimu, interneto svetainių kūrimu ar dizainu? Prašome pasidalinti komentaruose arba per „Twitter“. Mes visos esame ausys!

Ačiū, kad skaitote, esate nepaprastas!

  • Iš viso116
  • „Facebook116“
  • „Twitter0“
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector