Kako sam naučio ukrasti umjetnika za mjesec dana i dizajnirao i izgradio web stranicu moje nove tvrtke

# 4 - Četvrti mjesec mog izazova: 12 tema koje ću naučiti u 12 mjeseci

Slika koju sam snimio u Malagi (Španjolska), gradu Picasso, to je vrlo lijepa slika za inspiraciju boja

Možda se pitate zašto sam ovaj članak nazvao „Kako sam naučio krasti poput umjetnika“, zapravo nisam naučio krasti, jer to već znam .. samo se šalim he. U stvari, ovaj naslov dolazi iz knjige Ukrasti kao umjetnik - Austin Kleon koju mi ​​je mentor preporučio da pročitam.

"Umjetnost je krađa." - Pablo Picasso

Ono što sam u početku željela naučiti ovaj mjesec bile su teorije dizajna i nakon razgovora s mentorom rekla mi je da naučim o značenju boja ili tipografiji. Budući da sam htjela započeti nešto općenitije, rekla mi je o ovoj knjizi koja vas na zabavan način uči kako pronaći inspiraciju, kako zadržati motivaciju, kakav je dobar dizajnerski tijek rada i kako dalje biti kreativan i produktivan. Kao što možete zamisliti, zadržat ću teorije boja i tipografiju još jedan mjesec za učenje!

Nikada zapravo nisam studirao sam dizajn, smatram se dizajnerom i programerom jer sam naučio vježbajući i to je glavni razlog što želim znati više o teorijama. Možda imam sindrom impoztera i ovaj mjesec učenja je tu da ga zaustavi!

Izazov sam započeo 6. srpnja, ako pročitate prethodni post Learning Lab Challenge gdje je izgrađena moja prva progresivna web aplikacija, možete vidjeti da sam je završio 13. srpnja. Da, radila sam malo i između tih datuma, i to je loše. To je uglavnom zato što sam se obavezao na pružanje web stranice naše nove tvrtke .

priprema

  1. Pronalaženje mentora
    Izabrala sam Veru za svoju mentoricu. Bila je moja kolegica u mom prethodnom društvu i jako je talentirana.
  2. Definiranje opsega teme
    Kao što je opisano u nastavku, ograničit ću domet ove teme na tijek rada na dizajnu i kako pronaći inspiraciju.
  3. Odabir resursa za učenje
    Moj glavni izvor učenja bit će ova knjiga: Ukradi poput umjetnika - Austin Kleon.
  4. Definiranje projekta
    Kako sam tek osnovao novu tvrtku koja će raditi kao web agencija, prvo ću dizajnirati, a zatim izgraditi i njezinu web stranicu. Nadalje, želio bih stvoriti popis za web dizajn koji bih mogao koristiti u svim svojim projektima.

Tečaj / čitanje

Ukrasti poput umjetnika iz Austina Kleona vrlo je kratka i jednostavna knjiga za čitanje. Vrlo je smiješno. Knjiga je prepuna ilustracija i crteža što čitanje čini vrlo zanimljivim. Svako poglavlje opisuje savjet ili koncept koji ćete primijeniti u svom životu ili radu.

Svaki od ovih savjeta bio je ili o dizajnu tijeka rada, o dizajnerskim hackama ili o životu. Primio sam na znanje i pokušao primijeniti najviše dragocjenosti za sebe i bilo je cool vidjeti da već primjenjujem neke druge.

Dizajn tijek rada

Austin Kleon nije opisao sam dizajnerski tijek rada, već samo skup savjeta koje sam sastavio kao "savjete za uključivanje u moj dizajnerski tijek rada"

Prvi i najbolji savjet koji ova knjiga donosi je pomicanje datoteke.
To je u osnovi zbirka umjetnosti, web stranice, glazba, fotografije, ulična umjetnost, bilo što zbog čega nešto osjećate, sve što vam se sviđa ili nešto što kasnije možete koristiti kao inspiraciju. Kolekcija može biti fizička, u bilježnici ili digitalnoj, na primjer u Pinterestu, Google Keepu, Google disku, Evernoteu ...
Svaki put kada trebate pokrenuti projekt tada možete otići do ove prelazne datoteke i odabrati resurse koji će vas potaknuti, i to je razlog zašto je naziva zamahom. Pomalo nalik tinderu .

