Tendințele anului în design plat. Proces simplificat de la designer la dezvoltator. Imagini și pictograme desenate manual

” de John Moore Williams, șeful Strategiei de conținut la Webflow.

Sfârșitul anului curent este chiar după colț și fiecare web designer s-a întrebat măcar o dată problemă importantă: Ce va defini designul web în 2017? Am decis să găsesc răspunsul la această întrebare și i-am întrebat pe designerii WebFlow ce tendințe credeau că vor domina în următoarele 365 de zile. Am dat și propriile mele comentarii la gândurile lor.

În primul rând, să obținem opinia liderului designerului Webflow, Sergie Magdalin.

1. Design bazat pe conținut

„Dispunerea elementelor de design într-o structură dată ar trebui să fie astfel încât cititorul să poată înțelege cu ușurință ideea principală fără a-și reduce viteza normala citind” -Hermann Zapf

În ultimii câțiva ani s-a înregistrat o schimbare dramatică în gândirea despre rolul designului în afaceri. Anterior, designul era văzut ca pasul final în procesul de creare a unui obiect: designerul-magicul vine la sfârșit și stropește praful magic pe produsul nostru pentru a-l face mai bun decât concurența.

A fost foarte interesant să urmărim metamorfozele care au loc cu prioritățile de dezvoltare.

Iar cel mai frumos lucru la aceste metamorfoze a fost trecerea la un model în care conținutul stă din nou în fruntea mesei. Designerii din întreaga lume și-au dat seama că utilizatorii vizitează site-urile web în primul rând pentru conținut, fie că este vorba de tweet-uri scurte, articole specializate de lungă durată sau cele mai recente meme-uri de pe Internet. Rolul suprem al designului este de a prezenta conținutul în cel mai atractiv și de înțeles mod și de a obține cele mai bune rezultate din acesta.

Acesta este unul dintre motivele tranziției de la designul „skeuomorf” (atunci când elementele sunt descrise cât mai asemănătoare cu omologii lor în lumea reală) la un design plat, minimalist. Din aceste considerente, Google a creat Material Design.

Desigur, așa cum afirmă a treia lege a lui Newton, pentru fiecare acțiune există o reacție la fel de puternică. Mulți designeri cred că moda este design plat„a ucis” chiar spiritul designului. Ne așteptăm ca această dezbatere să continue și în anul care vine, dar accentul va rămâne pe conținut - baza oricărei lucrări de proiectare.

2. Interacțiune de înaltă calitate între designeri și dezvoltatori și designeri între ei

Importanța designului în modelarea afacerilor este în creștere, așa că se pune tot mai mult accent pe designeri care lucrează împreună cu colegii lor designeri și colegii lor dezvoltatori.

Această preocupare pentru interacțiunea cu designerii a apărut în parte din cauza volumului masiv de aplicații mobile și web care sunt dezvoltate astăzi. Pe lângă faptul că astfel de corporații gigantice precum Google, Facebook, Twitter și LinkedIn necesită munca titanică a unei echipe de design cu absolut laturi diferite, designerii trebuie să fie mereu pe aceeași pagină unii cu alții. Aceasta înseamnă că este nevoie de o mai bună comunicare asupra proiectului și a modului în care să se facă cel mai eficient colaborare.

Pentru a face această sarcină mai ușoară, au fost create multe instrumente, de la șabloane de echipă și panouri din Echipa Webflow la editor grafic Interfețe Figma care arată schimbări în timp real. Sunt sigur că în 2017 aceste platforme vor fi îmbunătățite și completate.

Dacă vorbim despre interacțiunea dintre designeri și dezvoltatori, se acordă multă atenție proces important transferul muncii. De exemplu, în loc să trimită imagini statice grele și voluminoase, designerii pot acum să partajeze machete redate live datorită instrumentelor precum InVision, Marvel, UXPin.

Carson Miller a analizat acest lucru în articolul său recent „The Future of Front-End Design” de pe TechCrunch:

„Mai devreme sau mai târziu, instrumentele pentru crearea de design și modele de design vor înlocui complet dezvoltarea front-end. Puteți crea cu ușurință o bază de înaltă calitate pentru oricare dintre cadrele dvs. fără a fi nevoie să scrieți codul manual.”

