Skitsevejledninger

En trinvis vejledning til start af et nyt app-designprojekt i sketch

Og hvorfor jeg aldrig, ALDRIG starter dem fra bunden.

Jeg er en fast tro på gennemsigtighed, så inden vi starter, skylder jeg dig dette:
Dele af dette indlæg refererer til et designramme, som jeg selv byggede, og sælger på siden. Når det er sagt, vil denne guide stadig være nyttig, selvom du ikke køber den.

Det er svært at starte et designprojekt.

Det betyder ikke noget, om du er freelance designer, arbejder for et varmt produktbureau eller hjælper med at støtte et stort virksomhedsdesignteam ... det er skræmmende.

Jeg arbejder på et designbureau, der signerer nye kunder hver måned. Min uofficielle titel er noget som Product Concept Designer, som stort set bare betyder, at hver gang vi starter med en ny kunde, får jeg det spændende job med at skabe visionære konceptskærme, der hjælper med at inspirere deres produktkøreplan for det næste år (eller to… eller tre ).

Disse koncepter leveres med stramme tidsfrister og kræver hurtig vending, så min HELE VERDEN er centreret omkring effektivitet og nøjagtighed; mine mockups er nødt til at løse problemet, give syn og være poleret for en jævn overgang til produktionsdesign.

Så vidt jeg kan fortælle, er jeg blevet temmelig effektiv, og jeg troede, at andre designere måske kunne finde fordel ved at se, hvordan jeg starter nye projekter.

Bemærk: Jeg viser dig ikke, hvordan man laver hele måltidet ... bare hvordan man hogge ingredienserne og tænde for ovnen

Indholdsfortegnelse / Forkortet version / "Jeg læser ikke alt det":

  1. Opret filmapperne (ja, for rigtigt)
  2. Vælg farverne
  3. Vælg skrifttype (r)
  4. Konfigurer gitteret
  5. Byg en "Blockframe"
  6. Konverter til Hi-Fi

1. Opret filmapperne

Hvorfor: For at holde mine designfiler og aktiver organiseret!
Værktøj (er), jeg bruger: Finder + Automation (nedenfor)

Hvis du ikke starter på højre fod, tager du hele vejen igennem. Min mappestruktur hjælper med at holde mig organiseret og giver mig en måde at dele designressourcer med forskellige parter (marketing, dev osv.).

Jeg tilføjer en _underscore for at sikre, at disse mapper forbliver øverst på listen.
  • _assets: Denne mappe deles normalt med interne / eksterne dev-teams. Det inkluderer alt, hvad de har brug for for at opbygge appen (dummybilleder / indhold, skrifttyper, ikoner, billeder og logoer).
  • _eksport: Hver gang jeg eksporterer en skærm til PNG, går de her. Denne mappe deles med marketing, så de altid har de nyeste skærme til rådighed til at lægge i forskellige marketingmaterialer (dæk, websider, sociale medier).
  • ui-design: Dette er mine kildefiler. Det er normalt kun en fil, men hvis jeg nogensinde opretter nye, er de gemt her.

Jeg oprettede en automatisering for at oprette alle disse mapper til mig ...

... og du kan få det her gratis:

2. Vælg farverne

Hvorfor: At oprette en basisdesignpalette til mit projekt.
Værktøj (er) Jeg bruger: Coolors.co

Valg af farver er den nemmeste måde at komme i gang på. Hvis du arbejder i et eksisterende designsystem, er disse sandsynligvis allerede defineret, i hvilket tilfælde skal du spørge nogen inden for markedsføring eller visuel design.

Mine designsystemer er altid bygget på 5 hovedfarver:

  • Brand Primær
  • Sort
  • Accent 1 (succes)
  • Accent 2 (Advarsel)
  • Accent 3 (Fare)

Hvorfor disse farver? (se afsnit 2 i den artikel)

Jeg bruger en app kaldet Coolors af Fabrizio Bianchi til at hjælpe mig med at generere en palet. Du trykker på mellemrumstasten, og den vil tilfældigt vælge farver til dig. Når du finder en farve, du kan lide, skal du låse den i, og fortsætte med at generere, indtil du finder dine andre farver. Hvis din mærkefarve allerede er defineret, kan du indtaste hex-værdien, låse den farve og derefter trykke på mellemrumstasten for at generere resten af ​​farverne.

Ser du en god

Når jeg har identificeret hver af mine hovedfarver, tilslutter jeg dem til min Sketch-designskabelonfil. Denne skabelonfil har allerede definerede lagformater, så jeg opdaterer dem bare med de farver, jeg lige har genereret:

Min skabelon har også en

For detaljer om, hvordan du opretter et fuldblæst stilark, skal du læse dette:

3. Vælg skrifttype (r)

Hvorfor: At give min app noget karakter!
Værktøj (er), jeg bruger: Google-skrifttyper og fontpar

Skrifttyper er lige så vigtige for designet som farverne, så tag lidt tid på at vælge de rigtige (r). Fordi du designer en app, som folk skal bruge, er det utroligt vigtigt, at du vælger et godt skrifttype.

Hej Jon, hvad gør en god skrifttype til appdesign?

Hej, jeg er glad for at du stillede Her er nogle spørgsmål, jeg stiller mig, når jeg vælger et skrifttype:

  • Læsbarhed: Kan dette læses i lange perioder?
  • Skalerbarhed: Kan dette læses, når det er stort, og når det er lille?
  • Variabilitet: Er der mindst to vægtvariationer?

Google-skrifttyper opdaterede deres interface sidste år, og det er virkelig fantastisk at bruge. Jeg sørger altid for at teste ting over en hvid og sort baggrund bare for at kontrollere, at alt stadig fungerer.

