{"id":2211,"date":"2020-12-16T10:31:00","date_gmt":"2020-12-16T10:31:00","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=2211"},"modified":"2021-12-09T17:15:13","modified_gmt":"2021-12-09T17:15:13","slug":"basta-ux-ui-design-program-och-applikationer-2020","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/sv\/basta-ux-ui-design-program-och-applikationer-2020\/","title":{"rendered":"Vilka \u00e4r dem 6 b\u00e4sta UX\/UI design programmen?"},"content":{"rendered":"\n<p class=\"has-pale-cyan-blue-color has-text-color\"><strong>Vilket program ska man b\u00f6rja l\u00e4ra med f\u00f6r att l\u00e4ra sig UX &amp; UI design? H\u00e4r f\u00e5r du svaret med en lista p\u00e5 dem 6 b\u00e4sta UX\/UI design programmen.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Varf\u00f6r inte Photoshop och liknande?<\/h2>\n\n\n\n<p>Traditionella program som anv\u00e4nds f\u00f6r grafisk design s\u00e5som Photoshop och Gimp har sedan m\u00e5nga \u00e5r tillbaka upph\u00f6rt vara dem b\u00e4st optimerade programmen f\u00f6r just UX och UI design. <\/p>\n\n\n\n<p>S\u00e5dana applikationer var inte skapta och designade specifikt f\u00f6r att specifikt designa digitala gr\u00e4nssnitt. Och \u00e4ven om dem har f\u00e5tt en massa anv\u00e4ndbara uppdateringar s\u00e5 \u00e4r dem helt enkelt inte lika bra som program skapta f\u00f6r just UX\/UI design.<\/p>\n\n\n\n<p>Photoshop och Illustration har till exempel inga funktioner som till\u00e5ter en skapa klickbara prototyper och UI animationer. Dessutom har dem inga verktyg som \u00e4r bra f\u00f6r front-end utvecklare (t.ex. att kunna plocka HEX-kod p\u00e5 f\u00e4rger och hitta margin och padding).<\/p>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#fbee00\">Lista p\u00e5 dem b\u00e4sta UX\/UI design programmen<\/h2>\n\n\n\n<p>Vilka \u00e4r d\u00e5 dem vanligaste programmen som UX\/UI designers anv\u00e4nder sig av idag? Jo, det \u00e4r program som \u00e4r skapta specifikt f\u00f6r digital design mot webbsidor och appar. <\/p>\n\n\n\n<p><strong>Dem vanligaste och b\u00e4sta UI design applikationerna idag \u00e4r:<\/strong><\/p>\n\n\n\n<ul class=\"has-black-background-color has-background wp-block-list\"><li><a href=\"https:\/\/www.sketch.com\/\">Sketch<\/a><\/li><li><a href=\"https:\/\/www.figma.com\/\">Figma<\/a> (gratis)<\/li><li><a href=\"https:\/\/www.adobe.com\/products\/xd.html\">Adobe XD <\/a><\/li><li><a href=\"https:\/\/www.framer.com\/\">Framer<\/a> (animationer)<\/li><li><a href=\"https:\/\/www.invisionapp.com\/\">Invision<\/a><\/li><li><a href=\"https:\/\/www.axure.com\/\">Axure<\/a><\/li><\/ul>\n\n\n\n<p>Alla program ovan \u00e4r skapta f\u00f6r design av hemsidor och appar. Det inneb\u00e4r att dem \u00e4r mycket b\u00e4ttre anpassade f\u00f6r att skapa:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>vektor-grafik<\/li><li>grupperingar och lager<\/li><li>prototyper f\u00f6r interaktioner<\/li><\/ul>\n\n\n\n<p>Flera av programmen  har \u00e4ven inbyggda funktioner som \u00e4r bra f\u00f6r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>designer-developer handoffs<\/li><li>symboler och symbolbibliotek<\/li><li>prototyper och animationer<\/li><\/ul>\n\n\n\n<p>N\u00e5gra av dem \u00e4r \u00e4ven dedikerade mot micro-animation (s\u00e5som Framer X).<\/p>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#fbee00\">Vad \u00e4r designer-developer handoff, symboler och protoyper?<\/h2>\n\n\n\n<h3 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\">1. Designer-developer handoff<\/h3>\n\n\n\n<p><strong>Designer-developer handoffs<\/strong> \u00e4r processen d\u00e4r en designer presenterar och ger vidare mockups till en utvecklare. Utvecklaren beh\u00f6ver f\u00e5 designen p\u00e5 b\u00e4sta s\u00e4tt, s\u00e5 att hen kan implementera den i kod korrekt.<\/p>\n\n\n\n<p>Se video nedan f\u00f6r visuell f\u00f6rklaring.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"Introducing Cloud Inspector \u2014 free developer handoff in the browser\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/07Dis60R8Fk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<p>Det \u00e4r allts\u00e5 en superviktig funktion som jag kollat p\u00e5 n\u00e4r jag bed\u00f6mt vilka som \u00e4r dem b\u00e4sta UX\/UI design programmen.<\/p>\n\n\n\n<p>Det g\u00e4ller bland annat saker som att <strong>identifiera r\u00e4tt f\u00e4rg<\/strong> p\u00e5 ett element (som en knapp). H\u00e4r beh\u00f6ver man exempelvis en f\u00e4rgplockar. Det g\u00e5r s\u00e4llan bra att gissa sig fram till r\u00e4tt f\u00e4rg p\u00e5 k\u00e4nsla. Det g\u00e4ller \u00e4ven andra saker s\u00e5som att veta <strong>vilka sk\u00e4rmar som ska leda till andra (prototyping)<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exempel p\u00e5 bra funktioner f\u00f6r designer-developer handoff<\/h4>\n\n\n\n<p>Verktyg och funktionaliteter som hj\u00e4lper till med den h\u00e4r transaktionen \u00e4r till exempel auto-genererad front-end kod f\u00f6r grafiska element.<\/p>\n\n\n\n<p>Exempelvis:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&#8220;Eye dropper&#8221; f\u00f6r att identifierar exakt r\u00e4tt hex kod p\u00e5 f\u00e4rger<\/li><li>Verktyg som genererar f\u00e4rdig CSS kod f\u00f6r knappar och skuggor (eller hela komponenter)<\/li><li>M\u00f6jlighet att dela mockups och prototyper p\u00e5 cloud s\u00e5 att olika personer  i teamet kan kommentera och inspektera<\/li><\/ul>\n\n\n\n<h3 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\">2. Symbolbibliotek (Symbol system \/ Component system)<\/h3>\n\n\n\n<p><strong>Symbolbibliotek (Symbol system \/ Component system) <\/strong>\u00e4r en funktionalitet d\u00e4r du kan skapa symboler och komponenter av de grafiska element som du designat. <\/p>\n\n\n\n<p>Se video nedan om &#8220;Symbols&#8221; i Sketch. I Figma heter samma sak &#8220;Components&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"Introducing Symbols\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/3fcIp5OXtVE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<p><strong>Ett exempel p\u00e5 en symbol\/komponent kan vara en knapp. Symbolen inneh\u00e5ller d\u00e5:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Formen av knappen (border-radius, padding, height &amp; width)<\/li><li>Hex-kod p\u00e5 f\u00e4rgen<\/li><li>Default state och hover state mm. <\/li><\/ul>\n\n\n\n<p>Men en komponent kan vara mycket st\u00f6rre \u00e4n s\u00e5. Det kan vara hela sk\u00e4rmar som inneh\u00e5ller m\u00e5nga mindre komponenter. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Symboler och komponenter \u00e4r \u00e5teranv\u00e4ndningsbara<\/h4>\n\n\n\n<p>Det viktiga \u00e4r att du kan \u00e5teranv\u00e4nda symbolerna\/komponenterna om och om igen. \u00c4ndrar du en av dem, s\u00e5 uppdateras symbolen p\u00e5 alla st\u00e4llen du anv\u00e4nt den. <\/p>\n\n\n\n<p>S\u00e5 jobbar du p\u00e5 ett design projekt med 20-30 sidor beh\u00f6ver du inte \u00e4ndra en och samma knapp om och om igen p\u00e5 varje sida. Du beh\u00f6ver bara g\u00f6ra det en g\u00e5ng.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Verktyg f\u00f6r n\u00e4r man skapar Design System<\/h4>\n\n\n\n<p>F\u00f6rdelen med en s\u00e5dan h\u00e4r funktioner \u00e4r att man kan skapa fullst\u00e4ndiga bibliotek av grafiska komponenter. Det kan vara ett helt Design System, vilket \u00e4r som en brand guide fast f\u00f6r det digitala spr\u00e5ket.<\/p>\n\n\n\n<p>Oavsett om ett f\u00f6retag bygger ett design system eller inte s\u00e5 \u00e4r det n\u00f6dv\u00e4ndigt att bygga komponenter. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Effektivisera design- och utvecklingsprocessen + Sparar pengar!<\/h4>\n\n\n\n<p>Detta f\u00f6r att komponenter effektiviserar design- och utvecklingsprocessen. Detta sparar b\u00e5de tid och pengar. <\/p>\n\n\n\n<p>Det g\u00f6r \u00e4ven att alla p\u00e5 teamet, oavsett designer eller utvecklare, kan f\u00f6lja samma design guidelines. D\u00e5 kan man skapa konsistens i det digitala spr\u00e5ket.<\/p>\n\n\n\n<h3 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\">3. Prototyper och animationer<\/h3>\n\n\n\n<p><strong>Prototyper och animation<\/strong> \u00e4r viktiga att ha med i sin design f\u00f6r att f\u00e5 ihop helheten och f\u00f6r att f\u00f6rfina anv\u00e4ndarupplevelse och interaktionsdesign. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Vad \u00e4r protyper och vad \u00e4r dem bra f\u00f6r?<\/h4>\n\n\n\n<p><strong>Prototyper<\/strong> \u00e4r viktiga f\u00f6r att koppla samman flera sidor och visa utvecklaren vad som ska ske n\u00e4r anv\u00e4ndaren g\u00f6r olika handlingar. <\/p>\n\n\n\n<p class=\"has-white-color has-text-color has-background\" style=\"background-color:#222222\"><strong>Vad \u00e4r en prototyp?<\/strong><br>Att skapa en prototyp inneb\u00e4r att du best\u00e4mmer hur olika sk\u00e4rmar (mockups) h\u00e4nger ihop baserat p\u00e5 anv\u00e4ndarens handlingar.<br><br>Exempelvis om du trycker p\u00e5 en &#8220;K\u00f6p&#8221;-knapp p\u00e5 startsidan, s\u00e5 skickas du vidare till betalsidan. D\u00e5 har du kopplat ihop startsidan och betalsidan via en action (tryck p\u00e5 &#8220;K\u00f6p&#8221;-knapppen). Nu har du en prototyp p\u00e5 ett enkelt fl\u00f6de.<\/p>\n\n\n\n<p>Detta \u00e4r extra viktigt om man arbetar med att skapa komplexa hemsidor och system. Eller n\u00e4r man skapar applikationer som \u00e4r modul\u00e4ra (t.ex. React applikationer). D\u00e5 kan det vara s\u00e5 att en handling endast p\u00e5verkar vissa delar av en sk\u00e4rm, men inte skickar anv\u00e4ndaren till en n\u00e5gon ny sida. D\u00e5 m\u00e5ste varje ny state vara v\u00e4ldokumenterad. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Vad \u00e4r animationer och vad \u00e4r dem bra f\u00f6r?<\/h4>\n\n\n\n<p><strong>Animationer<\/strong> beh\u00f6vs f\u00f6r att ge optimal feedback till anv\u00e4ndaren. Dem beh\u00f6vs ocks\u00e5 f\u00f6r att kommunicera information effektivare och f\u00f6r emotionell design. Animationer f\u00e5r digitala produkter att k\u00e4nnas mer levande. <\/p>\n\n\n\n<p>Animationer och motion design blir mer och mer popul\u00e4rt inom UI design d\u00e5 f\u00f6retag har sett att micro-animationer under interaktioner kan ha stora effekter p\u00e5 anv\u00e4ndbarhet och anv\u00e4ndarupplevelsen. <\/p>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#fbee00\">Vilket program ska man b\u00f6rja med?<\/h2>\n\n\n\n<p><strong>\u00c4r du en nyb\u00f6rjare p\u00e5 UX\/UI design eller precis i startgroparna? <\/strong>D\u00e5 kan det vara sv\u00e5rt att best\u00e4mma sig f\u00f6r vilket program som man ska l\u00e4ra sig f\u00f6rst. <\/p>\n\n\n\n<p>Men sanningen \u00e4r att det inte spelar n\u00e5gon stor roll, d\u00e5 dem flesta fungerar baserade p\u00e5 samma principer och funktionaliteter. <\/p>\n\n\n\n<p>N\u00e4r du v\u00e4l har l\u00e4rt dig hur man arbetar med artboards, vectorgrafik, symboler osv, s\u00e5 kommer du l\u00e4tt kunna f\u00f6ra \u00f6ver dina kunskaper till andra applikationer.<\/p>\n\n\n\n<p class=\"has-black-background-color has-background has-medium-font-size\">Jag rekommenderar att du b\u00f6rjar med <a href=\"https:\/\/www.figma.com\">Figma<\/a> (gratis) eller <a href=\"https:\/\/www.sketch.com\/\">Sketch<\/a> (kostar).<\/p>\n\n\n\n<p>Jag b\u00f6rjade sj\u00e4lv med Sketch n\u00e4r jag b\u00f6rjade l\u00e4ra mig, men d\u00e5 fanns inte Figma. <strong>Hade jag b\u00f6rjat idag hade jag valt Figma som ett f\u00f6rsta program<\/strong> d\u00e5 det framf\u00f6rallt \u00e4r <strong>helt gratis<\/strong> och g\u00e5r att anv\u00e4nda i en browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-2020-12-17-at-00.06.21-1024x640.png\" alt=\"\" class=\"wp-image-3111\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-2020-12-17-at-00.06.21-1024x640.png 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-2020-12-17-at-00.06.21-300x188.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-2020-12-17-at-00.06.21-768x480.png 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-2020-12-17-at-00.06.21-1536x961.png 1536w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-2020-12-17-at-00.06.21.png 1722w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Figma Community med gratis resurser<\/figcaption><\/figure>\n\n\n\n<p>Dessutom \u00e4r Figma ett v\u00e4ldigt popul\u00e4rt program med alla funktionaliteter som du beh\u00f6ver f\u00f6r att l\u00e4ra dig skapa mockups och prototyper. Dem har till och med b\u00f6rjat med ett &#8220;<a href=\"https:\/\/www.figma.com\/community\">Figma community<\/a>&#8221; d\u00e4r designers delar med sig av massa grymma paket!<\/p>\n\n\n\n<p>F\u00f6r nyb\u00f6rjare rekommenderar jag generellt Sketch, Figma eller Adobe XD d\u00e5 dem \u00e4r v\u00e4ldigt enkla att komma ig\u00e5ng med. <\/p>\n\n\n\n<p>Applikationer s\u00e5som Framer och Axure har en brantare inl\u00e4rningskurva och mer fokuserade p\u00e5 micro-interaktioner och animationer, s\u00e5dant du inte kommer vara bra p\u00e5 i b\u00f6rjan \u00e4nd\u00e5. <\/p>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#fbee00\">S\u00e5 l\u00e4r du dig UX\/UI design<\/h2>\n\n\n\n<p>F\u00f6rutom att veta vilka dem b\u00e4sta UX\/UI design programmen \u00e4r, s\u00e5 beh\u00f6ver man ocks\u00e5 utveckla teoretiska kunskaper och ett design-t\u00e4nk.<\/p>\n\n\n\n<p>Det b\u00e4sta s\u00e4ttet att l\u00e4ra sig \u00e4r att l\u00e4sa en massa b\u00f6cker, artiklar, kolla p\u00e5 videos och <strong>\u00d6VA!<\/strong> Du m\u00e5ste b\u00e5de l\u00e4ra dig alla grundl\u00e4ggande teoretiska saker (f\u00f6r UX), och \u00f6va p\u00e5 att skapa design och be om feedback. L\u00e4r dig fr\u00e5n andra.<\/p>\n\n\n\n<p>H\u00e4r \u00e4r en artikel om dem b\u00e4sta b\u00f6cker f\u00f6r att l\u00e4ra sig UX\/UI design:<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><a href=\"https:\/\/www.wendyzhou.se\/blog\/learn-ux-ui-design-books\/\">Best 4 Books to Learn UX\/UI Design for Beginners<\/a><\/p>\n\n\n\n<h3 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\"><strong>F\u00f6r nyb\u00f6rjare<\/strong><\/h3>\n\n\n\n<p>N\u00e4r du l\u00e4r dig design fr\u00e5n b\u00f6rjan \u00e4r det b\u00e4st att f\u00f6rst fokusera p\u00e5 att f\u00f6rst\u00e5 dem mest grundl\u00e4ggande principerna av grafisk design, m\u00e4nniska-teknik interaktion samt front-end. <\/p>\n\n\n\n<p><strong>N\u00e5gra exempel nedan p\u00e5 saker att komma ig\u00e5ng med:<\/strong><\/p>\n\n\n\n<ul class=\"has-white-color has-text-color has-background wp-block-list\" style=\"background-color:#222222\"><li><strong>F\u00e4rgteori<\/strong> &#8211; Viktigt f\u00f6r UI design och skapandet av fina produkter<\/li><li><strong>Layouts av gr\u00e4nssnitt<\/strong> &#8211; Exempelvis: hur brukar hemsidor och appar vara uppbygda, vilka element och layouts brukar f\u00f6rekomma? L\u00e4r dig m\u00e4rka vilka konventioner det finns inom gr\u00e4nssnittsdesign<\/li><li><strong>Symmetri<\/strong> &#8211; Hur skapar du det och n\u00e4r ska du anv\u00e4nda det<\/li><li><strong>Anv\u00e4ndbarhets-principer<\/strong> &#8211; Viktigt f\u00f6r UX design, t.ex. Normans design principer<\/li><li><strong>Grundl\u00e4ggande typografi<\/strong> &#8211; Olika typer av fonts och hur kan du manipulera dem f\u00f6r att uppn\u00e5 \u00f6nskad effekt<\/li><li><strong>Informationsarkitektur<\/strong> &#8211; Hur ska komplexa hemsidor och system s\u00e4ttas upp?<\/li><li><strong>Grundl\u00e4ggande prototyping<\/strong> &#8211; Vad det \u00e4r och vad man ska t\u00e4nka p\u00e5 n\u00e4r man skapar dem<\/li><li><strong>F\u00f6rst\u00e5else f\u00f6r HTML &amp; CSS<\/strong> &#8211; Du beh\u00f6ver inte vara en expert, men att f\u00f6rst\u00e5 vad och hur HTML &amp; CSS \u00e4r och fungerar kommer att h\u00f6ja din niv\u00e5 som UX\/UI designer och g\u00f6ra dig mer effektiv i samarbete med utvecklare<\/li><\/ul>\n\n\n\n<h3 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\"><strong>Mer avancera<\/strong>t<\/h3>\n\n\n\n<p>N\u00e4r man satsar p\u00e5 att utveckla och avancera sin kompetens \u00e4r det en bra id\u00e9 att b\u00f6rja utforska f\u00f6ljande:<\/p>\n\n\n\n<ul class=\"has-white-color has-text-color has-background wp-block-list\" style=\"background-color:#222222\"><li><strong>Anv\u00e4ndbarhetstester<\/strong> &#8211; L\u00e4r dig planera, utf\u00f6ra och analysera anv\u00e4ndbarhetstester. Detta \u00e4r viktigt f\u00f6r att testa hur bra anv\u00e4ndbarhet din design har och vilket intryck din design har p\u00e5 anv\u00e4ndare. <\/li><li><strong>L\u00e4r dig fr\u00e5n feedback <\/strong>&#8211; Det \u00e4r viktigt att l\u00e4ra sig uppskatta och f\u00f6rb\u00e4ttras genom feedback och kritik fr\u00e5n andra. Ett s\u00e4tt \u00e4r att ha design critique session p\u00e5 jobbet eller att l\u00e4gga ut sina projekt p\u00e5 sociala medier och be om feedback (Instagram, Dribbble, Reddit osv).<\/li><li><strong>Animationer<\/strong> &#8211; UI motion graphics v\u00e4xer och kommer vara framtiden. R\u00f6rliga gr\u00e4nssnitt och illustrationer.<\/li><li><strong>Design av micro-interaktioner<\/strong> &#8211; Fokus p\u00e5 feedback och emotionell design.<\/li><li><strong>Front-end utveckling<\/strong> &#8211; Bra att l\u00e4ra sig f\u00f6r att f\u00e5 f\u00f6rst\u00e5else f\u00f6r m\u00f6jligheter och restriktioner med utveckling, s\u00e5 att du designar saker som \u00e4r utf\u00f6rbart och ekonomiskt v\u00e4rt. G\u00f6r ocks\u00e5 att du kan vara mer av en brygga mellan design och utveckling. <\/li><li><strong>Design Systems <\/strong>&#8211; Hur man skapar dem och g\u00f6r dem effektiva. Detta kan hj\u00e4lpa ett helt f\u00f6retags produktivitet och spara tid samt underl\u00e4tta en mer strategisk designprocess.<\/li><li><strong>Utveckla komponent bibliotek<\/strong> &#8211; Utifr\u00e5n design systems kan man utveckla och designa hela bibliotek i kod som \u00e4r \u00e5teranv\u00e4ndningsbart. Om du som designer \u00e4ven l\u00e4r dig front-end utveckling kan du vara med och skapa design komponenter och se till att dem blir av h\u00f6g kvalit\u00e9.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Nu vet du vilka dem b\u00e4sta UX\/UI design programmen \u00e4r! Jag hoppas att den h\u00e4r artikeln kunde svara p\u00e5 n\u00e5gra av dina fr\u00e5gor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fler UX &amp; UI design artiklar<\/h2>\n\n\n\n<p>Om du \u00e4r intresserad av att l\u00e4sa mer om UX &amp; UI design s\u00e5 kan du kolla in mina andra relaterade artiklar:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.wendyzhou.se\/blog\/2019\/07\/10\/ui-design-create-soft-shadows-3-guidelines\/\">How to create modern &amp; soft UI shadows<\/a><\/li><li><a href=\"https:\/\/www.wendyzhou.se\/blog\/learn-ux-ui-design-books\/\">Best 4 Books to Learn UX\/UI Design for Beginners<\/a><\/li><li><a href=\"https:\/\/www.wendyzhou.se\/blog\/app-ui-design-in-figma-speed-video\/\">App UI Design in Figma (Speed UI Design YouTube Video)<\/a><\/li><li><a href=\"https:\/\/www.wendyzhou.se\/blog\/2019\/01\/06\/learn-ui-design-for-beginners-how-to-place-your-ui-design-in-a-mockup-with-photoshop-tutorial\/\">How to place your UI design in a mock-up (Photoshop tutorial)<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vilket program ska man b\u00f6rja l\u00e4ra med f\u00f6r att l\u00e4ra sig UX &#038; UI design? H\u00e4r f\u00e5r du svaret med en lista p\u00e5 dem 6 b\u00e4sta UX\/UI design programmen.<\/p>\n","protected":false},"author":1,"featured_media":3109,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[121],"tags":[],"class_list":["post-2211","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-och-ux-design","entry","has-media"],"gutentor_comment":0,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs.png",1280,720,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs-300x169.png",300,169,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs-768x432.png",768,432,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs.png",1280,720,false],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs.png",1280,720,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs.png",600,338,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs.png",800,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/10\/best-ux-ui-design-tools-programs.png",1200,675,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":0,"uagb_excerpt":"Vilket program ska man b\u00f6rja l\u00e4ra med f\u00f6r att l\u00e4ra sig UX & UI design? H\u00e4r f\u00e5r du svaret med en lista p\u00e5 dem 6 b\u00e4sta UX\/UI design programmen.","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/2211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=2211"}],"version-history":[{"count":6,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/2211\/revisions"}],"predecessor-version":[{"id":6232,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/2211\/revisions\/6232"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/3109"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=2211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=2211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=2211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}