Suunnittelutyökalujen massiivinen kokoaminen
Web-suunnittelijoilla on käytettävissään runsaasti työkaluja, koska ne pyrkivät kaikin tavoin järjestämään ajatuksiaan tietyn muotoilun lopullisesta suunnittelusta.
Mutta niin paljon työkaluja siellä, miten voit koskaan määrittää, mitkä ovat todella hyödyllisiä ja mitkä vain menossa tuhlata aikaa?
Olemme koonneet massiivisen luettelon joistakin parhaista ja hyödyllisimmistä työkaluista web-suunnittelijoille .
Luettelon tavallisesti jätetyt luettelot ovat tavallisia työkaluja, joita useimmat suunnittelijat käyttävät jo aiemmin (kuten Dreamweaver tai Panic's Coda, Photoshop tai GIMP ja samantapaiset tavalliset ohjelmistot, joista jokainen suunnittelija on jo työkalupakissaan).
Nämä ovat työkaluja, jotka säästävät aikaa, tehostavat suunnittelua, yksinkertaistavat tai nopeuttavat suunnitteluprosessia tai muuten helpottavat elämääsi.
Offline-työkalujen kokoaminen
Useimmat hyödyllisten web-suunnittelutyökalujen valikoimat keskittyvät vain online-työkaluihin.
Mutta on olemassa muutamia erittäin hyödyllisiä työkaluja, joita voit hyödyntää, kun avaat vaihtoehtoja suunnittelussa. Nämä asiat voivat helpottaa tiettyjä tehtäviä, kuten työskennellä epävarmojen asiakkaiden kanssa.
Graafiset tabletit
Grafiikkatabletit (joita kutsutaan joskus myös piirustussivuiksi, grafiikkatyynyt tai digitalisointi- tabletit) ovat uskomattoman hyödyllinen työkalu web-suunnittelija-arsenalissa. Vaikka useimmat suunnittelijat voivat piirtää hiukan taitavasti, tabletti tekee siitä paljon helpompaa ja nopeampaa.
Useimmat tabletit koostuvat kahdesta perusosasta: itse tabletista ja kynästä (tai kynästä). Monilla on myös kiekko (joka toimii samalla tavalla kuin hiiri, mutta itse tablet-laitteella hiiren padin tai työpöydän sijaan). Tabletin tärkein näkökohta on koko, kun taas kynän tärkein näkökohta on paineherkkyys.
Tabletit ovat saatavana kooltaan noin 4 "x 5" - 19 "x 13". Tietenkin, sitä suurempi tabletti, sitä kalliimpaa se on. Suurin osa web-suunnittelijoista voi päästä eroon taulukoiden pienimmistä päistä tabletteihin, elleivät he aio tehdä paljon havainnollista työtä (ja jopa silloin on mahdollista saada laadukkaita tuloksia keskikokoisesta tabletista).
Ja pienemmät tabletit ovat kannettavia, joten ne sopivat suunnittelijoille, jotka eivät aina halua olla sidoksissa pöydälleen.
Kynät ovat paineherkkiä, jotta saadaan realistisempi kokemus . Yhteiset herkkyydet vaihtelevat 256 paineesta jopa 2 048 tasolla. Mitä korkeampi herkkyys on, sitä enemmän tuntuu kuin käytät kynää ja paperia.
Suositut graafiset tabletit
wacom on luultavasti suosituin tabletti valmistaja siellä. Heillä on neljä eri tuotesarjaa: Bamboo (joka sisältää Bamboo Craft- ja Bamboo Fun -tuotteita), jotka on suunnattu kuluttajille ja harrastajille; Graphire, heidän Bluetooth-tabletti; Intuos, niiden keskitason linja luoville ammattilaisille; ja Cintiq, heidän high-end-rivi, joka sisältää näytön tablet-laitteeseen "kynänäyttö" -kokemukselle (yksi on jopa 21 "-näyttö).
Aiptek tekee edullisten tablettien rivin, joka alkaa vain US $ 50: ssa. Ne tarjoavat 12,1 tuuman USB-tabletin alle 130 dollaria (verrattuna US 469 dollariin verrattavissa olevan Wacom-tabletin). Aiptekin mielenkiintoisin tarjous on kuitenkin niiden My Note Premium (US $ 170), jonka avulla voit piirtää paperille tabletin päälle todellisen kynän ja tallentaa kaiken tekemäsi. Muistiin mahtuu jopa 100 kirjoitettua sivua, ja siinä on SD-korttipaikka sen kapasiteetin laajentamiseksi. Ja jos haluat käyttää sitä vain muistiinpanojen tekemiseen kokouksessa, se voidaan sammuttaa neljästä AAA-paristosta, joten sinun ei tarvitse tuoda kannettavaasi mukanasi.
UC-Logic on toinen merkittävä grafiikkatuotteiden valmistaja. Niiden tuotteet kuuluvat keskelle tablettien hintoja, ja 9 "x12" tabletti (PF1209-Pro) on noin 250 dollaria. Heillä on tabletteja, jotka alkavat vain 40 dollaria.
Mood Boardit
Mood-levyt (kutsutaan myös inspiraatiopaneeleiksi) ovat loistava työkalu suunnittelijoille, jotka työskentelevät asiakkaiden kanssa, joilla ei ole selkeää käsitystä siitä, mitä he haluavat.
Mood-levyt ovat usein kollaasi, joka sisältää hankkeen elementtejä. Esimerkkejä sisältyvistä elementeistä voivat olla typografiset näytteet, värimallit, erityiset graafiset esimerkit tai yleiset "mielialan" elementit, jotka heijastavat suunnittelijan näkemystä vaikutelmasta, jonka sivustolla tulisi antaa vierailijoille.
Mood-levyt käytetään usein sisustussuunnittelussa osoittamaan asiakkaille ideoita huoneen tai koko talon uudelleenkäyttöön. Niitä käytetään myös muotiteollisuudessa toimimaan inspiraationa ja suuntauksena linjalle tai kaudelle. Mutta ne ovat yhtä arvokkaita graafisille ja web-suunnittelijoille.
Riippuen siitä asiakkaan tyypistä, jonka kanssa olet tekemässä, voit luoda löysä kollaasi, jossa näytteet ovat päällekkäisiä orgaanisesti . Jos asiakas on luovaa kenttää tai tunne luovuusprosessin, tällainen mieliala voi toimia melko hyvin.
Jos asiakkaasi puolestaan käytetään yritystoimintaan tai muuhun toimintaympäristöön, luodaan järkevämmäksi järjestäytyneempi mielialauskortti.
Käytä otsikoita erottamalla värimaailma, erityiset suunnitteluelementit, typografia ja muut mielialauskorttisi osat, jotta koko juttu saadaan aikaan.
Jos sinulla on useita ideoita suunnitelmaan, jossa projekti voi mennä, luomalla muutamia erilaisia mielialaluokkia voi olla erinomainen tapa saada asiakaspalautetta ja edelleen hienosäätää omia ideoita.
Kaksi tai kolme erilaista esimerkkiä asiakkaan näyttämiseen voi olla arvokasta saada asiakkaalta entistä enemmän suuntaa käyttämättä tuntikausia tai päiviä varsinaisessa sivuston mallissa vain kerrottavaa, että se ei ole sellainen kuin he etsivät.
Ja se on todellakin tärkein etu käyttää mood-levyjä suunnitteluprosessissa. Älypuhelimella on yleensä paljon vähemmän aikaa luoda kuin sivuston mock-up .
Käyttämällä mielialauksia saadaksesi lisää palautetta epävarmalta tai epävarmalta asiakkaalta ennen tuntien suunnittelua, joka hylätään, tekee kaikki onnellisemmista.
Resurssit oman moodilautojen luomiseen
Julkaisemme artikkelin Miksi älypuhelimet pitävät viime vuoden lopulla. Artikkeli kattaa tunnelman laatimisen perusteet ja miksi haluat käyttää niitä. Se on hyvä lähtökohta.
Vuodesta Couch on video opetusohjelma nimeltään Tehokkaan mielialan hallituksen luominen . Se on noin seitsemän minuuttia pitkä ja kattaa perusteet luoda digitaalisen tunnelman hallitus hankkeita.
Flickrillä on Inspiraatiokortit allas, joka kerää mielialan ja inspiraatiotaulun kuvia useilta eri muotoilualueilta. Se on hyvä paikka löytää jotain inspiraatiota tai vain tarkistaa esimerkkejä siitä, miten muut lähestyvät mielialaa.
Online-työkalujen kokoaminen
Online-web-suunnittelutyökalut ovat kymmeniä dimeä. Lajittelu niiden avulla löytää ne, jotka todella erottuvat, voivat näyttävät vievän enemmän aikaa kuin voit odottaa säästävän niitä käyttämällä.
Mutta alla on löydetty parhaat työkalut typografialle, CSS: lle, AJAX: lle ja Javascriptille, värivalikoimille ja työkaluille, joiden avulla yksittäisten sivuelementtien luominen helpottuu.
Jälleen nämä ovat joitain parhaita käytettävissä olevia työkaluja, joten sinun ei tarvitse tuhlata aikaa kokeilemaan kymmeniä eri työkaluja.
Typografiatyökalut
Verkkotyökaluilla on useita online-työkaluja kokeilemalla sivustosi tyyliä. Joidenkin avulla voit vertailla erilaisia kirjasimia rinnakkain. Jotkut antavat vain näytteen yhden tyylin kerrallaan. Ja vielä toiset näyttävät sinulle suositeltuja fontteja.
Muita hyödyllisiä web-typografiatyökaluja ovat mm. Sovellukset pikselikokojen muuntamiseksi em-yksiköiksi ja erilaisille Lorem Ipsum- ja muille dummy-tekstigeneraattoreille. Kaiken kaikkiaan siellä on typografisia työkaluja lähes kaikki mahdolliset tarpeet web-suunnittelija voi olla.
Typetester
Typetesterin avulla voit vertailla enintään kolmea fonttia vierekkäin .
Voit valita minkä tahansa fontin omalta tietokoneeltasi tai käyttää kirjasimia yleisten järjestelmäfonttien ja web-turvallisten kirjasimien valikosta. Sen avulla voit myös vaihtaa väriä, ohjausta, seurantaa, kokoa ja muita tyyliasetuksia.
Se on erinomainen työkalu, kun yrität päättää, mitä fontteja käytetään eri elementteihin tai jopa omien kirjasintyyppien koontamiseen (koska sen avulla voit verrata useita fontteja rinnakkain).
CSS-tyyppisarja
CSS Type Setin avulla voit liittää minkä tahansa tekstin, jota haluat muokata yhdeksi laatikoksi, säädä liukusäätimiä ja valita muut muotoiluvaihtoehdot ja kopioi sitten luotu CSS.
Se on nopea ja helppo tapa muotoilla minkä tahansa tarvitsemasi teksti kappaleista pääotsikoihin.
Valinnat sisältävät tekstin värin, johtavan, seurannan, perusviivan muutoksen, tekstin koristeet, kohdistuksen ja paljon muuta.
Parempi CSS-fonttikoko
Vaikka tämä artikkeli ei sinänsä ole perinteinen työkalu, siinä on useita vaihtoehtoja CSS: ssä yleensä käytettäville tavallisille kirjasarjoille.
Sen lisäksi, että annat ohjeita oman kirjasinkasetin luomiseen, tässä artikkelissa on myös laaja valikoima näytepinoja, joita voit käyttää . Erinomainen resurssi, kun tunnet vähän typistyneitä vaihtoehtoja.
HTML-Ipsum
Useimmat standardit Lorem Ipsum generaattorit verkossa antavat sinulle lohkon tekstin ja mitään muuta. Ja se on hienoa, jos vain yrittää täyttää tilaa.
Mutta HTML-Ipsum antaa sinulle tekstiä, joka on jo merkitty perus-HTML-tunnisteilla (kappale, pää, järjestämättömät luettelot jne.), Jotta näet, kuinka kaikki eri elementit toimivat keskenään. Se on valtava aikataulu.
PXtoEm.com
PXtoEM.com tekee täsmälleen mitä se sanoo: se muuntaa pikseliä olevat fontit em-kokoisiin fontteihin .
Sen tarjoamat vaihtoehdot tekevät siitä todella vaikuttavan ja joustavan työkalun.
Voit valita perusrunko-fonttikokoa ja saada konversiot selaimesi oletusfonttikokoon perustuen (jos esimerkiksi olet määrittänyt perusfonttisi fontti 62,5 prosenttiin, niin että 10 pikselin koko on 1em, voit valita sen seuraavasti: oletuskoko).
Typechart
Tyyppikartan avulla voit selata monenlaisia web-turvallisia kirjasimia ja katsoa, miten ne näyttävät sekä Windows- että Mac-järjestelmissä .
Löydät fontit koon perusteella, olivatpa ne serifia tai sans-serifia tai painotusta. Se sisältää vain web-turvalliset fontit, joten tarjolla olevat vaihtoehdot ovat rajalliset. Mutta perustietografiassa se on erinomainen työkalu, joka voi tarjota runsaasti inspiraatiota.
Voit myös kopioida ja liittää kunkin tyylin CSS poistumatta sivulta.
Käännä tyypillinen
Flipping Typical -ominaisuuden avulla voit tarkastella tietokoneellasi olevia yleisiä kirjasimia verkko-muodossa , jotta nykyisen projektin oikean fontin valitseminen olisi helpompaa.
Tämä on hieno työkalu, kun et ole kiinnostunut käyttämään vain tavallisia web-turvallisia kirjasimia ja haluat nähdä lisää vaihtoehtoja.
Se on erityisen hyödyllinen, jos et halua ohittaa muutaman sadan fontin asennettu tietokoneeseen ja haluat vain nähdä suosittuja.
CSS-työkalut
CSS on lähes yhtä tärkeä web-suunnittelussa kuin HTML. Ja siellä on satoja työkaluja, jotka tekevät CSS: stä puhtaamman, vähäisempiä, tehokkaampia ja yleensä parempia, jotka säästävät aikaa ja vaivaa, jotta tyylitiedostot voidaan viimeistellä manuaalisesti.
Pakkaamalla tyyliarkkisi, mikä voi nopeuttaa latausaikaa sivustoillesi, yksinkertaistetaan käyttämällä automaattista verkkotyökalua. Käytettävissä on työkaluja myös kaksoiskappaleiden poistamiseksi.
Huijausarkit säilyttävät CSS: n peruselementit sormenpäilläsi, kun kahvi ei ole aikaisemmin potkaissut aamulla, ja sinulla on vaikea muistaa, mihin tilaukseen lyhennetty merkintä on.
Vaikka suurin osa näistä työkaluista tekee hyvää työtä CSS: n puhdistamisessa, varmista, että pidät aina alkuperäisen varmuuskopion ja testat lopullista tuotetta. Joskus puhdistaja tai kompressori poistaa jotain, mikä oli tarpeen loppuun, rikkomalla sivustosi.
CSS SuperScrub
CSS SuperScrub pyrkii merkittävästi vähentämään tyyliarkkien monimutkaisuutta ja kokoa .
Se irrottaa tarpeettomat puhelut, poistaa tarpeettomat sisällöt ja ryhmittelee yhdessä jäljellä olevat tekijät, jotta muokkaaminen helpottuisi myöhemmin.
On olemassa muutamia vaihtoehtoja, joista yksi poistaa kaiken tyhjämerkin tyyliarkistasi tai uuden rivin lisääminen ennen avausnaulojen avaamista.
Code Beautifier
Code Beautifier optimoi ja puhdistaa CSS-tiedostojasi .
Se tarjoaa paljon vaihtoehtoja tekstin muotoilemiseen, mukaan lukien väripainojen purkaminen, omien ominaisuuksien lajittelu, kaikkien valitsimien muuntaminen pieniksi, ominaisuuksien muuntaminen joko isoilla tai pienillä kirjaimilla ja valitsemalla haluamasi pakkauksen taso.
Voit joko kopioida ja liittää CSS: n sovellukseen tai toimittaa CSS-tiedoston URL-osoitteen.
CSS-asema
CSS-asema on perus CSS-kompressori .
Voit määrittää, kuinka pakattu haluat CSS: n olevan (kevyt, normaali tai erittäin pienikokoinen) ja miten haluat käsitellä kommentteja (myös poistaa ne).
Mukana on myös edistynyt tila, joka tarjoaa paljon enemmän vaihtoehtoja, kuten tilojen poistamisen tiettyjen merkkien ympärille, poisto välilehdistä, uusien viivojen poistaminen ja paljon muuta.
CSS-redundanssitarkistus
Joskus sivuston suunnittelussa, voit luoda CSS-valitsimia, jotka eivät pääty lopulliseen merkintään.
Nämä valitsimet tekevät vain tyyliarkistasi entistä suurempia ja vaikeampia muokata myöhemmin.
CSS-redundanssitarkistus tarkkailee tyyliarkistasi ja HTML-sivuja nähdäksesi, mitkä valitsimet eivät ole käytössä ja poistaa ne sitten .
Se on hyvä työkalu, jos luulet, että sinulla on tarpeettomia valitsimia tyyliarkeissasi.
CSS-ominaisuusindeksi
CSS-ominaisuusluettelossa luetellaan jokainen CSS-ominaisuus aakkosjärjestyksessä .
Minkä tahansa sisältyvän ominaisuuden napsauttaminen tuo määritelmän ja tietoja oletusarvosta, sallituista arvoista ja siitä, onko se periytyy vanhempiominaisuudesta.
CSS-lyhytkäsikirja
CSS-ominaisuuksien avulla CSS-tiedostot ovat pienempiä kuin pitkäaikaisten ominaisuuksien käyttö .
Mutta muistaen, mikä järjestys kaikkiin eri elementteihin kuluu kaikkien eri ominaisuuksien suhteen, voi olla päänsärky, etenkin niille, joita et välttämättä käytä jokaisessa yksittäisessä suunnittelussa.
Se sisältää myös tietoja oletusarvoisista ominaisuusarvoista, joten jos päätät jättää omaisuuden pois, tiedät, mitä se olettaa arvon olevan.
Värityökalut
Oikeiden värien valitseminen sivustosi suunnittelusta voi olla yksi tärkeimmistä päätöksistä, joita teet koko suunnitteluprosessissa.
Joskus tulemme muotoiluun ennalta määritellyllä värimallilla (esimerkiksi silloin, kun asiakas on jo asettanut tuotemerkin värit) tai tietää välittömästi, mitä värejä haluamme käyttää. Muina aikoina saatamme olla vapaita luomaan oma paletti suunnittelusta.
Jos luot värimalle tyhjästä, värivalikoiman generaattorit ja galleriat voivat olla valtava apu.
Jos sinulla on jo värimaailma, on otettava huomioon muut näkökohdat, kuten saatavuus ja käytettävät värit, mihin sivuston osiin.
Mutta on olemassa työkaluja myös näiden päätösten auttamiseksi. Seuraavassa on joitain parhaita käytettävissä olevia väriprofiileja.
Colorblind-verkkosivun suodatin
Ottaen huomioon, että jossain määrin 7-10% miehen väestöstä on jonkin verran värin sokeutta (mukaan wikipedia ), huolehtiminen siitä, että sivustosi ovat yhä saatavilla kyseiselle väestölle, ei ole huono idea.
Tämä työkalu näyttää, miten mallit näyttävät ihmisille, joilla on useita erilaisia värisuojahäiriöitä. Voit tarkastella koko sivustosi tuloksia tai jättää tulokset tuloksesta.
Ne tarjoavat myös linkin väriblind-turvalliseen värivalintaan.
Löydä vastaavia värejä verkkosivustollesi
Tämä värivalikoiman työkalu löytää värit, jotka sopivat yhteen valitsemallasi värillä .
Voit joko valita värin ennalta määritetyistä vaihtoehdoista tai syöttää minkä tahansa heksadesimaalisen tai RGB-värin arvon, jotta koordinaatistoalueita saadaan täydentävistä, split-täydentävistä, kolmio-, tetrade-, analogi- tai monotoniväreistä.
Toimitetut värit ovat kaikki samanlaisia intensiteetillä, mikä tarkoittaa, että tämä on oikeastaan vain lähtökohtana värimaailman luomiseen malleihisi.
Väripaletti generaattori
Valokuvat ovat hyviä paikkoja etsiä muotoilun inspiraatiota. Tämä työkalu voi luoda värivalikoiman mistä tahansa valitsemastasi kuvasta (syötä vain kuvan URL-osoite).
Se tarjoaa sekä tylsää ja elävää värimaailmaa perustuen kuvan antamaan.
Mahdollisuus käyttää mitä tahansa kuvaa verkossa tekee tästä työkalusta arvokasta, koska se säästää aikaa ladata kuvan ja ladata sen jälkeen uudestaan tällaiseen sivustoon värimaailman luomiseksi (tai ladata ja sitten avata graafisessa ohjelmassa käsin luomaan värivalikoima).
Kuler
Adoben Kulerin värivalikoima-galleria on yksi paremmista väripaletti gallerioista siellä.
Voit selata tai etsiä yli 10 000 Kuler-käyttäjien toimittamia väripaletteja ja sitten ladata tai tallentaa suosikkejasi myöhempää käyttöä varten.
Kulerissa on myös todella tehokas palettien luomistyökalu, jonka avulla voit valita värit liukusäätimellä tai HSV-, RGB-, CMYK-, LAB- tai heksadesimaaliväriarvojen perusteella.
Värin perustaminen perusväriksi muuttaa sitten ympäröivä värit täydentämään.
COLOURlovers
COLOURlovers on toinen upea värimaailman galleria .
Voit etsiä yli 800 000 värimallia (perustuu 20 ohjelmaan sivua kohden ja 43 200 sivua). Palettien lisäksi voit myös hakea yksittäisiä värejä ja kuvioita palettien perusteella.
Yksi COLOURloversin hyödyllisimmistä ominaisuuksista on kuitenkin mallin luomistyökalu, joka tekee omien kuvioiden luomisesta joko ennalta määritetyn väriteeman tai sellaisen, joka luodaan lentokoneella.
Varmista vain, että otat yhteyden kuvion tekijänoikeuden omistajalle, jos haluat käyttää sitä kaupalliseen työhön.
100 satunnainen värit 2.0
Jos sinulla ei todellakaan ole aavistustakaan mistä aloittaa värimallin jokin teoksistasi, 100 Random Colors 2.0 voi olla vain oikea työkalu.
Se tekee juuri sen, mitä nimi sanoo: esittelee sinulle 100 satunnaista väriä, mukaan lukien niiden hex-arvot .
Ja jos et löydä mitään ensimmäiseltä 100: stä, voit vain lyödä päivityksiä ja antaa uuden kokonaisuuden!
Yksittäiset elementtityökalut
Siellä on paljon generaattoreita, joiden avulla sivustosi painikkeet, taustat, lomakkeet ja muut elementit voidaan helposti ja nopeasti luoda.
Jotkut niistä ovat vain kimmeltäviä, mutta muut ovat erinomainen apu, jos haluat vain luoda nopeasti jotain Web 2.0: n painikkeen tai perusjonoisen taustan.
Muotoilun työkalut voivat olla myös erittäin hyödyllisiä, varsinkin jos haluat, että asiakkaat voivat tehdä joitain oman hallintotyönsä lomakkeissaan.
Tiedän ainakin joistakin suunnittelijoista, jotka käyttävät näitä työkaluja, joten heidän ei tarvitse rakentaa mukautettua, yksinkertaistettua käyttöliittymää lomaketokannan tai lomakkeiden muokkaamiseen asiakkailleen. Ne ovat erinomainen säästö, varsinkin monimutkaisten lomakkeiden rakentamiseen.
Wufoo
Wufoo on HTML-lomakekuvaaja, joka tarjoaa yli 80 lomakemallia ja värimallia, samalla kun voit myös hallita asiakkaiden mukautettuja lomakkeita.
Malleissa on nopeampaa ja helpompaa luoda tavallisia www-lomakkeita (kuten rekisteröintisivuja tai yhteydenottolomakkeita).
Lähetetyt lomakkeet kerätään automaattisesti tietokantaan, minkä ansiosta asiakkaasi voivat yksinkertaisesti tulostaa, lähettää yksittäisiä merkintöjä, suodattaa, etsiä ja suorittaa muita kehittyneitä toimintoja ilman, että sinun tarvitsee rakentaa mukautettu käyttöliittymä.
Voit jopa käyttää Wufooa online-tilauslomakkeiden luomiseen ja integroida Authorize.net, PayPal tai Google Checkoutiin.
BgPatterns
BgPatternsin avulla voit luoda kaakelisarjoja useilla erilaisilla toistuvilla elementeillä.
Voit valita taustaväri, kankaan tekstuuri ja kuvion kulman. Voit luoda BgPatterns-sivustolle luomasi taustan esikatseluun ja sitten ladata kuvan, kun olet viimeistellyt sen.
Voit myös selata muiden luomia kuvioita. Se on nopein ja helpoin tapa luoda yksinkertaisia, kaakeloitu taustoja.
Stripe Generator 2.0
Toistuvien raitojen luominen verkkosivustolle vie aikaa.
Toki voit luoda malleja yhteisille raidoille, joita voit käyttää, mutta mitä jos haluat yhden projektin tapin raitaa, leveää raitaa toiselle ja toinen kummalle kulmalle toiselle? Pian nämä mallit eivät näytä enää leikkaavan sitä enää.
Stripe Generator 2.0 tarjoaa raitoja eri kulmissa , juuri sopivalla leveydellä, varjojen ja kaltevuuksien kanssa tai ilman , ja haluamasi kuusivärit.
Niihin kuuluu myös raita-galleria, josta näet, mitä muut ovat rakentaneet.
Tartan Maker
Jos raidallisia taustoja luodaan aikaa vievää, luodaan mustat taustat valtava päänsärky.
Silloin Tartan Maker tulee sisään. Valitse langan koko, kuvion värit ja kulma ja se luo sen automaattisesti.
Voit esikatsella malleja koko näytöllä ja ladata tiedoston.
Pixelkneten taustakuvio
Tämä taustageneraattori luo modernin pisteviivan, jossa asteittain pienemmät pisteet siirtyvät sivulle alaspäin.
Voit valita enintään kaksi pisteväriä ja kaksi väriä kaltevuustaustaan (tai vain yhden värin kiinteälle taustalle).
Voit myös määrittää kuvion korkeuden (oletusarvo on 700 pikseliä). Taustalla luodaan toistoja vaaka-akselilla.
Button-generaattorina
Jos sivuutat huonosti käännetyn tekstin, näet, että tämä on yksi tasapuolisimmista painotuotteista . Lisää painikkeisiin tekstiä, erilaisia kaltevuuksia, raitoja, kuvia ja paljon muuta.
Voit valita painikkeen ja reunuksen värit, kokonaiskoko (käyttämällä liukusäätimiä tai tekstikenttiä) ja rajan paksuuden sekä kuinka pyöristetty painike on.
Jos käytät raitoja, sinulla on runsaasti vaihtoehtoja, mukaan lukien väri, läpinäkyvyys, paksuus, viivojen väli ja kulma.
Tämä on ehdottomasti kaikkein täysin varusteltu nappulaaja siellä.
Button Maker
Tämän painikkeen generaattorin avulla voit luoda helposti kaksitasoisia 80 × 15 pikselin painikkeita .
Valitse painikkeiden värit, rajavärit, joissa ruutujen välinen rikkaus olisi, ja kirjoita teksti molemmille puolille, ja se on niin!
Tämä on yksi niistä työkaluista, joilla ei ole ominaisuuksia, mutta tekee sen, mitä se on suunniteltu tekemään täydellisesti ja saumattomasti.
AJAX- ja JavaScript-työkalut
Me kaikki tiedämme, että Ajax voi lisätä sivustoosi paljon toimintoja. Haluatko lisätä yksinkertaisen kuvagallerian, vuorovaikutteisen yhteydenottolomakkeen tai luoda koko verkkosovelluksen , Ajax auttaa sinua.
Mutta alusta alkaen voi olla pelottavaa, varsinkin jos olet suhteellisen uusi Ajax. Ja vaikka pidät itsesi ammattilaiseksi, voi silti olla aikaa vievää aloittaa tyhjä projekti jokaiselle projektille.
On olemassa paljon työkaluja siellä nopeuttaa Ajax kehitystä. Skriptikokoelmista puitteisiin tietyille elementtigeneraattoreille on alla olevissa työkaluissa jotain saatavilla, mikä tekee niistä tehokkaamman kehittäjän.
Ajaxload
Ajaxload on generaattori, joka luo Ajaxin latauskuvakkeet. Valittavissa on useita eri kuvakkeita.
Sinun tarvitsee vain asettaa etualan ja taustan värit (tai valita läpinäkyvä tausta) ja sitten ladata luotu skripti.
Nopea ja helppo, mutta se säästää muutaman minuutin (tai kauemmin) koodausta!
Mini AJAX
Mini Ajax on ladattavien Ajax- ja DHTML-skriptien galleria .
Se sisältää kaiken modaalisista ikkunoista diaesityksiin kehittyneempiin komentosarjoihin (kuten kalentereihin ja koko projektinhallintatyökaluihin).
Se on hyvä lähtökohta löytää yksittäisiä Ajax-elementtejä tai jopa vain saada inspiraatiota.
Useita käsikirjoituksia varten on saatavilla demoja, ja kaikki ne ovat ladattavissa alkuperäisiltä lähteiltään.
MooTools
MooTools on objekti-orientoitu JavaScript-kehys . Se ei varmastikaan ole tarkoitettu aloittelijoille, mutta voit kirjoittaa joustavia, tehokkaita Ajax-sovelluksia, jotka ovat selainten välisiä yhteensopivia.
Se on myös standardien mukainen ja uskomattoman hyvin dokumentoitu.
Ydinrakentajan lisäksi tarjolla on myös paljon lisäosia. MooToolsin avulla voit luoda kaiken yksinkertaisista kuvagallerioista täydellisten käyttöliittymien avulla.
jQuery
jQuery on JavaScript-kirjasto, joka yksinkertaistaa useita JavaScript-toimintoja .
Yksi tämän työkalun parhaista osista on kuitenkin jQueryn jo käytettävissä olevien lisäosien määrä.
On olemassa valmiita laajennuksia kaikesta yksinkertaisista animaatioista lomakkeisiin widgetteihin edistyneisiin käyttöliittymän elementteihin.
On todennäköisesti jo plugin tehty lähes kaiken mitä haluat tehdä JavaScript tai Ajax tai ainakin yksi käyttää perusta oman luomiseen.
Script.aculo.us
Script.aculo.us on JavaScript-käyttöliittymäkirjasto, joka sisältää animaation puitteet, Ajax-ohjaimet, DOM-apuohjelmat ja paljon muuta .
Sen käyttävät Apple, CNN, Basecamp ja Ruby on Rails. Se on rakennettu Prototype Framework -järjestelmään.
Script.aculo.us wikissä on laaja dokumentaatio, joka on helppo aloittaa.
Online-JavaScript-pakkaustyökalu
JavaScript-tiedostojen pakkaaminen nopeuttaa niiden lataamista, syö vähemmän kaistanleveyttä ja vie vähemmän tilaa palvelimellasi. Tämä työkalu helpottaa pakkaamista.
Kopioi ja liitä JS-tiedostojasi (tai lataa ne) tähän työkaluun ja valitse sitten, haluatko pakata käyttämällä Minify tai Packer.
Se pudottaa automaattisesti puhtaamman, tehokkaamman koodin. Varmista, että testaat tuloksia tarkasti ja säilytä aina alkuperäisen tiedoston varmuuskopio.
JavaScript Beautifier
Jos JavaScript on hieman sekaisin kuin haluat (tai se on lähes mahdotonta tulkita, koska se on niin huonosti muotoiltu), suorita se tämän kaunistelijan avulla saadaksesi siistit, puhtaat, jatkuvasti muotoillut skriptit, jotka ovat helpompi lukea ja muokata myöhemmin .
Käytetyt asetukset ovat vähäiset, mutta voit valita, kuinka monta välilyöntiä käytetään viereen, pakettien havaitsemiseen ja viivataukoiden säilyttämiseen.
Jälleen, varmista, että testaat lopullista koodia ja pidä varmuuskopio kätevänä, jos sinulla on äskettäin kasvaneen koodin ongelmia.
BrowserShots
Valitettavasti eri selaimet tekevät sivustoja hieman eri tavoin. Tämä voi olla valtava päänsärky, varsinkin jos asiakkaasi käyttävät yhtä selainta ja käytät täysin erilaista.
Jos he näkevät asioita, jotka eivät näy loppuun (tai päinvastoin), se voi aiheuttaa ongelmia molemmilla puolilla.
Voit aina asentaa useita selaimia tietokoneellesi, mutta a) se on levytilaa ja b) mitä selaimia, joita ei ole käytettävissä käyttöjärjestelmäsi? Siinä missä BrowserShots tulee sisään.
Voit valita lähes kaikista suurimmista selaimista, mukaan lukien epämääräiset selaimet, kuten kaivosalue ja loppiainen.
BrowserShots näyttää kuvakaappauksia vain valitsemistasi selaimista , joten voit valita niin monta tai muutama kuin haluat.
Muista vain, että mitä enemmän selaimia valitset testata, sitä kauemmin se kestää. BrowserShotsin asetukset on kuitenkin asetettu, mutta voit vain kirjanmerkin sivun ja palata myöhemmin nähdäksesi tulokset.
pyromaani
Ei luetteloa web-suunnittelutyökaluista olisi täydellinen mainitsematta Firebug Firefox-plugin .
Usein ajattelevana on yksi tärkein työkalu suunnittelija-arsenalissa , Firebug tekee virheenkorjauksen ja koodin muokkaamisen (riippumatta siitä, onko se JavaScript, CSS tai HTML) äärettömän helpoksi.
Voit muokata CSS: ää suoraan selaimessasi. Tarkastele tapaa, jolla CSS-laatikot ovat kohdakkain. Muokkaa sivusi sisältöä selaimessa.
Debug JavaScript ja löytää virheitä nopeammin. Ja se vain raaputtaa sen pinnan, mitä Firebug voi tehdä.
Se on todella tärkeä väline jokaiselle suunnittelijalle. Kun käytät sitä, ihmettelet, miten olet koskaan suunnitellut ilman sitä.
Valmistettu yksinomaan Cameron Chapmanin WDD: lle.
Mitkä työkalut käyttävät eniten? Mitä muita työkaluja käytät, joita meillä on ehkä unohtunut?