[해외 디자인] 웹디자인&UI 트렌드 2021 | Top Web Design and UI Trends for 2021 | 디자인 트렌드

 Top Web Design and UI Trends for 2021 

Carrie Cousins | Desigbmodo

---

Jumpstart new projects and website redesigns with a few of the hottest elements in design for 2021. These trending styles are sure to help you create in a way that’ modern, fresh and perfect for the new year.

Here’s the best part: Many of these design elements can be mixed and matched with each other (and many other elements as well) to help you create something as unique and special as your projects.

Many of the trends that are emerging are extensions of things we predicted (and saw in 2020) – dark mode, breaking typography rules, artistic illustrations, color, layering, and more. Watch a video about 2021 web design trends:

Jumpstart: 다른차에 배터리를 연결하여 엔진을 걸다, 시동을 걸다, 재게 하다, 활기를 불어넣다, 소생시키다, 
be sure to (do~): 반드시 ~하다, 분명히 ~일(할) 것이다, 
emerging: 최근 생겨난, 최근에 만들어진 /emerge: (어둠 속이나 숨어 있던 곳에서)나오다[모습을 드러내다], 드러나다, 알려지다, 생겨나다, 부상하다, 부각되다.

 

몇 가지의 핫한 디자인 요소들로 2021년 새로운 프로젝트와 웹사이트 리디자인을 해봅시다. 이 트렌드들은 2021년에 현대적이고, 새롭고 완벽한 디자인을 하게끔 도와줄 거라고 확신합니다.

가장 좋은 부분은 이겁니다: 여러 디자인 요소들이 서로 믹스앤 매치되어서 (다른 많은 요소들도 물론!) 당신의 프로젝트만큼 유니크하고 스페셜한 무언가를 만들 수 있을 거라는 거죠.

떠오르고 있는 대부분의 트렌드들은 우리가 예상했던 (2020년에도 보았던) 것들의 연장선상입니다- 다크모드, 룰을 벗어난 타이포그래피, 아티스틱한 일러스트레이션들, 컬러, 레이어링, 등등. 아래 영상은 2021 웹디자인 트렌드에 관한 영상입니다.

 

https://youtu.be/Ag716MJg7EM

 

 

 

---

 

 

 Dark Mode 

 

Peter Ledbergh

 

Dark mode is everywhere. Thanks to the ability of most browsers and mobile devices to toggle between light and dark modes, you need to consider how your design might look with a dark color scheme (even if that is not the default).

Because of the popularity of dark mode as a user preference, even more designers are reverting to deep, dark color palettes for overall website and user interface designs.

These projects often have a moody effect, so it is important to think about how dark mode impacts the overall vibe of the message and content of the website design even if you aren’t planning a toggle option.

For designers that are creating a lighter interface, think about and design for how dark mode will look if the user selects it. Remember that dark mode isn’t just a reversal of the color palette, it should be an intentional combination of deeper, darker colors that create the same visual feel as light mode and maintain readability and functionality.

 

consider: 심사숙고하다, 고려하다, 고찰하다, 검토하다, 깊이 생각하다 / ~라고 생각하다, 여기다
even more: 더더욱, 더욱더, 한층 더
revert: 되돌아가다, 복귀하다
moody effect: 멜랑꼴리한, 미스테리한, 분위기 있는
intentional: 의도가 있는, 목적이 있는

 

A few tips for making the best of dark mode in website design include:

• You don’t have to use “white” and “black;” think of dark mode in terms of light and dark. (Maybe use a pale gray on a dark purple background.)
• Stay away from highly saturated colors on dark backgrounds.
• Use color variations (light and dark) to establish hierarchy.
• Provide a toggle switch for light/dark mode so users can choose how to look at the design.
• Don’t forget accessibility in dark mode and take care with size and contrast.

 

