Share
Wireframing is een nuttig onderdeel van het ontwerpproces van de website. Het is geweldig om deze planningsfase te scheiden en uw paginapositionering, spatiëring, lay-out en andere elementen zoals tekstgrootte en -toon te laten werken voordat u naar Photoshop springt om kleur, textuur, afbeeldingen en effecten toe te voegen om uw ontwerp te verfijnen.
Fireworks is een geweldige tool om een wireframe te maken en hoewel het niet perfect werkt met Photoshop, kun je daarheen exporteren en vervolgens je wireframe opbouwen. We bespreken het ontwerpproces voor het maken van een draadmodel voor een iPhone-toepassingswebsite in Fireworks. Voor degenen onder u die niet bekend zijn met dit programma, zal het een goed startpunt zijn om het te gebruiken om uw webontwerpprojecten te verbinden. Dit is een eerste deel van een meerdelige serie en zal leuk zijn!
Hieronder ziet u het draadframe waar we naartoe zullen werken en u kunt hier de full-size wireframe-versie bekijken. Wil je toegang tot de volledige bronbestanden en downloadbare exemplaren van elke zelfstudie, inclusief deze? Word lid van Vector Plus voor slechts 9 $ per maand.
Er zijn talloze voordelen aan het maken van wireframes als een afzonderlijke fase in het ontwerpproces van uw website. Hier zijn er een paar:
Er zijn nogal wat programma's beschikbaar voor webontwerpers om te gebruiken voor wireframing op websites. Enkele criteria voor het kiezen van een programma om te gebruiken voor een bepaald project zijn: je bekendheid met het programma, je vermogen om er snel in te werken, de gegeven programmafunctionaliteit, het aanpassingsvermogen aan het project bij de hand, het vermogen om herbruikbare elementen op te slaan, en het is flexibiliteit voor het maken van bewerkingen.
Wellicht wilt u een programma buiten de Adobe-familie gebruiken, zoals Omni Graffle, en er zijn zeker ook andere programma's. Als je een programma binnen de Adobe Suite gaat gebruiken voor wireframing, dan blijft Fireworks het beste.
U kunt Photoshop gebruiken, hoewel het langzamer is om mee te werken voor wireframing en het ontbreekt aan functionaliteit voor meerdere pagina's en andere functies waarmee Fireworks snel grote of kleine websites kan plannen. Ik schreef begin 2008 een artikel over het gebruik van Illustrator voor het bouwen van wireframing (meer een proof of concept dan een aanbeveling). Hoewel het voor dit doel kan worden gebruikt, ontbreken de tools die Fireworks heeft voor wireframing. Ik raad aan om Fireworks in de meeste gevallen te gebruiken voor wireframing. Het is echt goed gebouwd voor dit doel.
We gebruiken Fireworks voor dit project omdat het snel werkt. U kunt ook eenvoudig dozen bouwen, positioneren, tekst toevoegen, afgeronde hoeken toevoegen en snel lay-outs maken met Fireworks. Het is opgezet voor webontwikkeling en prototyping. Als u dozen tekent, worden ze automatisch naar pixels geknipt. Dit is zonder zelfs gebruik te maken van de meer geavanceerde functies van het programma.
Het is ook mogelijk om naar Photoshop te exporteren als u klaar bent met het maken van het draadframe, wat een ideale workflow is wanneer u in het definitieve ontwerp de details hebt die het best in Photoshop zijn gemaakt. Er zijn een paar problemen waar ik het Adobe-adres graag zou willen zien in de volgende versie, met integratie van de workflow van Fireworks tot Photoshop.
Laten we nu beginnen met het proces van het plannen van ons project en het bouwen van ons draadframe.
Voordat u in Fireworks begint en begint met het bouwen van een website, zijn er een paar stappen om door te gaan. De eerste is natuurlijk het definiëren van je project, de inhoud die het bevat, het doel, enz. Als je dit eenmaal met de klant hebt uitgewerkt, of je focus hebt verkleind als het een persoonlijk project is, dan is het tijd om wat onderzoek te doen.
Voor dit fictieve project maken we een iPhone-promotiewebsite voor Aurora, een hypothetische iPhone-app voor het verlichten van je iPhone met Aurora Borealis-lichtpatronen. Het idee is dat dit één pagina is van een groter project voor een bedrijf dat meerdere iPhone-apps verkoopt. We concentreren ons op deze ene pagina voor deze zelfstudie.
Als ontwerper houden we ons vanaf het begin enigszins bezig met stijl. Misschien wil je aantekeningen maken over stijlen die je tegenkomt in je visuele onderzoek of een moodboard bouwen. Onze primaire focus op het maken van een wireframe is echter het definiëren van onze lay-out en functionaliteit (zonder zorgen voor kleur of stijl op dit punt).
Voor dit project heb ik een heleboel iPhone-applicatiesites bekeken. Ik heb gemerkt dat er een aantal veelvoorkomende functies zijn waarvan ik denk dat ze een app kunnen helpen verkopen. Ik kwam enkele lay-outs tegen die ik leuk vond. Hier zijn er een paar:
Ik vond de secundaire menu op Tapulous. Er waren een paar andere sites met meerdere app-pictogrammen die verticaal liepen, wat een voordeel was dat ze onbeperkte apps konden toevoegen en dat het menu er zou in passen, maar ik vond de gemakkelijke toegang om horizontaal naar de top te lopen erg leuk, omdat deze site doet.
De site Tapbots heeft nogal wat elementen die vaak voorkomen op veel van de meer succesvolle iPhone-app-advertentiesites. Het heeft een grote iPhone-afbeelding met een ingesloten videobestand dat de app in actie weergeeft. Het heeft een duidelijke lijst met functies, getuigenissen en andere inhoud in een georganiseerd raster, miniatuurkoppelingen naar grotere schermafbeeldingen en een link naar de iPhone-app store die er moedig uitziet.
De Sonico Mobile-site heeft ook een secundaire navigatie gemaakt van horizontale pictogrammen die ik leuk vond. Ik hield ook erg van hun gebruik van promotieruimte en hoe de verticaalstaande iPhone die horizontale promotieruimte heeft verbroken. De manier waarop ze de prijzen van de promotieruimte hebben verbroken, is ook goed gedaan.
Ik weet zeker dat ik meer sites zou kunnen vinden die het ontwerp hebben beïnvloed, maar dat zijn degenen die het meest samenwerkten voor de basislay-out van de site. Op dit punt heb ik een goed idee van hoe ik wil dat de site er in mijn hoofd uitziet. Dus nu moet ik het op papier zetten.
Je kunt de onderstaande schets zien. Ik doe vaak meerdere schetsen om verschillende lay-outs uit te proberen, wat heel snel gaat als ik rauw werk met een potlood en papier, maar in dit geval voelde het direct na het eerste ontwerp, dus ik was klaar. Let op Ik behandel het probleem zowel visueel als verbaal, maak notities en vermeld functies die ik wil zien.
Houd in gedachten dat het goed is dat dingen veranderen als je van schets naar draadframe gaat in Fireworks, maar de schets helpt je kernideeën te achterhalen en je eerste gedachten uit te werken.
Nu we weten wat we gaan maken, laten we ons document opstellen. Ik besloot om het 960-rastersysteem te gebruiken als basis voor het ontwerp. Nu maakt het niet noodzakelijkerwijs uit of dat framework zelfs wordt gebruikt om het uiteindelijk te coderen, maar het is een grid dat al is opgezet, het is gemakkelijk om mee te werken en ik weet dat het in de meeste monitors past, dus ik gebruik het vaak voor ontwerpen.
Ga je gang en download het 960 Grid-systeem. Pak het uit, selecteer binnen die map sjablonen> vuurwerk en open het document "960_grid_12_col.png" in Fireworks (de PNG is een gelaagd Fireworks-bestand).
Ga naar Modify> Canvas> Canvas Size en verander de canvasgrootte in 1060px breed bij 1500px hoogte. Klik nu op de "12 Col Grid" -laagmap in het lagenpalet. Ontgrendel het en selecteer vervolgens alle roze kolommen, strek ze uit tot de volledige lengte van het document en vergrendel de laagmap.
Ga nu naar Bestand> Opslaan, kies waar je het wilt plaatsen en noem het "wireframe.png."
Laten we nu onze lagen instellen om ons bestand overzichtelijk te houden. We zullen wijzigingen aanbrengen als we doorgaan, maar dit is een goed begin. Volg de onderstaande schermafbeelding. Let op: de "Web Layer" is niet iets dat we zullen gebruiken voor dit project, maar het kan niet worden verwijderd uit Fireworks.
Het creëren van een draadmodellay-out is een beetje een organisch proces. Raadpleeg je schets en begin met de grootste elementen eerst. We beginnen met het plaatsen van onze achtergronden voor onze hoofdsecties. Sommige secties gaan de achtergrond van de site gebruiken.
Gebruik het gereedschap Rechthoek (U) om de achtergronden "kop" (hoogte 80px) en hoogte "bodem" (360px hoogte) te maken, die de volledige breedte van onze site beslaan. Maak ook ons "promotie" achtergrondgebied (ruimte vrij voor onze secundaire navigatie) en het is 940px breed (de grootte van ons hoofddocumentgebied met 10px marges op elke grootte) met 280px hoogte.
Een van de voordelen van werken met Fireworks is de eigenschappencontrole. Ik heb deze doos een ronding van 10% gegeven van de inspecteur, die er goed uitziet. Merk op dat een ding dat je wilt vermijden te doen met je afgeronde vakken is om ze handmatig te vergroten, omdat het de kromming van de doos zal afwerpen. Gebruik de velden width en height in het eigenschappenvenster om het formaat aan te passen.
Laten we beginnen met de "header" en "secondary_nav areas." Veel van deze gebieden vormen de hoofdnavigatie en secundaire navigatie, en een paar andere details ook. Plaats eerst de sitenaam links op de rij van onze 'header'. Dit is een plaatshouder voor het uiteindelijke logo-ontwerp.
Begin met het plaatsen van de navigatietekst in de "header" -laag met behulp van het tekstgereedschap (T) en gebruik een standaard schreefloos lettertype zoals Helvetica, Myriad Pro of een willekeurig lettertype dat u verkiest. U wilt misschien vasthouden aan web-vriendelijke lettertypen. Ik heb het type ingesteld op 13pt, met een kleur zwart en vetgedrukt gemaakt. Voeg vervolgens afgeronde vakken toe met een hoogte van 26 px en voldoende breed. Stel de afstand in zoals u wilt en lijn de vakken uit op de rechterrichtlijn, zoals weergegeven. Merk op hoe de geselecteerde navigatie wordt weergegeven met een donkere achtergrond en witte tekst.
Voeg nu vakken toe voor de secundaire navigatie. Maak elk pictogramvak van een app op 57px bij 57px met een sterke ronding. Laat ruimte over voor een andere doos van 90px breed bij 100px hoogte om achter de pictogramnavigatie te passen met ruimte tussen elk vak. Voeg namen toe onder elk pictogram ingesteld op 10pt, zwart en vetgedrukt. Ik heb ook een afbeelding voor plaatshouders toegevoegd voor een standaard App Store-knop die rechts is uitgelijnd, waardoor een call-to-action en enige legitimiteit wordt toegevoegd.
De eerste stap hier is om twee dozen te maken met dezelfde methoden als hierboven beschreven. De grote rechts vertegenwoordigt een ruimte waar een afbeelding van een iPhone naartoe gaat, welke video kan worden toegevoegd aan het scherm van. De onderste doos is onze belangrijkste oproep tot actie.
Nu is deze knop ongeveer even groot als de standaard App Store-knop en koppelen ze allebei aan dezelfde plaats (ze serveren een vergelijkbare functie). Dit kan een overdaad lijken in het draadframe, maar met kleur en andere details kan dit werken zodra we het definitieve ontwerp maken. Dit is echter iets om op te merken.
Mijn gevoel is dat de standaardknop een beetje geloofwaardigheid toevoegt, en we kunnen de andere knop stilistisch behandelen op een manier dat hij meer opvalt en echt de aandacht trekt als de belangrijkste oproep tot actie.
Merk op hoe deze vakken de achtergrond van het promotiegebied overlappen. Dit soort lay-out maakt deze twee elementen echt opvallen op de pagina.
Laten we een gebied maken om de prijs van de app te plaatsen. Maak eerst een box met het gereedschap Rechthoek (U). Houd tijdens het maken van het vak de Shift-toets ingedrukt om het een perfect vierkant te maken. Ga je gang en maak deze 170px breed bij 170px hoogte.
Druk nu op Command + T, houd de Shift-toets ingedrukt en draai het vierkant naar een hoek van 45 graden. Lijn het dan uit zoals hieronder getoond, zodat het gelijkmatig over de achtergrond van het promotionele gebied wordt geplaatst. Kopieer nu (Command + C) de promotiegebiedachtergrond en plak (Command + V), die in Fireworks automatisch een kopie op zijn plaats plakt.
Selecteer nu het vierkant en de achtergrond en ga vervolgens naar Wijzigen> Combineer paden> Snijden. En je links met de vorm die we willen.
Voeg nu alle tekst toe zoals we eerder deden. U kunt op dit moment verschillende tekstopties verkennen. Ik ben vooral gericht op grootte, gewicht en positie in dit draadmodel en ik zal werken aan stijl en lettertypen in het definitieve ontwerp. Ook wordt de prijs gecreëerd door op Command + T te drukken, shift ingedrukt te houden en de tekst 45 graden te draaien. Wijzig vervolgens de afstand en de grootte totdat deze er goed uitziet.
Voeg ook een horizontale regel toe onder de grootste tekst (1px hoogte-rechthoek). Schakel vervolgens de handleidingen in door op Command + Colon te drukken. Zorg ervoor dat alles wat u hebt gemaakt, wordt uitgelijnd zoals hieronder wordt weergegeven.
De technieken die worden gebruikt om deze informatie te plaatsen, zijn allemaal basaal. Het zijn allemaal standaardvakken en tekst. Dus ga je gang en plaats de body-informatie zoals hieronder getoond (misschien wil je je gidsen en grid-overlay inschakelen zoals getoond in de volgende sectie). Het doel van deze sectie is om verkoopgegevens toe te voegen. We beschrijven de app, wat hij doet, screenshots ervan in actie weergeven, kleine technische details toevoegen en getuigenissen geven.
Ga je gang en schakel de laag '12 Col Grid' in die onze rasteroverlay vasthoudt en onze gidsen aanzet. Merk op hoe deze sectie een opstelling met drie kolommen gebruikt. Elke kolom is 300px breed. Het raster is hierboven niet zo duidelijk, maar je kunt zien hoe het iPhone-vakje in lijn ligt met de derde kolom en de promotietekst staat in lijn met de eerste twee kolommen van het hoofdgedeelte. De structuur van ons netwerk is nu echt zichtbaar.
Zorg ervoor dat je je lagen overzichtelijk houdt, zoals hieronder getoond.
De afbeelding hieronder laat zien wat we aan het maken zijn voor het onderste gedeelte. Er zijn vier secties, dus houd uw lagen dienovereenkomstig georganiseerd. Dit gedeelte is gericht op het bedrijf en niet op de toepassing. Veel sites die iPhone-apps verkopen, hebben meer dan één app die ze verkopen, of in sommige gevallen focussen ze meer dan alleen iPhone-apps verkopen. Het doel van deze sectie is dus om het bedrijf te promoten, het is een blog, het is klantenondersteuning en het is Twitter-feed.
Merk op hoe we ons rooster op een andere manier gebruiken voor deze sectie. We zijn gegaan met een opstelling met vier kolommen hier, die elke kolom 220px breed maakt.
Het grootste deel van de constructie van deze sectie is basistekst en vakken. De koppelingsvakken onderaan elke sectie zijn even groot als onze hoofdnavigatie en kunnen vanaf daar worden gekopieerd. Laten we een paar aspecten van deze sectie eens bekijken. Eerst moet je een stippellijn maken, wat heel eenvoudig is in Fireworks.
Je kunt natuurlijk het lijngereedschap (N) gebruiken om de lijn te maken, maar in plaats daarvan heb ik het gereedschap Rechthoek (U) gebruikt. Maak de afmeting 220 px breed bij 1 px hoog. Geef het geen vulling en een streekkleur die donkerder grijs is dan de achtergrond. Maak de stoke-maat 1. Klik vervolgens op de knop naast de streekgrootte, die ons lijnopties geeft. Ga naar Streepjes en kies vervolgens Gestippeld zoals hieronder getoond.
Eén ding dat ik vaak doe bij het maken van wireframes, is nadenken over pictogrammen die in het definitieve ontwerp worden gebruikt. In dit geval is er slechts één die we van elders zullen gebruiken. U zou het pictogram in kleur kunnen houden, maar ik wil dit draadframe in grijstinten en om zich te concentreren op lay-out en spatiëring, en niet op kleur op dit punt.
Download het gratis Practika Icon-pakket van Smashing Magazine. Sleep het 64px by 64px bestand "twitter.png" naar het document. Plaats het zoals weergegeven en zorg ervoor dat de doos waarop het wordt geplaatst breed genoeg is om in te passen. Ga nu met de geselecteerde afbeelding naar Filters> Kleur aanpassen> Tint / Verzadiging en verdraai vervolgens de verzadiging helemaal.
Nogmaals, laten we onze mappen georganiseerd houden.
Dit is echt basic. Zorg ervoor dat u de sitenaam en copyright toevoegt. Plaats ook tekstuele links die de navigatie van de hoofdsite herhalen. Als er belangrijke aanvullende links zijn, kunt u deze hier ook plaatsen. Lijn het copyright uit met de linkerrand en de links naar de rechterrand, zoals hieronder getoond.
In de zelfstudie Een websitedraadframe bouwen in Illustrator bespreek ik het toevoegen van call-outs aan een draadframe en dat is een handige manier om aantekeningen toe te voegen aan een draadframe. Een andere handige manier is om de biljetten inline te plaatsen. Dit is redelijk eenvoudig en is nuttig voor het communiceren van functies, functionaliteit of problemen met clients.
Ik vind het leuk om bankbiljetten in het blauw te plaatsen, zodat de bankbiljetten op het draadframe rusten en blauw een blauwdrukgevoel heeft. Het laatste draadframe is hieronder en je kunt hier de full-size wireframe-versie bekijken.
Degroepeer alles dat u niet wilt rasteren als het naar Photoshop gaat. Als u bijvoorbeeld de eetbaarheid voor tekst wilt behouden, moet u ervoor zorgen dat de tekst niet is gegroepeerd. Het is prima om dingen in mappen te plaatsen. Dit is een van de eigenaardigheden van exporteren van Fireworks naar Photoshop.
Misschien wilt u ook beslissen of het de moeite waard is om de tekst uit Fireworks naar Photoshop te brengen (u kunt ervoor kiezen om het bestand te verwijderen en het vervolgens opnieuw in Photoshop te maken). Ik heb de ervaring gehad dat de tekstvakken vreemd overkomen, wat je zult zien in de volgende tutorial die dit draadframe in beslag neemt en een full-color Photoshop-websiteontwerp creëert. In dit geval houden we de tekst op zijn plaats.
Ga naar Bestand> Opslaan als en klik op Opties. De standaardinstelling is Edibility Edidence over Appearance. Ga je gang en laat dit bij de standaardwaarde staan en klik op Opslaan. Door eetbaarheid in stand te houden, plaatsen we onze vormen als vormlagen in Photoshop in plaats van ze te rasteren, wat in dit geval de voorkeur heeft.
Fireworks is ideaal voor websites voor wireframing en prototyping. Zelfs in een ontwerp met één pagina zult u merken hoe snel u verschillende lay-outopties kunt uitwerken en snel de structuur van uw ontwerp kunt opbouwen. Zodra u begint te werken met dit programma voor grotere projecten, zult u ook een schat aan hulpmiddelen ontdekken. In onze volgende tutorial in deze serie nemen we het wireframe van deze iPhone-toepassing en maken we het ontwerp af in Photoshop.
Er zijn nogal wat aanvullende functies in Fireworks, die niet in deze zelfstudie aan de orde kwamen, maar die u zouden helpen bij uw volgende project. Hieronder vindt u een aantal nuttige zelfstudies over het gebruik van Fireworks voor Wireframing die u mogelijk ook wilt bekijken. Als u relevante tutorials of bronnen tegenkomt, moet u er ook in de opmerkingen naar verwijzen om deze met de community te delen.
Abonneer u op de Vectortuts + RSS-feed om op de hoogte te blijven van de nieuwste vectorhandleidingen en -artikelen.
Accentsconagua