3. Proces simplificat de la designer la dezvoltator

Instrumentele de proiectare și prototipare menționate mai sus vă permit să vizualizați diferitele etape ale colaborării prin vizualizări care variază de la fișiere animate Keynote până la site-uri web complet funcționale. Această metodă de partajare a materialului de lucru reduce timpul de răspuns în cadrul proiectului, crescând astfel calitatea designului, crescând viteza echipei de dezvoltare și reducând posibilitatea de dezamăgire față de rezultat. De asemenea, îmbunătățește interacțiunea cu clienții. De exemplu, pentru mulți utilizatori WebFlow, întâlnirile cu clienții s-au transformat în întâlniri de lucru cu drepturi depline, unde designerii pot implementa rapid idei și toată lumea își poate testa ideile aproape imediat.

Tendințele de design web în anul viitor, potrivit designerului de produse Gadzhi Kharkharov:

4. Titlu mare, tare

Pe măsură ce lumea designului web începe să se concentreze asupra conținutului, este din ce în ce mai obișnuit să vedeți titluri inspiraționale pe site-uri web cu fonturi la fel de mari și îndrăznețe ca și conținutul lor.

Partenerii Heco #MadeInWebflow

După cum puteți vedea din exemple, „mare” și „aldine” nu se referă doar la descrierea fontului. Mai repede, despre care vorbim că o parte semnificativă a ecranului de start este dedicată unei declarații simple, dar puternice și autonome despre produs sau serviciu. Un astfel de titlu ar trebui să conțină esența și să fie ușor de înțeles pentru orice vizitator, evitând pompozitatea inutilă (bine, expresia „Proiectează imposibilul” poate suna prea tare).

În mediul aglomerat de astăzi, supraîncărcat de informații, declarații scurte și puternice ca acestea funcționează bine pentru orice marcă.

5. Markup complex care provine din elementele de bază ale designului grafic

Dacă vrem să anticipăm dezvoltarea designului web (cel puțin latura sa vizuală), trebuie să ne uităm la istoria designului grafic.

În ultimii ani, aspectul paginii web a fost limitat Capabilitati CSS, dar module noi precum Flexbox și Grilă CSS(care va fi lansat în martie 2017), vă va permite să implementați cele mai îndrăznețe idei în markup web.

Noastre sarcina principală Acum - pentru a înțelege cum ar trebui să funcționeze noul aspect al grilei blocurilor în cadrul designului adaptiv.

Iată câteva exemple de la ce să vă așteptați (presupunând că aveți un browser care acceptă CSS Grid, cum ar fi Firefox Nightly, Safari Technical Preview sau Chrome Canary):

Laborator de amenajare experimentală Jen Simmons

Acordați atenție stilului blocului principal - o referire clară la istoria designului grafic.

Grilă după exemplu

Puteți vedea mai multe exemple pe site.

6. Mai multe SVG

SVG (grafică vectorială scalabilă) grafica vectoriala) are mai multe beneficii pentru designeri și dezvoltatori web decât formatele de imagine tradiționale, cum ar fi JPG, PNG sau GIF.

Principalele avantaje ale SVG sunt descrise chiar în numele formatului - scalabilitate și vector. Spre deosebire de formatele bazate pe raster și pixeli, imaginile SVG sunt formate din vectori - descrieri matematice ale formei unui obiect. Aceasta înseamnă că SVG este independent de rezoluție, iar imaginile în acest format vor arăta grozav pe orice ecran și dispozitiv. Nu este nevoie să vă faceți griji că imaginile sunt neclare pe retină.

Dar asta nu este tot. SVG este, de asemenea, renumit pentru că nu necesită trimiterea solicitărilor HTTP. Dacă ați verificat vreodată viteza de încărcare a site-ului dvs. web, este posibil să fi observat că aceste solicitări HTTP pot încetini cu adevărat site-ul dvs. Nu există o astfel de problemă cu SVG.

7. Instrumente pentru proiectarea receptivă bazată pe reguli

Design receptiv a schimbat complet modul în care privim aplicațiile web și cum să le creăm.

