|
Een goed gecoördineerde interactie tussen ontwerper en ontwikkelaar is een garantie voor een succesvol project. In dit artikel hebben we een paar tips en toepassingen achtergelaten om de organisatie van samenwerking te verbeteren. Het is 2020, en als we nog steeds geen vliegende auto’s hebben en niet de mogelijkheid hebben om elk weekend op ruimtevaart te gaan, dan moeten we in ieder geval het proces van overdracht van ontwerp tussen ontwerpers en ontwikkelaars zoveel mogelijk optimaliseren. Hier zijn enkele delen van het proces die we vaak over het hoofd zien: Beeldoptimalisatie Websites zijn bestanden die in grootte variëren. Hoe groter de site, hoe langzamer deze wordt geladen. Dit heeft invloed op de rangschikking, de algehele prestatie van de webpagina en de promotie van de site door de algoritmen van zoekmachines. Ongeveer 21% van de grootte van een site bestaat uit afbeeldingen. Hieruit volgt dat het de moeite waard is om de tijd te nemen om afbeeldingen te comprimeren voordat u ze naar ontwikkelaars stuurt. U kunt hiervoor een gratis tool genaamd ImageOptim gebruiken. ImageOptim in actie. Met deze tool kunt u de bestandsgrootte met 20-80% verkleinen. Maar zorg er vooral voor dat al uw afbeeldingen in mappen zijn georganiseerd en de juiste namen hebben. Dit lijkt misschien een kleine stap, maar elke optimalisatie die u kunt doen, zal ervoor zorgen dat uw site zich onderscheidt van de concurrentie, en de laadsnelheid zal een sleutelrol spelen bij het promoten van uw site. Typografie Allereerst: zorg ervoor dat u over de juiste licenties beschikt. Als u het zich niet kunt veroorloven om apparatuur onder licentie te kopen, probeer deze dan in geen geval te stelen. De gevolgen van piraterij kunnen kritiek zijn. Gebruik gewoon Google Font. Lettertypen exporteren uit het lettertypecatalogus Open het lettertypenboek, selecteer de lettertypen die u wilt exporteren, klik op Bestand> Lettertypen exporteren en selecteer de locatie waar u ze op uw computer wilt opslaan. Stuur deze bestanden vervolgens naar uw ontwikkelingsteam. Letterstijlen De volgende stap is om uw lettertypen correct te documenteren. Gebruik ze in uw projectbestand om uw ontwerp- en ontwikkelingsproces efficiënt en gemakkelijk te houden. Maak lettertypestijlen Als u niet bekend bent met hoe de detectie van lettergrootte werkt voor web- en mobiele apps, vindt u hier een aantal bronnen om u op weg te helpen:
Type richtlijnen voor materiaalontwerp Wanneer ik een typografiesysteem samenstel, geef ik graag lettertypestijlen, -groottes, spatiëring en andere details weer, zoals:
Responsieve fontregels maken Als je een H1 hebt voor een 72px-computer, wil je misschien niet dat deze dezelfde grootte heeft op een mobiele telefoon. Daarom is het de moeite waard om desktop- en mobiele lettertypesets te maken voor verschillende doeleinden en situaties. Vervolgens moet u regels instellen om te bepalen hoe de typografie in de responsieve modus werkt. Wordt het dynamisch geschaald? Denk eraan hoe het lettertype zich moet gedragen voordat u de bestanden aan de ontwikkelaars overhandigt. Pas lettertypestijlen toe op het ontwerp Nadat u al uw voorwaarden heeft ingesteld, moet u ervoor zorgen dat uw ontwerp verwijst naar deze algemene stijlen. Nou, hier is waarom je het niet moet vergeten: “Dit zorgt voor een consistent ontwerp: als je de tijd neemt voordat je in het project duikt om het juiste systeem te krijgen, verspil je geen tijd met nadenken. Met een sterk systeem kun je sneller ontwerpen. – Veranderingen gaan veel sneller: stel je voor dat je een app hebt met 120 schermen en plotseling besluiten stakeholders halverwege dat ze een lettertype willen wijzigen. Als lettertypestijlen worden gebruikt, duurt het slechts 5 minuten om te wijzigen, anders kan het enkele uren werk kosten. Componenten Het algemene principe is vergelijkbaar met typografie. Als u een ontwerpelement keer op keer gebruikt, moet het als een onderdeel worden gepresenteerd. Waarom componenten gebruiken? Als u een app met 120 schermen heeft en de titel moet wijzigen, is het veel gemakkelijker om de wijziging in de algemene component aan te brengen dan de wijzigingen handmatig op elk scherm afzonderlijk toe te passen. Een componentenbibliotheek bouwen Het gebruik van componenten is slechts een stukje van de puzzel. Het is even belangrijk om componentbibliotheken te gebruiken. In plaats van componenten die hier en daar in uw ontwerp verschijnen, is het beter om een aparte bron te hebben met alle componenten waarnaar andere ontwerpers en ontwikkelaars kunnen verwijzen. Kleine bibliotheek met componenten Het is belangrijk om de tijd te nemen om uw werk en componenten goed te documenteren. In dit geval heeft uw ontwikkelteam veel minder vragen over uw werk en het project als geheel. Kleurstijlen Consistent kleurgebruik is ook een belangrijke overweging bij het indienen van een project bij dev. Als je 30 verschillende grijstinten in je bestand hebt, zullen ontwikkelaars op zijn zachtst gezegd geïrriteerd raken. In plaats van te doen wat u hierboven ziet: maak kleurstijlen en hulplijnen met hex-codes. Naast het hebben van zijbalkstijlen in Figma, plaats ik ze graag in afzonderlijke frames. Door twee opeenvolgende manieren te bieden om toegang te krijgen tot een kleurenschema, wordt uw werk veel gemakkelijker. Een beetje zelfdiscipline is handig bij het kiezen van kleur. Besluit de klant plotseling dat alle blauwe elementen paars moeten zijn? Met kleurstijlen is het slechts een paar klikken verwijderd. Raster Om een gezond project te maken, moeten uw ontwerpteam en de ontwikkelaars waarmee u samenwerkt een rastersysteem maken. Er is een grote verscheidenheid aan benaderingen voor een succesvol rastersysteem. Wat u ook doet, zorg ervoor dat het in uw projectbestand wordt gedocumenteerd, zodat er geen misverstanden of verwarring ontstaan bij het indienen van een project bij ontwikkelaars. Houd je roosters aan Wen eraan om uw roosters aan te hebben. In het begin kan het vervelend zijn, maar als het eenmaal een gewoonte wordt, schenk je er helemaal geen aandacht meer aan. Rasters zijn een belangrijk onderdeel van het bouwen van een consistent, schaalbaar ontwerpsysteem. Adaptief ontwerp Voor nieuwe ontwerpers kan het ontmoedigend zijn om iets te maken dat werkt op mobiele apparaten, computers en zelfs tablets. Hier zijn een paar dingen die u kunt doen om ervoor te zorgen dat uw ontwerp klaar is voor gebruik: – Articuleer controlepunten duidelijk in uw ontwerp Als u wilt dat het ontwerp in 1024 van desktop naar tablet gaat, laat het uw ontwikkelaars dan weten. Wees zo specifiek mogelijk en probeer het zo duidelijk mogelijk uit te leggen, zodat u niet voor verrassingen komt te staan bij het bekijken van de voltooide site. – Kijk welk scherm het meeste verkeer ontvangt en begin daar Bouwt u een online winkel die 85% van uw verkeer via uw mobiele telefoon ontvangt? Zorg ervoor dat u begint met de ontwikkeling van de mobiele versie van de site. Van daaruit kunt u uw tablet en desktop ontwerpen voor uw computer. – Wees zo consistent mogelijk bij het schakelen tussen breekpunten Houd bij het maken van responsieve modules rekening met het technische niveau van de inspanning die nodig is om het te maken, en overweeg ook of het verandert of complexer wordt door meerdere breekpunten. Een verwijzing naar animatie en micro-interacties Er zijn 3 manieren waarop ik animatie aan ontwikkelaars koppel bij het bouwen van een website of applicatie. Visuele referentie: Dribbble, Muzli, Behance Dit is wat ik het minst nuttig vind. Waarom? Omdat het vaak moeilijk is voor een ontwikkelaar om iets opnieuw op te bouwen terwijl hij alleen maar naar de visuele kan verwijzen. Ik raad deze benadering alleen aan met zeer bekwame ontwikkelaars. CodePen Als je een ontwerper bent en niet weet wat CodePen is, laat dan al het andere vallen en bekijk het. Dit is een geweldige bron voor ontwerpers en ontwikkelaars. In plaats van componenten helemaal opnieuw op te bouwen op basis van links, biedt CodePen toegang tot HTML, CSS en Javascript, waardoor efficiëntere interacties binnen een project mogelijk zijn. DIY: After Effects, Principle, Protopie Last but not least is de DIY-route. Als je ervaring hebt met animatie, kun je de regels van het spel wijzigen. Om toepassingsanimaties te maken, kunt u After Effects en Lottie gebruiken om JSON-animaties te exporteren. Animatie in After Effects Ongeacht welk pad u kiest, het bespaart tijd en middelen en tilt uw applicatie naar een hoger niveau, waardoor het nog perfecter wordt. Vergadering Je hebt de klus geklaard. Het ontwerp is goed gedocumenteerd, al je stijlen zijn op hun plaats. Alles tot op de kleinste pixel past perfect in uw project. Wat nu te doen? Context is krachtig. Wanneer u uw ontwerp overhandigt, moet u informatie verstrekken die uw team zal helpen slagen. Om er zeker van te zijn dat iedereen op deze pagina staat, vond ik het handig om een overdrachtsvergadering te houden voor het volgende:
Het laatste punt is minder tastbaar, maar daarom niet minder belangrijk. Hoe u presenteert, is net zo belangrijk als wat u presenteert. Je zou een aantal van de meest ongelooflijke ontwerpwerkzaamheden ooit kunnen overbrengen, maar als je de klus klopt zonder het juiste enthousiasme, dan heb je het project begraven voordat het zelfs maar begon. Spreek met vertrouwen. Wees trots op het werk dat u heeft verricht. Verbind iedereen en creëer een project dat van waarde is voor het team en de klant (wie ze ook zijn). Organiseer uw communicatie Net als bij uw ontwerp, moet u een systeem maken om effectief te communiceren met uw ontwikkelingsteam. Hier zijn twee manieren om een vlotte communicatie te garanderen bij het werken met ontwikkelaars: Bepaal hoe en wanneer feedback wordt gegeven Frontend-bewerkingen zullen ontwikkelaars waarschijnlijk afleiden van hun huidige werk. Daarom is het noodzakelijk om dit proces zoveel mogelijk te optimaliseren. Gebruik software zoals Jira of Asana om visuele kwaliteitscontrole uit te voeren. Wees zo specifiek mogelijk bij het beschrijven en documenteren van niet alleen de problemen die u tegenkomt, maar ook de voorgestelde oplossingen. U kunt ook voor uzelf bonuspunten verdienen als u foto’s aan dit soort beoordelingen toevoegt. Definieer een gemeenschappelijke basis in de ontwerp- en ontwikkelingsteams. Kies een persoon om de kloof tussen de teams te overbruggen. Anders creëer je ruimte voor hiaten in de communicatie tussen werknemers. Als het project waar u bij betrokken bent zo groot is dat u niet slechts één persoon kunt laten communiceren, verdeel dan de verantwoordelijkheden over alle teamleden. Wees geduldig, toon empathie en luister Ontwerpen in live code is nooit eenvoudig. Hoe we reageren op onze teamleden en hoe we reageren op feedback, heeft een directe invloed op de werkrelaties. Streef naar een geweldige baan, maar wees geduldig. Denk niet dat je alle kaarten tegelijk in je hand hebt. Je zult fouten maken, maar raak niet boos, laat ze je helpen om beter te worden. Iedereen maakt fouten, dus als iemand in uw team een fout maakt, wees dan empathisch en verlies uw geduld niet. Luister als ontwikkelaars een probleem aan de orde stellen of vragen stellen. Zij zijn tenslotte degenen die uw werk nieuw leven zullen inblazen! Neem contact met ons op en we bespreken verschillende mogelijkheden. E-mail: info@webdevelopmentapp.com BE: +32 499 41 46 24 Franklin Rooseveltplaats 12, 2060 Antwerpen, Belgie
|
| https://webdevelopmentapp.com/nl/prices.html |
