UX/UI-ontwerper: hoe leer je een gewild beroep in gameplay

UX/UI designer: hoe je een gewild beroep in gamedevelopment eigen maakt Foto 0
De kwaliteit van de gameplay hangt af van de manier waarop de game informatie overbrengt aan de gamer en het werk met hem organiseert. Het belangrijkste element is de interface, die varieert afhankelijk van het genre, de stijl en de algemene mechanica van het spel. UI UX-design, dat volgens bepaalde principes werkt, is verantwoordelijk voor het ontwerpen van hoogwaardige, functionele interfaces.
Het creëren van een goede gebruikersomgeving is een taak die wordt uitgevoerd door een UX UI-ontwerper. Je hebt het vermogen nodig om in een team te werken, een creatieve kijk, kennis van moderne trends en andere werkaspecten. Verder gaan we in op de bijzonderheden van het creëren van comfortabele gebruikersomgevingen en vertellen we je over het beheersen van het moderne veelgevraagde beroep van UX/UI-ontwerper.

Wat is UX/UI
UX/UI-ontwerp is het proces van het ontwerpen van gebruikersinterfaces waarbij bruikbaarheid en uiterlijke presentatie belangrijk zijn. Een interface-ontwerper die beschikt over de nodige kennis en vaardigheden om hoogwaardige werkomgevingen te creëren, is verantwoordelijk voor deze baan.

De naam van de richting omvat twee delen: UX design is de gebruikerservaring, zijn indrukken bij het werken met de interface. Het gaat erom of de gebruiker het doel kan bereiken, hoe moeilijk het pad is. UI-ontwerp is de gebruikersinterface, de fysieke, visuele kenmerken ervan, gericht op bruikbaarheid en esthetiek van het gebruik.

UX/UI-ontwerper: hoe je een gewild beroep in gamedev onder de knie kunt krijgen Foto 1
Het gebied van interfaceontwerp veronderstelt het vermogen om andermans ontwikkelingen te analyseren, geselecteerde sjablonen te gebruiken die in je eigen programma kunnen worden ingebouwd. Experts geloven – UI-specialisten hebben ontdekt wat beter werkt in games. Dit is wat een patroon is – een gemeenschappelijke ontwerpoptie.

Om de speler een goede interactie-ervaring met het spel te geven, bestudeert de UX/UI-ontwerper de belangrijkste concurrenten, de inspirators van het genre. Het is niet nodig om de prestaties van iemand anders te herhalen, het is beter om inzicht te krijgen in de verwachtingen van het publiek in je ontwerp. Voor een UX/UI-ontwerper zijn niet alleen de elementen en hun rangschikking belangrijk, maar ook het kleurenschema.

Rood wordt gebruikt als indicator van gezondheid, schade. Als een UX/UI-ontwerper groen, blauw of een andere kleur gebruikt, zal dit de deelnemer in een actieve spelscène in verwarring brengen. Ze dienen een ander doel, bijvoorbeeld om energie en de hoeveelheid grondstoffen weer te geven.

UX, d.w.z. gebruikerservaring, is gebonden aan het genre van het spel, UI-ontwerp volgt het thema. Als je menu’s voor het personagevenster en inventarismenu’s voor RPG’s ontwerpt, moet je kijken naar andere rollenspellen. Als er een RPG met een middeleeuwse setting wordt bedacht, kijkt de UX/UI-ontwerper naar de UI in vergelijkbare projecten.

Eerst wordt de UI ontworpen inclusief andere succesvolle varianten. Na het schetsen past de UX/UI-ontwerper het ontwerp aan zijn eigen taken en stilistische eigenaardigheden aan, waarbij hij probeert de eindgebruiker nieuwigheid en gemak te bieden.

