UI








플러스엑스 UI 실무 마스터 패키지

Plus X UI Package

Process   UI Basic   Collaboration   UI Design Guide   Interaction Design

플러스엑스와 함께 UI 디자인을 시작해 보세요.
0일 0시간 0분 0초 2023-06-30T23:59
(자동) (자동) (자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)
수강 신청하기

Plus X가 준비한
4가지 UI 강의를 모두 담은 패키지

UI 디자인 프로세스, UI 디자인 기초, UI 디자인 협업, UI 인터랙션 디자인 4개 강의를 평생 수강 가능한 패키지로 Plus X의 UI 디자인 노하우를 마스터합니다.

Plus X가 일하는 방식을
경험할 수 있는 15가지 실무 사례

플러스엑스의 실무 프로젝트를 바로 옆에서 보는 것처럼 자세하게,
그동안 공개되지 않았던 내부 자료와 다양한 실무 사례들을 공유합니다.

내 프로젝트에 바로 적용 가능한
8가지 UI 템플릿 문서

10년 이상의 UI실무 경험이 담긴 플러스엑스의
내부 템플릿 문서를 바로 활용 가능한 형태로 공유합니다.
Summary

UI 디자이너에게 필요한 모든 디테일을 담은 4개의 개별 코스를
실무 마스터 패키지로 한 번에 수강하세요.


We plus experience for your brand.

Plus X는 브랜드 기반의 통합 디자인 솔루션을 만들고 있습니다.

29CM, YG, 카카오 페이지, 어도비, KT 등 13년간 국내 최고 기업들과 156개의 프로젝트 진행
어워드 수상 56개, 대상 수상작 14개, Behance Selected 작품 109개

Plus X Share X

최고의 기업들과 성공적인 UI 디자인 프로젝트를 만들어온
Plus X UI 팀의 업무 프로세스를 그대로 공유합니다.

그동안 많은 분들께 저희의 디자인 작업을 공유해왔고 그 과정에서 저희도 성장했습니다.
이번에는 강의를 통해 업무 프로세스를 더 자세히, 더 많은 분들과 나누고자 합니다.

Instructor
안녕하세요.
Plus X UI 디자인 팀입니다.

플러스엑스 UI 디자인팀은 서비스를 통해
브랜드만의 가치를 사용자 경험으로 만드는 팀으로서
브랜드와 사용자간의 모든 상호작용 요소에 대해
고민하고, 일관성있는 경험을 만드는 것에 집중합니다.

본 강의에서는 플러스엑스의 UI 디자인 프로세스와 노하우,
UI 디자이너에게 필요한 전반적인 내용을 체계적으로 정리해서
저희가 실제로 디자인한 UI 프로젝트 사례를 통해서
최대한 디테일하게 알려드리기 위해 노력했습니다.

일관성있는 브랜드와 사용자 경험을 위해 고민하는 디자이너 분들과
좋은 프로덕트를 만들기 위해 고민하는 모든 분들께
플러스엑스 UI 디자인 팀의 이야기가 도움이 되길 바랍니다.

UI Portfolio

온라인 서비스를 통해 브랜드 경험을 전달하고,
사용자 경험에 감성을 더합니다.

Share How

현직 디자이너, 예비 디자이너분들의
설문조사를 기반으로 준비했습니다.

BX 디자인 준비
Roadmap

UI 디자이너에게 필요한 모든 디테일을 체계적으로 정리해서
하나의 커리큘럼으로 구성했습니다.

BX 패키지 커리큘럼

플러스엑스의 UI 디자인을
Full 프로세스로 경험할 수 있는 가장 합리적인 선택

모든 강의는 개별 강의로 수강하실 수 있습니다.
전체 과정을 한 번에 배우고 싶으신 분들은 본 패키지 강의를 구매하시면 더욱 저렴하게 수강할 수 있습니다.

* 2023년 6월 판매가 기준


