Et tilfelle for koding av wireframes

Å jobbe som designer hver dag kan være mektig. Heldigvis har feltet utvidet seg, og prosessen er derfor blitt enklere. Mange gratis verktøy og ressurser er der ute.

Wireframes gir eleganse for å designe mock-ups. De er grunnleggende strukturen på et nettsted, med farger og forbedringer fjernet.

De er vant til å se designkonsepter med bare de absolutte nødvendighetene, og de kan gi et nyttig perspektiv på et hvilket som helst prosjekt.

De fleste wireframes er opprettet i programvarepakker som Adobe Photoshop og Fireworks, men enkelte nettsteder gjør at du kan lage wireframe-bilder rett i nettleseren.

I dette innlegget går vi over koding av et grunnleggende wireframe-bilde i HTML og CSS, og se hvordan det kan være til nytte for den kreative prosessen.

Hvorfor bry seg?

Hvorfor bruke tid på å skissere en nettside struktur? I noen tilfeller kan det være unødvendig, men det kan hjelpe når du sitter fast i en rulle eller sliter med å se det store bildet.

Det kan være til nytte for både designere og kunder. I lønnet arbeid er du ansvarlig for å tilfredsstille kunden. Å vise den grunnleggende strukturen til deres snart-å-designe nettsted kan gi kundene lettelse og en følelse av kontroll over hele prosessen.

Men hvis designen er veldig grunnleggende eller har en enkel struktur, kan det hende at det ikke er verdt å lage en wireframe. Mocking opp hele tingen i Photoshop, med knapper og farge, kan være like rask.

Bestemme hvilke skritt å ta krever tid og kritisk tenkning. Tross alt er en wireframe bare et verktøy. Det er undervurdert av mange webdesignere, men overraskende nyttig en gang forstått.

Prototyping Wireframes i kode

I årevis har Adobe-designprogramvaren vært den førende serien for wireframe-opprettelse, men nettet har gjennomgått betydelig forandring og er fortsatt i utvikling.

Stigningen av kodingsstandarder og økning i HTML5 dokumentasjon er store skritt mot en felles web. Koding av en grunnleggende wireframe i HTML og CSS er nå ikke noe mer enn å takle jobben i fyrverkeri.

Med wireframes kan du angripe et prosjekt head-on fra flere vinkler. Du kan til og med teste for kompatibilitet med CSS2 og CSS3 teknikker og nettlesere. Ting trenger ikke å være komplisert i begynnelsen; en wireframe tjener bare som et solid fundament for å begynne koding.

Deling av innhold blir også lettere med en wireframe. Du kan være vert for alle filene du trenger på en hvilken som helst webserver, og du kan sette opp en demokatalog og sende live oppdateringer til klienter og overvåkere av prosjektet ditt. Å gjøre endringer, for eksempel raske tweaks til marginer og bredder i dokumentets CSS, er også enkelt.

Standardiser koden for langdistanse

Wireframes sparer tid i utviklingsprosessen. Hvis CSS-stilene for de grunnleggende elementene dine allerede er skrevet, er resten bare filler (viktig fyllstoff, tenk deg).

Start riktig, med riktig HTML-dokumenttype og katalogstruktur. Dokumenttyper er ikke så forskjellige fra hverandre. Du kan lese om dem på W3C spesifikasjonsside . De spiller ingen rolle i den gamle World Wide Web-modellen, men HTML5 er grundig og lar nettstedet ditt vokse.

Du må teste kompatibiliteten på så mange operativsystemer og nettlesere som mulig, og wireframe prototypingstadiet er den perfekte tiden til å gjøre dette, fordi du allerede har fokus på å arrangere oppsettet.

Dette er også en god tid å jobbe med en mobilvennlig mal. Etter hvert som strukturen endres, bør du kunne inkorporere ideer og manipulere dokumentets kode. Utviklingen blir lettere fordi det er mindre kode for å forvirre mobilen og tilpassede stiler.

Begynn strukturen i dokumentet Wireframe

