Arbejde som designer dag efter dag kan være besværlig. Heldigvis er feltet blevet udvidet, og processen er således blevet enklere. Mange gratis værktøjer og ressourcer er derude.

Wireframes bringer elegance til design mock-ups. De er den grundlæggende struktur på et websted, med farver og forbedringer fjernet.

De er vant til at se designkoncepter med bare de absolut nødvendige, og de kan give et nyttigt perspektiv på ethvert projekt.

De fleste wireframes er skabt i software suiter som Adobe Photoshop og Fireworks, men nogle hjemmesider gør det muligt at oprette wireframe billeder lige i browseren.

I dette indlæg vil vi gå over kodning af et grundlæggende wireframe-billede i HTML og CSS og se, hvordan det kan gavne kreativprocessen.

Hvorfor bekymre sig?

Hvorfor bruge tid på at skitsere en websteds struktur? I nogle tilfælde kan det være unødvendigt, men det kan hjælpe, når du sidder fast i en rusk eller kæmper for at se det store billede.

Det kan gavne både designere og kunder. I lønnet arbejde er du ansvarlig for at tilfredsstille klienten. Viser den grundlæggende struktur af deres snart-til-designede websted kan give kunderne lindring og en følelse af kontrol over hele processen.

Men hvis designet er meget grundlæggende eller har en simpel struktur, er det måske ikke værd at oprette en wireframe. mocking up hele ting i Photoshop, med knapper og farve, kan være lige så hurtig.

Bestemme hvilke skridt der skal tages, kræver tid og kritisk tænkning. En trådramme er trods alt et værktøj. Det er undervurderet af mange webdesignere men overraskende nyttigt, når det er forstået.

Prototyping Wireframes i kode

I årevis har Adobe design software været den førende suite til wireframe skabelse, men internettet har gennemgået væsentlig forandring og udvikler sig stadig.

CSS Wireframe Code

Stigningen af ​​kodningsstandarder og stigning i HTML5 dokumentation er store skridt i retning af en fælles web. Nu er kodning af en grundlæggende wireframe i HTML og CSS ikke mere arbejde end at tackle jobbet i Fireworks.

Med wireframes kan du angribe et projekt head-on fra flere vinkler. Du kan endda teste for kompatibilitet med CSS2 og CSS3 teknikker og browsere. Ting behøver ikke at være komplekse i begyndelsen; en wireframe tjener simpelthen som et solidt fundament til at begynde kodning.

Deling af indhold bliver også lettere med en wireframe. Du kan være vært for alle de filer, du har brug for på en hvilken som helst webserver, og du kan oprette en demokatalog og sende live opdateringer til kunder og overvågere af dit projekt. At gøre ændringer, såsom hurtige tweaks til margener og bredder i dokumentets CSS, er også enkel.

Standardiser kode for langt træk

Wireframes sparer tid i udviklingsprocessen. Hvis CSS stilarterne til dine grundlæggende elementer allerede er skrevet, så er resten bare fyldstof (vigtigt fyldstof, husk dig).

Kodning med webstandarder

Start korrekt, med den korrekte HTML-dokumenttype og katalogstruktur. Dokumenttyper er ikke så forskellige fra hinanden. Du kan læse om dem på W3C Specs side . De er ligegyldige i den gamle World Wide Web-model, men HTML5 er grundig og giver din hjemmeside mulighed for at vokse.

Du skal alligevel teste kompatibilitet på så mange operativsystemer og browsere som muligt, og wireframe prototyping scenen er den perfekte tid til at gøre dette, fordi du allerede er fokuseret på at arrangere layoutet.

Det er også en god tid at arbejde på en mobilvenlig skabelon. Efterhånden som strukturen ændres, bør du kunne inkorporere ideer og manipulere dokumentets kode. Udviklingen bliver lettere, fordi der er mindre kode for at forvirre dine mobile og brugerdefinerede stilarter.

Begyndelsen af ​​dokumentets trådramme