Plus X Share X는 업계에서 수년간의 경험을 통해 검증해온 전문적인 교육 플랫폼입니다.
우리의 경험이 누군가에게는 실무 능력을,
누군가에게는 새로운 크리에이티브 영역을 열어주는 성장의 동력이 될 수 있을 것이라 믿습니다.

Project Case

15개의 실제 UI 디자인 사례들을 디테일하게 살펴보며
최적의 사용자 경험을 만들기 위한 체계적인 방법을 알려드립니다.

  • Part 1. UI 디자인 프로세스

  • Case 1
    제안 프로젝트로 알아보는
    브랜드 아이덴티티

    제안 프로젝트를 통해 브랜드를 분석하고, 디자인 원칙을 설정하여 UI 디자인에 녹여내는지 알아봅니다.

  • Case 2
    구축 프로젝트로 알아보는
    UI 디자인 노하우

    실제 구축 디자인을 진행할 때 고려하는 사항과 플러스엑스의 UI 디자인 노하우에 대해 알아봅니다.

  • Case 3
    비핸스, 인스타, 자사 웹사이트로
    알아보는 PR 디자인 제작

    비핸스에서 전체 프로젝트 중 90%인 109개의 셀렉을 받은 플러스엑스의 PR 제작 방법에 대해 알아봅니다.

  • Part 2. UI 디자인 기초

  • Case 1
    커머스 앱 사례로 보는
    해상도 변화

    디바이스 운영체제에 따라 사용되는 해상도 및 효율적인 화면 베리에이션 작업에 대해 알아봅니다.

  • Case 2
    웹/앱 UXUI 실제 구축 사례로
    알아보는 해상도 활용

    프로젝트 특성에 따른 디자인 최적화에 필요한 해상도 설정 및 해상도 테스트 방식을 실무 사례를 통해 소개합니다.

  • Case 3
    PC/모바일 웹 사이트 작업 사례로
    알아보는 그리드 활용

    해상도별로 사용되는 그리드가 다른 만큼 사용성을 유지하기 위해 플러스엑스가 그리드를 사용하는 방식에 대해 알아봅니다.

  • Case 4
    PC/모바일 웹 사이트 작업 사례로
    알아보는 그리드 활용

    플러스엑스 내부 프로젝트를 통해 새로운 그리드 시스템을 디자인에 어떻게 녹여내었는지 살펴봅니다.

  • Case 5
    이커머스 앱 디자인 사례를 통해
    알아보는 화면 구조와 구성요소

    화면 구조를 이루고 있는 구성요소에는 어떤 것들이 있는지에 대해 살펴보고 디자인 스타일 확립에 영향을 미치는 요소에는 어떤 것들이 있는지 알아봅니다.

  • Case 6
    웹사이트 UI 구축 사례로 알아보는 구성요소의 활용

    화면을 구성하는 각 요소들은 어떤 역할로 활용되고 있는지 어떤 컨셉으로 통일성을 갖추고 있는지에 대해 알아봅니다.

  • Part 3. UI 디자인 협업

  • Case 1
    프로젝트 사례로 알아보는
    플러스엑스의 네이밍 룰

    실제 구축 디자인을 진행할 때 고려하는 사항과 플러스엑스의 네이밍 룰에 대해 알아봅니다.

  • Case 2
    실제 제작 방법으로 알아보는
    UI 디자인 가이드

    플러스엑스의 디자인을 개발자에게 잘 전달해주기 위해서는 어떤 방식으로 UI 디자인 가이드를 제작하고 활용하는지 알아봅니다.

  • Case 3
    웹/앱 UXUI 실제 구축 사례로
    알아보는 이미지 운영 가이드

    실제 구축 프로젝트를 사례로 플러스엑스의 이미지 운영 가이드 제작 방식에 대해 알아봅니다.

  • Part 4. UI 인터랙션 디자인

  • Case 1
    다양한 사례를 통해 알아보는 인터랙션 디자인의 기본원리

    실제 구축 디자인을 진행할 때 고려하는 사항과 플러스엑스의 네이밍 룰에 대해 알아봅니다.

  • Case 2
    모션에 대한 이해를 기반으로 디자인 프로토타입 제작

    애니메이션에 대한 이해를 바탕으로 실제 디자인 예시를 가지고 프로토타입을 통해 인터랙션을 구현해봅니다.

  • Case 3
    인터랙션 가이드 작성법과 실제 개발을 위한 커뮤니케이션 방법

    실제 구축 프로젝트를 사례로 플러스엑스의 인터랙션 디자인 가이드 제작 방식에 대해 알아봅니다.

