웹 디자인의 지향점
미니멀리즘
•
이유? 유저는 한 화면에 너무 많은 요소들을 본다. 특히 광고
•
한 지면에 하나의 광고가 아닌 여러 개의 광고가 있고 기존 웹사이트 가이드라인까지 유저 눈에 들어온다.
•
정보가 가득찬 화면을 보게 되므로 유저의 시각 과부하를 막기 위해서 미니멀리즘을 추구하는 트렌드가 나오게 됨
•
유저가 깔끔한 화면을 볼 수 있게끔하는 미니멀리즘 트렌드가 등장
미니멀리즘을 위한 과정
•
색상 수 제한
◦
올해 트렌드 컬러: 파스텔 컬러. 작년에는 그래디언트. 재작년에는 비비드 컬러
▪
작년과 재작년은 눈에 피로도를 주는 컬러였다면 올해는 파스텔 컬러로 눈의 피로도를 줄이고
▪
색상 줄을 줄여 피로도를 줄인다.
▪
선형 그래디언트: 작년에 이걸 많이 썼다면
▪
올해는 가우시안 블러를 사용: 중요한 건 선명하게, 뒤에건 흐리게
▪
섞인 색상은 흐리게, 주요한 색상은 선명하게 → 남색 물감에 흐린 물감을 섞듯이 색상을 흐리게
•
기존 가이드와 다른 가이드를 사용해서 비율 같은 걸로 새로운 구성을 시도
◦
예를 들면 뉴스 사이트는 정해진 가이드가 있다.: 메인 로고, 메인 뉴스, 사이드 메뉴, 광고
◦
이걸 되게 심플하게 만든다면 뉴스 1면에 나온 타이틀만 보여주는 것
◦
미니멀리즘 사이트의 예시가 있는지?
•
텍스트도 너무 많으면 아이콘화 시켜서 텍스트를 줄인다.
미니멀리즘의 결과
•
중요한 요소를 더 부각시킬 수 있도록 특이한 각도, 비율, 스토리라인을 만든다.
◦
스토리라인: 일러스트를 구성해도 특이하고, 기괴하게
▪
ex) 사람의 비율을 눈은 크게 코는 작게,,
▪
스토리라인이 뭐에여? 온보딩 화면이나 스플래시 화면에 사용됨.
•
디자인에서의 플로우 같은 것?
•
온보딩: 앱을 다운 받았을 때 스플래시 다음 나오는 화면으로 앱의 가이드라인 화면이다.
•
스플래시: 앱을 켰을 때 처음 나오는 화면
•
요즘 3D 요소를 많이 쓴다. (시선을 사로 잡기 위해)
•
glassmorphism: 모든 것을 유리처럼 보이게 한다. opacity를 줘서 투명해보이게 한다.
•
3d, 글래스몰피즘이 나오게 된 이유: 올해 초부터 뉴모피즘이 나오기 시작함
◦
애플: 스퀘어 모피즘이라는 형식을 소개 → 사실적인 디테일을 화면에 담음
▪
유저가 화면을 봤을 때 너무 복잡해 보임
▪
미니멀리즘한 디자인으로 바뀜 → 지금의 화면
▪
윈도우 8, 안드로이드는 7, ios 5부터 미니멀리즘하게 변화함 → 플랫 디자인
▪
플랫 디자인에도 유행이 있다.
•
단순화하면서도 동작이 있음을 보여주기 위해 '그림자'를 넣는다.
◦
올해 초부터 뉴모피즘 등장: 요소를 돌출시킴 (drop-shape, inner-shadow)
◦
왜 뉴모피즘으로 갔다고 생각했냐면
▪
미니멀리즘이라고 하면 뉴모피즘으로 가면 안됨
▪
뉴모피즘: 입체감을 주기 위해 그림자, 빛 등 계산해야 함 → 미니멀리즘보다 더 복잡한 아이콘
▪
궁극적으로 가야하는 디자인은 3d, 4d기 때문에 이에 맞게 변화하는 단계가 뉴모피즘.
•
이런 디자인 유행은 누가 선도하는 거에요?
◦
human interface guideline → 애플에서 만든 디자인 가이드
▪
이런 디자인 유행들은 애플에서 제시
▪
이렇게 제시하는 이유는 가이드라인이 있어야 유저가 어떤 앱을 사용하든지 유저 플로우가 흔들리지 않기 때문이다.
◦
material.io → 머터리얼 디자인 가이드
미니멀리즘과 광고
→ 유저의 시각과부화를 막기 위해 최소한의 정보만 화면에 담는다
→ 색상 수를 제한
→ 기존 가이드와 다른 가이드 사용(ex: 비율)하여 새로운 구성 사용하도록 노력
뉴스 사이트
→기존: 메인 분야 주요뉴스 서브뉴스 한쪽면 광고 지면
→수정: 뉴스 1면의 타이틀만 보여줌 → 한 화면에서 여러 정보에 노출되지 않음
올해 유행: 파스텔톤 + 가우시안 블러(중요한 것은 진하게 외는 흐릿하게→ 흐릿하게 되면 파스텔톤)
텍스트는 아이콘화
작년: 그라디언트(선형)
재작년: 비비드
미니멀리즘이 적용되면 요소 하나하나가 중요해짐 → 특이한 각도, 비율, 스토리라인(온보딩:스플래시 다음 화면으로 그 앱이 무슨 앱인지 설명하는 가이드화면, 스플레시:앱실행시 —> 디자인의 플로우?)
사용자를 사로잡기 위해 3d를 많이 사용하게됨
글라스모피즘 → 모든 걸 유리화 → 모든 걸 투명하게 보이도록 처리
3d, 글라스모피즘 ? 뉴모피즘이 새롭게 등장: 뉴모피즘이 뭐야
스큐어 모피즘 → 있는 그대로 사실적인 화면을 앱에 담는것(전화기? 진짜 전화기) ⇒ 너무 복잡해서 미니멀리즘하게 변경
단순하면서도 동작이 하는걸 보여주기 위해 그림자를 사용함(플랫디자인)
뉴모피즘: 어떤 형태에 돌출된 요소를 보여줌 (drop shadow, innershadow)
디자인의 궁극의 목표: 3d? 여기서 비교적 가까운 것이 뉴모피즘
주도해서 디자인을 변경하는 이유는 유저의 사용 플로우를 해치지 않기 위해
