yocyo-academy-icon-design
yocyo-academy-icon-design
yocyo-academy-icon-design
yocyo-academy-icon-design

2025

2025

YOCYO

요시요 영상 아카데미 홈페이지 디자인 Website Design for Yocyo Video Academy
www.yocyo.com

product page design

product page design

design asset

design asset

Project Overview

Project Overview

Project Overview

요시요 영상 아카데미는 영상 제작을 통해 개인의 이야기를 세상과 연결하는 교육 기관입니다.
이지스파크는 이번 프로젝트에서 아카데미의 전문성과 깊이 있는 스토리텔링 분위기를 극대화하기 위해,
브랜드 컬러를 활용한 신비로운 그라데이션 디자인을 전면에 적용했습니다.

모든 아이콘, 버튼, 타이포그래피 포인트 색상에 이르기까지 그라데이션 요소를 일관되게 반영했고,
페이지의 배경과 섹션 경계(border)에도 그라데이션을 가미하여 화면 전반이 하나의 유기적인 흐름을 가지도록 설계했습니다.
이를 통해 방문자는 단순히 정보를 읽는 것이 아니라, 브랜드의 비주얼 세계관 안에 몰입할 수 있게 됩니다.

메인 페이지에서는 강렬하고 세련된 영상 이미지 위에 그라데이션 레이어를 더해
아카데미의 창의성과 전문성을 동시에 전달했으며,
내부 페이지에서는 커리큘럼과 수강 환경이 직관적으로 전달되도록 정보 구조를 재정비했습니다.

이지스파크는 이번 프로젝트를 통해,
“브랜드의 색과 감성을 화면 전반에 스며들게 하는 디자인”을 구현했습니다.

Yoshiyo Video Academy is an educational institution dedicated to connecting personal stories with the world through video production.
For this project, EasySpark focused on amplifying the academy’s professionalism and deep storytelling atmosphere by applying a mysterious, brand-driven gradient design throughout the entire interface.

Every icon, button, and typographic accent incorporated carefully crafted gradient elements,
while even borders and background layers carried subtle gradient treatments—creating a cohesive, organic flow across the entire site.
This approach allows visitors not only to read information, but to immerse themselves in the brand’s visual universe.

On the main page, striking and sophisticated video imagery was overlaid with gradient layers to convey both creativity and professionalism.
Internal pages were restructured to present the curriculum and learning environment with clarity and precision, ensuring a seamless user experience.

With this project, EasySpark achieved a design where
“the brand’s colors and emotions permeate every pixel”—delivering a visually engaging and strategically consistent web presence.

Icon-Driven Visual Storytelling

요시요 영상 아카데미 홈페이지에서는 핵심 기능과 가치를 직관적으로 전달하기 위해
이지스파크가 맞춤형 아이콘 세트를 디자인했습니다.
영상 제작, 수익 창출, 포트폴리오, 자료 예시 등 주요 카테고리를
브랜드의 그라데이션 스타일로 통일해 즉시 인식 가능하게 표현했습니다.

이 아이콘들은 레이아웃 전반에 자연스럽게 녹아들어,
복잡한 내용을 한눈에 이해할 수 있도록 돕고 사이트의 전문성과 일관성을 강화했습니다.

For the Yoshiyo Video Academy website, EasySpark designed a custom icon set to visually and intuitively communicate the platform’s core functions and values.
Key categories such as video production, revenue generation, portfolio building, and reference materials were unified with the brand’s signature gradient style for instant recognition.

These icons are seamlessly integrated throughout the layout,
making complex information immediately understandable and enhancing the site’s professionalism and visual consistency.

Page Design & User Journey

Page Design & User Journey

Page Design & User Journey

Designing journeys, not just pages

요시요 영상 아카데미 홈페이지의 페이지 디자인은
방문자가 처음 진입하는 순간부터 핵심 정보에 도달하기까지의 여정을 세밀하게 설계한 결과물입니다.

  • 메인 페이지: 브랜드의 전문성과 감각을 강조하기 위해,
    풀스크린 비주얼과 그라데이션 오버레이를 활용하여 강렬한 첫인상을 제공합니다.

  • 교육 과정 소개 페이지: 커리큘럼을 한눈에 이해할 수 있도록 모듈형 레이아웃과 직관적인 아이콘을 배치했습니다.

  • 포트폴리오 페이지: 수강생 작품과 아카데미의 결과물을 비주얼 중심으로 배치해 설득력을 강화했습니다.

  • 자료실 페이지: 다운로드 가능한 예시 자료와 참고 콘텐츠를 구조적으로 정리해 재방문을 유도했습니다.

전체 페이지는 그라데이션 컬러, 정돈된 여백, 유기적인 UI 패턴을 통일성 있게 적용해,
브랜드 아이덴티티를 일관되게 경험할 수 있도록 디자인되었습니다.

The page design for the Yoshiyo Video Academy website was crafted to guide visitors seamlessly
—from their first arrival to engaging with the most important content—through a carefully planned user journey.

