Verkkosuunnittelu ja suunnittelu 101

web_development_101Haluatko tietää Web-kehityksen ja suunnittelun perusteet? Mahtava…


Mutta tällä ajattelutavalla on ongelma, tai useat heistä todellakin…

  • Mikä on verkkosivuston perustamisen tarkoitus? Tarvitseeko kaikki todella yhtä?
  • Jos on, kuinka voit rakentaa laadukkaan verkkosivuston? Tai toisin sanoen, kuinka opit perusverkkosuunnittelun ja -suunnittelun, jonka avulla voit rakentaa kyseisen laadun verkkosivuston itse?
  • Vielä tärkeämpää on, voitko rakentaa laadukkaan verkkosivuston ENSIMMÄISELLE kokeilulle? Tai tarvitsetko vuosien kokemus takana, ennen kuin voit toivoa mitä tahansa tulosta, joka ylittää kauhean?

Vastataan kaikkeen tähän aloittelijan opas web-kehitykseen ja -suunnitteluun.

[Spoilerihälytys. Jep, voit rakentaa laadukkaan verkkosivuston ensimmäisellä yritykselläsi.]

Mitä tämä opas kattaa?

Okei, ensinnäkin, olemme iloisia, että olet jatkanut lukemista ja että olet päättänyt kokeilla verkkokehitystä! Näin se pelataan:

Luvut on esitetty hyvin yksinkertaisella tavalla, pääsisältö vasemmalla ja toimintokelpoiset kohdat oikealla. Niin kuin:

Oppaan johdanto: Luku 1

Nyt miten edetä:

  • Ollessasi 1. lukemasi: Suosittelemme lukemaan koko asia ylhäältä alas. Tämä antaa sinulle hyvän 10 000 metrin kuvan aiheesta ja auttaa sinua ymmärtämään sen tärkeimmät osat. Se tarjoaa sinulle myös perustyökalut ja menetelmät yksittäisten tehtävien hoitamiseksi.
  • Ollessasi 2. lukemasi ja edelleen: Käytä TOC: ta ja siirry kohtaan, joka kiinnostaa sinua eniten. Voit myös vapaasti käyttää jaosnäppäimiä jokaisen luvun vieressä ja lähettää linkit joko itsellesi tai ystävillesi / seuraajillesi, jotka saattavat olla kiinnostuneita.

Valmis? Siirry kohtaan luku 1.

Kenelle tämä opas on?

Jos haluat oppia perussivuston kehitystä ja suunnittelua, tämä opas on sinulle. Mikä tahansa motivaatio voi olla.

Sinun ei myöskään tarvitse mitään aikaisempaa teknistä tietämystä aloittamiseksi (muut kuin perustiedot “verkkotaidoista”). Tämän oppaan koko päämäärä on olla eräänlainen “101” -kurssi kaikille, jotka ovat kiinnostuneita verkkosivustojen rakentamisesta ja verkkokehityksen oppimisesta.

Tässä on joitain yleisiä syitä, miksi saatat olla kiinnostunut:

  • 1. Tarvitset verkkosivustosi yrityksellesi (ja haluat nähdä, voitko rakentaa sen itse).
  • 2. Haluat oppia verkkokehitystä intohimon tai väliaikaisen mielenkiinnon perusteella (siinä ei ole mitään pahaa).
  • 3. Tarvitset verkkosivun kouluun.
  • 4. AITAT ystävää tai perheen jäsentä saamaan heidän verkkosivustonsa verkkoon.

Tärkein idea, jota aiomme ohjata

Tämä on tärkeää! Ja älä ole vihainen meille, jos olet edistynyt web-kehittäjä, joka lukee tätä, mutta pääidea, joka opastaa meitä koko tämän web-kehityksen ja suunnittelun 101 lähteessä, on:

”Vähiten vastustustapa

Tässä on vähiten vastustuskykyisen lähestymistavan kolme periaatetta:

  • Olemme ei hajottamalla asioita molekyylitasolla. Toisin sanoen emme aio päästä siihen, miten ohjelmointikielet toimivat tai kuinka web-palvelin toimii.
  • Olemme ei keksimään pyörää uudelleen. Toisin sanoen jos joku on jo ratkaissut tietyn ongelman ja asettanut ratkaisun saataville, aiomme käyttää sitä.
  • Olemme yksinkertaisen ratkaisun tekeminen mahtava, pikemminkin kuin monimutkainen ja näennäisesti toiminnallisempi ratkaisu buginen eikä ole ymmärrettävää.

LUKU 1: Suunnitelma

Ideasi, verkkosivustotyyppi, verkkotunnus ja hosting.

Tarvitset suunnitelman ennen verkkosivuston perustamista

Ironista, miltä se kuulostaa – 80-luvun hittishow “A-Team” on opettanut meille, hyvä suunnitelma on avain menestykseen.

Jos sinulla on verkkosivusto istumassa jonkin aikaa nyt, olet varmasti innoissasi ainoasta ajatuksesta saada se lopulta muille lukea ja selata.

Haluat verkkosivustosi olevan mahtava. Luultavasti tiedät miltä se näyttää jossain määrin. Tai ehkä sinulla on jopa täydellinen logo valmis.

Mutta…

Täällä ei ole lainkaan aloittamista. Jos aloitat ennalta vahvistetuilla odotuksilla, tämä johtaa vain paljon hämmennystä matkalla ja lopputulos lopussa.

