2019년에 만들어진 i awards 출품작들 중 볼만한 사이트들 모음집
안녕하세요, 리플러스입니다. 이번에는 한국 인터넷전문가협회에서 주최하는 연간 디자인 행사인 i awards에 관련된 내용을 다뤄봅니다. 이번 연도에 출품된 웹 프로젝트들 중 어떤 사이트들이 들여다볼만한지. 그리고 그 사이트들의 장단점은 무엇인지를 정리해보겠습니다.
-
이번 정리글은 총 342개의 노미니된 사이트들 중, 웹 컴포넌트 완성도와 사용성, 컨텐츠 규격을 들여다보는 방식으로 진행을 하였습니다.
1. CJ 쿡잇
https://www.cjcookit.com/pc/main
- CJ 계열 음식주문 + 배달 서비스
- 완성도 높은 자체 이미지 제작 사용
- 이미지가 많고 PC와 모바일 페이지간의 컴포넌트 차별화로 파편화 발생
- 모바일 규격에 특화된 설계 / UI 컴포넌트 완성도 높음
- CJ 홈쇼핑 규격과 유사한 상세페이지 규격 / 하지만 더 간결해지고 정리된 모습
- 모바일에서의 카드 규격을 사용해 그루핑이매우 잘 되어있는 케이스
- 커머스 사이트 제작시 참고자료로 사용하기에 좋다고 판단됨
대표적 화면정리
https://www.figma.com/file/VSrtFdtRNq1mlr6HRFVFOV/i-Awards---CJ-Cookit?node-id=0%3A1
2. 서울 디지털 대학교
- 서울 디지털 대학교의 학교소개 / 인원모집 / 내부 시설안내 페이지
- 준 포탈급에도 불구하고 빠른 반응속도 보유함 / 대부분의 페이지가 반응형 지원
- 사용자를 위해 맞춤형으로 만든 메뉴구조, 사용자의 이해를 돕는 페이지별 레이아웃
- 반응형 처리를 고민한 컴포넌트로 인해 모바일과 PC 모두 사용성이 뛰어남
- 은행 사이트에 버금갈 정도의 간결한 시각물들과, 깔끔한 메뉴규격들
- 복잡한 규격을 위해 빵가루 (bread Crumb) UI를 적극 사용
- 모든 페이지가 프린트하더라도 문서형태로 확인할 수 있도록 정리된 레이아웃
- 타 학교 페이지들의 오래된 프레임에 비해 매우 우수한 완성도와 사용성
- 준 포탈급 사이트 제작시 참고자료로 쓰기에 좋을만큼 복잡도와 완성도 모두 높음
대표적 화면정리
3. 삼성화재
- 삼성화재의 PC전용 상품소개 및 상태확인 페이지
- 일반 고객과 기업용 페이지를 한 프레임 안에서 이동 가능
- 상품의 갯수가 매우 많고 다양하지만 간결한 동일 규격으로 일광성있게 풀어냄
- 모바일 대응은 세부페이지 접속 시도시 모바일 앱으로 연결하는 방식으로 대처
- 무난한 프레임 구성으로 반복재생산 / 유지보수가 편리한 구조
- 좌측 네비게이션 메뉴를 적극적으로 이용하였으며, 메가메뉴도 함께 사용함
- 시스템적 상세 페이지 제작시 기초적인 참고자료로 사용하기에 좋다고 판단됨
대표적 화면정리
4. LG 하우시스
- LG 하우시스의 사업소개 / 제품 카달로그 사이트
- 시원시원한 이미지 레이아웃으로 전형적인 갤러리 형태를 사용
- 개별 페이지들은 이미지가 많긴 하지만, 가볍게 느껴질만한 컨텐츠들이 많음
- PC와 모바일의 도메인을 나누어 지원중이며 PC에서의 사용성이 훨씬 뛰어남
- 메뉴의 경우 2차 메뉴까지 사용하여 최대 3 뎁스까지 들어가는 형태.
- 시각적으로 보기에는 깔끔해보이나 컴포넌트별 간격이나 텍스트 크기 사용이 조금 불안정함
- 갤러리 형태의 사이트 제작시 일부 참고자료로 사용하기에 좋다고 판단됨
대표적 화면정리
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다. 저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
https://brunch.co.kr/@clay1987/113