fbpx

Magic Bunny

Ghidul bunny în design grafic

capitolul 1

Skeuomorfism

Flat Design

Flat Design 2.0

Material Design 

Neumorfism

Fluent Design

Scurtă introducere

Te afli aici pentru că dorești:

  • să transmiți clienților mesajul tău
  • să iubească ceea ce oferi
  • și mai ales să-i faci să cumpere de la tine

Exact asta face Design-ul!

Ca oricare artă, design-ul are aceleași puteri psihologice: modelează realitatea pentru a transmite senzațiile, ideile, mesajul dorite. 

Dar totuși ce este Design-ul? Hai să te scot din confuzie!

Design-ul grafic este o ramură a artei. Când spunem artă ne gândim la tot: film, muzică, animație, sculptură, oratorie, poezie etc. Dar ce este arta mai precis? În mod științific este transpunerea realității în care trăim în 4 dimensiuni și modelarea /ștergerea uneia dintre acestea pentru a transmite senzațiile dorite.

Care 4 dimensiuni? Simplu: lungime(x), lățime(y), înălțime(z) și timp (în care este incorporat sunetul).

Dacă modelez de exemplu doar variabila timp, obțin filmul. Dacă șterg variabila timp obțin fotografia. Dacă modelez toate cele 4 variabile obțin animația. Dacă șterg variabila timp și modelez x,y și z, obținem Design-ul!

Pentru a transmite clienților senzațiile sau comportamentul de consum dorite, companiile creează reclame utilizând toate uneltele oferite de artă: film(reclame TV), animație (TV, YT, Site), muzică etc. Design-ul grafic este una dintre acestea.

Iar dacă design-ul înseamnă artă în 3 dimensiuni x, y și z, atunci probabil că ți-ai dat seama ce însumează: simboluri, elemente de branding, logo, site-uri, ilustrații etc. Practic tot ceea ce este artă (digitală mai nou) statică (pentru că am eliminat timpul ), inclusiv editare sau manipulare de imagini.

Dar știu că ești încă confuz referitor la aceste variabile: x, y, z . Fii fără griji! În acest ghid voi dezvălui toate secretele design-ului și ale acestor variabile prin exemple în imagini, pentru că puterea exemplului este cea mai bună. 

Și îți spun acum că regulile stabilite în modalitatea de modelare a acestor variabile a creat toate stilurile în design.

creatorul și elementul x

Acum te înterbi probabil:

  • doar 4 variabile și obții artă?
  • în film nu este vorba și de actori?
  • în design nu are un rol și artistul digital?
  • în muzică nu contează și vocea, instrumentul?

Sigur că da! Atunci când realitatea este modelată apare cel mai important element, pe care l-am denumit elementul X.

Acesta este o semivariabilă (pentru că nu este un element al realității) care însumează: creator, exercițiu, intuiție, imaginație, percepție, talent.

Dacă elementul X este slab, obținem o artă grotească, dar dacă X este foarte ridicat obținem artă WOW (capodoperă de artă).

Elementul X nu este o variabilă pentru că nu este vizibil real în lucrare. Dar este cel mai important și fără acesta nu poți obține artă, senzații, idei, meaj etc.

Ca să-ți răspund la întrebările de mai sus, Elementul X este reprezentat de actori și regizor în film, de animator în animație, de cântăreț și compozitor în muzică, de scriitor în poezie, de grafician în design.

Dar este  mai mult decât creator, pentru că nu încape vorbă că există situații când intuiția întrece exercițiul, imaginația este trădată de proiectul final etc. Se întâmplă ca pe parcursul unei lucrări, culorile să-i dicteze graficianului pașii, armonia să-i dicteze compozitorului următorul pasaj etc. Toate acestea însumează elementul X. 

Iar acum că ești lămurit cu ceea ce presupune design-ul și arta în general, ești pregătit să începi o mică inițiere în tainele acestora!

6 mari curente în design

Skeuomorfism

An apariție: 1890

Dezvoltator:  Nu se cunoaște.

Scurtă introducere: Încă din secole mai târzii se folosea acest stil pentru a exprima o realitate familiară oamenilor, astfel oferindu-le senzația de confort, comun, obișnuit. În tehnologie a apărut pentru a face marea trecere de la analog la touchscreen, fiind necesară educarea rapidă a utilizatorilor cu noua inovație și familiarizarea lor cu interfața mult diferită de cea cu butoane fizice.