Den bedste måde at starte på er med en tom skifer, fordi det giver dig den mest kreative. De indlysende elementer, der skal medtages i koden (som i ethvert andet webdokument) er html , head og body .

Dette er skeletet. Du skal bruge et par elementer til, at wireframen ser godt ud. Det div (eller division) er bemærkelsesværdigt. Dette er elementet, der bruges til at bokse bestemte områder af siden, som f.eks. Logoet eller søgefeltet.

Divs er byggestenene af HTML5 wireframe prototyper. Alt og alt kan omsluttes i a div , og styling er en brise, når du anvender klasser og id'er til elementer. Meget af din hovedkode bliver opdelt af divs fordi de er de grundlæggende blokelementer.

Med de nye HTML5-specifikationer kaldes et element nav er blevet introduceret. Dette kan kombineres med en uordnet liste og nogle CSS-egenskaber til at oprette og definere dit websteds hovednavigationsområde. Nedenfor er et simpelt eksempel på, hvordan du kan strukturere din nav :


Arbejder med header og footer elementer

Du vil bemærke i eksemplet ovenfor, at jeg brugte en div med et ID af header at adskille min overskriftsnavigation. Dette er helt acceptabelt, og intet er galt med ovenstående kode. HTML5 giver os andre muligheder.

Det header element i de nye HTML5-specifikationer giver dig mulighed for yderligere at definere din struktur, hvilket er nyttigt for det meste for webcrawlere og skærmlæsere, som adskiller en "overskrift" del af indholdet. Det bør ikke gøre nogen forskel for dine brugere, og det holder din kode skibsfart og viser, at du virkelig forstår, hvad du taler om.

Et andet interessant element, der er tilføjet er footer . Samme ide: Brug dette element i stedet for a div at adskille dit footer indhold. Generelt er footers ude af vejen og indeholder grundlæggende oplysninger om hjemmesiden eller firmaet.

Du kan tilføje links til sidefoden og bruge a nav element til at definere nogle af dem, men det ville være ukorrekt. Det nav Elementet angiver hovednavigationsområdet, så det bliver overflødigt at føje det til fodfoden eller hvor som helst ellers.

I dette scenario bruger du footer element og adskillelse af navigationslinkene som en uordnet liste er bedst. Du kan bruge en kolonnefod, med en række kolonner af links. Disse kan være adskilte div elementer vist ved siden af ​​hinanden, alt pakket ind i hovedfoden.

CSS Coloring Crayons Styles

CSS Teknikker til Styling Wireframes

Hvis du forstår HTML og har arbejdet på nettet i et stykke tid, så ved du sikkert nogle grundlæggende CSS. Mange af de nye funktioner i CSS3 er til at tilføje fancy afrundede hjørner og drop-shadows til tekst.

Jeg mener ikke at foreslå, at CSS-styling ikke er vigtig, men kernelayout og positionering er, hvad der ultimativt gør din hjemmeside struktur. Med CSS definerer du bredde, margen og afstand. Disse er de grundlæggende egenskaber ved de fleste webelementer, og de er det sidste skridt i at skabe en virkelig fremragende wireframe.

Hvis du er fascineret af CSS3s nye ejendomme og selektorer, så tjek Webdesigner Depot's indsamling af forbedringer . Den indeholder guider over hele internettet om de nye funktioner i CSS3.


Tilføjelse clearfix til stilarter

Hvis du ikke er bekendt med clearfix-teknikken, skal du gøre nogle undersøgelser . Det er en populær klasse, som du vil tilføje til en div beholder, der indeholder to eller flere flydende blokke.

Hvis du aldrig har hørt om clearfix, kan det virke forvirrende, men begrebet er simpelt. Tænk på en container div det har to div s inde i det, begge floated venstre. Som standard vil de fleste browsere gøre de to kolonner så direkte at røre hinanden, og de indeholder div ville udvide siden ned for at passe til hvilken kolonne der er længst.

