Kehittäjän opas verkkosivujen suunnitteluun muille kuin suunnittelijoille

Loin ensimmäisen verkkosivustoni kouluprojektina, kun olin 14-vuotias. Tehtävä oli yksinkertainen: luo hyvin perussivusto, joka sisältää tekstiä, kuvia ja taulukon. Tavallinen asenteeni kouluprojekteihin oli unohtaa ne kokonaan ja löytää myöhemmin viime hetken ratkaisu. Mutta tällä kertaa menin pähkinöihin.

Ensimmäisestä verkkosivustostani lähtien olen aina asettanut etusijalle asioiden näyttämisen hyvältä. Hyväksy se tai ei, ihmiset arvioivat asioita ulkonäön perusteella. Jos tekemäsi näyttää hyvältä, kuten tiedät tekemäsi, ihmiset luottavat siihen enemmän. Näin vain asiat ovat.

Vuosien mittaan tehdessäni sivuprojekteja, olen keskittynyt yhä enemmän suunnittelutaitojen kehittämiseen sen sijaan, että vain parantaisin ohjelmointia. Koska algoritmi kirjoittaa monstrumia, pääset juuri tähän mennessä. Saavuttaessasi unelman kannattavan sivuprojektin käynnistämisestä, sinun on tehtävä paljon erilaisia ​​töitä. Suunnittelijana oleminen on yksi heistä. Aivan kuten Cross-fit-urheilijoidenkin, solo-perustajien on oltava hyvin pyöristettyjä menestyäkseen hyvin.

Upea malli ei välttämättä ole sellainen, jolla on kaikkein Dribbble-äänet. Se on se, jota et ensin huomaa. Se on täydellinen tasapaino "isoäiti voisi tehdä niin" ja "vau, se on pirun mukavaa". Suunnittelu voi olla kilpailuetu tai kynsinen arkussa.

Kyse ei ole lahjakkuudesta

Kun olin nuorempi, pelasin paljon Minecraftia. Näin kaikki nämä mahtavat rakennukset, jotka ihmiset tekivät. Mutta kun tein jotain, se näytti laatikolta. Ruma ja ilman tyyliä. Kuinka edes tehdä jotain mukavaa Minecraftissa, eikö niin?

Joten löysin kaverin YouTubesta ja rakensin tarkan kopion rakentamastaan. Muutamaa viikkoa myöhemmin olin kehittänyt oman tyylini ja pystyin rakentamaan omaani. Yhtäkkiä luomukseni eivät näyttäneet paskalta. Heck, olen jopa voittanut rakennuskilpailun.

Suunnittelu on taito, ja kuten mikä tahansa muu taito, sen voidaan oppia.

Oikean työkalun valitseminen

Ohjelmoinnissa voit käyttää Notepadia ja kirjoittaa sovelluksen, joka on niin hyvä kuin se olisi kirjoitettu täydellisessä IDE: ssä ... vaikka elämäsi saattaa olla aika kurja tekeminen, ja se vie todennäköisesti huomattavasti kauemmin. Verkkosuunnittelumaailmassa MS Paint ottaa Notepadin roolin, ja kuten Notepadkin, harvat ihmiset todella haluavat suunnitella sen kanssa ... Toivon.

Verkon suosituimpia suunnittelutyökaluja ovat:

  • Sketch, vain MacOS-työkalu, joka, kuten React, näyttää olevan kova koodattu jokaisessa työluettelossa. $ 99 / vuosi.
  • Adobe XD, ilmainen ja käyttöympäristönvälinen työkalu, joka ottaa Vue-roolin. Sillä on pienempi yhteisö, mutta aloittaminen on erittäin helppoa.
  • Adobe Photoshop, sveitsin veitsi kaikkiin tunnettuihin suunnittelutehtäviin. Se on ottanut paikan - arvasit sen, jQuery. $ 9,99 € / kk.

Lähes ei ole eroa siinä, käytätkö Sublime- tai VS-koodia sovellusten kirjoittamiseen. Vai käytätkö Reaktia tai Vueä etupaneeliin. Se on vain mieluummin kysymys. Sama koskee suunnittelutyökaluja, koska jokaisella on hyvät ja huonot puolensa.