make the best of ~ : ~을 최대한 이용하다, 활용하다, [역경, 불리한 조건 따위를]를 어떻게든 극복하다. 
in terms of: ~의 관점에서,~의 면에서, ~에 관하여
pale: 옅은, 창백한, 

 

다크 모드는 어디에나 있습니다. 고맙게도 대부분의 브라우저와 모바일 기기에서 '라이트 모드'와 '다크 모드'를 전환할 수 있는 토글을 제공하고 있어서, 디자이너들은 다크 컬러 스킴에서 우리의 디자인이 어떻게 보일지 고려를 해야 하죠 (심지어 다크 모드가 기본값이 아니더라도요)

User Preference(사용자 설정)에서 다크모드가 인기가 좋아서, 점점 더 많은 디자이너들이 전반적인 웹사이트와 UI 디자인에서 더 깊고 어두운 컬러 팔레트들로 돌아가고 있습니다.

이런 프로젝트들은 종종 moody effect들을 갖고 있어서, 여러분이 토글 옵션에 대해서 계획하고 있지 않더라도, 다크모드가 웹디자인에서의 메세지나 컨텐츠가 주는 전반적인 분위기에 어떤 영향을 끼칠지 생각해봐야 하는 것이 아주 중요합니다.

좀 더 밝은 인터페이스로 디자인하고 있는 디자이너들이라면, 만약 사용자가 다크모드를 선택한다면 어떻게 보일지도 생각해봐야합니다. 다크 모드는 단순히 컬러의 반전이 아니라는 것을 명심하세요. 더 깊고 어두운 컬러들의 조합은 라이트 모드와 같은 분위기를 주면서 가독성과 기능적으로도 동일하게 유지되는 의미 있는 조합이어야 합니다. 

-

웹디자인에서 다크 모드를 최대한 활용할수 있는 몇가지 팁:

-  꼭 블랙 & 화이트를 쓸 필요 없다. 밝고 어두움의 측면에서 다크모드를 생각해보자. (짙은 보라빛 배경에 옅은 회색을 쓸수도 있지 않은가)
-  어두운 배경에서 채도가 아주 높은 컬러를 사용하는 것을 멀리해보자.
-  하이어라키(위계질서)를 성립하기 위한 컬러 베리에이션(밝고 어두운)을 사용하자.
-  사용자가 디자인을 선택할수 있도록 라이트/다크 모드를 전환할수 있는 토글을 제공하자
-  다크모드에서도 사이즈와 대비 등을 고려하여 접근성도 놓지지 말자. 

 

 

www.goldensuisse.com/

Golden Suisse

clmt.paris/all

Clement Merouani — Art Director & Photographer

ballsystemgroup.it/it/

Home - BallSystem

 

 

---

 

 Experimental Typafaces 

Fig

 

Thanks to improvements in delivering fonts online, experimental typefaces are gaining popularity in website and mobile app projects.

These typefaces are anything different or unusual or even custom to a project. Experimental typefaces range from amazing elaborate pieces of artwork, such as the F above, to little surprises as part of a more standard typeface design.

Experimental typefaces might be a single color of style, colorful, animated, and include full- or abbreviated character sets.

A few ways to make the most of experimental typefaces include:

• Keep the rest of the design simple since these typefaces can have a lot of visual emphasis.
• Pair with highly readable secondary typefaces.
• Consider a custom experimental typeface for key elements, such as the one used for the Designmodo logo.

 

elaborate: 정교한, 공들인
range from ~ to: (범위가) ~에서 ~까지
emphasis: 강조, 역점, 주안점 (=stress)

 

온라인에서 폰트를 받기 쉬워져서, 실험적인 서체들이 웹사이트와 모바일 앱 프로젝트에서 점점 더 인기를 얻고 있습니다.

이런 서체들은 여태까지와는 다르거나, 평범하지 않거나 아니면 프로젝트에 맞게 제작된 커스텀이죠. 실험적인 서체들의 범위는 위의 F처럼 기가막히게 정교한 아트워크이거나, 기본 서체 디자인에서 작은 놀라움을 주는 디자인까지 다양합니다.  

