Hvad er en trådramme? Denne UX-designvejledning viser dig.

Det første skridt til at designe et websted: wireframe det.

En god trådramme kan give dig visionen for hele dit layout og funktionalitet. Det kan også fungere som den første fase af et design.

Wireframes giver dig en idé om de samlede struktursider, og hvordan navigationen vil flyde.

Hvis du overvejer at opbygge et websted, kan du lave en wireframe hurtigt og nemt. Du behøver ikke engang at være grafisk designer for at gøre det.

For at komme i gang er alt hvad du behøver en blyant og noget papir. (Eller hvis du vil have lyst, en iPad og iPencil, som jeg bruger i min videovejledning ovenfor.)

Vi skal skabe en trådramme og vise, hvordan det giver mulighed for en hurtig, iterativ designproces. Dette vil skabe et levende stykke dokumentation, som du kan bruge til dig selv og til en klient. Og du kan bruge dette til at ræsonnere gennem din planlægning - alt sammen før du investerer tid i faktisk at kode det.

Her er nogle trin, vi dækker i denne artikel (og i den ledsagende videovejledning):

  1. Sitemap planlægning
  2. Oprettelse af en wireframe til startsiden
  3. Brug af markering i trådrammer
  4. Trådrammekomponenter (sidehoved, menu, sidefod)
  5. Wireframing af din funktionsside og kontaktside
  6. Mobil responsive trådrammer

Trin # 1: Sitemapplanlægning

Kom godt i gang med wireframing begynder med et godt sitemap. Inden du opretter en wireframe til siden, vil et sitemap give dig en vis struktur. På denne måde forstår du, hvilke sider du skal opbygge, og hvordan de alle forbinder hinanden.

De fleste små websteder har muligvis ikke brug for et sitemap. De har normalt bare enten en enkelt destinationsside eller et par almindelige sider som Funktioner, Om og Kontakt os.

Når det er sagt, så snart dit websted eller din applikation bliver større og mere kompleks, vil du have et sitemap.

Sitemaps giver dig en kort oversigt over, hvor varer findes, og hvordan de forbinder hinanden.

I vores eksempel opretter vi et simpelt sitemap, der kun indeholder siden Startside, Funktionsside og Kontakt os.

Du behøver ikke bruge for meget tid på dette. Bare tilføj et par felter for at vise hver side, linjer nedenunder for at vise undersider, og det er det.

Trin # 2: Oprettelse af wireframe til hjemmesiden

Vi skal oprette vores første wireframe-side. Hvis du ikke har wireframført før, er processen ret enkel. Hvert aspekt af et websted er repræsenteret med en form eller en simpel grafik, såsom:

  • kasser med diagonale linjer gennem dem for at repræsentere billeder
  • vandrette linjer, der repræsenterer afsnit i teksten
  • og en cirkel med et L i som repræsenterer dit logo.

Til startsiden udarbejder vi et skyderbillede, en menu og et logo. Vi giver det også et par etiketter for at vise, hvad hver vare er.

Dette er også nyttigt at organisere hvert afsnit i rektangler, som vi senere kan kopiere og indsætte på andre sider (især til sidehoved og sidefod).

Lad os også oprette et andet afsnit til en introduktion til virksomheden (Om os) og en sponsorsektion (med logoer og billeder af vores sponsorer).

Efterhånden som vi går igennem designet, kan vi også implementere andre emner på hjemmesiden, såsom opfordringsknapper i områder, der ville være passende.

Vi afslutter designet med en bundtekst, hvor vi tilføjer almindelige elementer såsom en kontaktformular, kontaktinfo og genbruger logoet igen.

Trin # 3: Brug af Markup i Wireframes

Trådrammen ses ofte ikke kun af designere, men af ​​udviklere, kunder og ledelse. Så det er nyttigt at tilføje nogle markeringer til hver del af indholdet. Dette kan hjælpe med at guide folk, der ser din wireframe for første gang. Jeg gør det normalt i slutningen af ​​færdiggørelsen af ​​en side.

Lad os i vores eksempel markere hjemmesiden og mærke hver del af indholdet med rød tekst.