Den beste måten å starte på er med en tom skifer, fordi den gir deg mest kreativitet. De åpenbare elementene som skal inkluderes i koden (som i et annet webdokument) er html , head og body .

Dette er skjelettet. Du trenger noen flere elementer for at wireframen skal se bra ut. De div (eller divisjon) er bemerkelsesverdig. Dette er elementet som brukes til å legge til bestemte områder på siden, for eksempel logoen eller søkeboksen.

Divs er byggeblokkene til HTML5 wireframe prototyper. Alt og alt kan være innhyllet i a div , og styling er en bris når du bruker klasser og IDer til elementer. Mye av hovedkoden din deles opp av divs fordi de er de grunnleggende blokkelementene.

Med de nye HTML5-spesifikasjonene kalles et element nav har blitt introdusert. Dette kan kombineres med en uordnet liste og noen CSS-egenskaper for å opprette og definere nettstedets hovednavigasjonsområde. Nedenfor er et enkelt eksempel på hvordan du kan strukturere din nav :

Jobber med header og footer Elements

Du vil legge merke til i eksemplet ovenfor at jeg brukte en div med en ID av header å skille min navigasjonsoverskrift. Dette er helt akseptabelt og ingenting er galt med koden ovenfor. HTML5 gir oss andre alternativer, skjønt.

De header element i de nye HTML5-spesifikasjonene gjør det mulig å definere strukturen ytterligere, noe som er nyttig for det meste for weblesere og skjermlesere som skiller en «overskrift» av innholdet. Det bør ikke gjøre noen forskjell for brukerne dine, og det holder koden i skipskapet ditt og viser at du virkelig forstår hva du snakker om.

Et annet interessant element som er lagt til er footer . Samme ide: Bruk dette elementet i stedet for a div for å skille mellom innholdet på bunnteksten. Vanligvis er footers ute av veien og inneholder grunnleggende informasjon om nettstedet eller firmaet.

Du kan legge til linker til bunnteksten og bruke a nav element for å definere noen av dem, men det ville være dårlig råd. De nav element angir hovednavigasjonsområdet, så legger det til bunnteksten eller hvor som helst annet vil være overflødig.

I dette scenariet bruker du footer element og å skille navigasjonskoblingene som en uordnet liste er best. Du kan bruke en kolonnert bunntekst, med en rekke kolonnekoblinger. Disse kan være separate div elementer som vises ved siden av hverandre, alt pakket inn i hovedfoten.

CSS Teknikker for Styling Wireframes

Hvis du forstår HTML og har jobbet med nettet en stund, vet du sikkert noen grunnleggende CSS. Mange av de nye funksjonene til CSS3 er for å legge til fancy avrundede hjørner og drop-shadows til tekst.

Jeg mener ikke å foreslå at CSS-styling ikke er viktig, men kjerneoppsettet og posisjoneringen er det som til slutt gjør nettstedet ditt. Med CSS definerer du bredde, margin og mellomrom. Dette er de grunnleggende egenskapene til de fleste webelementer, og de er det siste skrittet i å skape en virkelig fremragende wireframe.

Hvis du er fascinert av CSS3s nye eiendommer og selektorer, kan du sjekke ut Webdesigner Depot's samling av forbedringer . Den inneholder guider over hele nettet om de nye funksjonene i CSS3.

legge clearfix til stiler

Hvis du ikke er kjent med clearfix-teknikken, gjør du det litt forskning . Det er en populær klasse som du vil legge til i en div beholder som holder to eller flere flytende blokker.

Hvis du aldri har hørt om clearfix, kan det virke forvirrende, men konseptet er enkelt. Tenk på en beholder div det har to div s inne i det, begge floated venstre. Som standard vil de fleste nettlesere gjengi de to kolonnene som direkte berører hverandre, og den inneholder div ville utvide siden ned for å passe hvilken kolonne som er lengst.

Ved å legge til en clearfix klassen til containeren, vil begge kolonnene passe lykkelig inne i beholderen div , som utvider ned langt nok til å passe begge elementene. Dette løser mange problemer i wireframe prototyping, spesielt med to-kolonne-oppsett (dvs. hovedinnhold og sidebjelke). Denne metoden vil også fungere for tre- og til og med fire kolonneoppsett, og hver kolonne vil bare trenge å passe inn i en mindre plass.

