Kuinka oppin varastamaan taiteilijana kuukaudessa ja suunnittelin ja rakensin uuden yrityksen verkkosivuston

# 4 - Haasteeni neljäs kuukausi: 12 aihetta opittavaksi 12 kuukaudessa

Kuva, jonka otin Malagassa (Espanja), Picasso-kaupungissa. Se on erittäin mukava maalaus värien inspiraatiota varten

Ehkä ihmettelet, miksi kutsuin tätä artikkelia ”Kuinka oppin varastamaan kuin taiteilija”, itse asiassa en oppinut varastamaan, koska tiedän jo tämän .. vain leikkiin hehe . Itse asiassa tämä otsikko on peräisin teoksesta Steal kuin taiteilija - Austin Kleon, jota mentorini suositteli minulle lukemista.

”Taide on varkaus.” - Pablo Picasso

Aluksi halusin oppia tässä kuussa suunnitteluteorioita ja keskustellessani mentorini kanssa hän käski minun oppia värien tai typografian merkityksestä. Koska halusin aloittavan jotain yleisempää, hän kertoi minulle tästä kirjasta, joka opettaa sinulle hauskalla tavalla, kuinka löytää inspiraatiota, kuinka pitää motivaatiota, mikä on hyvä suunnittelun työnkulku ja miten pitää olla luova ja tuottava. Kuten voitte kuvitella, pidän väriteorioita ja typografiaa vielä toisen oppimiskuukauden ajan!

En ole koskaan itse opiskellut itse suunnittelua, pidän itseäni suunnittelijana ja kehittäjänä, koska olen oppinut harjoittamalla ja se on tärkein syy, jonka vuoksi haluan tietää enemmän teorioista. Ehkä minulla on huijausoireyhtymä ja tämä oppimiskuukausi on täällä lopettaa se!

Aloitin haasteen 6. heinäkuuta. Jos luet edellisen Learning Lab Challengen viestin, jossa rakensin ensimmäisen progressiivisen verkkosovellukseni, voit nähdä, että valmisin sen 13. heinäkuuta. Kyllä, tein hiukan molempia näiden päivämäärien välillä, ja se on huonoa. Pääasiassa siksi, että olen sitoutunut toimittamaan uuden yrityksen verkkosivustomme .

Valmistautuminen

  1. Mentorin löytäminen
    Valitsin mentoriksi Veran. Hän oli kollegani edellisessä yrityksessäni ja on erittäin lahjakas.
  2. Aiheen laajuuden määritteleminen
    Kuten jäljempänä kuvataan, rajoitan tämän aihepiirin suunnittelun työnkulkuun ja siihen, miten löytää inspiraatiota.
  3. Oppimateriaalin valitseminen
    Tärkein oppimahdollisuuteni on tämä kirja: Steal Like An Artist - Austin Kleon.
  4. Projektin määritteleminen
    Kun aloitin juuri uuden yrityksen, joka aikoo toimia verkkoyrityksenä, aion ensin suunnitella ja sitten rakentaa sen verkkosivuston. Lisäksi haluaisin luoda web-suunnittelun tarkistusluettelon, jota voisin käyttää kaikissa projekteissani.

Kurssi / lukeminen

Austin Kleonin Steal Like an Artist on erittäin lyhyt ja helppo lukea kirja. Se on hyvin hauskaa. Kirja on täynnä kuvia ja piirroksia, jotka tekevät lukemisesta erittäin mielenkiintoisen. Jokainen luku kuvaa neuvoja tai konsepteja, joita sovelletaan elämässäsi tai työskentelet.

Jokainen näistä neuvoista koski joko suunnittelun työnkulkua, suunnittelun hakkerointia tai elämää. Panin merkille ja yritin soveltaa arvokkaimpia esineitä itselleni, ja oli hienoa nähdä, että hain jo joitain muita.

Suunnittelun työnkulku

Austin Kleon ei kuvaillut itse suunnittelun työnkulkua, vaan vain joukon neuvoja, jotka olen koonnut ”neuvoiksi sisällytettäväksi suunnittelun työnkulkuun”

Ensimmäinen ja paras neuvo, jonka tämä kirja on tuonut, on tehdä pyyhkäisy tiedosto.
Se on pohjimmiltaan kokoelma taiteita, verkkosivustoja, musiikkia, valokuvia, katutaidetta, kaikkea, mikä saa sinut tuntemaan jotain, mitä haluat tai jotain, jota voit käyttää inspiraationa myöhemmin. Kokoelma voi olla fyysinen, muistikirjassa tai digitaalinen, esimerkiksi Pinterestissä, Google Keepissä, Google Drivessa, Evernotessa…
Joka kerta, kun sinun on käynnistettävä projekti, voit siirtyä tähän pyyhkäisytiedostoon ja valita resurssit, jotka inspiroivat sinua, siksi hän kutsuu sitä pyyhkäisytiedostoksi. Hieman kuin vakavampi .