Aspekter, du vil markere, inkluderer emner som sektioner, titler, kontaktformularer og hvilke billeder der kan være.

Bemærk, at Markup ikke behøver at bogstaveligt forklare, hvad indholdet i sidste ende bliver - bare hvad det repræsenterer. Så i stedet for at indsætte det egentlige "Eksempel på intro-titel", kan du mærke titlen som "Intro-titel."

Trin # 4: Tilføj andre Wireframe-komponenter som sidehoved, menu og sidefod

Nu hvor vi allerede har oprettet en sidehoved og sidefod, kan vi genbruge dem til yderligere sider. Hvis du arbejder digitalt, kan du kopiere og indsætte overskrifter, sidefødder og andre tilbagevendende elementer i nye sidetrådrammer. (Og hvis du bare bruger papir og pen, kan du altid bruge en barbermaskine og en kopimaskine for at opnå den samme effekt.)

Dette gør, at dit wireframe-design forbliver ensartet. Værktøjer som Figma giver dig mulighed for at oprette aktivkomponenter, som du også kan kopiere og indsætte i hele dit design. Du kan endda konfigurere dem til dynamisk at opdatere andre dele af din wireframe, når du ændrer din rodkomponent.

I vores eksempel vil vi genbruge komponenter til at oprette en funktionsside. Ved at oprette vores første funktioner sektionskomponent kan vi derefter kopiere og indsætte den nedenfor flere gange for at opbygge hele vores funktionsside på få minutter.

Trin # 5: Funktionsside og kontaktside

Det bliver lettere og nemmere at opbygge flere sider, når du først er kommet i gang med wireframing og bygger nogle komponenter ud. Når funktionssiden er færdig, kan vi oprette en Kontakt os-side. Alt hvad vi virkelig skal gøre er at tilføje et par almindelige elementer, såsom et Google Map, Kontakt os-formular og nogle grundlæggende kontaktoplysninger som et telefonnummer og en e-mail-adresse.

I dette eksempel har jeg små logoer til en telefon og e-mail og store blokke til at repræsentere, hvor de vil være placeret på siden.

Kontaktformularen vil være placeret nedenunder (uden en boksoversigt) samt et Google-kort på højre side.

Trin # 6: Lav en mobil responsiv trådramme

Ingen god trådramme kan eksistere i disse dage uden en mobilversion. Dette skyldes, at meget af internettet i dag ses på mobile enheder.

Det er godt at vide, hvordan et design kan kollapse ned til mindre viewports. Hvis du har mere tid på hænderne, kan du også opbygge en tabletversion af den responsive wireframe.

I vores eksempel udbygger vi wireframe til startside-design sektion for sektion. De fleste af rækkerne og kolonnerne er skjult. Og da vi er i en mobil visningsport, reduceres mange af billederne, teksterne og blokke i størrelse.

På grund af dette er det muligt for nogle af sektionerne stadig at have den samme højde som deres respektive desktopversioner. På den anden side kan nogle sektioner med masser af billeder (som sponsorsektionen) muligvis have meget mere rullehøjde.

På grund af dette tilføjer jeg ofte også yderligere markering for at vise, hvilke desktopversionssektioner der svarer til hvilke responsive ækvivalenter til mobilversionen.

Konklusion

Wireframing er en hurtig måde at få en bedre idé om dit websted eller din applikation visuelt. Jeg anbefaler, at du prøver det til dit næste projekt for at hjælpe dig med at planlægge, hvordan det kan fungere og se ud.

Wireframing er den ideelle tilgang til dette, da det tager så meget kortere tid end at lade en designer lave en fuldt blæst User Interface-prototype.

Som udvikler har jeg bygget trådrammer til mine hjemmesider i årevis. Jeg udvikler næsten aldrig et websted uden at skitsere i det mindste nogle af mine ideer om, hvordan det vil se ud visuelt.

Glad wireframing.

Jeg håber du nød denne artikel. Hvis du ikke ved, hvem jeg er, er jeg Adrian fra Australien? Jeg har en lille kanal på Twitter & YouTube, så hvis du vil vide mere om mig eller nyde mit indhold, så tjek mig engang?

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog