Introduktion af Launchpad til Sketch

Publicer websteder direkte fra Sketch, ingen kodning er nødvendig.

Launchpad konverterer dit design til HTML og CSS og offentliggør dit design som et rigtigt live websted.

Opdatering: Launchpad er nu en del af Anima værktøjskasse, der giver designere mulighed for at oprette responsive og interaktive websteder, alt sammen inden for Sketch.
Opret responsive og interaktive high-fidelity-prototyper, alt inden for skitse

For 4 måneder siden har vi lanceret et nyt produkt, der ændrer den måde designere designer på. Auto-layout til skitse gør det muligt for designere at oprette lydhøre design på en problemfri måde.

For to måneder siden har vi introduceret en ny funktion, der hedder Stacks. Stakke er Flexbox inden for Sketch. Denne kraftfulde funktion gjorde designe responsive designs endnu lettere og bedre.

Disse milepæle har banet vejen for vores nye produkt.

Vores nye produkt giver designere mulighed for at udgive websteder med et enkelt klik direkte fra Sketch.

Besøg webstedet: https://launchpad.animaapp.com

Indtil nu var sketch-design kun pixels. I dag bliver de i live. Skitse-design af websteder bliver virkelige websteder. Design, der blev gjort lydhør med Auto-Layout, reagerer nu på samme måde i en browser på et ægte websted.

Launchpad er en platform som en service for designere. Hele interface er integreret problemfrit i Sketch, så du kan føle dig hjemme.

Launchpad for Sketch er et webudgivelsesværktøj til:

  • Landingssider
  • Marketingwebsteder
  • Statiske websteder

Launchpad understøtter ikke i øjeblikket:

  • Dynamiske websteder med Javascript
Det er perfekt til landingssider og marketingwebsteder.

Oversigt over hovedfunktioner

  • Breakpoints - En måde at få dit design til at se fantastisk ud på mobil, tablets eller desktops.
  • Links —Hvert tegnebræt er en webside. Du kan konfigurere links mellem tegnebræt eller til eksterne websteder.
  • Formularer - Du kan oprette formularer og gøre det muligt for besøgende på webstedet at indsende oplysninger såsom deres kontaktoplysninger.
  • Videoer - Du kan integrere en videoafspiller på webstedet. YouTube, Vimeo, MP4 eller GIF understøttes alle.
  • Analytics - Spor besøgende med din foretrukne analyseudbyder.
  • SEO - Metatags til søgemaskiner og websteder på sociale medier.

Lad os dykke ned i hver af disse funktioner!

stoppunkter

Breakpoints er en måde at få dit design til at se godt ud på mobil, tabletter eller desktops.

Sådan opretter du Breakpoints

  1. Design en webside i flere tegnebrætter, hvor hvert tegnebræt har en specifik skærmbredde.
  2. Brug knappen Breakpoints til at markere de flere tegnebræt som den samme webside.
Design af Zhenya & Artem

Links

Der er 3 typer links:

  1. Sidelink - En forbindelse mellem forskellige tegnebræt
  2. Forankringslinks - Et link inden for det samme tegnebræt
  3. Eksterne links - Et link til et eksternt websted
Opret link til et andet tegnebrætOpret et ankerlinkOpret et eksternt link

Forms

Formularer giver besøgende af webstedet mulighed for at indsende oplysninger såsom deres kontaktoplysninger.

En formular er sammensat af:

  • Tekstindgange - Et eller flere tekstinputlag
  • Submit-knap - One Submit-knaplag

Når du indstiller et lag som en knap Send, vil formularindstillinger afsløre:

  • E-mail - valgfri e-mail-adresse til at sende beskeder, når besøgende sender oplysninger
  • Regneark - valgfrit Et navn på et regneark, som du kan se og downloade som CSV for alle poster
  • Succeside - valgfrit Hvor de skal omdirigere besøgende, når deres indsendelse har været vellykket.
  • Fejlside - valgfrit Hvor de skal omdirigere besøgende i tilfælde af, at deres indsendelse mislykkedes.

Eksempel

Live kontaktformular
Skitse fil

Baseret på kontaktformular af Sophinie Som

Videoer

Du kan integrere en videoafspiller på dit websted ved at indstille et lag som en video.
Når du vælger videolaget, kan du give et link til en video, der vil blive præsenteret på webstedet.

Understøttede video-URL'er er: YouTube, Vimeo, MP4 og GIF

eksempler

Landingssidesdemo

  • Live-websted Åben
  • Skitse fil Download
  • Video af Coverr

Videoafspiller-demo

  • Live-websted Åben
  • Skitse fil Download

Analytics

For at spore indgående trafik på dit websted kan du tilmelde dig en hvilken som helst af Analytics-udbydere og indsætte det kodestykker, de leverer.

Trinoversigt:

  1. Tilmeld dig en Analytics-udbyder efter dit valg.
  2. Opret et webstedssporingsprojekt i Analytics-udbyderens betjeningspanel.
  3. Kopier sporingskodestykket, de leverer til dit tavle.
  4. Indsæt sporingskodestykket i afsnittet Launchpad Analytics under Administrer websted.

Google Analytics

Mere information om Analytics er tilgængelig her

SEO

Metatags er en del af HTML. De giver mulighed for at give oplysninger om webstedet, der ikke faktisk præsenteres for besøgende, men bruges af software, der kan læse disse tags og bruge deres oplysninger.

  • Søgemaskiner som Google bruger Metatags til at indeksere webstedet i deres database.
  • Websteder på sociale medier bruger specialiserede metatags for at aktivere forhåndsvisning af websider i deres feeds.

Du kan redigere disse tags for at optimere den måde, dit websted ses på af søgemaskiner, sociale medier-websteder med mere.
Bedre information såsom et billede og en klar beskrivelse kan øge trafikken til dit websted.

Opret responsive og interaktive high-fidelity-prototyper, alt inden for skitse
  • Kom igang
  • Fra dine venner på Anima App
  • Til diskussion er du velkommen til at melde dig ind i vores Facebook-gruppe