UX/UI-ontwerper: hoe leer je een gewild beroep in game-ontwikkeling Foto 2
Tijdens het initiële ontwerp creëert de UX/UI-ontwerper de eerste versie van de interface, die een primitieve schijn is van het verwachte ontwerp. De kleur met decoratieve elementen is niet zo belangrijk, omdat het belangrijkste is om de pictogrammen met pictogrammen op hun plaats te zetten.

Het is de taak van de interface-ontwerper om de ontwikkeling vanuit het perspectief van de speler te bekijken. De visuele boodschap mag niet misleidend zijn, waardoor je verdwaalt in de objecten. Het is ideaal als de gamer meteen de betekenis en het effect van een knop begrijpt als erop wordt gedrukt.

In Dark Souls is de inventaris van de speler gebaseerd op een raster met voorwerpen. Als er op wordt geklikt, verschijnt er gedetailleerde informatie met een korte beschrijving in de in-game itemstrip. Dit is een goed voorbeeld van een gegevenshiërarchie waarin elke metriek zijn eigen plaats heeft.

UX/UI-designer: hoe je een gewild beroep in gamemadev onder de knie krijgt Foto 3
Ontwerpers gebruiken vaak de techniek waarbij de interface niet meteen verschijnt, maar zich geleidelijk opent voor de gebruiker. Dit is belangrijk in allerlei RPG-achtige spellen, waar de slinger op het scherm de onvoorbereide gebruiker afschrikt. Maar het is de moeite waard om nieuwe elementen te laten zien naarmate het spel vordert – zodat hij geleidelijk op snelheid komt en met plezier de gebruikersopties leert kennen.

Als UI-elementen animatie krijgen, is dit een parallelle ontwerprichting. Specialist kan verschillende soorten knipperen, de kleur van de achtergrondverlichting, bijvoorbeeld de actieve spreuk wordt geschetst met een knipperende strip, tijdens de toepassing krijgt een groene achtergrondverlichting. Een vergelijkbaar effect is online RPG Royal Quest, shooter Metro Exodus stelt voor om een animatie te maken van het gevoel van een retro-monitor (instellingenvenster). UX/UI-ontwerper moet onthouden dat animaties en andere versieringen het gebruiksgemak van de gebruiker niet in de weg mogen staan.

Een belangrijke functie in UX/UI-ontwerp wordt uitgevoerd door testers die controleren:

logische lay-out van pictogrammen;
intuïtief begrip van betekenissen
beschikbaarheid van begeleidende uitleg;
visuele perceptie van menu’s, individuele knoppen;
gemak van klikken;
snelheid van bediening.
De testers krijgen een checklist aangeboden met de bovenstaande punten. De UX/UI-ontwerper ontvangt opmerkingen, bijvoorbeeld als het pictogram voor opslaan niet wordt geassocieerd met de opgegeven procedure of als de testers vinden dat het symbool op de verkeerde plaats staat. De UX/UI-ontwerper moet hier zeker naar luisteren om het product vroeg in de ontwikkelingsfase te verbeteren.

Het belangrijkste kenmerk van een interface is de esthetische component. Het is goed als het overeenkomt met het genre, de sfeer van het product, maar UX/UI-ontwerper kan experimenteren.

Het menuontwerp van Persona 5 werd bijvoorbeeld zo helder mogelijk gemaakt en kreeg een interessante positionering, die het gebruiksgemak niet beïnvloedde, maar wel memorabel was.

De interface van het spel Manor Matters is stilistisch consistent. Spelers die met puzzels te maken hebben gehad, hebben geen problemen met oriëntatie, maar merken de duidelijke structuur van de spelruimte, het originele ontwerp, op.

Bij het maken van een UX-interface moet het ontwerp eenvoudig en tegelijkertijd functioneel zijn. UX/UI-designer houdt rekening met de verwachtingen van het potentiële publiek, laat zich inspireren door andere ontwikkelingen, maakt een voorlopige lay-out. Het ontwerp wordt in zijn definitieve staat gebracht, opgepoetst en toegevoegd aan het product.

