Overview
일상 속 보이는 곳과 보이지 않는 모든 곳에는 시스템 칩이 있습니다. 수퍼게이트는 시스템 칩을 통해 편리하고 안전한 우리의 일상을 만들고 미래를 설계합니다. 수퍼게이트는 고객의 일상과 밀접하게 맞닿아있는 그들의 연구와 기술을 사이트를 통해 소개하고 있습니다.
Goal
수퍼게이트는 기업 브랜드 인지도를 향상시킬 수 있는 사이트를 만드는데 목적이 있습니다. 시스템 칩 설계를 필요로하는 기업을 위한, 명확한 비즈니스 모델을 필요로하는 투자 기업을 위한, 그리고 일하고 싶은 일터를 찾고있는 유능한 개발 인재를 위한 사이트가 필요했습니다.
Insight
수퍼게이트의 니즈를 파악하기 위해 실무자의 의견을 들어보았습니다. 콘텐츠 자체의 낮은 디자인 퀼리티에 대한 언급과 기업 브랜드 강화에 대한 기대도 있었습니다. 기존 사이트에 대해 아쉬웠던 부분은 아래와 같이 정리할 수 있었습니다.
Strategy
사이트의 목적과 인사이트를 통해 웹사이트의 제작방향에 대해서 세가지 관점으로 정리하였습니다.
1. Design
기업 브랜드 가치와 아이덴터티를 담은 디자인을 지향합니다. 컬러와 폰트, 그리고 UI 요소들까지 조화롭고 일관된 디자인 시스템이 필요합니다.
2. Usability
디지털 콘텐츠를 잘 보여줄 수 있는 유형별 레이아웃 시스템이 필요합니다. 모니터, 휴대폰, 태블릿과 같은 다양한 디바이스 환경을 고려해야 합니다.
3. Maintainance
콘텐츠와 데이터를 지속적으로 관리할 수 있는 사이트가 되어야 합니다. 콘텐츠를 유형별로 블록화하여 누구나 쉽게 사이트를 관리할 수 있어야 합니다.
수퍼게이트
회사소개
Our Chip
Our Idea
Our Brand
비즈니스
Our Business
Our Clients
Our Edge Segment
Our Project
기술
Process Tech
AI SW Tech
HW Flatform Tech
PoW Process
Blockchain
아카이브
News
Notice
Case-study
채용안내
Introduction
Our Culture
Announcement
Procedure
1.
Design
사이트를 구성하는 제목, 텍스트, 이미지, 배경색 등 유형별로 색상 체계를 정립하였습니다. 콘텐츠의 중요도와 글의 강약에 따라 텍스트 종류를 체계화 하였으며, UI 디자인 아이템들과 유기적이며 조화롭게 보일 수 있도록 디자인 하였습니다.
Headings & Background
R25 G42 B61
C90 M76 Y50 K53
#192a3d
Base Text
R58 G79 B102
C82 M65 Y41 K24
#3a4f66
Links
R21 G89 B237
C83 M67 Y0 K0
#1559ed
Headline 2
font: 'NotoSans KR', 700
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -0.05em;
가 나 다 라 마 바 사 아 자 차 카 타 하
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Paragraphs
font: 'NotoSans KR', 400;
font-size: 18px;
line-height: 1.8;
letter-spacing: -0.02em;
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
2.
Usability
사이트 개발 환경에서 기본적으로 제공되는 반응형 디자인 이외에도 별도의 섬세한 레이아웃 디자인 기준을 마련하였습니다.
Mobile
모바일 화면에서 상단 메뉴는 항상 노출될 수 있도록 고정시켜 놓았습니다. 다양한 크기의 해상도에 대한 사용성을 높일 수 있도록 가변 영역의 기능을 활용하여 레이아웃을 디자인하였습니다.
3.
Maintainance
수퍼게이트 사이트의 관리자 페이지는 '콘텐츠 블록' 별로 템플릿 디자인을 제공하고 있습니다. 모듈화된 블록 디자인을 통해 누구나 쉽게 사이트 콘텐츠를 편집할 수 있습니다.
Contents blocks
회사소개 페이지의 하위 메뉴인 'Our Chip' 페이지는 헤더 영역을 포함하여 총 6개의 콘텐츠 블록 디자인으로 완성되었습니다.
Conciseness
'Our Idea' 웹페이지는 미래에 쓰일 기술을 소개하고 있습니다. 이종 컴퓨팅과 같이 실체화하기 어려운 콘텐츠는 사용자 측면을 고려하여 이미지와 키워드를 활용하였고, 2단 구성의 시각적 정보 구조를 통해 이해를 돕고자 하였습니다.
Client
Supergate
Project
Website
Developped by
Wordpress
Blocksy Theme
Elementor
UI Designed by
Figma
Designed by
Photoshop
Illustration