De 5 beste hulpmiddelen voor responsief ontwerp
Laat ik beginnen met dit te zeggen, ik zal geen point-and-click ontwerphulpmiddelen in deze lijst opnemen (denk aan Adobe Edge Reflow). De reden is eenvoudig genoeg, ik geloof dat ze slecht zijn voor iedereen; ontwerpers, klanten, codeerders ... iedereen lijdt.
Het is geen kwestie van de kwaliteit van de code die door deze programma's wordt uitgevoerd. Het is niet omdat het ontwerp "te gemakkelijk" maakt. Het komt omdat het niet uitmaakt hoe goed deze programma's zijn, ze zullen altijd de mensen die ze gebruiken beperken.
Ze zullen beperkt zijn, zelfs niet door wat het programma kan bereiken, maar door wat ze denken dat het kan bereiken. Als ze erover nadenken, zal de gemiddelde gebruiker dit waarschijnlijk vergelijken met tools zoals PowerPoint en / of een willekeurig aantal programma's voor het ontwerpen van gedrukte afbeeldingen, waardoor het weer in oude mindsets verviel. Daarin ligt het probleem. Visual web publishing tools zullen altijd proberen oude processen toe te passen op nieuwe technologieën.
Een echt webgeoriënteerde workflow is er een die de onderliggende concepten en technologieën omvat waarop het web is gebouwd. Natuurlijk kun je een onbeperkt aantal visuele hulpmiddelen gebruiken om websites te maken die technisch responsief zijn, maar je zou het missen.
Het gaat niet om een aanpasbare lay-out. Het gaat erom informatie toegankelijk te maken voor zoveel mogelijk mensen. Er zijn een aantal dingen die een programma als Edge Reflow niet kan doen. Kortom, je moet code schrijven.
Daarom zijn de beste hulpmiddelen om u te helpen bij responsief ontwerp die tools zijn die u helpen webtechnologieën te begrijpen en te gebruiken, uw website grondig te plannen, efficiënter code te schrijven en uw responsieve ontwerpen te testen / presenteren aan klanten in context.
Laten we beginnen met de voor de hand liggende:
1) Uw browser
Nee. Ik maak geen grapje. Dit is letterlijk de belangrijkste tool die je hebt, omdat het je precies laat zien hoe jouw website eruit ziet onder jouw specifieke omstandigheden.
Er is veel discussie geweest over het al dan niet ontwerpen in de browser is beter dan ontwerpen in een beeldbewerker zoals Photoshop of GIMP. Sta me toe dit voor je op te lossen ...
Gaan de gebruikers van uw website browsen in Photoshop? Beeldbewerkers kunnen mooie foto's maken, geen echte ervaringen nabootsen. Gebruik afbeeldingseditors om afbeeldingen te bewerken. Gebruik uw browser om websites te ontwerpen.
Het is tijd om onze klanten af te leiden van de hyper-gedetailleerde mockups die ze gewend zijn geraakt. Naarmate het web verandert en onze processen vloeiender en iteratiever worden, moeten we verder gaan.
Installeer ten minste één browser bij elke belangrijke rendering-engine en ontvang een aantal ontwikkelaar-extensies. Wen eraan om naar je broncode te kijken zoals je browser die ziet, want je bent hier een tijdje.
2) De tekenapp van Google Drive
Technisch gezien zou vrijwel elke op vectoren gebaseerde afbeeldingseditor het werk kunnen doen bij het inlijsten van uw websites en apps. Ik heb de neiging om eerst de desktopversie van mijn site te omlijsten, een kopie van het bestand te maken, het formaat van het canvas aan te passen en van daaruit verder te gaan. Met behulp van vectoren kunt u eenvoudig uw grootte wijzigen en uw elementen opnieuw rangschikken terwijl u zich nog in de planningsfase bevindt.
Ik geef de voorkeur aan de teken-app Google Drive om een paar redenen:
Functies voor delen en samenwerken: Google deelt informatie beter dan bijna iedereen. Met in-contextcommentaar, gelijktijdige bewerking en Hangout-integratie ben ik verliefd.
Automatische hulplijnen: in elk tekeningendocument worden automatisch hulplijnen gemaakt op basis van de afmetingen van elk object dat u in het document plaatst. Dit maakt het gemakkelijk om consequent grote elementen in het document weer te geven, wat geweldig is voor net-geobsedeerde ontwerpers zoals ik.
Terwijl ik deze wireframes met klanten deel, is die professioneel uitziende consistentie een groot pluspunt. En toch ben ik niet beperkt tot die gidsen. Ik zie het als een goed alternatief voor mockup-apps die je proberen te beperken tot een raster.
Oh, en het is gratis. Moet ik nog meer zeggen?
3) Stijlprototypen
Op basis van stijltegels, Style Prototypes zijn een in-browser deliverable die is ontworpen om u te helpen uw klanten een idee te geven van hoe de typografie-, kleur- en UI-elementen van hun website er uit zullen zien. Omdat het is bedoeld om te worden bekeken in de browser, zullen er minder inconsistenties zijn zodra de website is gebouwd.
Verder zou ik willen stellen dat Style Prototypes onze klanten kunnen helpen om de concepten van UX en esthetiek mentaal van elkaar te scheiden. En echt, alles dat onze klanten helpt om het webontwerpproces beter te begrijpen, kan alleen maar goed zijn.
4) Responsant
Responsinator is een eenvoudige tool die uw website in verschillende groottes laat zien. Het imiteert op een zeer eenvoudige manier verschillende apparaatgroottes en contexten. Deze tool is niet in uw voordeel. Wilt u zien hoe uw website er in kleinere maten uitziet? Verklein je browservenster. Beter nog, krijg een aantal echte mobiele apparaten en doe wat echte testen.
Deze webapp kan het best worden gebruikt om uw klanten een snelle benadering te laten zien van hoe hun website eruitziet in andere contexten dan een desktop- of laptopmonitor.
Nogmaals, er zijn veel tools die hetzelfde werk zouden kunnen doen als Responsinator, en net zo effectief, denk ik. Ik koos deze omdat het verschillende apparaatsilhouetten na elkaar presenteert, voor een gemakkelijke inzage.
5) Adobe Edge Inspect
Nu is deze voor jou. Als u een mobiel testlaboratorium heeft (en hoe eerder u er een kunt maken, hoe beter) Edge Inspecteren zal al uw apparaten synchroniseren om dezelfde pagina in één keer te bekijken. Ververs de pagina op één apparaat en u ververs ze allemaal.
In tegenstelling tot de anderen op deze lijst is deze niet gratis. Als u echter genoeg mobiele apparaten kunt veroorloven om een oplossing als deze nodig te hebben, is het waarschijnlijk het geld waard.
Conclusie
Zoals altijd is je belangrijkste bezit je brein. Deze tools, en andere soortgelijke, kunnen u alleen op weg helpen. Ik koos deze omdat ze zeer specifieke functies uitvoeren die me helpen bij het ontwerpen van responsieve sites. Ze beperken niet wat ik kan doen.
De beste tools zijn echt degenen die uit de weg blijven.
Gebruik je deze tools? Wat zijn je top 5-tools voor responsief ontwerp? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, gereedschap afbeelding via Shutterstock.