Share
Na het schetsen is er nog een laatste ding waaraan je zou moeten werken voordat je begint met ontwerpen (hoewel dit wel degelijk deel uitmaakt van het ontwerpen). Wireframing is in wezen een visuele gids voor een website die u helpt lay-out te bekijken zonder na te denken over de esthetiek van het project.
Hoe een draadframe er uit moet zien, varieert enorm, afhankelijk van met wie je praat. Je hebt veel opties bij het maken van wireframes - van de manier waarop je je wireframes weergeeft, tot de software waarmee je ze maakt.
Wanneer u uw wireframes maakt, moet u werken met lay-out en met de inhoud die u eerder heeft samengesteld. Het idee van een wireframe - als een deliverable voor een klant, of gewoon als een extra stap die je liever wilt nemen - is om de visuele lay-out en flow van een website-pagina te kunnen weergeven, voordat je verzandt met het ontwerp details zoals kleur, typografie of andere visuele flair.
De beste manier om door te gaan naar het maken van digitale wireframes voor uw project, is direct van de schetsfase af te komen. In dat gedeelte zou je al eens moeten rondrennen met lay-out, maar het maken van een digitaal draadframe is een veel professionelere manier om je ideeën over de lay-out en stroom van je webpagina vast te spelden.
Wanneer u creatieve wireframes ontwerpt, wilt u ervoor zorgen dat u de echte inhoud gebruikt die u eerder bij het begin van het project hebt samengesteld. Persoonlijk ontwerp ik liever wireframes die alles missen dat een klant ertoe kan brengen te denken dat er ontwerpbeslissingen worden genomen die van invloed zijn op het uiterlijk en het gevoel van het project. Daarom zorg ik er altijd voor dat ik een draadframe ontwerp dat zich alleen richt op de inhoud van het project en de manier waarop de inhoud op de pagina wordt gepresenteerd.
Een voorbeeld wireframe gemaakt met de Balsamiq Desktop-applicatie. Inhoud die goed geschreven en weergegeven wordt op een manier die nuttig en relevant is voor degenen die het zullen lezen, zal altijd resulteren in een beter ontwerp en online ervaring. Een goed ontworpen draadmodel is er een die in gedachten houdt dat de inhoud het belangrijkste is op de pagina en sympathiek is om die inhoud weer te geven op een manier die geschikt is voor het project en zijn eindgebruikers..
De wireframe-fase van een project zal sterk gerelateerd zijn aan wanneer u aan het bewerken was en aan het werken was met uw content dichter bij het begin van het project. Als een kort voorbeeld, op dat moment zult u hard hebben gewerkt om ervoor te zorgen dat de inhoud gemakkelijk leesbaar zou zijn door het juiste gebruik van koppen en lijsten. Het ontwerpen van een goed wireframe betekent het transporteren van die inhoud (in alinea's, kopjes, lijsten en welke andere manier dan ook die je hebt gekozen om de inhoud op te maken) in je wireframe en kijken hoe je kunt beginnen met het creëren zichtbaar relaties tussen elk bit van de inhoud, het verbinden van de stippen totdat u een visuele weergave hebt van hoe die inhoud eruit zou kunnen zien op een pagina.
Om uw wireframes ontwerpvrij en op inhoud gericht te houden, is het werken met blokken een heel eenvoudige manier om gedeelten van een pagina af te snijden voor bepaalde inhoudgebieden.
In praktische zin betekent dit dat als u bijvoorbeeld een standaard header boven aan de pagina wilde hebben, u een blok aan de bovenkant van uw wireframe-ontwerp zou toevoegen. Als u bijvoorbeeld strikt een logo en een navigatiegebied binnen de kop wilt toevoegen, plaatst u extra blokken voor deze elementen in de kop van uw draadmodelontwerp.
U kunt vervolgens blokken gebruiken in de rest van het ontwerp van het draadframe en doorgaan met het afsnijden van gebieden voor specifieke stukjes inhoud.
Blokken hoeven echter niet alleen een letterlijk monochroom vierkant of een rechthoek te zijn - als u eenmaal een idee hebt van uw basislay-out met de blokken die u hebt toegevoegd, kunt u uw feitelijke inhoud gebruiken op plaatsen die nuttig kunnen zijn. Gebruik bijvoorbeeld de echte inhoud voor de navigatie-items, een inleiding tot een pagina, de koppen enzovoort. Dit helpt, omdat u visueel kunt zien hoe de inhoud samenwerkt in de lay-out die u maakt.
Wanneer u uw wireframes ontwerpt, moet u altijd zorgen dat u de gebieden of secties labelt die u in uw wireframe plaatst. Hoewel je misschien begrijpt wat een bepaald blok aangeeft (vooral wanneer de echte inhoud daar niet wordt geplaatst), is het mogelijk dat een klant of collega het niet zo duidelijk mogelijk maakt om te begrijpen waar ze naar kijken..
Wanneer u uw wireframes ontwerpt, moet u aan de stroom van de pagina denken: kijk hoe de inhoud op de pagina staat en hoe deze van de ene sectie naar de andere gaat.
Het doel is hier om ervoor te zorgen dat de inhoud correct leest en dat u het oog vloeiend van de ene sectie naar de andere beweegt. Dit is met name van belang wanneer u pagina's met veel inhoud hebt - gebruikers moeten gemakkelijk van de ene sectie naar de andere kunnen gaan, zonder dat het een schokkende ervaring is. Als pagina's te druk zijn en niet de juiste flow hebben, worden gebruikers uitgeschakeld door wat moeilijk te begrijpen of te volgen lijkt.
Eén idee is om te bedenken wat je intuïtief zou doen bij het navigeren op een website - begin met kijken naar het logo en de header, dan naar de hoofdtitel en het volgen van de hoofdinhoud, geleidelijk naar een zijbalk gaan enzovoort.
Bij het ontwerpen van een website is het bijna onmogelijk om een afzonderlijk draadframe te maken voor elke fase waarin de website kan veranderen, hoe deze eruit ziet of in elkaar past. In plaats daarvan, nadat u eerder hebt nagedacht over de stroom van uw ontwerp en inhoud, kunt u kijken naar een responsieve stroom naar het wireframe-ontwerp.
Dit was een tip die ik opnam uit de Responsive Day Out-talk van Sarah Parmenter, waarin Sarah uitlegde hoe ze nummers aan haar wireframes toevoegt die een klant helpen te begrijpen hoe de content en items kunnen worden gestapeld wanneer ze op een kleiner scherm staan. Dit is erg handig omdat het een cliënt helpt om ook de inhoudhiërarchie te begrijpen, wat betekent dat je kunt beginnen met het bekijken van mogelijke valkuilen of uitdagingen bij het snel reageren in het project - iets dat je misschien een veel tijd later in het project.
Bij het ontwerpen van wireframes, heb je een belachelijke hoeveelheid keuze als het gaat om de software die je kunt gebruiken. Persoonlijk denk ik dat er een duidelijke drie keuzes zijn die het meest populair lijken, met name in de webindustrie.
Bij het ontwerpen van een draadmodel is de eenvoudigste oplossing om te werken met een grafische app die u al kent of die u op zijn minst een beetje eerder hebt gebruikt. Dit betekent dat er weinig of geen leercurve is, dus u kunt hopelijk een beetje sneller uw wireframes ontwerpen.
De eenvoudigste manier om met uw grafische software te ontwerpen, is om de vorm- en teksttools te gebruiken, waarmee u uw basisblokken kunt maken, evenals specifieke gebieden met echte inhoud. Vergeet niet om uw wireframe-blokken te labelen met de teksttool terwijl u doorgaat.
Dit kan voor sommigen een verrassing zijn, omdat Keynote en Powerpoint meestal worden gebruikt voor het maken van presentaties. Het zijn echter echt krachtige en eenvoudig te gebruiken hulpmiddelen om andere dingen te creëren, waaronder wireframes. Met behulp van de standaardhulpmiddelen die voor u beschikbaar zijn in de apps zelf, kunt u heel snel professioneel uitziende wireframes maken.
Mijn persoonlijke voorkeur, Balsamiq Mockups is een app die is gewijd aan het maken van wireframes. Deze app maakt het echt eenvoudig om je wireframes te ontwerpen en heeft veel middelen tot je beschikking om snel de elementen die je wilt plaatsen te slepen en neer te zetten.
Een ding dat ik zo leuk vind aan Balsamiq Mockups is dat het een ruwe, geschetste stijl gebruikt die er echt voor leent om te laten zien dat wireframes precies dat zijn - een idee van lay-out dat later in een goed ontwerp kan worden vertaald. Je hebt de mogelijkheid om te kiezen tussen een meer standaard gevoel voor de wireframes en de geschetste afwerking, als je denkt dat een klant daar meer voor openstaat.
Met de introductie van gebruikersinterfacekits is het ook heel eenvoudig om complexere wireframes te ontwerpen voor verschillende apps. Van volledige kits die u kunt downloaden om als PSD in Photoshop te gebruiken, tot sets die u helpen om wireframes in Keynote eenvoudiger te maken - er is iets dat u kan helpen.
Accentsconagua