Kūrėjo vadovas, skirtas ne dizaineriams kurti interneto svetaines

Pirmą savo internetinę svetainę sukūriau būdamas 14 metų, kai mokiausi mokykloje. Užduotis buvo paprasta: sukurti labai paprastą svetainę, kurioje būtų tekstas, paveikslėliai ir lentelė. Mano įprastas požiūris į mokyklų projektus buvo visiškai juos pamiršti ir vėliau sugalvoti paskutinės minutės sprendimą. Bet šį kartą aš rinkausi riešutus.

Nuo pat savo pirmosios svetainės visada teikiau pirmenybę tam, kad viskas atrodytų gerai. Priimkite tai ar ne, žmonės vertina dalykus remdamiesi išvaizda. Jei tai, ką padarote, atrodo gerai, kaip žinote, ką darote, žmonės tuo labiau pasitikės. Taip viskas yra.

Bėgant metams, kurdamas šalutinius projektus, vis daugiau dėmesio skyriau savo projektavimo įgūdžių tobulinimui, o ne tik tobulinau savo programavimą. Matote, kad būdamas algoritmu rašote monstrum, jūs tai darote iki šiol. Siekdami svajonės sugrupuoti pelningą šalutinį projektą, turėsite atlikti daugybę skirtingų darbų. Būti dizaineriu yra vienas iš jų. Kaip ir „Cross-fit“ sportininkai, solo įkūrėjai turi būti gerai suapvalinti, kad gerai atliktų savo užduotis.

Puikus dizainas nebūtinai turi tą patį balsą. Tai yra tas, kurio visų pirma nepastebėsite. Tai puikus balansas tarp „tavo močiutė galėtų tai padaryti“ ir „oho, tai velniškai malonu“. Dizainas gali būti jūsų konkurencinis pranašumas arba vinis karste.

Kalbama ne apie talentą

Kai buvau jaunesnis, aš daug žaisdavau „Minecraft“. Mačiau visus šiuos nuostabius pastatus, kuriuos žmonės pastatė. Bet kai aš ką nors padariau, tai atrodė kaip dėžutė. Bjaurus ir be stiliaus. Kaip jūs netgi galite padaryti kažką gražaus „Minecraft“, tiesa?

Taigi „YouTube“ radau vaikiną ir pasistačiau tikslią jo pastatyto kopiją. Po kelių savaičių aš sukūriau savo stilių ir galėjau kurti savo jėgą. Staiga mano kūryba neatrodė kaip nesąmonė. Heck, aš netgi laimėjau statybų konkursą.

Dizainas yra įgūdis ir, kaip ir bet kuris kitas įgūdis, jo galima išmokti.

Tinkamo darbo pasirinkimas

Programuodami galite naudoti užrašų knygelę ir parašyti tokią programą, kuri būtų tokia gera, lyg ji būtų parašyta visiškai užpildytame IDE ... nors tai padaryti gali būti apgailėtinai, ir tai tikriausiai užtruks pastebimai ilgiau. Žiniatinklio dizaino pasaulyje „MS Paint“ imsis užrašų knygelės vaidmens ir, kaip ir užrašų knygelė, nedaugelis žmonių iš tikrųjų pasirenka kurti su ja ... Tikiuosi.

Populiariausi žiniatinklio projektavimo įrankiai yra šie:

  • „Sketch“, tik „MacOS“ įrankis, kuris, panašiai kaip „React“, atrodo sunkiai koduojamas kiekviename darbo sąraše. 99 USD per metus.
  • „Adobe XD“, laisvai naudojamas kelių platformų įrankis, atliekantis „Vue“ vaidmenį. Joje yra mažesnė bendruomenė, tačiau labai lengva pradėti.
  • „Adobe Photoshop“ - šveicariškas peilis, skirtas bet kokiai projektavimo užduočiai, visiems žinomai. Tai užtruko ... atspėjote, jQuery. 9,99 USD / mėn.

Beveik nėra skirtumo, ar programas rašote naudodami „Sublime“ ar „VS“ kodus. Arba ar naudojate „React“, ar „Vue“, naudodami priekinę juostą. Tai yra tik pirmenybės klausimas. Tas pats pasakytina apie projektavimo įrankius, nes kiekvienas turi savo privalumų ir trūkumų.

Aš naudoju „Adobe XD“. Pagrindinė priežastis man yra ta, kad ji yra įvairiose platformose, todėl nesu „Apple“ ekosistemos įkaitais. Jį taip pat palaiko „Adobe“, taigi jis kurį laiką bus čia. Geriausias dalykas naujokams yra tai, kad nuo 2018 m. Gegužės mėn. „Adobe XD“ yra nemokama naudoti tik su keletu apribojimų (kurių jūs vis tiek greičiausiai nesuklysite).

Koreguokite savo mąstyseną

Didžiausias iššūkis, ateinantis į interneto dizaino pasaulį, man buvo koreguoti savo mąstyseną. Aš buvau įpratęs sugalvoti dizainą, nes koduojau svetainę. Viskas turėjo užsakymą. Srautas buvo iš kairės į dešinę ir iš viršaus į apačią. Tiesą sakant, toks požiūris daro jus blogesniu dizaineriu.

Dizaino įrankiai yra chaotiški, nes verčia kurti taip, kaip visi elementai yra išdėstyti absoliučiai. Priimkite šį pakeitimą. Tai suteiks jums laisvę greitai pakeisti dalykus ir palengvins eksperimentavimą. Ir tai yra būtina, nes dizainas yra nuolatinis procesas. Tikimasi, kad prieš pasiekdami puikų rezultatą, daug ką pakeisite.

Priemonių mokymasis

Koduodami naudojate HTML elementus, tokius kaip dalybos, tarpai ir įvestys, ir leidžiate naršyklei paversti juos vizualiais. Naudodamiesi projektavimo įrankiais turite galią praleisti tarpininką ir tiesiogiai naudoti vaizdo elementus, tokius kaip figūros ir tekstas.

Aš pasirinkau 4 dažniausiai naudojamas projektavimo priemones, kad galėtumėte mažiau laiko praleisti mokydamiesi ir daugiau laiko kurdami. Tokiu būdu galite kuo greičiau pradėti mankštintis. Žemiau parodysiu, kaip jie veikia ir kaip jais naudotis.

Stačiakampio įrankis

Stačiakampiai yra universaliausia forma. Jūs pastebėsite, kad jomis naudojatės visą laiką. Pagalvokite apie tai kaip apie div. Tai naudinga visų rūšių medžiagai, pradedant teksto įvedimu ir baigiant konteineriais.

Teksto įrankis (etiketė)

Teksto įrankis, kaip rodo pavadinimas, leidžia kurti tekstą. Vis dėlto tai nėra taip paprasta, nes teksto įrankis turi dvi būsenas: vieną - vienos eilutės tekstui, kitą - kelioms pastraipoms. Laimei, juos labai lengva išmokti teisingai naudoti.

Pirmoji būsena yra vienos eilutės teksto talpykla, kuri koreguoja jos dydį pagal teksto dydį. Jis panašus į , išskyrus tai, kad jis nebus apvyniotas, jei nepadarysite linijos. Šios būsenos pranašumas yra tai, kad ji automatiškai pakoreguos teksto laukelio dydį pagal eilutės aukštį ir šrifto dydį.

Norėdami jį sukurti, tiesiog spustelėkite pasirinktu teksto įrankiu ir parašykite. Paprastai tariant, šią būseną naudokite viskam, kuriam nereikia konkretaus pločio ir yra viena eilutė. Pavyzdžiui, vienos eilutės antraštės ir etiketės.

Teksto įrankis (pastraipa)

Antroji būsena yra konkretaus dydžio teksto talpykla, kuri elgiasi kaip

su konkrečiu pločiu arba

tinklelio stulpelio viduje. Šios būsenos pranašumas yra tai, kad galite valdyti teksto laukelio dydį. Norėdami sukurti pastraipą, paspauskite pasirinktu teksto įrankiu ir palaikykite nuspaudę, kad sukurtumėte pasirinkimą. Paprastai, naudokite šią būseną pastraipoms ir antraštėms daugiau nei vienoje eilutėje.

Pasirinkite įrankį