실험적인 서체는 단색일수도, 컬러풀할수도, 움직일수도, 그리고 문자의 전체나 축약들을 갖고 있을수도 있습니다.

실험적 서체를 활용하는 몇가지 방법들:

-  이런 서체들은 시각적인 강조점을 많이 갖고 있기 때문에, 나머지 부분은 심플하게 두자.
-  가독성이 높은 보조 서체들과 페어링하자.
-  주요 요소들에 커스텀 실험적인 서체를 적용하는 것을 고려해보자. 

 

 

Hot Black

hotblack.design/

Home | Hot Black

 

 

---

 

 Designs Without as Many Faces 

 

Scheldebrouwerij | Bier in Balans

 

This trend might be a direct result of the worldwide coronavirus pandemic – designs are featuring fewer people and faces.

The reason for this is quite practical: With people not gathering in groups and with mask-wearing, designers are looking for ways to use existing inventories of images to establish appropriate imagery. Or they are opting for imagery without people all together.

This might be the first time that you scan various websites and see so few people.

While this is a big trend right now, don’t expect it to stick with us for long after the pandemic as people begin gathering in bigger groups again.

 

opt for: 선택하다, 택하다 opt in:~에 참여[동의]하기로 하다. opt out: ~에 참여하지 않기로 하다. *option
while: ~하는 동안[사이], (다른 일과 동시에) ~하는 동안에, ~인데 반하여, ~이긴하지만, ~에도 불구하고, ~까지
as: ~처럼, (자격기능 등이)~로서, ~만큼 ~한, ~하는 동안에, ~대로, ~때문에, ~이긴 하지만

 

디자인에서 사람들이나 얼굴이 적어진 이 트렌드는 아마도 전세계적인 코로나 바이러스 팬데믹의 직접적인 결과일것이에요. 

그 이유는 꽤 실용적이기 때문인데, 사람들이 무리지어 모이지 않거나, 마스크를 끼고 있어서, 디자이너들은 적절한 이미지를 만들기 위해서 원래 갖고 있던 이미지 인벤토리에서 방법을 모색하고 있습니다. 아니면 사람들이 함께 있지 않은 이미지를 선택하고 있죠.

여러 웹사이트를 둘러봤는데, 사람들을 잘 보지 못한것은 아마도 이번이 처음일거에요.

지금은 큰 트렌드이긴 하지만, 사람들이 다시 모이는 팬데믹 이후에도 유행이 유지될거라고는 기대하지 맙시다 

 

  

 

Persoo | boost your revenue by up to 35 %

 

 

 

---

 

 Text as Homepage “Art” 

 

Krown Themes

Exciting Shopify Themes by Krown Themes

Sofia Papadopoulou

Sofia Papadopoulou - Visual Designer & Art Director

 

With so many great options for typography, including the oversized and experimental trends above, it’s no shock that many designers are using text as the main “art” for designs. (This also plays into the trend of using fewer faces in design.)

While this might sound like an easy out, typography-heavy designs are complicated and complex. The more words – and longer words – that you have, the more of a design challenge this can become.

Designers are playing with layers of text to create focus, such as filled and outline pairs in the example from Krown Themes.

The other popular option is to stack lines of text with tight linespacing or exaggerated open linespacing to create a feel and eye flow for the design. The common theme is that each of these projects uses a typography that’s interesting and matches the mood of website content.

 

play into~ :~에 기여하다, 지원하다,
complex and complicated: If a problem is complex, it means that it has many components. Complexity does not evoke difficulty. On the other hand, complicated refers to a high level of difficulty. If a problem is complicated, there might be or might not be many parts but it will certainly take a lot of hard work to solve.
exaggerated: 과장된, 과도한

 