Ved at tilføje en clearfix klasse til din container, vil begge søjler passe glædeligt inde i beholderen div , som udvider sig langt nok til at passe til begge elementer. Dette løser mange problemer i wireframe prototyping, især med to-kolonne layouts (dvs. hovedindhold og sidebjælke). Denne metode vil også fungere for tre- og lige fire-kolonne layouts, hver kolonne ville bare være nødt til at passe ind i et mindre rum.


Viser CSS: Keeping Styles External

Hvad skal man gøre med CSS placering er en anden vigtig beslutning. Professionelle webdesignere og udviklere foreslår simpelthen at holde en uafhængig .css fil, adskilt fra din HTML-kode.

På den måde er strukturen i ét dokument, og layoutet og designet er i et andet. Begge er lige så vigtige for wireframes, men de udfører forskellige opgaver.

Hele din HTML-kode er strengt strukturel. Du kan sætte links inde i afsnit inde i beholderen div s inde i andre beholdere og så videre. Styling styrer størrelse, mellemrum, margener og bogstaver af afsnit og links, og wireframe definerer beholderens bredde og deres placering på siden.

Sideelementer giver yderligere eksempler. Du ville kode den div beholdere til indhold og sidebjælker, men du vil style og placere dem ved hjælp af CSS. For en designer er forståelse for, hvordan man adskiller indhold og stil, nøglen til at mastere wireframes.

Gennemfør Dynamic Page-Element Placeholders

Fancy jQuery-effekter og Ajax-ified webelementer synes at være alt raseri. Udviklingen vokser, og næsten alle populære websites har noget dynamisk indhold. Det er vigtigt at overveje. Hvis de supplerer designet, hvorfor skal du ikke have blokke i din wireframe?

Udvikling af et helt back-end-system til en dynamisk log-in-boks er muligvis ikke praktisk, men det er en god start at se, hvilke JavaScript-biblioteker du har brug for. Du kan også kode stilarter, der strukturerer denne boks og sætte tingene på plads til senere, når du vil tilføje farve og detaljer.

Design for det sociale web

Disse temaer kan anvendes på tværs af mange grænsefladeelementer. Du kan bruge søgeforslag svarende til Googles eller lade noter i din kode for at implementere en dynamisk nyhed eller Twitter-feed-boks, hvoraf hver vil gøre din wireframe dynamisk og give en elegant måde at repræsentere et solid state-objekt i stedet for dynamisk indhold . Under prototypefasen er det alt hvad du behøver alligevel.

Fælles Wireframe Development Fejl

Det er svært at gå galt, når du lige begynder at kode den grundlæggende struktur på et websted, men husk visse detaljer.

Husk at en wireframe har til formål at præsentere en ramme uden meget detaljer. Det er nyttigt i de indledende faser af planlægningen af ​​sideelementerne; du kan dyve dybt ind på din hjemmeside og se det store billede.

Hold tingene enkle og i orden. Overblik over dette er en almindelig fejl, og det vil ødelægge din evne til at overholde frister. En wireframe behøver ikke at være overalt nær perfekt; det skal være en grov oversigt over hjemmesiden. Selv en streng HTML og CSS wireframe bør kun bestå af sideelement omrids.

Undgå omveje ved at fokusere på dine vigtigste mål. Husk hvorfor du startede processen med en wireframe i første omgang!

Wireframes kan også løse mange problemer, der besidder designprocessen. Kodning af en prototype i HTML og CSS er den bedste måde at få en start på et webprojekt, stort eller lille. Det er en simpel og effektiv måde at forme dine ideer på.

EN masser af artikler på internettet vedrører wireframing processen. Jeg har dækket kodning og udvikling siden af ​​ting, men for at lære mere om wireframing, fortsæt med at læse. Designtipsene er derude; du skal bare finde dem!


Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Jake Rocheleau , en passioneret webdesigner og social media entusiast. Jake elsker at læse og skrive om de nyeste digitale internettendenser og netværk i designsamfundet. Tjek ham ud på Twitter @jakerocheleau for mere om hans arbejde.

Hvad er dine erfaringer med wireframe processen? Arbejder du i kode først eller i en anden type software? Hvad tror du er nogle fordele til prototyper i kode først?