Het is mogelijk om een geweldige UI te bereiken door een creatief idee te vinden, zoveel mogelijk na te denken over de opbouw van de interface, te implementeren in een mooie grafische stijl. Denk verder aan het verkrijgen van de juiste kennis en vaardigheden, het analyseren van de tools van specialisten, andere details van de ontwikkeling.

Werktools van UI/UX-ontwerper
Productieve hulpmiddelen stellen de UX/UI-ontwerper in staat om hightech mockups en prototypes te maken en ze naar het stadium van het eindproduct te brengen. Dit zijn de bouwstenen van het ontwerp die volledige functionaliteit bieden.

UX- en UI-tools worden zowel op conceptueel niveau als bij de implementatie gebruikt. Tot de nuttige hulpmiddelen voor het ontwerpen en implementeren van interfaces door een UX/UI-ontwerper behoren:

Sketch. Een veelgevraagd ontwerpprogramma waarmee je laagstijlen, tekststijlen, grootte en uitlijning kunt wijzigen. Ook UX/UI-ontwerper krijgt een assortiment van plugins die de functionaliteit uitbreiden om het resultaat te verbeteren
InVision Studio. Als onderdeel van het digitale ecosysteem krijgen UX/UI-ontwerpers alles om een UI te maken die in eerste instantie geanimeerde elementen bevat. De software biedt een digitaal rallybord, een samenwerkingsfunctie met bewerkingen en feedback.
Axure. UX/UI-ontwerpers gebruiken de software om prototypes te ontwikkelen die een stapsgewijze workflowcontrole hebben. Functionaliteitstesten worden hier geïmplementeerd. Het resultaat is een volwaardig product dat klaar is om aan ontwikkelaars te worden overhandigd. Belangrijke gebeurtenissen, belangrijke veranderingen toont het programma online zonder belangrijke details te missen.
Craft. Dit is een plugin van het bovengenoemde bedrijf InVision, compatibel met Sketch en Adobe Photoshop. Het introduceert real-time samenwerking en één versie van een project. UX/UI-ontwerper krijgt ingebouwde toegang tot grafische bibliotheken van Getty en iStock, wat het proces van selectie en integratie van content versnelt.
Proto.io. De tool die UX/UI-ontwerper gebruikt voor nauwkeurige mockups en full-cycle uitvoering, met integratie en testen. Voegt teamcommentaar, videocommunicatie en integraties met testproducten zoals Lookback en Validately toe.
Adobe XD. In dit programma krijgt de UX/UI-ontwerper vectortools voor het maken van lay-outs en prototypes met interfaces. Real-time werk wordt hier gerealiseerd, geavanceerde tools zijn aanwezig. Ze worden duidelijk gebruikt, hebben functionaliteit voor het integreren van dynamische elementen in prototypes.
Marvel. De software is geschikt voor een UX/UI-ontwerper die geen ervaring heeft met prototypen. De intuïtieve en transparante workflow biedt prototypes, wireframes en gebruikerstests. De Handoff-functie geeft ontwikkelaars HTML-code en CSS-stijlen voor het opmaakproces.
Figma. De oplossing voor professionele UX/UI-ontwerpers voor dynamische prototypes en mockups, testen en voortgangssynchronisatie. Meerdere mensen kunnen aan de interface werken, statussen tonen actieve deelnemers aan de taak. Er is een browserversie en een persoonlijk abonnement is gratis.
Framer X. Werkt in React en biedt de UX/UI-ontwerper dezelfde functionaliteit als de vorige apps. Extra plugins voor de integratie van sociale mediakanalen (waaronder Snapchat en Twitter), spelers voor het afspelen van populaire mediaformaten en andere componenten zijn geïmplementeerd.
Origami Studio. Een geweldige tool van het Facebook-team voor complexe taken die worden uitgevoerd door ervaren specialisten. UX/UI-ontwerpers kunnen afgewerkte prototypes maken in de patch-editor met integratie van uitgebreide functionaliteit. Kortom – prototypes met een afgewerkte look en feel werken als afgewerkte apps en pagina’s.
Webflow. Ontwikkeling met deze tool wordt uitgevoerd zonder kennis van HTML en CSS. Interfaces worden gebouwd door elementen te slepen en neer te zetten. Je krijgt een afgewerkt product met automatisch gegenereerde code zonder het prototype over te zetten naar het ontwerp.
FlowMapp. UX/UI-ontwerper werkt met structuur, flows, design maps die nodig zijn in de eerste fase van de ontwikkeling van een user experience-strategie. Dit is een UX-georiënteerde tool, dus professionals zullen blij zijn met de zeer gespecialiseerde functionaliteit.
Balsamiq. Dit is een goed hulpmiddel voor het maken van wireframes waarvoor geen weergave van hoge kwaliteit nodig is. De functionaliteit is zelfs beschikbaar als een UX/UI-ontwerper minimale ervaring heeft.
VisualSitemaps. Speciale software weet hoe Sitemap-bestanden te maken met een geautomatiseerd proces, wachtwoordbeveiligd browsen van niet opgestarte websites, ingebouwde import in het programma Sketch.
Treejack. De software organiseert content op kwalitatieve wijze, waardoor het gestructureerd wordt. Een UX/UI-ontwerper kan dit bereiken dankzij informatiearchitectuur – de specialiteit van Treejack. Gebruikers testen de boomstructuur van de site met gesimuleerd werk van de deelnemers. Aan het einde genereert de software resultaten waarmee de UX/UI-ontwerper de structuur van de secties kan verbeteren.
Wireframe.cc. Deze service biedt minimalistische tools voor het maken van wireframes met lage precisie, met een eenvoudig palet en rechthoekige elementen. De ongecompliceerde interface maakt het de UX/UI-ontwerper gemakkelijk om te ontwerpen en de ingebouwde demo activeert het testproces.
Optimale workshop. Het platform is georganiseerd voor UX-creatie, zodat u de bruikbaarheid voor klanten kunt analyseren en informatiearchitectuur kunt definiëren. De ingebouwde analysemodule geeft UX/UI-ontwerper informatie over gebruikers, interactie met ontwerpelementen. De service integreert met Treejack, Chalkmark, Reframer, waardoor een enkel pakket tools ontstaat.
Dit zijn de toepassingen die een UX/UI-ontwerper het vaakst gebruikt. Naarmate ze meer ervaring hebben, wordt hun lijst uitgebreid en aangevuld met andere software om de workflow naar een professioneel niveau te tillen.