오버사이즈나 실험적인 서체들을 포함하여 타이포그라피의 아주 멋진 옵션들 때문에, 디자이너들이 텍스트를 메인 "아트"로 거는 것은 별로 놀랍지도 않아요.(디자인에서 사람들을 많이 볼수 없게된 이유기도 하다.)

쉬운 방법 처럼 보이겠지만, 타이포그라피가 과한 디자인은 복잡합니다. 디자인해야 할 글이 많으면 많을수록, 더 많은 디자인 챌린지들이 될수 있어요. 

디자이너들은 포커스를 두어야 할 텍스트의 레이어를 갖고 놀고 있죠. Krown Themes의 예에서 채워지고 비워진 한쌍의 타이포그래피 처럼 말이에요.

인기있는 다른 옵션은 텍스트들을 타이트한 행간으로 쌓거나 아니면 디자인에서 시각적인 흐름과 느낌을 주기 위해서 과하게 넓은 행간을 주는 것입니다. 공통적인 부분은 이 두 작업 모두 흥미롭고 웹사이트 분위기와 잘 맞는 타이포그래피를 사용한다는 것입니다. 

 

---

 

 

 Blur & Noise (Grain) 

Blurr

Blurr_ Animation

 

Blur and noise are, perhaps, one of the beloved comebacks of 2021. All we remember how these two took the web by storm more than five years ago. Not only did they make website design feel sophisticated and refined but also mobile applications and all other sorts of interfaces and artworks. Today we can witness a new milestone in their development.

So how to nail it?

First and foremost, in 2021, they work together. Do not separate them since they make a cute couple that gives an interface a refreshing elegance.

Second, you should forget about blurred images. The time has come to play with colors and gradients. This approach lets you come up with ultra-modern and highly artistic splashes of paints that feel incredibly subtle. They add mood to the design and, at the same time, serve as unobtrusive focal points that emphasize crucial details of the interface.

Third, use a combo of blur and grain as a transition effect. On the one hand, it will make shifting between sections look smooth; it goes incredibly well with sliding and parallax. On the other hand, it will make motion feel tangible.

Finally, use them in tandem with neomorphic details. These two directions nicely complement each other. When applied together, they amplify the overall effect exponentially.

 

take ~ by storm: ~의 넋을 빼앗다, 매료시키다[~에서 대성공을 거두다] 사람의 마음을 사로잡다, 마음을 홀리다
sophisticated: 세련된, 정교한, 지적인, 교양있는, 수준 높은
refined: 세련된, 정교한, 정제된, 제련된, 고상한, 교양있는, 품위있는
milestone: 중요한[획기적인] 단계, 사건
first and foremost: 무엇보다도, 가장 중요한 것으로, 뭐니뭐니해도
since: ~부터[이후], 언제부터?, ~한 이후로, ~때문에, ~므로, ~여서 
subtle: 미묘한, 교묘한, 절묘한, 예리한, 예민한
unobtrusive: 눈에 잘 띄지 않는, 불필요하게 관심을 끌지 않는, 방해받지 않는, 야단스럽지 않은
focal points: 초점, 중심 (=focus)
emphasize: 강조하다, 강세를 두다, 중요시하다, 두드러지게 하다.
crucial: 중요한, 중대한, 치명적인
tangible: 분명히 실재하는[보이는], 유형의, 만질수 있는, 감지할수 있는 
In tandem with~: (~와) 동시에 [나란히]
neomorphic: 새로운 형태, 신형
complement: 완전하게 하다, 보충하다, 보완하다
amplify: 확대하다, 증폭하다, 
exponentially: 기하급수적으로

 

블러워 노이즈는 아마도 2021에 복귀한 가장 사랑받는 요소중 하나일 것입니다. 5년 보다 더 오래전에 웹에서 얼마나 휘몰아쳤었는지 우리는 모두 기억하고 있습니다. 웹사이트 디자인 뿐만 아니라, 모바일 앱이나 모든 인터페이스와 아트워크들까지도 세련되고 수준있게 만들었습니다. 오늘날 우리는 이것들의 발전의 중요한 순간을 보고 있는 것입니다.