Share All

실제 프로젝트에서 사용하는
8개의 문서 파일을 모두 공유합니다.

플러스엑스에서 10년 이상의 경험을 통해 검증해 온 노하우를 내 실무에 바로 활용해 보세요

한번 구매로, 평생 소장하세요.
(자동 구성) 가격이 인상됩니다.

조만간 가격이 인상될 예정입니다.
지금 구매하세요!

  • 정상가 (자동 구성)
  • 할인 금액 (자동 구성)
  • 최종 금액 (자동 구성)
  • 5개월 할부 시 월 (자동 구성)원
오늘이 최저가!
(자동) (자동) (자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)
수강 신청하기

Plus X Share X 모든 강의는 한 번 결제로 기간 제한 없이 평생 수강할 수 있습니다.

Curriculum

Part 1.
UI 디자인 프로세스

플러스엑스 UI 디자인에 대한 소개와 제안과 구축 프로세스를 통해 실제로 플러스엑스 UI 디자이너가
어떻게 프로젝트를 진행하는지에 대해 알아보고, 완료된 프로젝트의 PR 방법에 대해 알아봅니다.

  • Chapter1. 플러스엑스 UI 디자인

    플러스엑스 UI 디자인에 대한 소개와 그 동안 진행한 대표 프로젝트에 대해 알아봅니다.

1. Plus X, UI 디자인에 대하여
플러스엑스 UI 디자인에 대한 소개 및 차별점을 알아보고, 추구하는 방향성을 살펴봅니다.
2. Plus X, UI 디자이너
플러스엑스의 UI 디자인팀에 대한 소개와 인재상 및 포트폴리오 제작시 유의할 점에 대해 알아봅니다.
3. Plus X, UI 대표 프로젝트
10년 이상 쌓아온 플러스엑스 UI 디자인의 대표 프로젝트의 뒷 이야기와
플러스엑스가 생각하는 파트너사에 대해 알아 봅니다.

  • Chapter2. 플러스엑스 UI 프로세스

    제안-구축-PR등 플러스엑스 UI 디자이너가 실제로 진행하는 업무들을 알아보고,
    프로젝트 진행 시 중요하게 생각하는 점은 무엇인지에 대해 살펴봅니다.

1. Plus X, UI 디자인에 대하여
UI 디자인의 전반적인 업무 프로세스와 실제 UX맴버들과
어떻게 프로젝트를 진행하는지에 대해 소개합니다.
2. Plus X, UI 제안 프로세스
데스크 리서치에서 부터 아이데이션, 디자인 컨셉 도출, 디자인 시안 작업까지
브랜드 아이덴티티 찾고 UI 디자인에 녹여내어 디자인을 제안하는 방법에 대해 배워봅니다.
3. Plus X, UI 구축 프로세스
일관성있는 사용자 경험을 만들기 위한 구축 프로세스를 알아 보고,
실제 디자인 페이지 작업시 UI 디자이너로서 유의할 점에 대해 알아봅니다.
4. Plus X, PR 디자인
플러스엑스가 PR 디자인을 중요하게 생각하는 이유와
UI 디자인만의 PR 디자인의 노하우를 소개합니다.

Part 2.
UI 디자인 기초