Ovaj bih zadržao u svojoj datoteci za prstom, najbolju sliku ikad

Drugi najvažniji savjet je kopirati i učiti kopiranjem. Moram naglasiti da ne biste trebali razmišljati o dosadnoj kopiji bez razmišljanja, što se naziva plagijarizmom, već „obrnuti inženjering“ dizajna, tražiti smisao koji stoji iza njega i obnoviti ga pod vlastitim razumijevanjem. Štoviše, kažu da je kopija iz jednog plagijat, kopiranje iz mnogih izvora je istraživanje. Što je vrlo pozitivan način da se stvari vide. To je nešto što zvuči očito, ali zanimljivo je znati i to učiniti svjesno.

Slika pronađena u

Posljednji najvažniji savjet o dizajnu tijeka rada je da se držite podalje od zaslona i da zadržite tehnologije za konačnu verziju svog dizajna. Bolje je koristiti prave alate, poput papira, i koristiti svoje tijelo za kreativni dio posla. Osjećate da zaista stvarate i izrađujete. To je također nešto što uvijek radim u svom dizajnu.

Dizajnerski hakovi

Ono što sam odabrao kao dizajnerske hakove su savjeti koji će vam pomoći da napravite bolji dizajn, ali nisu dio vašeg dizajnerskog tijeka rada, ne morate ih raditi svaki put kada imate novi dizajnerski projekt.

Svaki umjetnik prati pokrete i neke influencere, svaki umjetnik ima mentora ili čak mentora. Oni nekako pokušavaju oponašati, kopirati i biti dobri kao drugi umjetnik koji utječe na njih. To je nešto što je oduvijek bilo, i primjenjivo je na sve umjetnike. Zašto ne bi tebi? Zbog toga knjiga predlaže da pronađete 3 umjetnika koje volite i pretražite sve o njima. To mogu biti slikari, dizajneri, poduzetnici, glazbenici, čak i proizvođači aplikacija! I ako je moguće možete pronaći i koji su njihovi utjecaji i izgraditi veliko „genealoško stablo“ influencera. Radeći to nećete znati samo sve o svojim utjecajima, već i o njihovim i stvarno ćete nadograditi svoje vještine. Na primjer, u mom slučaju imam svoje omiljene aplikacije koje često provjeravam kako rade: Airbnb, Trainline, Google,…

Nezreli pjesnici oponašaju; zreli pjesnici kradu; loši pjesnici pretvaraju ono što uzimaju, a dobri pjesnici čine to nečim boljim ili barem nečim drugačijim. Dobri pjesnik svoju krađu spaja u cjelinu osjećaja koji je jedinstven i krajnje različit od onog iz kojeg je razorena; loš pjesnik baca to u nešto što nema kohezije. Dobar pjesnik obično će pozajmljivati ​​od autora udaljenih u vremenu, ili stranca u jeziku, ili različitih zanimanja. - T.S. Eliot

Još jedan savjet koji knjiga sugerira je da počnete proizvoditi stvari koje volite, stvarati i, ako je moguće, svakodnevno. Također, iskoristiti činjenicu da ste nepoznati, da ste početnik, nitko vam neće suditi, možete propasti. Poboljšajte sebe i uvijek dijelite ono što proizvodite. To je nešto što pokušavam, ali nije lako to raditi svakodnevno. Zato autor predlaže da zadržite kalendar s 365 potvrdnih okvira koji svakodnevno provjeravate ako nešto proizvedete, to je lijep trik!

Na kraju, on daje vrlo pametan hack: stvorite datoteku koja sadrži sve dobre povratne informacije koje ste dobili. Ako jednog dana trebate motivaciju samo pročitajte, to će dati poticaj !

Životni dizajn

