Velký přehled trendů roku 2023 v grafice a webdesignu

28. 3. 2023
Autor: Jan Beneš

S novým rokem přicházejí i nové trendy v oblasti grafického designu a webdesignu. Je sice pravdou, že mnoho stylů, trendů se cyklicky opakuje a můžeme říci: „Vše už tu jednou bylo“. Existují ale i výjimky dané technologickým pokrokem jako umělou inteligencí generované obrázky nebo pokročilé 3D modely. Doba se mění a s ní technologie i my. Co přinese rok 2023? Přinášíme vám osm trendů v designu a sedm ve webdesignu. Inspirujte se.

Autorem je Jan Beneš, art director agentury Beneš & Michl

jan-benes-1080o

Obsah článku:

Trendy v grafickém designu pro rok 2023

  1. Serifová písma
  2. Ruční ilustrace
  3. Bauhaus
  4. Memphis (i 3D)
  5. Surrealismus
  6. Brutalismus
  7. Generované AI
  8. Retro

Trendy ve webovém designu pro rok 2023

  1. Maximalismus (Brutalismus/Anti-design)
  2. Překrývající text (součást brutalismu)
  3. Typografický layout
  4. Parallax zoom
  5. DIY koláže
  6. 3D
  7. Retro

Trendy v grafickém designu pro rok 2023

1. Serifová písma

Renesanci serifových písem jsme mohli pozorovat již během minulého roku a v novém roce bude tento trend pokračovat. Zajímavé a nevšední fonty volí designéři čím dál častěji, aby dodali své tvorbě osobitý ráz a dotek ruční práce. Ta se promítá i do dalších trendů, jakým je třeba webdesign. Nebojte se tedy oživit v novém roce svou tvorbu o nějaké nové, neotřelé a nádherné serifové písmo.

serifova-pisma-nakia_studio

serifova-pisma-glitten

serifova-pisma-fitzgerald

serifova-pisma-simple_candy_font

serifova-pisma-welth_catritz

serifova-pisma-rushtick

2. Ruční ilustrace

Když už zmiňujeme ruční práci u fontů, je třeba upozornit i na rostoucí trend ručních ilustrací. Díky digitalizaci a počítačům dokážeme vytvořit přesné, mnohdy až technicky strojové futuristické ilustrace, které ovšem postrádají krásu nedokonalosti, jež k lidskému životu patří. Proto je zde hlad po ilustracích polidšťujících digitální tvorbu. Dalším důvodem jejich rostoucí obliby je autentický a rozpoznatelný ráz, který vizuálům a grafice dodávají. Jedinečná a zapamatovatelná chce být přece každá značka.

rucni-ilustrace-mascot

rucni-ilustrace-fox

rucni-ilustrace-girl_power

rucni-ilustrace-root

3. Bauhaus

V kontrastu ručních skic nebo ručních serifových písem nastupuje další z trendů tohoto roku – design v duchu německé školy Bauhaus, který využívá jednoduché geometrické tvary Architekt Walter Gropius, zakladatel této školy sloučil všechny umělecké obory, jakými jsou malířství, architektura nebo sochařství do jednotného přístupu, a to do kombinace umění jednotlivce s masovou produkcí a funkcí. Tato škola zanikla v roce 1933, její odkaz ale žije dál, a my na něj můžeme letos navázat.

bauhaus-rbgv

bauhaus-geometry

bauhaus-amapola

bauhaus-poster_bauhaus

4. Memphis (i 3D)

Pokud byl Bauhaus klíčovým prvkem modernismu, Memphis je zase typickým představitelem postmodernismu. Skupina Memphis, známá jako Memphis Milano, sdružovala italské designéry a architekty, kteří působili pouze v 80. letech 20. století. Navrhovali postmoderní designový nábytek a další umělecké, užité předměty. V současnosti se jejich rukopis opět vrací do módy a my můžeme pracovat s geometrickými motivy, zářivými barvami nebo neotřelými abstraktními vzory. Zcela novým trendem je rozšíření trendu Memphis o jednu dimenzi na trojrozměrné motivy.

memphis-3d-summer_vibes_2

memphis-3d-ctp

memphis-3d-wade_and_leta

memphis-3d-memphis

memphis-3d-philiplueck

memphis-3d-adobestock_276604301

memphis-3d-summer_vibes

5. Surrealismus

Všichni určitě znají ikonické obrazy od nejznámějšího surrealistického malíře Salvadora Dalího. Nadpřirozené, nadrealistické a fantaskní ztvárnění reálných předmětů. S tímto nadpřirozeným světem se budeme v letošním roce setkávat v designu. Je zde obecná snaha oprostit se od reality a promítnout do uměleckých děl realitu snovou. Nečekejte však masové rozšíření, použití surrealistického designu bude spíše uměleckou, a do jisté míry okrajovou záležitostí.

surealismus-blaster

surealismus-mental_health

surealismus-unleash

surealismus-dogeatdog

6. Brutalismus