Indstillingerne i det højre panel er, hvordan jeg kan omfatte min søgning.

Hvis du kan lide flere skrifttyper - f.eks. En til overskrifter og en til indhold - vil du grave skrifttypepar. De gjorde det hårde arbejde for dig og vil vise dig med rette inline, hvordan to skrifttyper ser ud ved siden af ​​hinanden. Det gør det virkelig enkelt at vælge et dejligt par. Plus, det kilder alle skrifttyper fra Google Font, så du ikke behøver at bekymre dig om at skulle betale for noget.

Test altid skrifttyper med bogstaver, tal og tegnsætning. Nogle gange finder du en smuk skrifttype, der har en bisarr "9" eller et underligt udråbstegn. Du vil ikke støde på denne underhed, når du allerede er 24 skærme dybt ind i dit design.

Når du har valgt din (e) skrifttype, skal du oprette tekstformater inde i Sketch til ting som overskrifter, kropsindhold og links. Du skal aldrig tilføje tekst til et design, medmindre det er bundet til en tekststil. Hvis du beslutter at ændre skrifttypen ned ad vejen og har "ikke tildelt" tekst, vil de ikke blive opdateret, når du synkroniserer din fontskift.

Min sketch-skabelonfil har alle disse standardtekststørrelser, der allerede er defineret, så jeg kan bare vælge dem alle, ændre skrifttypen og synkronisere:

4. Konfigurer gitteret

Hvorfor: At etablere justeringskonsistens i hele appen.
Værktøj (er) Jeg bruger: Skitse og en lommeregner

Det er blevet forholdsvis almindeligt, at gitre bygges ud af multipler på 8.

Hvorfor 8?

Det viser sig, at de mest populære skærmopløsninger kan deles med 8. I tabellen nedenfor tester kolonnerne, hvorvidt bredden og højden er jævnt delbar med 8px:

Flere detaljer her: https://spec.fm/specifics/8-pt-grid

Med disse oplysninger kan du begynde at bestemme størrelsen på dit gitter. Først skal du beslutte, hvordan din app skal se ud:

  • Fuld bredde: En app i fuld bredde er kant til kant. Hvis det er en webapp, strækker dit design sig helt ud til browseren.
Jeg kan godt lide at indstille mine tagrender til at være mindst 24px. I dette tilfælde kan renner deles med 8, men kolonnerne er ikke. Ikke en kæmpe aftale.
  • Flydende: En flydende app klæber til et gitter med fast bredde, normalt i midten af ​​vinduet.

For flydende apps kan jeg godt lide, at mine tagrender og kolonner begge kan deles med 8. Her er en simpel ligning:

(12 kolonner * Bredde) + (11 Takrenner * Bredde) = Total layoutbredde

  • Hybrid: En hybrid-app er en blanding af fulde bredde og flydende elementer. Medium-webstedet er en hybrid-app, fordi den øverste header er fuld bredde, men indholdsområdet er fastgjort til 740px.
Dette layout er et flydende layout med nogle elementer i fuld bredde.

En sidste note. Standard Shift + → afstand i Sketch er 10px. Dette bliver SUPER irriterende, når du arbejder på et 8px net. Heldigvis giver Sketch dig mulighed for at ændre dette i præferencer.

5. Lav en "Blockframe"

Hvorfor: At itereere hurtigt på applayouts og UX-interaktionsstrømme.
Værktøj (er) Jeg bruger: Nå ... rektangler.

Inden jeg går ind i wireframe-tilstand, kan jeg godt lide at opbygge det, jeg kalder en “blockframe” for at etablere de forskellige regioner i mit eller flere sider. Ideen her er at begynde at få en fornemmelse af det net, du netop har defineret, og hurtigt blokere de vigtigste dele af siden.

Her er en blokramme, jeg lavede til en chat-app, jeg designer:

Der er ingen begrundelse bag farverne. Tilsyneladende følte jeg mig patriotisk.

Dette tog mig kun 90 sekunder at generere, men det er al den vejledning, jeg har brug for for at begynde at designe grænsefladen. Jeg foretrækker dette frem for fuldt blæst wireframing, fordi jeg har en tendens til at glide ind i hi-fi, når jeg prøver at wireframe hvert element på skærmen. Måske er jeg bare en dårlig designer? Jeg ser bare en masse wireframes, der allerede er så detaljerede, at du lige så godt kunne have gjort det i fuld visuel tro, første gang 'runde alligevel. Bare min mening!

Dette er dybest set UX-fasen, hvor jeg blokerer app-arbejdsgange for at sikre, at enhver interaktion skaber en positiv brugeroplevelse.

6. Konverter til Hi-Fi

Så jeg vil ikke lade dig hænge ...

... men det er her du laver din magi!

Den eneste vigtigste ting i hi-fi-designfasen er at overholde alt, hvad vi konfigurerer i trin 1-5.

  • Gem ting i de rigtige mapper.
  • Brug kun farver i din palet.
  • Gå ikke væk fra dine tekstformater.
  • Overhold altid dit gitter.
  • Blockframe nye layouts, før du gør dem i høj tro.

Resumé

Så det er de trin, jeg tager for at starte et nyt app-designprojekt. Hvis du er interesseret i den sketch-skabelonfil, jeg bruger til alle mine projekter, har jeg gjort den tilgængelig nedenfor. Flere detaljer findes her.

Når jeg ikke skriver, arbejder jeg på Sketch-designværktøjer som UX Power Tools for at gøre dig til en bedre og mere effektiv designer. Alle de bedste Sketch-designere og teams bruger det, og jeg tror, ​​at du måske også kan lide det. Tjek det på Marvel!

Følg UX Power Tools på Twitter
Følg mig på Twitter