Aplicații care vă pot reduce sarcina „științei” în design

Ce le displace cel mai mult designerilor web? Probabil codare. Și poate o secundă apropiată este prototipul pentru toate dispozitivele. Și orice poate face astfel de lucruri mai ușoare îi permite unui designer să petreacă mai mult timp pe aspectele creative ale muncii sale.

Având în vedere acest lucru, există o serie de aplicații noi grozave pe care fiecare designer ar trebui să le exploreze ca potențiale completări la setul său de instrumente!

FRONTIFICARE

Ce site grozav pentru tine de a crea propriile ghiduri de stil și de a le stoca în cloud pentru referințe viitoare și pentru partajare. Există șabloane de ghid de stil pentru logo-uri și imagini, palete de culori, tipografie, pictograme și propriul text și conținut media. Un alt mare plus aici este că nu trebuie să vă creați manual propriile ghiduri de stil PDF - le stocați pe Frontify și pot fi convertite în fișiere PDF pentru descărcare, imprimare și partajare. Versiunile păstrează toate versiunile mai vechi în fundal pentru a fi afișate în orice moment. Puteți începe cu șabloanele lor sau puteți căuta exemple de cărți de marcă pentru a le personaliza pe ale dvs. Toate funcțiile sunt accesibile prin API. Iată un exemplu de ceea ce poți face doar cu o siglă, folosind propriul logo Frontify:

Acesta este logo-ul de bază. Frontify a decis că „picăturile” sunt cheia aici, dar că ar putea face multe alte lucruri, păstrând în continuare sigla consistentă. Iată schimbările de culoare:

Și iată un exemplu de variație a logo-ului de bază:

Acesta este doar un exemplu de șabloane de design și culoare pe care le puteți utiliza pentru a crea ghiduri de stil unice, iar toate componentele sunt interschimbabile.

COMPOZATOR VIZUAL

Această aplicație există de puțin timp și poate că știți deja despre ea, dar v-ar fi greu să găsiți o alta cu pachetul de opțiuni de design. Practic, a eliminat sarcinile grele de planificare și codare. Puteți avea machete de design în doar câteva minute, adăugând elemente cu un singur clic. Prețul de 25 USD merită din plin. Butoane pentru orice; o mulțime de opțiuni de animație, opțiuni de partajare imediată și așa mai departe. Peste 40 de elemente de conținut în acest copil! Este într-adevăr un instrument universal! Dacă nu sunteți sigur despre toate caracteristicile sale și despre cum puteți utiliza această aplicație, consultați tutorialele video aici.

Există funcții grozave care vă permit să vă proiectați paginile foarte rapid și puteți modifica aproape orice element. De exemplu, există mai multe elemente de grilă predefinite pe care le puteți modifica sau o opțiune pentru a vă proiecta propria grilă.

Dacă există un dezavantaj pentru Visual Composer, este că lasă în urmă o mulțime de coduri mici atunci când dezactivați, care trebuie eliminat înainte de a începe o nouă temă. Iată un exemplu de design creat prin Visual Composer.

DESIGN HUNT

Când inspirația ta tocmai s-a blocat, probabil că o cauți căutând noi site-uri web care ți-ar putea oferi idei grozave. Aceasta poate fi o sarcină puțin consumatoare de timp, așa că de ce să nu folosiți o metodă mult mai convenabilă? Design Hunt este un fel de „centru de compensare”, dar își schimbă întregul repertoriu în fiecare zi. Desenează modele noi grozave găsite pe Pinterest, Dribble, Designer News, DesignInspiraton și multe altele și le publică pentru designerii care caută inspirație și idei noi. Acum, puteți merge într-un loc în fiecare zi și puteți găsi o colecție complet nouă.

TOOKAPIC

Un relativ nou venit în afacerea cu fotografii de stoc, Tookapic are acum peste 11.000 de fotografii de stoc, majoritatea gratuite, restul la un preț mic. S-ar putea să vă placă mai mult decât sursa foto de stoc pe care o utilizați acum – culoare și claritate fenomenală și fotografii cu adevărat unice. Accesați site-ul lor și verificați ce au. S-ar putea să fii surprins!

MARVELAPP

