Ce este un Wireframe de site și cum vă poate ajuta să vă dezvoltați site-ul?

La nivel tehnic, un site modern nu este doar un singur lucru. Este o supă complexă de tehnologii care interacționează, cum ar fi HTML (marcajul pe care îl vedeți în pagină), JavaScript (limba care rulează în browserul dvs., care afectează interacțiunile), CSS (limba pentru setarea aspectului paginii) și multe altele. Dar la un nivel mai general, un site web este o idee.

Dacă este site-ul dvs., probabil știți ce vreți să faceți sau ce doriți ca utilizatorii să iasă din ea. Poate că ar trebui să fie un loc ușor pentru ei să găsească informații despre tehnologie; sau poate ar trebui să explice de ce ești cea mai bună trupă sau câine-walker în jurul tău. În orice caz, cu mult înainte de a vă descurca cu HTML, CSS, JavaScript sau orice altă tehnologie specifică de dezvoltare Web, ar trebui să aveți o idee foarte clară despre ceea ce ar trebui să facă site-ul dvs. și cum ar trebui să arate în general. Și firele de rețea ale site-ului web sunt modalitatea de a solidifica ideea și de a le comunica.

Spatele unui șervețel

O rețea wireframe este doar o schiță a ceea ce doriți ca site-ul dvs. să arate. Nu ar trebui să fie drăguță și nici nu aveți nevoie de software pentru ao crea. Puteți să luați o bucată de hârtie sau chiar un șervețel și să începeți să blocați în site-ul dvs., element după element. “Titlul merge aici ... și apoi avem un meniu de navigare ... oh, și aici pot pune o casetă de căutare.” Doar în acești termeni generali, simpli, puneți împreună o parte a site-ului dvs., până când rezultatul final arată astfel:

După cum puteți vedea, acesta nu este cod de computer sau ceva prea tehnic sau complex. Oricine se poate uita la această schiță rapidă și își dă seama imediat ce văd. Și acesta este motivul referitor la telefoanele mobile: ele sunt foarte rapide și ușor de înțeles. Ele vă permit să obțineți lucrurile importante, cum ar fi aspectul site-ului, structura de navigare și destinația de plasare a anunțurilor, înainte de a atinge o singură linie de cod. Și dacă lucrați cu alți oameni, cum ar fi un coder sau un designer, ei vă permit să ajungeți la un acord cu privire la ceea ce va arăta rezultatul final. Acest lucru poate salva o tonă de confuzie și dublă muncă, mai ales atunci când vine vorba de proiecte mai mari.

Este important să notați lipsa detaliilor din cadrul de sârmă de mai sus: imaginile de lângă fiecare articol nu sunt “real” imagini, dar deținători vizibili. Chiar și textul articolului nu este completat - este doar o grămadă de linii. Nu puteți vedea ce va fi schema de culori - este doar alb-negru. Asta este ceea ce este un cadru wireframe presupus să arate ca. Nu trebuie să fie o reprezentare completă a site-ului final, ci doar spiritul sau esența acestuia, dacă vreți. Sunt doar cele mai importante lucruri.

Unelte pentru fracționare

După cum am menționat anterior, cel mai bun instrument pentru modelarea prin fir este adesea doar o bucată de hârtie și un stilou. Ieșirea de pe computer vă poate ajuta într-adevăr să vă clarificați mintea și să vă concentrați asupra a ceea ce doriți ca site-ul dvs. să arate, fără întreruperi enervante sau încurcătură despre învățarea unui nou instrument de tip wireframing. Un notebook de matematică (așa cum este arătat mai sus), de obicei, funcționează cel mai bine pentru că vă urmărești liniile, creați dreptunghiuri înguste și ușor aliniați diferitele părți ale site-ului împreună. Luați unul, un pix sau două și mergeți să luați o ceașcă de cafea undeva departe de computer. Veți reveni cu o idee clară despre exact ce încercați să creați.

Acestea fiind spuse, uneori este necesar software-ul de tip wireframing. De exemplu, poate lucrați ca parte dintr-o echipă care se întinde pe întreg teritoriul țării sau pe glob sau poate scrieți un articol de blog despre trasarea prin fir. În aceste cazuri, scanarea manuală a cablurilor nu este o soluție foarte practică. Iată câteva instrumente software gratuite care vă pot ajuta, dacă într-adevăr nu puteți folosi un stilou și hârtie:

• Lumzy: Un instrument gratuit, bazat pe Flash, cu o bogată bibliotecă de obiecte. Aceasta este unealta pe care am folosit-o pentru a crea schema de sârmă pe care o vedeți mai sus - este rapidă și nedureroasă.
• QuirkTools Firuri: Un instrument mai simplu, fără opțiuni de aliniere. Nu este totuși Flash.
• Mockingbird: Un instrument comercial, dar are un plan liber limitat.

Nu doar pentru site-uri web

Probabil că ați realizat acest lucru, dar aceasta este o notă bună pentru a încheia cu: Wireframes sunt un instrument fantastic pentru crearea unui produs, nu doar a unui site web. Poate că aveți o idee grosolană pentru o aplicație iPhone sau Android sau chiar o aplicație de computer cu drepturi depline. În aceste cazuri, firele de rețea ale site-urilor web sunt neprețuite pentru a arăta cum arată totul și pot chiar să vă ajute să atrageți oameni să vă sprijine proiectul în moduri diferite.

Ați creat vreodată o rețea wireframe? Vei începe acum că ai citit asta? Anunță-mă în comentariile!

Creditele de imagine: Imaginea șervețelului crud prin ShutterStock, imaginea roșie a notebook-ului prin ShutterStock

Explorați mai multe despre: Web Design, Dezvoltare Web, Instrumente pentru webmasteri.