Viser CSS: Keeping Styles External

Hva å gjøre med CSS plassering er en annen viktig beslutning. Profesjonelle webdesignere og utviklere foreslår bare å holde seg selvstendig .css fil, skille fra HTML-koden din.

På denne måten er strukturen i ett dokument og utformingen og utformingen er i en annen. Begge er like viktige for wireframes, men de utfører forskjellige oppgaver.

Hele HTML-koden din er strengt strukturell. Du kan sette linker inne i avsnittene inne i containeren div s inne i andre beholdere, og så videre. Styling styrer størrelsen, avstanden, margenene og bokstavene til avsnitt og lenker, og wireframe definerer beholderens bredde og plassering på siden.

Sideelementer gir ytterligere eksempler. Du ville kode den div beholdere for innhold og sidebjelker, men du vil stil og plassere dem ved hjelp av CSS. For en designer er det viktig å forstå hvordan du skiller innhold og stil, for å mestre wireframes.

Implementere Dynamic Page-Element Placeholders

Fancy jQuery-effekter og Ajax-ified webelementer ser ut til å være alt raseri. Trender vokser, og nesten alle populære nettsteder har noe dynamisk innhold. Det er viktig å vurdere. Hvis de utfyller designen, hvorfor ikke blokkere i wireframe?

Det kan hende at det ikke er praktisk å utvikle et helt back-end-system for en dynamisk innloggingskasse, men det er en god start med JavaScript-bibliotekene du trenger. Du kan også kode stiler som strukturerer denne boksen og sette ting på plass for senere, når du vil legge til farge og detalj.

Disse temaene kan brukes på mange grensesnittelementer. Du kan bruke søkeforslag som ligner på Googles eller legge til notater i koden din for å implementere en dynamisk nyhets- eller Twitter-feed-boks, noe som vil gjøre din wireframe dynamisk og gi en elegant måte å representere et solid state-objekt i stedet for dynamisk innhold . Under prototypefasen er dette alt du trenger uansett.

Vanlige Wireframe Development Mistakes

Det er vanskelig å gå galt når du bare begynner å kode grunnstrukturen på et nettsted, men vær oppmerksom på visse detaljer.

Husk at en wireframe har som mål å presentere et rammeverk uten mye detalj. Det er nyttig i begynnelsen av planleggingen av sideelementene; Du kan dyve dypt inn på nettstedet ditt og se det store bildet.

Hold ting enkelt og i orden. Å se på dette er en vanlig feil, og det vil kreve din evne til å møte tidsfrister. En wireframe trenger ikke å være hvor som helst nær perfekt; det skal være en grov oversikt over nettstedet. Selv en streng HTML og CSS wireframe bør bare bestå av sideelement skisser.

Unngå omveier ved å fokusere på dine hovedmål. Husk hvorfor du startet prosessen med en wireframe i første omgang!

Wireframes kan også løse mange problemer som besitter designprosessen. Koding av en prototype i HTML og CSS er den beste måten å få en start på et webprosjekt, stort eller lite. Det er en enkel og effektiv måte å forme ideene dine på.

EN massevis av artikler På nettet er det knyttet til wireframing-prosessen. Jeg har dekket kodings- og utviklingssiden av ting, men for å lære mer om wireframing, fortsett å lese. Designtipsene er der ute; du må bare finne dem!

Dette innlegget ble skrevet utelukkende for Webdesigner Depot by Jake Rocheleau , en lidenskapelig webdesigner og sosial media-entusiast. Jake elsker å lese og skrive om de nyeste digitale Internett-trender og nettverk i design samfunnet. Sjekk ham ut på Twitter @jakerocheleau for mer om sitt arbeid.

Hva er dine erfaringer med wireframe prosessen? Fungerer du i kode først eller i en annen type programvare? Hva tror du er noen fordeler med å prototype i kode først?