Ova knjiga također sadrži mnogo preoblikovanja života, kako unaprijediti sebe i svoj život da biste ostali zdravi i zadržali dobro djelo! Neki od njih zvuče vrlo osnovno i očito, ali primijetio sam 2 koja su prilično zanimljiva.

Ostanite okruženi talentom, jer prema Jimu Rohnu kaže: "Uvijek ste prosjek od 5 ljudi s kojima provodite najviše vremena." Dakle, vaša plaća, razina, produktivnost, prosjek je ovih 5. To je vrlo moćna izjava, pa ovisno o tome što želite pronaći odgovarajuće ljude za rad, a ne razmišljati samo o fizičkoj blizini, to može raditi i na daljinu.

Svakodnevno se prijavite u bilježnicu (ili virtualnu) i odgovorite na ovo pitanje: Što je najbolje što se danas dogodilo? pomoći će vam da se sjetite onoga što ste radili svakodnevno, a također će vam pomoći da se fokusirate na najbolje stvari kako biste zadržali pozitivnost i motivaciju.

Kako sam stvorio svoju pokretnu datoteku

Od svih savjeta koje daje ova knjiga pronašao sam „kopiraj tijek rada“ tako što sam stvorio prelaznu datoteku i koristio je svaki put kad vam zatreba najzanimljivije (a također uzimam različite dijelove različitih projekata i shvatite zašto).

Zbog toga ću opisati kako sam stvorio svoju pokretnu datoteku:

  1. Stvorio sam bilježnicu u Evernoteu pod nazivom Inspiration
  2. Otkad sam pokrenuo projekt internetske stranice svoje web agencije, ušao sam u različite izvore kako bih popunio ovu prelaznu datoteku (Dribbble, Awwwards, Google pretraživanje)
  3. Pretražio sam tamo ključne riječi "agencija", "portfelj", "minimalistička agencija" (minimalistička jer volim minimalističke web stranice)
  4. Svaki put kad sam pronašao dizajn koji mi se svidio, dodavao sam ga Evernoteu kopiranjem ili lijepljenjem Evernote Clipper ekstenzije. Zatim sam dodao oznake da znam zašto sam to dodao u prstom za prstom, na primjer: Agencija, Web, Mobilni uređaji, Boje, Gradient, Animacije, Tipografija
  5. Nastavio sam i dodavati svoje omiljene web stranice s dobrim dizajnom poput Airbnb, Spotify, Apple Music.
  6. Za kraj samo moram imati na umu da ću svaki put kad nađem nešto lijepo, a ne zaboraviti na njega, staviti u Evernote, ili fotografirati i staviti tamo.
  7. Sada se moja Swipe datoteka otvara svaki put kada pokrenem novi projekt i mogu ga koristiti ili ponoviti one prethodne korake kako bih ga popunio prije upotrebe. Štoviše, imam neke fotografije iz muzeja na google fotografijama koje sam snimio prije nego što imam ovu maknuću datoteku, pretragu također mogu koristiti kao inspiraciju.

Ako nemate prelaznu datoteku, svakako vam preporučujem da je kreirate čim pokrenete novi projekt.

Pogledajmo sada kako poboljšati tijek rada web dizajna pomoću ove prelazne datoteke.

Popis dizajna

Načinio sam ovaj popis za dizajn web stranica na temelju onoga što obično radim, još nekih istraživanja, onoga što sam naučio iz ove knjige, kao i projekta web stranice svoje tvrtke. Pokušao sam to učiniti što općenitijim.

  • Odredite arhitekturu informacija vaše aplikacije / web stranice (čisti sadržaj)
  • Sakupljajte inspiraciju (Dribbble, Awwwards i omiljena mjesta)
  • Pređite prstom da biste ušli u uži izbor od najboljih 7
  • Dizajn žičara (na papiru)
  • Prikupite povratne informacije
  • Dizajnirajte web mjesto u sivim tonovima (možete koristiti svoj omiljeni alat za dizajn)
  • Prikupite povratne informacije
  • Odaberite 2 slova
  • Dizajnirajte logotip
  • Odredite paletu boja (trebala bi odgovarati logotipu)
  • Poboljšajte svoj dizajn primjenom fontova, boja i logotipa
  • Prikupite povratne informacije
  • Odredite animacije za implementaciju (možete ih dizajnirati ako su složene pomoću softvera. Inače ih samo imajte na umu ili ih nacrtajte na papiru)