Dar, în mod ciudat, principiul de funcționare al programelor de proiectare nu s-a schimbat deloc. Cele mai multe dintre aceste instrumente funcționează astfel: trebuie să creați o pagină similară din nou și din nou diverse dispozitive si permisiuni. Într-o industrie care necesită generare rapidă de idei, dezvoltare rapidă și pornire rapidă, o astfel de pierdere de timp este pur și simplu inacceptabilă.

Un nou val de instrumente de proiectare (cum ar fi Figma) este de așteptat să se bazeze pe „reguli” care ajustează aspectul site-urilor pe diverse ecraneși dispozitive, reducând astfel numărul de acțiuni repetate ale designerului. Astfel de instrumente se bazează pe relațiile spațiale ale elementelor și, pe măsură ce schimbăm dimensiunea ecranului sau dispozitivul, ele se străduiesc să mențină aceste relații prin modificarea dimensiunilor elementelor și a umpluturii dintre ele.

Apropo, astăzi există instrumente similare pentru aspectul site-ului web nu numai pentru designeri, ci și pentru utilizatorii obișnuiți. De exemplu, TruVisibility.com - platforma adaptează designul creat după anumite reguli, conform cărora aspectul și dimensiunile elementelor sunt ajustate la dimensiunea ecranului. Tot ce rămâne este să faceți câteva ajustări pentru a vă asigura că pagina web arată așa cum ar trebui pe dispozitive. Utilizatorul nu trebuie să recreeze versiunea pentru dispozitive mobile și asta îi economisește mult timp.

Tendințele de design pentru 2017 conform lui Ryan Morrison, designer grafic senior.

8. Mai multe culori luminoase

Când era minimalismului și brutalismului a început în designul web în 2016, designerii au încercat să adauge mai multă personalitate muncii lor fără a depăși stilurile la modă. Și există cel puțin câteva cazuri în care culorile strălucitoare și îndrăznețe au fost folosite cu mare succes.

Aruncă o privire la noul site Asana cu o pată de culoare:

Pictogramă nouă Aplicații Instagram a primit multe critici, dar această reproiectare a reîmprospătat, fără îndoială, marca:

Tot ceea ce Stripe nu necesită o vizualizare separată:

După cum puteți vedea, nu sunt doar culori strălucitoare și îndrăznețe. Degradeurile revin și ele în stil, amestecând și estompând culorile în nuanțe care amintesc de cerul de la amiază sau de un apus de soare strălucitor. Este o renaștere a naturalismului cu culori strălucitoare și degrade îndrăzneți și personal aștept cu nerăbdare să văd mai multe lucrări similareîn 2017.

Deși, poate merită să reduceți puțin luminozitatea? Te urmărim, Asana.

9. Mai mult accent pe animație

Elementele animate au fost redate de mult timp rol cheieîn interfața web, iar această tendință va continua în 2017. De fapt, atâta timp cât designerii au acces la instrumente pentru a dezvolta animații convingătoare, vom vedea că aceste efecte devin mai vizibile și mai sofisticate.

Acest subiect este deosebit de important deoarece crearea animației devine din ce în ce mai ușoară în fiecare zi. La Conferința Design & Content din 2016, guru al animației Val Head a subliniat că atunci când proiectează elemente animate, designerii ar trebui să țină cont de obiectivele și nevoile mărcii pentru a obține efectul pe care creatorii de conținut se așteaptă. Dacă acest sfat este respectat, animația va îndeplini sarcini care sunt semnificative pentru brand și nu doar să-i provoace o migrenă utilizatorului.

10. Marcaje neobișnuite

2016, ca și anii precedenți, este renumit pentru discuțiile nesfârșite conform cărora designul web fie moare, fie își pierde spiritul.

Cei care încearcă să convingă pe toată lumea că designul web a murit, exagerează în mod clar. Mulți continuă să caute modalități de a prezenta conținutul utilizatorilor în moduri noi. Una dintre cele mai tentante moduri este de a sparge sistemul și de a ignora aspectul obișnuit al grilei dictat de regulile designului responsive.

Metoda de marcare „ruptă” implică elemente care trec dincolo de grila aliniată meticulos. Astfel de tehnici pot părea uneori chiar neplăcute pentru ochi. De exemplu:

Texte și imagini care se ciocnesc unele de altele:

Texte și imagini împrăștiate (aparent) aleatoriu pe pagină:

