Share
Aplicațiile bazate pe browser devin din ce în ce mai răspândite, iar viabilitatea acestora pentru utilizarea în designul web este în continuă creștere. Sigur, s-ar putea să nu aibă toată mulțimea de aplicații bazate pe desktop, dar ele pot fi totuși foarte puternice indiferent și vin cu avantaje pe care nu le veți găsi în mod obișnuit de software.
În primul rând, aplicațiile bazate pe browser sunt compatibile cu platformele. Nu contează dacă sistemul de operare desktop preferat este Linux, MacOS, Windows sau chiar ChromeOS, atâta timp cât are un browser pe care îl preferați. În funcție de aplicații, s-ar putea să le găsiți chiar dacă le folosiți pentru a obține o muncă suplimentară pe o tabletă iOS sau Android.
În al doilea rând, aveți abilitatea de a accesa aplicațiile oriunde, fără instalare sau gestionare zero. Împingeți software-ul preferat pe un computer pe care nu îl utilizați în mod normal. Și niciodată nu trebuie să vă faceți griji cu privire la gestionarea din nou a actualizărilor.
În acest articol vom verifica starea aplicațiilor bazate pe browser în 2018. Vom analiza patru domenii cheie care contează pentru designerii web:
Sa mergem!
Chiar și cel mai bun software de design pentru vectori și UI de pe desktop poate fi intensiv de resurse. Ca atare, este destul de demn de remarcat cât de puternice sunt aplicațiile browser din această categorie chiar acum. Este un lucru să creezi aplicații care se compară cu sarcinile ușoare, dar să faci software profesional de design grafic în browser-ul este altceva. Și totuși, mulți dezvoltatori par să fi realizat acest lucru.
Următoarele patru sunt motivele mele de top actuale pentru aplicațiile de proiectare vectoriale și UI în browser:
Figma este o aplicație care se încadrează în mod direct în casa roților designerului web. În timp ce este capabil să facă tot felul de lucrări vectoriale și este o aplicație grafică puternică în general, este deosebit de potrivită pentru designul de interfață pentru site-uri web și aplicații bazate pe web.
Una dintre caracteristicile standout pe care le oferă designerilor web este capacitatea de a crea mai multe "cadre" individuale, care pot fi utilizate în mod similar cu artboard-urile. De exemplu, puteți crea un cadru care să reprezinte fiecare pagină într-un design al site-ului.
În cazul în care devine interesant este că orice element dintr-un cadru, de exemplu, un buton "de contact", de exemplu, poate fi conectat cu un alt cadru, cum ar fi unul care descrie o pagină de contact. Acest lucru se face prin tragerea unei linii de conectare afară din buton la cadrul țintă, care transformă butonul respectiv într-un "hotspot". În modul de prezentare, în cazul în care hotspotul este apăsat, acesta va încărca cadrul pe care este conectat, făcând această caracteristică excelentă pentru a simula fluxul de mișcare dintr-o parte a unui interfață web la altul.
Când se realizează etapa de proiectare, Figma facilitează accesarea informațiilor necesare pentru codificare, cum ar fi dimensiunile, pozițiile, setările de fonturi, hexacolele și așa mai departe. Se poate genera, de asemenea, copy & paste gata CSS puteți conecta direct în codul dumneavoastră. Iar atunci când sunt necesare active de imagine, ele pot fi exportate în vrac toate simultan sau individual, după cum este necesar.
Dacă sarcina dvs. principală într-un browser bazat pe aplicația vectorială va fi proiectarea UI-urilor pentru web, Figma este o opțiune destul de greu de trecut.
Gravit Designer este un concurent serios în spațiul vectorial ca o aplicație grafică multifuncțională, multifuncțională. Este cu totul viabil să se folosească la nivel profesional, ceea ce este mai remarcabil prin faptul că Gravit este complet, o sută la sută, liber. Nu există taxe de cumpărare, taxe de abonament sau publicitate. Doar deschideți aplicația și creați-o departe.
Software-ul include unelte vectoriale robuste, cum ar fi stiloul stilou clasic, instrumentul Bezigon, extrem de la îndemână și uneltele excelente de frecare și de umbrire. Acesta oferă posibilitatea de a avea o panza infinită și are o lungă listă de presetări de dimensiuni, astfel încât să puteți trece de la dimensiunea "Site-uri - uriase" la dimensiunea "iPhone X" cu un singur clic.
Sistemul "Pagini" vă oferă o modalitate de organizare a documentelor de tip artboard, iar sistemele ancorate și simboluri combinate vă permit să creați elemente reutilizabile care se comportă semi-responsiv când sunt plasate pe pagini de dimensiuni diferite.
Una dintre caracteristicile mele preferate Gravit este sistemul său incredibil de flexibil de umpleri multiple, frontiere și efecte. Un singur element poate avea orice număr de umpleri, margini și efecte, fiecare având propriile moduri de amestecare și setările de opacitate, permițându-vă să creați stiluri de design foarte interesante.
Gravit se îmbunătățește rapid, echipa de dezvoltare adăugând caracteristici extrem de utile la intervale frecvente. Ultima actualizare majoră a adăugat simboluri și ancore îmbunătățite. Cel care a mai fost adăugat spațiul de stocare în cloud, importurile Sketch și suportul pluginului. Gravit se mișcă repede și se îmbunătățește adesea.
Dacă sunteți în căutarea unei aplicații bine rotunjite, în care puteți face exact tot ce aveți nevoie cu vectori, Gravit este cel mai probabil să vă zgâriați că mancarimea.
Vectr este o aplicație mai ușoară decât Gravit sau Figma. V-aș descrie această aplicație ca fiind una de utilizat atunci când doriți să intrați și ieșiți rapid și fără o curbă abruptă de învățare. Instrumentele și interfața Vectr sunt minimaliste și intuitive, iar seria excelentă de tutoriale interactive pe care le întâmpinați la prima lansare face ca software-ul să fie mult mai rapid pentru a ridica.
Una dintre cele mai interesante caracteristici ale lui Vectr este că, prin intermediul unui plugin, acesta poate fi folosit ca editor grafic complet în interiorul unei zone de administrare WordPress, ceva care ar putea fi într-adevăr foarte util.
Dacă nu doriți multă agitație, dar doriți un set simplu de instrumente robuste, Vectr ar putea fi aplicația pentru dvs..
BoxySVG, după cum sugerează și numele, este vorba despre SVG. Dacă sunteți în mod specific stabilirea de a proiecta grafică vectorială pentru web, această aplicație este specializată doar pentru acest scop. BoxySVG nu încearcă să se preocupe de grafica tipărită, de designul interfeței sau de orice altceva care ar putea distrage atenția de la faptul că este un mare program de design SVG.
Acesta include funcții specifice SVG, cum ar fi posibilitatea de a controla setările pentru cutia de vizualizare, alinierea obiectelor relative la caseta de vizualizare și preserveAspectRatio setarea - nu este nevoie să sapi în codul SVG-urilor după export. Și, desigur, pentru că proiectați în browser, veți vedea SVG-urile exact așa cum vor apărea atunci când sunt implementate pe web.
Dacă SVG este jocul dvs., în special pentru web, cu siguranță verificați ce oferă BoxySVG.
Wireframing este o categorie în care actuala selecție bazată pe browser ar putea fi de fapt mai puternică decât ofertele desktop. S-ar putea ajuta ca firframing-ul să nu fie intensiv și că cererea de fire de rețea accesibile online ar putea fi puternică datorită nevoii frecvente de colaborare în etapa de planificare a proiectului.
Consultați patru dintre cele mai importante aplicații de scanare a rețelelor de tip "browser" disponibile acum, în nicio ordine specială.
MockFlow este probabil să fie deosebit de încântat de mulți designeri web, datorită faptului că are componente drag and drop gata pentru Bootstrap, Material Design, Fundația, KendoUI și o serie de alte cadre populare. După cum se vede în imaginea de mai sus, toate componentele familiare cunoscute sunt gata de utilizare, ceva care ar putea fi extrem de util pentru prototiparea rapidă dacă cadrul preferat este inclus în lista incluziunilor MockFlow.
Când utilizați MockFlow pentru a crea o rețea wireframe pentru un proiect bazat pe cadre, acesta va arăta foarte mult ca și produsul finit, în timp ce linia de rețea va păstra capacitatea de editare rapidă și de iterații. Componenta tematică este vanilie în mod implicit, dar fiecare componentă poate avea culoarea, dimensiunea, fonturile și așa mai departe personalizate după cum este necesar.
Pentru web design-ul orientat pe fireframing, mai ales dacă utilizați un cadru, MockFlow are o mulțime de oferit.
Balsamiq este o aplicație de tip "wireframing" bazată pe nor, care este simplă și intuitivă de utilizat. În partea de sus a ecranului este afișată o vizualizare a componentelor care reprezintă lucruri precum dispozitive, imagini, titluri, paragrafe, elemente de formă și așa mai departe. Trageți-le și plasați-le pe ecran pentru a vă forma scheletul. De asemenea, puteți să căutați în continuare subcategorii pentru a vă ajuta să găsiți componentele pe care le căutați.
Stilul componentelor este destul de static, cu cele mai asemănătoare obiecte desenate manual. Pagina de pornire a lui Balsamiq spune: "Arătau ca schițe cu intenție! Încurajează brainstorming-ul ". Acest accent de brainstorming se leagă de sistemele de colaborare care permit partajarea între membrii echipei, ceea ce face ca Balsamiq să pară cel mai mult la domiciliu destul de devreme în procesul de planificare a unui proiect.
Dacă aveți o echipă considerabilă și aveți nevoie să aveți idei între mai mulți oameni înainte de a vă scufunda dinții într-un design, Balsamiq ar putea fi aplicația pentru dvs..
Mockingbird este oarecum similar cu Balsamiq prin faptul că vi se oferă o selecție de componente standardizate gata să tragă și să cadă în cadrul dvs. wireframe, cum ar fi butoane, imagini, anunțuri banner, titluri și așa mai departe. Pot fi create mai multe pagini și link-urile de lucru live vă pot permite să navigați de la mockup la mockup în timp ce testați interfața dvs. utilizator sau afișați-vă echipa sau clienții în jurul.
Colaborarea se poate face în timp real; distribuiți doar o legătură cu colegul sau clientul dvs. și aceștia vor putea să comunice schimbări și sugestii la fața locului.
Dacă aveți nevoie de cea mai mare nevoie de comunicare eficientă cu persoanele care sunt în afara site-ului, aruncați o privire la Mockingbird.
Wireframe.cc este un instrument spartan, minimalist, care nu are clopotele și fluierele celorlalte trei aplicații. Cu toate acestea, este și singurul care este complet gratuit.
Componentele pe care le aveți disponibile sunt practic doar dreptunghiuri cu colțuri rotunde sau pătrate, elipse și locașuri pentru imagini și text. Aveți posibilitatea să alegeți dintre culorile portocalii, negre, albe și câteva nuanțe de gri. În plus față de aceste funcții aveți și unele instrumente de grupare și aliniere, precum și capacitatea de a adăuga adnotări.
Wireframe.cc este deliberat rar, și, uneori, atunci când aveți nevoie pentru a obține unele idei jos repede, este exact ceea ce aveți nevoie. Nu există nici o paralizie prin analiză aici, doar să mergem direct la muncă.
Editorii WYSIWYG de astăzi îndeplinesc în unele privințe rolul pe care îl folosesc programele de design vizual, cum ar fi Dreamweaver și Frontpage, dar în multe alte moduri au progresat mult dincolo de predecesorii lor. Ele pot ajuta în același timp noii designeri de web să învețe funiile, dar pot fi, de asemenea, economizoare de timp masive în proiecte avansate atunci când sunt folosite de mâinile experimentate.
Să aruncăm o privire mai atentă la două dintre cele mai populare aplicații de web design WYSIWYG bazate pe browser.
Webflow face o treabă excelentă de a fi util atât veteranilor de design web condimentați, cât și începătorilor. Acest lucru se datorează faptului că, în timp ce totul se poate face vizual, încă mai lucrați cu toate aceleași lucruri la care sunteți obișnuit atunci când codul de mână.
Veți adăuga divizii și elemente semantice, veți crea clase CSS, va trebui să știți cum funcționează poziționarea absolută și relativă și veți fi responsabili pentru construirea site-urilor dvs. pentru a fi receptivi. Nu e nici o orbire aici, mai devreme sau mai târziu va trebui să înveți ce se întâmplă în spatele scenei. Tot ce face Webflow este să introduci o interfață vizuală asupra tehnicilor de web design pe care altfel le-ai face manual.
Pentru începători în ceea ce privește designul web, acest lucru poate face foarte mult pentru a ajuta procesul de învățare. Văzând că modificările dvs. au efect în timp real pot merge mult. Pentru veterani, Webflow este un instrument de prototipare excelent. S-ar putea să preferați în continuare să vă scrieți propriul cod, dar Webflow vă poate permite să vă mutați mult mai repede atunci când ștergeți designul. Am folosit-o personal în combinație cu codificarea manuală pentru a face termene limită mai mult decât o dată.
Deci, dacă sunteți un web designer care încearcă să netezească curba de învățare sau o mână veche care caută să economisească timp, Webflow merită privit.
În cazul în care Webflow este o interfață vizuală față de tehnicile obișnuite de web design, Froont are drept scop încercarea de a avea grijă de cât mai multe puncte ale procesului de proiectare posibil pentru a crea un proces de design foarte prietenos și rapid.
În loc să adăugați divs, text sau imagini, veți adăuga secțiuni întregi ale unui site la un moment dat. S-ar putea să scăpați într-un bar nav, o unitate de erou, o secțiune de conținut, niște panouri de prețuri, un subsol și asta este o învelitoare. Froont are, de asemenea, o selecție destul de largă de șabloane, denumite "Proiecte", pe care le puteți clona pentru a începe proiectul de proiectare în cazul în care alegeți.
Acestea fiind spuse, aproape totul se poate modifica odată ce se află pe pagină - trebuie doar să porniți Modul expert pentru a ajusta lucruri precum marjele și alinierea.
Dacă sunteți doar începutul în web design sau aveți nevoie de un proces care are scopul de a fi cât mai liber cu putință, Froont ar putea fi chiar pe aleea ta.
Găsirea unui editor complet de coduri bazate pe web este încă puțin complicat. Există destul de puțini editori de web-uri acolo, dar dacă căutați ceva cu tipul de funcții cu care sunteți obișnuit de la editorul dvs. de desktop preferat nu toate opțiunile se vor potrivi.
Acestea fiind spuse, aici sunt doi editori care au ieșit din pachet și ar putea fi foarte folositori pentru codarea în mișcare.
Caret este unul dintre puținii editori de coduri bazate pe web cu care puteți deschide un fișier local. Este posibil ca acest lucru să se întâmple cu faptul că se instalează, prin intermediul magazinului web Chrome, ca o aplicație obișnuită și funcționează offline. Veți obține o pictogramă de comenzi rapide pentru desktopul dvs. și se va executa fără alt browser Chrome în jurul acestuia.
Lista caracteristicilor este destul de impresionantă, în special în mijlocul unui peisaj de editare a codului bazat pe browsere. Caret are sublinieri de sintaxă, teme, cursoare multiple, palete de comandă, management de proiect, suport plugin și un fișier de setări extensiv, "free.configurable", user.json.
Nu numai că este gratuit, ci și open source sub licența GPLv2. Instalați-o din Magazinul web Chrome sau, dacă preferați, puteți clona repo-ul și puteți să vă ocupați manual cu instalarea manuală.
Dacă aveți nevoie de un editor de cod care poate merge oriunde, și în special dacă sunteți un dev în mișcare cu un dispozitiv ChromeOS, Caret ar putea fi exact ceea ce aveți nevoie.
CodeAnywhere nu vă permite să deschideți fișiere locale, dar ceea ce face este conectarea rapidă și ușoară cu un furnizor de stocare terță parte, cum ar fi GitHub, BitBucket, Dropbox sau un server FTP pe care sunt localizate fișierele. Deci, dacă deja impingeți codul dvs. la stocarea externă la sfârșitul zilei, acest lucru poate face acest proces un pic mai fin.
CodeAnywhere are sublinieri de sintaxă pentru șaptezeci și cinci de limbi, are patru teme și opt scheme de culori dintre care puteți alege, oferă completare de cod, linguri și cursoare multiple. De asemenea, are un terminal construit, instrumente de colaborare și istorie de revizii salvate.
O caracteristică deosebit de convingătoare este serviciul "Containere", care sunt medii bazate pe cloud care rulează CentOS sau Ubuntu și sunt preconfigurate pentru WordPress, NodeJS, Ruby și altele.
Dacă sunteți în căutarea unei modalități ușoare de a lucra la proiectele dvs. găzduite extern sau dacă ideea de "Containere" pare să facă ca proiectele dvs. să funcționeze mai bine, aruncați o privire la CodeAnywhere.
Gama de editori de fotografii bazate pe browsere este puțin mai puțină decât celelalte categorii, ceea ce nu este surprinzător în prezent dat fiind faptul că editarea fotografiilor este probabil cea mai intensă din punctul de vedere al resurselor și dificil de realizat fără putere desktop.
Avem trei editoare capabile să aleagă, totuși două dintre ele (Pixlr și SumoPaint) necesită Flash, deci dacă a trecut ceva vreme de când ai activat Flash pe mașină, va trebui să-l praf din nou pentru a putea folosi acestea doua.
În această notă, dacă doriți să activați Flash, dar numai pentru anumite aplicații, accesați Chrome chrome: // settings / content / Flash, apoi adăugați adresa URL a aplicației în lista de site-uri permise.
Polarr o face nu aveți nevoie de Flash și este o aplicație elegantă de editare a fotografiilor, care vă permite să obțineți rapid imaginile aspectate spiffice și gata de utilizare în conținutul site-urilor dvs. Efectuează adăugarea de filtre pro-look, o simplă afacere cu un singur clic, există controale de iluminare și control de culoare în profunzime și puteți să le tăiați, să le răsuciți, să rotiți și să le redimensionați la conținutul inimii.
Are chiar și o funcție de "Auto-îmbunătățire" care vă va analiza imaginea și vă va molidă fără a ridica degetul.
Polarr este gratuit, dar aveți opțiunea de a cumpăra extra "Pro" dacă doriți, cum ar fi un instrument de text, un program de eliminare a zgomotului, set de filtre portret, set de filtre peisaj, printre altele. Întreaga colecție de instrumente "Pro" este de 19,99 USD
Dacă obiectivul dvs. principal este de a obține fotografii minunate pentru postarea online, Polarr este un instrument fantastic pentru a obține acea slujbă.
Pixlr a fost în jur de mult timp. Înapoi în timpul zilei, dacă nu aveam acces la Photoshop, asta este ceea ce aș folosi și am recomandat celor care doreau să facă editare de imagini, dar nu au putut justifica achiziționarea de software.
Pixlr dispune de instrumentele pe care le-ați aștepta să le găsiți într-o aplicație raster desktop, cum ar fi creion, pensulă, radieră, găleată, gradient, ștampilă clona, desen de bază, text, estompare, ascuțire, smudge, dodge, arsură etc. Are un sistem de stil simplu, care include umbra picăturilor, umbra interioară, teșitura, strălucirea exterioară și strălucirea interioară. Și are o listă cuprinzătoare de filtre și ajustări - trebuie doar să aveți în vedere faptul că aceste funcții sunt nu non-distructive.
Aveți posibilitatea să utilizați Pixlr pentru design, artă liberă și retușare și editare foto. Dacă aveți nevoie de software bazat pe web cu mai multe instrumente asemănătoare desktop-ului decât Polarr, Pixlr ar putea umple acea diferență pentru dvs..
SumoPaint este foarte asemanator cu Pixlr, si harkens din aceeasi era. Acesta are, de asemenea, tipul de instrumente pe care v-ați aștepta să le găsiți într-un editor desktop raster, plus o selecție puternică de filtre și ajustări.
Cu toate acestea, SumoPaint are instrumente mai avansate de creare a formei, cum ar fi stele, plăcinte și așa mai departe. În plus, are un instrument de desen simetric și un utilitar gratuit de transformare. Are, de asemenea, unele stiluri de strat suplimentar: suprapunere de culori, accident vascular cerebral, înclinare gradient și strălucire în gradient.
În general, Pixlr și SumoPaint sunt foarte asemănătoare și completează în mod esențial același rol, așa că dacă căutați o aplicație bazată pe browser de această natură, cel mai bun lucru pe care îl puteți face este să încercați și să vedeți care dintre ele vă place cel mai bine.
Asta concluzionează etapa 2018 a stării actuale a software-ului bazat pe browser pentru web designeri.
În concluzie:
Ca o notă pentru viitorul aplicațiilor bazate pe browser, ține cont de creșterea WebAssembly, o tehnologie emergentă care va permite software-ului chiar intensiv, cum ar fi editorii video, să ruleze cu performanță aproape nativă. Asta ar putea scutura lucrurile!
În același timp, călătoriile dvs. și dispozitivele ultra portabile pot fi mai productive ca rezultat al unor aplicații din această listă!
Accentsconagua