2016 μΉ λμμΈ νΈλ λ 11κ°μ§
μλ
νμΈμ, μμμΌμ
λλ€!
2016λ
μν΄κ° λ°μμ§λ λ²μ¨ 8μΌμ΄ μ§λ¬μ΅λλ€. λ§€λ
ν΄κ° κ±°λλ μλ‘ μλ‘μ΄ κΈ°μ κ³Ό νΈλ λλ λ λ§μ΄ μμμ Έ λμ€κ² μ§μ. νμ§λ§ μ΄λ² λ
μ μ§λ°°μ μΈ λμμΈ ν
λ§λ 2015λ
λ νλ°κΈ° λμμΈμ μ°μ₯μ μμ μμ΅λλ€.
μ€λ ν리λμ κ°μ΄λλ 2016λ
ν ν΄λ₯Ό μ±
μμ§ μΉ λμμΈ νΈλ λ 11μ μ μ€λΉνμ΅λλ€. κ° νλͺ©λ§λ€ ν΄λΉ μΉ λμμΈμ μ¬μ©ν μ¬μ΄νΈμ λ§ν¬λ₯Ό ν¨κ» μ€λΉνμΌλ, μ§μ μ¬μ΄νΈλ₯Ό λ°©λ¬Ένκ³ νμν΄λ³΄μκΈΈ λ°λλλ€. μκ°μ λΏλ§ μλλΌ μΈν°νμ΄μ€μ μΈ‘λ©΄μΌλ‘λ νΈλ λν μΉ λμμΈλ€μ κ²½νν μ μμ κ²μ
λλ€. 1. μμ§μ μΈ ν¨ν΄κ³Ό μ€ν¬λ‘€
Vertical Patterns and Scrolling
λͺ¨λ°μΌ νκ²½μμ μΈν°λ·μ μ μνλ μ¬μ©μμ λΉμ¨μ μ μ λμ΄λκ³ μμ΅λλ€. μ΄μ²λΌ μ μ°¨ 컀μ§λ λͺ¨λ°μΌ νκ²½μ λν κΈ°λλ μμ§μ μΈ νλ¦μ λμμΈμ μ ννκ² λ§λ€μμ§μ.
μλ
μ λ§ν΄λ μΉ λμμΈμ μμ΄μ μ€ν¬λ‘€μ μν μ΄ μ μ μμμ§λ€λ μλ¬Έμ΄ μ κΈ°λκ³€ νμ΅λλ€. νμ§λ§ μ€νλ € μ€ν¬λ‘€μ μμ£Ό κ°λ ₯ν μ§μλ₯Ό κ°κ² λμμ§μ. μ€λ§νΈν°μ μμ μ€ν¬λ¦°μ΄ μ¬λλ€λ‘ νμ¬κΈ λ λ§μ΄ μ€ν¬λ‘€μ νμ©νκ² λ§λ κ²μ
λλ€. λμμ΄λλ€μ μμ°μ€λ½κ² μμ§μ μΈ μΈν°νμ΄μ€λ₯Ό λ§μ΄ λ§λ€μ΄λ΄κ³ μμ΅λλ€.
μ°Έκ³ : http://www.beoplay.com/products/beoplayh7#video
2. μΉ΄λ μ€νμΌ μΈν°νμ΄μ€
More Card-Style Interfaces
ꡬκΈμ΄ μ μν λμμΈ κ°μ΄λμΈ Googleβs Material Design(μ΄ν Material Design)μμ λΉλ‘―λ κ°μ₯ μ€μν λμμΈ μμ μ€ νλλ λ°λ‘ βμΉ΄λ μ€νμΌ μΈν°νμ΄μ€β μ
λλ€.
μΉ΄λ λͺ¨μμΌλ‘ ꡬνμ λλ λμμΈμ μ 보λ₯Ό μ§μμ μ°νκ² λ³΄μ¬μ£ΌκΈ°μ μ©μ΄νλ©°, μ¬μ©μλ€λ‘ νμ¬κΈ μ΄μ νΈκΈ°μ¬μ λλΌκ² λ§λ€κ³ μ κ·Ήμ μΌλ‘ μ 보μ μνΈμμ©ν μ μλλ‘ λμμ€λλ€. μ΄ λμμΈμ λ λ€λ₯Έ μ₯μ μ λ°λ‘ κΈ°κΈ°μ κ΄κ³μμ΄ λ§€λλ½κ² νΈνμ΄ λλ€λ μ μ
λλ€. μΉ΄λλͺ¨μμ κ°λ‘λ μΈλ‘λ μ λ ¬μ΄ μ½κΈ° λλ¬Έμ΄μ§μ. μ΄ λμμΈμ μΈν°νμ΄μ€λ μ±, μΉμ¬μ΄νΈ, νλ¦°νΈλ μΉ΄νλ‘κ·Έ λ±μ λͺ¨λ μ μ©λμ§μ.
μ°Έκ³ : http://block16omaha.com/ | http://www.oyya.be/
3. λ¬΄λΉ μ€νμΌ μ¬μ΄νΈ
Movie-Style Sites
μΈν°λ· μλκ° μ μ λΉ¨λΌμ§κ³ λΉλμ€ νλ¬κ·ΈμΈμ΄ ν΅ν©λλ©΄μ λ λ§μ μΉμ¬μ΄νΈλ€μ μν ν΄λ¦½κ³Ό κ°μ λ§€λ ₯μ μΈ λμμμ μ¬μ΄νΈ μ λ©΄μ λ
ΈμΆμν€κ³ μμ΅λλ€. μ΄λ¬ν μμ ν΄λ¦½λ€μ μ²μμλ λ¨μν μ§§μ βμμ§€β μμ€μ κ·Έμ³€μΌλ, μ μ°¨ μμμ κΈΈμ΄κ° κΈΈμ΄μ§λ μ€μ
λλ€. κΉ¨λνκ³ μ μ ν κ³ νμ§μ μμ ν΄λ¦½λ€μ μ¬μ©μλ€μκ² μλ‘μ΄ κ²½νμ μ 곡νκ³ μμ΅λλ€.
μ°Έκ³ : http://follow-your-intuition.com/ | https://www.christmas.express/en/
4. μμ£Ό μμ μ λλ©μ΄μ
Tiny Animation
μ λλ©μ΄μ
μ μ΄μ©ν μ¬μ©μ μΈν°νμ΄μ€(UI)λ μ¬μ©μλ€μ ν₯λ―Έλ₯Ό λλ μ¬λ―Έμλ λμμΈ λ°©μμ
λλ€. μ λλ©μ΄μ
μ μμ§μ΄λ λͺ¨λ λμμΈ μμλ₯Ό μΉνλ©°, μλ
μ μΉ λμμΈ νΈλ λ μ€μμ κ°μ₯ βHOTβ ν κ²μ΄μμ΅λλ€. κ±°λν μ λλ©μ΄μ
μμ βμͺΌκ°μ Έβ λμ¨ μμ μ λλ©μ΄μ
λ€μ μμΌλ‘λ κ³μ μΈκΈ°λ₯Ό λ κ²μ
λλ€. μ μ ν¬κΈ°κ° μμμ§λλΌλ κ·Έ μΈκΈ°λ λ μ»€μ§ κ²μ΄μ§μ.
μ λλ©μ΄μ
μ μ΄μ©ν΄ μΉμ¬μ΄νΈλ₯Ό μ μν λ κ°μ₯ μ€μν κ²μ λ°λ‘ λͺ©μ μ μμ§ μλ κ²μ
λλ€. μ λλ©μ΄μ
ν¨κ³Όλ₯Ό νμ©νλ €λ μ΄μ μ κ·Έ ν¨κ³Όκ° μλνλ λ°κ° 무μμΈμ§ νμ λͺ
μ¬νμκΈ° λ°λλλ€.
μ°Έκ³ : https://www.truedigital.co.uk/ | http://labs.convoy.me/camper/#!/landing
5. μνΈμμ© μμ
Focus on Interactions
μνΈμμ©μ μ¬μ©μμ μ°Έμ¬λ₯Ό μ΄λμ΄λ΄λ κ²μ λ»ν©λλ€. μ±κ³Ό λͺ¨λ°μΌ μΈν°νμ΄μ€μμ μνΈμμ©μ μ¬μ©μμ κΈ°κΈ°λ₯Ό μ°κ²°ν΄μ£Όλ μν μ νμ§μ. νλ₯ν μνΈμμ© μμλ€μ λλΆλΆ ν¬κΈ°λ μμΌλ©΄μ μ¬μ©μλ€μκ² ν° μ΄νμ ν©λλ€. ν
μ€νΈ λ©μμ§κ° λμ°©ν λ μΈλ¦¬λ μ°¨μκ³Ό κ²μμμ μ¬λ¬λΆμ ν΄μ΄ λμμλ€λ μλ λ±μ΄ μ¬λλ€μ΄ κΈ°κΈ°μ μνΈμμ©νλ λ°©μμ κ²°μ ν©λλ€. μ΄μ²λΌ μ¬μ©μμ μ°Έμ¬λ₯Ό μ΄λμ΄λ΄λ μμ μμλ€μ΄ ννν μλ‘ ν΄λΉ μΉμ¬μ΄νΈμ μ±μ λν μΆ©μ±λλ λμμ§κΈ° λ§λ ¨μ΄μ§μ.
μ°Έκ³ : http://www.myunitedwayvoice.ca/ | http://www.wove.com/#/ambient
6. μ¬λ―Έμ μΈ νμ΄ν¬κ·ΈλνΌ
Even More Beautiful Typography
μ΅μ μ μΈν°νμ΄μ€λ€μ μλ¦λ€μ΄ μ체λ₯Ό νμ©ν λμμΈμ λ§λ€μ΄λ΄κ³ μμ΅λλ€. κ΅¬κΈ ν°νΈ(Google Fonts), μ΄λλΉ νμ
ν€λ(Adobe Typekit)μ κ°μ μΉ νμ
ν΄λ€(Web Type Tools)μ΄ κ°λ° λ° λ³΄κΈλκ³ μμ§μ. μ΄λ μ¨λΌμΈμμμ μ체 μ νκΆμ΄ λ€μν΄μ‘μμ μλ―Έν©λλ€.
ν¬κ³ λλ΄ν ν°νΈλ μλ
μ μ΄μ΄ κ³μ μ νν κ²μ
λλ€. λ€λ₯Έ νΈλ λ μμλ€κ³Ό μ μ΄μΈλ¦¬κΈ° λλ¬Έμ΄μ§μ. μ¬νν κΈμ¨λ₯Ό μ¬μ©νλ κ²μ λ€λ₯Έ μμλ€μ΄ μΆκ°λ μ¬μ 곡κ°μ μ€ λΏ μλλΌ κ°λ
μ± λν λμ λ©μμ§λ₯Ό μ λ¬νλλ° λ§€μ° ν¨μ¨μ μ
λλ€. μ¬λ¬λΆλ κ°λ
μ±λμ μ¬νν ν°νΈμ μ¬λ―Έμκ³ μ°Έμ ν λ€λ₯Έ μ΅μ
λ€μ μ‘°νλ‘κ² κ΅¬μ±νλ κ²μ μλν΄λ³΄μκΈ° λ°λλλ€.
μ°Έκ³ : http://www.viens-la.com/ | http://hawkandhen.com/
7.μΌλ¬μ€νΈλ μ΄μ
κ³Ό μ€μΌμΉ
Illustrations and Sketches
μΌλ¬μ€νΈλ μ΄μ
κ³Ό μ€μΌμΉλ μΉ λμμΈμ νλ ₯μ λΆμ΄λ£λ λ° λ§€μ° μ©μ΄ν μμμ
λλ€. μ΄λ€μ μμμμ΄μ½μ΄λ λ€λ₯Έ μΈν°νμ΄μ€ μμλ€κ³Ό κ°μ΄ μΉμ¬μ΄νΈμ μμ£Ό μμ λΆλΆλ€λΆν° νλ°νκ² μ¬μ©λκ³ μμ΅λλ€.
μΌλ¬μ€νΈλ μ΄μ
μ μ₯μ μ 무μλ³΄λ€ μΉμ¬μ΄νΈλ₯Ό μ‘°κΈ λ μ¬μ μΈ κ³΅κ°μΌλ‘ λκ»΄μ§λλ‘ λ§λ€μ΄μ€λ€λ μ μ
λλ€. μΌλ¬μ€νΈλ μ΄μ
μ΄λ μ€μΌμΉ μ€νμΌμ μμ΄μ½λ€μ λλΆλΆ μ§μ μμΌλ‘ κ·Έλ¦°λ―ν λλμ μ£Όμ΄, μ¬μ©μλ‘ νμ¬κΈ λ μΈκ°μ μ΄κ³ λ°λ»ν λλμ λ°κ² λ§λ€κΈ° λλ¬Έμ
λλ€. μ΄λ₯Ό μ νμ©νλ©΄ μ¬μ©μλ€μ΄ μΉμ¬μ΄νΈμ λ κΉμ μ λκ°μ λλ μ μλλ‘ λμμ£Όκ² μ§μ.
μ°Έκ³ : http://orangeyouglad.com/ | http://climateunderpressure.com/
8. λ λλ΄νκ³ λ°μ 컬λ¬
Bolder, Brighter Color (With an 80s Vibe)
λλ΄νκ³ λ°μ μμ±λ₯Ό μ¬μ©νλ κ²μ βνλ« λμμΈ(Flat Design)βμ μ΄νκ³Ό ν¨κ» μ°Ύμμ νμ¬ μ΅κ³ μ μΈκΈ°λ₯Ό λ리λ μ€μ
λλ€. Material Designμ μ΄ μ΄νμ λμ± κ°μμμΌ°μ΅λλ€. νλ¨μ λ§ν¬λ₯Ό μ°Έκ³ ν΄λ³΄μΈμ. λ€μν μλ€μ΄ κ³³κ³³μ μ리λ₯Ό μ‘κ³ μλ€λ κ²μ μ½κ² μμμ± μ μμ κ²μ
λλ€. 2015λ
μλ λΉκ΅μ λͺ¨λ
Έν€μ μμ±κ° μ ννμΌλ, μ¬ν΄λ λ³΅κ³ νμ λ λλ΄νκ³ λ°μ μμ ν¨ν΄λ€μ΄ μ νν κ²μ
λλ€. νΉν κ΅λ΄μ κ²½μ°, βμλ΅νλΌ 1988βμ νκΈλ ₯ λλΆμ λΉλΆκ°μ κ·Έ ν¨κ³Όκ° λ ν¨κ³Όμ μΌ κ²μΌλ‘ μμλ©λλ€.
μ°Έκ³ : http://circlesconference.com/ | http://rightcolours.com/ 9. λ λ§μ μμ΄μ½
More Iconography
μ§κΈμ λͺ
μ€μλΆν μμ΄μ½ μ μ±μλμ
λλ€. λ§μ λμμ΄λλ€μ΄ μ¬λ―Έμλ UIμ μμ΄μ½ ν€νΈλ₯Ό λ§λλ μ€μ΄μ§μ. λ°λΌμ κ·Έ μ΄λ λλ³΄λ€ μ¬μ©νκΈ°κ° μ½κ³ κ°κ²©λ μ λΉν©λλ€. κ²λ€κ° λμμ΄λλ€μ μ€μΌμΌλ¬λΈ λ²‘ν° κ·Έλν½μ€ ν¬λ§·(Scalable Vector Graphics Format, SVG)λλΆμ κ±°λν μ¬μ΄μ¦μ μμ΄μ½μ μ λ³΄λ€ μ½κ² λμ ν΄λ³Ό μ μκ² λμμ§μ. μ΄λ¬ν λ°°κ²½μ λ°νμΌλ‘ λ λ€μνκ³ μ°Έμ ν μμ΄μ½μ΄ λ±μ₯νμ¬ λ λ§μ μμ΄μ½μ 2016λ
μΉ λμμΈ νΈλ λλ‘ μ리맀κΉν κ²μ
λλ€.
μ°Έκ³ : http://www.primeit.pt/en/ | http://www.iqor.com/
10. μ€μ μ κ°μμ κ²½κ³ ν리기
Reality-Imagination Blur
κ²μ μ°μ
κ³Ό λμμΈ μ°μ
μμ μ£Όλͺ©μ λ°κ³ μλ λ¨ νλμ νΈλ λλ₯Ό κΌ½μλ©΄ λ°λ‘ βμ€μ μ κ°μμ κ²½κ³λ₯Ό ν리λ κ²βμ΄μ§μ. κ°μ νμ€μΈκ³λ₯Ό λ§λ€μ΄λ΄λ κ²μμλΆν° λ€μμ μ νμ§λ₯Ό μ μνμ¬ μ¬μ©μμ μ νμ λ°λΌ λ€λ₯Έ 컨ν
μΈ λ₯Ό 보μ¬μ£Όλ λ±μ λ§μΆ€λμμΈ(Customization)μ λμ€λ€μκ² ν° μΈκΈ°λ₯Ό λκ³ μμ΅λλ€. κ·Έ λ°μλ λꡬλ κ°μ§λΌλ κ²μ μμ§λ§ λκ° λ΄λ μ§μ§μ²λΌ 보μ΄λ κ°μμ μ΄λ―Έμ§λ₯Ό λ§λλ κ²λ κ°μ λ§₯λ½μ
λλ€. λ€μμ μμλ₯Ό μ°Έκ³ νμκΈΈ λ°λλλ€.
μ°Έκ³ : http://www.colemansmith.ca/ | http://bluestag.co.uk/
11. μ¬λΌμ΄λ νμ©
Websites with Slides
μ΄κΈ°μλ μ΄λ―Έμ§λ€μ΄ νλμ ν μμμ μ°¨λ‘λ‘ λ°λλ©° 컨ν
μΈ λ₯Ό μμ°¨μ μΌλ‘ 보μ¬μ£Όλ νμμ μ¬λΌμ΄λκ° μ£Όλ₯Ό μ΄λ£¨μμ΅λλ€. νμ§λ§ μκ°μ΄ μ§λλ©° μΉμ¬μ΄νΈλ₯Ό κ°λ μ±μ°λ ν μ€ν¬λ¦° μ¬λΌμ΄λλ‘ μ§ννμ§μ.
κ°κ°μ μ¬λΌμ΄λλ€μ΄ μλ‘μ΄ λΆμκΈ°λ₯Ό νκΈ°μν€λ©° μ€ν¬λ¦° μ 체λ₯Ό λ©μλλ€. μ΄λ€ μ¬μ΄νΈλ ν΄λ¦ν λλ§λ€ μ¬λΌμ΄λκ° λ°λλ©° μ€ν¬λ‘€μ λ΄λ¦¬λ©΄ μ¬λΌμ΄λκ° λ°λλ μ¬μ΄νΈλ μμ΅λλ€. νΉμ μΌμ ν μκ°μ΄ μ§λλ©΄ μ¬λΌμ΄λκ° μλμΌλ‘ λμ΄κ°λ κ²½μ°λ μμ§μ. μ¬μ©μλ€μ μ΄λ¬ν νκ²½μμ μ§μ μλ€ μ¬λΌμ΄λλ₯Ό μ ννμ¬ μνλ 컨ν
μΈ λ₯Ό λ³Ό μ μμ΅λλ€. ν₯ν λ λ§μ μΉμ¬μ΄νΈλ€μ΄ μ΄ μ»¨μ
μ μ΄μ©ν λμμΈμ 보μ¬μ€ κ²μΌλ‘ κΈ°λλ©λλ€.
μ°Έκ³ : http://yearinreview.fb.com/2015/us-presidential-election/ | http://www.apple.com/iphone/why-theres-iphone/
μ€λ μ΄ν΄λ³Έ κ²μ²λΌ λμμ΄λλ€μ΄ μ£Όλͺ©ν μ¬ν΄μ νΈλ λλ μλ‘μ΄ κ²λ€μ΄ μλλλ€. λͺ λ
κ° μ νν λ€μν νΈλ λλ€μ μ κ²°ν©νλ κ²μ΄ κ²°κ΅ 2016λ
μ νΈλ λκ° λμ§μ. μ μ¬ν μΉμ¬μ΄νΈλ₯Ό ꡬ경νλ€ λ³΄λ©΄ λλΆλΆμ μ¬μ΄νΈλ€μ΄ μ¬λ¬ κ°μ§ λμμΈ νΈλ λ μμλ₯Ό 볡ν©μ μΌλ‘ μ¬μ©νμ¬ μ¬μ©μμ νΈκΈ°μ¬κ³Ό μ°Έμ¬λ₯Ό μκ·Ήνλ λμμΈμ κ°μΆκ³ μλ€λ κ²μ μ μ μμ κ²μ
λλ€. λ§μ΄ μ°Ύμλ³΄κ³ μ΄ν΄λ³΄μκΈΈ λ°λλλ€.
μμμΌμ 2016λ
μν΄λ₯Ό λ§μ λͺ¨λ ν리λμ μ¬λ¬λΆλ€μ μ±κ³΅μ μΈ ν ν΄λ₯Ό κΈ°μνλ©° λ€μ ν리λμ κ°μ΄λλ₯Ό ν΅ν΄ μ°Ύμ λ΅κ² μ΅λλ€!