Aceasta a fost prima parte a traducerii articolului „18 tendințe de design web în 2017”. Sunteți de acord cu opiniile experților Webflow? Ce fel de web design crezi că va fi la modă în anul viitor?

Infografice vii despre căile de dezvoltare ale unui dezvoltator web modern și tehnologiile de care trebuie să învețe pentru a deveni front-end, back-end sau devops în 2017.

Introducere

Sarcina principală este de a determina profilul dezvoltării ulterioare. Încercați, studiați, încercați să înțelegeți ce este mai aproape de dvs. - frontend, backend, devops sau poate fullstack?

Calea Frontenderului

În orice domeniu al dezvoltării web, stăpânirea elementelor de bază este în prim plan. Pentru un începător, evident, sarcina numărul unu este să învețe HTML, CSS și JavaScript (+jQuery). Pe măsură ce vă dezvoltați abilitățile de bază și vă extindeți experiența teoretică, puteți trece la lucruri mai specializate.

Există multe cadre și biblioteci JavaScript care fac viața mult mai ușoară unui dezvoltator web. Printre acestea, puteți alege cel mai convenabil și potrivit pentru un anumit programator. manager de pachete, un instrument de testare și construire, un manager de activități și multe altele pentru fiecare gust și gamă de nevoi.

Astăzi, domeniul dezvoltării front-end se dezvoltă ca nimeni altul. Cadrele și instrumentele apar și se îmbunătățesc în mod constant, se nasc noi metodologii și modele, însăși ideologia frontend-ului a depășit de mult limitele layout-ului. Prin urmare, una dintre sarcinile principale ale unui dezvoltator web este să rămână pe linia de plutire, să fie conștient tendințe moderne dezvoltarea acestei zone.

Calea Backender

Dezvoltarea backend-ului a cunoscut, de asemenea, schimbări mari în ultimii ani. PHP nu a mai fost de multă vreme un monopolist pe piața tehnologiei backend, deși este ultima versiune, PHP 7 este mai mult decât demn de atenție. Node.js, Ruby și Go au apărut în scenă. Tehnologii moderne fac posibilă dezvoltarea unei logici de afaceri complexe și obținerea unor performanțe ridicate.

Modul devops

Munca Devops este una foarte responsabilă. Aplicație web modernă este un organism imens și complex, iar sarcina devops-ului este să-și mențină buna funcționare. Monitorizarea proceselor, lucrul în cloud, containerele web, integrarea continuă - acestea sunt doar o mică parte din tehnologia web care permite unei aplicații web să existe în ansamblu și să își îndeplinească funcțiile.

Un bun proprietar de site lucrează în mod constant pentru a-l îmbunătăți. În această activitate, el trebuie să se bazeze nu numai pe analiza audienței sale, pe datele de analiză web și pe recenziile clienților, ci și pe tendințele din industrie. Pentru că există multe lucruri utile în tendințe care pot îmbunătăți interacțiunea clienților cu site-ul. Dar tendințele trebuie aplicate cu atenție și înțelepciune. Selectați numai cele care sunt potrivite pentru soluție problemele actuale site-ul web și pentru dezvoltarea afacerii.

Prin urmare, în acest articol, nu doar am furnizat o listă cu tendințele de design web, dar am făcut și recomandări pentru aplicarea acestor tendințe pe site-ul dvs.

1. Utilizabilitatea va deveni o marfă.

Un exemplu de îmbunătățire a gradului de utilizare a site-ului http://www.telemirspb.ru/

Urmând principii de bază gradul de utilizare ajută site-urile să atragă mai multi clientiși reduceți numărul de apeluri pentru asistență. Din ce în ce mai multe companii oferă audituri ale site-ului web, deoarece există o cerere pentru găsirea erorilor pe site. Obiceiul de a face cumpărături și a comanda servicii prin internet crește cererea de site-uri convenabile.

Din păcate, mulți își creează site-uri web și apoi vin la noi cu rușinea creată. Este important să vă gândiți în avans la procesul de interacțiune cu resursa: ce secțiuni vor fi în prima versiune și care vor fi adăugate mai târziu. Este imposibil de prevăzut totul, dar navigarea preplanificată va economisi timp și bani pentru îmbunătățiri în viitor. De asemenea, alegeți cu atenție motorul pentru site-ul dvs. Nu ar trebui să alegeți un motor de blog (de exemplu, WordPress) dacă intenționați să vindeți ceva pe site sau să creați pagini de produse/servicii.