Käytän Adobe XD: tä. Tärkein syy minulle on se, että se on eri alustoilla, joten minua ei pidä panttivankina Applen ekosysteemissä. Sitä tukee myös Adobe, joten se on täällä jonkin aikaa. Parasta uusille tulokkaille on se, että toukokuusta 2018 lähtien Adobe XD: tä voi käyttää vapaasti vain muutamilla rajoituksilla (joihin et todennäköisesti kompastu).

Ajattelumallin säätäminen

Suurin haaste web-suunnittelumaailmaan oli minulle ajattelutavan mukauttaminen. Olin tottunut keksimään mallia, kun koodain verkkosivustoa. Kaikilla oli tilaus. Virtaus oli vasemmalta oikealle ja ylhäältä alas. Tosiasia, tämä lähestymistapa tekee sinusta huonomman suunnittelijan.

Suunnittelutyökalut ovat kaoottisia, koska ne pakottavat sinua suunnittelemaan, kuten jokainen elementti on sijoitettu ehdottomasti. Hyväksy tämä muutos. Se antaa sinulle vapauden muuttaa asioita nopeasti ja tekee kokeilusta helppoa. Ja se on välttämätöntä, koska suunnittelu on jatkuva prosessi. On odotettavissa, että muutat asioita paljon ennen kuin saat hienon tuloksen.

Työkalujen oppiminen

Koodauksessa käytät HTML-elementtejä, kuten divs, spans ja input, ja annat selaimen tehdä niistä jotain visuaalista. Suunnittelutyökaluilla sinulla on valta ohittaa välittäjä ja käyttää visuaalisia elementtejä, kuten muotoja ja tekstiä suoraan.

Valitsin 4 eniten käytettyä työkalua, jotta voit viettää vähemmän aikaa oppimiseen ja enemmän suunnitteluun. Tällä tavalla voit aloittaa harjoituksen mahdollisimman pian. Alla esitän sinulle kuinka ne toimivat ja kuinka niitä käytetään.

Suorakulmatyökalu

Suorakulmiot ovat yleisin muoto. Löydät itsesi käyttävän niitä koko ajan. Ajattele sitä div. Se on hyödyllinen kaikenlaisille asioille, tekstitulojen luomiseen konteihin.

Tekstityökalu (tarra)

Tekstityökalun avulla, kuten otsikko osoittaa, voit luoda tekstiä. Se ei ole kuitenkaan niin helppoa, koska tekstityökalussa on kaksi tilaa: yksi yhden rivin tekstille ja toinen useille kappaleille. Onneksi he ovat erittäin helppo oppia käyttämään oikein.

Ensimmäinen tila on yksirivinen tekstisäiliö, joka säätää sen kokoa tekstin koon perusteella. Se on samanlainen kuin sillä poikkeuksella, että se ei kääri, ellet tee rivinvaihtoa. Tämän tilan etuna on, että se säätää tekstiruudun koon automaattisesti rivin korkeuden ja fonttikoon perusteella.

Voit luoda sen napsauttamalla vain valittua Teksti-työkalua ja kirjoittamalla. Nyrkkisääntönä käytä tätä tilaa kaikille, jotka eivät tarvitse tiettyä leveyttä ja ovat yksi rivi. Esimerkiksi yhden rivin otsikot ja tarrat.

Tekstityökalu (kappale)

Toinen tila on tekstisäiliö, jolla on tietty koko, joka käyttäytyy kuin

jolla on tietty leveys tai

​​ruudukkonsarakkeen sisällä. Tämän tilan etuna on, että voit hallita tekstikentän kokoa. Luo kappale napsauttamalla valittua tekstityökalua pitämällä painettuna luodaksesi valinnan. Nyrkkisääntönä käytä tätä tilaa useamman kuin yhden rivin kappaleille ja otsikoille.

Valitse työkalu

