Fejlesztői útmutató a nem dizájnerek webtervezéséhez

Az első weboldalamat 14 éves koromban iskolai projektként hoztam létre. A feladat egyszerű volt: hozzon létre egy nagyon egyszerű weboldalt, amely tartalmaz szöveget, képeket és táblázatot. Az iskolai projektekhez való szokásos hozzáállásom az volt, hogy teljesen megfeledkeztem róluk, és később valami utolsó pillanatban előálltam valamilyen megoldással. De ezúttal dióba estem.

Az első weboldalam óta mindig azt állítottam előtérbe, hogy a dolgok jól nézzenek ki. Elismeri vagy sem, az emberek a külsőségek alapján ítélik meg a dolgokat. Ha az általad készített jól néz ki, mintha tudnád, mit csinálsz, az emberek jobban bíznak benne. Csak így vannak a dolgok.

A mellékprojektek készítésének évei során egyre inkább a tervezési készségem fejlesztésére helyeztem a hangsúlyt, nem csak a programozás tökéletesítésére. Látja, hogy a monstrumot író algoritmus lévén eddig csak eljut. Miközben a jövedelmező mellékprojekt elindításának álmát követi, nagyon sokféle munkát kell végeznie. Tervezőnek lenni az egyik. Csakúgy, mint a Cross-fit sportolók, a szólóalapítókat is jól fel kell szerelni ahhoz, hogy jól teljesítsenek.

A kiváló dizájn nem feltétlenül az, amelyik a legtöbb Dribbble pozitív szavazattal rendelkezik. Először nem veszi észre. Tökéletes egyensúlya annak, hogy „a nagymamád meg tudná csinálni” és a „hú, ez baromi szép”. A design lehet az Ön versenyelőnye vagy a szög a koporsóban.

Nem a tehetségről van szó

Fiatalabb koromban rengeteg Minecraftot játszottam. Láttam ezeket a félelmetes épületeket, amelyeket az emberek készítettek. De amikor készítettem valamit, úgy nézett ki, mint egy doboz. Csúnya és stílus nélkül. Hogyan is készíthet valami szépet a Minecraftban, igaz?

Szóval találtam egy srácot a YouTube-on, és elkészítettem annak pontos példányát. Néhány héttel később kidolgoztam a saját stílusomat, és egyedül is építhettem. Hirtelen az alkotásaim nem tűntek baromságnak. A fenébe is, még egy építési versenyt is megnyertem.

A tervezés készség, és mint bármely más készség, ez is megtanulható.

A munkához megfelelő eszköz kiválasztása

A programozás során használhatja a Jegyzettömböt, és írhat egy olyan alkalmazást, amely olyan teljes, mintha egy teljes IDE-ben írták volna ... bár az életed meglehetősen nyomorúságos lehet, és valószínűleg észrevehetően tovább fog tartani. A webdesign világában az MS Paint a Notepad szerepét töltené be, és a Notepad-hoz hasonlóan csak kevesen döntenek úgy, hogy ezzel terveznek ... remélem.

A legnépszerűbb webes tervezőeszközök a következők:

  • A Sketch, a MacOS egyetlen olyan eszköze, amely a React-hez hasonlóan úgy tűnik, hogy minden munkakönyvben keményen kódolt. 99 USD / év.
  • Adobe XD, egy ingyenesen használható, több platformon működő eszköz, amely a Vue szerepét tölti be. Kisebb közösséggel rendelkezik, de nagyon könnyű elindulni.
  • Adobe Photoshop, a svájci kés bármely, mindenki által ismert tervezési feladatra. Ezt vették észre ... kitalálta, jQuery. 9,99 USD / hó.

Szinte nincs különbség, hogy Sublime vagy VS kódot használ-e az alkalmazások írásához. Vagy akár a Reactot, akár a Vue-t használja a kezelőfelülethez. Ez csak preferencia kérdése. Ugyanez vonatkozik a tervezőeszközökre is, mivel mindegyiknek megvannak a maga előnyei és hátrányai.

Adobe XD-t használok. A fő ok számomra az, hogy platformokon átívelő, ezért nem tartok túszul az Apple ökoszisztémája. Az Adobe is támogatja, így egy darabig itt lesz. A legjobb dolog az újonnan érkezők számára az, hogy 2018 májusa óta az Adobe XD csak néhány korlátozással szabadon használható (amibe valószínűleg nem fog belebotlani).

A gondolkodásmód beállítása

A legnagyobb kihívás a webdesign világban számomra a gondolkodásmód megváltoztatása volt. Már megszoktam, hogy előállok a dizájnnal, amikor kódoltam a weboldalt. Mindennek rendje volt. Az áramlás balról jobbra és felülről lefelé zajlott. Tény, hogy ez a megközelítés rosszabb tervezővé tesz.

A tervezőeszközök kaotikusak, mert arra kényszerítenek, hogy úgy tervezzenek, mint minden elem abszolút helyzetben. Ölelje be ezt a változást. Megadja a szabadságot a dolgok gyors megváltoztatására, és megkönnyíti a kísérletezést. És ez elengedhetetlen, mert a tervezés folyamatos folyamat. Várhatóan sokat változtat a dolgokon, mielőtt nagyszerű eredményt ér el.