Dacă lucrezi într-un mediu extrem de competitiv, înțelegi cât de important este să te diferențiezi de concurenții tăi.

De aceea, atunci când plănuiți să creați un site web sau să îmbunătățiți unul existent, trebuie mai întâi să priviți interfața prin ochii clientului și să încercați să preziceți problemele pe care utilizatorul le poate întâmpina.

2. Textele lungi vor dispărea

Să fim sinceri cu noi înșine: texte lungi nimeni nu citește. Excepțiile includ cărțile și articolele. Când un client dorește să comande un serviciu sau un produs, este interesat de el informatii specifice: preț, principalele caracteristici ale conținutului produsului/serviciului, condițiile de livrare/timpul de îndeplinire. Informațiile succinte și structurate economisesc timp clientului și îl încurajează să comande. Mai mult, dacă clientul compară mai multe site-uri, atunci cea mai concisă descriere va câștiga cu siguranță.

De asemenea, textele lungi sunt incomod de vizualizat de pe dispozitivele mobile, pe care aproape toată lumea le folosește. Potrivit statisticilor mondiale, în octombrie 2016 numărul utilizatorii de telefonie mobilă sunt mai mult decât cele desktop.

Priviți audiența site-ului dvs., de exemplu, în Yandex.Metrica în raportul Sumar → Tip de dispozitiv și vedeți ce procent de clienți provin de pe telefoane și tablete. Ține cont de acest public atunci când postezi conținut.

Adăugați animație pe site-ul dvs. cu înțelepciune. Ar trebui să fie cât mai precis și rapid posibil. Mărirea unei imagini atunci când dați clic pe ea, indicatorii de progres în așteptarea rezultatelor pe site, o fereastră pop-up care apare la adăugarea unui articol în coș, schimbarea culorii butoanelor și a linkurilor după clic sunt cele mai comune microinteracțiuni care cu siguranță vor ajutați-vă utilizatorii.

6. Utilizarea cinemagraphs sau a imaginilor „în direct”.

Videoclipurile cu ecran lat au fost înlocuite cu cinemagraphs - imagini în care se mișcă un singur element. Cel mai bine este să le plasați pe primul ecran al paginii pentru a atrage atenția utilizatorului și a crea un efect wow.

Dacă alegeți un astfel de gif care să se potrivească cu tema site-ului, va arăta foarte tare. De exemplu, poți să faci o fotografie live a produsului tău principal și să o postezi Pagina de start sau pe bannere cu promotii.

În Rusia, cinemagrafele sunt utilizate în principal în rețelele sociale, așa că dăm exemple de site-uri străine - un site pentru protecția apei și închirierea de mașini.

7. Evitați fotografiile de stoc „tipice”.

Sperăm că tot felul de oameni mici, fete în căști și fotografii cu familii zâmbitoare vor dispărea de pe site-uri. Exemplu de imagini stoc:

9. Mobile First

Esența această abordare Ideea este că atunci când proiectați un site web, trebuie să vă gândiți la modul în care va fi afișat pe dispozitivele mobile. Au fost scrise multe articole și cărți pe această temă, de exemplu, vă recomandăm să citiți „Mobile First” de Luke Wrobleski.

După cum sa menționat mai sus (a se vedea punctul 2), traficul mobil este în creștere și există chiar și utilizatori care nu au experiență desktop. De aceea, pentru a nu pierde clienți, vă recomandăm să vă optimizați site-urile pentru dispozitive mobile.

Articolul enumeră doar cele mai elementare tendințe. Să vedem ce ne așteaptă anul acesta. Dacă observați și câteva tendințe și sunteți sigur că se vor dezvolta, scrieți în comentarii, vom discuta cu plăcere. Și dacă te îndoiești că designul site-ului tău web este relevant sau ai citit articolul și ai găsit elemente învechite- acordați atenție serviciului

Nu este un secret pentru nimeni că industria IT se dezvoltă vertiginos. Noi tehnologii, noi hardware, noi proiecte. Toate acestea nu au cruțat nici dezvoltarea web. În prezent, site-urile sunt departe de a fi aceleași cu cel puțin câțiva ani în urmă. S-au schimbat destul de multe lucruri, iar acum puțin mai multe detalii.