Ajattele sen sijaan seuraavaa:

  1. Erota itsesi mahdollisista teknisistä tavoitteista. Kuten esimerkiksi tavoite oppia verkkosivustojen tekniikoita tai tiettyjä verkkosivustojen ohjelmistoja.
  2. Kysy itseltäsi yksi tärkein kysymys: “Mihin tarvitsen sivuston?”

Tämä ei koske sinua, tämä koskee sivuston tavoitetta.

Kysymyksiä, jotka sinun täytyy kysyä itseltäsi ennen verkkosivustosi perustamista

  1. Mitä sivuston on tarkoitus saavuttaa?
  2. Mikä on tärkein sivuston kautta esitelty asia? (esimerkiksi yrityksesi, tuotteesi, blogisi viestit jne.)
  3. Onko verkkosivustolla erityistä tarkoitusta? (esim. verkkokauppa, valokuvaajan portfolio jne.)
  4. Kuka on kohderyhmä?
  5. Miksi he ovat kiinnostuneita sivuston aiheesta?
  6. Minkä tuskan sivusto ratkaisee yksittäisille yleisön jäsenille?

Näistä kolmesta viimeisestä kysymyksestä puhutaan minuutti yleisölle…

Verkkosivuston rakentamiseen on olemassa 2 pääsääntöä. Tässä on sääntö 1:

 Lukija / vierailija tulee ensin. He ovat tärkein henkilö, jota verkkosivustosi pitää miellyttää.

Tavallaan verkkosivustosi ei ole sinun. Se on heidän.

