Webbplatsmodell: 4 populära metoder att utforska

Webbplatsmodeller

Webbplatsmodeller kan skapas på många olika sätt. Det är sant att det inte finns något 'bästa' tillvägagångssätt, men beroende på vissa UI- och UX-designers stilar och preferenser (och designprocessen) kommer vissa att fungera bättre än andra.

I den här artikeln tittar vi på fördelar och nackdelar med fyra av de mest populära alternativen: end-to-end UX-verktyg, mockup-verktyg, grafisk designverktyg samt kodade mönster som börjar suddiga linjerna mellan webbplatsmockups och prototyper.

Om du vill ha trådlösa ramverktyg specifikt, se det här inlägget på bästa trådramverktygen , eller för en bredare samling, kolla in vår mega-sammanfattning av bästa webbdesignverktyg .

GenerateJS-banner

Klicka på bilden för att ta reda på mer och hämta dina biljetter(Bildkredit: Future / Toa Heftiba, Unsplash)

Gör inte misstaget att tro att alla webbplatsmodeller är desamma. Enkla beslut om plattformar, trohet och kodning ger alla väsentligt olika resultat. Vet vad du vill ha och vad dina mål är innan du ens börjar designprocessen - om du vill ha ett verktyg som stöder alla tre faserna är det bäst att börja använda det än att växla över halvvägs. På samma sätt, om du behöver en fantastisk, helt realistisk mockup, kom ihåg att du kommer att använda en grafisk designredigerare någon gång.

var är sökvägspanelen i illustratören

01. End-to-end UX-verktyg

På det högsta nivån finns end-to-end-verktyg som syftar till att tillfredsställa hela arbetsflödet: mockups, prototyper, dokumentation, handoffs för utvecklare och designsystem. UXPin har tillgodosett detta behov sedan början av 2010-talet, men ett antal andra varumärken, som Adobe och InVision, försöker nu också skapa ett verktyg för att styra dem alla.

UXPin

UXPin har robust prototyp, mockups, dokumentation och utvecklingshandoff

Så hur staplar dessa verktyg bara för att skapa mockup? De kan ta itu med dem utan problem - och sedan några. Med UXPin kan du till exempel skapa mockups med flera tillstånd och interaktioner. Det efterliknar till och med vissa funktioner i Photoshop och Sketch genom att inkludera ett pennverktyg.

Å andra sidan, Studio av InVision , möjliggör en ganska snygg animeringsredigering; medan Adobe XD låter dig öppna Photoshop- och Sketch-filer i dina XD-mönster och använda färger, symboler, linjära övertoningar och teckenstilar.

Studio InVision

Studio av InVision syftar till att skapa ett helhetsflöde

Viktigast av allt erbjuder end-to-end-verktyg nu designsystem för att säkerställa konsekvens av mockups över projekt. Designingssystem ger alla en enda sanningskälla för tillgångar och designprinciper över olika verktyg. Om du planerar att skapa många mockups blir den här funktionen nästan obligatorisk.

När du väljer ett helhetsverktyg för att skapa din webbplatsmodell är det värt att överväga följande aspekter:

  • Trohet : Hur kraftfullt är verktyget för visuell design och interaktionsdesign?
  • Konsistens : Vilka funktioner säkerställer designkonsistens i ditt arbete?
  • Noggrannhet : Speglar de element som du arbetar med ”sanningskällan” i din organisation?
  • Samarbete : Kan du samarbeta med intressenter eller andra designers?
  • Handoff för utvecklare : Hur genererar verktyget specifikationer och tillgångar för utvecklare?

02. Dedikerade mockup-verktyg

Mindre robusta lösningar som Princip , Framer , Moqups eller Balsamiq kan fortfarande ge dig allt du behöver för att bygga din mockup - du tappar bara de extra arbetsflödet och designens konsistensfunktioner. Dessa verktyg är utformade för att göra skapandet så enkelt som möjligt, så att du kan fokusera mer på stilistiska beslut och mindre på hur du kan manipulera programmet.

Dedikerade mockup-verktyg har tydliga fördelar: Nybörjare drar nytta av deras användarvänlighet, medan experter uppskattar designen som är skräddarsydda efter deras avancerade behov. I den mer avancerade änden är verktyg som Framer och Principle specialiserade på animationer och interaktioner för mockups.

Framer

hur man håller en penna korrekt
Verktyg som Framer är specialiserade på interaktioner