Perkelkite, pakeiskite dydį, kopijuokite. Tai yra tam skirtas įrankis. Tos rausvos linijos parodo atstumą nuo aplinkinių elementų. Mėlynos linijos padeda jums elementus tinkamai suderinti.

Linijos įrankis

Kartais linija yra patogi, kad dizaino dalys būtų atskirtos. Štai kodėl čia yra eilutės įrankis. Vietoj to, jūs galėtumėte techniškai naudoti stačiakampio įrankius, bet ei, taigi div gali būti naudojamas bet kam.

Projektavimo patarimai ir metodai

Išdėstymas

Kuriant žiniatinklį, išdėstymas dažniausiai apibūdinamas kaip antraštė, meniu, turinys ir poraštė. Tai yra jo dalis, bet išdėstymas yra daugiau. Tai reiškia, kad visi elementai yra išdėstyti.

Pvz., Kurdamas „Sidemail“ projekto informaciją, kortelės viduje esančius elementus paskirstiau tolygiai, todėl ji jaučiasi išsamesnė ir atrodo švaresnė.

Spalvos

Norėdami padėti jums rasti geriausią jūsų kito projekto spalvą, atsižvelkite į spalvų psichologiją (colorpsychology.org). Naudingas įrankis norint rasti geriausią spalvų derinį pagal jūsų pagrindinę spalvą yra „Paletton“.

Norėdami sukurti vaizdinę hierarchiją, naudokite pagrindinių spalvų ir teksto spalvų atspalvius. Jei naudojate spalvotą foną, pabandykite tamsesnius ar šviesesnius savo teksto atspalvius.

Tipografija

„Typeface“ didelę įtaką daro jūsų projekto prekės ženklui, todėl rinkitės protingai. „Premium“ šriftas paprastai atrodo geriau nei „Google“ šriftuose, bet kai tik pradedate, nepirkite. Net „Google“ šriftuose yra keletas paslėptų brangakmenių.

Triukas, kurį labai dažnai naudoju vizualiai skaidydamas tekstą, yra padaryti etiketes didžiosiomis raidėmis su didesnėmis raidėmis. Didžiosios raidės yra simetriškos ir gerai atrodo vizualiai, tačiau nenaudokite jų per daug, nes jas sunkiau skaityti.

Pagrindinio puslapio (arba nukreipimo puslapio) kūrimas

Visada stengiuosi vengti pagundos kurti madingus elementus ir tada į jį įspraudžiu savo žinią. Aš veikiau sugalvoju pranašumus (o ne bruožus), susidedu į istoriją ir papasakoju tą istoriją vizualiai patraukliu puslapiu.

Nustatęs, ką noriu pasakyti, paprastai ieškau įkvėpimo. Puikus šaltinis tai yra land-book.com - didžiulis nuostabių nukreipimo puslapių, kuriuose žmonės gali balsuoti, katalogas. Kitas puikus puslapis, kuriame įkvepia dizainas, yra sąsajos.pro, kur galite filtruoti pagal tokias kategorijas kaip kainų nustatymas, 404 arba apie mus. Aš tiesiog naršau, kol randu pakankamai svetainių, kurios man patinka ir atitinka mano norimą stilių.

Sunki dalis yra visa tai sudėjus. Deja, nuorodos nėra. Jums tereikia daug kartoti, kol gausite rezultatą, kuriuo esate patenkinti.

Jums gali kilti klausimas, ar normalu, kad dizainas, kuriuo visiškai džiaugėtės prieš savaitę, šiandien staiga jaučiasi nepakankamai geras ar net bjaurus. Atsakymas yra visiškai normalus ir iš tikrųjų geras dalykas. Iš esmės todėl, kad jūs augate, mokotės ir tampate geresni. Vakar iššūkis šiandien nėra toks sudėtingas. Atminkite tai, kad neužstruktumėte lenktynėse su žiurkėmis.

Įeinantys:

  • Unikalus šriftas daro didžiulį skirtumą
  • Grafika yra labai svarbi, pabandykite naudoti bent keletą iliustracijų ar vaizdų
  • Tinkamai parodykite vizualinę reikšmę naudodami kelis spalvų atspalvius. Nepakanka teksto ir pagrindinių spalvų.
  • Nenaudokite konteinerių, kurie yra per platūs - maždaug 1100 pikselių yra pakankamai platūs
  • Apimkite neigiamą erdvę
  • Kalbame apie privalumus, o ne apie savybes
  • Jei užstrigote, apsižvalgykite