디자인을 시작하기에 앞서, 논리적인 디자인 구축에 필요한 해상도, 그리드와 레이아웃 그리고 구성요소에 대한 기초 지식을 배웁니다.
또한, 각 챕터별 실무 사례를 바탕으로 플러스엑스 UI 디자이너는 프로젝트에서 기초 지식을 어떻게 활용하는지 알아봅니다.

  • Chapter1. UI 디자인 기초 지식

    UI 디자인을 진행하기에 앞서 기초 지식 필요성에 대해 알아봅니다.

1. 기초 지식의 중요성
UI 디자인을 시작하기에 앞서 기초 지식의 중요성과
논리적이고 설득력 있는 디자인을 하기 위해 어떤 기초 지식이 필요한지 살펴봅니다.

  • Chapter2. 해상도

    해상도와 관련된 기본 개념부터 다양한 실제 사례를 통해 플러스엑스가 해상도를 설정하는 방법에 대해 알아봅니다.

1. 사용자 환경의 이해
해상도에 대한 가장 기본적인 개념을 시작으로 관련 용어와 개념에 대해 알아보고,
사용자들이 가진 환경에 대해 알아봅니다.
2. 작업 환경에 대한 이해
변화하는 사용자 환경에 대응하기 위해 UI 디자이너가 알아두어야 하는 작업 환경에 대해 알아보고,
UI 디자이너라면 생각해야 하는 다양한 해상도 기준과 활용 방식에 대해 알아봅니다.
3. Plus X와 해상도
다양한 시각에서 프로젝트를 바라보고 구체적인 해상도 방향성을 정하여
파트너사의 서비스 니즈에 맞는 플러스엑스의 해상도 설정 프로세스를 소개합니다.

  • Chapter3. 그리드와 레이아웃

    그리드와 레이아웃의 개념적 접근부터 활용까지 이해하고, 플러스엑스의 작업에서 활용한 그리드에 대해 알아봅니다.

1. 그리드에 대한 이해
그리드 시스템을 이해하기 위한 기본 용어들과 해상도 크기에 따른 그리드 활용 방법과
8 포인트 그리드 시스템과 같은 전반적인 그리드 시스템 개념에 대해 이해합니다.
2. 레이아웃에 대한 이해
그리드 개념을 바탕으로 레이아웃을 생성하고, 게슈탈트 이론에 포함된 5가지 법칙을 토대로
서비스가 추구하는 사용성에 맞는 레이아웃을 생성할 수 있는 시각을 길러봅니다.
3. Plus X와 그리드
고객사 서비스의 목적과 특성에 따른 플러스엑스의 그리드 활용 방식과
실무에서 사용한 그리드에 대해 소개합니다.

  • Chapter4. UI 구조와 구성요소

    화면을 이루는 구성요소의 기능과 역할 그리고 요소별 디자인 특징에 대해 알아봅니다.

1. UI 구조의 이해
화면 구성요소들을 그룹핑해주는 가장 기본적인 UI 구조에 대해 알아보고,
각 파트를 이루고 있는 대표적인 구성요소들에 대해 알아봅니다.
2. 구성요소의 이해
설계에서 요구하는 기능들을 익숙한 사용성을 갖춘 창의적인 요소로 그려내기 위해
알아두어야 하는 기본요소의 활용 방법과 구성요소의 특징들에 대해 살펴봅니다.
3. Plus X와 구성요소
플러스엑스 UI 팀에서 진행한 프로젝트 중 특징적인 구축 사례를 통해
서비스 화면 구조 및 구성요소에 대해 분석해봅니다.

Part 3.
UI 디자인 협업

수많은 기업과의 협업을 통해서 쌓아온 가장 효율적인 UI 디자인 워크플로우를
네이밍 룰, UI 개발 가이드, 이미지 운영 가이드, QA 등 실제적인 방법과 예시를 통해 공유합니다.

  • Chapter1. 협업의 중요성

    협업에 대한 개념을 이해하고 플러스엑스가 생각하는 협업의 가치와 중요성에 대해 살펴봅니다.

