Ett fall för kodning av dina trådramar

Att arbeta som designer dag efter dag kan vara mödosamt. Lyckligtvis har fältet expanderat, och så har processen blivit enklare. Många gratis verktyg och resurser finns där ute.

Wireframes ger elegans för att designa mock-ups. De är grundstrukturen på en webbplats, med färger och förbättringar borttagna.

De är vana vid att se designkoncept med bara de absolut nödvändiga, och de kan ge ett användbart perspektiv på något projekt.

De flesta trådramar skapas i mjukvarusuper som Adobe Photoshop och Fireworks, men vissa webbplatser gör att du kan skapa wireframe-bilder direkt i webbläsaren.

I det här inlägget går vi över kodning av en grundläggande wireframe-bild i HTML och CSS och ser hur det kan gynna annonseringsprocessen.

Varför bry sig?

Varför spendera tid skissar en webbplats struktur? I vissa fall kan det vara onödigt, men det kan hjälpa när du sitter fast i en ruta eller kämpar för att se den stora bilden.

Det kan gynna både designers och kunder. I betalt arbete är du ansvarig för att behaga kunden. Att visa den grundläggande strukturen hos deras snart utformade webbplats kan ge kunderna lättnad och en känsla av kontroll över hela processen.

Men om designen är väldigt grundläggande eller har en enkel struktur, är det kanske inte värt att skapa en wireframe. Att mocka upp hela saken i Photoshop, med knappar och färg, kan vara lika snabb.

Att bestämma vilka steg att ta kräver tid och kritiskt tänkande. En trådram är trots allt bara ett verktyg. Det är undervärderat av många webbdesigners men överraskande användbart förstås förstås.

Prototypning Wireframes i kod

I åratal har Adobe-programvaran varit den främsta sviten för skapandet av trådframställning, men webben har genomgått betydande förändringar och utvecklas fortfarande.

Ökningen av kodningsstandarder och ökning i HTML5 dokumentation är stora steg mot en gemensam webben. Att koda en grundläggande trådram i HTML och CSS är nu inte mer än att hantera jobbet i Fireworks.

Med wireframes kan du attackera ett projekthuvud på flera vinklar. Du kan även testa för kompatibilitet med CSS2 och CSS3 tekniker och webbläsare. Saker behöver inte vara komplexa i början; en wireframe tjänar helt enkelt som en solid grund för att börja kodning.

Att dela innehåll blir också lättare med en wireframe. Du kan vara värd för alla filer du behöver på vilken webbserver som helst, och du kan skapa en demokatalog och vidarebefordra levande uppdateringar till kunder och övervakare av ditt projekt. Att göra ändringar, till exempel snabba tweaks till marginaler och bredder i dokumentets CSS, är också enkelt.

Standardisera koden för långväga

Wireframes sparar tid i utvecklingsprocessen. Om CSS-stilar för dina grundläggande element redan är skrivna, är resten bara fyllmedel (viktigt fyllmedel, tänker på dig).

Starta korrekt, med rätt HTML-dokumenttyp och katalogstruktur. Dokumenttyper är inte så olika från varandra. Du kan läsa om dem på W3C Specs sida . De spelar ingen roll mycket i den gamla World Wide Web-modellen, men HTML5 är noggrann och låter din webbplats växa.

Du måste ändå testa kompatibilitet på så många operativsystem och webbläsare som möjligt, och prototypningssteget för wireframe är den perfekta tiden att göra detta, eftersom du redan är inriktad på att arrangera layouten.

Det här är också en bra tid att arbeta på en mobilvänlig mall. När strukturen ändras bör du kunna införliva idéer och manipulera dokumentets kod. Utveckling blir lättare eftersom det finns mindre kod för att röra upp dina mobila och anpassade format.

Börjar strukturen i dokumentet Wireframe

Det bästa sättet att börja är med en tom skiffer, eftersom det ger dig mest kreativitet. De uppenbara elementen som ingår i koden (som i något annat webbdokument) är html , head och body .