자 그럼 어떻게 이뤄낼수 있을까요?

첫번째로, 2021년에 이것들은 같이 붙어서 효과를 내고 있습니다. 인터페이스를 활기차고 멋있게 바꾸는 매력적인 커플이라고 해서, 이 둘을 떼어놓지 마세요. 

두번째, 블러 이미지는 이제는 잊어야 합니다. 이제는 컬러와 그라데이션으로 놀아야 할 때에요. 이런 접근이 당신에게 미묘한 느낌을 주는 초현대적이고, 고도로 예술적인 스플래쉬를 생각하게 합니다. 이것들은 디자인에 분위기를 더하면서 동시에, 인터페이스에서 중요한 디테일을 강조해주는 적당한 포커스까지 가미 시킵니다.

세번째, 블러와 그레인을 콤보로 트랜지션 효과로 사용해보세요. 영역들간의 이동을 부드럽게 만들어주기도 하고; 슬라이딩과 패럴랙스 효과에서 정말 잘 어울리며, 실감나게끔 하기도 합니다. 

마지막으로, 새로운 형태의 디테일과 함께 나란히 사용해보세요. 이 둘은 서로 잘 어울립니다. 같이 적용되면, 기하급수적으로 효과를 극대화 시킬것입니다.

 

 

 

Mutant Radio

 

Mutant Radio

App UX-UI Design

Banking and Finance App UX-UI Design

 

 

---

 

 3D Illustrations (And Everything Else) 

 

Edesigninteractive

Award-Winning Web Design & Digital Marketing Agency

Bruno Simon

Bruno Simon - Creative developer

Cilau

Cilau

 

The lines between reality and virtual reality keep blurring. Three-dimensional effects and techniques in the 2D space are a great example of that in action.

Designers are playing with everything 3D, from illustrations and animations to scenes created with objects and images.

The examples here focus on illustrated styles. Illustrations can take on 3D effects and depth with shadows and just the right thought in the creative process. This trend might result in something with a more realistic feel, such as Google’s Healthcare Security page, or a lighter, more cartoonish scene.

 

현실과 가상의 경계선은 점점 모호해지고 있습니다. 2D에서 3D 효과와 기술을 적용하는 것이 좋은 예시가 되겠군요. 

디자이너들은 3D로 모든 것들을 가지고 놀고 있습니다. 일러스트, 애니메이션 부터 어떤 사물과 이미지로 만들어진 장면 까지도요. 

이 예제들은 일러스트 스타일에 초점이 맞춰져 있습니다. 일러스트는 그림자를 사용해서 3D 효과와 깊이를 적용할수 있고, 크리에이티브한 과정에서 아주 올바른 선택이되었죠. 이 트렌드는 뭔가 현실감 있는 작업의 결과물일수도 있습니다. 구글 헬스케어 시큐리티 페이지나, 더 밝고 더 만화적인 장면들에서 처럼요.

 

 

---

 

 

 Black and White Illustrations (Colorless UI) 

Eatgenesis

Home - Eat Genesis

Cpeople

CreativePeople Crew

Absurd Design

Absurd Design - Free Surrealist Illustrations and Vector Art

Magnet

World-class web agency in Cincinnati - Magnet Co

 

Other types of illustrations also remain popular, such as black and white drawing styles. These may be simply flat drawings or include extra elements of animation or whimsy to make them have even more impact.

The nice thing about these illustrations is they seem real and in-the-moment because of a hand-drawn element.

These illustrations seem to “match” almost any design aesthetic as well, making them a popular option for all kinds of industries or website types.

 

whimsy: 기발한 생각

 

다른 종류의 일러스트도 인기가 많습니다. 흑백 드로잉 스타일 처럼요. 이것들은 아마도 임팩트를 좀 더 주기위해서 플랫한 드로잉이거나 약간의 애니메이션 요소를 포함하거나, 기발한 뭔가 일수도 있죠.