Acest instrument gratuit de prototipare vă permite să schițați și să creați machete de pe mobil sau de pe orice alt dispozitiv și să vedeți imediat prototipul. De acolo, puteți rearanja, modifica, adăuga culoare, text, schimba formulare și puteți face aproape orice, cu compatibilitate imediată cu orice dispozitiv. Odată ce îți denumești proiectul, mergi imediat la interfața principală și începi. Odată terminat, puteți previzualiza întregul design și puteți interacționa cu acesta pentru a vă asigura că totul funcționează bine.

Pentru a afla mai multe despre acest instrument fenomenal, vizitați site-ul web și urmăriți demonstrația - veți fi încântat de ușurința în utilizare. Una dintre cele mai bune caracteristici este capacitatea de a introduce imagini de oriunde (chiar și Dropbox și schiță) și de orice tip de imagine. De asemenea, puteți adăuga o echipă dacă acesta este un proiect de colaborare. Cel mai mare dezavantaj al Marvel este că există limitări cu versiunea gratuită, așa că cu siguranță va trebui să faceți upgrade. Totuși, acesta este foarte ușor de utilizat - la fel de bun ca Justinmind.

ANIMAȚI CSS

Dacă creați multă animație, veți dori cu siguranță acest instrument. Funcții foarte interesante fără a fi nevoie să scrieți niciun cod. Există o bibliotecă gata de utilizat de efecte de animație – peste 50 de fapt – și puteți personaliza cu ușurință numărul de bucle și durată. Animația adaugă multă implicare și divertisment atâta timp cât nu exagerați!

Dacă sunteți în căutarea unei game cu adevărat complete de caracteristici și opțiuni, totuși, CSS singur nu va umple factura. Deși cu siguranță dezbaterea despre CSS și JavaScript continuă, există cu siguranță modalități în care acestea pot fi utilizate împreună. De exemplu, aveți o animație CSS excelentă, dar doriți ca aceasta să alunece din stânga atunci când un utilizator ajunge la un anumit punct în derularea în jos. Va trebui să adăugați JS pentru a face acest lucru. Înțelegerea faptului că CSS are limitările sale și poate fi îmbunătățită de JS este doar o utilizare înțeleaptă a instrumentelor disponibile.

Cu toate acestea, Animate CSS este foarte ușor de rulat. Îl descărcați, atașați CSS, precum și jQuery și orice alte componente doriți și începeți să animați. Există tutoriale grozave pe YouTube pentru a începe.

CULORI

Dacă se întâmplă să fii dalton sau doar să fii provocat de schema de culori, acest instrument va dezvolta o întreagă schemă de culori pentru tine sau va crea una dacă știi de unde vrei să începi. Când descoperiți o culoare care vă place, blocați-o și apoi continuați să faceți clic - veți obține o schemă completă cu câte culori doriți. Acest lucru este util în special dacă doriți să utilizați degrade de culoare. Nu este nimic cu adevărat controversat în legătură cu acest instrument – ​​designerii care îl folosesc îl iubesc; cei care nu au încercat încă. Singurul dezavantaj? Nu mai este gratuit și trebuie să aveți un cont iTunes pentru a descărca.

Generator automat de scheme de culori pentru cei cu probleme de culoare

CIRCULUS.SVG

Acesta nu este un instrument cuprinzător, cu o mulțime de opțiuni, șabloane și altele, dar iată o modalitate unică de a crea un meniu sau mai multe pe câte pagini doriți! Tot ce faci este să introduci specificul a ceea ce vrei în meniul tău. Apoi vi se vor furniza instrucțiuni detaliate despre cum să îl construiți și să îl încorporați într-o anumită pagină.

Un mic ceva pentru a implica mai bine vizitatorii

SVG circular este probabil superior CSS pentru crearea acestui tip de element. Odată ce descărcați, aveți 3 opțiuni: Puteți să vă desenați sectoarele într-un editor grafic, cum ar fi Sketch, apoi să le exportați ca SVG, să adăugați interacțiune și să le încorporați; vă puteți desena sectoarele cu cod; sau puteți folosi generatorul Circulus chiar în aplicație.

