Innehåll
- 01. Design Systems Repo
- 02. PixelSnap
- 03. Skiss
- 04. Stackswell
- 05. Variabla teckensnitt
- 06. Randfakturering
- 07. CreativeGuild
- 08. Mobbin
- 09. HueSnap
- 10. Eggradienter
- Skaffa din biljett till Generate New York
Temat för vår sammanställning den här månaden är hastighet och effektivitet: några av dessa webbdesignverktyg kommer att göra fantastiska saker för ditt arbetsflöde genom att klippa ut tråkiga, frustrerande uppgifter som inte har något att göra med design. Ta Stackswell - det automatiserar alla irriterande bitar av att göra responsiv design i Sketch. Ett annat av våra verktyg snabbar upp saker för dig genom att extrahera och organisera alla tillgångar från en .sketch-fil.
Utöver det finns en cool ny faktureringsprodukt från Stripe, ett fantastiskt nätverksverktyg för annonsmaterial av Tina Roth Eisenberg och ett fantastiskt verktyg för att mäta saker på skärmen i pixlar.
01. Design Systems Repo
Om du har fått i uppdrag att arbeta med några av ingredienserna för din organisations designsystem, eller kanske till och med bygga eller kodifiera själva systemet, vill du få fart på de senaste resurserna i ämnet.
För detta är Design Systems Repo din vän. Det är en samling böcker, artiklar, föredrag, webbplatser, verktyg, designsystem, mönsterbibliotek och stilguider som du kan använda för att få en förståelse för hur topporganisationer och ledande tänkare gör saker.
02. PixelSnap
PixelSnap är en mycket smidig app som gör att mäta saker på skärmen mycket, mycket mindre irriterande. Placera markören mellan två element, till exempel en bild och en rubrik, och den berättar automatiskt antalet pixlar mellan dem. Rita en rektangel runt ett element och det snäpper runt det och berättar dess dimensioner. Ja. Du kan mäta saker så snabbt.
Kolla in videon på hemsidan för att få idén. Appen är prissatt till $ 15, och den enda nackdelen är att den bara är tillgänglig som en Mac-app för tillfället. Men om du är en Mac-användare är det en fantastisk sak.
03. Skiss
Att exportera och förbereda tillgångar från Sketch för att överlämna till ett annat team kan vara ett riktigt drag, så utsikterna till ett verktyg som gör det åt dig med ett klick är ganska spännande. Sketch.The.Ripper extraherar och organiserar skärmar, kopierar och raster bilder från alla ritytor i en .sketch-fil och presenterar dem på ett bekvämt sätt. Du kan se ett exempel på utdata från en rippad fil här.
Det här verktyget är webbaserat så det fungerar på alla operativsystem, vilket kan ta bort viss friktion från ditt arbetsflöde om människor använder olika system. Den är gjord av Icons8 och du kan läsa mer om det här.
04. Stackswell
Stackswell påskyndar ditt responsiva designflöde genom att föra mediefrågor till Sketch och automatisera processen att uppdatera typstilar och symboler för varje brytpunkt. I stället för att göra detta arbete manuellt, när du justerar bredden på en rityta uppdateras stilarna automatiskt.
Stackswell sparar dig också arbetet med att behöva kontrollera ditt vertikala avstånd för varje brytpunkt, så att du får konsekvent avstånd med minimalt krångel. Du kan läsa mer om det i den här artikeln.
05. Variabla teckensnitt
Variabla teckensnitt gör att du kan använda många olika teckensnittsvikter och -bredder utan att behöva inkludera en separat fil för varje: du inkluderar en fil och sedan ändra teckensnittet med CSS. Det är en fantastisk situation eftersom det gör det möjligt för dig att använda typografi för att få bästa möjliga effekt i dina mönster utan att du behöver öka din sidvikt.
Inte alla variabelteckensnitt är dock lika; vissa är mer flexibla än andra. Detta verktyg gör att du kan hitta olika teckensnitt och experimentera med dem för att se om de passar dina behov. För mer information om variabla teckensnitt och för att få en uppfattning om vad som kan uppnås, prova denna demo.
06. Randfakturering
Stripes nya faktureringsprodukt för onlineföretag erbjuder ett tredje sätt för företag som överväger dilemmaet om de ska bygga eller köpa ett faktureringssystem (för mer information, se vår artikel om onlinebutikslösningar). Stripe Billing API integreras enkelt i en befintlig webbplats och gör att du kan använda byggstenar för att skapa ett flexibelt system anpassat efter dina behov.
När ditt system är inställt hanteras allt från en instrumentpanel där du kan hålla koll på prenumerationer, fakturor och ekonomiska rapporter. Du får också kraftfulla funktioner som Stripes globala betalningssystem, som hanterar olika valutor och kreditkort, och de flexibla faktureringskomponenterna som gör att du kan experimentera med prissättning.
07. CreativeGuild
CreativeGuild är en avknoppning av CreativeMornings, en gratis månadsföreläsningsserie grundad av Tina Roth Eisenberg i Brooklyn för ett decennium sedan. Konceptet var en hit och det finns nu CreativeMornings-kapitel i över 185 städer över hela världen, alla med sitt eget livfulla samhälle som vårdar och inspirerar sina medlemmar.
CreativeGuild är avsett att ge en del av gemenskapsaspekten online så att den är tillgänglig för fler människor. Du kan tänka på det som att vara lite som LinkedIn, men för annonsmaterial. Det finns en katalog med kreativa företag, privatpersoner och jobb, och du kan söka efter plats för att hitta möjligheter i din stad.
08. Mobbin
Mobbin är ett galleri med mobilappsdesigner som du kan använda för att få idéer till dina egna projekt - istället för att installera massor av appar kan du bläddra bland dem på ett ställe för att se hur andra löser designproblem. Sex skärmar för varje app visas så att du kan få en uppfattning om användarens resa och designmönster för var och en. Det finns också ett sidofält som visar jobbannonser.
09. HueSnap
Man vet aldrig när inspiration kommer att slå; kanske inredningen på ett hotell eller ljuset i parken kommer att kännas som rätt färgschema för ditt arbete. Om det händer kan du ta ett foto och använda HueSnap för att extrahera färgerna från bilden och göra dem till en palett.
Appen är inriktad på mobilanvändning så fungerar bäst på din telefon, och du kan spara och dela dina paletter med andra. Det finns olika funktioner som hjälper dig att ändra en palett, till exempel alternativ för att välja kompletterande och sammansatta färger. Dina paletter kan ha upp till sex färger vardera.
För mer, ta en titt på vår sammanställning av de bästa färgverktygen för webbdesigners.
10. Eggradienter
Den som sätter ihop denna samling av vackra lutningar har ett stort öga för färg och en intressant humor. Varje lutning visas i en äggformad behållare och ges ett namn som kanske eller inte kan relatera till färgerna på något sätt. Om det finns en relation har vi inte kunnat dechiffrera den.
Exempel på namn inkluderar 'Framgångsrik invandrare' för en turkos toning, 'Wozniaks brutna hjärta' för en ljusblå och 'Barmhärtig fiende' för en gul till grön övergång.
Skaffa din biljett till Generate New York
Ledande webbdesignevenemang Skapa New York är tillbaka. Pågår mellan 25-27 april och inkluderar högtalare SuperFriendly's Dan Mall, webbanimationskonsult Val Head, JavaScript-utvecklare Wes Bos med mer stack. Det finns också en dag med workshops och bästa nätverksmöjligheter - missa inte det. Skaffa din Generate-biljett nu.