Main Page: Uses full-screen visuals with gradient overlays to deliver a striking first impression of the brand’s creativity and professionalism.

  • Course Introduction Page: Features a modular layout with intuitive icons, making the curriculum easy to grasp at a glance.

  • Portfolio Page: Showcases student projects and academy results in a visually compelling format, strengthening credibility.

  • Resources Page: Organizes downloadable examples and reference materials to encourage repeat visits.

Throughout the site, gradient color schemes, balanced whitespace, and cohesive UI patterns are applied consistently,
ensuring a unified and memorable brand experience.

yocyo-academy-pdp-design
yocyo-academy-pdp-design
yocyo-academy-pdp-design
yocyo-academy-roadmap-design
yocyo-academy-roadmap-design
yocyo-academy-roadmap-design

Instructor Profiles & Awards Page Design

Instructor Profiles & Awards Page Design

Instructor Profiles & Awards Page Design

A page that turns expertise into trust—showcasing instructors and the academy’s achievements at a glance.

강사 소개 페이지는 각 강사의 전문 분야, 경력, 대표 작품을 직관적으로 전달하는 데 초점을 맞췄습니다.
풀프레임 인물 사진과 간결한 프로필 카드 레이아웃을 사용해, 방문자가 얼굴과 이력을 동시에 기억할 수 있도록 구성했습니다.

수상 내용 페이지는 아카데미의 신뢰도를 높이기 위해 수상 로고, 연도, 대회명, 수상 부문을 명확히 구분하고,
브랜드의 그라데이션 컬러 오버레이를 적용해 시각적으로 고급스럽게 마감했습니다.
두 페이지 모두 동일한 그리드 시스템과 여백 규칙을 적용해,
사이트 전반에서 브랜드 일관성을 유지했습니다.

The Instructor Profiles page focuses on presenting each instructor’s expertise, career background, and signature works in a clear and engaging way.
A combination of full-frame portraits and concise profile cards ensures visitors can connect faces with professional credentials instantly.

The Awards page enhances credibility by clearly listing award logos, years, event names, and categories,
all finished with a refined brand-gradient overlay for a premium look.
Both pages follow the same grid system and spacing rules,
ensuring visual consistency across the entire site.

yocyo-academy-web-design-instructor-introduce-design
yocyo-academy-web-design-instructor-introduce-design
yocyo-academy-web-design-instructor-introduce-design

Trust Section

Trust Section

Trust Section

Authority & Student Letters Design

권위와 신뢰 영역은 방송 출연, 펀딩 성공을 시각적으로 3개의 레이아웃으로 한눈에 볼 수 있도록 구성했습니다.
방문자는 직관적인 카드형 디자인을 통해 브랜드의 성과와 영향력을 빠르게 인지할 수 있습니다.

특히, 강사 소개 페이지에 권위와 신뢰를 입증하는 정보는 필수입니다.
공신력 있는 이력, 수상 실적, 언론 노출, 성과 데이터는
강사의 전문성을 시각적으로 뒷받침하며, 수강생의 신뢰도를 높이는 핵심 요소입니다.

수강생 편지 디자인은 손편지 이미지와 함께 짧은 핵심 문장을 시각적으로 강조하여,
한눈에 감동 포인트를 전달하도록 했습니다.
편지 영역은 따뜻한 감성을 유지하면서도,
전체적인 브랜드의 그라데이션 컬러 포인트를 적용해 사이트 전반의 통일성을 유지했습니다.

The Authority & Trust section showcases TV appearances and successful funding achievements in three distinct layouts for an at-a-glance view.
An intuitive card-based design allows visitors to quickly recognize the brand’s accomplishments and influence.

In particular, authority and trust indicators are essential in any instructor profile page.
Credible credentials, awards, media features, and performance data are
critical in visually reinforcing the instructor’s expertise and building student trust.

The Student Letters section pairs handwritten note images with short, highlighted key phrases
to instantly convey moments of emotional impact.
While maintaining a warm, personal tone,
the design incorporates the brand’s signature gradient accents to ensure consistency across the entire site.

yocyo-academy-web-design
yocyo-academy-web-design
yocyo-academy-web-design

More Works

(ES® — 02)

©2025

More Works

(ES® — 02)

©2025

More Works

(ES® — 02)

©2025

FAQ

FAQ

FAQ

01

What does a project look like?

02

How is the pricing structure?

03

Are all projects fixed scope?

04

What is the ROI?

05

How do we measure success?

06

What do I need to get started?

07

How easy is it to edit for beginners?

What does a project look like?

How is the pricing structure?

Are all projects fixed scope?

What is the ROI?

How do we measure success?

What do I need to get started?

How easy is it to edit for beginners?

01

What does a project look like?

02

How is the pricing structure?

03

Are all projects fixed scope?

04

What is the ROI?

05

How do we measure success?

06

What do I need to get started?

07

How easy is it to edit for beginners?