SaaS

SaaS

SaaS

Cisco

Cisco

Cisco

반응형 웹 랜딩 페이지

반응형 웹 랜딩 페이지

반응형 웹 랜딩 페이지

PROJECT TYPE

개인프로젝트

DURATION

2주

TOOL

피그마

ROLE

(기여도100%)

리서치,

그리드 시스템

UI 프로세스 with 스타일 가이드

PROJECT OVERVIEW

PROJECT OVERVIEW

PROJECT OVERVIEW

시스코 시스템즈는 네트워킹 하드웨어, 보안 서비스 등을 제공하는 미국의 다국적 기업 입니다. 팬데믹으로 인해 소프트웨어 서비스의 붐이 일어났고 오늘날 SaaS 고객은 그 어느 때보다 많은 선택지를 가지고 있습니다. 이 프로젝트는 Cisco가 제공하는 서비스들을 사용자가 신뢰하고 쉽게 이해하고 고객 전환을 할 수 있도록 접근성과 효율성을 높이기 위한 프로젝트입니다. 또한, 반응형 웹 디자인으로 구현해 다양한 기기에서 사용가능 하도록 합니다.

PROJECT TYPE

PROJECT TYPE

개인 프로젝트

DURATION

DURATION

2주

TOOL

TOOL

피그마

ROLE(기여도100%)

ROLE(기여도100%)

리서치,

그리드 시스템,

UI 프로세스 with 스타일 가이드

Discover
Discover
Discover

현재 페이지 분석

현재 페이지 분석

현재 페이지 분석

CTA버튼 위치와 직관적이지 않은 디자인

유저의 액션을 부르는 버튼의 위치가 왼쪽에 있으므로 보통 오른쪽에 위치하는 것과 일관되지 않고, 히어로 섹션은 중요한 정보의 디자인이 강조되지 않아 Cisco에서 전하는 메세지를 사용자가 직관적으로 알기 어렵습니다.

눈에 띄지 않는 커뮤니티 솔루션과 지원

Cisco 커뮤니티를 위한 유용한 도구 및 리소스를 적극 활용하기에 눈에 잘 띄지 않고 적절한 설명이 없습니다.

명확하지 않은 시각적 구획화

각 섹션과 글씨 크기의 시각적 계층구조가 부족하여 정보를 읽는데 방해가 됩니다.

CTA버튼 위치와 직관적이지 않은 디자인

유저의 액션을 부르는 버튼의 위치가 왼쪽에 있으므로 보통 오른쪽에 위치하는 것과 일관되지 않고, 히어로 섹션은 중요한 정보의 디자인이 강조되지 않아 Cisco에서 전하는 메세지를 사용자가 직관적으로 알기 어렵습니다.

눈에 띄지 않는 커뮤니티 솔루션과 지원

Cisco 커뮤니티를 위한 유용한 도구 및 리소스를 적극 활용하기에 눈에 잘 띄지 않고 적절한 설명이 없습니다.

명확하지 않은 시각적 구획화

각 섹션과 글씨 크기의 시각적 계층구조가 부족하여 정보를 읽는데 방해가 됩니다.

CTA버튼 위치와 직관적이지 않은 디자인

유저의 액션을 부르는 버튼의 위치가 왼쪽에 있으므로 보통 오른쪽에 위치하는 것과 일관되지 않고, 히어로 섹션은 중요한 정보의 디자인이 강조되지 않아 Cisco에서 전하는 메세지를 사용자가 직관적으로 알기 어렵습니다.

눈에 띄지 않는 커뮤니티 솔루션과 지원

Cisco 커뮤니티를 위한 유용한 도구 및 리소스를 적극 활용하기에 눈에 잘 띄지 않고 적절한 설명이 없습니다.

명확하지 않은 시각적 구획화

각 섹션과 글씨 크기의 시각적 계층구조가 부족하여 정보를 읽는데 방해가 됩니다.

어떻게하면 사용자는 Cisco가 지원하는 정보를 충분히 얻고 이해하며

신뢰를 느낄 수 있을까요?

어떻게하면 사용자는 Cisco가 지원하는 정보를 충분히 얻고

이해하며 신뢰를 느낄 수 있을까요?

어떻게하면 사용자는 Cisco가 지원하는

정보를 충분히 얻고 이해하며 신뢰를

느낄 수 있을까요?

Grid System
Grid System
Grid System

저는 사용자가 어느 환경에서도 사이트를 이용할 수 있도록 그리드 시스템을 기반으로 반응형웹을 설계했습니다. 데스크탑, 랩탑, 태블릿, 모바일의 4가지 장치에 대한 페이지를 디자인했습니다.

저는 사용자가 어느 환경에서도 사이트를 이용할 수 있도록 그리드 시스템을 기반으로 반응형웹을 설계했습니다. 데스크탑, 랩탑, 태블릿, 모바일의 4가지 장치에 대한 페이지를 디자인했습니다.

Desktop

Desktop

Desktop

1920px / 12 Columns

1920px / 12 Columns

260px

260px

24px

24px

260px

260px

260px

1400px

1400px

Laptop

Laptop

Laptop

1024px / 9 Columns

1024px / 9 Columns

50px

50px

24px

24px

50px

50px

50px

924px

924px