Detta är skelettet. Du behöver några fler element för att wireframen ska se bra ut. De div (eller delning) är anmärkningsvärt. Det här är det element som används för att ruta vissa delar av sidan, till exempel logotypen eller sökrutan.

Divs är byggstenarna i HTML5 wireframe prototyper. Allting och allting kan vara inslaget i en div , och styling är en bris när du tillämpar klasser och id till element. Mycket av din huvudkod delas upp av divs eftersom de är de grundläggande blockelementen.

Med de nya HTML5-specifikationerna heter ett element nav har införts. Detta kan kombineras med en orörd lista och några CSS-egenskaper för att skapa och definiera webbplatsens huvudnavigationsområde. Nedan är ett enkelt exempel på hur du kan strukturera din nav :

Arbetar med header och footer element

Du kommer att märka i exemplet ovan att jag använde en div med ett ID av header att separera min rubriknavigering. Detta är helt acceptabelt och ingenting är fel med ovanstående kod. HTML5 ger oss andra alternativ, dock.

De header element i de nya HTML5-specifikationerna kan du ytterligare definiera din struktur, vilket är användbart mestadels för webbläsarsökare och skärmsläsare, som skiljer en "rubrik" del av innehållet. Det borde inte göra någon skillnad för dina användare, och det håller din kodskifte och visar att du verkligen förstår vad du pratar om.

Ett annat intressant element som har lagts till är footer . Samma idé: använd det här elementet istället för a div för att skilja ditt sidfot. Vanligtvis är footers borta och innehåller grundläggande information om webbplatsen eller företaget.

Du kan lägga till länkar till sidfoten och använda a nav element för att definiera några av dem, men det skulle vara missvisat. De nav element anger huvudnavigationsområdet, så lägger det till sidfoten eller någon annanstans skulle vara överflödig.

I detta scenario använder du footer element och separering av navigeringslänkarna som en oorderad lista är bäst. Du kan använda en kolumnbaserad footer, med ett antal kolumner av länkar. Dessa kan vara separata div element som visas bredvid varandra, alla inslagna i huvudfoten.

CSS-tekniker för Styling Wireframes

Om du förstår HTML och har arbetat med webben ett tag, vet du förmodligen lite grundläggande CSS. Många av de nya funktionerna i CSS3 är för att lägga till snygga rundade hörn och drop-skuggor till text.

Jag menar inte att CSS-styling inte är viktigt, men kärnlayouten och positioneringen är vad som äntligen gör din webbplats struktur. Med CSS definierar du bredd, marginal och avstånd. Dessa är de grundläggande egenskaperna hos de flesta webbelement, och de är det sista steget i att skapa en verkligt enastående trådram.

Om du är fascinerad av CSS3s nya egenskaper och väljare, kolla in Webdesigner Depot s samling av förbättringar . Den innehåller guider över hela webben om de nya funktionerna i CSS3.

tillsats clearfix till stilar

Om du inte är bekant med Clearfix-tekniken, gör du en del efterforskningar . Det är en populär klass som du skulle lägga till i div behållare som rymmer två eller flera flytande block.

Om du aldrig hört talas om clearfix kan det tyckas förvirrande, men konceptet är enkelt. Tänk på en behållare div det har två div s inuti det, båda floated vänster. Som standard skulle de flesta webbläsare göra de två kolumnerna så att de direkt berör varandra och den innehåller div skulle expandera sidan för att passa vilken kolumn som är längst.

Genom att lägga till en clearfix klass till din behållare, kommer båda kolumnerna att passa lyckligt inuti behållaren div , som expanderar tillräckligt långt för att passa båda elementen. Detta löser många problem vid prototypning av wireframe, speciellt med layouter med två kolumner (dvs huvudinnehållet och sidofältet). Denna metod kommer också att fungera för tre- och till och med fyra kolumnlayouter, varje kolumn behöver bara passa in i ett mindre utrymme.

