웹디자인 트렌드는 빠르게 변합니다.
해외에서 시작되고 메이저 에이전시가 적용한 후 중소 에이전시가 따라가는 형태로 새로운 스타일이 트렌드가 됩니다.
기술 발전에 따라 웹/모바일 환경이 변하고 맞춰서 디자인 트렌드도 함께 변합니다.
Trend 01. 반응형웹
Responsive Web
예전에 PC만 사용하던 시절에는 텍스트를 이미지로 만들어서 전체 통이미지로 사용했습니다.
PC에만 이미지로 사이즈를 맞추면 되고 웹기술이 발전하기전이기 때문입니다.
이후 모바일을 사용하면서 PC용과 모바일용 두가지를 만들어서 사용했습니다.
해외에서 반응형웹이 표준화되면서 국내에서도 2015년 이후 반응형웹이 사용되었고
2020년 이후로는 표준으로 자리를 잡습니다.
반응형웹은 사용기기에 맞춰 홈페이지 레이아웃이 자동으로 변하는 기술입니다.
PC, 테블릿, 모바일등 사용기기가 많아지고 화면 사이즈가 다 달라지면서,
그에 맞춰 나온 새로운 웹기술입니다.
반응형웹은 이미지와 텍스트를 분리하고, 브라우저 사이즈에 맞춰 크기가 자동으로 변합니다.
아직도 10년전 방식으로 홈페이지를 제작하는 경우가 많습니다.
하나만 기억하세요.
새로 제작하려는 홈페이지는 반응형웹입니까?
Trend 02. 인터랙션
Interaction
사용자의 움직임에 반응하여 사용자 경험을 풍부하게 해주는걸 인터랙션 디자인이라고 합니다
Interaction Example 01. 스크롤 애니메이션
사용자의 스크롤에 따라 다양한 움직임을 보여주는걸
스크롤 애니메이션이라고 합니다.
스크롤을 내리면 텍스트가 나오고 올리면 사라집니다.
Interaction Example 02. 마이크로 인터랙션
마우스를 올렸을때 움직이는 호버효과 같은 사용자 경험(UX)에 영향을 미치는
작은 애니메이션이나 효과를 마이크로 인터랙션이라고 합니다.
내용 들어가는 부분, 내용 들어가는 부분, 내용 들어가는 부분입니다
내용 들어가는 부분, 내용 들어가는 부분, 내용 들어가는 부분입니다
Interaction Example 03. 커서 인터랙션
커서가 움직이면서 여러가지 효과가 나오거나 커서가 변경되는걸 커스텀 커서 또는 커서 인터랙션이라고 합니다.
마우스를 이미지위로 옮겨보세요
Hello,
Custom Cursor
Hello
여기에 마우스를 올려주세요
다양한 사용자 체험 커서 인터랙션이 있습니다
Hello
Trend 03. 기타 트렌드
Other Trends
Other Trends 01. 3D
3D 모델링을 사용하여 시각적인 깊이와 독특함을 부여합니다.
클릭해서 움직여보세요
로봇 주위로 마우스를 움직여보세요
Other Trends 02. Large Typography
시선을 사로 잡고 브랜드의 개성을 강하게 전달합니다.
The best choice
SimpleSolution
Other Trends 03. 스토리텔링 및 몰입형 경험
사용자가 몰입할 수 있는 시각적 스토리텔링이나 경험이 중요시되고 있습니다.
준비중입니다