Folosind un fundal video

S-ar părea că fundalul a fost folosit de mult timp. Dar a devenit un fragment cu adevărat semnificativ din interiorul site-ului abia în acest an. Pentru mulți utilizatori creează un adevărat efect „wow”.
Un exemplu de implementare bună a unui fundal video - http://globalmonitoring.ru/

Efect de paralaxă

Un alt concept aparent prosper, dar abia recent a început să fie aplicat peste tot. Dacă cineva nu știe, aceasta este o modalitate de a adăuga straturi volumetrice unui site web și de a le face să se miște după cum aveți nevoie. Cu alte cuvinte, adăugați mai multă interactivitate.
Exemplu - https://www.grabandgo.pt/

JavaScript și biblioteci

Apropo de interactivitate. Ați văzut cel puțin un site web fără js în 2017? Eu nu. Și nici măcar nu este vorba despre js în sine, ci despre bibliotecile sale. Da, jQuery este un lucru grozav, dar toți dezvoltatorii front-end de top au trecut deja la react.js, angular.js, vue.js și alte biblioteci. O să învăț eu unul dintre ele în viitor (probabil vue.js).
Unde ai vrut să mergi fără js? Toate aceste elemente de săritură, întreruperi, tranziții netedeși așa mai departe - totul este convenabil de implementat prin scripturi.

Adaptabilitate

Ceva despre care merită să vorbim separat și cu siguranță vom vorbi despre asta. Designul adaptiv al site-ului web nu este nici măcar o tendință în 2017. Aceasta este o tendință generală ultimii ani. Ca utilizator al unuia dintre schimburile independente Runet, văd zilnic solicitări precum: „Creează un site web adaptiv” sau „Avem deja un site web, avem nevoie de unul adaptiv” și așa mai departe. Oamenii înțeleg că acum omenirea petrece mult mai mult timp pe smartphone-uri decât pe un computer, așa că crearea unui site web adaptiv (cu principiul Mobile First) este o componentă foarte importantă a creării unui site web în principiu.

roboții

Probabil cel mai mult punct interesant din acest articol - roboți. Acum pagini simple putini oameni au nevoie de ea. Oferă tuturor site-ului interactivitate și viață. Un bot este un fel de asistent care este deja utilizat în mod activ. Cele mai multe exemple simple— Boții VKontakte și Telegram care vă trimit ei înșiși orice informație la cerere sau fără. Acest lucru este foarte convenabil pentru administratorii comunității în care operează botul. Totul este rapid, frumos și automatizat.

Ryan McCready, editor de conținut pentru serviciul de infografică Venngage, vorbește despre tendințele în lume în acest moment. design grafic, și ce tehnici au trebuit să fie abandonate anul acesta.

Culori indraznete si vibrante

În ultimii câțiva ani, mulți lideri tehnologici au folosit culori dezactivate și ușor de citit. Așa că au încercat să creeze o schemă de design foarte clară și să arate că viitorul elegant și funcțional, care se arată de obicei în filmele științifico-fantastice, a sosit deja.

Această metodă a ajutat compania să treacă la noua etapa dezvoltare și unește toate aplicațiile sub o singură culoare. Ca și în cazul Spotify, această utilizare îndrăzneață a culorilor strălucitoare a făcut marca să iasă în evidență.

Moda pentru cei îndrăzneți și culori luminoase Designul urmează principiile Google Material Design. Compania a ales plat, raționalizat și design intuitiv cu adăugarea de „culori neașteptate și energice, precum și fonturi și imagini funcționale și plăcute pentru ochi”.

În general, mulți tendinte actuale 2017 a apărut sub influența principiilor Design material Google.

Le-am folosit și pentru a realiza această imagine publicitară. e-carte. Drept urmare, imaginea a devenit incredibil de populară.

Dacă nu poți alege cele mai bune culori pentru designul dvs., citiți mai departe pentru câteva exemple grozave de palete de culori. Și nu vă fie teamă să folosiți culori care contrastează unele cu altele.

Tipare aldine