Siirrä, koon kokoa, kopioi. Tämä on työkalu siihen. Ne vaaleanpunaiset viivat osoittavat etäisyyden ympäröivistä elementeistä. Sininen viiva auttaa sinua saamaan elementit kohdistumaan oikein.

Linjatyökalu

Joskus linja on kätevä erottamaan suunnittelun osat toisistaan. Siksi rivityökalu on täällä. Voisit käyttää sen sijaan teknisesti suorakaiteen työkaluja, mutta hei, joten div: ää voidaan käyttää mihin tahansa.

Suunnitteluvihjeitä ja tekniikoita

Layout

Verkkokehityksessä asettelua kuvataan yleisimmin otsikkona, valikkona, sisällönä ja alatunnisteena. Se on osa sitä, mutta asettelu on enemmän. Se on kirjaimellisesti tapa, jolla kaikki elementit on asetettu.

Esimerkiksi suunnitellessani Sidemailia koskevia projektitietoja jakoin kortin sisällä olevat elementit tasaisesti, mikä tekee kortista tuntuvamman ja näyttää puhtaammalta.

värit

Auta pitämään mielessä värien psykologiaa (colorpsychology.org) auttaaksesi sinua löytämään täydelliset värit seuraavalle projektillesi. Hyödyllinen työkalu täydellisen väriyhdistelmän löytämiseen päävärisi perusteella on Paletton.

Luo visuaalinen hierarkia käyttämällä päävärejä ja tekstivärejä. Kokeile tummempia tai vaaleampia sävyjä tekstillesi, kun käytät värillistä taustaa.

Typografia

Kirjasin vaikuttaa suurelta osin projektisi brändäykseen, joten valitse viisaasti. Ensiluokkaiset kirjasintyypit näyttävät yleensä paremmalta kuin Google Fontsissa, mutta älä osta niitä vasta, kun olet vasta aloittamassa. Jopa Google Fontsissa on joitain piilotettuja helmiä.

Temppu, jota käytän usein tekstin visuaaliseen hajottamiseen, on tehdä etiketteistä isompia kirjaimia, joiden etäisyys on suurempi. Isot kirjaimet ovat symmetrisiä ja näyttävät hyvältä visuaalisesti, mutta äläkä käytä niitä liikaa, koska se on paljon vaikeampi lukea.

Kotisivun (tai aloitussivun) suunnittelu

Yritän aina välttää houkutusta suunnitella trendikkäitä elementtejä ja sitomaan viestini siihen. Pikemminkin keksin etuja (ei ominaisuuksia), laitan ne tarinaan ja kerron tarinan visuaalisesti kiinnostavalla sivulla.

Kun olen vahvistanut, mitä haluan sanoa, etsin yleensä inspiraatiota. Erinomainen resurssi tähän on land-book.com, laaja hakemisto näyttävistä aloitussivuista, joista ihmiset voivat äänestää. Toinen hieno sivu, jolla on inspiraatiota suunnittelusta, on rajapinnat.pro, jossa voit suodattaa luokkien, kuten hinnoittelu, 404 tai meistä, luokkien perusteella. Selaan vain, kunnes löydämme tarpeeksi pidän haluamiasi sivustoja ja vastaamaan haluamaani tyyliä.

Vaikea osa on koota kaikki yhteen. Valitettavasti pikakuvakkeita ei ole. Sinun on vain toistettava paljon, kunnes saat tuloksen, johon olet tyytyväinen.

Saatat joutua miettimään, onko normaalia, että viikko sitten täysin tyytyväinen mallisi tuntuu yhtäkkiä riittämättömältä hyvältä tai jopa ruma tänään. Vastaus on, että se on täysin normaalia ja oikeastaan ​​hyvää. Se johtuu pääasiassa siitä, että kasvatat, opit ja muutat paremmiksi. Eilinen haaste ei ole niin haastava tänään. Pidä tämä mielessä, jotta et juuttu rottakilpailuun.

