De 5 bedste værktøjer til responsivt design
Lad mig begynde med at sige dette, jeg vil ikke inkludere nogen point-and-click designværktøjer i denne liste (tænk Adobe Edge Reflow). Årsagen er simpel nok, jeg tror, at de er dårlige for alle; designere, klienter, coders ... alle lider.
Det er ikke et spørgsmål om kvaliteten af kode output ved disse programmer. Det er ikke fordi det gør design "for let". Det er fordi, uanset hvor godt disse programmer er, vil de altid begrænse de mennesker, der bruger dem.
De vil være begrænsede, ikke engang af hvad programmet kan opnå, men af det, de tror det kan udføre. Hvis de tænker på det, vil den gennemsnitlige bruger sandsynligvis sammenligne det med værktøjer som PowerPoint og / eller et antal printdesign-programmer, der igen falder ind i gamle tanker. Her ligger problemet. Visuelle webpubliceringsværktøjer vil altid forsøge at anvende gamle processer på nye teknologier.
En virkelig web-orienteret workflow er en, der omfatter de underliggende begreber og teknologier, som web er bygget på. Sikker på, at du kan bruge et hvilket som helst antal visuelle værktøjer til at oprette websteder, der er teknisk følsomme, men du mangler punktet.
Det handler ikke om et fleksibelt layout. Det handler om at gøre information tilgængelig for så mange mennesker som muligt. Der er nogle ting et program som Edge Reflow kan bare ikke gøre. Kort sagt, du skal skrive kode.
Derfor er de bedste værktøjer til at hjælpe dig med responsivt design de værktøjer, der hjælper dig med at forstå og gøre brug af webteknologier, planlægge din hjemmeside grundigt, skrive bedre kode mere effektivt og teste / præsentere dine lydhørige design til kunder i kontekst.
Lad os starte med det indlysende:
1) Din browser
Nej, jeg taler ikke. Dette er ret bogstaveligt det vigtigste værktøj, du har, fordi det viser dig præcis, hvad dit websted ligner under dine specifikke forhold.
Der har været meget debat om, hvorvidt design i browseren er bedre end at designe i en billedredaktør som Photoshop eller GIMP. Tillad mig at løse dette for dig ...
Er dine hjemmesides brugere vil gøre deres browsing i Photoshop? Billedredaktører kan lave smukke billeder, ikke efterligne faktiske oplevelser. Brug billedredaktører til at redigere billeder. Brug din browser til at designe hjemmesider.
Det er på tide at afvænne vores kunder fra de hyper-detaljerede mockups, som de har vænnet sig til. Da nettet ændres, og vores processer bliver mere flydende og iterative, skal vi fortsætte.
Installer mindst en browser med hver større gengivelsesmotor, og få nogle udviklerudvidelser. Væn dig til at kigge på din kildekode, som din browser ser det, fordi du kommer til at være her et stykke tid.
2) Google Drev tegneapp
Teknisk set kan næsten enhver vektorbaseret billededitor gøre jobbet, når du indrammer dine websites og apps. Jeg har tendens til at indramme desktop versionen af mit websted først, oprette en kopi af filen, ændre størrelsen på lærredet og gå derfra. Brug af vektorer gør det nemt hurtigt at ændre størrelse og omarrangere dine elementer, mens du stadig er i planlægningsfasen.
Jeg foretrækker tegningen app på Google Drev af et par grunde:
Deling og samarbejdsfunktioner: Google deler informationsdeling bedre end næsten alle andre. Med in-context-kommentar, samtidig redigering og Hangout-integration er jeg forelsket.
Automatiske guider: I hvert tegningsdokument oprettes guider automatisk ud fra målene på hvert objekt, du lægger i dokumentet. Dette gør det nemt at skildre konsekvent store elementer i dokumentet, hvilket er godt for gridobsatte designere som mig.
Da jeg deler disse wireframes med kunder, er den professionelle udseende konsistens et stort plus. Og dog er jeg ikke begrænset til disse vejledninger. Jeg ser det som et godt alternativ til mockup apps, der forsøger at begrænse dig til et gitter.
Åh, og det er gratis. Skal jeg sige mere?
3) Style Prototypes
Baseret på Style Tiles, Stil prototyper er en levererbar browser, der er designet til at hjælpe dig med at give dine kunder en ide om, hvordan deres websites typografi, farve og brugergrænseelementer vil se ud. Da det er meningen at blive vist i browseren, vil der være færre uoverensstemmelser, når hjemmesiden er bygget.
Desuden vil jeg sige, at Style Prototypes kunne hjælpe vores kunder med at mentalt adskille begreberne UX og æstetik. Og det kan kun være en god ting at hjælpe vores kunder med at forstå webdesignprocessen bedre.
4) Respondator
Responsinator er et simpelt værktøj, der viser dit websted i forskellige størrelser. Det imiterer på en meget grundlæggende måde flere forskellige enhedsstørrelser og sammenhænge. Dette værktøj er ikke til din fordel. Vil du se, hvordan dit websted ser ud i mindre størrelser? Ændre størrelsen på dit browservindue. Endnu bedre, få nogle faktiske mobile enheder og gøre nogle rigtige test.
Denne webapp er bedst brugt til at vise dine kunder en hurtig tilnærmelse af, hvordan deres hjemmeside vil se ud i andre sammenhænge end en stationær eller bærbar skærm.
Igen er der mange værktøjer, der kan gøre det samme arbejde som Responsinator, og lige så effektivt antager jeg. Jeg valgte denne, fordi den præsenterer flere enhedssilhouetter efter hinanden for nem indlæg.
5) Adobe Edge Inspect
Nu er denne til dig. Hvis du har et mobil test lab (og jo hurtigere kan du lave en, jo bedre) Edge Inspect vil synkronisere alle dine enheder for at se den samme side på én gang. Opdater siden på en enhed, og du opdaterer dem alle.
I modsætning til de andre på denne liste er denne ikke gratis. Men hvis du har råd til nok mobile enheder til at få brug for en løsning som dette, er det nok pengene værd.
Konklusion
Som altid er dit vigtigste aktiv din hjerne. Disse værktøjer, og andre som dem, kan kun hjælpe dig på din vej. Jeg valgte disse, fordi de udfører meget specifikke funktioner, der hjælper mig med at designe responsive sites. De begrænser ikke, hvad jeg kan gøre.
De bedste værktøjer er virkelig dem, der forbliver ude af vejen.
Bruger du disse værktøjer? Hvad er dine top 5 værktøjer til lydhør design? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, værktøjer billede via Shutterstock.