이런 일러스트에서 좋은 점은 손으로 그린 부분들 때문에 뭔가 더 사실적이고, 그 순간을 느낄수 있을것만 같다는 거에요.

이런 일러스트들은 대부분의 심미적인 디자인에서 잘 어울려서 거의 모든 분야나 웹사이트에서 인기가 좋은것 같습니다.

 

 

---

 

 Collage Art 

 

 

Collagerie

Collagerie

 

Sometimes the most impactful website image is actually a collection of images. More designers are opting for collages as the main artwork on pages.

This can look a few different ways (you can see that in the examples above).

• Images can be placed throughout the design in their own “containers” or boxes, creating a layered collage look.
• Images can be combined and merged to create a single, more unified piece of art that’s a collection of pieces.

Both options can be equally stunning and work for various projects.

Consider a bit of collage art if:

• You need to show multiple images at once.
• Want to establish a retrospective feeling.
• Don’t have a single image that provides the right message.
• If you don’t have a single high-resolution image. Sometimes combining images can get you there.
• When you want to showcase diversity or breath within your brand line.

 

unified: 하나의, 통일된
stunning: 놀랄만큼 아름다운, 기절시키는

 

때때로, 웹사이트 디자인에서 많은 이미지들을 갖고 있는 것이 가장 영향력이 있습니다. 많은 디자이너들이 웹페이지에서 메인 아트워크로 콜라쥬를 선택하고 있죠.

위의 예시들을 보면, 몇가지 다른 방식으로 보여집니다.

- 이미지는 자체 "컨테이너" 또는 상자에 배치되서 레이어드 된 콜라쥬를 만들수 있고
- 이미지는 조합하고 모아서, 하나의 예술작품을 만들수도 있습니다.

두 옵션은 모두 똑같이 아름답고 여러 프로젝트에 효과적이죠.

이럴 경우에 콜라쥬를 고려해보세요:

- 한번에 여러 이미지를 보여 줘야 할때,
- 복고, 회고적인 느낌을 세워야 할때
- 하나의 이미지로 정확한 메세지를 전달하기 어려울때
- 고해상도의 이미지가 없는데, 가끔씩 이미지들을 조합하면 만들어 낼수 있을때.
- 쇼케이스의 다양한 모습을 보여주고 싶거나, 브랜드 라인에 숨결을 불어 넣고 싶을때.

 

 

Annual Awwwards

Discover the best websites of 2020!

 

 

---

 

 

 Colorful Backgrounds 

 

Virtualis

https://virtualis.tours/

 

Almost on the other end of the spectrum from dark mode is use of colorful backgrounds for design projects. The use of bright color might be a reflection of the world right now and a desire for better, brighter times in a pandemic era.

For the most part colorful backgrounds come in two forms – gradients and blurs.

Both are fun options that allow you to really play with color combinations from amazing bright hues to softer more rainbow-style palettes. The common theme when it comes to this trend is a happier, lighter feel thanks to colorful background choices.

 

when it comes to : ~에 관한 한, ~라면, ~에 대해서

 

대부분 다크모드의 저편의 스펙트럼이라면 디자인 프로젝트에 컬러풀한 배경을 사용하는 것이에요. 밝은 컬러를 사용하는 것은 요즘 이 팬데믹 시기에서 지금 이 시기를 표현하는 방법일수도 있고, 더 나은 더 밝은 날에 대한 열망일수도 있겠죠.

굉장히 컬러풀한 배경을 사용하는 것은 두가지 형태로 나타날수 있는데, 그라데이션과 블러 입니다.

이 둘다 디자이너들이 놀랄정도로 밝은 색조에서부터 더 부드러운 무지개 팔렛트 까지, 색 조합으로 놀수 있게 해주는 재미있는 옵션입니다. 이 트렌드의 공통점은 컬러풀한 배경 덕분에 더 기쁘고, 밝은 느낌을 줄수 있다는 것입니다. 

 