24px

24px

30px

20px

24px

30px

20px

30px

30px

Tablet

768px / 6 Columns

Mobile

393px / 3 Columns

Mobile

393px / 3 Columns

768px / 6 Columns

Tablet

Tablet

Tablet

768px / 6 Columns

30px

24px

30px

20px

24px

20px

708px

353px

708px

708px

353px

20px

24px

20px

393px / 3 Columns

Mobile

353px

Style Guide
Style Guide
Style Guide

#00BCEB

#00BCEB

#00BCEB

#0270D2

#0270D2

#0270D2

Fonts

Helvetica

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

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

#FFFFFF

#9D9EA2

#0D264D

#141414

Fonts

Helvetica

#FFFFFF

#9D9EA2

#0D264D

#141414

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

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

Fonts

Helvetica

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

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

#FFFFFF

#9D9EA2

#0D264D

#141414

Deliver
Deliver
Deliver

하이피델리티 디자인 (Landing Page)

하이피델리티 디자인 (Landing Page)

하이피델리티 디자인 (Landing Page)

Desktop

Desktop

Desktop

1920px

Cisco의 커뮤니티 솔루션과 지원 설명

Cisco 커뮤니티를 위한 유용한 도구 및 리소스를 적극 활용하도록 설명과 함께 보여줍니다.

CTA버튼 위치와 브랜드 메세지 전달 극대화

일반적인 CTA버튼의 위치를 고려해 오른쪽으로 배치했고, 브랜드가 전달하고 싶은 메시지를 가운대로 위치, 배경과 대비대는 색으로 집중될 수 있도록 합니다. 문단에서 설명하는 상품을 보여줌으로써 사용자에게 직관적인 정보 전달을 합니다.

정보 전달이 명확한 시각적 구획화

명확한 정보 전달을 위해 각 섹션을 카드형식으로 나타내고 글씨크기와 색에 시각적 계층을 주었습니다.

정보 전달이 명확한 시각적 구획화

명확한 정보 전달을 위해 각 섹션을 카드형식으로 나타내고 글씨크기와 색에 시각적 계층을 주었습니다.

CTA버튼 위치와 브랜드 메세지 전달 극대화

일반적인 CTA버튼의 위치를 고려해 오른쪽으로 배치했고, 브랜드가 전달하고 싶은 메시지를 가운대로 위치, 배경과 대비대는 색으로 집중될 수 있도록 합니다. 문단에서 설명하는 상품을 보여줌으로써 사용자에게 직관적인 정보 전달을 합니다.

Cisco의 커뮤니티 솔루션과 지원 설명

Cisco 커뮤니티를 위한 유용한 도구 및 리소스를 적극 활용하도록 설명과 함께 보여줍니다.

정보 전달이 명확한 시각적 구획화

명확한 정보 전달을 위해 각 섹션을 카드형식으로 나타내고 글씨크기와 색에 시각적 계층을 주었습니다.

Redesign

Redesign

Redesign

Before

Before

After

After

반응형 디자인

반응형 디자인

반응형 디자인

데스크탑, 랩탑, 태블릿, 모바일 구조에 맞게 반응형 구조를 디자인했고, 사이즈에 따른 기기를 고려하며 폰트의 크기, 레이아웃 등 사용자에게 효과적으로 내용을 전달할 수 있는 디자인을 고려했습니다.

Laptop(1024px)

Laptop(1024px)

Tablet(768px)

Tablet(768px)

Mobile(390px)

Mobile(390px)

되돌아 보기

되돌아 보기

되돌아 보기

배운 점
배운 점
배운 점
반응형 디자인의 이해와 시각적 계층 구조의 중요성
반응형 디자인의 이해와 시각적 계층 구조의 중요성
반응형 디자인의 이해와 시각적
계층 구조의 중요성

Cisco 웹 페이지를 반응형으로 작업하면서 ‘어떻게 해야 사용자가 어떤 기기로 봐도 같은 내용을 효과적으로 전달할 수 있을까?’를 고민하며 디자인했고 이 프로젝트를 하면서 반응형 디자인이 여러 기기에서 어떻게 적용되는지 이해를 높일 수 있었습니다.

또한, 기존 페이지를  리디자인하며 시각적 계층 구조의 중요성을 다시 한번 느꼈습니다.

잘 디자인된 시각적 계층 구조는 메시지를 효과적으로 전달하고 더 나은 사용자 경험을 제공할 수 있도록 도와준다는 것을 알 수 있었습니다.

다음 단계
다음 단계
다음 단계
명확한 목표 고객 정의
명확한 목표 고객 정의
명확한 목표 고객 정의

다음 프로젝트의 더 나은 결과를 보장하기 위해 목표 고객을 명확하게 정의하고

브랜드가 디자인으로 달성하고자 하는 목표가 무엇인지 이해하고 싶습니다.

또한, 리디자인한 웹사이트로 사용성 테스트를 진행해보고 싶습니다.

다른 프로젝트

다른 프로젝트

다른 프로젝트

Bitna Jeong© 2024 All Rights Reserved.

Bitna Jeong

Bitna Jeong© 2024 All Rights Reserved.

Bitna Jeong

Bitna Jeong© 2024 All Rights Reserved.

Bitna Jeong