(Sääntö # 2, josta keskustelemme minuutin sisällä.)

Unohda tämä yksinkertainen ohje voi johtaa sinut täysin väärään tapaan, jopa siihen pisteeseen, että löydät verkkosivuston, joka on hämmentävä kaikille muille kuin sinä.

”Ugh! Ihmiset eivät vain ymmärrä, mistä tällä sivustolla on kyse. Kuinka he voivat olla niin tietämättömiä?! ” – lopulta ajattelet. Mutta kuten käy ilmi, tietämätön olit sinä.

Ainoa tapa välttää tämä on rakentaa verkkosivustosi lukijan mielessä heti hankkimalla.

Joten… ota tuo paperi ja vastaa kaikkiin yllä esitettyihin kysymyksiin.

Kun olet valmis, sinulla on lopullinen ohjeistosi, johon aiot toimia toimiessasi verkkosivustollasi.

Nämä vastaukset ovat poikkeuksellisen tehokas työkalu kuljettaessasi. Voit palata heidän luokseen, kun joudut tekemään päätöstä verkkosivustostasi.

Pitäisikö sinun tehdä * tämä * tai * tuo *? Mene vastauslomakkeelle ja selvitä. Pitäisikö käyttää leveää tai kapeaa sivupalkkia? Mene vastauksiin, selvitä, mikä todennäköisemmin resonoi kohdelukijan kanssa. Jne.

Verkkotunnukset ja Web-hosting

Jos haluat olla verkkosivuston omistaja, tarvitset verkkotunnuksen ja Web-palvelimen.

No, okei, teknisesti ottaen voit rakentaa testisivuston omalla tietokoneellasi ja suorittaa sen sitten paikalliselta verkkopalvelimelta (joka on myös asennettu tietokoneellesi ohjelmistoksi), mutta se ei olisi käyttökelpoinen ratkaisu 99%: lle tapauksissa, joten ohitetaan se.

Joten, isäntä ja verkkotunnus…

Huono uutinen on, että molemmat maksavat rahaa.

Hyvä uutinen … se ei ole niin paljon rahaa suurten asioiden järjestelmässä. Lisäksi oppiessasi voit jopa käynnistää useita pieniä verkkosivustoja yhdellä verkkotunnuksella ja yhdellä web-isännällä.

Mutta aloitetaan alussa.

Web-isännät:

  • Yksinkertaisesti sanottuna Web-isäntä on missä verkkosivustosi istuu ja mistä kävijät löytävät sen. Tavallaan verkkosivustojen verkkoisäntäpalvelut ovat kuin asunnot ihmisille. Kotelon alla web-palvelimet ovat yrityksiä, jotka vuokraavat palvelimensa vastineeksi rahalle (… pienet asunnot verkkosivuillesi).
  • Aloittaaksesi normaalin jaetun hosting-suunnitelman. Voit hankkia niitä mistä tahansa, joka alkaa niin alhaalta kuin 3 dollaria / kk. Tässä on hieno vertailu suosituista verkkoisäntäkoneista. Tarkista se ja päätä, mitkä näistä yrityksistä vaikuttavat juuri sinulle sopivilta. Suosituksemme koskevat kuitenkin SiteGround-, A2 Hosting- ja Dreamhost-sovelluksia.

verkkotunnukset:

  • Jos verkkoisäntä on huoneisto, verkkotunnus on kyseisen huoneiston osoite. Esimerkiksi tämän verkkosivuston verkkotunnus on hostingfacts.com.
  • Tapa aloittaa on valita haluamasi verkkotunnus ja ostaa se sitten rekisterinpitäjältä. Tässä on kattava opas verkkotunnuksen ostamisesta, ja tässä on luettelo verkkotunnuksen generaattoreista.

 

Ehdotuksia ja vinkkejä verkkotunnuksen valitsemiseksi

Okei, joten meneminen jonkin verkkotunnuksen rekisteröijälle ja ostamalla verkkotunnus on yksi asia, mutta kuinka valita oikea verkkotunnus?

On olemassa muutama koulu:

  • Brändätyt verkkotunnukset. Ne ovat verkkotunnuksia, jotka koostuvat olemattomista sanoista. Ajattele esimerkiksi Google.com tai Yahoo.com. Ennen kuin yritykset tulivat mukaan, nuo sanat eivät tarkoittaneet mitään. Brändätyn verkkotunnuksen ylösalaisin on, että se on… hyvin, hyvin merkkituotteita herättävä, mieleenpainuva ja että sivustosi on helppo erottaa muista.
  • Avainsanapohjaiset nimet. Ne koostuvat jo olemassa olevista sanoista, jotka on koottu sekvenssiin, joka kuvaa sivuston tarkoitusta. Ajattele esimerkiksi Pizza.com tai StartBloggingOnline.com. Tällaisen verkkotunnuksen avulla kävijät voivat ennustaa tarkasti, millaista verkkosivustoa he juuri aikovat käydä. Haittapuoli on se, että nuo domeenit ovat yleensä vähemmän merkkituotteita.
  • Yhdistetyt nimet. Nämä ovat merkkituotteita sisältäviä verkkotunnuksia ja avainsanapohjaisia ​​verkkotunnuksia. Ajattele, Facebook.com tai Copyblogger.com. Tällaiset nimet viittaavat vierailijalle “jonkin verran” osaa verkkosivuston luonteeseen, mutta ne ovat silti erittäin tuotemerkkiä.

Jotkut yleiset ohjeet valitsemastasi verkkotunnuksesta riippumatta:

  • Tee verkkotunnuksesta helppo muistaa.
  • Tee siitä lyhyt ja yksinkertainen. Mitä pidempi verkkotunnus on, sitä hämmentävämpi se on.
  • Hanki .com (jos mahdollista). .Com on tärkein käytettävissä oleva ylimmän tason verkkotunnus. Älä tyydy mihinkään muuhun.
  • Yritä välttää tavuviivoja. Hanki nimesi yhden blob-muodossa, kuten ”cakerecipes.com” eikä “cake-recipes.com”

Valmiita asioita tämän luvun jälkeen:

  • Verkkotunnus.
  • Web-isäntä.
  • Vastauslomake – sivustosi tavoitteet ja kuinka se aikoo palvella yleisöä.

Tarvitsetko lisäapua? Tässä on lisälukema sinulle:

  • Miksi jaettua majoitusta? Tärkeimmät isäntyypit verrattu
  • 10 asiaa, jotka tekevät verkkoisäntästä hyvää
  • 12 sääntöä oikean verkkotunnuksen valitsemiseksi
  • Kattava verkkosivuston suunnitteluopas

LUKU 2: Suunnittelu ja langankehys

Ota paperi ja kynä ja naarmu yhdessä verkkosivustosi rakenteen kanssa

Okei, siirrytään suunnitteluvaiheeseen.

Ensinnäkin, tässä on työetiikka, jota tänne ajamme:

  • Käytämme kynää ja paperia niin kauan kuin pystymme, ja siirrymme sitten vain tietokoneeseen. Uskokaa meitä, jokainen minuutti, jonka olet työskennellyt suunnittelusi paperilla tekemisessä, säästää tunnin, kun aloitat asioiden virittämisen tietokoneella.
  • Teemme iteratiivista työtä… Teemme »tarkistamme tulokset» parannamme »tarkistamme tulokset» toistamme, kunnes valmis.

Luvussa 1 mainitsimme jotain, jota kutsuttiin verkkosivujen rakentamisen säännöksi # 1. Nyt on aika sääntölle 2:

Sivusto 2: n rakennussääntö 2:

Ajattele ensin sisältöä.

Sisällö on tärkeä verkkosivustolla. Ei suunnittelu. Sisältö.

Ihmiset tulevat sisällöstä. He eivät tule suunnittelusta. Suunnittelu on vain väline sisällön toimittamiseen.

Älä koskaan aloita sivustosi ulkoasusta. Aloita sisällöstä. Sisältö. Sisältö. Sisältö.

Joten mitä me tarkoitamme “sisällöllä”? Lyhyesti sanottuna, se on asia, jonka ihmiset haluavat saada verkkosivustoltasi. Blogiviestit, kaupan tuotteet, foorumin säieet, jos rakennat foorumia, uutisartikkeleita, yritystarjouksesi ja niin edelleen.

“Todella? Ulkonäkö ei todellakaan ole väliä? ” – Kysyt.

Sen sijaan, että emme lyö tätä, katso tämä sivu:

Yksinkertainen verkkosivusto

Tämä yksinkertainen verkkosivu on ylivoimaisesti paras selitys siitä, mikä muotoilu on ja mihin tarkoitukseen se toimii verkossa.

Joten muista, ensin sisältö!

Verkkosivuston sisältö ja rakenne

Okei, joten koska sisältö on tärkein asia, sinun on oltava (suurin osa) siitä valmiina etukäteen. Tai ainakin, sinulla on oltava hyvä käsitys siitä, kuinka paljon sisältöä siellä tulee olemaan ja missä muodossa.

Merkintä. Tiedämme, että tämä osa voi olla vaikea. Sisällön aloittaminen vaikuttaa melko luonnotonta verkkosivujen suunnittelusta, mutta se on todella paras tapa saada loistava lopputulos. Joten miettiä sisältöä, jonka haluat jakaa lukijan kanssa, ja miten haluat esitellä sen.

Seuraava vaihe on erottaa tarvitsemasi yksittäiset sivutyypit (kuten kotisivu, tuotesivu, luokkasivu, tietoja sivusta, yhteystietosivu, myyntien pääsivu, jotkut uutiskirjeen tilauksen aloitussivut, pääblogilistaus, yksittäiset viestit, kauppa ehkä ja mikä tahansa muu näyttää tarpeelliselta).

Ajattele, mikä on tehokkain tapa järjestää sisältösi verkkosivustolla?

Tee tämä kaikki paperilla. Se on todennäköisesti helpompaa ja nopeampaa kuin oppia joitain piirroksen ohjelmistoja paikan päällä.

Esimerkki:

sisällön rakenne

Raaputa rautalanka yhteen

Verkkosuunnittelussa oleva kehys on yksinkertaisesti sivukaavio tai suunnitelma – visuaalinen opas, joka edustaa verkkosivuston puitteita (Wikipedia kertoo meille).

Rautalangat ovat mahtavia! Käytämme niitä useimmissa tekemisissämme, joiden on tarkoitus näkyä verkossa. Esimerkiksi tässä on kehys tätä hyvin opasta:

Raaputa rautalanka yhteen

Kuten taas näette, se on paperilla. Vaikka tällaiselle työlle on useita sovelluksia, emme oikeastaan ​​suosittele niiden käyttämistä. Ne saattavat olla hyviä ammattisuunnittelijoille, mutta aloittelija tai keskitason henkilö vain hukkaa aikaa heidän oppimiseensa, ja lopulta he eivät saa paljon parannuksia siihen, mitä he saavuttaisivat kynän ja paperin avulla.

Joten kuinka kehystetään?

No, jos olet aloittelija, on olemassa kaksi lähestymistapaa:

  • Mene virtauksen mukana, jos sinusta tuntuu vahva, ja vetä vain pois (ei aina täydellinen ratkaisu).
  • Hanki nopeita tietoja siitä, kuinka kehittää kehys oikein (yleensä paremmin).

Viimeksi mainittujen osalta mene tänne – loistava opas.

(Muista luoda kehys jokaisesta tärkeästä sivutyypistä, jonka olet luettelossa edellisessä vaiheessa.)

Valmiita asioita tämän luvun jälkeen:

  • Suurin osa sivuston sisällöstä tai ainakin suurin osa siitä ennusti (esimerkiksi jos luotat käyttäjän luomaan sisältöön, sitä on vaikea saada etukäteen).
  • Verkkosivustosi sisältörakenne, joka on laadittu kuvaajana.
  • Rautalanka tarvitsemiesi erityyppisten sivujen tyypeistä.

Lisätietoja:

  • 9 vaihetta verkkosivuston sisällön suunnitteluun
  • Oletko uusi verkkosivujen suunnittelussa? Aloita tästä.

LUKU 3: UX ja UI

Älä koskaan aliarvioi käyttökokemuksen ja käyttöliittymän merkitystä

Kuten, käyttökokemus ja käyttöliittymä.

WebDesignerDepot antaa meille melko runollisen määritelmän kahdesta:

UI on satula, ruiskut ja hallitsijat.

UX on tunne, jonka pystyt ajamaan hevosella ja köyttämään karjaa.

Käytännöllisempi määritelmä:

  • Käyttöliittymä on mitä käyttäjä näkee katseleessaan sivustoasi.
  • UX on miten he suhtautuvat siihen.

Pari ja kuinka hyvin se suoritetaan, määrittelee periaatteessa verkkosivustosi hyödyllisyyden loppukäyttäjälle / vierailijalle.

Sekä UX: n että käyttöliittymän suunnittelu ovat sinänsä suuria aiheita, ja siellä on paljon pienempiä elementtejä, jotka vaikuttavat lopputulokseen.

Lyhyesti sanottuna, on vielä paljon opittavaa, jos olet vasta aloittamassa matkasi.

Joten sen sijaan, että yrittäisimme koettaa koko UX: n ja UI: n suunnittelukurssin täällä, osoittakaamme vain kourallinen tärkeitä elementtejä ja lähetämme sitten sinut jonnekin muualle lukemista varten.

Käyttäjän tavoitteet

UX on käyttäjän tavoitteista… Ei niin paljon tavoitteistasi… Käyttäjätavoitteista.

Okei, mitä tämä tarkoittaa? Ensinnäkin, palaa verkkosivustosi tarkoitukseen – asiaan, jolla työskentelit edellisissä luvuissa. Syy, miksi rakennat verkkosivustoa, ja kuinka se auttaa käyttäjää / vierailijaa.

Kuinka se muuttuu vierailijan tavoitteeksi? … Mikä on yksi asia, jonka kävijä haluaa saada tai saavuttaa saapuessaan sivustoosi? Se on heidän tavoitteensa.

Kuinka helppoa nämä tavoitteet saavutetaan?

Keskity seuraavaksi seuraavaan kysymykseen:

  • Voiko vierailija saavuttaa tavoitteensa helposti? – Voivatko he päästä tarkalleen tietoon, jonka he ovat hankkineet, yksinkertaisella tavalla?

Vastaamaan tähän sinun on palattava takaisin kehyskehykseesi, sisältörakenteesi ja tarkistettava asiat uudelleen.

Varmista, että sisältörakenne ja ajatellut sivut ovat käyttäjän kannalta järkeviä. Varmista, että he voivat navigoida tärkeiden sivujen välillä vapaasti ja hämmentävästi.

Pohjimmiltaan täällä varmistamme, että verkkosivusto antaa kävijöillesi arvon.

On vaikea selvittää tämä kaikki itse, eikö se ole?

On erittäin suositeltavaa tutustua tämän luvun “lukemisen” osiossa lueteltuihin resursseihin … mutta voit myös kokeilla “hakata”..

Ajattele nimittäin, mikä turhauttaa sinua käydessäsi verkkosivustoilla, jotka ovat samanlaisia ​​kuin mitä haluat rakentaa? Ehkä on joitain tietoja, joihin on todella vaikea päästä, tai jokin käyttöliittymäelementti, joka tekee sivustosta hämmentävän.

Tee muistiinpanoja, tee johtopäätöksiä, älä tee samoja virheitä verkkosivustosi kanssa.

Tunteen käyttäminen työkaluna

Kun työskentelet sivustosi käyttöliittymässä ja käyttöliittymässä, pääasiallisesti tavoitteesi on tietyn tunteen herättäminen vierailijassasi.

Haluat heidän tuntevan tietyn tavan, joka sitten vakuuttaa heidät toimimaan tietyllä tavalla. Siten tekemällä verkkosivustostasi todella hyödyllisiä.

Yksi parhaimmista työkaluista on väri työstää työn emotionaalista osaa.

Värillä on eri merkitys eri kulttuureissa. Näiden erojen ymmärtäminen voi tehdä työstäsi paljon helpompaa. Tässä on mukava huijarilehti.

Kun olet ballparkissa, mitä värejä haluat (mahdollisesti) käyttää, tässä on muutama yleinen ohje värien kanssa työskennellessä:

  • Valitse yksi päävärimaailma, joka koostuu parista hyvin sopivista väreistä. Tässä on hieno värikarttageneraattori.
  • Valitse yksi väri, josta tulee korostusväri – väri, jota käytetään toimintopainikkeisiin, ostopainikkeisiin ja muihin. Periaatteessa kaikki, mikä tarvitsee käyttäjän huomion.

Typografia

Monissa tapauksissa typografia on se, missä voitat (tai häviät) verkkosivustojen rakentamisen pelin.

On niin helppoa unohtaa typografia kokonaan ja käyttää kaikkea Arialia.

Ei suositeltu.

Nykyään mukautettujen kirjasinten käyttäminen on erittäin helppoa, ja sinun ei tarvitse edes tehdä mitään teknistä, jotta nämä mukautetut kirjasimet saadaan käyttöön sivustossasi.

Suuri, iso typografia on nykyään hyvin muodissa, ja se myös helpottaa suunnittelijan työtä – etenkin aloittelijan suunnittelijan työtä – paljon helpompaa..

Katso tämä sivusto, esimerkiksi:

bonobos

Huomasitko mitään? Jep, fontit ovat valtavia ja näyttävät hyvältä!

Voit työskennellä seuraavasti:

  • Yleensä jokainen verkkosivuston suunnittelu vaatii kahden tyyppistä tekstiä: otsikot ja Edellä. Useimmissa tapauksissa vain yksi fontti kutakin kohden tekee.
  • Siirry Google Fontsiin – Googlen omaan kirjastoon ilmaisista kirjasimista, joita voit käyttää verkkosivustollasi – ja etsi otsikko fontti, josta todella nautit.
  • Ota sitten sen fontin nimi ja etsi sitä Font Pair -sivulta – se on kirjasto valmiiksi tehdyistä fonttiparista, jotka menevät hyvin yhteen.
  • Valitse pari, joka näyttää mahtavalta.
  • Kirjoita molempien kirjasimien nimet, tarvitset niitä myöhemmin.

Tämän tekeminen nopeuttaa prosessia ja antaa silti loistavan tuloksen.

Esimerkki, löysimme Google Fontista Bree Serif -fontin, josta nautimme:

Bree-serif

Sitten vietimme sen kirjasinpariin, ja sivusto ehdotti, että Bree Serif menee hyvin Open Sansin kanssa. Täydellinen:

Bree-serif-open-sans

Lopullinen rakenne

Viimeinen vaihe!

Tämän luvun koko tarkoitus on laskeutua lopulliseen asetteluun / rakenteeseen, jota aiot käyttää sivustollesi. Tässä vaiheessa sinun pitäisi olla melkein varma asioista, jotka haluat tehdä suunnittelusi ja käyttöliittymän kanssa.

Valmiita asioita tämän luvun jälkeen:

  • Käyttäjätavoitteesi on lueteltu selvästi.
  • Rautakehyksesi on kaksinkertaisesti tarkistettu varmistaaksesi, että nämä tavoitteet eivät ole hämmentäviä.
  • Valittu värimaailma.
  • Typografia tajusi.
  • Koko sivustosi ulkoasu / rakenne / verkkosivuston organisaatio.

Lisätietoja: 

  • UX-lehti
  • UX Booth
  • Verkkosuunnittelun väri taustalla oleva psykologia ja tunteet
  • Mikä on käyttökokemuksen suunnittelu? Yleiskatsaus, työkalut ja resurssit
  • Älykkäiden liiketoimintatavoitteiden asettaminen verkkosivustolle
  • 8 sääntöä tehokkaan typografian luomiseksi

LUKU 4: WordPress, HTML tai mallit?

Päätä, mikä reitti menee – sisällönhallintajärjestelmät tai koodaa se tyhjästä

Tässä alkaa todellinen, käsissä likainen, konepellin alla oleva työ!

Tämä on myös luultavasti pelottavin osa prosessia (myöntäkää se!).

Kerran on oikea aika laittaa kynä ja paperi sivuun ja aloittaa työskentely joidenkin ohjelmistojen kanssa.

Ja heti portista, siellä on paljon kysymyksiä …

  • Pitäisikö minun oppia HTML: tä?
  • Entä CSS?
  • Aikoovatko valmiit HTML-verkkosivustojen mallit tehdä tempun minulle?
  • Pitääkö minun oppia ohjelmointikieli, kuten PHP?
  • Olen kuullut, että WordPress on tapa rakentaa sivusto nykyään.
  • Näin sen Squarespace Super Bowl -mainoksen. Mitä siinä tapahtuu?
  • Mikä on tämä nimeltään Joomla? tai Drupal?
  • ja edelleen ja edelleen ja edelleen.

Kaikille näille vastaus on kyllä.

Kuten kohdassa kyllä, voit tehdä jommankumman tai kaikki nämä asiat, ja vain sinun on päätettävä, minkä polun valita.

Yritämme sanoa, että täällä ei ole ykköseksi parhainta lähestymistapaa. Kaikki riippuu siitä, kuinka haluat osallistua web-kehitykseen, kuinka paljon verkkosivustojen rakentamisen perusteista haluat oppia, kuinka nopeasti tarvitset laadukkaan sivuston valmistuksen ja kuinka muokattavissa haluat sen olevan myöhemmin.

Joten tässä on seuraava tapa edetä tästä luvusta eteenpäin. Ensimmäinen, valitse henkilö, joka määrittelee sinut parhaiten:

  • a) Haluan oppia, mitä web-kehityksessä on kyse, kaikki perusteet, kaikki verkkosivuston sisäiset toiminnot ja kaikki mekanismit, joiden avulla verkkosivusto toimii.
  • b) Haluan oppia käyttämään luotettavaa verkkosivustojen rakentajaa, joka käsittelee suurimman osan raskaasta nostamisesta minulle.
  • c) En tiedä mitä tehdä. Haluan vain verkkosivuston, jonka voin rakentaa itse ja joka toimii kunnolla.