takeaways:

  • Ainutlaatuisella kirjasintyypillä on valtava ero
  • Grafiikat ovat erittäin tärkeitä, yritä käyttää ainakin joitain kuvia tai kuvia
  • Hanki visuaalinen merkitys oikein käyttämällä useita värisävyjä. Teksti ja päävärit eivät riitä.
  • Älä käytä liian leveitä astioita - noin 1100 px on tarpeeksi leveä
  • Ota negatiivinen tila
  • Puhuta eduista, ei ominaisuuksista
  • Katso inspiraatiota, jos takertuit

Verkkosovelluksen (tai kojelaudan) suunnittelu

Älä aloita suunnitteluun kuten aloitussivun suunnittelussa. Tällä kertaa et yritä kertoa tarinaa. Sen sijaan tavoitteena on helppokäyttöisyys. Tartu kynään ja paperiin ja tee suunnitelma siitä, kuinka sovelluksesi pitäisi toimia, minkä pitäisi riippua mistä ja kuinka navigoida helposti.

Tee joitain luonnoksia tai lankakehyksiä tarvittaessa. Suorita asianmukainen kilpailijan suunnittelutarkastus nähdäksesi itse, mitä puuttuu ja mitä voidaan tehdä paremmin tai mahdollisesti jopa muuttua kilpailuetuksi. Joskus on parempi tehdä tauko ennen suunnitelmien tekemistä paperille ja suunnittelua.

Paras neuvo, jonka voin antaa sille, että siinä ei käytetä tapauskohtaisesti, on valita oikea sivun asettelu. Yleensä kaikki verkkosovellukset käyttävät kahta erilaista sivun asettelua sovelluksen käyttötarkoituksen perusteella: kiinteän leveyden säiliö tai nestesäiliö, joka täyttää koko näytön.

Kiinteä kontti

Pidän kiinteästä astiasta, koska on paljon helpompaa keskittyä tiukalle alueelle, koska se estää turhaa silmien liikkumista. Kiinteät konttisovellukset ovat myös yleensä puhtaamman näköisiä ja vähemmän raskaita uusille käyttäjille. Pienemmän leveyden vuoksi kiinteitä säilösovelluksia on kuitenkin vaikeampi suunnitella.

Esimerkkejä: Twitter, Puskuri, DigitalOcean, Netlify, GitHub

Nestesäiliö

Nestesäiliösovellukset sopivat erinomaisesti chat-sovelluksiin, laskentataulukkosovelluksiin ja muihin sovelluksiin, joissa enemmän tavaroita näytöllä on välttämätöntä. Mutta huomaa, että kuormitetut tiedot näytöllä voivat olla ylivoimaisia.

Esimerkkejä: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

On tärkeää valita oikea säilö, koska koko sivusi asettelu riippuu siitä ja sen muuttaminen myöhemmin on paljon työtä. Jokainen projekti on ainutlaatuinen ja vaatii ainutlaatuisia ratkaisuja, joten älä pelkää kokeilla!

takeaways:

  • Pidä se yksinkertaisena
  • Käytä luettavaa kirjasinta
  • Käytä visuaalista hierarkiaa, kun näytät paljon tietoja
  • Hyödynnä kilpailijan heikko suunnitteluvaihtoehto

Käärimistä

Muista, että muotoilu voi olla kilpailuetu - joten käytä sitä ja tee jotain mahtavaa.

Aloita suunnittelumatka hankkimalla Adobe XD -malli, jonka tein uusimman projektin aloitussivulle. Tilaa vain upouusi sähköpostiluetteloni, ja se laskeutuu postilaatikkoosi.

Lisäksi saat ensimmäisenä ilmoituksen seuraavasta viestistäni, jossa kerron 69 päivän edistymisestä Sidemailissa - SaaS-projektissa, jolla työskentelen. Se sisältää asioita, kuten tilaajien määrän, vierailut sivustolla, kulut ja suunnitteluluonnokset. Sen pitäisi olla sanomattakin selvää, mutta takaan ehdottomasti, ettei roskapostia ole. Minulla ei ole edes aikaa tuolle paskalle.

Twitter-DM-tunnukseni ovat avoinna, joten jos takertuit mallien tekemiseen tai sinulla on lisäkysymyksiä, lyö minua rohkeasti.