Metrery

M Modern Smart Corporate Branding Letter Logo Design

 

 

 

---

 

 

 Big, Bold Typography 

 

Mammut

Experience | Mammut

 

Typography that’s larger than life is another big trend heading into 2021.

The bigger the letters, the more impactful they can be. This trend works best when there are just a few words to focus on and they are easy to read and understand.

Type styles are all over the map as well, from thick sans serifs to thin and funky serifs to scrips and slabs. The style of your font choice doesn’t matter as much here. It’s size that really makes this type trend work and feel over the top.

And the good news is you can use it with busy backgrounds or images or on a flat background where text really stands alone.

Tips for using big, bold typography include:

• Determine first whether text should be readable or artistic. (If you go with artistic, make sure to include a secondary readable option for secondary elements.)
• Go big with a trendy typeface, such as a serif or outline.
• Keep the background simple so emphasis is on the text element.
• Remember to think about the responsive nature of text elements and how big text will look in vertical spaces or on small screens.
• Keep letters and words to a minimum so you don’t overwhelm users.

 

heading into : ~로 향하는
over the top: 과장된, 지나친
determine: 결정하다, 정하다, 결심하다, 
whether ~ or ~: ~인지 아닌지, ~이거나 ~거나
overwhelm: 압도하다, 억누르다, 해치우다, 당황하게 하다, 괴롭히다.

 

우리의 일상보다 더 큰 타이포그라피는 2021년에 새롭고 폭발적인 트렌드가 되었습니다.

더 큰 글자들은 더 많은 효과를 낼수 있죠. 강조해야할 글자들이 적을 때 아주 효과적인데, 읽기도 쉽고, 이해하기도 쉬어서 효과적이죠.

서체 스타일은 두꺼운 산세리프 부터 얇고 펑키한 세리프, 스크립트, 슬라브 까지 다양하게 있는데요. 여기서 선택한 서체 스타일은 크게 중요하지 않습니다. 이건 트렌디하고, 과장되게 보이기 위한 사이즈, 크기에 관한 것입니다.

좋은 소식은 어지러운 배경이나, 플랫한 배경, 이미지에서 실제로 텍스트만 돋보이게 사용할수 있다는 것입니다.

크고 볼드한 타이포그라피를 사용하는 방법:

- 텍스트를 읽을 수 있어야 하는지, 예술적이어야 하는지를 먼저 결정하라 (아티스틱하게 간다면, 읽을 수 있는 보조 서체를 갖고 있어라)
- 세리프나 아웃라인같은 트렌디한 서체로 크게 만들어라
- 텍스트 요소를 강조할수 있게 배경은 심플하게 놔두어라
- 텍스트 요소의 반응 특성과 세로 화면 혹은 작은 화면에서 큰 글자들이 어떻게 보일지도 생각해보라
- 사용자들이 놀라지 않도록 글자나 단어를 최소화 시켜라

 

Felix Hieronimus

Portfolio - Hieronimus Félix

 

 

 

 

---

 

 Cool Mouse/Cursor Icons or Actions 

 

Pentool

thePenTool - Craft UI assets for designers

We Are Impero

Impero - The Creative Agency for Impatient Brands

 

This is a tiny trend that you might miss if you are not paying attention – mouse and cursor states that change into interesting things as you scroll, click, or hover.

This delightful trend not only shows the ability to the design but serves as a way to truly delight the user.

The Pen Tool, above, uses a big circular “pointer” that moves with the user. It’s hard to miss and the size of the cursor (even without an actual point) makes you want to click around.

Impero uses a bright yellow circle that floats around the screen with the cursor. It does make other objects animate or move as it approaches and, again, encourages clicks.

This is a fun trend that makes you want to browse from your desktop computer even more since many of these little effects just don’t feel the same on a mobile device.

 