CSS vă permite să creați navigare circulară, dar există câteva erori de browser și este doar multă muncă. Trebuie să începeți cu un dreptunghi, să îl despărțiți, apoi să înclinați și să rotiți acele secțiuni. Și, dacă folosiți mai mult decât pictograme în sectoarele dvs., devine mai complicat.

Folosind SVG, puteți desena orice formă doriți, utilizând linii specifice și comenzi arc pentru „pee de plăcintă” dorite – iată un exemplu:

Odată ce ați desenat fiecare dintre punctele dvs. și pictograma și/sau conținutul dvs. încorporate, pur și simplu vă alăturați acestora.

METAFLOP

V-ați săturat de aceleași fonturi și stiluri de litere vechi? Creați-vă propriul - nu este necesară codarea - doar faceți clic și trageți. Trecerea la fonturi și stiluri unice pentru text poate încuraja vizitatorii să citească cu adevărat conținutul! Această aplicație este atât de tare, încât veți avea un timp dificil să nu vă jucați cu ea ore întregi. Și nu vei mai spune niciodată că tipografia este cea mai puțin sexy parte a designului web.

Este atât de simplu. Personalizați fonturile dintr-o serie de diapozitive care au caracteristici diferite – înălțime, deschidere și contrast. Ajustați până când aveți ceea ce vă place și apoi îl descărcați ca pachet de fonturi web (gratuit). Există, de asemenea, o bibliotecă de fonturi prefabricate din care să alegeți. Continuați să jucați – veți vedea de ce designerii de tipuri pot fi o „rase pe moarte”.

Captați atenția cu fonturi și stiluri unice

FONTFLLAME

Acesta este într-adevăr un „copil nou în bloc”. Fontflame încearcă să-i scutească pe designeri de încă o povară – găsirea perechilor de fonturi care funcționează cu adevărat. În acest moment, are 10 perechi publicate pe site-ul său, dar adaugă zilnic. Exemplele de asociere, folosind biblioteca de fonturi gratuite a Google, includ „Lobster-Asap” și „Roboto-Open Sans”. Biblioteci suplimentare vor fi adăugate în curând. Fiți cu ochii pe acest site – va avea multe de oferit în perechi în curând.

PODCAST INDEPENDIENT

Nu o aplicație sau un instrument - acesta este un podcast săptămânal pentru designeri și dezvoltatori pe care nu veți dori să-l ratați. Găzduit de Paul Jarvis, veți avea acces la noi tendințe, aplicații și instrumente și o mulțime de sfaturi cu adevărat practice.

IN-VIZIUNE

Iată un instrument grozav de prototipare care are câteva caracteristici care nu se găsesc în celelalte. La fel ca toate celelalte, vă creați macheta pentru oricare sau pentru toate dispozitivele - le alegeți pe cele pe care le doriți. Odată ce prototipul dvs. este creat, îl puteți previzualiza pe toate dispozitivele și apoi îl puteți trimite clienților sau membrilor echipei pentru revizuire. Ei pot comenta chiar despre designul în sine, ceea ce este un mare plus. Alte două caracteristici frumoase ale In-Vision sunt un mod istoric, care vă permite să vedeți toate versiunile anterioare ale unui design și 3 proiecte demonstrative pentru care designerii pot lucra până când se simt confortabil cu toate caracteristicile.

În compararea In-vision cu aplicația Marvel, diferențele importante sunt probabil următoarele:

1. InVision are mai multe funcții decât Marvel, dar asta îl face și mai complex. De exemplu, are mai multe funcții de colaborare live, un instrument pentru capturi de ecran de adnotare și elemente de istorie grozave.
2. Marvel are o aplicație iOS și lucrează în prezent la aplicații pentru Android și iPad - InVision nu le are.
3. InVision este probabil mai bun pentru o echipă mai mare, Marvel mai bine pentru echipe solo sau mici.

Comentariile utilizatorilor ambelor aceste aplicații ar arunca mai multă lumină asupra care este cea mai bună pentru ce scopuri.

Probabil că aveți câteva aplicații preferate despre care colegii designeri le-ar plăcea să audă. Spune-ne ce sunt și cum îți oferă mai mult timp pentru a fi artist.