Az eszközök megtanulása

Kódoláskor HTML elemeket, például div-eket, spanokat és bemeneteket használ, és hagyja, hogy a böngésző valami látványossá tegye őket. A tervezőeszközök segítségével lehetősége van kihagyni a közvetítőt, és vizuális elemeket, például formákat és szöveget közvetlenül használni.

Kiválasztottam a 4 leggyakrabban használt tervezési eszközt, így kevesebb időt tölthet el a tanulással és több időt fordíthat a tervezésre. Így a lehető leghamarabb elkezdheti a gyakorlást. Az alábbiakban megmutatom, hogyan működnek és hogyan kell használni őket.

Téglalap eszköz

A téglalapok a leguniverzálisabb alakok. Rájön, hogy folyamatosan használja őket. Gondolj rá, mint div. Hasznos mindenféle dolog számára, a szövegbevitel létrehozásától a tárolókig.

Szöveg eszköz (címke)

A szöveg eszköz, amint azt a cím is sugallja, lehetővé teszi szöveg létrehozását. Ez azért nem ilyen egyszerű, mert a szöveges eszköznek két állapota van: az egyik az egysoros szöveghez, a másik pedig a több bekezdéshez. Szerencsére rendkívül könnyű megtanulni a helyes használatukat.

Az első állapot egy egysoros szövegtároló, amely méretét a szövegméret alapján állítja be. Hasonlít a-hoz, azzal a kivétellel, hogy nem borul be, csak ha sortörést hajt végre. Ennek az állapotnak az az előnye, hogy automatikusan beállítja a szövegdoboz méretét a vonal magassága és a betűméret alapján.

A létrehozásához egyszerűen kattintson a kiválasztott Szöveg eszközre, és írjon. Alapszabályként használja ezt az állapotot minden olyan dologhoz, amelyhez nincs szükség meghatározott szélességre, és egyetlen vonal. Például egysoros címsorok és címkék.

Szöveges eszköz (bekezdés)

A második állapot egy meghatározott méretű szövegtartály, amely úgy viselkedik, mint egy

meghatározott szélességgel vagy

rácsoszlopon belül. Ennek az állapotnak az az előnye, hogy szabályozhatja a szövegdoboz méretét. Bekezdés létrehozásához kattintson a kijelölt szövegeszközzel, és tartsa lenyomva a kijelölés létrehozásához. Alapszabályként használja ezt az állapotot egynél több sorban lévő bekezdésekhez és címsorokhoz.

Eszköz kiválasztása

Áthelyezés, átméretezés, másolat készítése. Ez ennek az eszköze. Ezek a rózsaszín vonalak megmutatják a távolságot a környező elemektől. A kék vonalak segítenek az elemek megfelelő igazításában.

Vonal eszköz

Előfordul, hogy egy vonal hasznos, ha a dizájn egyes részeit elkülönítik. Ezért van itt a vonalas eszköz. Használhatna technikailag téglalap eszközöket, de hé, így a div bármire használható.

Tervezési tippek és technikák

Elrendezés

A webfejlesztés során az elrendezést leggyakrabban fejlécnek, menünek, tartalomnak és láblécnek nevezik. Ez része annak, de az elrendezés ennél több. Szó szerint az összes elem elrendezése.

Például, amikor a Sidemail projektinformációit terveztem, a kártya belsejében egyenletesen elosztottam az elemeket, ami teljesebbnek és tisztábbnak tűnik.

Színek

Annak érdekében, hogy megtalálja a következő szín tökéletes színét, vegye figyelembe a színek pszichológiáját (colorpsychology.org). A Paletton hasznos eszköz a tökéletes színkombináció megtalálásához az elsődleges szín alapján.

Vizuális hierarchia létrehozásához használja az elsődleges színek árnyalatait és a szövegszíneket. Színes háttér használata esetén próbáljon sötétebb vagy világosabb árnyalatokat használni a szöveghez.

Tipográfia

A betűkép nagyban befolyásolja a projekt márkanevét, ezért okosan válasszon. A prémium betűképek általában jobban néznek ki, mint a Google Fonts-on, de amikor még csak kezdi, ne vásároljon ilyet. Még a Google Fonts-on is vannak rejtett drágakövek.

Az a trükk, amelyet nagyon gyakran használok a szöveg vizuális szétbontására, hogy a címkéket nagybetűvé tesszük nagyobb betűközzel. A nagybetűs szöveg szimmetrikus és jól néz ki vizuális szempontból, de ne használja túlzottan, mert sokkal nehezebb elolvasni.

Kezdőlap (vagy céloldal) megtervezése

Mindig megpróbálom elkerülni a kísértést, hogy trendi elemeket tervezzek, majd belezsúfolom az üzenetemet. Inkább kitalálok előnyöket (nem jellemzőket), beillesztem őket egy történetbe, és ezt a történetet egy vizuálisan vonzó oldalon elmondom.