Reguli de design: 

  • design de obiecte și materiale reale
  • eliminarea abstractului 
  • interzise formele geometrice simple

Plusuri:

  • oferă senzația de familiar pentru generațiia babyboomer
  • oferă senzația de clickable

Minusuri:

  • neînțeles pentru generația millennial
  • nu este responsive pe ecrane de diferite dimensiuni
  • nu redă senzația de digital

Vezi: Istoria stilului Skeuomorfic

Flat Design

An apariție: 2011  An implementare: 2013

Dezvoltator:  Microsoft și Apple

Scurtă introducere: A apărut ca o reacție la skeuomorfism datorită minusurilor lui, dealtfel foarte importante pentru noile decade și generații. Deși a fost început de către Matias Duarte văzând că Apple este prea skeuomorfic iar Microsoft arăta ca ,,o toaletă semnalizată în aeroport,, la acea vreme prin Windows 7, totuși Flat Designul a fost implementat de căter Aplle și Microsoft prin noul Windows 8 și IOS 7 deoarece și-au dat seama că skeuomorfismul nu mai prinde tinerii. Însă cei doi giganți s-au dus într-o arie exagerată căter Flat Design în timp ce Matias demarase propriul stil Google, Material Design-ul.

Reguli de design: 

  • simplitate în elemente și forme
  • minimalism
  • curat și ierarhie strictă a formelor, culorilor, textului.
  • eliminarea detaliilor
  • interzicerea umbrelor din skeuomorfism, dropshadow, glare effects.

Plusuri:

  • oferă senzația de digital
  • design-ul nu alterează mesajul
  • este responsive pentru ecrane de dimensiuni diferite
  • atrage noua generație

Minusuri:

  • nu oferă senzația de clickable
  • pierde utilizatorul în forme, butoane, notificări

Articol aparținând de Ghidul Bunny în Design. Detalii pe www.magicbunny.design

Material Design

An apariție: 2014

Dezvoltator:  Google

Scurtă introducere: A apărut ca o reacție la Flat Design și Skeuomorfism. Denumit și Quantum Paper. Datorită minusurilor Flat Design-ului și Skeuomorfismului, Google a dezvoltat propriul limbaj de design denumit Material Design. Cumva acesta este stilul Flat Design dar Google a gândit adăugarea unor reguli pentru a transforma stilul Flat într-unul clickable.

De la Material Design au apărut apoi încă 3 stiluri în design care au eliminat toate minusurile și au adus doar mai multe beneficii. Se pare că designerii au învățat lecțiile din problemele cu Flat Design și Skeuomorfism. Aceste stiluri sunt : Flat Design 2.0,  Neumorfism și Fluent Design.

Reguli de design: 

  • efecte de depth (lighting, shadows)
  • minimalism și flat
  • interzisă suprapunerea a două materiale
  • interzisă îndoirea materialelor și formelor
  • folosirea unui sitem de grid-layout precis
  • introducerea ierarhiei formelor și ale textului

Plusuri:

  • oferă senzația de digital
  • design-ul nu alterează mesajul
  • este responsive pentru ecrane de dimensiuni diferite
  • atrage noua generație
  • este clickable
  • utilizatorul știe ce poate fi accesat și ce nu

Minusuri:

  • primul stil fără minusuri

Vezi: Principii și reguli în Material Design

Vezi: Reguli și principii în Flat Design 2.0

Articol aparținând de Ghidul Bunny în Design. Detalii pe www.magicbunny.design

Neumorfism

An apariție: 19 decembrie 2019

Dezvoltator:  Apple

Creator: Alexander Plyuto

Scurtă introducere: A apărut ca o postare pe Dribbble. Creatorul Alexander a dorit să inoveze puțin stilul Skeuomorfic. După aceea un comentator i-a dat numele Neumorfism, iar vorbele și postarea au circulat puternic până la Apple. Acum Apple se pare că lucrează la implementarea acestui stil în noul său macOS Big Sur. Astfel știm cu toții că după lansarea acestui sistem de operare, toți designerii vor începe abordarea neumorfismului iar trendul va lua o amploare incredibilă.