Fontul bold atrage atenția cititorilor. Involuntar acordați atenție inscripțiilor mari și atrăgătoare.

Exemplul meu preferat este Wired. Folosește diferite fonturi pentru a evidenția anumite titluri și pentru a menține o ordine ierarhică a informațiilor pe pagină.

Aruncă o privire:

Altul bun exemplu folosind fonturi captivante - HubSpot. Textul este în prim plan și susținut de grafică:

HubSpot înțelege că în fiecare an timpul necesar pentru a absorbi informații dintr-un tweet tinde să scadă la zero. Prin urmare, pentru a atrage atenția cititorului, folosesc inscripții scurte și succinte cu litere aldine.

În plus, acum tot mai mulți oameni navighează pe internet cu telefoane mobile. Datorită ecranelor de înaltă definiție, există o nevoie din ce în ce mai mare de a folosi fonturi aldine. Deci, pentru a reține cititorii, trebuie să vă livrați conținutul în modul corect.

Buffer evidențiază titluri pe parcursul întregului articol, nu doar la început, făcând articolele mai ușor de citit pe toate dispozitivele. Recomand să folosiți această abordare pentru articole lungi - în acest fel veți ajuta cititorii să le navigheze.

Am aplicat această metodă la crearea acestui infografic. Combinaţie îndrăzneţși soluțiile de culoare interesante atrag atenția:

Fonturi din Google Fonts

eu folosesc Fonturi Google de foarte mult timp, pentru că sunt universale. Dacă trebuie să vin cu un design pentru o publicație online și apoi să-l adaug la o prezentare, sunt încrezător că toate fonturile vor funcționa bine împreună. Toate arată grozav pe orice platformă de blogging sau site web.

Apropo, toate cele 810 fonturi sunt absolut gratuite! Da, oamenilor le plac lucrurile gratuite. De asemenea, le plac lucrurile care sunt foarte ușor de utilizat. Iată un exemplu de combinare a mai multor fonturi populare de la Google:

Pe site-ul nostru folosim fonturile Roboto și Open Sans.

Fotografii originale

În fiecare an, cantitatea de conținut crește, la fel și nevoia imagini de înaltă calitate. Pentru ca fotografiile să reziste pe termen lung, autorii încearcă să le facă cât mai universale.

Există o singură problemă: cele mai bune imagini generice tind să devină învechite în timp. Dacă urmăriți știrile din domeniul tehnologiei și marketingului, atunci probabil că sunteți familiarizat cu această fotografie:

Este folosit în paginile de destinație, bloguri și chiar în postările de pe Instagram. Sincer să fiu, l-am luat chiar eu pentru un site la care am lucrat acum câțiva ani. Datorită popularității unor astfel de imagini stoc, originalitatea conținutului grafic a scăzut brusc.

Iar nevoia de a folosi fotografii clare și perfecte nu a făcut decât să înrăutățească situația.

Când un cititor vede aceeași poză pentru a suta oară, el crede că autorul articolului nu a încercat să fie măcar puțin original. Deci de ce să citești măcar un astfel de articol?

Acesta este motivul pentru care ar trebui să utilizați imagini originale. Nu mai faceți fotografii populare, începeți să vă faceți propriile fotografii.

Sunt sigur că toată lumea din echipa ta are un telefon cu cameră. De ce nu le folosești? Faceți fotografii cu biroul sau logo-ul dvs. și folosiți acele fotografii.

Află dacă printre colegii tăi există un fotograf aspirant. Oferă-i câteva zile să închirieze un birou - și vei avea suficiente fotografii pentru un an întreg!

Când am creat noul nostru site web, am făcut fotografii cu angajații noștri și am fost foarte mulțumiți de rezultat.

Imagini și pictograme desenate manual

Nu doar fotografiile trebuie să fie originale, ci și icoanele și desenele. Unele branduri și-au dat deja seama de acest lucru și încearcă să iasă în evidență din mulțime în acest fel. Această abordare adaugă un element personal și distractiv designului.

Unii spun că tendința pare neprofesională și copilărească, dar este totuși cu siguranță atrăgătoare. La fel ca majoritatea tendințelor din 2017, acesta acționează ca o alternativă la designul curat steril din ultimii ani.

Dropbox folosește ilustrații desenate manual. Au devenit parte a mărcii companiei și l-au făcut recunoscut.