Možete ga pronaći i u njegovoj najnovijoj verziji u mom GitHub skladištu: https://github.com/sandoche/Webdesign-checklist

Razlog zašto sam se prvo odlučio dizajnirati u sivim tonovima je da se više fokusiram na razmak i na sam izgled, umjesto da isprobavam boje, više o tome pročitajte ovdje: https://medium.springboard.com/a-designers-guide- do odabira-boje-za-vaš-proizvod-9944756838d4

Redificiraj moj portfelj

Moja nova tvrtka sastojat će se od dvije marke: agencije koja se zove Snitco, i organizacije koja se organizira, pod nazivom Sconférenciers. I odlučili smo započeti s markom Snitco. Ovdje ću se usredotočiti.

Naš brand Snitco pružit će različite usluge iz 3 kategorije: radionice kreativnosti, komunikacije, razvoj i dizajn.

Nemamo ništa izgrađeno, pa krećemo od 0!

Definiranje sadržaja

Prvo smo započeli definirati sadržaj na hijerahijski način. Uvijek to radim sada kad kreiram novu aplikaciju ili web stranicu.

Evo kako je to izgledalo: https://github.com/sandoche/Snitco-information-architecture-example (oprosti što sam uradio svoju arhitekturu na francuskom )

Na kraju se arhitektura razvija i vi je mijenjate kako biste je savršeno uklopili s dizajnom.

Ali u osnovi je to bilo 5 odjeljaka: zaglavlje s jedinstvenom vrijednošću prijedloga, projekti, usluge, tim i konačno podnožje.

Populariranje prstom za odabir i odabir inspiracije

Sljedeći korak je popuniti moju datoteku prelaska s Evernote pomoću ključnih riječi Agencija, Web, Mobile, Colour, Gradient, Animations, Typography, uglavnom pomoću Dribbble i Awwwards.

Evo kako moja zamazna datoteka izgleda u Evernoteu

Jednom kad sam osjetio da sam prikupio dovoljno podataka, napravio sam sljedeći uži izbor:

  • https://dribbble.com/shots/3272390-HBK-Creative-Agency
  • https://dribbble.com/shots/3638273-Creative-Design-Agency-Website/attachments/812598
  • https://appico.com/ (animacije, minimalizam)
  • https://bitesizeinc.com/home (animacije, oblici)
  • https://www.spotify.com/fr/ (boje, tipografija)
  • http://wearecocoon.co.uk/ (minimalistički)
  • http://www.size.agency/ (jednostavan sadržaj)
  • http://www.revstudio.pl/ (minimalistički, jednostavno)
  • https://www.packwire.com/ (animacije, boje)
  • https://revolut.com/ (jednostavno, tipografija)

S tog popisa zamolio sam svoj tim da glasa za njihovog favorita (koji su podebljani) i recite mi zašto. Te sam podatke iskoristio kako bih koristio ono što dobro funkcionira u različitim dizajnovima i izgradio crtež u sivim tonovima.

Skica sive boje

Za izradu maketa koristim Adobe Xd (beta), koji je besplatan. Zaista sam se trudio da to bude minimalistički, ali također sam pokušao definirati neke animacije kako bi imao "efekt wow" kako je ostatak tima želio.

Dakle različite elemente uzeo sam iz prethodnog užeg dizajna:

  • veliko zaglavlje s prijedlogom jedinstvene vrijednosti podebljano
  • ravna pozadina
  • bijeli razmaci u drugom dijelu s karticama za opis svakog projekta
  • popis usluga prikazan vrlo jednostavno, vrlo jasno
  • neke pojavne animacije
  • puše srce