1. 협업의 가치
플러스엑스의 프로젝트 진행 과정을 바탕으로 협업에 대한 개념을 이해하고
가치와 중요성에 대해 알아봅니다.
2. 협업을 잘하기 위한 방법
UI 디자이너들이 기획자, 개발자와
협업을 잘하기 위한 방법은 무엇이 있는지 알아봅니다.

  • Chapter2. Plus X UI 디자이너들의 협업

    플러스엑스 UI 디자이너들이 어떤 방식으로 협업을 하는지
    네이밍 룰, 협업 툴, 디자인 가이드, QA 등 플러스엑스의 작업 방식을 통해 알아봅니다.

1. 플러스엑스의 네이밍 룰
효율적인 협업을 하기 위해서 플러스엑스에서는 어떠한 규칙을 바탕으로 협업을 하는지
플러스엑스의 Folder, File, Layer, Asset의 네이밍 룰을 소개합니다.
2. 협업 툴
플러스엑스의 UI 디자이너들은 어떠한 툴을 사용하고 활용하여 협업을 진행하는지
커뮤니케이션, 업무관리, 디자인 툴로 나눠 알아봅니다.
3. UI 디자인 가이드
디자인 가이드의 개념과 디자인 가이드 제작 시 고려해야할 점을 알아보며,
플러스엑스에서는 UI 디자인 가이드를 어떤 방식으로 제작을 하고 활용을 하여
협업을 하는지 알아봅니다.
4. QA: Quality Assurance
QA의 중요성과 진행 시 고려해야할 점을 바탕으로 플러스엑스에서는
QA를 어떤 방식으로 진행하고 협업을 하는지 자세히 알아봅니다.

  • Chapter3. 프로젝트 완료 이후의 협업

    플러스엑스에서는 프로젝트 완료 이후에 더 다양하고 많은 파트너사와 협업을 하기 위해 무엇을 하는지 알아봅니다.

1. 프로젝트 완료 이후의 협업
플러스엑스에서는 다양한 파트너사와 협업을 하기 위해
프로젝트 완료 이후에 무엇을 하는지 알아봅니다.

Part 4.
UI 인터랙션 디자인

플러스엑스의 실제 사례를 통해 좋은 인터랙션에 대한 기준을 세우고 Figma, XD를 활용해 직접 만들어 봅니다.
구현을 위한 가이드를 제작하고 커뮤니케이션하는 방법까지 알아봅니다.

  • Chapter1. 인터랙션 디자인 이해

    인터랙션 디자인이란 무엇이고, 좋은 인터랙션 디자인에 대한 기준을 제시합니다.

1. 인터랙션 디자인이란?
인터랙션 디자인에 대한 개념, 디자이너의 문제 해결 방식, 문제 접근 방법,
그리고 플러스엑스에서는 어떻게 인터랙션에 대해 접근하는지 알아봅니다.
2. 인터랙션 디자인 구성요소
인터랙션을 구성하는 요소에 대해 알아보고
모션, 공간, 시간 등에 대해 알아봅니다.
3. 좋은 인터랙션 디자인의 기준
좋은 인터랙션 디자인이란 무엇인지
플러스엑스만의 기준을 세우고 예시를 통해 알아봅니다.

  • Chapter2. 인터랙션 디자인 방법

    개발환경에 대한 기초적인 이해를 바탕으로 인터랙션의 기초 원리와 디자인 진행 시 접근하는 방법 등을 알아보고 실습해 봅니다.

1. 애니메이션에 대한 이해
인터랙션 디자인에서 중요하게 여겨지는 UI 애니메이션에 대해
알아보고 이를 통한 인터랙션 디자인 기본원리를 살펴봅니다.
2. 프로토타입을 통한 디자인 테스트
실무 사례를 통한 프로토타입의 필요성을 알아보고
툴을 이용해 프로토타입 디자인을 함께 제작해봅니다.

  • Chapter 3. 인터랙션 디자인 구현 방법

    실제 개발 구현 시, 커뮤니케이션 및 가이드 제작 방법, 애니메이션 소스 사용법 및 제작법 등 실제 구축단계에 필요한 것에 대해 알아봅니다.