Vastasi a)? Siirry lukuun 5.

Vastattu b)? Siirry lukuun 6.

Vastattu c)? Tutustu tähän artikkeliin ja palaa sitten takaisin (sen pitäisi auttaa sinua valitsemaan täydellinen polku):

  • Katsataan 8 parasta blogi- ja verkkosivustojen rakennusalustaa … Jokainen alusta on kuvattu sen etujen ja haittojen lisäksi, ja resurssi ehdottaa myös parasta käytettävissä olevaa vaihtoehtoa (Wix tai SB) erityistarpeitasi varten.

Oletko lukenut sitä? Loistava! Joten mikä yllä olevista henkilöistä kuvaa sinua parhaiten – a) tai b)?

Työkalut, jotka saattavat olla käteviä matkan varrella:

  • Grafiikka: Paint.NET, Gimp, Pixlr.
  • Koodin kirjoittaminen: Muistio ++, TextWrangler, SublimeText.
  • Työnhallinta: Trello.
  • Suunnittelu: värimaailmat, Google Fonts, täältä tulevat työkalut.
  • Valokuvaus: Unsplash, AllTheFreeStock

LUKU 5: Johdatus HTML: ään, CSS: ään & javascript

Kuinka verkkosivustot ovat sisäänrakennettu todellisuus