I den nedre änden ger Moqups och Balsamiq mer funktionalitet än icke-designverktyg som ibland används för trådramar och mockups (t.ex. Grundton ), men de är begränsade till endast low-fidelity-mönster. De kan dock vara ganska användbara om målet är att skapa trådlösa ramar med låg trohet mycket snabbt.

När det gäller mockup-verktyg måste du bestämma om en enkel trådlös ramningslösning bara kommer att göra, eller om du behöver mer avancerad skärmdesign. Oavsett vilket mockupverktyg du väljer, se bara till att du är villig att acceptera förlusten av samarbetsflöden och mindre designkonsistensfunktioner som erbjuds från end-to-end-verktyg.

03. Programvara för grafisk design

Vissa designers svär vid programvara som Photoshop CC , Skiss eller Illustrator CC , särskilt de som är särskilt skickliga eller bekanta med verktyg som erbjuder kontroll ner till pixeln. Plattformar för grafisk design fungerar bäst om du strävar efter den högsta nivån av realism och visuell trohet. Och som vi förklarar i vår guide till snabb prototypning med Photoshop CC , det kan vara lättare än du tror.

Photoshop CC

Photoshop ger finkornig kontroll, men kan vara överdrivet för enkla mockups

Att arbeta med grafisk designprogramvara ger dig tillgång till ett nästan oändligt urval av högt definierade färger, så om du arbetar inom begränsningarna för ett styvt och förinställt färgschema - till exempel under särskilda varumärkesregler - då kan dessa program vara ditt bästa alternativ. Mer än färgalternativ, dessa program erbjuder mycket mer visuella verktyg, så att du kan ta itu med detaljerna.

Nackdelen med att använda denna typ av programvara är dock att det kan vara svårt att översätta när det är dags att börja koda designen. Det som fungerade i Photoshop kanske inte alltid fungerar i kod (element som teckensnitt, skuggor, lutningseffekter och så vidare), vilket kan översättas till slöseri med att räkna ut lösningar för prototypfasen.

För stiltunga sidor kan det hjälpa till att hamra ut de specifika visuella detaljerna under mockup-fasen, i vilket fall Photoshop eller Sketch ger dig flest alternativ. På samma sätt, om du har att göra med en nit-picky eller svårt att behaga klient, kan det vara lättare att presentera dem för en underbar och imponerande mockup.

mockups kan dras till UXPin

Mockups som skapats i Photoshop eller Sketch kan dras och släppas till UXPin

Det är också värt att nämna att mockups som skapats i Photoshop eller Sketch kan dras och släppas in i prototypfasen med UXPin. Detta gör att du enkelt kan animera alla lager (ingen utplattning) med några få klick och säkerställer att du inte behöver börja om från början när det är dags att prototypa.

Om grafik inte är din enda prioritet kan du vara effektivare med ett verktyg som låter dig göra wireframing, mockups och prototyper på ett och samma ställe. Grafisk designprogramvara kan vara mer problem än vad det är värt för mockups om du inte letar efter optimal visualisering - du kommer definitivt att behöva kommunicera regelbundet med din utvecklare, eftersom dessa verktyg inte är utformade för samarbete.

04. Kodade mockups

Om du huvudsakligen är en designer och inte känner dig bekväm med kodning är det uppenbarligen inte ett alternativ. Som diskuteras i Guiden till Mockups , kodade mockups är inte standardvalet.

Mest kodning kan skjutas upp till prototypfasen (om du skapar en HTML / JavaScript-prototyp) eller till och med senare (om du använder ett prototypverktyg). Men trots komplexiteten och potentiella hinder finns det många respektabla designers som förespråkar införande av kod i mockup-fasen.

Medan förbättringar av verktyg och teknik innebär att fler och fler möjligheter öppnas i layoutdesign, är inte allt lätt (eller till och med möjligt) att återskapa i kod. Om du börjar med kod kan du genast veta vad du kan och inte kan göra. Om du känner dig bekväm med kod kan det också hävdas att börja med detta är mindre slöseri - mockup kommer ändå att hamna i HTML / CSS.

hur man ställer in alla foton till privata på facebook

Men som vi nämnde tidigare är mockups med kodning inte en populär strategi av fler anledningar än svårigheten med kodning. Att börja koda för tidigt kan begränsa din kreativitet och beredskap att experimentera, eftersom det är lätt att oroa sig över möjligheterna med dina idéer i kod snarare än hur spännande de kan se ut.

Det är upp till dig när du ska införa kodning. Se bara till att du känner till dina designmål och håll utvecklarna uppdaterade om hur du prioriterar funktioner.

Läs mer: