8 Instrumente de proiectare cheie pentru a maximiza traficul pe site-ul dvs. web

Potrivit unui studiu realizat de Banca Mondială, aproximativ 75% din persoanele din întreaga lume au acces la dispozitivele mobile. CNET raportează că abonamentele la serviciile de comunicații mobile au crescut de la 1 miliard în 2000 la peste 6 miliarde în 2012. Din cauza expansiunii rapide a utilizării telefonului mobil, este acum mai mult decât atât de important ca site-urile să funcționeze pe mai multe platforme. Utilizați aceste opt instrumente pentru a vă îmbunătăți designul web receptiv și a maximiza numărul de persoane care pot vizualiza și accesa site-urile dvs.

8. Adobe Edge Inspect

Actualizat și lansat în 2013 cu branding nou, care leagă Creative Cloud, Adobe Edge Inspect vă permite să previzualizați desenele dvs. de web pentru a vedea cum vor arăta pe diferite platforme. Principala atracție a Edge este capacitatea sa de a vă ajuta să vă economisiți timp vizionând modificări pe platforme în timp real.

Acest instrument permite sincronizarea calculatorului și a dispozitivelor mobile. Procedând astfel, puteți naviga și inspecta designul web pe mai multe platforme simultan. De asemenea, pe măsură ce efectuați modificări în designul web și depanați-l, lucrarea dvs. se afișează imediat pe dispozitiv, atâta timp cât lucrați cu codarea Java, CSS și HTML.

7. Skeleton

Această grupă de fișiere CSS permite o dezvoltare fără precedent a site-urilor web, care arată elegant, indiferent dacă este afișată pe un monitor desktop sau într-un ecran mic care strălucește în mână. Considerată o placă de bază ușor de folosit pentru designul web receptiv, Skeleton este bine numit deoarece creează un cadru care se extinde și contractează în funcție de dimensiunea dispozitivului utilizatorului. Deși conține elemente de design de bază, este suficient de flexibil pentru a permite designerilor să aducă stiluri mai sofisticate.

6. Responsive Wireframe

Realizat ca un instrument experimental care utilizează tehnici responsabile de design web, Responsive Wireframe utilizează HTML / CSS pentru a furniza o rețea de suprapunere care vă permite să vedeți vizualizări desktop și mobile ale designului dvs. Ideea cu acest instrument este să ușureze proiectarea în cadrul browserului. În timp ce unii designeri ar putea argumenta că aceste fire-frame-uri zdrobesc creativitatea, alții spun că este o modalitate rapidă și simplă de a crea modele care funcționează pe platforme. Utilizarea acestui instrument vă economisește timp pe măsură ce testați design-urile folosind firele receptive pentru a vedea cum vor arăta laptopurile, desktopurile și telefoanele mobile.

5. Stilul de piatră

Mai concret decât o tablă de spirit, dar mai puțin static decât o machetă reală, Style Tiles permite designerilor să arate clienților structuri diferite ale site-ului. Prin prezentarea plăcilor, proiectanții evită să fie nevoiți să facă mai multe versiuni finalizate.

Aceste plăci cascadrice prezintă modele fără a le monta pe nici un dispozitiv, făcându-le o modalitate ușoară de a crea modele și de a le împărtăși clienților înainte de a lua în considerare numeroasele considerații asociate cu design sensibil. Cu alte cuvinte, această abordare oferă designerilor libertate de restricțiile dimensionale. Un produs sororit de plăci de stil, "Ghidul de stil pentru componente", vă oferă sfaturi cu privire la proiectarea dvs. și pentru a face să funcționeze pe platforme precum iPhone și noul smartphone Blackberry 10.

4. Calculatorul receptiv

Folosind procentele, acest calculator vă oferă datele de care aveți nevoie pentru a transforma designul PSD într-un element pentru proiectul web receptiv. Introduceți șase câmpuri, apoi faceți clic pe "Trimitere interogare". Optați pentru margini, margini și padding pe PSD-ul dvs. cu acest calculator.

3. Wookmark

Acesta este un plug-in jQuery care ia componentele unei pagini web și le pune în coloane. Amplasarea coloanei se bazează pe dimensiunea ferestrei browserului. Acest instrument util este o modalitate excelentă de a face site-ul să răspundă la diferite dimensiuni ale ecranului.

2. ProtoFluid

Având un avantaj deoarece este bazat pe web, acest instrument face ca este fără durere să vezi machete ale designului tău cu rezoluții și dimensiuni diferite. Bucurați-vă de utilizarea Firebug când verificați HTML, CSS, JS și alte elemente pentru probleme. Comenzile rapide de la tastatură, comutarea rapidă între vizualizări diferite și codul curat asigură viteza în timp ce utilizați acest instrument pentru a testa cât de bine arată designul dvs. pe diferite dimensiuni ale ecranului, inclusiv Nexus, iPhone și iPad

1. Fundația

Acest cadru front-end servește la opțiunea de codare mai inteligentă și mai rapidă. Printre caracteristicile sale, acest instrument vă permite să începeți prin proiectarea pentru ecrane mici. Pe măsură ce lucrați la construirea designului pentru ecrane mai mari, Fundația vă ajută să vă intensificați elementele de design. În plus, această unealtă vă oferă șabloane HTML reci, care vă oferă un început în proiectarea site-ului.

Profitați de grila flexibilă a acestui instrument, de planurile receptive și de producția rapidă de prototipuri. Eficacitatea și credibilitatea Fundației este evidentă în lista de site-uri care o utilizează, care include Laboratoarele Naționale National Geographic, Pixar și Los Alamos.

Pe măsură ce vă uitați la maximizarea designului dvs. web receptiv, care sunt cele mai mari provocări cu care vă confruntați? Ce instrumente ți-au ajutat cel mai mult?

[Imagini prin]