Site-framework. Creatiehulpmiddelen

Een site wireframe (of sitestructuur) is een organigram dat de structuur en hiërarchie van pagina's op een website definieert. Het wireframe dient als basis voor de ontwikkeling van websites, helpt bij het organiseren van inhoud en biedt logische navigatie voor gebruikers. Een website maken is veel eenvoudiger dan voorheen. Dit is echter nog steeds een belangrijk project. En net als bij elk ander project heb je een gedegen plan nodig.

De lay-out van uw website is het belangrijkste onderdeel van dit plan. Kleuren, afbeeldingen en andere inhoud kunnen veel gemakkelijker worden gewijzigd dan de lay-out. Beschouw de lay-out als het skelet van uw website. Het definieert de structuur van elke pagina, die later zal worden verfijnd.

Een wireframe is een ruwe schets van de lay-out van een website. Het laat zien waar alle verschillende elementen zich zullen bevinden. Dit maakt het ideaal uitgangspunt voor het maken van een website. Competente webdesignbureaus beginnen altijd met een wireframe. Wanneer u, alleen of in teamverband, uw eigen website ontwikkelt, vindt u ook een waardevol raamwerk.

Het wireframe van een website kan altijd met potlood en papier worden getekend. Dit is echter niet nodig als er veel wireframing-tools beschikbaar zijn.

Laten we eens kijken naar enkele van de populairste tools voor het framen van websites.

 

Waarom een ​​wireframe-tool gebruiken?

Zelfs in een modern vakgebied als webdesign geven sommige ontwerpers er nog steeds de voorkeur aan om oude methoden te gebruiken. Er is natuurlijk niets mis met het tekenen van een website op papier. Dit is een beproefde methode die in het verleden uitstekend heeft gewerkt voor duizenden webontwerpers. Het gebruik van een framingtool kan echter veel tijd en moeite besparen. Website-framework

• Het gebruik van een wireframing-tool geeft u een beter startpunt. 

Met potlood en papier begin je letterlijk met een schone lei. Frametools maken het gemakkelijk om aan de slag te gaan. De meeste hebben lay-outrichtlijnen, ook al is het een eenvoudig raster. Sommige bieden zelfs standaardelementen die u op de pagina kunt plaatsen, zodat u niets hoeft te tekenen.

• Bewerken en correcties zijn veel eenvoudiger geworden. 

Als je op papier werkt, moet je elke keer dat je een grote verandering aanbrengt het hele draadframe opnieuw tekenen. Met veel wireframing-tools kunt u eenvoudig elementen slepen en neerzetten. Dit kan uren werk besparen, ongeacht of u het origineel aan het verfijnen bent ontwerp of breng wijzigingen aan volgens het verzoek van de klant.

• De resultaten zien er professioneler uit. 

Zelfs de beste ontwerper kan een beetje gebrekkig zijn in tekenvaardigheden. Met een wireframing-tool hoeft u zich nooit meer zorgen te maken over het tekenen van een rechte lijn of het perfect centreren van een element. Aangezien een wireframe slechts een wireframe is, is het uiterlijk ervan uiteraard niet zo belangrijk als het uiterlijk van de voltooide website. Maar als jij werken met klanten, een superschoon frame zou indruk op hen kunnen maken. Dit kan ook misverstanden voorkomen, bijvoorbeeld wanneer een klant ervan uitgaat dat een element niet gecentreerd zal zijn, simpelweg omdat het iets uit het midden in het draadframe is getekend.

• Het is handiger voor uw team. 

Framework-tools maken het samenwerken met anderen veel eenvoudiger. Met veel tools kunt u meerdere gebruikers toegang verlenen, zodat iedereen aan dezelfde bestanden kan werken. Met samenwerkingsfuncties kan uw team de noodzaak elimineren om de huidige versie van een bestand te delen. Uw hele team kan naadloos samenwerken, of u zich nu op hetzelfde kantoor bevindt of niet. Website-framework

• Dit is handiger voor webontwerpklanten. 

Omdat het gebruik van een wireframing-tool sneller en gemakkelijker is voor uw team, verbetert het ook de kwaliteit van de dienstverlening die u levert als u websites voor anderen ontwikkelt. Uw klanten zullen sneller wireframe-samples kunnen ontvangen en het zal voor u veel gemakkelijker zijn om eventuele wijzigingen aan te brengen. Het verbetert kwaliteit van de klantenservice. En natuurlijk is de kans groter dat tevreden klanten een goede recensie achterlaten of u aanbevelen aan anderen klanten voor uw bedrijf.

Dus zelfs als u een expert bent in het snel tekenen van strakke wireframes op papier, is het de moeite waard om de tijd te nemen om te leren hoe u de wireframe-tool gebruikt. Gelukkig zijn veel ervan gratis en voor veel betaalde tools zijn er gratis proefversies beschikbaar, zodat je de juiste keuze voor jou en je team kunt kiezen. Laten we eens kijken wat er is!

 

