PPT 디자인을 위해 레이아웃 자료를 찾아볼 때, 웹사이트 디자인을 자주 찾아봅니다. 편집 디자인보다 더 자유로운 레이아웃 아이디어를 얻을 수 있기 때문입니다. 웹사이트는 랜딩페이지에서 시선을 사로잡아야 하기 때문에 임팩트있는 레이아웃이 사용됩니다. 또한, 웹은 가장 빠르게 디자인 트렌드가 반영되고, 사용자 경험을 고려한 시각적 구성을 하기 때문에 참고할 아이디어가 많습니다.

PPT와 웹사이트는 겉보기엔 다르지만, 시선을 끄는 방법, 정보 전달 방식, 레이아웃 구성 등 많은 부분에서 닮아 있습니다. 그래서 웹사이트를 보면, 자연스럽게 PPT 디자인 아이디어가 떠오르기도 합니다. 이 글에서는 PPT 디자인 감각을 키워주는 웹사이트 디자인 아이디어를 공유합니다.

* 이 글은 제휴 링크가 포함되어 있습니다. 제휴 링크로 일정 부분의 수수료를 받습니다. 이 수익은 더 나은 콘텐츠를 만들기 위해 투자합니다. 심플피는 직접 경험한 양질의 정보를 공유하기 위해 노력합니다.

by Canva

1. 웹사이트 디자인에서 아이디어를 얻는 이유

프레젠테이션은 목적에 알맞은 디자인이 필요합니다. 시선을 사로잡고, 내용을 강조해야 합니다. 메시지를 효과적으로 전달하기 위해 만들어지기 때문에 웹사이트 디자인과 PPT 디자인은 공통점을 갖고 있습니다.

레이아웃: 웹페이지에서 콘텐츠를 강조하는 방식, 여백 활용 등 레이아웃을 PPT 디자인에 적용할 수 있습니다.
색조합: 웹사이트에 사용된 색조합은 PPT 디자인에 적용할 수 있습니다.
트렌드: 웹은 빠르게 디자인 트렌드를 반영하는 공간입니다. 최신 트렌드를 자연스럽게 익힐 수 있습니다.
정보의 구조: 웹사이트는 정보를 효과적으로 전달하기 위해 계층적으로 구성합니다. 이 구성은 슬라이드에 그대로 적용할 수 있습니다.

2. 디자인에 영감을 주는 웹사이트 디자인

가운데를 정확하게 나눈 레이아웃이지만 비슷한 톤의 색을 사용하여 보는사람으로 하여금 부담스럽지 않습니다. 서체도 다양하게 사용했지만 양쪽 레이아웃이 통일되어 복잡해보이지 않습니다. 2가지 내용을 담아야 하는 레이아웃에 사용하면 좋을 것 같습니다.

Ilios by Zak Steele-Eklund for Studio VØR

빨간색과 파란색, 극단적인 색의 대비를 사용했지만 전혀 촌스럽지 않습니다. 오히려 정말 세련된 느낌이 듭니다. 사진이 세련되기도 하고 색의 비율과 서체 디자인이 잘 된 것 같습니다. PPT에서 컨셉 슬라이드나 간지에 활용하면 좋을 것 같습니다.

S P E T I A by Zak Steele-Eklund for Studio VØR

PPT 레이아웃에서 내용이 많을 때 사용하면 좋을 레이아웃입니다. 포인트 숫자를 사용하여 집중도를 높이고 부가 설명을 적으면 좋을 것 같습니다. 전체적으로 복잡해 보이지 않게 디자인하면 좋을 것 같습니다.

Najim by Zak Steele-Eklund for Studio VØR

흰색 여백을 활용여 이미지와 글자를 불규칙적으로 배열한 레이아웃입니다. 이런 디자인 컨셉은 산으로 가기 쉬우므로, 이 디자인을 그대로 따라하면서 자신의 컨셉에 맞게 살짝만 변형하는 연습을 하면 좋을 것 같습니다.