Pokušao sam kombinirati sve te različite elemente na vrlo skladan način, plus izgradio sam i druge koji nam pomažu u stvaranju vlastitog identiteta. Također sam htio koristiti samo 2 fonta i nekoliko veličina slova kako bih ga pojednostavio.

Prvi maket u sivim tonovima u Adobe Xd

Također sam koristio ovaj model za isprobavanje različitih kombinacija fontova i na kraju sam s dva Heebo i Noto mono.

Isprobavanje boja

Da bih pronašao boje isprobao sam različite resurse za paletu boja:

  • www.colorlisa.com - Paleta boja izvađena iz remek djela
  • https://color.adobe.com/ - Adobe color CC, s puno palete možete jednostavno koristiti pretraživanje i upisati ključnu riječ
  • http://colorhunt.co - Lov u boji, sličan prethodnom, ali s više trendi paleta
  • http://www.rehabcenter.marketing/tintui/index.html - Najpoznatija paleta, Dizajn materijala, Pantone, Twitter, Ravne UI boje

Igrao sam se s njima, završio sam sa sljedećim.

Šest kombinacija različitih boja.

Nakon razgovora s mojom mentoricom Verom i mojim timom, odlučili smo otići na Violet jedan za Snitco i možda ići na crveniji za drugi brend Sconférenciers.

Od toga sam napravio paletu i kratku smjernicu dizajna.

Izrada logotipa

Da bih stvorio logotip prvo sam uzeo papir i pokušao se poigrati s Snitcovim slovima. Također sam odlučio staviti točku na kraj „Snitco.“ Kao dio marke kako bi izgledao oštar, precizan i elegantan. Zato sam se i poigrao sa "."

Da ... nered je

Zatim sam nekoliko napravio s računalom.

Neke alternative logotipa, završili smo s odabirom posljednjeg

Završili smo s ovim nakon što smo razgovarali s timom. Koji je sastavljen od dva komada negativnog prostora koji ste pronašli u "S" zakrenut je i pomaknut da bi ga napravio kao dva krila.

Tada  završni logo

Konačni dizajn

Sad imam boje i logotip, sve sam sastavio i prilagodio prostore i veličine, evo na kraju sam završio.

Također sam stvorio ilustracije na temelju sadržaja naših projekata za svaku malu karticu.

izvršenje

Jednom kada je tim potvrdio dizajn i moj mentor, tražio sam najbolje tehničko rješenje za njegovu implementaciju. Odlučio sam odabrati Jekyll s dodatkom za internalizaciju kako bi ga imao na francuskom i engleskom jeziku.

Odvojila sam brige: sadržaj, html, stil, javascript kako bi bila što nezavisnija.

Konačni rezultat

Evo konačnog rezultata : http://snit.co

Slobodno pogledajte, a sve povratne informacije su dobrodošle!

Snimka zaslona finalne verzije na mreži

Povratne informacije iz ovog mjeseca učenja

Što je dobro prošlo

  • Čitanje
  • Primjena čitanja
  • Proces dizajna
  • Suradnja s mojim timom u izradi identiteta koji svima nama odgovara
  • Komunikacija s mentorom
  • Vremenski raspored - završio je 25. srpnja
  • Upotreba Adobe Xd
  • Prelazna datoteka je nevjerojatna
  • Jako sam ponosan na ovaj konačni rezultat

Što poboljšati

  • Ja sam započeo ovu temu dok sam završio prethodnu
  • Očekivao sam da će malo više naučiti o samom dizajnu, a ne o procesu ili kako do inspiracije
  • Možda sam mogao naučiti i o teoriji boja ovaj mjesec, ali knjizi o boji trebalo je vremena da stigne

Ako vam se svidio ovaj post, kliknite nekoliko puta pljeskajući gumb ispod da biste pokazali svoju podršku! Također, slobodno komentirajte i dajte bilo kakve povratne informacije. Ne zaboravite da me pratite!

Želite li vidjeti više ovakvih članaka? Podrži me na Patreonu