Tässä luvussa aiomme tuoda esiin verkkokehityksen paljaat perusteet, selittää tärkeimmät termit ja lähettää sinut sitten tietyille resursseille, joilla voit parantaa tietosi ja taitojasi.

HTML

HTML on verkkosivustojen kieli. Jokainen verkkosivusto rakennetaan tai muutetaan HTML-muotoon jossain vaiheessa.

Jos haluat esimerkiksi nähdä täällä lukemasi oppaan HTML-rakenteen, paina vain näppäimistön Ctrl + U -painiketta..

HTML määrittelee jokaisen lohkon, jonka näet verkkosivulla. Päivän lopussa, jotta mitä tahansa verkkosivulla näkyy, se on muunnettava HTML-muotoon.

HTML-tekniikan oppimiseksi suosittelemme ilmoittautumista johonkin (ilmaiseksi tai maksettuun) web-kursseihin. Jotkut parhaista löytyy Codeacademystä tai Treehousesta.

Esimerkiksi, tässä on erityinen osa Codeacademy-kaikkea HTML: stä ja CSS: stä.

CodeCademy-kotisivu

Joten se on kattava lähestymistapa HTML: ään.

CSS

CSS – ohittaa tylsät tekniset yksityiskohdat – on vastuussa kaiken, mitä verkkosivulla näkyy, muotoilusta.

