The official website of Circle Connection

― 2025

― 2025

Site/Demo Link

ccon.co.kr

Description

We redesigned the official website of Circle Connection, an agency specializing in offline events and brand campaigns, using Framer. The CMS structure was built to enable the client to easily manage and update content, and the new design visually reflects the brand’s modern and dynamic identity. All projects are organized in a keyword- and tag-based system, allowing for clear and efficient exploration of the company’s diverse work.

오프라인 이벤트와 브랜드 캠페인을 전문으로 하는 에이전시 서클 커넥션의 공식 웹사이트를 Framer 기반으로 새롭게 디자인하고 구현하였습니다. 새로운 디자인은 브랜드의 모던하고 역동적인 아이덴티티를 시각적으로 반영하며, 클라이언트가 콘텐츠를 손쉽게 관리할 수 있도록 CMS 기능을 지원합니다. 모든 프로젝트는 키워드 및 태그 기반으로 구성하여 다양한 프로젝트를 효율적으로 탐색할 수 있도록 설계하였습니다.

The home and mission section of the Circle Connection website. The top part shows a fullscreen background video or image of an event venue. Below is a section titled "Our Mission" with a circular graphic and the message “Connecting Passionate People Around The World,” along with supporting Korean text. Mobile versions are shown beside.The Business Area and After Movie sections of Circle Connection. The Business Area shows a vertical list of event types on the left and a large event photo on the right labeled "Conference". The After Movie section displays a promotional video frame with a description about the event’s atmosphere. Mobile views are included.The Clients and Explore by Tag pages. The Clients section lists various partner logos in a grid layout. The tag page displays events filtered by the “Community” tag, along with a vertical tag menu on the left. Mobile views adapt the layout for smaller screens.The “About Us” section of Circle Connection. The page describes the company's background, mission, and founding year with both Korean and English text. It includes the brand logo, profile download buttons, and a section on company strengths with icons and short descriptions. Mobile view is included.The Projects section listing events Circle Connection has managed. Event cards include project names and dates. The page includes filters by event type and a preview of an individual project—“Upstage AI Hackathon”—with gallery images and an overview. Mobile layout stacks the content vertically.The Bulletin section for announcements and internal news. The page shows a list of articles including job openings and logo guides. An individual post displays a visual brand guide with logo sizing and spacing specifications. A responsive mobile layout is shown on the right.

Architecture for the web,

grounded in semantics.

Semantic Ground © 2025.

All rights reserved.

SEMANTIC GROUND

Architecture for the web,

grounded in semantics.

Semantic Ground © 2025.

All rights reserved.

SEMANTIC GROUND

Architecture for the web,

grounded in semantics.

Semantic Ground © 2025.

All rights reserved.

SEMANTIC GROUND