Svoju prvu web stranicu stvorio sam kao školski projekt kad sam imao 14 godina. Zadatak je bio jednostavan: izraditi vrlo osnovno web mjesto, uključujući neki tekst, slike i tablicu. Moj uobičajeni stav prema školskim projektima bio je da ih potpuno zaboravim i kasnije smislim neko rješenje u zadnji trenutak. Ali, ovaj put sam poludio.
Od svojeg prvog web mjesta uvijek dajem prednost tome da stvari izgledaju dobro. Priznali ili ne, ljudi prosuđuju stvari na temelju izgleda. Ako ono što napravite izgleda dobro, kao da znate što radite, ljudi će mu više vjerovati. Takve stvari samo stoje.
Tijekom godina izrade sporednih projekata, sve sam se više fokusirao na razvoj svojih dizajnerskih vještina, a ne samo na usavršavanje programiranja. Vidite, to što ste algoritam za pisanje monstruma dovodi vas dotle. Dok slijedite san o pokretanju profitabilnog sporednog projekta, morat ćete raditi puno različitih poslova. Biti dizajner je jedno od njih. Baš kao i Cross-fit sportaši, i sami osnivači moraju biti dobro zaokruženi da bi dobro nastupili.
Vrhunski dizajn nije nužno onaj s najviše Dribbble glasova. To je onaj koji uopće nećete primijetiti. Savršena je ravnoteža između "to bi tvoja baka mogla" i "wow, to je vraški lijepo". Dizajn može biti vaša konkurentska prednost ili čavao u lijes.
Nije stvar u talentu
Kad sam bio mlađi, puno sam igrao Minecraft. Vidio sam sve te nevjerojatne zgrade koje su ljudi napravili. Ali kad sam nešto napravio, izgledalo je kao kutija. Ružno i bez stila. Kako uopće napraviti nešto lijepo u Minecraft-u, zar ne?
Dakle, pronašla sam tipa na YouTubeu i napravila točnu kopiju onoga što je napravio. Nekoliko tjedana kasnije razvio sam vlastiti stil i mogao sam graditi samostalno. Odjednom, moje kreacije nisu izgledale poput sranja. Dovraga, čak sam i pobijedio na natječaju za izgradnju.
Dizajn je vještina, i kao i svaka druga vještina, i na njoj se može naučiti.
Odabir pravog alata za posao
U programiranju možete koristiti Notepad i napisati aplikaciju koja je dobra kao da je napisana u potpuno razvijenom IDE-u ... premda bi vaš život možda bio prilično jadan i vjerojatno će potrajati znatno duže. U svijetu web dizajna, MS Paint preuzeo bi ulogu Notepada, a poput Notepada, malo ljudi zapravo odlučuje dizajnirati pomoću njega ... Nadam se.
Najpopularniji alati za dizajn weba su:
- Sketch, alat za MacOS, koji je, slično Reactu, čini se da je teško kodiran u svakom popisu poslova. 99 dolara godišnje.
- Adobe XD, besplatni alat za više platformi koji preuzima ulogu Vuea. Ima manju zajednicu, ali vrlo je lako započeti.
- Adobe Photoshop, švicarski nož za bilo koji dizajnerski zadatak koji svi znaju. Zauzeo je mjesto ... pogađate, jQuery. 9,99 USD mjesečno.
Gotovo da nema razlike koristite li Sublime ili VS kod za pisanje aplikacija. Ili koristite li React ili Vue za sučelje. Samo je stvar preferencija. Isto vrijedi i za alate za dizajn, jer svaki od njih ima svoje prednosti i nedostatke.
Koristim Adobe XD. Glavni razlog za mene je taj što je višeplatformanski, tako da ja nisam talac Apple ekosustava. Podržava ga i Adobe, pa će biti ovdje neko vrijeme. Najbolja stvar za novopridošlice je što je od svibnja 2018. Adobe XD besplatan za upotrebu s samo nekoliko ograničenja (na koja vjerojatno ionako nećete naletjeti).
Prilagođavanje vašeg razmišljanja
Najveći izazov koji mi je došao u svijet web dizajna bio je prilagoditi način razmišljanja. Navikao sam smišljati dizajn dok sam kodirao web stranicu. Sve je imalo red. Protok je bio slijeva udesno i od vrha do dna. Činjenica je da vas ovaj pristup čini lošijim dizajnerom.
Alati za dizajn su kaotični jer vas prisiljavaju na dizajn kao da je svaki element apsolutno postavljen. Prihvatite ovu promjenu. Pružit će vam slobodu da brzo mijenjate stvari i olakšava eksperimentiranje. I to je bitno, jer je dizajn stalan proces. Očekuje se da ćete puno mijenjati stvari prije nego što postignete izvrstan rezultat.
Učenje alata
Prilikom kodiranja koristite HTML elemente poput div-a, raspona i unosa i dopustite pregledniku da ih učini vizualnim. Pomoću alata za dizajn možete preskočiti posrednika i izravno koristiti vizualne elemente poput oblika i teksta.
Odabrao sam 4 najčešće korištena alata za dizajn kako biste mogli potrošiti manje vremena na učenje i više vremena na dizajniranje. Na taj način možete početi vježbati što je prije moguće. U nastavku ću vam pokazati kako rade i kako ih koristiti.
Alat za pravokutnik
Pravokutnici su najuniverzalniji oblik. Naći ćete se da ih stalno koristite. Shvatite to kao div. Korisna je za sve vrste stvari, od stvaranja unosa teksta do spremnika.
Alat za tekst (naljepnica)
Alat za tekst, kao što naslov sugerira, omogućuje vam stvaranje teksta. To ipak nije tako jednostavno, jer alat za tekst ima dva stanja: jedno za tekst u jednom retku i drugo za više odlomaka. Srećom, izuzetno ih je lako naučiti pravilno koristiti.
Prvo stanje je spremnik teksta u jednom retku koji prilagođava svoju veličinu na temelju veličine teksta. Sličan je a s iznimkom da se neće premotati ako ne napravite prijelom retka. Prednost ovog stanja je u tome što će automatski prilagoditi veličinu okvira za tekst na temelju visine retka i veličine fonta.
Da biste ga stvorili, jednostavno pritisnite odabrani alat Text i napišite i napišite. U pravilu koristite ovo stanje za sve što ne treba određenu širinu i predstavlja jednu liniju. Na primjer, jednoredni naslovi i oznake.
Alat za tekst (odlomak)
Drugo stanje je spremnik za tekst određene veličine koji se ponaša kao
s određenom širinom ili
unutar stupca mreže. Prednost ove države je u tome što možete kontrolirati veličinu okvira za tekst. Da biste stvorili odlomak, kliknite odabranim alatom za tekst i držite da biste stvorili odabir. U pravilu koristite ovo stanje za odlomke i naslove u više redaka.
Odaberite alat
Premjesti, promijeni veličinu, dupliciraj. Ovo je alat za to. Te ružičaste linije pokazuju vam udaljenost od okolnih elemenata. Plave crte pomažu vam da elemente pravilno poravnate.
Alat za liniju
Ponekad je linija zgodna kako bi se dijelovi dizajna odvojili. Zbog toga je ovdje alat za liniju. Umjesto toga, tehnički biste mogli koristiti alate za pravokutnike, ali hej, tako da se div može koristiti za bilo što.
Savjeti i tehnike za dizajn
Izgled
U web razvoju, izgled se najčešće opisuje kao zaglavlje, izbornik, sadržaj i podnožje. To je dio toga, ali izgled je više od toga. To je doslovno način na koji su postavljeni svi elementi.
Na primjer, kad sam dizajnirao informacije o projektu za Sidemail, ravnomjerno sam distribuirao elemente unutar kartice zbog čega se osjeća cjelovitije i izgleda čišće.
Boje
Da biste lakše pronašli savršenu boju za sljedeći projekt, imajte na umu psihologiju boja (colorpsychology.org). Korisni alat za pronalaženje savršene kombinacije boja na temelju vaše primarne boje je Paletton.
Koristite nijanse primarnih boja i boje teksta da biste stvorili vizualnu hijerarhiju. Pokušajte s tamnijim ili svijetlijim nijansama teksta kada koristite pozadinu u boji.
Tipografija
Pismo u velikoj mjeri utječe na brendiranje vašeg projekta, zato birajte pametno. Premium slova obično izgledaju bolje od onih na Google Fontovima, ali kad tek započinjete, nemojte ih kupiti. Čak i na Googleovim fontovima postoje neki skriveni dragulji.
Trik koji vrlo često koristim za vizualno razbijanje teksta je da naljepnice napravim velikim s velikim razmakom između slova. Veliki je tekst simetričan i s vizualnog stajališta izgleda dobro, ali nemojte ga pretjerati jer ga je puno teže čitati.
Dizajn početne stranice (ili odredišne stranice)
Uvijek pokušavam izbjeći napast dizajnirati trendovske elemente, a zatim u nju strpati svoju poruku. Umjesto toga, smislim prednosti (a ne značajke), stavim ih u priču i ispričam tu priču vizualno privlačnom stranicom.
Nakon što utvrdim što želim reći, obično potražim inspiraciju. Odličan resurs za to je land-book.com, ogroman direktorij sjajnih odredišnih stranica na kojima ljudi mogu glasati. Još jedna izvrsna stranica s dizajnerskom inspiracijom je interfaces.pro gdje možete filtrirati prema kategorijama poput cijena, 404 ili o nama. Samo pregledavam dok ne pronađem dovoljno web mjesta koja mi se sviđaju i podudaraju se sa mojim željenim stilom.
Najteži dio je sve to spojiti. Nažalost, nema prečaca. Jednostavno morate puno ponavljati dok ne dobijete rezultat s kojim ste zadovoljni.
Možda se zapitate je li normalno da se dizajn s kojim ste bili potpuno zadovoljni prije tjedan dana odjednom danas ne osjeća dovoljno dobro ili čak ružno. Odgovor je da je to sasvim normalno i zapravo dobro. To je u osnovi zato što rastete, učite i postajete bolji. Jučerašnji izazov danas nije toliko izazovan. Imajte ovo na umu kako ne biste zapeli u utrci štakora.
Za poneti:
- Jedinstvena vrsta slova čini veliku razliku
- Grafika je vrlo važna, pokušajte upotrijebiti barem neke ilustracije ili slike
- Iskoristite vizualnu važnost koristeći više nijansi boja. Tekst i osnovne boje nisu dovoljne.
- Nemojte koristiti preširoke posude - oko 1100 px dovoljno je široko
- Prihvatite negativni prostor
- Razgovarajte o prednostima, a ne o značajkama
- Potražite inspiraciju oko sebe ako zapnete
Dizajniranje web aplikacije (ili nadzorne ploče)
Kao i kod dizajniranja odredišne stranice, nemojte skakati ravno u dizajniranje. Ovaj put ne pokušavaš ispričati priču. Umjesto toga, cilj je jednostavnost upotrebe. Uzmite olovku i papir i napravite plan kako vaša aplikacija treba raditi, što treba ovisiti o čemu i kako se lako kretati.
Napravite neke skice ili žičane okvire ako je potrebno. Napravite odgovarajuću inspekciju dizajna konkurenta da biste se uvjerili što nedostaje i što se može učiniti bolje, ili možda čak pretvoriti u konkurentsku prednost. Ponekad je bolje napraviti pauzu prije izrade planova na papiru i dizajniranja.
Najbolji savjet koji mogu dati koji nije specifičan za slučaj je odabir pravilnog izgleda stranice. Općenito, sve web aplikacije koriste dva različita izgleda stranica ovisno o namjeni aplikacije: spremnik fiksne širine ili spremnik tekućine koji ispunjava cijeli zaslon.
Fiksni spremnik
Više volim fiksni spremnik, jer je puno lakše usredotočiti se na usko područje jer sprječava nepotrebno kretanje očima. Aplikacije s fiksnim spremnicima također imaju izgled čišćeg izgleda i manje prevladavajuće za nove korisnike. Međutim, zbog manje širine, aplikacije s fiksnim spremnicima teže je dizajnirati.
Primjeri: Twitter, Buffer, DigitalOcean, Netlify, GitHub
Spremnik za tekućinu
Aplikacije s tekućim spremnikom izvrsno se uklapaju u aplikacije za chat, aplikacije za proračunske tablice i druge aplikacije u kojima je potrebno više stvari na zaslonu. Ali imajte na umu da gomila podataka na zaslonu može postati neodoljiva.
Primjeri: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify
Važno je odabrati odgovarajući spremnik, jer će o tome ovisiti izgled cijele stranice, a promjena kasnije puno je posla. Svaki je projekt jedinstven i traži jedinstvena rješenja, zato se ne bojte eksperimentirati!
Za poneti:
- Neka bude jednostavno
- Upotrijebite čitljivi font
- Koristite vizualnu hijerarhiju kada prikazujete puno podataka
- Iskoristite loš izbor dizajnera konkurenta
Završavati
Zapamtite, dizajn vam može biti konkurentska prednost - zato ga upotrijebite i napravite nešto sjajno.
Započnite put dizajniranja nabavkom predloška Adobe XD koji sam izradio za odredišnu stranicu svog najnovijeg projekta. Jednostavno se pretplatite na moj potpuno novi popis e-pošte i on će stići u vaš poštanski sandučić.
Također ćete biti prvi koji ćete dobiti obavijest o mom sljedećem postu u kojem ću podijeliti 69 dana napretka postignutog na Sidemailu - SaaS projektu na kojem radim. Uključit će stvari poput broja pretplatnika, posjeta web mjestu, potrošnje i skica dizajna. Trebalo bi se podrazumijevati, ali garantiram apsolutno nikakvu neželjenu poštu. Nemam vremena ni za to sranje.
Moji su Twitter-ovi DM-ovi otvoreni, pa ako zapnete pri izradi svojih dizajna ili imate dodatnih pitanja, slobodno me udarite.