Brutalismus v digitální tvorbě navazuje na své kořeny v architektuře 50. a 60. let. Drsný styl se vrací v moderním pojetí. Nepracuje pouze s jednou barvou, dochází k naprostému opaku, a to využití celé škály výrazných neonových barev. Ikonická je pro něj práce s typografií ve velmi tučných řezech. Nezapomínejme tento styl, v současnosti i následujících letech bude mít v designu a webdesignu své neoddiskutovatelné místo.

brutalismus-nike

brutalismus-different

brutalismus-nikita

brutalismus-young_guns

brutalismus-poster

brutalismus-nokia

brutalismus-anti-design

7. Generované AI (umělou inteligencí)

Příchod neuronových sítí a generování obrazů „umělou inteligencí“ (správněji spíše strojovým učením) nám poskytuje zcela nový zdroj inspirace pro digitální tvorbu. Díky projektům jako DALL-E a jemu podobným, lze na základě popisu nechat učicí model vygenerovat takřka cokoliv, co nás napadne. Limity představuje pouze naše fantazie. Výhodou, pro někoho nevýhodou, může být, že jde o proud nový bez historického odkazu. Na druhou stranu lze generátoru popsat, v jakém uměleckém stylu má obraz vygenerovat. Užijte si ty možnosti.

generovane-umela-inteligence-sneakers

generovane-umela-inteligence-swirling_clouds

generovane-umela-inteligence-macro

generovane-umela-inteligence-nike

generovane-umela-inteligence-AdobeStock_547693692

8. Retro

Retro je návratem ke klasice. V každé éře se najde skupina lidí, která vnímá určité období jako retro. Co je retro pro jednoho, nemusí být retro pro druhého. Jak bylo zmíněno úvodem, mnoho stylů a trendů se cyklicky opakuje a vše už tu jednou bylo. Dalším trendem nadcházejícího roku tedy není nic jiného než právě návrat retro stylu. Jak moc velké retro to bude, záleží na době, z níž si pro design vypůjčíme typické a charakteristické znaky. Bude se jednat o 60., 80. nebo dokonce 90. léta minulého století? Čím se letos necháme inspirovat?

retro-aiga

retro-basf

retro-aguila

retro-nike

retro-nasa

retro-berg

Trendy ve webdesignu pro rok 2023

U webových trendů jsme ve výhodě, že jsou jednotlivé ukázky interaktivní a není tedy potřeba je dlouze popisovat nebo představovat. U každého z nich v krátkosti popíšeme, co je pro něj typické nebo jaký je jeho původ či záměr.

  1. Maximalismus (Brutalismus/Anti-design)
  2. Překrývající text (součást brutalismu)
  3. Typografický layout
  4. Parallax zoom
  5. DIY koláže
  6. 3D
  7. Retro

1. Maximalismus (Brutalismus/Anti-design)

Maximalismus se snaží narušit zaběhlé konvence. Jde v podstatě o reakce na dlouhodobou monotónnost a stereotyp. Grafický design pracuje s prvky brutalismu, o nichž jsme se zmiňovali výše.. U webu je třeba ještě doplnit, že stejně typické je použití tučné typografie, výrazných barev, ale zejména nedodržování zaběhlých layoutů.

webdesign-maximalismus-brutalismus-hotburo.com

https://www.hotburo.com/

webdesign-maximalismus-brutalismus-luakabop.com

https://www.luakabop.com

webdesign-maximalismus-brutalismus-flutter.productions

https://flutter.productions

webdesign-maximalismus-brutalismus-spc.co

https://spc.co/

webdesign-maximalismus-brutalismus-kffein.com

https://kffein.com/404/

webdesign-maximalismus-brutalismus-pornweek.nz

https://www.pornweek.nz/

webdesign-maximalismus-brutalismus-studio-job.com

https://www.studio-job.com/

2. Překrývající text (součást brutalismu)

Zůstaňme u textu, respektive dominantní typografie, která tvoří základní vizuální prvek celého webu. Dominantní písmo, které je někdy zvětšené až na úkor samotné čitelnosti, překrývá ostatní prvky stránky. Jde o podstatu trendů, s níž se budeme v novém roce vídat čím dál častěji. Hodí se zejména pro umělecky zaměřené weby, ale své uplatnění najde i u zákazníků,i kteří se budou chtít od konkurence odlišit webem a být unikátní, zapamatovatelní.

webdesign-prekryvajici-text-brutilsmus-disrupt.ouiwill.com

http://disrupt.ouiwill.com/how-to-disrupt/

webdesign-prekryvajici-text-brutilsmus-looksgreat.studio

https://looksgreat.studio/cases

webdesign-prekryvajici-text-brutilsmus-reiter-friseur.at

https://www.reiter-friseur.at/

webdesign-prekryvajici-text-brutilsmus-mystaelectric.com

https://www.mystaelectric.com

webdesign-prekryvajici-text-brutilsmus-cdn.dribbble.com

https://dribbble.com/shots/16486988-GL-BRUTALISM-01

3. Typografický layout

Pokud bychom zašli ještě dále, můžeme použít samotný font, který bude definovat celkový layout, tedy rozložení webu. Minimalistické řešení je velmi elegantní a jednoduchý způsob, jak vytvořit netradiční vzhled webu.