Pitäisin tämän yhden pyyhkäisytiedostossani, paras maalaus koskaan

Toinen tärkein neuvo on kopiointi ja oppiminen kopioimalla. Minun on korostettava, että sinun ei pidä tehdä tylsää kopiota ajattelematta, jota kutsutaan plagiointiaksi, vaan "suunnitella" kääntää suunnittelu, etsiä merkitys sen taustalla ja rakentaa se uudelleen oman ymmärryksesi mukaan. Lisäksi he sanovat, että kopiointi yhdestä on plagiointia, kopiointi monista lähteistä on tutkimusta. Mikä on erittäin positiivinen tapa nähdä asioita. Tämä on jotain, joka kuulostaa selvältä, mutta mielenkiintoiselta tietää ja tehdä se tietoisesti.

Kuva löytyy kohdasta “Varasta kuin taiteilija” - Austin Kleon; se kuvaa tavaroiden varastamisen käsitettä

Viimeisin tärkein neuvonta työnkulun suunnittelussa on pysyä poissa näytöltä ja pitää tekniikat suunnittelusi lopullisen version kannalta. On parempi käyttää oikeita työkaluja, kuten paperia, ja käyttää kehoasi työn luovaan osaan. Se saa sinut tuntemaan, että olet todella luomassa ja käsityö. Se on myös jotain, jota teen aina suunnitteluprosessissani.

Suunnittelu hakata

Se mitä valitsin suunnitteluhakkiksi, ovat vinkit, jotka auttavat sinua parantamaan suunnittelutyötä, mutta jotka eivät ole osa suunnittelun työnkulkua, sinun ei tarvitse tehdä niitä joka kerta, kun sinulla on uusi suunnitteluprojekti.

Jokainen taiteilija seuraa liikkeitä ja joitain vaikuttajia, jokaisella taiteilijalla on mentori tai jopa mentoroitu. He jotenkin yrittävät jäljitellä, kopioida ja olla yhtä hyviä kuin toinen taiteilija, joka vaikuttaa heihin. Se on jotain, joka on aina ollut siellä, ja sitä voidaan soveltaa mihin tahansa taiteilijaan. Miksi et sinulle? Siksi kirja ehdottaa, että etsit 3 rakastamaa taiteilijaa ja etsiä kaikkea heistä. Se voi olla maalareita, suunnittelijoita, yrittäjiä, muusikoita, jopa sovellusten valmistajia! Ja jos se on mahdollista, voit löytää myös ne, jotka ovat heidän vaikuttajansa, ja rakentaa valtavan vaikutusvaltajien "sukututkimuspuun". Tekemällä sen, et tiedä kaikkea vain vaikuttajaistasi, vaan myös heistäsi ja rakennat kykyjäsi. Esimerkiksi minun tapauksessani on suosikkini sovelluksia, joita tarkistan usein nähdäkseni miten ne tekevät asioita: Airbnb, Trainline, Google,…

Epäküpsät runoilijat jäljittelevät; kypsät runoilijat varastaa; huonot runoilijat vääristävät sitä, mitä he tekevät, ja hyvät runoilijat tekevät siitä jotain parempaa tai ainakin jotain erilaista. Hyvä runoilija hitsaa varkautensa kokonaisuudeksi tunneksi, joka on ainutlaatuinen, täysin erilainen kuin se, josta se revittiin; paha runoilija heittää sen johonkin, jolla ei ole yhteenkuuluvuutta. Hyvä runoilija lainaa yleensä tekijöiltä, ​​jotka ovat ajallisesti kaukaisia, vieraita tai kielen suhteen erilaisia ​​tai kiinnostuksen kohteinaan. - T.S. Eliot

Toinen vinkki, jota kirja ehdottaa, on aloittaa tuottamiesi asioiden tuottaminen, luominen ja mahdollisuuksien mukaan päivittäin. Voit myös hyödyntää sitä, että et ole tuntematon, olet aloittelija, kukaan ei tuomitse sinua, voit epäonnistua. Paranna itseäsi ja jaa aina tuottamaasi. Yritän jotain, mutta se ei ole helppoa tehdä päivittäin. Siksi kirjoittaja ehdottaa pitämään kalenterissa 365 -valintaruutua, jotka tarkistat päivittäin, jos tuot jotain, se on mukava temppu!