CSS ottaa HTML-tunnisteet ja rakentaa sitten ne ja lisää tyylit. Asiat kuten: lihavoitu teksti, värisäädöt, varjot, asettelut, jopa animaatiot, tehdään nyt pääasiassa CSS: llä.

Hyppää ymmärtääksesi tätä pikakurssia Codeacademyssä saadaksesi paremman käsityksen siitä, kuinka tämä tarkalleen toimii.

Tarkempia tietoja on myös CSS-osioissa joko Codeacademy- tai Treehouse-sivustossa.

JavaScript, jQuery, Bootstrap jne.

JavaScript on ohjelmointikieli, jonka avulla voit esitellä joitain dynaamisia toimia verkkosivustollasi. Voit esimerkiksi tehdä toimintoja, kuten vahvistaa verkkolomakkeita, tai olla vuorovaikutuksessa käyttäjän kanssa virtaviivaisemmalla tavalla joutumatta lataamaan uudelleen sivua, jolla he ovat. Tässä on hieno w3-koulujen opetusohjelma.

Tämän huomioon ottaen jQuery on JavaScript-kirjasto, jonka avulla voit luoda edistyneitä asioita vähemmän koodaamalla. Erittäin kätevä web-kehittäjälle. Lisätietoja täältä.

Lopuksi, Bootstrap on erittäin mielenkiintoinen keksintö. Alun perin Twitterin käyttöön ottama, se on käytännössä käyttöliittymäympäristö, joka nopeuttaa verkkosivuston rakentamisprosessia toimittamalla suurin osa jo valmiiksi rakennetuista sivustoelementeistä. Kuulostaa monimutkaiselta, eikö niin?

