$blue: #03A9F4
$black-weak: #393939
국내 최초 수출입 물류 플랫폼
물류를 연결하다, 세상을 연결하다 : 트레드링스
트레드링스는 폐쇄적인 수출입 물류시장의 비효율성을 개선하고, 수출입에 필요한 모든 정보를 제공하기 위해
2015년 설립된 국내 최초 수출입 물류 플랫폼입니다.
- Date
- 2017 - 2022
- Role
- Design(100%)ㆍPublishing(100%)
- Platform
- WebㆍMobileㆍResponsive
Overview
- |
- |
- |
- |
- |
- |
- |
- |
트레드링스는 국내 최초 온라인 물류 플랫폼으로, 새로운 UX가 필요한 경우가 많았기에,
Agile 방식을 통한 빠른 수정과 배포로 최대한 많은 피드백을 받으며 사용자들의 Needs를 파악해 갔으며,
적극적인 의견 수렴을 통한 부분 리뉴얼과 직관적인 아이콘, 애니메이션과 일러스트등을 활용하여
점차 트레드링스의 UX에 익숙해져 갈 수 있도록 제작하였습니다.
TRADLINX
Design
Guidelines
Logo
Basic
No Slogan
Background
on-offline public color
- C:100 / M:100 / Y:60 / K:10
- #1b2850
- C:0 / M:0 / Y:70 / K:0
- #27bced
Color
common/_color.scss
트레드링스의 컬러는
메인 두 가지를 중심으로
다양한 포인트 컬러를
사용합니다.
단, 메인컬러를 제외한 컬러는
ATD/ETD, 경고, 강조등 외엔
사용하지 않습니다.
$gray-bg: #F2F5FA
$gray-text: #929AA7
$orange: #F5B058
$red: #F44336
$mint: #48CFAD
$lavender: #967ADC
$yellow: #FFFB54
$green: #8CC152
Button
common/_btn.scss
- btn-default
- btn-blue
- btn-black
- btn-lavender
- btn-red
- btn-green
- btn-mint
- btn-orange
- btn-gray
Button Size
padding: 14px 60px
padding: 10px 40px
padding: 6px 20px
padding: 3px 8px
Form
common/_form.scss
Input
Select Box
Default
Hover
Focus
Tradlinx
LinGo
ShipGo
Zimgo
Account
Check Box
Default
Hover
Focus
Disabled
Error
Typography
common/_common.scss
가
Aa
수출입을 하는 모든 기업에게 통합 화물 관리 시스템을 제공하여 물류비용 절감 및 관리, 화물 모니터링을 가능하게 하며 물류 서비스 제공자들에게 업무 프로세스의 개선과 사업 확장의 기회를 제공하고 있습니다.
가
Aa
수출입을 하는 모든 기업에게 통합 화물 관리 시스템을 제공하여 물류비용 절감 및 관리, 화물 모니터링을 가능하게 하며 물류 서비스 제공자들에게 업무 프로세스의 개선과 사업 확장의 기회를 제공하고 있습니다.
Nanum Gothic / font-size: 12px / line-height: 1.35
h1
24px
h2
20px
h3
16px
주요 작업 방식
부분 리뉴얼을 통한 부담스럽지 않은 고도화 작업
2017년 리뉴얼 당시, 부분적으로 개발 소스를 그대로 써야 하는 이슈가 생겨
전체 리뉴얼을 하지 못하였지만, 시간이 날 때마다 작은 부분에서부터 크게는 페이지까지
점차적으로 고도화 작업을 진행하며, 당시 적은 인원의 개발자와 디자이너 모두
부담스럽지 않도록 작업을 진행했습니다.
01. Input, Label 등의 Form 스타일 변경
기본 스타일의 Form과 버튼 스타일들을 라인 애니메이션이 들어간 디자인과
라운드 버튼으로 변경하고 그 주변이 어우러질 수 있도록
부분적으로 스타일을 변경해나갔습니다.
- FCL
- LCL
02. Accordion과 Progress
많은 데이터와 스크롤을 Accordion을 활용하여 일부 해소하고
Progress와 Timeline 디자인을 적용하여
비주얼적인 위치 정보를 제공하였습니다.
03. 반응형 테이블과 애니메이션
대부분이 테이블과 Form으로 이루어져 다소 딱딱할 수 있는 디자인과
모바일에 최적화가 되지 않아 웹에서만 사용 가능했던 서비스에
반응형과 애니메이션을 적용하여 사용자에게 시각적 재미와 활동 영역을 넓혀주었습니다.
마감서류 요청 목록
Invoice
파일찾기
Packing List
파일찾기
완료상태4 / 4
- 엠티 픽업지
- 반입지 정보
- Closing Time