webdesign-typograficky-layout-jazzfm.ro

https://jazzfm.ro/

webdesign-typograficky-layout-hugo-web.fr

https://hugo-web.fr/

webdesign-typograficky-layout-images-workbench.99static.com

https://99designs.com/profiles/chuha/designs/1997734

webdesign-typograficky-layout-whitelabelpr.com

https://whitelabelpr.com/

webdesign-typograficky-layout-orhalevi.art

https://www.orhalevi.art/

webdesign-typograficky-layout-ukrainianpower.io

https://www.ukrainianpower.io/

4. Parallax zoom

Další novinkou bude rolování stránkou nikoli ve směru dolů, ale přímo skrze samotnou stránku. Jde o způsob, který skvěle vypadá, jen je výpočetně náročnější na procesor a může se stát, že ne na všech zařízeních bude zcela plynulý. Proto je nezbytné tento efekt velmi důkladně optimalizovat.

webdesign-parallax-zoom-brutallyhuman.com

https://brutallyhuman.com/

webdesign-parallax-zoom-hle.io

https://hle.io/

webdesign-parallax-zoom-shortiesusa.com

https://shortiesusa.com/

webdesign-parallax-zoom-youtube.com

https://www.youtube.com/watch?v=-2jRjBL8BsA

webdesign-parallax-zoom-wlt.design

https://wlt.design/

webdesign-parallax-zoom-titan.viita-watches.com

https://titan.viita-watches.com/en/

5. DIY koláže

DIY v překladu z anglického jazyka znamená „udělej si sám“. Jak u ručních ilustrací, tak i v tomto směru webdesignu je stěžejní prvek ukázání lidskosti. Je žádoucí, aby z webu byla cítit přirozená lidská nedokonalost. Celý web proto působí jako koláž z výstřižků, obrázků, ilustrací či fotografií. Doplněním o ručně psaný font můžeme tento dojem ještě umocnit. Navíc lze použít pro jednotlivé objekty parallax efekt, tedy různé rychlosti rolování a vizuální atraktivitu webu tím ještě zvýšit.

webdesign-dyi-kolaze-capablemarketing.com.au

https://www.capablemarketing.com.au/

webdesign-dyi-kolaze-bryantcodes.art

https://bryantcodes.art/

webdesign-dyi-kolaze-sgpicks.page

https://www.sgpicks.page/

webdesign-dyi-kolaze-illegalpetes.com

https://www.illegalpetes.com/

webdesign-dyi-kolaze-apchronicles.audemarspiguet.com

https://apchronicles.audemarspiguet.com/en/edutainment/royal-oak-a-journey-through-time

webdesign-dyi-kolaze-margarita-raspopova.tilda.ws

https://margarita-raspopova.tilda.ws/

webdesign-dyi-kolaze-wearebreakfast.com

https://wearebreakfast.com/

6. 3D

Čím dál častěji se budeme setkávat s kompletním 3D světem v rámci celého webu, který je spojeným s nárustem výkonů u moderních počítačů. Interaktivní prezentace z osobní perspektivy je atraktivní a zábavná. Trend 3D se uplatní především u developerských projektů, kde si lze s pomocí 3D modelu udělat přesnou představu o výhledu nebo třeba o jednotlivých místnostech bytů.. Své zastoupení nalezne i v módním průmyslu nebo u startupů, tedy u všech, co se budou chtít odlišit.

webdesign-3D-my-gest.com

https://my-gest.com/

webdesign-3D-image_processing20200206-13915-lubpt7

https://dribbble.com/shots/9935851/attachments/1970260?mode=media

webdesign-3D-pikachu

https://www.behance.net/gallery/105898283/Pikachu-UI-Design-Concept

webdesign-3D-technology.panasonic.eu

https://technology.panasonic.eu/av-digital-world/corporate-education

webdesign-3D-puma-campaigns.com

https://www.puma-campaigns.com/velocity-2-aw/

webdesign-3D-abstract.wannathis.one

https://abstract.wannathis.one/

7. Retro

Stejně jako u grafického designu, také u webu se setkáme s návratem ke klasice. Lidé si jednodušeji oblíbí, co důvěrně znají. V tomto případě se však jedná spíše o snahu zaujmout, vystoupit z řady a být pro uživatele atraktivní.

webdesign-retro-styl-edukiwi

https://www.behance.net/gallery/155162147/Online-courses-Landing-page

webdesign-retro-styl-interactivedesign.io

https://interactivedesign.io/

webdesign-retro-styl-bonniehong.com

https://www.bonniehong.com/

webdesign-retro-styl-arzebrand.com

https://arzebrand.com/

webdesign-retro-styl-gretamusic.co

https://www.gretamusic.co/#home

webdesign-retro-styl-mrbeast.basement.studio

https://mrbeast.basement.studio/

webdesign-retro-styl-nataliavish.com

https://nataliavish.com/ 


Sdílejte článek

Líbí se vám obsah?

Zadejte svůj e-mail a budete vždy jako první informováni o novém článku.

Máme zkušenosti a znalosti.

Poptejte nás.

Zavolejte
+420 730 871 499

Napište
hello@b-m.cz