Innhold
- 01. Design Systems Repo
- 02. PixelSnap
- 03. Skisse
- 04. Stackswell
- 05. Variable skrifttyper
- 06. Stripe Billing
- 07. CreativeGuild
- 08. Mobbin
- 09. HueSnap
- 10. Eggradienter
- Få din billett til Generate New York
Temaet for samlingen vår denne måneden er hastighet og effektivitet: noen få av disse verktøy for nettdesign vil gjøre fantastiske ting for arbeidsflyten din ved å kutte ut kjedelige, frustrerende oppgaver som ikke har noe med design å gjøre. Ta Stackswell - det automatiserer alle de irriterende delene av å gjøre responsiv design i Sketch. Et annet av verktøyene våre gir deg raskere ting ved å trekke ut og organisere alle eiendelene fra en .sketch-fil.
På toppen av det er det et kult nytt faktureringsprodukt fra Stripe, et flott nettverksverktøy for reklamer av Tina Roth Eisenberg og et fantastisk verktøy for å måle ting på skjermen i piksler.
01. Design Systems Repo
Hvis du har fått i oppgave å jobbe med noen av ingrediensene til organisasjonens designsystem, eller kanskje til og med bygge eller kodifisere selve systemet, vil du komme i gang med de nyeste ressursene om emnet.
For dette er Design Systems Repo din venn. Det er en samling bøker, artikler, foredrag, nettsteder, verktøy, designsystemer, mønsterbiblioteker og stilguider som du kan bruke til å få en forståelse av hvordan topporganisasjoner og ledende tenkere gjør ting.
02. PixelSnap
PixelSnap er en veldig fin app som gjør måling av ting på skjermen mye, mye mindre irriterende. Sett markøren mellom to elementer, for eksempel et bilde og en overskrift, og den forteller deg automatisk antall piksler mellom dem. Tegn et rektangel rundt et element, og det klikker rundt det og forteller deg dimensjonene. Ja. Du kan måle ting så raskt.
Sjekk ut videoen på hjemmesiden for å få ideen. Appen er priset til $ 15, og den eneste ulempen er at den bare er tilgjengelig som en Mac-app for nå. Men hvis du er en Mac-bruker, er det en flott ting.
03. Skisse
Eksportere og klargjøre eiendeler fra Sketch til å overlevere til et annet team kan være en reell dra, så utsiktene til et verktøy som gjør det for deg med ett klikk er ganske spennende. Sketch.The.Ripper trekker ut og organiserer skjermene, kopierer og raster bilder fra alle tegnebrettene i en .sketch-fil, og presenterer dem på en praktisk måte. Du kan se et eksempel på utdata fra en revet fil her.
Dette verktøyet er nettbasert, så det fungerer på alle operativsystemer, noe som kan fjerne noe friksjon fra arbeidsflyten din hvis folk bruker forskjellige systemer. Den er laget av Icons8, og du kan lese mer om det her.
04. Stackswell
Stackswell fremskynder din responsive arbeidsflyt ved å bringe mediespørsmål til Sketch, og automatisere prosessen med å oppdatere typestiler og symboler for hvert brytpunkt. I stedet for å gjøre dette arbeidet manuelt, oppdateres stilene automatisk når du justerer bredden på et tegnebrett.
Stackswell sparer deg også for arbeidet med å måtte sjekke den vertikale avstanden for hvert bruddpunkt, slik at du får jevn avstand med minimalt bry. Du kan lese mer om det i denne artikkelen.
05. Variable skrifttyper
Variable skrifttyper lar deg bruke mange forskjellige skriftvekter og bredder uten å måtte inkludere en separat fil for hver: du inkluderer en fil og deretter endre skrifttypen ved hjelp av CSS. Det er en flott situasjon fordi det gjør det mulig å bruke typografi til best mulig effekt i designene dine, uten å måtte øke sidevekten.
Ikke alle variable skrifter er like; noen er mer fleksible enn andre. Dette verktøyet lar deg finne forskjellige skrifttyper og eksperimentere med dem for å se om de passer dine behov. For ytterligere informasjon om variable skrifttyper og for å få en ide om hva som kan oppnås, prøv denne demo.
06. Stripe Billing
Stripes nye faktureringsprodukt for nettbaserte bedrifter tilbyr en tredje måte for selskaper som vurderer dilemmaet om de skal bygge eller kjøpe et faktureringssystem (for mer om dette, ta en titt på artikkelen vår om nettbutikkløsninger). Stripe Billing API integreres enkelt i et eksisterende nettsted og lar deg bruke byggesteiner til å lage et fleksibelt system tilpasset dine behov.
Når systemet ditt er satt opp, styres alt fra et dashbord der du kan holde deg oppdatert på abonnementer, fakturaer og økonomiske rapporter. Du får også kraftige funksjoner som Stripes globale betalingssystem, som håndterer forskjellige valutaer og kredittkort, og de fleksible faktureringskomponentene som lar deg eksperimentere med priser.
07. CreativeGuild
CreativeGuild er en spin-off av CreativeMornings, en gratis månedlig forelesningsserie grunnlagt av Tina Roth Eisenberg i Brooklyn for et tiår siden. Konseptet var en hit, og det er nå CreativeMornings kapitler i over 185 byer over hele verden, hver med sitt eget livlige samfunn som pleier og inspirerer medlemmene.
CreativeGuild er ment å bringe noe av fellesskapsaspektet på nettet slik at det er tilgjengelig for flere mennesker. Du kan tenke på det som å være litt som LinkedIn, men for reklamer. Det er en katalog med kreative selskaper, enkeltpersoner og jobber, og du kan søke etter sted for å finne muligheter i byen din.
08. Mobbin
Mobbin er et galleri med design av mobilapper som du kan bruke til å få ideer til dine egne prosjekter - i stedet for å installere mange apper, kan du bla gjennom dem på ett sted for å se hvordan andre løser designproblemer. Seks skjermer for hver app vises, slik at du kan få en ide om brukerens reise og designmønster for hver enkelt. Det er også en sidefelt som viser stillingsoppføringer.
09. HueSnap
Du vet aldri når inspirasjon vil slå; kanskje innredningen på et hotell eller lyset i parken vil føles som det riktige fargevalget for arbeidet ditt. Hvis det skjer, kan du ta et bilde og bruke HueSnap til å trekke ut fargene fra bildet og gjøre dem til en palett.
Appen er rettet mot mobilbruk, så fungerer best på telefonen din, og du kan lagre og dele palettene dine med andre. Det er forskjellige funksjoner som hjelper deg med å endre en palett, for eksempel alternativer for å velge komplementære og sammensatte farger. Palettene dine kan ha opptil seks farger hver.
For mer, ta en titt på vår oversikt over de beste fargeverktøyene for webdesignere.
10. Eggradienter
Den som setter sammen denne samlingen med vakre graderinger, har et godt øye for farger og en interessant sans for humor. Hver gradient vises i en eggformet beholder og får et navn som kanskje eller ikke kan forholde seg til fargene på noen måte. Hvis det er et forhold, har vi ikke klart å tyde det.
Eksempelnavn inkluderer 'Successful Immigrant' for en turkis gradient, 'Wozniaks Broken Heart' for en lyseblå og 'Merciful Enemy' for en gul til grønn overgang.
Få din billett til Generate New York
Ledende webdesignarrangement Generer New York er tilbake. Pågår mellom 25. og 27. april og inkluderer overordnede høyttalere SuperFriendly's Dan Mall, webanimasjonskonsulent Val Head, full-stack JavaScript-utvikler Wes Bos og mer. Det er også en dag med workshops og topp nettverksmuligheter - ikke gå glipp av det. Få din Generate-billett nå.
