Share
Wireframing is een belangrijke stap in elk schermontwerpproces. Het stelt u hoofdzakelijk in staat om de informatiehiërarchie van uw ontwerp te definiëren, waardoor u gemakkelijker de lay-out kunt plannen op basis van hoe u wilt dat uw gebruiker de informatie verwerkt. Als je wireframing nog moet gebruiken, is het tijd om je voeten nat te maken.
Voordat we echter aan de slag gaan, is een korte vraag: heb je een professionele website-oplossing nodig? Als dat zo is, hebben we een aantal prachtig ontworpen websitesjablonen die mogelijk aan uw behoeften voldoen. U kunt onbeperkte sjablonen en andere items downloaden voor een enkel laag maandelijks abonnement.
Website sjablonen op Envato ElementsAnders gaan we in deze zelfstudie!
Het is als een architectonische blauwdruk; je moet het in tweedimensionale zwart-witte diagrammen zien voordat je begrijpt hoe je het eigenlijke huis kunt bouwen. Op dezelfde manier kun je voor een schermontwerp geen pixellagen in photoshop bouwen of codeblokken schrijven, zonder te weten waar de informatie naartoe gaat.
Op een dieper niveau is een draadframe ook erg handig om te bepalen hoe de gebruiker met de interface communiceert. Wireframes kunnen bijvoorbeeld verschillende soorten knop- of menumedegedrag bevatten.
Wireframing is belangrijk omdat het de ontwerper in staat stelt de lay-out en interactie van een interface te plannen zonder te worden afgeleid door kleuren, lettertype-keuzes of zelfs kopiëren. Ik leg mijn klanten graag uit dat als een gebruiker niet weet waar hij heen moet op een zwart-wit draadframe, het niet uitmaakt welke kleuren je uiteindelijk gebruikt. Een knop moet duidelijk zijn, ook al is deze niet glanzend of fel gekleurd.
Net als de fundering van een gebouw, moet het fundamenteel sterk zijn voordat je beslist om het een dure verflaag te geven.
Voordat je meer details krijgt, kun je, aangezien een afbeelding duizend woorden kan verven, de ♥ wirefames bekijken. U krijgt een snel overzicht en een beter beeld van hoe andere ontwerpers omgaan met hun wireframing-proces.
Grijp misschien ook deze handige bookmarklet voor je browser, Wirify, waarmee je een "wireframe-d" -versie van elke live-site kunt bekijken.
Als je voortdurend observeert wat andere ontwerpers of sites doen voor hun wireframes, krijg je langzaam een beeld in je achterhoofd hoe een draadframe helpt om informatie voor het scherm te ordenen.
Design is een organisch proces en dus benaderen verschillende ontwerpers wireframing en de vertaling ervan naar visuals of code op verschillende manieren. Je moet het proces vinden dat je eigen sterke punten naar voren brengt en waar je het meest comfortabel in bent. Hieronder is een diagram met verschillende typische processen:
37signals staat erom bekend om het gebruik van schetsen te bepleiten en direct naar de code te gaan, hoewel sommige ontwerpers blijkbaar ook visuele mockups in hun proces betrekken.
Voor mij heb ik genoeg ontwerp-naar-code-cycli doorlopen om een enigszins gestroomlijnd proces te hebben. Dit is een stap waar sommige mensen misschien niet aan denken, maar ik overweeg ook om het even welk html / css-framework dat ik in het project zou gebruiken.
Ik bouwde bijvoorbeeld een heleboel sites in Blueprint, dus ik stelde zowel mijn wireframes als Blueprint in op hetzelfde raster met 12 kolommen. Dit versnelt de prototyping en ontwikkeltijd aanzienlijk, omdat in plaats van de breedte van elk element in mijn css-stylesheet te moeten schrijven, ze nu vooraf zijn gedefinieerd van één tot twaalf kolommen breed. Ik gebruik nu cssgrid in plaats daarvan voor de responsieve ontwerpondersteuning, maar het is nog steeds ingesteld op een raster met 12 kolommen dat u kunt downloaden als een photoshop-sjabloon.
Zoals ik al zei, is het aan jou om te beslissen welk proces je prettig vindt, soms kun je het meerdere keren proberen voordat je je realiseert wat het meest effectieve proces is. Sommige mensen zijn erg goed in schetsen en misschien liever geen wireframing-tool. Andere ontwerpers willen mogelijk zoveel mogelijk stappen nemen om afwijkingen te minimaliseren of ze in staat te stellen elke afzonderlijke iteratie te overdenken terwijl het ontwerp vorm begint te krijgen en vorm krijgt.
Je zult uiteindelijk je eigen voorkeursproces ontwikkelen maar omwille van de tutorial zal ik mijn typische proces als voorbeeld gebruiken:
De reden waarom ik meestal Illustrator gebruik als mijn wireframing-tool is hoofdzakelijk om drie redenen:
Ik gebruik echter andere hulpmiddelen en het hangt af van het projectscenario. Ik zal in het volgende gedeelte kort enkele populaire hulpmiddelen, hun sterke punten en hun zwakke punten schetsen.
Hier zijn enkele populaire tools in willekeurige volgorde:
Balsamiq werd populair omdat met Balsamiq gemaakte wireframes lijken op schetsen, waardoor het meteen duidelijk wordt dat het draadframe geen afgewerkt product is, maar een werk in uitvoering. Balsamiq heeft ook een enorme bibliotheek van herbruikbare componenten die je heel gemakkelijk kunt slepen en neerzetten om je wireframes te ontwerpen.
Je kunt het ook op vrijwel elk platform gebruiken, met desktopversies die beschikbaar zijn voor Mac, Windows en Linux, plus er is een webversie als je liever in de cloud werkt. Apps van derde partijen zoals iMockups voor iOS ondersteunen ook Balsamiq-exportindelingen.
Een oude Mac-favoriet, Omnigraffle heeft ook een breed ondersteunde door de gebruiker bijgedragen bibliotheek met herbruikbare componenten; Graffletopia.
Omdat het specifiek is ontwikkeld als een diagramtoepassing, heeft Omnigraffle ook complexe functies zoals automatische lay-out, ondersteuning voor aangepaste objectstijlen, slimme hulplijnen en grafiekhulpmiddelen. Sommige van deze functies zijn ook beschikbaar in de Adobe CS-suite, maar als u de CS-suite niet hebt, heeft Omnigraffle een goede prijs (~ $ 100) voor het produceren van gedetailleerde wireframes.
Bijna zoals de grootvader van wireframing-tools, was Axure een van de eerste professionele wireframing / prototyping-tools. Tot voor kort was het alleen beschikbaar op Windows. Ik heb er persoonlijk niet veel ervaring mee, maar het is bekend dat het een veel gebruikt hulpmiddel is bij professionals uit de industrie.
Een nieuw kind in de buurt, Flairbuilder heeft een zeer sterke ondersteuning voor interacties.
Het heeft ook een enorme componentenbibliotheek, ondersteunt basispagina's en u kunt het prototype exporteren om online te bekijken.
Als desktopsoftware niet jouw ding is, zijn er tools zoals mockflow, hotgloo en spotvogel.
Keynotopia "transformeert uw favoriete presentatietoepassing in de beste tool voor rapid prototyping voor het maken van mockups voor mobiele, web- en desktopapp". Voor niet-mac-gebruikers, wees niet bang, Keynotopia biedt ook PowerPoint-sjablonen.
Persoonlijk raad ik het ten zeerste aan als u mobiele toepassingen snel moet coderen of proto-typen. Een ander goed alternatief is Keynote Kungfu.
Voor degenen die al bekend zijn met de Adobe-suite, zijn Fireworks, Illustrator en Indesign zeer capabele wireframing-tools met hun eigen individuele sterke en zwakke punten..
U kunt in Fireworks werken aan het hele ontwerpproces, van eenvoudige wireframes tot het volledige visuele. Fireworks ondersteunen stramienpagina's (denk aan hen als herbruikbare sjablonen waarbij elke bewerking op de hoofdsjabloon kan worden toegepast op uw kinderpagina's), elementbibliotheken en u kunt relatief snel interactieve prototypen maken met Fireworks.
Dit is een van mijn favoriete tools om te gebruiken, omdat ik al erg vertrouwd ben met Illustrator en ik ben er zeker van dat ook veel ontwerpers hier bekend mee zijn. Ik gebruik Illustrator wanneer ik snel, maar complexe wireframes probeer te maken, zonder dat er interactiviteit nodig is.
Wat maakt het tot een winnaar? De mogelijkheid om als een PSD te exporteren met bewerkbare lagen, krachtige kopieer- en plakondersteuning voor Photoshop en krachtige typografische besturingselementen met typestijlen die u kunt opslaan, bewerken en opnieuw gebruiken, bijna zoals CSS.
Vergelijkbare sterke punten als Illustrator met nog sterkere typografische stijlen, krachtige ondersteuning van stramienpagina's en het recente vermogen om interactieve prototypen te maken.
Ik kies Indesign wanneer ik interactieve high-fidelity prototypes met meerdere pagina's moet maken. Het enige voorbehoud voor mij is de zwakke exportondersteuning aan Photoshop voor het ontwerpen van beelden.
"Krachtige prototyping gemakkelijk gemaakt." Onlangs uitgebrachte versie 9 met een nieuw wysiwyg-palet. De moeite waard om te bekijken.
Er is veel theorie met betrekking tot rastersystemen, maar zonder er te veel in te betrekken, zal ik het uitleggen als "een gestructureerde en eenvoudige manier om elementen in te delen".
Ik gebruik Illustrator voor deze zelfstudie, maar de stappen kunnen op al uw hulpmiddelen worden toegepast.
Stel eerst een documentgrootte in. Ik heb 1280 x 900 gebruikt omdat ik cssgrid ga gebruiken, waardoor mijn website gemakkelijk kan schalen tussen mobiele resoluties tot een maximum van 1140 pixels.
Plaats de gedownloade sjabloon van cssgrid in uw document.
Er zijn veel rastersjablonen beschikbaar om te downloaden, maar als je erin geïnteresseerd bent je eigen rastersjablonen aan te passen, kijk dan op responsify.it.
Begin met het tekenen van vakjes op het raster. Denk aan de volgorde van informatie die u aan uw bezoekers wilt geven, van boven naar beneden is het gemakkelijkst, gevolgd door van links naar rechts. Hieronder ziet u een voorbeeld van een draadframe dat tegenwoordig wordt gebruikt door softwarebedrijven:
Soms, afhankelijk van je doel en de entiteit waarvoor je ontwerpt, kun je creatief zijn met de lay-out, maar houd je de hiërarchie van de informatie in gedachten. Dit is een voorbeeld uit de praktijk van een van mijn klanten waarbij ik uit de weblayouts van conventionele technologiebedrijven stapte:
Hier is een lay-out voor een blog met zorgvuldig geplaatste advertentiecontainers en specifieke instructies voor de klant:
Nadat u tevreden bent met de manier waarop de kaders zijn ingedeeld, kunt u beginnen met het achterlaten van stukjes en beetjes van uw inhoud om een idee te krijgen of de informatie goed gestructureerd is. De vuistregel is hetzelfde: de informatie die u aan uw publiek wilt leveren moet duidelijk zijn, zelfs in een zwart-wit draadframe.
Het gebruik van verschillende lettergroottes als begin is een goede manier om onderscheid te maken tussen de verschillende niveaus van informatie.
Wees niet bang om in dit stadium te experimenteren. Soms, als je meer details invult, besef je misschien dat de originele lay-out niet goed werkt. Dat is het hele punt van het wireframing-proces; om zoveel mogelijk iteraties te maken om de beste manier te vinden om de informatie die u probeert te communiceren te representeren.
In het onderstaande voorbeeld heb ik besloten dat ik wilde dat de screenshots meer impact hadden en ik ben ook begonnen met het gebruik van zwarte vakken om te definiëren welke gebieden visueel belangrijk zijn voor deze website:
Als u het volledige spectrum van grijstinten gebruikt, kunt u de visuele sterkte van uw elementen bepalen zonder een kleurenpalet te hoeven kiezen. In feite kan het u later tijdens het visuele ontwerpproces helpen.
Dit is een optionele stap, maar als je het leuk vindt om dingen in stappen te nemen, wil je het misschien proberen. Een high-definition wireframe maken, betekent simpelweg zoveel mogelijk meer details toevoegen, zonder te korrelig te worden in de visuele details. Het kan betekenen dat u de daadwerkelijke kopie in het draadframe vult en probeert de ideale lettertypegroottes te bepalen:
Het kan ook kleuren betreffen:
Het algemene idee is dat u in de visuele / codefase in de polijstmodus wilt zijn en niet langer in de teken- of experimenteermodus. Voer de iteratiecycli uit (feedback <-> wireframing) zo snel mogelijk in een wireframing-applicatie die u comfortabel gebruikt, in plaats van het verplaatsen van lagen en pixels in photoshop.
Dat gezegd hebbende, kan het in bepaalde scenario's idealer zijn om de details niet te veel te definiëren en direct door te gaan naar een stadium van interactieve prototyping (ala 37signals). Het argument hiervoor is dat bepaalde interactiedetails niet volledig op een vlakke afbeelding kunnen worden gecommuniceerd.
Als u met een team van ontwikkelaars werkt, wilt u misschien de goedgekeurde wireframes aan de ontwikkelaars overhandigen voor het coderen van het basisraamwerk terwijl u aan het visuele werkt.
Al eerder genoemd, de reden waarom ik de neiging heb om Illustrator voor wireframing te gebruiken, is omdat ik het naar een .psd kan exporteren waarbij de meeste tekstlagen bewerkbaar zijn. Tegen de tijd dat ik in Photoshop ben, hoef ik het type niet zoveel te bewerken (Photoshop heeft hulpprogramma's voor inferieure typen, hoewel veel verbeterd in CS6):
Hier is een voorbeeld van een wireframe vertaald in een visueel. De ruggengraat van het draadframe is vrijwel intact, hoewel er visuele aanpassingen zijn aangebracht. U kunt deze website ook live bekijken:
Dus hier beëindigen we deze tutorial. Ik hoop dat het je heeft geïnspireerd om te gaan experimenteren! Zoals bij elk ontwerpproces, wees niet bang om te itereren, itereren en itereren.
Besteed ook enige tijd aan het experimenteren met verschillende tools en processen. U vindt de tijdinvestering de moeite waard zodra u een applicatie vindt die intuïtief voor u is.
Aarzel niet om vragen in de comments te stellen, bedankt voor het lezen!
En als u kant-en-klare website-onderdelen nodig heeft, hebben we een heleboel prachtig ontworpen websitesjablonen op Envato Elements. U kunt onbeperkte sjablonen en andere items downloaden voor een enkel laag maandelijks abonnement.
Als u nog meer wilt weten over wireframing, wilt u misschien deze bronnen bekijken.
Accentsconagua