Wireframe.cc Siteframe

Type: web applicatie

kosten: Gratis versie beschikbaar; premie van 16 naar 99 dollar per maand

draadframe.cc is een minimalistische wireframing-tool voor degenen die de voorkeur geven aan potlood en papier. Het werkt rechtstreeks in uw webbrowser, dus downloaden is niet nodig. De applicatie begint met een eenvoudig raster waarop u met behulp van verschillende hulpmiddelen verschillende wireframe-elementen kunt tekenen. Het is uiterst eenvoudig te gebruiken en heeft een gratis versie. Als u besluit dat de gratis versie te beperkt is in functies, kunt u upgraden naar een premium abonnement om meer functies te ontgrendelen.

 

Jumpchart-site draadframe

Type: web applicatie

kosten: Gratis versie beschikbaar; premie $ 5 - $ 50/maand.

sprongdiagram niet bedoeld voor visueel websiteontwerp. In plaats daarvan is het ontworpen om u te helpen plannen hoe uw afzonderlijke pagina's zich tot elkaar verhouden. Dit is net zo belangrijk voor UX (gebruikerservaring) als paginalay-outs, en daarom is Jumpchart ook waardevol gratis tool, die kan worden toegevoegd aan uw arsenaal aan websiteplanning. Zoals je zou verwachten heeft het gratis abonnement zijn beperkingen (één project van maximaal 10 pagina's en 2 gebruikers), maar het is een prima startpunt voor het plannen van een eenvoudige website. Betaalde abonnementen bieden u meer opties en stellen u in staat om met meer pagina's en teamleden te werken, en met meerdere projecten tegelijk.

Als u een aspirant-webontwerper bent met een beperkt budget, biedt het gebruik van Wireframe.cc en Jumpchart u alles wat u nodig heeft om een ​​website te plannen. Dit is de visuele lay-out die onder de eerste valt en de sitemapplanning die onder de laatste valt. Beide applicaties vullen elkaar uitstekend aan en zijn gratis beschikbaar zonder download.

 

Gliffy/Site-draadframe

Type: web applicatie

kosten: Gratis versie beschikbaar; volledige versie $ 7,99/maand

Gliffy niet alleen voor draadframes. Dit is een webgebaseerde diagramtoepassing, maar bevat ook wireframes en andere soorten lay-outs. Het is iets minder intuïtief dan Wireframe.cc of Jumpchart, maar het is nog steeds gemakkelijk te gebruiken (slepen en neerzetten) en kan de doeleinden van beide bovenstaande apps samen dienen. Met Gliffy kunt u wireframes voor webpagina's maken, evenals stroomdiagrammen om uw sitemap weer te geven. Het heeft een aantal ingebouwde elementen om verschillende delen van een webpagina of andere lay-out weer te geven, en u kunt ook uw eigen afbeeldingen uploaden. Mogelijk vindt u het ook nuttig voor andere ontwerp- of planningstaken waarbij diagrammen moeten worden gemaakt. Website-framework

 

MockFlow

Type: web applicatie

kosten: Gratis versie beschikbaar; premie $ 19–45/maand.

MockFlow combineert ook functies voor het maken van wireframes en het plannen van sitemaps. Het is meer gespecialiseerd dan Gliffy, dus het is meer gericht op websites en teamsamenwerking dan op diagrammen. De wireframingtools zijn uitstekend, met een kant-en-klare bibliotheek met lay-outs en componenten om u op weg te helpen. U kunt eenvoudig binnen enkele minuten een wireframe maken en deze vervolgens naar wens bewerken. Premium-abonnementen ontgrendelen extra functies, zoals waardevolle functies voor teamsamenwerking en meer. Als u jaarlijks betaalt, krijgt u 20% korting, plus enkele bonusfuncties zoals de offline modus en extra tools. Website-framework

 

Canva

Type: web applicatie

kosten: Gratis versie beschikbaar; volledige versie $ 9,99/maand (jaarlijks gefactureerd)

Canva is een populaire online tool voor het maken van afbeeldingen van professionele kwaliteit, zelfs als u geen ontwerper bent. Het staat boordevol sjablonen, illustraties, foto's en meer. Omdat het geen speciale tool voor wireframing is, mist het enkele kenmerken van andere oplossingen die we tot nu toe hebben bekeken. U kunt het echter nog steeds gebruiken om heel eenvoudig wireframes te maken met behulp van slepen en neerzetten.

 

Adobe XD/Site-framework

Type: Software; beschikbaar voor Mac en Windows

kosten: Gratis versie beschikbaar; de volledige versie begint bij $ 9,99 per maand.