Viimeinkin hän antaa erittäin älykkään hakkeroinnin: luo tiedosto, joka sisältää kaikki saamasi hyvät palautteet. Jos joskus tarvitset motivaatiota, lue vain se, se antaa lisäyksen !

Elämän suunnittelu

Tämä kirja sisältää myös paljon elämän uudelleensuunnittelua, kuinka parantaa itseäsi ja elämääsi terveyden ylläpitämiseksi ja hyvän työn jatkamiseksi! Jotkut heistä kuulostavat hyvin yksinkertaiselta ja ilmeiseltä, mutta huomasin 2, jotka ovat varsin mielenkiintoisia.

Pysy kykyjen ympäröimänä, koska Jim Rohnin mukaan - "olet aina niiden 5 ihmisen keskiarvo, joiden kanssa vietät eniten aikaa." Joten palkka, tasosi, tuottavuutesi on näiden 5 keskiarvo. Se on erittäin voimakas lausunto, joten etsimäsi haluamasi mukaan oikeat ihmiset työskentelemään, äläkä ajattele vain fyysistä läheisyyttä, se voi työskennellä myös etäyhteydessä.

Kirjaudu joka päivä muistikirjaan (tai virtuaaliseen) ja vastaa tähän kysymykseen: Mikä on parasta, mitä tänään tapahtui? Se auttaa muistamaan tekemäsi päivittäin ja auttaa keskittymään parhaisiin asioihin positiivisuuden ja motivaation säilyttämiseksi.

Kuinka luon pyyhkäisytiedostoni

Kaikista tämän kirjan antamista neuvoista löysin ”kopioinnin työnkulun” luomalla pyyhkäisytiedoston ja käyttämällä sitä aina, kun tarvitset minulle mielenkiintoisinta (ja ottaen myös osan eri projektista ja ymmärtäen miksi).

Siksi kuvaan kuinka luin pyyhkäisytiedostoni:

  1. Loin Evernotessa muistikirjan nimeltä Inspiraatio
  2. Siitä lähtien kun aloitin verkkotoimiston verkkosivuprojektini, kävelin eri lähteistä asuttaaksesi tämä pyyhkäisytiedosto (Dribbble, Awwwards, Google-haku)
  3. Etsin sieltä avainsanoja “toimisto”, “portfolio”, “minimalistinen toimisto” (minimalistinen, koska rakastan minimalistisia verkkosivustoja)
  4. Joka kerta kun löysin haluamani mallin, lisäin sen Evernoteen kopioimalla tai käyttämällä Evernote Clipper -laajennusta. Sitten lisäsin tunnisteet tietääkseni, miksi lisäsin tämän pyyhkäisytiedostoon, esimerkiksi: Agentti, Web, Mobiili, Värit, Kaltevuus, Animaatiot, Typografia
  5. Jatkoin myös isojen suosikkisivustojen lisäämistä hyvällä suunnittelulla, kuten Airbnb, Spotify, Apple Music.
  6. Lopuksi pidän vain mielessäni, että aina kun löydän jotain kaunista sen sijaan, että unohtaisin sen, panen sen Evernoteen tai otan kuvan ja laitan sen sinne.
  7. Nyt Swipe-tiedostoni avataan joka kerta, kun aloitan uuden projektin, ja voin käyttää sitä tai toistaa edelliset vaiheet asuttaaksesi sen ennen käyttöä. Lisäksi minulla on joitain kuvia museoista google-kuvissa, jotka otin ennen tämän pyyhkäisytiedoston saamista, voin käyttää hakua myös löytääkseni inspiraatiota.

Jos sinulla ei ole pyyhkäisytiedostoa, suosittelen ehdottomasti, että luot sen heti, kun aloitat uuden projektin.

Katsotaanpa nyt kuinka parantaa web-suunnittelun työnkulkua tällä pyyhkäisytiedostolla.

Suunnittelun tarkistuslista