이것은 당신의 주의를 기울이지 않았다면 지나쳤을 아주 작은 유행인데, - 마우스 커서의 상태가 스크롤이나 클릭, 하버 같은 흥미로운 것들로 바뀌었다는 것인데요.

이 재미있는 트렌드는 디자인에 대한 능력을 보여줄 뿐만 아니라 사용자를 정말로 즐겁게 만드는 역할도 하고 있습니다.

위의 펜 툴은 사용자와 함께 이동하는 큰 원형의 "포인터"를 사용합니다. 잘보이고, 커서 사이즈 (실제 포인트가 없더라도)가 클릭하고 싶게끔 만들죠. 

Impero는 커서와 함께 스크린에 둥둥 떠있는 밝고 노란 원형을 사용했는데, 이것이 다른 것들 까지 움직이게 하고, 또 클릭하게 끔 만들고 있는겁니다.

이런 작은 효과 중의 대부분이 휴대폰에서 보여지는 거랑 달라서, 당신이 데스크탑 컴퓨터에서 훨씬 더 많이 탐색하게 끔 만드는 재미있는 트렌드 이지요.

 

 

Loewe

Vincent Tavano.

 

 

---

 Pantone’s Illuminating and Ultimate Gray 

Pantone

Pantone Color of the Year 2021 / Introduction | Pantone

Busy App

Busy App

Finally, it’s hard to mention trends of the year without the pair noted by Pantone as colors of the year. Illuminating (yellow) and Ultimate Gray and the yin and yang of design with a bright, bold choice that works with a more muted neutral.

This color pair isn’t that new to interfaces either. It’s fun, light and works great with more minimalist design schemes or line icons and illustrations. The yellow is impactful and youthful while gray keeps it from feeling overwhelming.

This pair of colors is a nice option if you want to create something with just the right element of cheerfulness and hope.

 

마지막으로, 팬톤의 올해의 컬러를 빼놓고 유행을 말하기는 어렵겠죠. Illuminating 밝게 비추는 (노란) Ultimate Gray, 그리고 밝고 볼드한 선택을 할수 있는 음양의 디자인은 더 차분하고 중성적인 디자인으로 작용됩니다. 

이 색조합은 그리 새로운 것도 아닌데요, 이건 재밌고, 가볍고 미니멀 디자인이나 라인 아이콘, 일러스트와 아주 잘 맞고요. 옐로우가 임패트넘치고, 젊은 느낌인 반면에 그레이는 이것들을 압도적으로 느껴지지 않게끔 하죠.

희망과 응원을 할수있는 올바른 요소로 디자인을 하고 싶다면 이 컬러들은 아주 좋은 선택일 것입니다.  

 

 

 

---

 

 

 Conclusion About Web Design Trends for 2021 

None of these website design and UI trends for 2021 work in isolation. They are all best when developed and designed as part of a thoughtful and intentional design scheme.

Take note of how many of these trends also overlap with one another. Designs might have dark mode and circles or oversized typography on a bright background. The versatility of these design trends makes them highly usable, layerable, and perfect for your upcoming projects. Have fun!

 

versatility: 다재, 다능, 변덕

 

결론은, 2021년 웹디자인과 UI 트렌드에서 이것들은 결코 따로따로 각자 작용하고 있지는 않는 다는 것입니다. 이들은 모두 목적이 있고, 고심끝에 나온 디자인이었을때 가장 베스트 일거에요.

이런 트렌드에서 얼마나 많은 것들이 서로 겹치는지 잘 봐보세요. 디자인이 다크모드 일수도 있고, 원형을 사용했거나, 아주 밝은 배경에 커다란 타이포 그라피가 있을수도 있습니다. 이 디자인들의 다양한 능력이 유용성도 높고, 레이어링 하기도 좋고, 다음 프로젝트에도 아주 완벽하죠! 

 

Credit: a few videos and images have been provided by Awwwards.