Share
Wireframing er en nyttig del av webdesignprosessen. Det er flott å skille ut denne planleggingsfasen og få sideplassering, mellomrom, layout og andre elementer som tekststørrelse og tone ut før du hopper inn i Photoshop for å legge til farge, tekstur, bilder og effekter for å polere av designen din.
Fyrverkeri er et flott verktøy for å lage en wireframe, og mens det ikke fungerer perfekt med Photoshop, kan du eksportere der og deretter bygge av wireframe. Vi vil dekke designprosessen med å lage en wireframe for et iPhone-applikasjonsnettsted i Fireworks. For de av dere som ikke er kjent med dette programmet, vil det være et godt hopping av punkt for å bruke den til wireframe dine webdesign prosjekter. Dette er en første del av en flerdelte serie og vil være morsomt!
Nedenfor er wireframen vi skal jobbe for, og du kan se full-size wireframe versjonen her. Ønsker du tilgang til de fulle kildefilene og nedlastbare kopier av hver opplæring, inkludert denne? Bli med Vector Plus for bare 9 $ i måneden.
Det er mange fordeler med å lage wireframes som et eget stadium i din webdesignprosess. Her er noen av dem:
Det er ganske mange programmer der ute for webdesignere til å bruke for nettside wireframing. Noen kriterier for å velge et program som skal brukes på et gitt prosjekt er: Din kjennskap til programmet, din evne til å jobbe raskt i den, programmene som er gitt, det er tilpasningsevne til prosjektet ved hånden, det er evne til å lagre gjenbrukbare elementer, og det er fleksibilitet for å gjøre endringer.
Du vil kanskje bruke et program utenfor Adobe-familien, som Omni Graffle, og det er sikkert andre også. Hvis du skal bruke et program i Adobe Suite for wireframing, selv om Fireworks-regler øverst.
Du kan bruke Photoshop, selv om det er tregere å jobbe med for wireframing og mangler flersidet funksjonalitet og andre funksjoner som gjør Fireworks raskt til å planlegge nettsteder stort eller lite. Jeg skrev en artikkel om bruk av Illustrator for å bygge wireframing tilbake tidlig i 2008 (mer et bevis på konsept enn en anbefaling). Mens det er mulig å bruke til dette formålet, mangler det verktøyene Fyrverkeri har for wireframing. Jeg anbefaler å bruke fyrverkeri i de fleste tilfeller for wireframing. Det er virkelig bygget bra for dette formålet.
Vi bruker fyrverkeri for dette prosjektet fordi det er raskt å jobbe med. Du kan også enkelt bygge bokser, plassere dem, legge til tekst, legge runde hjørner og raskt lage layouter med fyrverkeri. Det er satt opp for webutvikling og prototyping. Når du tegner bokser, klikker de automatisk på piksler. Dette er uten å tappe inn i programmene mer avanserte funksjoner.
Det er også mulig å eksportere til Photoshop når du er ferdig med å lage wireframe, som er en ideell arbeidsflyt når du har den endelige utformingen, vil ha detaljer som er best opprettet i Photoshop. Det er noen problemer jeg vil gjerne se Adobe-adresse i den neste versjonen, men med integrering av arbeidsflyten fra Fireworks over til Photoshop.
La oss nå komme i gang med prosessen med å planlegge vårt prosjekt og bygge vår wireframe.
Før du hopper inn fyrverkeri og begynner å bygge et nettsted, er det noen få skritt å gå gjennom. Den første selvfølgelig er å definere prosjektet ditt, innholdet det vil inneholde, det er formålet, etc. Når du har jobbet dette ut med klienten, eller redusert fokuset ditt hvis det er et personlig prosjekt, så er det på tide å gjøre noen undersøkelser.
For dette fiktive prosjektet skaper vi et iPhone-program for salgsfremmende nettside for Aurora, som er en hypotetisk iPhone-app for belysning av iPhone med Aurora Borealis-lysmønstre. Tanken er at dette er en side av et større prosjekt for et selskap som selger flere iPhone-apper. Vi fokuserer på denne ene siden for denne opplæringen.
Som designer er vi litt opptatt av stil fra begynnelsen. Du vil kanskje lage notater om stiler du kommer over i din visuelle forskning eller bygge et humørbrett. Vårt primære fokus på å lage en wireframe skjønt er å definere vår layout og funksjonalitet (uten bekymring for farge eller stil på dette punktet).
For dette prosjektet så jeg gjennom en haug med iPhone-applikasjonsnettsteder. Jeg la merke til at det er noen vanlige biter av funksjonalitet som jeg tror ville hjelpe selge en app. Jeg kom over noen oppsett som jeg likte. Her er noen av dem:
Jeg likte den sekundære menyen på Tapulous. Det var noen andre nettsteder som hadde flere appikoner som kjører vertikalt, noe som har en fordel at de kan legge til ubegrensede apper og menyen vil passe på det, men jeg likte lett tilgangen til å få den til å løpe horisontalt mot toppen, siden dette nettstedet gjør.
Nettstedet Tapbots har ganske mange elementer som er vanlige på mange av de mer vellykkede iPhone-reklame-nettstedene. Den har et stort iPhone-bilde som har en innebygd videofil som viser appen i bruk. Den har en klar funksjonsliste, testimonials og annet innhold i et organisert rutenett, miniatyrbilde til større skjermbilder og en link til iPhone-appbutikken som skiller seg ut dristig.
Sonico Mobile-siden har også en sekundær navigasjon laget av horisontale ikoner som jeg likte. Jeg likte også deres bruk av salgsfremmende plass og hvordan den vertikale stående iPhone brøt opp det horisontale salgsfeltet. Måten de brøt av prisen fra salgsfeltet er godt gjort også.
Jeg er sikker på at jeg kunne finne flere nettsteder som har påvirket designen, men det er de som virkelig sammenstøpte mest for grunnleggende layout på nettstedet. På dette tidspunktet har jeg en god ide om hva jeg vil at nettstedet skal se ut i hodet mitt. Så nå må jeg hente det på papir.
Du kan se skissen nedenfor. Jeg gjør ofte flere skisser for å prøve ut forskjellige layouter, noe som er veldig raskt å gjøre når du arbeider rå med blyant og papir, men i dette tilfellet føltes det rett etter det første designet, så jeg var ferdig. Legg merke til at jeg takler problemet både visuelt og muntlig, gjør notater og noteringsfunksjoner som jeg vil se.
Husk at det er greit for ting å forandre når du går fra skisse til wireframe i fyrverkeri, men skissen bidrar til å få kjernenes ideer nede og trene dine opprinnelige tanker.
Nå som vi vet hva vi skal lage, la oss sette opp dokumentet vårt. Jeg bestemte meg for å bruke 960 Grid-systemet som grunnlag for designet. Nå er det ikke nødvendigvis viktig om rammen er til og med vant til å kode det til slutt, men det er et nett som allerede er etablert, det er lett å jobbe med, og jeg vet at det passer i de fleste skjermer, så jeg bruker det ofte for utforme.
Gå videre og last ned 960 Grid-systemet. Unzip den, i den mappen velg maler> fyrverkeri og åpne dokumentet "960_grid_12_col.png" i Fireworks (PNG er en lagdelt Fireworks-fil).
Gå til Endre> Lerret> Lerret Størrelse og endre lærredsstørrelsen til 1060px bred ved 1500px høyde. Klikk nå på "12 Col Grid" lagmappen i lagpaletten. Lås opp den, velg deretter alle de rosa kolonnene, strekk dem ned til dokumentets full lengde, og lås lagmappen.
Gå nå til Arkiv> Lagre, velg hvor du skal plassere den og gi den navnet "wireframe.png."
La oss nå sette opp lagene våre for å holde vår fil organisert. Vi gjør endringer mens vi går, men dette er en god start. Følg skjermbildet nedenfor. Merk at "Web Layer" ikke er noe vi skal bruke for dette prosjektet, men det kan ikke slettes fra fyrverkeri.
Opprette en wireframe layout er litt av en organisk prosess. Se på skissen din og begynn med de største elementene først. Vi starter med å plassere bakgrunnen for våre hovedavdelinger. Noen seksjoner skal bruke bakgrunnen til nettstedet.
Bruk rektangulært verktøy (U) til å lage bakgrunner (80px høyde) og "bunn" (360px høyde) bakgrunner, som spenner over hele bredden på nettstedet vårt. Opprett også vår "promotion" -bakgrunnsareal (forlater plass til sekundærnavigasjonen) og den er 940px bred (størrelsen på vårt hoveddokumentområde med 10px-marginer på hver størrelse) med 280px høyde.
En av fordelene ved å jobbe med fyrverkeri er egenskapsinspektøren. Jeg har gitt denne boksen en runde på 10% fra inspektøren, som ser bra ut. Legg merke til at en ting du vil unngå å gjøre med de avrundede boksene, tilpasses manuelt, da det vil kaste av krumningen i boksen. Bruk bredde- og høydefeltene i Egenskapsinspektøren til å justere størrelsen i stedet.
La oss starte med "topptekst" og "secondary_nav-områder". Mye av disse områdene utgjør hovednavigasjon og sekundær navigasjon, og noen få andre detaljer også. Først legger du på nettstednavnet på venstre side av "toppteksten". Dette er en plassholder for den endelige logo-designen.
Begynn med å plassere navigasjonsteksten i "header" -laget ved hjelp av tekstverktøyet (T) og bruk en standard sans-serif-skrift som Helvetica, Myriad Pro, eller hvilken som helst skrift du foretrekker. Du vil kanskje holde med nettvennlige skrifttyper. Jeg satte typen på 13pt, med en svartfarget, og gjorde den modig. Deretter legger du avrundede bokser som er 26px høyde og passende bred. Still inn avstanden slik det passer deg, og juster boksene til høyre styrelinje som vist. Legg merke til hvordan den valgte navigasjonen er representert med en mørk bakgrunn og hvit tekst.
Legg til bokser for sekundærnavigasjon. Opprett hver appikonboks på 57px med 57px med en sterk rundhet. Legg igjen plass til en annen boks 90px bred med 100px høyde for å passe bak ikonnavigasjonen med plass tildelt mellom hver. Legg til navn under hvert ikon satt til 10pt, svart og fet. Også, jeg har lagt til en plassholdergrafikk for en standard App Store-knapp som er riktig justert, som legger til et kall til handling og litt legitimitet.
Det første trinnet her er å lage to bokser ved hjelp av de samme metodene som beskrevet ovenfor. Den store til høyre representerer et mellomrom hvor et bilde av en iPhone vil gå, hvilken video kan legges til skjermen til. Den nedre boksen er vår viktigste oppfordring til handling.
Nå er denne knappen omtrent den samme størrelsen som standard App Store-knappen, og begge kobler til samme sted (de tjener en lignende funksjon). Dette kan føles som overkill i wireframe, men med farge og andre detaljer kan dette fungere når vi lager den endelige utformingen. Dette er noe å gjøre oppmerksom på skjønt.
Min følelse er at Standardknappen gir litt troverdighet, og vi kan behandle den andre knappen stilistisk slik at den skiller seg ut og virkelig trekker øyet som hovedbruken til handling.
Legg merke til hvordan disse boksene overlapper bakgrunnsområdet for salgsfremmende områder. Denne typen layout gjør at disse to elementene skiller seg ut på siden.
La oss lage et område for å plassere prisen på appen. Først opprett en boks ved hjelp av rektangulærverktøyet (U). Mens du lager boksen, hold nede Skift-tasten for å gjøre den til et perfekt firkant. Gå videre og gjør denne 170px bred ved 170px høyde.
Klikk nå Kommando + T, hold nede Skift-tasten, og roter firkanten til en 45 graders vinkel. Sett det deretter opp som vist nedenfor slik at det er jevnt plassert over markedsplassen for salgsfremmende områder. Kopiér nå (Command + C) reklameområdet bakgrunn og Lim inn (Command + V), som i Fireworks automatisk legger inn en kopi på plass.
Nå velger du firkanten og bakgrunnen, og deretter går du til Endre> Kombinere baner> Intersect. Og din venstre med formen vi vil ha.
Legg nå all teksten som vi gjorde før. Du kan utforske ulike tekstalternativer på dette punktet. Jeg er for det meste fokusert på størrelse, vekt og posisjon i denne wireframe, og jeg skal jobbe med stil og fonter i det endelige designet. Også prisen er opprettet ved å trykke Command + T, holde shift, og rotere teksten 45 grader. Endre deretter avstanden og størrelsen til den ser bra ut.
Legg også til en horisontal regel under den største teksten (1px høyde rektangel). Slå deretter på styrene ved å trykke på Kommando + kolonitast. Pass på at alt du har opprettet linjer opp som vist nedenfor.
Teknikkene som brukes til å plassere denne informasjonen er helt grunnleggende. Det er alle grunnleggende bokser og tekst. Så fortsett og legg inn kroppsinformasjonen som vist nedenfor (du vil kanskje slå på guider og gridoverlegg som vist i neste avsnitt). Hensikten med denne delen er å legge til salgsinformasjon. Vi beskriver appen, hva den gjør, viser skjermbilder av den i aksjon, legger til mindre tekniske detaljer og gir vitnemål.
Gå videre og slå på "12 Col Grid" -laget som holder vår gridoverlegg og slå på våre guider. Legg merke til hvordan denne delen utnytter en tre kolonneoppsett. Hver kolonne er 300px bred. Gitteret er ikke så tydelig ovenfor, men du kan se hvordan iPhone-boksen stemmer opp med den tredje kolonnen, og kampanjeteksten strekker seg opp med de to første kolonnene i kroppsdelen. Strukturen til vårt rutenett viser nå.
Husk å holde lagene dine organisert, som vist nedenfor.
Bildet nedenfor viser hva vi lager for bunnseksjonen. Det er fire seksjoner, så hold lagene dine organisert tilsvarende. Denne delen er fokusert på selskapet og ikke søknaden. Mange nettsteder som selger iPhone-apper, har mer enn en app som de selger, eller i noen tilfeller fokuserer på å dekke mer enn å selge iPhone-apper. Så formålet med denne delen er å markedsføre selskapet, det er blogg, det er kundesupport, og det er Twitter-feed.
Legg merke til hvordan vi bruker vårt rutenett forskjellig for denne delen. Vi har gått med en fire kolonne satt opp her, noe som gjør hver kolonne 220px bred.
Det meste av byggingen av denne delen er grunnleggende tekst og bokser. Lenkboksen nederst i hver seksjon er i samme størrelse som vår hovednavigasjon og kan kopieres derfra. La oss ta en titt på et par aspekter av denne delen. Først opp er hvordan du lager en prikket linje, som er enkel å gjøre i fyrverkeri.
Du kan selvfølgelig bruke Linjeverktøyet (N) til å lage linjen, men jeg brukte rektangulært verktøy (U) i stedet. Gjør størrelsen 220px bred med 1px høy. Gi det ingen fyll og en slagfarve som er mørkere grå enn bakgrunnen. Lag stoke størrelse 1. Deretter klikker du på knappen ved siden av strekkstørrelsen, som gir oss linjevalg. Gå til bindestreker og velg deretter prikket som vist nedenfor.
En ting jeg ofte gjør når du lager wireframes, er å tenke på noen ikoner som vil bli brukt i det endelige designet. I dette tilfellet er det bare en som vi skal bruke fra andre steder. Du kan beholde ikonet full farge, men jeg vil ha denne wireframe i gråtoner og å fokusere på layout og avstand, og ikke farge på dette punktet.
Last ned gratis Practika Icon-pakken fra Smashing Magazine. Dra og slipp 64px ved 64px fil "twitter.png" i dokumentet. Plasser den som vist og pass på at boksen den er plassert på, er bred nok til den passer inn. Nå med det valgte bildet, gå til Filtre> Juster farge> Fargetone / Metning, og snu deretter Saturation helt ned.
Igjen, la oss holde mappene våre organisert.
Dette er veldig grunnleggende. Pass på at du legger til nettstednavnet og opphavsretten. Også plasser tekstlige koblinger som gjentar hovednavigasjonsnavigasjonen. Hvis det er noen viktige tilleggskoblinger, kan du også plassere dem her også. Juster opphavsretten til venstre kant og koblingene til høyre kant som vist nedenfor.
I opplæringen Oppretting av et nettsted Wireframe i Illustrator Jeg diskuterer å legge til callouts til en wireframe, og det er en nyttig måte å legge til notater på en wireframe. En annen nyttig måte er å plassere notatene inline. Dette er ganske rett frem og er nyttig for å kommunisere funksjoner, funksjonalitet eller problemer med klienter.
Jeg liker å sette notater i blått, slik at notatene hviler på toppen av wireframe og blå har en blåkopi-følelse. Den endelige wireframe er under og du kan se full-size wireframe versjonen her.
Ta opp alt som du ikke vil rasterisere når det går til Photoshop. Hvis du for eksempel ønsker å opprettholde edbarhet for tekst, må du sørge for at teksten ikke er gruppert til noe. Det er greit å plassere ting i mapper selv. Dette er en av de særegenheter ved eksport fra fyrverkeri til Photoshop.
Du vil kanskje også bestemme om det er verdt å bringe teksten fra fyrverkeri over til Photoshop (du kan velge å slette den og deretter gjenskape den i Photoshop). Jeg har opplevd at tekstbokser kommer over rart, som du vil se i neste opplæring som tar denne wireframe og skaper en fullfargede Photoshop-webdesign. I så fall holder vi teksten på plass.
Gå til Arkiv> Lagre som og klikk Valg. Standardinnstillingen er Vedlikehold Edibility over Appearance. Gå videre og la dette stå til standard og klikk deretter Lagre. Vedlikehold av spiselighet vil plassere våre former som formlag i Photoshop, i stedet for å rasterisere dem, som i dette tilfellet er foretrukket.
Fyrverkeri er flott for wireframing og prototyping nettsteder. Selv i et en-sidedesign vil du legge merke til hvor raskt du kan utarbeide ulike oppsettalternativer og raskt bygge strukturen på designet. Når du begynner å jobbe med dette programmet for større prosjekter, finner du også et vell av verktøy. I vår neste opplæring i denne serien tar vi denne iPhone-applikasjonen wireframe og avslutter designen i Photoshop.
Det er ganske mange tilleggsfunksjoner i fyrverkeri, som ikke var dekket i denne opplæringen, men vil hjelpe deg med ditt neste prosjekt. Nedenfor er et par nyttige opplæringsprogrammer om bruk av Fireworks for Wireframing, du vil kanskje også vurdere. Også, hvis du støter på relevante tutorials eller ressurser, så vær sikker på å koble til dem i kommentarene som skal deles med fellesskapet.
Abonner på Vectortuts + RSS-feed for å holde deg oppdatert med de nyeste vektoropplæringene og artiklene.
Accentsconagua