Tein tämän web-suunnittelun tarkistusluettelon perustuen siihen, mitä teen yleensä, joihinkin lisätutkimuksiin, tämän kirjan oppimiin ja myös yrityksen verkkosivuprojektiin. Yritin tehdä siitä niin yleisen kuin mahdollista.

  • Määritä sovelluksesi / verkkosivustosi tietojen arkkitehtuuri (puhdas sisältö)
  • Kerää inspiraatiota (Dribbble, Awwwards ja suosikkisivustot)
  • Pyyhkäise tiedostoa, niin saat suosikkilistan 7 parhaasta
  • Suunnittelu rautalanka (paperille)
  • Kerää palautteita
  • Suunnittele verkkosivusto harmaasävyinä (voit käyttää suosikkisuunnittelutyökalusi)
  • Kerää palautteita
  • Valitse 2 kirjasinta
  • Suunnittele logo
  • Määritä värivalikoima (sen tulisi sopia logoon)
  • Paranna suunnitteluasi ottamalla käyttöön kirjasimet, värit ja logo
  • Kerää palautteita
  • Määritä toteutettavat animaatiot (voit suunnitella ne, jos ne ovat monimutkaisia ​​ohjelmiston avulla, muussa tapauksessa pidä ne mielessä tai piirtää ne paperille)

Löydät sen myös uusimmasta versiosta GitHub-arkistostani: https://github.com/sandoche/Webdesign-checklist

Syy, miksi päätin suunnitella ensin harmaasävyissä, on keskittyä enemmän välilyöntiin ja itse asetteluun sen sijaan, että kokeilisin värejä. Lue tästä lisää täältä: https://medium.springboard.com/a-designers-guide- to-valintatoiminnossa värit-for-your-tuote-9944756838d4

Suunnitellaan uudelleen portfolioni

Uusi yritys koostuu kahdesta tuotemerkistä: agenttityyppinen nimeltä Snitco ja tapahtumien järjestämisestä nimeltään Sconférenciers. Ja päätimme aloittaa Snitco-brändillä. Tähän keskityn täällä.

Snitco-brändimme tarjoaa erilaisia ​​palveluja 3 kategoriasta: Luovuuden työpajat, Viestintä, Kehitys ja Suunnittelu.

Meillä ei ole mitään rakennettua, joten aloitamme nollasta!

Sisällön määritteleminen

Aluksi määrittelimme sisällön hierarkkisella tavalla. Teen niin aina nyt, kun luot uutta sovellusta tai verkkosivustoa.

Näin se näytti: https://github.com/sandoche/Snitco-information-architecture-example (anteeksi, että tein arkkitehtuurini ranskaksi )

Lopussa arkkitehtuuri kehittyy, ja muutat sen sopimaan täydellisesti suunnitteluun.

Mutta pohjimmiltaan se oli 5 osaa: otsikko, jolla on ainutlaatuinen arvoehdotus, projektit, palvelut, tiimi ja lopuksi alatunniste.

Pyyhkäise tiedoston asettaminen ja inspiraation valitseminen

Seuraava askel on täyttää Evernote-pyyhkäisytiedostoni avainsanoilla Agency, Web, Mobile, Colors, Gradient, Animaatiot, Typografia, useimmiten käyttämällä Dribbble ja Awwwards.

Näin pyyhkäistytiedostoni näyttää Evernotesta

Kun tunsin keränneen tarpeeksi tietoa, tein seuraavan listan:

  • https://dribbble.com/shots/3272390-HBK-Creative-Agency
  • https://dribbble.com/shots/3638273-Creative-Design-Agency-Website/attachments/812598
  • https://appico.com/ (animaatiot, minimalismi)
  • https://bitesizeinc.com/home (animaatiot, muodot)
  • https://www.spotify.com/fr/ (värit, typografia)
  • http://wearecocoon.co.uk/ (minimalistinen)
  • http://www.size.agency/ (yksinkertainen sisältö)
  • http://www.revstudio.pl/ (minimalistinen, yksinkertainen)
  • https://www.packwire.com/ (animaatiot, värit)
  • https://revolut.com/ (yksinkertainen, typografia)

Pyysin luettelosta ryhmääni äänestämään suosikkiaan (lihavoidut) ja kertoa minulle miksi. Käytin näitä tietoja käyttääkseen sitä, mikä toimii hyvin erilaisissa malleissa, ja rakentamaan harmaasävymalleja.

Harmaasävymalli

Käytän ilmaiseksi Adobe Xd: tä (beeta), joka rakentaa mallin. Yritin todella pitää sen minimalistisena, mutta yritin myös määritellä joitain animaatioita, jotta niillä olisi ”vau-vaikutus” kuten muu joukkue halusi.

Joten eri elementit, jotka otin edellisestä suunnitteluluettelosta:

  • iso otsikko lihavoituna ainutlaatuisen arvoehdotuksen kanssa
  • litteä tausta
  • toisen osan valkoiset välilyönnit korteilla kunkin projektin kuvaamiseksi
  • luettelo palveluista esitetään hyvin yksinkertaisesti, erittäin selvästi
  • joitain esiintyviä animaatioita
  • puhaltava sydän