Astfel de ilustrații creează o stare de spirit relaxată și încântă copilul care trăiește în sufletul fiecăruia dintre noi. Ele fac ca produsul să pară mai accesibil. Sunt deosebit de eficiente la marile companii tehnologice precum Dropbox.

Altul bun exemplu Această abordare este compania de saltele Casper. Aproape întregul ei site este format din desene desenate manual. Iată una dintre ele:

Tendința a fost preluată și de serviciul MailChimp. În raportul din 2016, el arată și desene similare.

Moz, o companie care dezvoltă software de marketing, inserează ilustrații în antetul articolelor:

Uneori, dragostea noastră pentru desene se manifestă în alte proiecte:

Întoarcerea la rădăcinile minimalismului

Dacă ți se cere să explici unui străin, ce este minimalismul, probabil ai raspunde ca este atunci cand trebuie sa renunti la decorativitate in favoarea functionalitatii. Cel mai probabil, te vei gândi imediat la neutru paleta de culori, format din nuante de negru, gri si alb.

Se pare că adevăratul spirit al minimalismului a fost înlocuit de folosirea alb-negru plictisitor scheme de culori. Cred că asta a fost făcut intenționat pentru a compensa dimensiuni mici ecran și putere redusă a dispozitivelor mobile.

Dar în 2017 totul se va schimba. Minimalismul va reveni în adevărata sa formă. Ceea ce înseamnă că va fi mai multă culoare. în zilele noastre dispozitive mobile Sunt la fel de puternice ca computerele, iar unele chiar au ecrane mai bune.

Exemplul meu preferat de design minimalist este logo-ul platformei Medium. Creatorii săi au reușit să combine mai multe culori diferite și să mențină în continuare un stil minimalist.

Google a realizat o altă reproiectare a logo-ului în favoarea minimalismului și a unei combinații de culori strălucitoare. Este de remarcat faptul că această companie a servit drept catalizator pentru apariția multor noi tendințe. Designerii au tăiat ușor stilul fontului și au prezentat aspect nou un logo în formă de G care îmi place foarte mult.

Spiritul de minimalism se simte în toate acestea, dar presa nu a scris despre asta. Oamenii au uitat ce este adevăratul minimalism. Logo-ul nu era incolor și realizat într-o singură formă, așa că nimeni nu s-a gândit că este realizat într-un stil minimalist.

Noul logo a fost luminos și atrăgător - păstrând în același timp un aspect minimalist. După reproiectare, oamenii din jurul lor au început să imite Google, așa cum făcuseră înainte în alte aspecte.

Noi înșine am început să folosim un stil mai minimalist pentru designul blogurilor noastre.

Designul simplu al imaginii transmite cu ușurință informațiile necesare.

Folosind GIF-uri

Toată lumea (ei bine, aproape toată lumea) iubește GIF-urile. Ne ajută în conversație pentru că uneori pot transmite emoții mai bine decât textul.

În plus, pentru a le juca nu ai nevoie de niciunul programe speciale. GIF-urile sunt de obicei mici și pot fi încorporate aproape oriunde.

Sunt mai bune decât videoclipurile și imaginile, mai ales atunci când doriți să reduceți timpul de încărcare a paginii și traficul. Cred că datorită versatilității lor, GIF-urile vor deveni și mai multe element util proiecta.

Îmi place foarte mult să pun gif-uri în antetul unui articol. În loc să puneți o imagine de stoc plictisitoare acolo, luați câteva minute și faceți un GIF ca acesta.

Pentru a face acest lucru, nu trebuie să depui eforturi creative deosebite, dar astfel vei atrage cu siguranță atenția asupra postării tale din rețelele sociale. Iată un alt exemplu bun de utilizare a GIF-urilor în antetul unui articol.

Imagini în două culori

Aceasta este o combinație de două culori, de obicei foarte luminoase sau contrastante, într-o singură imagine. Va trebui să folosiți niște abilități de design pentru a crea aceste imagini, dar merită.

Doar un designer foarte priceput poate realiza imagini atât de frumoase în două culori. Sunt sigur că nu pot crea așa ceva, dar asta nu înseamnă că ar trebui să tăiați această tehnică din planurile dvs. de design.