Miután megállapítottam, mit akarok mondani, általában keresek némi inspirációt. Nagyszerű erőforrás erre a land-book.com, egy hatalmas könyvtár nagyszerű megjelenésű oldalakról, amelyeken az emberek szavazhatnak. Egy másik remek oldal, amely inspirálta a tervezést, az interfaces.pro, ahol olyan kategóriák szerint szűrhet, mint az árképzés, a 404 vagy rólunk. Csak addig böngészem, amíg nem találok elég webhelyet, amelyek tetszenek és megfelelnek a kívánt stílusnak.

A nehéz az egész összerakása. Sajnos nincs parancsikon. Csak sokat kell ismételni, amíg olyan eredményt nem kap, amellyel elégedett vagy.

Elgondolkodhat azon, hogy vajon normális-e, hogy az a design, amellyel teljesen elégedett volt egy hete, hirtelen nem elég jó vagy akár csúnya. A válasz az, hogy teljesen normális és valójában jó dolog. Ez lényegében azért van, mert növekszik, tanul és jobbá válik. A tegnapi kihívás ma már nem annyira kihívó. Ezt tartsa szem előtt, hogy ne ragadjon bele egy patkányversenybe.

Elvihetők:

  • Az egyedi betűkészlet óriási különbséget jelent
  • A grafika nagyon fontos, próbáljon meg legalább néhány illusztrációt vagy képet használni
  • Szerezzen megfelelő vizuális jelentőséget több színárnyalat használatával. A szöveg és az elsődleges színek nem elégek.
  • Ne használjon túl széles konténereket - az 1100 px körüli szélesség elég széles
  • Ölelje át a negatív teret
  • Beszéljen az előnyökről, ne a funkciókról
  • Nézzen körül inspirációért, ha elakad

Webalkalmazás (vagy irányítópult) megtervezése

Csakúgy, mint a céloldal megtervezésekor, ne egyenesen a tervezésbe kezdjen. Ezúttal nem próbálsz mesét mondani. Ehelyett a könnyű használat célja. Fogjon egy tollat ​​és papírt, és készítsen tervet arról, hogyan kell működnie az alkalmazásnak, mitől kell függenie, és hogyan kell könnyen navigálni.

Készítsen néhány vázlatot vagy drótkeretet, ha szükséges. Végezzen el egy megfelelő versenyzői tervellenőrzést, hogy meggyőződhessen arról, mi hiányzik, és amit jobban meg lehet csinálni, vagy akár versenyelőnybe is fordulhat. Néha jobb, ha egy kis szünetet tart, mielőtt papírra tervezne és tervezne.

A legjobb tanács, amelyet nem a felhasználás esetére vonatkozhatok, az az, hogy megfelelő oldalelrendezést választok. Általában minden webalkalmazás az alkalmazás céljától függően két különböző oldalelrendezést használ: fix szélességű vagy folyadéktartály, amely kitölti a teljes képernyőt.

Rögzített konténer

Jobban szeretem a rögzített tartályt, mert sokkal könnyebb szűk területre összpontosítani, mivel ez megakadályozza a felesleges szemmozgást. A rögzített tárolóalkalmazások általában tisztábbak és kevésbé elsöprőek az új felhasználók számára. A kisebb szélesség miatt azonban a rögzített tárolóalkalmazásokat nehezebb megtervezni.

Példák: Twitter, puffer, DigitalOcean, Netlify, GitHub

Folyadéktartály

A folyadéktartály-alkalmazások kiválóan illeszkednek a csevegőalkalmazásokhoz, a táblázatkezelő alkalmazásokhoz és más alkalmazásokhoz, ahol több elem szükséges a képernyőn. De ne feledje, hogy a képernyőn rengeteg adat elsöprő lehet.

Példák: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

Fontos, hogy a megfelelő tárolót válassza, mert az egész oldal elrendezése ettől függ, és későbbi megváltoztatása sok munka. Minden projekt egyedi és egyedi megoldásokat igényel, ezért ne féljen kísérletezni!

Elvihetők:

  • Ne komplikáld túl
  • Használjon olvasható betűtípust
  • A vizuális hierarchia használata sok adat megjelenítésekor
  • Használja ki a versenytárs gyenge tervezési lehetőségeit

Csomagolás

Ne feledje, hogy a tervezés versenyelőny lehet - használja tehát, és készítsen valami fantasztikus dolgot.

Indítsa el a tervezési utat úgy, hogy beszerez egy Adobe XD sablont, amelyet a legújabb projektem céloldalához készítettem. Egyszerűen iratkozzon fel a vadonatúj e-mail listámra, és az a postaládájába kerül.

Ezenkívül Ön lesz az első, aki értesítést kap a következő bejegyzésemről, ahol megosztom a 69 napos előrehaladást, amelyet a Sidemail-en értek el - egy SaaS projekten dolgozom. Olyan dolgokat fog tartalmazni, mint az előfizetők száma, a webhelylátogatások, a kiadások és a tervezetek. Magától értetődik, de garantálom, hogy semmi spam. Nincs is időm arra a vacakra.

A Twitter DM-jeim nyitva vannak, így ha elakad a tervek készítése során, vagy további kérdése van, nyugodtan üthessen fel.