CREATIVE DIRECTION
D.BRONZE
UI | UX | GUI
Project Management - D.BRONZE
UI | UX Design - D.BRONZE
Icon Design - D.BRONZE
PROJECT
COMMAX WallPad UI | UX Design
IoT Device UI | UX
COMMAX UI | UX Design Plan
출근 전 시간 확인 또는 우산을 챙겨야 하는지 알기 위해 날씨 확인, 미세먼지 확인, 그리고 집안의 전열기구 등의 현재 사용량을 파악 확인 등, 사용자의 WallPad 사용목적을 정확하게 파악한 후 이에 적합한 디자인 플랜을 계획하였습니다. 바쁜 일상생활 속에서 WallPad는 빠르고 정확하게 정보 확인이 가능하여야 합니다. WallPad에 집중하지 않더라도 표현되는 정보를 쉽게 파악할 수 있도록 하기 위해 컬러를 이용한 사용자 인지 반응 시간을 단축시켰습니다. 긍정의 정보 표현은 하늘색에서 연두색으로 표현, 위험 또는 조심의 정보 표현은 분홍에서 보라색으로 표현하여 사용자들이 쉽게 인지할 수 있도록 하였으며, 톤 다운된 백그라운드 컬러를 사용하여 컬러 대비 값을 높이는 방법을 채택, 더 인지 반응 시간을 단축시켰습니다.
We planned a suitable design plan after accurately understanding the user's purpose of using WallPad, such as checking the time before going to work, checking the weather and fine dust, and checking the current usage of home heating appliances to see if an umbrella needs to be taken. In busy daily life, WallPad needs to provide quick and accurate information. To make it easy for users to perceive the displayed information even without focusing on WallPad, we shortened the user perception reaction time using colors. Positive information is expressed in shades of green from sky blue, and dangerous or cautious information is expressed in shades of purple from pink to help users easily perceive it. We also adopted the method of using toned-down background colors to increase color contrast values and further shorten the perception reaction time.
상세 제어 버튼
상세 제어가 필요한 버튼은 기본 정보 및 간편한 조작이 가능하도록 제작하였으며 터치를 통해 상세 제어페이지로 진입 가능
ON | OFF 버튼
ON | OFF 만 필요한 조명의 경우 버튼 아이콘으로 제어
위치 선택 휠 버튼
위치 목록이 추가되면 좌 우로 움직이는 휠 버튼으로 장소 선택이 가능하도록 제작
위치 선택 휠 버튼
IoT 제어를 원하는 곳을 좌우 휠 버튼을 통해 선택
ON | OFF 버튼
조명은 ON | OFF 버튼으로 편리하게 조명 제어
상세 제어 버튼
제어창에서 정보제공 및 간단한 조작 가능한 버튼
마우스로 VR을 컨트롤 해보세요.
Brand Purpose
창작자들을 위한 플랫폼인 언타이틀드 타이틀은 메타버스 공간내에 NFT 디지털 아트 및 실제 제품의 전시 및 홍보가 가능하며 해당 판매 웹으로 이동이 가능한 새로운 플랫폼입니다.
창작자들과 소비자들의 새로운 만남을 만드는 언타이틀 타이틀의 가상공간의 전시를 통해 언제, 어디서나, 어디서든지 공간의 제약없이 쇼룸을 방문하여 편하고 자유롭게 디자이너 및 작가들의 작품을 관람하고 판매 및 구매를 할 수 있습니다. (구매페이지는 향후 오픈 예정입니다.)
Untitle Title, a platform for creators, is a new platform that allows exhibition and promotion of NFT digital art and actual products in the metabus space and can be moved to the sales web.
Through the exhibition of virtual space under the Untitled title, which creates a new meeting between creators and consumers, you can visit the showroom anytime, anywhere, anywhere without space restrictions to view, sell, and purchase works by designers and writers comfortably.
(The purchase page will be open in the future.)
Responsive
Background
Point COMMAX Color
Acrylic Fluent Design
IoT Device Smart Home Display UI | UX Design
코맥스는 인터폰부터 비디오폰, 스마트홈 시스템과 시큐리티 솔루션 등 앞선 기술력과 차별화된 제품은 물론 고객이 누려야 할 삶의 안전과 가치를 위한 다양한 서비스&플랫폼을 제공하는 A.I HOME 전문 기업입니다.
COMMAX is a specialized A.I home company that offers a variety of services and platforms to enhance the safety and value of customers' lives. The company's products are differentiated by advanced technologies, such as interphones, video phones, smart home systems, and security solutions.
Goal & Mission
유저들이 사용하기 쉬우면서 코맥스만의 아이덴티티가 보일 수 있는 UI | UX 제작을 하였습니다. UI | UX는 사용자의 필요성에 의해 메인에 정보를 선택적으로 배치할 수 있도록 커스텀 위젯으로 제작, 이를 통해 코맥스만의 차별화된 UI | UX 아이덴티티 구축하였습니다. 또한 코맥스 IoT Device WallPad 만의 아이콘 제작과 함께 컬러톤을 정립하였습니다.
We designed a user interface (UI) and user experience (UX) that is easy for users to navigate and reflects COMMAX's unique identity. The UI/UX includes a custom widget that allows users to selectively place information on the main page based on their needs. This design approach helped establish COMMAX's distinctive UI/UX identity. Additionally, we created a unique icon for the COMMAX IoT Device WallPad and established a color scheme to complement it.
VALUE OF LIFE
ADVANCEMENT
OF
TECHNOLOGY
CONNECTION
AND
EXPANSION
VALUE OF LIFE
ADVANCEMENT
OF
TECHNOLOGY
CONNECTION
AND
EXPANSION
NEW UI | UX DESIGN
Digital Convergence
Fusion
COMMAX
Softwear
COMMAX
Hardwear
UX | UI planning approach
사용자들이 WallPad에서 제공되는 정보를 쉽게 파악할 수 있도록 백그라운드를 활용하는 방법을 사용하였습니다. Home Screen에서 Control Window 전환은 상세 조작이 가능한 화면으로 진입해 있다는 인식을 Depth 발생을 통해 인지하도록 구현하였습니다. 더 세밀한 조작을 위한 Second Control Window는 Modal Window에 Dialog UI로 구성을 하였습니다. 이는 상세 조작을 위해 한 단계 더 깊이 들어가는 Depth를 사용자가 느끼지 못하게 하기 위해 Modal Window로 플래닝을 하였으며, 언제든 Home Screen으로 빠져나갈 수 있습니다. UI | UX 또한 코맥스만의 시각적인 일관성을 보여주기 위한 플래닝으로 디자인 하였습니다.
We utilized the background to enable users to easily understand the information provided on the WallPad. To help users recognize the transition from the Home Screen to the Control Window, we implemented Depth perception. The Second Control Window, which allows for more detailed operations, was designed as a Modal Window with a Dialog UI. This was planned as a Modal Window to prevent users from feeling the additional Depth required for more detailed operations, and users can return to the Home Screen at any time. The UI/UX was also designed with planning to show COMMAX's visual consistency.
Widget | 사용성에 맞게 편집 가능하도록 레이아웃 구성
Layout
Home Screen
Control Window
Control (Modal) Window
Apps Window
Apps Window
Control Window
Home Screen
Control (Madal) Window
UX | UI planning approach
UI | UX Concept
Acrylic Fluent Design System
Acrylic Fluent Design
다중 레이어 방식으로 백그라운드에 표현되는 날씨 정보나 컬러를 통해 정확하게 화면을 보지 않더라도 정보를 인지할 수 있도록 하였습니다. 자세한 정보가 표시되는 상태 정보창은 Opacity 퍼센트의 변화를 주어 배경과 정보창의 분리를 통해 가독성을 높이고 명확한 정보인식을 할 수 있도록 하였습니다.
We used a multi-layered approach to display weather information or colors on the background, allowing users to perceive information accurately without looking at the screen carefully. The status information window, which displays detailed information, was designed to increase readability and enable clear information recognition by changing the Opacity percentage to separate the background and the information window.
Modal Window
다중 레이어 제어창인 모달 윈도우
상세 제어버튼
제어창에서 정보제공 및 세밀한 조절이 가능한 버튼
다중 레이어 방식으로 백그라운드에 표현되는 날씨 정보나 컬러를 통해 정확하게 화면을 보지 않더라도 정보를 인지할 수 있도록 하였습니다. 자세한 정보가 표시되는 상태 정보창은 노이즈의 추가로 배경과 정보창의 분리를 통한 명확한 정보인식을 할 수 있도록 하였습니다.
We used a multi-layered approach to display weather information or colors on the background, allowing users to perceive information accurately without looking at the screen carefully. The status information window, which displays detailed information, was designed to enable clear information recognition by separating the background and the information window through the addition of noise.
Apps | 모든 앱 화면
전체 앱이 표시되는 Apps 화면
ICON
Font
Color System
COMMAX Icon
코맥스만의 아이덴티티가 녹아있는 아이콘을 제작하였습니다.
아이콘의 아이덴티티 중 하나인 컬러는 그린 컬러를 차용하여 아이콘의 시인성을 높였습니다. 그리고 WallPad의 UI | UX에 사용되는 아이콘은 터치가 원활하게 되어야 하기 때문에 시인성과 터치를 고려하여 적절한 라인의 두께를 정하였습니다. 또한 일부 끊겨 있는 아이콘의 라인을 통해 역설적으로 연결의 의미를 내포하는 코맥스의 아이콘 아이덴티티를 제작하였습니다.
We created icons that incorporate COMMAX's unique identity.
One of the identity elements of the icon is the color, which was adopted from COMMAX's green color to increase the visibility of the icon. In addition, the thickness of the lines was determined considering the visibility and touch sensitivity required for the UI | UX of WallPad. Some icons have broken lines to create an icon identity that paradoxically implies connection through disconnection.