1. 인터랙션 디자인 개발
인터랙션 디자인 시 타 부서와 커뮤니케이션하는 방법에 대해 알아보고
이를 토대로 디자인 개발 가이드 작성법을 알아봅니다.
2. 애니메이션 소스 활용
애니메이션 소스를 활용하여 마이크로인터랙션 소스 제작 및 적용 방법을 알아보고
이를 실제 개발 환경에 맞게 추출하고 사용하는 방법을 알아봅니다.

Tool

Figma, XD 툴을 활용한 프로토타이핑 시연을 진행합니다.

· [Part 4. UI 인터랙션 디자인] 파트의 일부 클립에
프로토타이핑 시연이 포함됩니다.

· Adobe XD, Figma 설치 후 따라하면서 수강하시길 권장하나, 따라하지 않고 영상만으로 학습하셔도 인터랙션 디자인에 대해 
이해하시는 데 무리가 없습니다.

· 본 강의에서는 툴을 제공하지 않습니다.

· XD와 Figma는 2023년 4월 기준 최신 버전으로 진행됩니다.

· Figma 무료 버전으로 수강 가능합니다.

· 시연은 Mac으로 진행됩니다. 이외의 환경에서도 수강 가능하나
일부 단축키 등이 다를 수 있습니다.
For You

이런 분들께 추천합니다.

Interview
어떤 마음으로
이 강의를 준비했나요?
수년간 다양한 파트너사와 프로젝트를 진행하면서, 그 동안 다듬고 정리해 온 플러스엑스 UI 디자인만의 업무 프로세스와 노하우를 주니어분들의 입장에서 효과적으로 학습하실 수 있게 담으려고 노력했습니다.
커리큘럼을
어떻게 만들었나요?
단순히 방법론적으로 접근하는 것이 아닌 실무에서 저희는 UI 디자인을 어떻게 진행하는지, 디자인 관점에서 실제 화면을 제작할 때 꼭 필요한 내용들을 위주로 강의를 제작했습니다. 수강생분들이 UI디자인을 진행하면서 생겼던 고민들을 해소할 수 있었으면 좋겠습니다.
이 강의를 듣고 나서 수강생들이
무엇을 얻어갈 수 있을까요?
플러스엑스의 UI 디자인팀이 어떻게 프로젝트를 진행하고 무엇을 중요하게 생각하는지 최대한 디테일하게 많은 내용을 공유드리고자 노력하였습니다. 플러스엑스가 파트너사와의 협업을 통해 보다 훌륭한 결과물을 만들어 내듯이 이 강의를 통해 수강생 여러분들이 한단계 성장하는 계기가 되었으면 좋겠습니다.

  • 해당 강의는 사전 예약 상품입니다.

    사전 예약 상품은 아래 오픈 일정에 따라 영상이 순차적으로 제작되어 오픈됩니다.
    (강의 1회 결제시 모든 영상을 평생 반복 수강 가능합니다.)


    1차 공개 : 23년 5월 19일 (금)
    전체 공개 : 23년 6월 9일 (금)

Recommendation
Plus X Share X의 다양한 강의를 만나보세요.

수강료.

  • 플러스엑스 UI 실무 마스터 패키지

    현재 정가 대비 63% 할인 중!
    6월 30일 금요일 자정 까지

    정가 1,236,000원
    현재 판매가 450,000원

    12개월 무이자 할부 시 월 37,500원

    수강 신청하기

국내 8개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • NH농협카드

※ BC카드의 경우, 비씨(페이북)을 선택하여 결제시에만 12개월 무이자 할부가 가능합니다.
(BC계열 – 우리/제일/기업/대구/경남/부산/광주/수협/전북/제주/신협)