Reguli de design: 

  • introducerea luminii sus și a umbrei jos pentru a reda senzația de contopit cu fundalul
  • minimalism și flat și skeuomorfic în același timp
  • interzisă suprapunerea a două materiale
  • interzisă îndoirea materialelor și formelor
  • folosirea unui sitem de grid-layout precis
  • introducerea ierarhiei formelor și ale textului
  • eliminarea umbrelor de tip dropshadow, pentru ca orice element și formă să se contopească cu fundalul, și să nu stea plasate deasupra acestuia ca în Flat Design.

Plusuri:

  • oferă senzația de digital
  • design-ul nu alterează mesajul
  • este responsive pentru ecrane de dimensiuni diferite
  • atrage noua generație
  • este clickable
  • utilizatorul știe ce poate fi accesat și ce nu

Minusuri:

  •  fără minusuri

Vezi: Prima creație neumorfică.

Vezi: Despre Neumorfism

Apelează la Magic Bunny pentru un design grafic așa cum dorești. Detalii pe www.magicbunny.design

Fluent Design ( cunoscut și ca Metro, Project Neon)

An apariție: 2017

Dezvoltator: Microsoft

Scurtă introducere: A fost creat pentru lansarea noului sistem de operare Windows 10 . Au fost create layouturi și siteme tip grid pentru noul stil de design, fiind de asemeni caracterizat de mișcare, lumină, umbră, adâncime și scalare.

Reguli de design: 

  • introducerea mișcării și animației ca elemente de interferență cu utilizatorul
  • minimalism 
  • interzisă suprapunerea a două materiale
  • interzisă îndoirea materialelor și formelor
  • folosirea unui sitem de grid-layout precis
  • introducerea ierarhiei formelor și ale textului

Plusuri:

  • oferă senzația de modern și științific
  • design-ul nu alterează mesajul
  • este responsive pentru ecrane de dimensiuni diferite
  • atrage noua generație
  • este clickable
  • utilizatorul știe ce poate fi accesat și ce nu
  • tranzițiile și mișcările atrag utilizatorul

Minusuri:

  •  fără minusuri

Vezi: Despre Fluent Design System

Articol aparținând de Ghidul Bunny în Design. Detalii pe www.magicbunny.design

Diferențe în imagini

Ghidul Bunny în Design

Skeuomorfism

Uz 7%

Flat Design

Uz 16%
Ghidul Bunny în Design

Flat Design 2.0

Uz 73%

Material Design 

Uz 76%
Ghidul Bunny în Design

Neumorfism

Uz 36%
Ghidul Bunny în Design

Fluent Design

Uz 48%

Ok. Până aici am discutat de cele 6 mari trenduri în design. Dece sunt mari? Simplu. Avem tehnologie-omul trebuie să se prindă repede cum funcționează. Fie că este vorba de un site, aplicație, sistem de operare, software, motor de căutare, design-ul face cam 70% din  sarcina de conectare a omului cu tehnologia. Și de ce sunt doar 6? Ei bine sunt mai multe (vezi capitolul 2) stiluri de design. Dar nu pot fi numite mari curente, pentru că ele s-au adaptat și așternut pe baza acestor 6 stiluri. Căci fără aceste 6 curente, cele 19 stiluri de design de bază nu ar fi existat.

artă digitală

1 poză - 15 stiluri diferite

Pentru satisfacția ta și pentru a înțelege mai bine diferențele dinter stiluri, am luat o poză de pe Istock și am trecut-o prin mai multe stiluri de design diferite.

magic bunny design grafic ghidul tău în design
ilustrație flat design 2.0
ilustrație flat lite
ilustrație lollycon flat
ilustrație alien flat
ilustrație vector comic
ilustrație vintage flat
ilustrație game concept
ilustrație retro comic magic bunny design
ilustrație punky magic bunny design

Mulțumesc pentru că ai sacrificat din timpul tău pentru acest Ghid! Nu uita, este un timp câștigat! Te sfătuiesc să vizualizezi mai departe ghidul pentru a da răspunsuri întrebărilor tale!

Faci un comentariu sau dai un răspuns?

Adresa ta de email nu va fi publicată.

Beneficiază de REDUCERE!
of 500 lei
of 1.000 lei