Visar CSS: Behåll stilar externt

Vad man ska göra med CSS-placering är ett annat viktigt beslut. Professionella webbdesigners och utvecklare föreslår helt enkelt att hålla en oberoende .css fil, separat från din HTML-kod.

På så sätt är strukturen i ett dokument och layouten och designen är i en annan. Båda är lika viktiga för trådramar, men de utför olika uppgifter.

Hela din HTML-kod är strikt strukturell. Du kan lägga länkar i stycken inuti behållaren div s inom andra behållare och så vidare. Styling styr storleken, avståndet, marginalerna och bokstäverna av stycken och länkar, och trådramen definierar behållarens bredd och placering på sidan.

Sidelement ger ytterligare exempel. Du skulle koda div behållare för innehåll och sidofält, men du skulle utforma och placera dem med hjälp av CSS. För en designer är det viktigt att förstå hur man skiljer innehåll och stil för att mastera wireframes.

Implementera Dynamic Page-Element Placeholders

Fina jQuery-effekter och Ajax-ified-webelement verkar vara allt raseri. Trenden växer, och nästan alla populära webbplatser har lite dynamiskt innehåll. Det är viktigt att överväga. Om de kompletterar designen, varför inte blockera i din wireframe?

Att utveckla ett helt back-end-system för en dynamisk inloggningsrutan kanske inte är praktisk, men det är en bra start att notera de JavaScript-bibliotek du behöver. Du kan också koda format som strukturerar den här rutan och ställa in saker på plats för senare, när du lägger till färg och detalj.

Dessa teman kan tillämpas på många gränssnitt. Du kan använda sökförslag som liknar Googles eller lämna anteckningar i din kod för att implementera en dynamisk nyhets- eller Twitter-flödesfält, vilken skulle göra din trådram dynamisk och ge ett elegant sätt att representera ett solid state-objekt i stället för dynamiskt innehåll . Under prototypfasen är detta allt du behöver ändå.

Vanliga Wireframe Development Mistakes

Det är svårt att gå fel när du precis börjat koda den grundläggande strukturen på en webbplats, men beakta vissa detaljer i åtanke.

Kom ihåg att en wireframe syftar till att presentera ett ramverk utan mycket detalj. Det är användbart under de inledande stadierna att planera sidelementen; Du kan dyka djupt in på din webbplats och se den stora bilden.

Håll sakerna enkla och i ordning. Att se över detta är ett vanligt misstag och det kommer att förkrusa din förmåga att möta deadlines. En wireframe behöver inte vara någonstans nära perfekt; Det ska vara en grov skiss på webbplatsen. Även en strikt HTML- och CSS-trådram skulle bara bestå av sidelementets konturer.

Undvik omvägar genom att fokusera på dina huvudmål. Kom ihåg varför du startade processen med en wireframe i första hand!

Wireframes kan också lösa många problem som beslaglägger designprocessen. Att koda en prototyp i HTML och CSS är det bästa sättet att få en start på ett webprojekt, stort eller litet. Det är ett enkelt och effektivt sätt att utforma dina idéer.

en massor av artiklar På nätet hänför sig till trådframställningsprocessen. Jag har täckt kodning och utveckling sida av saker, men för att lära mig mer om wireframing, fortsätt läsa. Designtipsen finns där ute; du måste bara hitta dem!

Detta inlägg skrevs uteslutande för Webdesigner Depot av Jake Rocheleau , en passionerad webbdesigner och social media entusiast. Jake älskar att läsa och skriva om de senaste digitala internettrenderna och nätverkandet i designgemenskapen. Kolla in honom på Twitter @jakerocheleau för mer om hans arbete.

Vilka är dina erfarenheter av wireframe-processen? Arbetar du i kod först eller i någon annan typ av programvara? Vad tycker du är några fördelar med att prototypera i kod först?