Žiniatinklio programos (arba informacijos suvestinės) kūrimas

Kaip ir kurdami nukreipimo puslapį, nesukite tiesiai į dizainą. Šį kartą nebandote papasakoti istorijos. Tikslas yra lengvumas. Paimkite rašiklį ir popierių ir sudarykite planą, kaip jūsų programa turėtų veikti, nuo ko turėtų priklausyti ir kaip lengvai naršyti.

Jei reikia, padarykite keletą eskizų ar vielos rėmų. Atlikite tinkamą konkurentų projekto patikrinimą, kad įsitikintumėte, ko trūksta ir ką galima padaryti geriau, arba galbūt net paversti konkurenciniu pranašumu. Kartais geriau atsipūsti prieš planuojant popierius ir kuriant.

Geriausias patarimas, kurį galiu pateikti atsižvelgiant ne į atvejus, yra pasirinkti tinkamą puslapio išdėstymą. Paprastai visose žiniatinklio programose naudojami du skirtingi puslapių išdėstymai, atsižvelgiant į programos paskirtį: fiksuoto pločio arba skysčio talpykla, kuri užpildo visą ekraną.

Fiksuotas konteineris

Man labiau patinka fiksuotas indas, nes daug lengviau sutelkti dėmesį į sandarią vietą, nes tai apsaugo nuo nereikalingo akių judėjimo. Fiksuotų konteinerių programos taip pat atrodo švaresnės ir mažiau patrauklios naujiems vartotojams. Tačiau dėl mažesnio pločio fiksuotų konteinerių programas yra sunkiau suprojektuoti.

Pavyzdžiai: „Twitter“, „Buffer“, „DigitalOcean“, „Netlify“, „GitHub“

Skysčio indas

Skystųjų indų programos puikiai tinka pokalbių programoms, skaičiuoklių programoms ir kitoms programoms, kur būtina daugiau informacijos ekrane. Tačiau atminkite, kad daugybė duomenų ekrane gali tapti didžiulė.

Pavyzdžiai: „Slack“, „Intercom“, „Hotjar“, „Google Sheets“, „Trello“, „Spotify“

Svarbu pasirinkti tinkamą sudėtinį rodinį, nes nuo jo priklausys visas puslapio išdėstymas, o vėliau jį pakeisti reikės daug darbo. Kiekvienas projektas yra unikalus ir reikalauja unikalių sprendimų, todėl nebijokite eksperimentuoti!

Įeinantys:

  • Daryk paprastai
  • Naudokite skaitomą šriftą
  • Rodydami daug duomenų, naudokite vaizdinę hierarchiją
  • Pasinaudokite prastu konkurentų dizaino pasirinkimu

Apvyniojimas

Atminkite, kad dizainas gali būti jūsų konkurencinis pranašumas - todėl pasinaudokite juo ir padarykite ką nors nuostabaus.

Pradėkite savo projektavimo kelionę įsigydami „Adobe XD“ šabloną, kurį sukūriau savo naujausio projekto nukreipimo puslapyje. Tiesiog užsiprenumeruokite mano visiškai naują el. Pašto sąrašą ir jis atsidurs jūsų pašto dėžutėje.

Be to, būsite pirmasis, kuris gaus pranešimą apie kitą mano įrašą, kuriame pasidalinsiu 69 dienų pažanga, kurią padariau dirbdamas su „Sidemail“ - „SaaS“ projektu, kuriame dirbu. Tai apims tokius dalykus kaip abonentų skaičius, apsilankymai svetainėse, išlaidos ir dizaino juodraščiai. Tai turėtų būti savaime suprantama, tačiau aš garantuoju, kad nėra jokio šlamšto. Aš net neturiu laiko tam šūdui.

Mano „Twitter“ DM yra atviri, todėl, jei įstrigote kurdami savo dizainą ar turite papildomų klausimų, nedvejodami spauskite mane.