De nuttigste boeken voor UI/UX ontwerpers
Boeken blijven zelfs in de 21e eeuw een bron van unieke kennis, ook voor IT-beroepen. Ze bieden inspiratie en informatie van erkende UX/UI ontwerpers. Je kunt een klassieke papieren versie kopen of een elektronische editie bestellen met onmisbare informatie voor de UX/UI-ontwerper.

We hebben veel tutorials geanalyseerd en 5 meest interessante geselecteerd:

Cliff Kuang “User Friendly”. De tutorial gaat over de impact van design op menselijk gedrag, mentale connecties en de wereld in het algemeen. Je leert hoe design en maatschappij met elkaar verbonden zijn om gemotiveerd te raken om in de UX-richting te werken.
Adam Wathan & Steve Schoger “UI refactoren”. Een paar auteurs, vertegenwoordigd door een ontwerper en een ontwikkelaar, halen het ontwerp van interfaces uit elkaar en geven tips over hoe je de perfecte interactie ontwerpt.
Steven Pressfield “De oorlog om creativiteit. Hoe interne barrières te overwinnen en te beginnen met creëren.” De auteur vertelt hoe een UX/UI-ontwerper (en niet alleen) kan vechten tegen uitstelgedrag, onzekerheid en zelftwijfel om creatieve projecten te verbeteren.
Nir Eyal “Aan de haak. Hoe je gewoontevormende producten maakt.” Voor UX/UI-specialisten is gedragsontwerp een bepalend vakgebied, net als consumentenpsychologie. De auteur verdeelt gewoontevorming in vier stadia, waarna de UX/UI-ontwerper verslavende producten creëert.
Simon Sinek’s “Start with Why?”. Nog een boek over het beïnvloeden van menselijk gedrag, maar dan in het teken van de impact van leiderschap op het team.
Deze boeken zullen UX/UI-ontwerper helpen om de juiste richting van het werk te kiezen, om zich met creativiteit op te laden voor het succesvol bereiken van het doel. Over het algemeen moet de specialist zijn bibliotheek voortdurend aanvullen, zodat hij niet op één plaats blijft staan en zichzelf verbetert.