Adobe XD is een geavanceerde UX-ontwerptool gemaakt door de ontwikkelaars van Photoshop, Illustrator, InDesign en andere bekende professionele software. Als u bekend bent met Adobe-software, bent u zich bewust van de hoge mate van specialisatie en kracht in elk van hun toepassingen. Zolang je bereid bent de leercurve te beklimmen, geven hun tools je veel controle waarmee je bijna alles kunt produceren wat je maar bedenkt. Adobe XD is niet anders en biedt een rijke en robuuste set webontwerptools. Het gaat verder dan wireframes van websites en stelt u ook in staat complete mockups en zelfs prototypes in één projectbestand te maken. Gelukkig is het ook gemakkelijker te leren gebruiken dan andere Adobe-software, dus het is zeker het proberen waard als je op zoek bent naar een geavanceerdere oplossing. Website-framework

 

Figma

Type: Verkrijgbaar als webapplicatie en als software voor Mac, Windows en Linux.

kosten: Gratis versie beschikbaar; premie $ 12–45/maand.

Figma sterk gericht op realtime samenwerking tussen teamleden. Echter, zijn hulpmiddelen zijn even nuttig zelfs voor solo-ontwerpers. Figma biedt alles wat je nodig hebt om een ​​wireframe te maken, of je nu op zoek bent naar een basisontwerp of geavanceerder wilt gaan. De bewerkingstools bieden een hoge mate van precisie, zodat u het ontwerp indien nodig kunt aanpassen. Figma is ook uiterst compatibel met meerdere besturingssystemen, dus het kan een ideale oplossing zijn voor een Linux-ontwikkelteam.

 

Hoe u een frametool kiest

Uw gereedschapskeuze moet altijd afhangen van uw behoeften. Een websiteframework verschilt in dit opzicht niet van elk ander project. Het is ook belangrijk om vooraf het juiste gereedschap te kiezen. Natuurlijk kunt u met een kleiner budget beginnen en vervolgens indien mogelijk upgraden. Maar u wilt vermijden dat u hulpmiddelen gebruikt die helemaal niet geschikt zijn voor uw behoeften. Website-framework

Dus, hoe kies je de beste wireframing-tool voor webdesign? Stel jezelf de volgende vragen:

• Wat is mijn budget? Bereken hoeveel u zich kunt veroorloven om uit te geven aan software of toegang tot premium-apps. Houd er rekening mee dat dit meestal een maandelijks of jaarlijks bedrag is.
• Hoeveel teamleden hebben toegang nodig tot de tools? Dit kan het verschil betekenen tussen upgraden naar premium of het gebruik van een gratis account.
• Op welk besturingssysteem moet de tool draaien? Als u het niet zeker weet, is het het veiligst om bij webapps te blijven.
• Welke functies heb ik nodig? Vergelijk de beschikbare functies met de grootte van uw project. Als u alleen een eenvoudig draadframe hoeft te maken, is een beperkter hulpmiddel voldoende. Maar als u wireframes en prototypes volledig wilt verkennen, of als u ook uw sitemapstructuur moet plannen, bent u beter af met een geavanceerdere tool (of een combinatie van beide).
• Wat is mijn comfortniveau met een specifiek hulpmiddel? Zodra u uw opties heeft beperkt op basis van uw behoeften, kunt u alle tools proberen die aan deze vereisten voldoen. Profiteer optimaal van gratis proefperiodes! Zelfs tools met vergelijkbare mogelijkheden kunnen heel verschillende gebruikerservaringen hebben. Kies er een waarmee u gemakkelijk (of zelfs leuk) kunt werken.

 

Kernpunten/sitekader

Webdesign is een lonend vakgebied en er zijn veel tools beschikbaar om het gemakkelijker te maken. Een wireframingtool kan uw workflow vereenvoudigen en een centraal onderdeel van uw ontwerpproces worden. Laten we samenvatten wat we hebben besproken:

• Een wireframe-tool maakt webontwerp veel gemakkelijker en sneller voor een ontwerper, of hij nu alleen werkt of met een bureau.
• Er zijn veel geweldige opties beschikbaar, of u nu een webapp wilt gebruiken of software op uw computer wilt installeren.
• Verschillende raamwerktools kunnen beter zijn voor grotere teams en/of grotere projecten. Anderen zijn beperkter.
• Veel wireframing-tools bieden een gratis versie, en door te betalen kunnen veel van deze beperkingen worden opgeheven.
• Om de juiste tool voor wireframing te vinden, moet je jezelf een paar basisvragen stellen.
• Zoek altijd naar een gratis proefversie waarmee u vertrouwd kunt raken met de software.

Of je nu een ervaren ontwerper bent of net begint, er is iets voor jou perfect lay-out hulpmiddel. Als je het eenmaal hebt gevonden, zul je nooit meer teruggaan naar potlood en papier!

 АЗБУКА