Mutta se ei ole. Vain tutustu tähän aloituskurssiin Codeacademyssä (muuten, näin olemme alun perin oppineet Bootstrapin).

Valmiita asioita tämän luvun jälkeen:

  • Pohjimmiltaan HTML / CSS-verkkosivustosi ensimmäinen luonnos on kokonaan rakennettu. Sieltä voit aloittaa iteroinnin ja lopputuloksen parantamisen.

LUKU 6: Verkkosivustojen rakennusalustat

Asetatko ensimmäistä sivustoasi? Kokeile ilmaisia ​​verkkosivustoalustoja, kuten WordPress, Joomla tai Drupal

Luku 6: Verkkosivustojen rakennusalustat

  • Squarespace
  • WordPress
  • Joomla & Drupal

Sivustojen rakentajia on enemmän kuin voit ravistaa keppiä osoitteessa. (Jos olet sellainen henkilö, joka ravistaa sauvaa asioihin.)

Okei, vitsit syrjään.

On selvää, että jos sinulla ei ole halua oppia koodaamaan asioita käsin, ne ovat varmasti useita ratkaisuja, jotka voivat auttaa sinua.

Merkintä. Muista, että kaikki muu, josta luvuissa 1-4 keskustelimme, pätee edelleen tähän. Vaikka käytätkin sivuston rakennusratkaisua, joka on eräänlainen käytännöllinen, sinun on silti oltava varovainen, jotta lopputuotteesta tehdään ystävällinen käyttäjille ja jokaisen tavoitteiden mukaisesti. Ne sivustonrakennustyökalut ovat täsmälleen sellaisia….

Aloittamalla helpoimmin ymmärrettäviltä:

Squarespace

Ainoa verkkosivusto, joka mainostaa Super Bowlin aikana.

Lyhyesti sanottuna erittäin kätevä ratkaisu, jota kuka tahansa voi käyttää. Ei vaadita edeltäviä taitoja.

Sen avulla voit rakentaa klassisia verkkosivustoja, blogeja ja jopa verkkokauppoja, kirjoitimme niistä jopa arvostelu. Käyttöliittymä ja koko sen käyttöprosessi ovat melko helppo ymmärtää, ja Squarespace-kaverit tarjoavat paljon mielenkiintoisia oppaita. Katso heidät täältä.

WordPress

Rehellisesti, rakastamme WordPressiä.

Suurimman osan ajasta se on täydellinen alusta rakentaa verkkosivusto. Siinä on täydellinen tasapaino monimutkaisuuden ja helppokäyttöisyyden välillä, ja se on periaatteessa loputtomasti muokattavissa.

WordPress-animaatio

Lisäksi se on tällä hetkellä kaikkien niiden suosituin verkkosivustoympäristö. Kuten WordPressin luoja – Matt Mullenweg jakaa – WordPressillä on nyt 25% koko Internetistä. Voivatko kaikki nuo ihmiset olla väärässä?

Okei, joten WordPressin käytön aloittamiseen tarvitaan periaatteessa vain verkkotunnuksesi ja isäntä. Itse WordPress-ohjelmisto on täysin ilmainen.

Aluksi seuraa seuraavia polkuja:

a) ”Pika-aloituspolku”

  • Mene tänne oppimaan yksinkertaistettu tapa asentaa WordPress ja käynnistää sivusto iltapäivällä.
  • Valitse ilmainen teema virallisesta hakemistosta – varmista, että se on sopusoinnussa sivustosi tavoitteiden kanssa ja että ulkoasu / suunnittelu ei ole kaukana halutusta rakenteesta (aiot muuttaa sitä hieman).
    • Tarkista nämä kaksi resurssia oppiaksesi mukauttamaan olemassa olevaa teemaa.
    • Vaihtoehtoisesti voit valita monikäyttöisen premium-teeman, jota voidaan säätää kätevän käyttöliittymän kautta (ei koodausta). X-teema on hyvä esimerkki sellaisesta.
  • Asenna suosituimpia ja parhaimpia laajennuksia saadaksesi lisäominaisuuksia.

b) ”syvällinen polku”

  • Aloita oppimalla WordPress verkkokurssin kautta. Treehouse tarjoaa mahtavaa.
  • Valitse teema ja laajennukset kuten yllä. Voit vaihtoehtoisesti rakentaa oman teemaasi alusta alkaen.