De nuttigste sites voor UI/UX ontwerpers
Naast boeken kan een UX/UI-ontwerper een paar online bronnen aan zijn favorieten toevoegen die hem up-to-date houden en informatie geven over ontwerptrends. De 10 “masthoofden” onder de websites voor UX/UI ontwerpers zijn als volgt:

UX Magazine. Constante updates van ideeën, professioneel commentaar van CX-, UX- en EX-experts.
UX Journal. Gespecialiseerde artikelen over psychologie, productontwerp, UX/UI.
UX Beweging. Een geweldige site met een indrukwekkende laag ervaring in het ontwerpen van interfaces, het verbeteren van gebruikerservaringen sinds 2010.
UXmatters. Post echte, bewezen casestudy’s van UX-experts waar UX/UI-ontwerpers naar kunnen opkijken.
UX Meesterschap. Slechts 58 artikelen hier, maar geschreven en doorgelicht door echte UX-experts.
Dozen en pijlen. Een geweldig portaal voor UX/UI-ontwerpers over trends in grafisch ontwerp en informatiearchitectuur.
HeyDesigner. Constante updates van tips voor frontend, pictogramontwerp en UX/UI-ontwerp laten niemand onverschillig.
UXPUB. Chique tijdschrift over motion design, productiviteit en UX/UI.
UX Collective. Heeft een half miljoen abonnees en is een onafhankelijke publicatie over UX.
UX Planet. De auteurs voegen dagelijks artikelen toe uit verschillende gebieden van interfaceontwerp.
Een UX/UI-ontwerper kan zich ook abonneren op Telegram-kanalen die vaak nuttige informatie bieden. De top tien omvat:

Interfaces zonder kaf. Gesprekken over gezond verstand in ontwerp, goede softwareontwikkeling.
UX Live. Publiceert actuele UX-trends, heeft longreads.
Cyrillisch.ontwerp. Een verzameling van de beste cyrillische sites waarvan het ontwerp een UX/UI-ontwerper kan inspireren.
/designer. Praat voortdurend over tools, ontwerpchips, verdunt de stroom met tips voor specialisten van verschillende niveaus.
UI gud. Een ander kanaal over het getalenteerde werk van UX/UI-ontwerpers.
UI Fail. Toont voorbeelden van hoe het niet moet.
Huix. Een informele blog van UX/UI-ontwerpers met nuttige tips.
Over bruikbaarheid. Naast UX praten ze hier ook over werken op afstand en het implementeren van hun eigen producten.
dui. Ze vertalen UX-artikelen in een taal die zelfs voor beginners begrijpelijk is, door interfaces te parsen.
Hel UX. Naast slechte projecten worden er ook gerelateerde verhalen gepubliceerd.
Het beroep van UX/UI-ontwerper houdt in dat je interfaces ontwerpt en implementeert die duidelijk en mooi zijn, maar ook functioneel en gemakkelijk voor de klant. Een UX/UI-ontwerper moet zich voortdurend ontwikkelen en creativiteit ontwikkelen, niet om trends te volgen, maar om ze zelf te zetten.