Yritin yhdistää kaikki nämä eri elementit erittäin harmonisella tavalla, ja rakensin myös muita, jotka seuraavat ja auttavat meitä luomaan oman identiteettimme. Halusin myös käyttää vain 2 kirjasinta ja muutamaa kirjasinkokoa, jotta se olisi yksinkertaisempaa.

Ensimmäinen harmaasävymalli Adobe Xd: ssä

Käyttelin tätä mallia myös kokeilla erilaisia ​​fonttiyhdistelmiä ja päädyin lopulta kahteen Heebo- ja Noto-monoon.

Kokeile värejä

Värien löytämiseksi kokeilin erilaisia ​​resursseja väripaletista:

  • www.colorlisa.com - Mestariteoksista purettu väripaletti
  • https://color.adobe.com/ - Adobe Colour CC, jossa on paljon paletteja, voit käyttää vain hakua ja kirjoittaa avainsanan
  • http://colorhunt.co - Värimyynti, samanlainen kuin edellinen, mutta trendikkäimmissä paleteissa
  • http://www.rehabcenter.marketing/tintui/index.html - Kuuluisin paletti, Materiaalisuunnittelu, Pantone, Twitter, Tasaiset käyttöliittymävärit

Pelasin heidän kanssaan, päädyin seuraaviin.

Kuusi eri väriyhdistelmää.

Keskustellesi mentorini Veran ja ryhmäni kanssa päätimme siirtyä Violettiin Snitcoon ja ehkä jatkaa punaisempaan vaihtoehtoon toisen tuotemerkin Sconférenciers kanssa.

Sen perusteella tein paletin ja lyhyen suunnitteluohjeen.

Logon luominen

Luodaksesi logon otin ensin paperin ja yritin leikkiä Snitcon kirjaimilla. Päätin myös sijoittaa pisteen Snitcon loppuun osana tuotemerkkiä, jotta se näyttäisi terävältä, täsmältä ja tyylikkäältä. Siksi pelasin myös “.”

Kyllä ... se on sotku

Sitten tein muutaman tietokoneella.

Jotkut logot vaihtoehdot, päädyimme valitsemaan aivan viimeisen

Päädyimme tähän keskusteluun ryhmän kanssa. Joka on tehty kahdesta S: n negatiivisen tilan kappaleesta, jotka pyöritetään ja siirretään, jotta se muodostuu kahdesta siipistä.

Tada  lopullinen logo

Lopullinen suunnittelu

Nyt minulla on värit ja logo, laitoin kaiken yhteen ja säädin välilyöntejä ja kokoja. Tässä on mitä lopulta päätin.

Loin myös kuvitukset jokaiselle pienelle kortille projektiidemme sisällön perusteella.

täytäntöönpano

Kun ryhmä ja mentorini vahvistivat suunnittelun, etsin parasta teknistä ratkaisua sen toteuttamiseen. Päätin valita Jekyllin, jolla on internalisaatiosisäosa, jotta se olisi ranskaksi ja englanniksi.

Erotin huolenaiheet: sisältö, html, tyyli, javascript tehdäkseen siitä mahdollisimman riippumattoman.

Lopullinen tulos

Tässä on lopputulos : http://snit.co

Voit vapaasti katsoa, ​​ja kaikki palaute on tervetullut!

Kuvakaappaus lopullisesta versiosta verkossa

Palaute tästä oppimiskuusta

Mikä meni hyvin

  • Lukeminen
  • Lukemisen soveltaminen
  • Suunnitteluprosessi
  • Yhteistyö tiimini kanssa identiteetin luomiseksi, joka sopii meille kaikille
  • Viestintä mentorin kanssa
  • Ajoitus - päättyi 25. heinäkuuta
  • Adobe Xd: n käyttö
  • Pyyhkäise tiedosto on uskomaton
  • Olen erittäin ylpeä tästä lopputuloksesta

Mitä parantaa

  • Aloitin tämän aiheen viimeistelyssään edellisen
  • Odotin hieman enemmän oppimista itse suunnittelusta kuin prosessista tai siitä, miten saada inspiraatiota
  • Ehkä olisin voinut oppia myös väriteoriasta tässä kuussa, mutta väriä koskeva kirja viei aikaa saapumiseen

Jos pidit tästä viestistä, napsauta napsauttamalla alla olevaa näppäintä -painiketta muutaman kerran näyttääksesi tuen! Voit myös kommentoida ja antaa kaikenlaista palautetta. Älä unohda seurata minua!

Haluatko nähdä lisää tämän tyyppisiä artikkeleita? Tue minua Patreonissa