Viime kädessä WordPress on luultavasti markkinoiden monipuolisin verkkosivustoalusta. Sen avulla voit rakentaa käytännössä minkä tahansa tyyppisiä verkkosivustoja, ei vain blogeja tai yksinkertaisia ​​yrityssivustoja. Tässä on luettelo 47 (!) Eri tavasta käyttää WordPressiä vain saadaksesi sinut ajattelemaan.

Joomla ja Drupal

Vaikka Joomla ja Drupal ovat hiukan erilaisia ​​toisistaan, ne ovat molemmat erinomaisia ​​sisällönhallintajärjestelmiä edistyneempiin verkkoprojekteihin.

Ne eivät ole niin vahvoja suunnittelutapoja, mutta ne ovat hyvin muokattavissa ja kykenevät käsittelemään kaikenlaisia ​​verkkosivustoja, joita sinulla voi olla suunnittelussa.

Projektin monimutkaisuudesta riippuen ne voivat joskus vaatia paljon enemmän aikaa hallitsemiseen ja paljon enemmän vaivaa siihen.

Tarkempia tietoja varten Lynda.com tarjoaa mahtavia kursseja, sekä Joomlalle että Drupalille.

Valmiita asioita tämän luvun jälkeen:

  • Verkkosivustosi ensimmäinen luonnos on kokonaan rakennettu riippumatta siitä, oletko päättänyt käyttää WordPressiä tai jotakin muuta alustaa.
  • Varmista, että se on sopusoinnussa alkuperäisten tavoitteidesi, kohdeyleisösi kanssa ja että se tuottaa hyvän UX: n.

LUKU 7: Reagoiva mobiili suunnittelu

Yli 60% ihmisistä käyttää matkapuhelimia ja tablet-laitteita selaamaan verkkoa

Mobiili reagoivuus on nyt erittäin tärkeä osa verkkosivustojen rakentamista, luultavasti enemmän kuin se on koskaan ollut.

Tässä on mitä koko aihe kyse on:

Periaatteessa juuri nyt on enemmän ihmisiä, jotka käyttävät mobiililaitteita verkkoon pääsyyn kuin koskaan ennen. Itse asiassa on arvioitu, että mobiili-Internet-käyttäjiä on nyt enemmän kuin tietokonepöytäkäyttäjiä (75,1% vs. 52,7%).

Mutta siinä on ongelma.

Kaikkia verkkosivustojen muotoiluja ei aio optimoida näkemään mobiililaitteilla heti portista.

Joitakin yleisiä ongelmia ovat:

  • fontit ovat liian pieniä,
  • asettelu itsessään ei sopeudu ollenkaan pienempään ruutuun,
  • tai sivuston rakentamiseen käytetty tekniikka, jota ei ole saatavana mobiililaitteilla.

Tässä tulee ajatus liikkuvasta reagoinnista.

Reagoiva verkkosivusto vastaa ympäristöön, jota sillä katsotaan. Jos kyse on pöytätietokoneesta, verkkosivusto näyttää tietyllä tavalla. Jos se on matkapuhelin, se tuottaa toisella tavalla.

Tässä on parempi selitys: Mikä Heck on reagoiva web-suunnittelu?

Joten nyt tehtävä asia on tarkistaa ja varmistaa, että verkkosivustosi toimii mobiililaitteilla. Tarkista tämä omilla laitteillasi, mutta kokeile myös Googlen mobiilitestiä tai siirry työkalulle, kuten Responsive Design Tester..

Jos ongelmia on, sinun on korjattava ne.

Joitakin ratkaisuja:

  • Responsiivinen web-suunnittelu – miten
  • Kuinka saada verkkosivusto reagoivaksi noin 15 minuutissa

LUKU 8: Yhdistämällä se kaikki yhteen

Tiedät perusteet, nyt on sinun vuorosi

Odota, olemme melkein siellä!

Tämä on viimeinen luku melko pitkällä matkallamme.

Tässä vaiheessa sinun pitäisi olla ensimmäinen verkkosivustosi rakennettu … Olipa kyse WordPressistä, käsin rakennetusta HTML / CSS: stä, jollain verkkosivustojen rakentajalla tai muilla työhölle valitsemillasi työkaluilla..

Lyhyesti sanottuna onnittelut! Mutta on vielä muutama tekemisen arvoinen asia:

  • Tarkista vielä luvut 1 ja 2, joista keskustelemme. Varmista, että tavoitteet todella toimivat loppukäyttäjän kannalta ja että verkkosivusto ei ole hämmentävä.
  • Vahvista koodisi rakenne W3C: n merkintäten tarkistuspalvelun avulla.
  • Tarkista, onko sivustolla mitään turvallisuusongelmia. Käytä Sucurin skanneria siihen.
  • Hanki palautetta yhteisöltä. Tarkista mitä muut ihmiset ajattelevat työstäsi. Sitepointin kautta käydyt foorumit voivat olla hyviä siihen.

Jos tämä on ensimmäinen lukemasi resurssista, rohkaisemme sinua todella palaamaan siihen muutaman kerran ja käsittelemään sitä viitetiedostona täydennyskoulutuksellesi.

Kuten alussa sanoimme, voit vapaasti käyttää TOC: ta ja siirtyä luvusta toiseen ja resursseista resursseihin haluamallasi tavalla.

Viimeiseksi olemme uteliaita … mikä on suurin haaste verkkosivustojen rakentamisessa, web-kehityksessä tai suunnittelussa? Ole hyvä ja jaa kommentteihin tai Twitterin kautta. Olemme kaikki korvat!

Kiitos lukemisesta, olet mahtava!

  • Total116
  • 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