Een website-prototype combineert de wireframes van afzonderlijke web-pagina's in een ruwe overzicht van de site uitsluitend gericht op testen pagina lay-out en de navigatie systemen. Maken van een prototype is gewoon het creëren van een basis website met werkende links maar geen ontwerpelementen zoals kleurenschema of afbeeldingen. Hierdoor een webteam kunt u de indeling voor een consistent ontwerp binnen de site die zowel functioneel en aantrekkelijk aanpassen.
Wat die u nodig hebt
- Prototype software
- HTML-editor
- Web ontwerpsoftware
Open een softwareprogramma of online programma voor het maken van draadmodellen en prototypen. Een foto-bewerkingsprogramma kan zal werken voor het maken van uw prototype vanaf nul, maar meer tijd in beslag.
Slepen en neerzetten van gepaste afmetingen, licht-gekleurde vierkanten en rechthoeken te vertegenwoordigen de verschillende secties van uw web-pagina, zoals het logo, navigatie menu's en de hoofdmacht. Eén kleur gebruiken in verschillende tinten, zoals grijs, om te helpen focus op lay-out en niet kleurenschema.
Herhaal stap 2 voor elke web-pagina op uw website. Plekken voor alle navigatie-elementen en menu's bevatten.
Uitschrijven van de HTML-code voor alle pagina's van uw website met behulp van een HTML-editor, het ontwerp baseert op de sjablonen die u hebt gemaakt in stap 1 tot en met 3. Gebruik web ontwerpsoftware, zoals Adobe Dreamweaver, uw pagina's te maken als u niet HTML weet. Weglaten van achtergronden en afbeeldingen. Vervangen door verschillende licht grijs gekleurde achtergronden of dozen en label met tags zoals "Logo" of "Header" om te laten zien wat er moet gaan.
Typ alle relevante tekst in de pagina's. Kiezen om te schrijven een samenvatting zin of alinea met vermelding van het doel van de pagina voor snellere prototyping. Verwijzen naar deze doel-verklaring als u wilt bepalen hoe goed een pagina functies in de huidige lay-out van de website.
Uw prototype online bekijken en testen van het systeem van de navigatie, links en menu's. Maak notities van secties te veranderen of pagina's die niet werken. Controleer dat uw pagina's dezelfde navigatie en lay-out regeling in de gehele gebruiken.
- SitePoint.com raadt OmniGraffle en Axure RP Pro voor framing en prototyping. Een andere optie is een potlood, een gratis Mozilla Firefox add-on.
- W-edge Design raadt aan uw prototype's tekenen op papier hebt u problemen met de HTML-code naar wens uitziet of wilt een snelle manier om te spelen met verschillende lay-out ideeën.