Assur by Zak Steele-Eklund for Studio VØR

표지로 사용하기에 좋은 레이아웃입니다. 큰 이미지, 포인트 컬러, 제목의 조합으로 단순하지만 임팩트있는 레이아웃입니다.

Travel Agency Landing Page by Zak Steele-Eklund for Studio VØR

무채색만 사용하여 심플한 느낌이 나는 레이아웃입니다. 이미지를 왼쪽에 두고 제목을 가운데로 배치하였습니다. 세부 설명을 넣고 싶다면 오른쪽 아래 배치하면 좋을 것 같습니다.

Project interface by Zak Steele-Eklund for Studio VØR

이미지 2개를 넣었지만 크기를 다르게 하고 분위기를 다르게 하여(흑백, 컬러) 색다른 느낌을 주는 레이아웃입니다. 포트폴리오 슬라이드에 활용하면 좋을 것 같습니다.

ReAlign by Zak Steele-Eklund for Studio VØR

3가지를 구분하는 레이아웃으로 세부 설명에 넣으면 좋을 레이아웃입니다. 이미지 높이를 줄여서 글을 많이 넣어도 될 것 같습니다. 디자인의 포인트 컬러를 배경으로 사용하면 전체적으로 통일된 PPT 디자인이 됩니다.

Thrace. Browse Page by Zak Steele-Eklund for Studio VØR

제목 서체와 대비되는 배경(파랑, 노랑)이 재미있는 디자인입니다. 전체적으로 과감한 색 선택인데 톤을 낮춰서 생기있게 어울립니다.

Nippur by Zak Steele-Eklund for Studio VØR

서체를 다양하게 활용한 디자인입니다. 글의 성격에 따라 가로로 활용하기도 하고 세로로 활용하기도 하고 크기의 대비를 주어 재미있는 레이아웃으로 보입니다. 다만 세로 제목은 잘 읽히지가 않아 PPT 디자인으로 활용하기에 조심스럽습니다.

Carousel Concept by Zak Steele-Eklund for Studio VØR

PPT 디자인에 참고하기 좋은 웹사이트 10

Dribbble: 디자이너들의 실시간 작업물을 볼 수 있는 포트폴리오 플랫폼입니다.
Behance: 다양한 분야의 고퀄리티 디자인 작업이 모인 글로벌 플랫폼입니다.
Awwwards: 창의적이고 감각적인 웹사이트를 큐레이션하고 시상하는 사이트입니다.
Land-book: 다양한 랜딩페이지 디자인을 한눈에 볼 수 있는 아카이브입니다.
Siteinspire: 미니멀하고 깔끔한 웹디자인을 모아놓은 사이트입니다.
UI Movement: 인터랙션 중심의 최신 UI 디자인을 소개하는 큐레이션 플랫폼입니다.
Pinterest: 전 세계 사용자들이 공유하는 다양한 디자인 아이디어를 찾을 수 있습니다.
Lapa Ninja: 심플하고 임팩트 있는 랜딩페이지 디자인을 큐레이션한 사이트입니다.
Mobbin: 정돈된 모바일 UI 디자인을 참고할 수 있는 아카이브입니다.
Muzli by InVision: 매일 새로운 디자인 트렌드 뉴스를 브라우저 탭으로 알려주는 사이트입니다.

3. 웹사이트 디자인을 PPT에 적용하는 팁

1) PPT로 따라 해보기

마음에 드는 웹디자인 레이아웃이 있다면 그대로 슬라이드로 재현해보세요. 예를 들어, 랜딩 페이지는 PPT 표지 디자인에 적용해볼 수 있습니다.

2) 색조합 참고

웹사이트에서 사용하는 색조합을 그대로 적용해볼 수 있습니다. 색조합을 사용했을 때, 결과물을 확인했기 때문에 세련된 PPT를 완성할 수 있습니다. Site Palette는 현재 보고 있는 사이트의 색조합을 추출할 수 있습니다. 브라우저에 확장 기능을 설치하여 사용할 수 있습니다.