Share
Cu excepția cazului în care sunteți complet nou în industrie sau ați trăit sub o stâncă în zonele îndepărtate ale unei alte planete, ați auzit despre designul receptiv. Chiar dacă nu o înțelegi pe deplin, este obligată să fie ceva cu care v-ați întâlnit sau ați interacționat într-un fel sau altul.
Pe scurt, web design-ul receptiv este arta de a proiecta site-uri web pentru o multitudine de dimensiuni și dispozitive de ecran, astfel încât să existe o experiență optimă pentru fiecare utilizator la orice dimensiune posibilă.
Design-ul web responsabil este cel mai bun atunci când este dispozitivul agnostic; unde nu doriți să proiectați pentru anumite rezoluții sau dimensiuni, cum ar fi numai pentru dimensiunile iPhone sau iPad. În schimb, ar trebui să aveți în vedere proiectarea în funcție de conținut și design și modul în care acest conținut curge și se adaptează la diferitele medii pe care le-ar putea vedea sau utiliza în.
De obicei, pentru a accesa internetul ar trebui să încercați printr-un calculator (de obicei foarte mare), cu sunetele familiare ale modemului care suna în timp ce vă conectați. Acum, însă, puteți accesa internetul prin intermediul calculatoarelor, laptopurilor, telefoanelor mobile, smartphone-urilor, tabletelor, televizoarelor, consolelor de jocuri - lista se simte aproape fără sfârșit.
Responsive Web Design, scris de Ethan Marcotte și publicat de A Book Apart, este o introducere strălucită a principiilor Responsiv Web Design. Acum, pe de o parte, aceasta este o veste bună. Mai mult decât oricând înainte, putem fi conectați la internet în orice moment sau în locul în care ne-am putea dori. În timp ce acest lucru este luat în considerare, pentru mulți este, de asemenea, necesar. Iar cu necesitatea și accesul suntem de asemenea adesea prezentați cu nerăbdare și nevoia ca lucrurile să lucreze și să lucreze repede.
Datorită faptului că site-urile web responsabile devin mult mai importante, chiar și publicul larg (astfel încât toată lumea din afara industriei de internet și a industriei creative) a ajuns aproape să se aștepte atunci când navighează pe web. Deci, totul, design-ul web receptiv este cu siguranță un lucru important.
Lucrul cu designul receptiv nu este fără provocările sale. Mai întâi de toate, există o multitudine de dispozitive și dimensiuni de ecran pe care trebuie să le satisfacem. De la ecrane extra-mari la mari, de la mici până la mijloc (și totul între ele), trebuie să vă gândiți foarte mult. Și, așa cum sunt sigur că știți deja că sunteți dezvoltator, lucrul cu designul receptiv din partea tehnică a lucrurilor poate transforma și coșmarul și poate fi extrem de dificil de manevrat.
Site-ul web mediaqueri.es oferă o mulțime de inspirație pentru unele design-uri web de ultimă oră. Ca și în cazul oricărui proiect, principalele lucruri pe care trebuie să le gândiți cu un design web receptiv sunt conținutul site-ului web, modul în care acest conținut se încadrează în design și modul în care conținutul curge de la o pagină la alta. Trebuie să te uiți la modul în care diferitele elemente de design pe care le-ai lucrat împreună și să te asiguri că totul se simte coerent și coerent.
Diferența față de designul web receptiv este că trebuie să vă gândiți și la modul în care toate acestea funcționează de la o mărime la alta, fie că este vorba de lățime sau înălțime. Trebuie să vă gândiți cu atenție la modul în care toate acestea se traduc la un ecran mai mic sau mai mare și la modul în care funcționează toate elementele de design, fluxul de conținut și orice altceva. Trebuie să păstrați experiența consistentă, indiferent de mărimea site-ului web.
Noi, ca designeri și dezvoltatori într-o industrie atât de rapidă, sunt destul de norocoși. Vom lucra la unele proiecte uimitoare și, de obicei, întotdeauna vom începe să lucrăm în prim-planul tehnologiilor noi și emergente. Lucrul cu designul web receptiv este doar unul dintre acele lucruri interesante pe care le avem de făcut, dar cu asta vine un preț.
Festivalul Greenbelt este un exemplu excelent de design web receptiv. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. Gândiți-vă la
La începutul oricărui proiect de proiectare, ar trebui să încercați să stabiliți exact ce înseamnă că clientul dvs. dorește să iasă din proiect și ce se așteaptă ca rezultatele să fie. Gestionarea așteptărilor clientului dvs. poate fi un lucru dificil de făcut, dar este important să vă mențineți în continuare pentru a vă asigura că clienții dvs. vă înțeleg procesul complet.
Un exemplu frumos de design web receptiv în acțiune poate fi văzut pe site-ul Modern Green Home. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. Când vine vorba de designul web receptiv, și mai ales dacă au venit la dvs. cu unul dintre aceste buzzwords, trebuie să încercați și să ajutați educa clientii dumneavoastra. Destul de des, aceste buzzwords au fost auzite în trecere sau au fost reprezentate în mod greșit și depinde de dvs. să vă asigurați că clientul dvs. are o înțelegere corectă a subiectului.
De exemplu, uneori ați putea chiar să îi atrageți pe potențialii clienți să vă spună că doresc un site web care a lucrat la "iPhone și iPad". În acest caz, aș spune "Ei bine, este perfect bine - dar ceea ce ar fi minunat este că putem să ne concentrăm în schimb să vă creați un site web care să răspundă perfect, care va funcționa orice dispozitiv și nu doar să se limiteze la cele două ". Acesta este un mare spărgător de gheață pe această temă și este ceva care lasă foarte deschis pentru a vă explica mai departe în etapele de planificare.
Dacă clientul dvs. înțelege designul receptiv corespunzător, atunci îmi imaginez că vor fi mai fericiți cu proiectul.
Site-ul Stuff & Nonsense este un exemplu excelent de design web receptiv, introducând de asemenea diferite ilustrații la diferite dimensiuni ale ecranului. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. Dacă aveți timp să educați în mod corespunzător clientul, acesta poate funcționa numai în favoarea dumneavoastră. De exemplu, în munca mea, încerc întotdeauna să mă asigur că clienții mei simt că lucrez cu mai degrabă decât pur și simplu pentru lor. Acest lucru vă ajută să ușurați procesul de lucru cu clienții dvs. atunci când proiectați pentru web receptiv.
Este bine și bine să vorbim despre motivul pentru care este important să educați clienții și să vă spunem lucruri despre care ați putea ști deja despre un design web receptiv. Acum pentru zăngănit, unde îți spun cele mai bune modalități de a crea site-uri web receptive.
Marea nemulțumire sunt bine cunoscute pentru interviurile lor, iar site-ul lor este un exemplu excelent de design de reviste pe web, precum și un exemplu strălucit de web design receptiv. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. Și răspunsul? Ei bine, din păcate, nu este într-adevăr unul corect! Îmi pare rău dacă nu este ceea ce căutați, dar, după cum probabil veți înțelege cu dezvoltarea și codarea, procesele fiecăruia sunt diferite și nimeni nu pare să funcționeze în același mod. Acest lucru, în felul său, este grozav, deoarece înseamnă că putem găsi mereu noi modalități de lucru.
Cu toate acestea, nu vă faceți griji, vă voi oferi câteva sfaturi de top pentru proiectarea site-urilor receptive pe care ar trebui să le puteți pune în acțiune destul de ușor. Simțiți-vă liber să alegeți și să alegeți dintre toate acestea, precum și combinarea lor în cazul în care credeți că ar putea fi adecvat. De asemenea experiment! Încercați o mulțime de moduri diferite de a proiecta site-uri web receptiv și a vedea ce se potriveste tu Cel mai bun.
Crearea unui mockup pentru un site cu o lățime statică în Photoshop (sau orice alt software grafic) a fost modul în care cei mai mulți oameni au creat site-uri web, iar pentru unii, este încă. E absolut bine! Dacă vă convine să utilizați o aplicație grafică pentru a proiecta modul în care arată site-ul dvs., atunci este bine.
Site-ul Web UX Londra 2013 este un exemplu frumos de design care se calculează de la mic la mare grațios. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. Dar nu încercați să proiectați un mockup pentru fiecare rezoluție sau lățime; te-ai face nebun și fii acolo de foarte mult timp. În schimb, gândiți-vă la articolul din sârmă. Gândiți-vă la modul în care ne-am uitat la fluxul de conținut pentru acele cadre și la modul în care am decis că totul ar trebui să se împrăștie. Încercați și traduceți acest lucru la desenele dvs. și gândiți-vă la modul în care aceste elemente vor curge și se vor muta atunci când dimensiunea ecranului se va schimba.
Unele dintre aceste modificări vor fi importante, iar pentru aceia, atunci ar fi potrivit să creați un mockup mic pentru a arăta acest lucru, dar pentru orice alte schimbări, cum ar fi adaptarea textului, atunci aș rămâne să vă uit la astfel de lucruri în după ce începeți să codificați prototipurile. Dacă preferați să proiectați un mockup pentru fiecare etapă majoră a design-ului dvs., atunci cu toate mijloacele, continuați, trebuie doar să fiți conștienți de timpul pe care acesta îl va adăuga la proiectul dvs..
Acum, pentru un pic de controversă. S-ar putea să fi auzit despre tot
Site-ul WWF este un exemplu minunat de design web care funcționează și în mod strălucitor. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. Proiectarea în browser este atunci când te duci dintr-o scenă de wireframe (dacă ai făcut-o) direct în browser pentru a începe faza de proiectare, mai degrabă decât să lucrezi cu orice software grafic. Dacă utilizați o mulțime de instrumente online pentru a vă ajuta să creați elemente diferite ale structurii dvs. de proiectare (cum ar fi să creați grilă sau să vă perfecționați tipografia), atunci acest lucru poate funcționa foarte bine.
Cu toate acestea, mulți designeri pot simți că se luptă cu proiectarea în browser, mai ales dacă sunt mai mult designer decât un coder. Motivul pentru aceasta este că simt că le restrânge puțin creativitatea, ceea ce le face mai greu să se simtă ca ei să poată veni cu idei creative, unice și vizuale.
Următorul Web reușește să afișeze conținutul într-un mod ușor de digerat și de urmat, chiar și până la ecrane mici. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. Dar, ca dezvoltator, probabil că veți fi extrem de confortabil folosind codul și astfel ar putea fi o idee bună să jucați în jur, încercând să proiectați în browser și să vedeți ce rezultate ați venit.
Probabil este preferatul meu personal. Decizia de în browser înseamnă că trebuie să faci un pic de lucru în software-ul grafic și puțin în browser. Personal, cred că nu puteți obține un rezultat mai bun cu privire la modul în care un design va funcționa până când acesta se află în browser-ul propriu-zis. Tipografia va fi întotdeauna diferită în aplicațiile grafice decât în browser și este mult mai ușor să creați prototipuri și să repetați rapid etapele de proiectare atunci când vă aflați în browser (deși tot ce se poate schimba odată cu introducerea de aplicații, cum ar fi
Site-ul Web Microsoft utilizează în mod inteligent conținutul în mișcare și decuparea imaginilor în funcție de dimensiunea ferestrei de vizualizare. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. Lucrul cu atât un amestec de machete cât și o lucrare bazată pe browser înseamnă că puteți oferi o mare flexibilitate designului dvs. și deciziilor pe care trebuie să le luați. Cheia pentru acest termen "de a decide în browser", totuși, este cu primul cuvânt. Deși multe dintre deciziile creative importante pot fi făcute în software-ul grafic, browser-ul este locul în care se poate face alegerea dvs. finală.
Când lucrez în acest fel, găsesc că deseori rezultă un amestec de machete, biblioteci de modele proiectate (în software-ul grafic și în HTML & CSS) și prototipuri complete HTML & CSS. Un amestec este grozav și arată evoluția site-ului de la început până la ceea ce, sperăm, începe să devină un site web complet.
În primul rând, dacă nu ați învățat deja din articolele mele în secțiunea "Înainte de a începe" - întotdeauna, întotdeauna, întotdeauna începeți să lucrați mai întâi la conținutul desenelor dvs. - mai întâi. Toate acestea înseamnă să vă asigurați că lucrați cu conținut real și cu conținutul destinat a fi utilizat pe site-ul pe care îl proiectați.
Philip House este un exemplu excelent al modului în care puteți schimba și muta planșele atunci când lucrați cu modele web receptive. Imaginile oferite au fost oferite cu ajutorul mediaqueri.es. În al doilea rând, dacă lucrați în primul rând pe mobil (începând cu layout-uri mai mici) sau desktop-down (pornind de la layouts desktop-urilor), vă stau complet la dispoziție. Există multe dezbateri despre acest lucru online, însă într-adevăr aceasta este decizia ta de a face. Dacă vă simțiți mai creativ, trecând de la o dimensiune mai mare până la o dimensiune mai mică, chiar dacă o construiți în sens opus, atunci este bine. Așa cum face și opusul, mergând de la mic la mare!
Să încheiem lucrurile cu niște resurse utile. Există atât de multe instrumente care vă pot ajuta atunci când proiectați site-uri responsabile, aruncați o privire:
Accentsconagua