nas
브랜딩 마이크로 프로모션.
브랜딩 마이크로 사이트는 웹프로모션에서 가장 중요한 능력으로 평가 받습니다.
  디자인나스 학생은 국내 최고의 실력을 갖추고 있습니다  
디자이너의 편집능력과 그래픽의 기술능력을 인정 받을 수 있는 작품이며 다른 디자이너들이 제작하기 어려운 기술로 표현되어 압도적인 우위를 갖는 작품입니다.
모든 작품은 인터렉션을 이용하여 직접 그려표현한 작품입니다.
[ ※ 디자인나스의 모든 작품은 학생작품이며, 제안시안으로 만들어져 취업지원시 비상업적 포트폴리오 용도로만 사용됩니다. ]
  • nas story
  • Galaxy Smart Watch
  • 임애경 학생
갤럭시 워치의 브랜드 프로모션 사이트이다. 컨셉은, 갤럭시 워치의 스마트적인 기능으로 다양한 활용 범위와 스타일을 보여주는 초점에 맞추어 구성되었다. UI 인터페이스는, 시계의 탭을 돌려 기능을 활용한다는 UI 기능에서 모티브로 출발하였으며, 대표적인 기능인 디자인과 테크놀로지 부분 2가지 콘텐츠를 대표로 꼽아 메인에서 직접적으로 메뉴로 보이고 있다. 또한 우측 상단의 메뉴를 누르면 이외에도 전체적인 GNB를 둘러볼 수 있도록 구성되어 있다. 각 섹션마다 그 페이지의 컨셉에 맞추어 스크롤 방식도 다르다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 시계라는 아이템에 디자인과 기능적인 부분을 동시에 선보이며, 일반적인 시계와 스마트 시계의 차별화를 선보이는 콘텐츠 구성으로 기획하였다. 디자인 페이지에서는 상하 스크롤을 테크놀로지에서는 좌우 스크롤을 선보이고 있다.
각 페이지마다 버튼의 기능을 함께 두어 UI 이동성에서 큰 불편함 없이 사이트를 눌러 볼 수 있도록 사용자를 생각하는 선보이고 있다. 비주얼적으로는 영상과 사진 편집을 이용하여, 보다 사용성에 대해 쉽게 이해를 도모하였으며, mix & match에서는 다른 섹션 페이지를 보며 관심이 생긴 소비자층에게 한 번 더 스마트워치의 다양한 스타일을 보여주며, 쉽게 커스텀 할 수 있는 모습 또한 어필하고 있다. 고객 경험관리(CX: customer experience)에 꽤 많은 기획력을 생각하며 만들어진 작품이다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • TESLA
  • 김하람 학생
테슬라의 Roadster를 선보이는 마이크로 프로모션 사이트다. 컨셉은, [전 세계에서 가장 빠른 자동차로 기록적인 가속력, 주행거리 및 성능은 압도적인 슈퍼카]의 슬로건으로 Roadster의 기능적 소개와 함께 스타일을 선보인다. UI 인터페이스는, 스크롤 다운으로 상하 스크롤 이동과 함께, 테슬라의 버튼 기능으로 구성되었다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 테슬라 브랜딩을 표현할 수 있는 편집력으로 초점을 맞추어 비주얼 부분에서는 영상과 사진 편집을 이용하여 사이트를 구현해내었다. 컬러 또한 아이덴티티를 강조하기 위하여 색상의 사용을 간소화하였다. 모노톤과 테슬라의 시그니처 컬러인 RED를 포인트 컬러로 사용하였다. 레이아웃과 퍼블리싱 부분으로는 더욱 세련되고 고급스러운 이미지를 전달하기 위하여 전체적으로 플로우(flow)
그리드와 원스크롤 UI를 구성하였다. 섹션 페이지를 2개로 구성하여 스타일과 기능성을 나누어서 보여주고 있어 1P 1 Message로 간결하게 보여주고 있다. 간결한 만큼 정보성에서도 아쉬움이 느껴지기도 하다. 사용자들에게 전달하고자 하는 정보성도 염두에 두며 만든다면 구성력 또한 기획하여 좋은 마이크로 프로모션 사이트로 거듭날 수 있을 것이다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 60%, CSS 폰트 40%    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • Resident Evil
  • 최현정 학생
Resident Evil은 좀비 게임을 소개하는 마이크로 아이덴티티 사이트로, ※ 심장과 비위가 약하거나 임산부, 노약자분들은 가급적 피하는 것이 좋습니다. 그만큼 잘 만들어진 사이트이기도 하다. 컨셉은, 좀비 게임의 아이덴티티를 소개하는 하나의 초점에 맞추어 진행되었다. UI 인터페이스는, 스크롤 이동과 함께 핵심적인 UI는 버튼을 눌러 각 섹션 페이지로 이동하는 형식으로 구성되었다고 볼 수 있다. 또는 우측 상단의 햄버거 메뉴를 이용하여 원하는 페이지로 바로 이동할 수도 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 시놉시스, 스토리 모드, 미니게임, 갤러리, 캐릭터 총 5가지 섹션으로 이루어졌다. 특히 Resident Evil을 홍보하기 위한 핵심적인 콘텐츠를 꼽는다면 미니게임이다.
미니게임은 실제 사이트를 보는 사용자가 게임을 진행해볼 수 있도록 경험 주위의 콘텐츠를 담고 있어 게임의 스토리, 게임 방식, 퀄리티들을 한눈에 만나 볼 수 있는 사이트다. UXUI 사이트로 선보일 수 있을 만큼 구성력이 좋은 편이다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • NIKE_Battleforce
  • 김보윤 학생
나이키 배틀 포스는 나이키에서 주관하는 농구 / 디자인/ 랩 등을 겨루는 배틀이다. 배틀포스를 홍보하기 위해 제작된 마이크로 프로모션 사이트다. 컨셉은, 배틀 경연의 주제를 보여주는 페이지로 구성하였다. UI 인터페이스는, 상하 스크롤을 이용하여 이동에 편리성을 부여하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 전체적으로 레이아웃은 블록 그리드를 활용하였다. 각 섹션 별로 아이덴티티를 보일 수 있는 비주얼과 오브젝트를 보여주어 한눈에 경연 주제를 보고 Read more 버튼을 통해 참가방법을 팝업으로 보여주고 있다.
보여줄 수 있는 콘텐츠의 범위가 한정적이다 보니 자칫 단조로워질 수 있는 페이지에 타이포 모션과 애니메이션을 추가하여 단조로움을 탈피하려고 하였다. 그런 노력 덕분인지 간결함과 스타일을 겸비한 마이크로 사이트로 보일 수 있다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 60%, CSS 폰트 40%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • SHERLOCK
  • 손윤정 학생
셜록은 영국 BBC의 드라마다. 셜록홈즈를 현대적으로 재해석한 영국드라마로, 셜록 드라마를 소개하는 마이크로 아이덴티티 사이트다. 컨셉은, 영국 추리작가 코난 도일의 소설이 원작인 것처럼, 마우스의 움직임으로 빛을 이용하여 마치 수사를 진행하는 듯한 아이덴티티를 살렸으며, UI 인터페이스는, 곳곳에 콘텐츠로 바로 이동할 수 있는 메뉴들도 놓여있으며, 좌측 상단에 가독성 있게 메뉴의 아이콘이 배치되어 있어 이동 또한 용이하게 구성하였다. 각 섹션 페이지에서는 원하는 콘텐츠로 바로 들어갈 수 있도록 UI 기능적인 버튼 또한 부여했으며, 콘텐츠는 스크롤로 좌우 이동을 하여 콘텐츠를 볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다.
콘텐츠 기획은, 메인 페이지에서는 한 장의 이미지에 퍼블리싱 mousemove event 기능 활용하여 더욱 아이덴티티를 잘 보일 수 있도록 구성하는 기획력을 선보였다. 비주얼적 디자인 외에도 아이덴티티와 잘 어울리는 퍼블리싱 기능을 택하여 쉽고도 명확한 사이트를 단시간에 구성할 수 있었다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • Parmigiani
  • 김주연 학생
파르미지아니는 시계 업계에서 주목하는 브랜드이다. 파르미지아니의 브랜드를 알리기 위한 브랜드 아이덴티티 사이트이다. 컨셉은, 천재적인 시계 장인이자 복원가인 미셸 파르미지아니의 브랜드를 알리기 위한 목적으로 이루어졌다. UI 인터페이스는, 상하 스크롤을 이용하여 이동에 편리성을 부여하였다. 상세 콘텐츠를 보기위하여 버튼의 gui가 마련되어 있지만 gui 판독성 힘이 약한 점은 아쉽다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 인트로 로딩 화면으로 파르미지아니의 아이덴티티, 문 페이즈(시계 문자판 안의 작은 창에 하루마다 변하는 달과 해의 형태를 표시)를 애니메이션으로 보여주고 있다. 콘텐츠는 4개의 섹션 컬렉션, 메이킹, 브랜드, 스토어로 나누어져 있다. 시계의 정교함에 포커스를 맞추고 전체적으로 영상과 함께 사진 편집을 활용하여 한눈에 쉽고도 상세히 브랜드를 소개하고 있다.
Watch Making 섹션에서는 시계 장인, 복원가 파르미지아니의 자부심이자 시계의 심장으로 불리는 무브먼트(동력장치)를 소개한다. 시원하게 정보성을 볼 수 있지만, 타이포 편집력 쪽에서 아쉬움이 맴돈다. 타이포그래피는 정보 전달에 맞게 변형체는 사용되지 않았으며 고딕 계열의 카피 라이트와 본문으로 자간의 움직임을 조밀하게, 자폭의 움직임은 카피라이트에서 표현되어 좀 더 판독성 위주의 작업이 진행되었으며 본문 이미지 폰트의 쓰임으로 가독성이 아쉬운 부분이다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Billa Bong
  • 장수빈 학생
서핑 래쉬가드 브랜드 Billa Bong 마이크로 사이트다. 컨셉은, 브랜드 컨셉을 그대로 살리며 시원하고 청량감 있는 브랜딩 사이트로 이루어졌다. UI 인터페이스는, 스크롤 다운 방식으로 각 섹션으로 넘어가게 되며, 사진 편집들과 비디오 등을 이용하였음에도 페이지를 보여주는 움직임의 속도가 빠른 편이다. 단지 아쉬운 점이 있다면 콘텐츠의 특성에 맞추어 햄버거 메뉴가 달라지는 점이 다소 불편하게 느껴져 고정적인 역할로 존재했다면 하는 아쉬움을 남겼다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획 중, 그래픽 스킬 부분은, bg로는 영상을 활용하며, VEG 포토그래피, 사진 편집과 시원시원한 레이아웃과 타이포그래피로 표현했다.
타이포그래피 부분은 전체적으로 가독성과 오실레이션을 염두에 두며 작업을 했다. 가독성 있는 고딕체 계열 사용과 볼드 부분과 타이포 크기 또한 강/약을 두어 율동성이 느껴지기도 한다. 제품 정보 부분에서도 호버 효과를 사용하여 단면적인 이미지 편집이 아닌 전체적인 뷰를 생각하여 보여주고 있다. 시원한 여름을 연상시키는 빌라봉 사이트는 VEG 포토그래피를 통한 사진 편집과 가독성 타이포그래피 부분을 잘 표현해내고 있는 사이트다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Gentle monster
  • 도휘경 학생
2019 S/S 젠틀몬스터 쇼케이스 프로모션 사이트다. 컨셉은, 젠틀몬스터의 브랜딩 아이덴티티의 몽환적이며 신비스러운 느낌을 살려 VEG 포토그래피, 스큐어모피즘을 활용하여 표현되었다. UI 인터페이스는, 마우스 무브 드래그 형식으로 마치 숲속을 둘러보는 느낌으로 부드럽고 자연스레 이동한다. 또한 좌측에 기하학적 아이콘을 배치하여 젠틀몬스터의 느낌을 한층 부과 시키며, 마우스 무브 드래그 형식 없이도 원하는 콘텐츠를 바로 살펴볼 수 있도록 구성해두었다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 새로운 S/S 젠틀몬스터 안경을 소개하는 홍보 목적으로 만들어졌기에 많은 페이지들을 배치하기보다는 필요한 정보 부분인 컬렉션, 플래그숍, 몬스터's 가이드 3가지 콘텐츠로 이루어졌다.
미니멀리즘을 연상시킬 만큼 심플한 사이트라고 볼 수 있다. 콘텐츠 소개 부분에서도 깔끔하게 필요한 정보성 이외에는 담긴 내용이 없어 단조로움에 사뭇 아쉬움도 남지만 아이덴티티를 잘 살린 사이트로 소개되기에는 괜찮은 사이트다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드,블록그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • SMEG
  • 한주희 학생
이태리 스타일 가전 SMEG는 마이크로 프로모션 사이트이다. 컨셉은, 공간적 요소와 사용법에 맞추어 '주방에서 SMEG의 제품으로 직접 체험하다.'로 기획 구성, 콘텐츠 기획은 SMEG와 함께하는 원데이 베이킹 클래스라는 카피와 함께 이태리 스타일 가전 SMEG의 제품을 직접 사용해볼 수 있는 프로모션 사이트로 만들어졌다. UI 인터페이스로는, GNB는 우측 상단에 햄버거 메뉴로 고정시켰으며, UI 인터페이스는, 모두 직관적으로 표현되었으며 메인에서는 클릭 유도 방식과 서브 페이지에서는 스크롤 다운 방식으로 콘텐츠에 맞게 인터페이스도 달리 구성되었다. 또한 콘텐츠 내부에서도 쉽게 다음 콘텐츠로 이동할 수 있도록 버튼이 구성되어있어 사용자 환경과 함께 이동성의 효율성을 고려하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 제품 클릭 시, 클로즈업의 화면전환과 애니메이션으로 제품 활용도를 쉽게 이해할 수 있도록 구성하였다.
제품에 대한 정보를 함께 볼 수 있으며, 그래픽 스킬인 일러스트는 명암스킬과 텍스쳐 드로잉을 활용하여 학생이 직접 100% 구현했다. 애니메이션은 웹 퍼블리싱 부분으로 이루어 사이트의 움직임의 속도 또한 빠르고 가볍게 해주고 있다. 서브 페이지에서 정보성 콘텐츠를 둠으로 SMEG를 충분히 느껴본 후 정보를 볼 수 있도록 콘텐츠의 순서까지도 고려하여 SMEG 브랜드에 대해 좀 더 친숙함을 느낄 수 있다. 작은 기획요소라도 무엇을 먼저 이야기할지의 흐름에 대해 생각해볼 수 있는 좋은 브랜드 프로모션 사이트라 볼 수 있다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 60%, CSS 폰트 40%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Bentley
  • 이나영 학생
명품자동차 브랜드로 알려진 벤틀리. 벤틀리의 Bentley Continental GT를 소개하기 위한 마이크로 프로모션 사이트다. 컨셉은, 슈퍼카의 성능과 프리미엄을 겸비한 벤틀리의 브랜딩에 맞게 세련되고 고급스러운 느낌으로 키워드를 잡았다. UI 인터페이스는, 스크롤 다운으로 위에서부터 밑으로 스크롤링이 되는 방식이며, GNB는 콘텐츠의 주목성을 고려하여 상단에 고정시켰다. UI를 직관적으로 풀어두어 사용자들이 쉽게 사이트를 볼 수 있도록 구성하였으며, 영상과 사진편집을 사용한 것에 비해 움직임의 속도는 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 벤틀리 브랜딩을 표현할 수 있는 편집력으로 초점을 맞추어 비쥬얼 부분에서는 영상과 사진편집을 이용하여 사이트를 구현해내었다. 레이아웃과 퍼블리싱 부분으로는 더욱 세련되고 고급스러운 이미지를 전달하기 위하여 전체적으로 플로우(flow) 그리드와 원스크롤 UI를 구성하였다.
웹 퍼블리싱 부분으로는 페럴렉스(parallax : 스크롤 또는 특정 액션에 따라 애니메이션처럼 시간의 흐름에 따라 점차적으로 보여주는 방식)를 활용하여 모션센스까지 겸하여 시각적 효과를 높였다. 콘텐츠 본문 전체적으로 슬라이드 구동, 탭기능 등을 마련해두어 사용자들이 쉽게 세부내용들을 살펴 볼 수 있도록 UX에 대해서도 신경썼다. 많은 콘텐츠보다 최소한의 콘텐츠를 활용하여 기획, 디자인, 퍼블리싱을 전체적으로 짜임새 있게 기획하여 벤틀리가 가진 고유의 브랜딩 아이덴티티를 잘 살려낸 심플한 사이트로 만들 수 있었다고 해도 과언이 아닐 것이다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • 13 Reasons Why
  • 이다은 학생
루머의 루머의 루머는 미국드라마로 장르는 미스터리 드라마이며, 넷플릭스 방영 런칭 홍보를 위해 만들어진 프로모션 사이트다. 컨셉은, 시놉시스를 베이스로 드라마 소개와 함께 관심도로 이어질 수 있는 방향으로도 생각해봤다. UI 인터페이스는, 주로 마우스드래그를 이용하여 가로 스크롤로 이동하며, 좌 / 우에 고정되어 있는 버튼으로 페이지 전환을 이어간다. 점프메뉴 개념으로써 GNB역할의 햄버거 메뉴도 좌측 상단에 고정시켜 이동이 용이하다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 드라마 프로모션 사이트로, 드라마의 스틸컷과 드라마 영상으로 비주얼을 풀어가며 내용 또한 시놉시스 초점으로 콘텐츠 기획을 진행했다. 루머의 루머의 루머 사이트는 영문판 / 한글판 2가지 버전으로 만들었다.
이는 학생이 갖고 있는 언어능력 또한 포트폴리오를 통해 어필 할 수 있는 좋은 기획이다. 전반적으로 슬라이드 형식으로 콘텐츠를 보여줌으로 자칫 지루해질 수 있는 부분을 스탑모션 등 효과변화를 응용하여 정적인 느낌에서도 동적인 효과를 선보이려 노력했다. 드라마 소개 기획으로 비주얼 콘텐츠로는 풍부하게 풀어간 반면, 읽을 수 있는 정보형 콘텐츠 부분이 적다는 부분이 유감이다. 어떤 그래픽스킬을 사용하느냐도 중요하지만, 프로모션 사이트를 이용하여 사용자들에게 전달하고자하는 정보성도 염두에 두며 만든다면 볼거리와 정보성을 모두 담아내는 좋은 기획으로 거듭날 수 있다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 모듈그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • Peek-A-Boo
  • 이윤지 학생
SM엔터테인먼트 인기 걸그룹 레드벨벳의 피카부 앨범 마이크로 아이덴티티 사이트이다. 몽환적인 컨셉은, 발매 음반앨범 패키지의 개연성에 맞추어 초현실적 느낌의 꼴라쥬 등을 활용하여 마치 동화를 보는 듯하게 풀어간다. UI 인터페이스는, 스크롤을 이용하여 볼 수 있으며, 인트로와 사이트 내부에서 스크롤 작동방법이 달라진다. 인트로 화면에서는 아래에서부터 위로 올라가는 보편적인 스크롤링 방식과는 사뭇 다른 UI를 사용하고 있으며, 사이트 내부 콘텐츠 부분에서는 위에서 아래로 내려가는 스크롤링 방식을 갖추고 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 앨범 아이덴티티 사이트로, 레드벨벳 이야기와 함께 앨범, 뮤직트랙, 뮤비, 앨범 화보 사진들로 구성하였다. 1P로 구성된 사이트로 콘텐츠를 보는 방법은 2가지이다. 1. 좌측상단 햄버거 메뉴로 콘텐츠 블록으로도 이동 2. 스크롤을 이용 2가지 방법을 제시하여 사용자 취향에 맞게 편한 UI 인터페이스를 선택할 수 있도록 편리성을 높였다.
색감은 전체적으로 모노톤 느낌으로 풀어가며, 그 안에서도 포인트컬러로 레드벨벳의 시그니처컬러 레드를 활용하였다. 모든 콘텐츠들을 한눈에 살펴 볼 수 있도록 1P 으로 이루어져서 UX 부분에서도 편안하다. 반면 여운이 남는 점은 타이포 가독성과 판독성이다. 본문 타이포에서 얇은 시스템폰트을 이용하고 있어 그로인하여 안티앨리어싱 부분이 나타나 가독성과 판독성을 저해시키고 있다. 가독성, 판독성을 고려하여 색상, 서체를 선택했다면 하는 아쉬움이 있다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 모듈그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • eats ON
  • 김진영 학생
한국야구르트에서 새롭게 선보이는 신선 간편식 잇츠온 브랜딩 마이크로 사이트다. 컨셉은, '주문 후 매일 요리하는 신선한 간편식의 잇츠온' 슬로건을 친근한 느낌으로 전달 하기 위해 스토리텔링으로 이루었다. UI 인터페이스는, 가로 스크롤링 방식과 함께 좌측 GNB를 눌러 각 섹션 페이지로 쉽게 움직일 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 비주얼스킬은 일러스트레이션으로 선택했다. 잇츠온의 구매가이드를 기획적으로 풀며 상황적인 모습까지도 쉽게 보여줄 수 있는 부분으로 가장 탁월한 선택이다. 각 섹션페이지에 맞는 상황별 일러스트 장면과 말풍선을 통해 각 페이지에서 전달하는 콘텐츠의 기획부분을 직관적으로 인지 할 수 있다. 그중에서도 #주문 콘텐츠 페이지에서는 주문방법을 가장 잘 보여주는 모바일 프로토타입을 마련하여 체험효과까지도 보여주고 있다.
이는 콘텐츠기획 이외에도 다양한 디바이스 활용법을 보여줄 수 있는 부분으로 포트폴리오 기획에서도 좋은 예시이다. 스토리텔링 기획으로 그래픽 부분에 힘을 많이 쏟은 편이기에, 상대적으로 편집력 힘은 조금 아쉬운 편이다. 또한, 정보전달의 콘텐츠들은 팝업 요소들로 숨겨져 있기에 마우스 오버 등을 이용하여 찾아봐야 한다는 점이다. 브랜딩 마이크로 프로모션에서는 그래픽 기술 능력도 중요하지만, 편집능력과의 균형을 잘 맞추어 준다면 더 나은 사이트로 거듭날 수 있다. 그렇기에 콘텐츠 내용을 쉽게 인지하고 볼 수 있도록 직관성 부분을 조금 더 고려하였다면 하는 여운이 남는다.
-
프로그램 :photoshop xd
레아아웃 - 블록그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Subway
  • 윤지운 학생
샌드위치 전문점 써브웨이 브랜드 프로모션 사이트이다. 컨셉은, 많은 고객들에게 사랑받는 이유 중 하나 『내 입맛대로 레시피를 고를 수 있다』 써브웨이만의 특화된 강점을 소개한다. UI 인터페이스는, 마우스 좌표를 이용한 레이아웃이 포인트이다. 마우스를 잡고 끄는 방식으로 제작되어 재미를 더한다. 편리와 사용성을 고려하여 우측에 점프메뉴를 배치하여 원하는 구간으로 바로 이동도 가능하다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 컨셉에 잘 뒷받침되도록 다채로운 식재료들을 소개하는 써브웨이 마을을 일러스트를 통해 아기자기하게 표현하여 시선을 압도하고 있다. 그래픽표현 모두 학생이 직접 명암스킬과 텍스쳐 드로잉 기법으로 그렸다.
미니멀한 느낌과 부드러운 색감으로 잘 풀어낸 비주얼은, 작지만 집중력 있게 잘 표현되어 감탄을 산다. 오브젝트 하나하나에 마우스오버로 내용까지도 살펴볼 수 있다. 첫 화면으로 보여주는 써브웨이 매장을 선택하면 프로모션 사이트 목적인 이벤트페이지로 이동하게 되며, 이벤트 페이지에서는 원하는 식재료를 내 마음대로 선택할 수 있는 써브웨이의 강점을 직간접 경험으로 잘 느낄 수 있도록 하였다. 다양한 내용을 담기보다 하나의 목적성을 띠고 보여주는 브랜드 프로모션 사이트로 써브웨이의 브랜딩에는 효과적이라고 볼 수 있다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 90%, CSS폰트 10%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • MINI
  • 강지예 학생
BMW 미니 쿠퍼를 소개하는 브랜딩 아이덴티티 사이트이다. 컨셉은, 컨셉은, 미니쿠퍼의 브랜딩에 연계성을 띠어 스타일러쉬함과 편집력으로 선보였다. UI 인터페이스는, 위에서 아래로 스크롤다운 기능을 이용하여 볼 수 있다. 상단 고정 GNB 메뉴 이외에도, 곳곳에 관련해당 세부 콘텐츠 페이지로 바로 이동할 수 있게 버튼요소들을 배치하는 정보성까지도 고려하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 브랜딩 아이덴티티 사이트지만, UI/UX적으로 많은 신경을 쓴 부분으로 볼 수 있다. 사진편집을 활용하여 만든 사이트로 비교적 짧은 작업기간에 완성할 수 있었다.
선택된 콘텐츠에 시그니처컬러 레드 스트록박스로 표시해주어 가독성을 더했으며 이는 모듈레이션 기능성 기획으로도 살펴 볼 수 있다. 미니가 가진 스타일러쉬한 느낌으로 력 있게 만든 사이트로 볼거리가 많다. 또한 레이아웃에서도 고정된 그리드가 아닌, 서브페이지마다 특성에 맞게 혼합 그리드를 사용하여 보는 이로하여금 다채로움을 안겨준다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 혼합그리드    /    타이포그래피 - 이미지폰트 70%, CSS폰트 30%    /    컬러 - 통합컬러, 시그니처 컬러 사용
사이트 보러가기
  • nas story
  • Miss Dior
  • 장혜민 학생
디올의 대표적 메인향수이자 많은 여성들에게 사랑 받고 있는, 미스디올 브랜딩 캠페인 사이트다. 컨셉은, 사랑이라는 키워드로 미스디올에서 진행하는 캠페인 『Dior Love Chain』 슬로건과 함께 미스디올향수를 가장 잘 나타낼 수 있는 콘텐츠인 광고를 활용하여 선사한다. UI 인터페이스는, 스크롤을 이용하여 상하좌우 이동으로 미스디올에서 보여주고자하는 캠페인의 내용을 한 눈에 살펴볼 수 있도록 구성하였다. 모션그래픽으로 한눈에 캠페인 현황에 대해 잘 인지할 수 있도록 구성하였다. 영상과 모션그래픽등을 이용하였지만 사이트 구동력은 빠른편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 브랜딩 캠페인의 목적성과 깊이 있는 이야기를 전달하는 것에 주목성을 띨 수 있도록 미스디올이 전하고자 하는 One message만을 담았다.
사이트 비주얼으로는 미스디올이 전달하는 캠페인의 특성을 잘 담고 있는 광고 영상, 광고 스틸 사진들을 이용하여 보여준다. 사랑에 대해 생각을 공유하며, 공유된 생각에 멈추는 부분이 아닌 기부로 이어지는 뜻깊은 캠페인으로 얼마나 많은 사람들이 공유하는지를 직관적으로 볼 수 있도록 모션 그래픽을 이용하여 숫자 롤링으로 보여주며, 전반적으로 모듈레이션으로 율동성을 주었다. 반면, 캠페인에 초점을 맞추어 보여주다 보니 콘텐츠 부분에서는 조금은 단조로움을 느낄 수 있는 부분은 애석하다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 모듈그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • Fantastic Mr Fox
  • 오명선 학생
판타스틱 Mr. 폭스는 그랜드 부다페스트 호텔로 유명한 웨스 앤더슨 감독의 또 다른 영화로 영화소개를 위해 만든 마이크로 프로모션 사이트다. 컨셉은, Mr. 폭스 영화 장면들을 인용하여 카드뉴스 타입으로 풀어주며 스토리텔링으로 보여준다. UI 인터페이스는, 스크롤다운으로 콘텐츠를 볼 수 있도록 구성하였으며, 각 섹션마다 간결한 인터페이스로 세부 콘텐츠 페이지로 나누기도하며 버튼 또한 직관적으로 배치하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 인트로 화면에서부터 퍼블리싱에서 z좌표 값을 이용하듯, 3인칭 시점이 아닌 1인칭 시점으로 화면을 구성하고 있어 몰입감과 재미를 더 하고 있다. 영화 혹은 드라마 사이트 비쥬얼부분에서 자주 활용되는 스틸컷 장면은, 콘텐츠를 쉽게 접할 수 있고 내용을 간략하게 파악할 수 있는 하나의 메시지 전달과 같은 기능으로 활용도가 높다.
이는 정보전달성의 콘텐츠로 나열하는 것보다도 더욱 효과적인 기획방법의 하나이다. 그런 면에서 비주얼을 보여주는 메인 영역과 정보전달 역할을 하는 세부 콘텐츠 페이지를 나눠놓은 점은 좋은 기획이다. 나아가 세부 콘텐츠 페이지에서 안정적인 편집력까지 같이 보여주고 있기에 한결 완성도 있는 사이트로 만들어질 수 있었다. 디자인 초기 기획에서도 콘텐츠에 대해 모듈레이션으로 율동성을 띄어본다면, 전체적으로 구성력있는 좋은 사이트를 만들 수 있을 것이다.
-
프로그램 :photoshop xd
레이아웃- 플로우그리드, 변형그리드    /    타이포그래피 - 이미지폰트 70%, CSS폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • GUCCI X Ignasi
  • 박소연 학생
구찌와 일러스트레이터 이그나시 몬레알과 함께 홀리데이시즌을 맞이하여 기프트 기빙 컬렉션을 출시한 부분을 소개하는 콜라보 브랜드 프로모션 사이트다. 컨셉은, 이번 캠페인의 백미로 꼽히는 몬레알의 화풍과 구찌의 악세사리의 만남으로 탄생한 일러스트 작품들을 기반으로 초점을 맞췄다. UI 인터페이스는, 햄버거 메뉴를 통해 서브 콘텐츠 페이지에서 자세한 내용을 볼 수 있도록 섹션을 나누었다. 보여줄 부분을 명확하게 구분하였지만, 햄버거 메뉴만을 이용하여 페이지 이동을 해야 한다는 점에서는 불편한 감이 잇따른다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 컨셉 방향대로 구찌에서 진행한 콜라보로 탄생하게 된 몬레알의 화풍이 담긴 구찌 악세사리 일러스트를 메인에서 오로지 메인에 담아두어 작품들에 초점을 맞추었으며, 버튼을 이용하여 해당 구찌 악세사리도 자세히볼 수 있다.
하지만 기획에서 보여주고자 하는 몬레알의 작품들 크기가 전체적으로 작고 버튼의 요소의 색상과 크기가 시야를 가리는 듯하여 작품들을 자세히 보기에는 어려움이 있다. 이외에 볼만한 콘텐츠로는 콜라보 작품에서의 모티브가 된 '이카로스의 추락' 이야기다. 이번 컬렉션 상품을 카탈로그 속 작품에 담아낸 만큼 이카로스의 이야기도 서브 페이지에서 단독으로 보여준다. 전체적으로 아쉬운 점을 꼽는다면, 콘텐츠의 단조로움이다. 예를 들어 메인에서 작품을 보여주었다해도 전체적으로 작게 보이는 부분을 감안하여 섹션 콘텐츠로 컬렉션을 풀이미지로 보여줄 수 있는 갤러리 영역을 만든다는 등의 콘텐츠 기획에 대해 한 번 더 생각해보았더라면 하는 여운이 남는다.
-
프로그램 :photoshop xd
레이아웃- 플로우그리드    /    타이포그래피 - 이미지폰트 70%, CSS폰트 30%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Minions
  • 김경은 학생
일루미네이션 스튜디오의 5번째 장편 애니메이션 미니언즈. 미니언즈의 새로운 시리즈를 소개하는 영화 프로모션 사이트다. 컨셉은, 주인공 캐릭터들인 미니언즈를 소개하며 재미있고 친근하게 선보이고 있다. UI 인터페이스는, 상하 제어 스크롤을 통해 사이트를 쉽게 볼 수 있으며, 점프메뉴 역할로 미니언즈가 우측 상단에서 고정적으로 따라다닌다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 새로운 미니언즈의 시리즈 영화를 알리는 취지에 기획하였다.
이미 첫 번째 시리즈는 2015년에 개봉하여 현재 미니언즈 팬덤까지 확보되어 있는 편이다. 그렇기에 미니언즈 영화 자체를 홍보하기보다는 새롭게 개봉하는 시리즈 미니언즈 원정대의 이야기를 전달하는 목적과 캐릭터의 친근함을 전달하여 팬심을 사로잡도록 기획하였다. 전체적으로 목적성 토대로 만들어졌으나 미니언즈의 일러스트가 너무 많이 등장해서 그런지…. 프로모션사이트를 만든 이유 중 하나인 새로운 시리즈 정보전달과 편집력 부분이 아쉽다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • Johnnie Walker
  • 윤종민 학생
스카치위스키 브랜드 조니워커의 아이덴티티 사이트이다. 컨셉은, 조니워커가 가진 중후함과 남성의 향기로 선정했다. UI 인터페이스는, 화면 양측 배열로 나누어진 좌 / 우측에 톱니바퀴 형태인 아이콘을 통해 섹션 페이지들로 이동할 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 3가지로 나뉜다. 첫 번째, 인트로와 메인에서 그래픽스킬을 선보이는 부분으로 3D max로 구현하여 조니워커의 제조과정을 선보였다. 조니워커를 만든 학생의 또 다른 그래픽스킬능력 중 3D를 구현할 수 있는 장점을 살리기 위하여 비쥬얼을 100% 직접 표현 하였다. 두 번째, 편집력으로 기획한 조니워커 이야기 페이지와 세 번째로 조니워커 제품 소개 페이지다.
전체적으로 그래픽과 사진을 활용한 부분에서는 시원한 레이아웃으로 표현되었지만, 반면 타이포 편집력 쪽에서 아쉬움이 맴돈다. 조니워커 스토리 본문의 css 타이포 느낌으로 얇은 서체가 작게 들어갔기에 전체적으로 가독성과 판독성이 약한편이다. 이는 안티알리스로 인한 현상이기도 하다. 발란스가 중요하다. 어느 한쪽으로 기울어지면 흐트러지듯 좋은 그래픽으로 사이트를 만들었지만 편집력이 약해 보이면 아쉬움이 남는 사이트로 기억하게 된다. 그렇기에 발란스를 맞추며 전반적으로 힘을 쏟는 것이 중요하다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 혼합그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 아이덴티티 컬러
사이트 보러가기
  • nas story
  • Daelim Museum
  • 김가은 학생
대림미술관에서 진행되었던 복합전시 미술 PLASTIC FANTASTIC: 빛 컬러 판타지'전이다. 컨셉은, 전시회를 소개하는 프로모션 페이지로 구성되었다. 많은 사진과 다양한 편집력을 이용하여 전시회 내용을 소개하고 있다. UI 인터페이스는, 마우스 스크롤에 따라 콘텐츠들의 움직임을 보여주며 1P 1Scroll을 이용하여, 쉽게 콘텐츠들을 살펴볼 수 있도록 구성되었다. 다양한 표현기술이 쓰인 것에 비해 움직임의 속도는 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 전시회 테마들로 섹션을 나누어 전시회 작품들과 함께 전하고자 하는 1P 1 Message로 간결하게 보여주고 있다.
콘텐츠 중에서 인상에 남는 부분은 메인 비쥬얼 영역에 마우스를 움직여 여러 이미지들을 볼 수 있는 마우스모션부분이다.이는 정적인 비쥬얼에서도 마우스를 움직여 동적인 느낌을 살려주기에 흥미로움을 더한다. 섹션 페이지에서 전시 테마에 맞게 BG색상부터 전시 관련 사진들을 누끼편집과 타이포그래피로 표현하였다. 섹션 페이지로 이동시 좌우로 퍼져 있던 이미지들이 스크롤을 통해 중앙으로 모이게되는 애니메이션효과를 페럴렉스(parallax) 기능으로써 부여해주었다. 전시회 프로모션 페이지로 많은 이야기를 보여주고 있지는 않지만, 다양한 퍼블리싱 효과와 깔끔한 편집력에 눈길이 간다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Bulgari
  • 윤지연 학생
불가리 컬렉션인 디바스드림을 소개하는 마이크로 프로모션 사이트다. 컨셉은, 디바스드림이 주가 될 수 있도록 화려한 그래픽 보단 편집력을 선택하여 심플함으로 선보인다. UI 인터페이스는, 상하 스크롤 제어 방식이며, 콘텐츠 사이사이 보이는 버튼은 모두 상품 구매와 연결되어 구매까지 이어지도록 UI를 설계하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 불가리 디바스드림에 초점을 맞추어 영롱함과 아름다움을 전달하고자 하였으며, 화려한 그래픽보다는 심도있는 편집력으로 디바스드림이 가진 고유의 아름다움을 전달하는 방향으로 전개하고 있다.
1P 1 Message와 함께 번거로움을 최소화 시키기 위해 오픈 콘텐츠로 최대한 간결함을 돋보이도록 판구성이 기획되었으며, 전반적으로 이번 업데이트에서 많이 볼 수 있는 페럴렉스(parallax) 부분을 활용하여 모션센스를 한층 더하여 단조로워질 수 있는 부분을 피해갔다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Need for Speed
  • 임수호 학생
넥슨의 자동차경주 게임 니드포스피드엣지의 마이크로 사이트다. 컨셉은, 게임 소개 마이크로 사이트로써 시원시원한 레이아웃과 역동적인 모션그래픽을 구사하였다. UI 인터페이스는, 마우스 상/하 스크롤을 이용하여 콘텐츠를 볼 수 있으며, 햄버거 메뉴 또한 마련되어 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 단순한 기획으로 효과적인 사이트의 성격을 보일 수 있도록 기획하였다. UI 또한 직관적으로 설계되었다. 버튼 부분은 버튼답게 디자인되었으며, 버튼부분에도 모션을 추가하여 작은 부분까지도 신경썼다. 세부 콘텐츠에는 편리성을 생각하여 오토 슬라이드를 이용하는 등 사용자들이 쉽게 사이트를 볼 수 있도록 섬세한 기획력으로 풀어가려했다.
콘텐츠로는 게임에서 중요한 차량 소개들과 비디오, 이벤트 페이지들이지만 콘텐츠들에 모션감을 사용하여 레이싱 게임의 성격을 잘 나타내고 있다. 화면 전환 / 콘텐츠 등장 / 멈춰있는 낱장 비주얼에서의 마우스 오버 효과 등 세심한 부분까지 신경 써서 제어하였다. 화려한 그래픽, 구성력 좋은 편집, 이외에도 탁월한 퍼블리싱 효과를 사용함으로써 좋은 사이트 거듭났다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • Giorgio Armani
  • 신유진 학생
조르지오 아르마니 뷰티 브랜딩 마이크로 사이트다. 컨셉은, 브랜딩 이미지에 맞게 화려하고 심플한 느낌으로 기획하였다. UI 인터페이스는, 우측 상단에 고정적인 GNB가 배치되어 있으며 스크롤다운 방식으로 사이트를 볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 조르지오 아르마니 뷰티 제품들을 소개하는 부분에 초점을 맞추어 시원한 레이아웃과 클로즈업기법으로 보여주고 있다. 제품을 부각 시킬 수 있도록 조르지오 아르마니 시그니처 컬러 레드를 제외하고는 모두 모노톤느낌으로 색채감을 조절함으로 듀오톤 느낌으로 표현하였으며, 투톤 이상에서 오는 강렬하고 세련된 느낌을 연출하였다.
타이포그래피 부분에서는 정보전달에 맞게 세리프와 산세리프로 사용하여 전체적으로 판독성 위주로 작업이 진행되었다. 본문의 자간의 움직임을 조밀하게 표현하여 안정감을 더했다. 전체적 레이아웃으로는 블록그리드로 , 세부콘텐츠 부분에서는 컬럼그리드를 이용하여 깔끔한 페이지를 구성하여 조르지오 아르마니의 브랜드를 잘 나타내며 주력 상품들을 선보이고 있다.
-
프로그램 :photoshop xd
레이아웃-블록그리드, 컬럼그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 투톤이상에서의 강조
사이트 보러가기
  • nas story
  • TOMS
  • 박현주 학생
사회적 기업, 탐스 슈즈의 브랜딩 사이트다. 컨셉은, 탐스 브랜드가 진행하는 기부 캠페인을 알리는 취지에 기획하였다. UI 인터페이스는, 메인이자 첫 섹션페이지에 놓여 있는 GNB를 이용하여 원하는 콘텐츠로 이동이 가능하며, 이후에는 점프메뉴 곡선형 라인 위에 놓여진 원형버튼을 이용하여 다른 섹션 페이지로 이동이 가능하다. 콘텐츠들을 방해하지않음과 동시에 디자인의 기능성으로 잘 보이지만, UI 기능보단 디자인 일부로써 지나치기 쉽기에 역할적인 부분에서 아쉬움이 든다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 탐스 브랜드에서 창립하게 된 이유, 기부에 대한 캠페인 'One for One'에 대해 알리는 브랜딩 사이트로 구성하였다.
새로운 '물' 기부 캠페인. 탐스의 커피 로스팅코를 마실때마다 도움이 필요한 사람들에게 깨끗한 물을 기부할 수 있다. 이외에도 탐스에서 진행하는 기부 캠페인 종류들을 사진과 귀여운 일러스트로 소개하고 있다. 기부는 어려운 일이 아닌, 탐스와 함께 한다면 one for one 캠페인으로 소비와 동시에 기부 캠페인에 쉽게 동참할 수 있다는 메시지를 전하고 있다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Nintendo Switch
  • 조미현 학생
닌텐도에서 선보인 게임기 Nintendo Switch를 소개하는 마이크로 프로모션 사이트다. 컨셉은, 어디서나 편하게 Nintendo Switch 사용할 수 있는 점을 선두에 두며 스위치의 제품소개를 전하고자 한다. UI 인터페이스는, 상하 스크롤을 이용하여 이동에 편리성을 부여하였으며, 세부 콘텐츠 또한 팝업을 이용하여 스위치 게임의 특성인 편리성에 초점을 맞추어 구성하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 닌텐도에서 베스트셀러로 많은 인기를 받고 있는 마리오 게임을 응용하여 닌텐도 스위치 마이크로 프로모션 사이트를 보는 내내 게임을 직접 경험하는 듯한 효과를 불러오고 있다.
페럴렉스(parallax) 웹 퍼블리싱 부분을 활용하여 모션센스를 더해 재미를 선사하고 있으며, 스위치 게임기만의 휴대성과 다양한 활용성을 소개하며 보는 이로 하여금 구매 욕구를 불러일으키고 있다는 점에서 매력적인 마이크로 프로모션 사이트라고 볼 수 있다. 전체적으로 디자인에서 큼직한 오브젝트 요소들을 많이 사용하다 보니 여백이 충분하지 않다보니 타이포그래피 부분에서 플로우마진을 잡을 수 있는 여백이 없어 답답함을 나타내고 있어 디자인에 모듈레이션기법으로 율동성을 가미했더라면 어땠을까하는 생각에 여운이 남는다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Banana Milk
  • 고지경 학생
서울우유가 출시한 맛단지 바나나 마이크로 프로모션 사이트다. 컨셉은, 바나나를 좋아하는 미니언즈를 모델로 활용하여 바나나 맛의 풍미와 미니언즈의 귀여움을 동시에 보여줄 수 있도록 기획되었다. UI 인터페이스는, 상하 스크롤 이동으로 사이트를 쉽게 살펴볼 수 있도록 기획되었으며, 세부 콘텐츠 또한 팝업으로 띄워 간폄함을 더했다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 맛단지 바나나 사이트는 카피라이팅 기법을 활용하여 간단명료하게 구성했다. 전달하고자 하는 바를 바나나의 패키지와 미니멀한 미니언즈 캐릭터들을 활용한 단순하고 직관적인 광고형식으로 풀어가며 1P 1Message로 사용자들에게 전한다.
신제품을 출시하면 제품에 관한 많은 이야기를 전달하려는 마음에 본질을 찾기 어렵게 포장하는 경우가 있다. 이런 점을 먼저 생각하여 맛단지 바나나 프로모션에서는 카피라이팅기법을 활용해서 1P에 1MSG의 핵심 내용만을 타이포그래피와 장면설정 그래픽 기획으로 전달하고 있다. 카피라이팅기법은 광고에서 많이 사용되지만, 디자인과도 밀접한 연관성이 있으며 이를 이용하여 깔끔/명료하게 언어를 이미화하여 전달할 수 있다는 방법을 느낄 수 있게 하는 사이트다.
-
프로그램 :photoshop xd
레이아웃-플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Nomos
  • 장혜림 학생
바우하우스의 미니멀한 디자인을 만드는 독일 브랜드 시계회사 nomos의 마이크로 사이트이다. 컨셉은, 미니멀, 심플, 모던 이라는 키워드를 이용. UI 인터페이스는, 위에서 부터 밑으로 스크롤링이 되는 방식이며, GNB는 콘텐츠의 주목성을 고려하여 좌측에 고정시켰으며, 마우스 오버시 GNB를 보여주는게 아닌, 명확한 클릭이 있을때 펼쳐지는 형식으로 담았다. 사진편집들로 인하여 많은 이미지를 사용한 것에 비해 움직임의 속도가 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 누끼편집등 시원시원한 이미지 활용과 메인에서는 로테이트(rotate)를, 콘텐츠 영역에서는 페럴렉스(parallax) 웹 퍼블리싱 부분을 활용하여 모션센스를 한층 더했다.
flow그리드 안에서 보여주는 페럴렉스는 시원시원한 느낌까지 자아내고 있어 편집력이 볼만하다. 페럴렉스(parallax)는 스크롤 또는 특정 액션에 따라 애니메이션 처럼 시간의 흐름에 따라 점차적으로 보여주는 방식으로 눈길을 끄는 시각적 효과와 웹사이트에 방문한 사람들에게 짧은 시간이지만 강렬한 인상을 남길 수 있다. 기획, 디자인, 퍼블리싱 삼박자에 모두 심혈을 기울인만큼 완성도 있는 사이트를 만들어 낼 수 있었다.
-
프로그램 :photoshop xd
레이아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • GiGA Genie
  • 이주현 학생
인공지능 GiGA Genie 프로모션이다. 컨셉은, 인공지능 스피커 기가지니를 일상생활에서의 활용법을 소개하고 있고, 라인일러스트로 표현하여 아기자기함을 더했다. UI 인터페이스는, 가로 스크롤링 방식과 함께 좌측 GNB를 눌러 각 섹션 페이지로 쉽게 움직일 수 있으며, 각 섹션에는 2~3개 블럭 콘텐츠로 나누어 있는데 각 블럭에 마우스 오버시 주황색으로 선택영역을 표시해준다. 아쉬운 점은 누를 수 있는 콘텐츠 gUI 부분이 콘텐츠 페이지에 녹아 있어 쉽게 인지하는 부분에서 어려움이 따른다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠기획은, 상황 장면에 맞추어 기가지니 활용법을 보여주고 있다. 사람과 지니를 클릭하면 말풍선과 음성지원을 보고, 들을 수 있다. 첫번째 home섹션 3번째 블럭 부엌장면에서 커피를 마시고 있는 사람을 클릭하면 지니가 택시를 불러주는 버전을 볼 수 있다.
지니가 '카카오택시를 불렀어요' 라는 메시지와 함께 우측 하단에서 택시가 오는 모습을 볼 수도 있으며, 두번째 ginie섹션 4번째 블럭 회의장면에서 지니를 클릭하면 야식을 먹는 장면을 볼 수 있는 것과 같이 쉽고 재미있게 지니 활용법을 보여주고 있다. 또한, gif를 이용하여 정적인 일러스트에서도 지루하지 않도록 꾸밈을 준다. 콘텐츠 내용을 쉽게 인지하고 볼 수 있도록 직관성 부분을 조금 더 고려하였다면 보다 완성도를 높이지 않았을까라는 생각에 여운이 남는다.
-
프로그램 :photoshop xd
레이아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • LG SIGNATURE
  • 황인성 학생
LG SIGNATURE 마이크로 사이트이다. 컨셉은, '제품 기능성을 한눈에 보여준다'로 삼을 만큼, 시원시원한 레이아웃과 타이포그래피를 구사하였다. UI 인터페이스는, 가로 스크롤링 방식으로 각 섹션으로 넘어가게 된다. 사진편집들과 비디오 등을 이용하였음에도 페이지를 보여주는 움직임의 속도가 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠기획은, 컨셉에 맞추어 기획하였다. 메인화면은 VEG포토그래피, 스큐어모피즘을 이용하여 거실 모습을 표현하였고, 거실 중앙 배열로 제품과 '제품을 클릭하세요'라는 메시지가 한눈에 잘 보이도록 구성하였다. 메시지 내용에 맞춰 클릭하는 동시 거실 벽면의 모습이 푸른 초원 이미지로 화면전환이 이루어지며, 한눈에 공기 청정의 시원함을 느낄 수 있도록 표현했다.
전체적으로 가독성을 염두하며 작업을 했다. 또한 오실레이션을 응용하여 강조와 비강조를 나누었다. 가독성 있는 고딕체 계열에서도 얇은체와 두꺼운체를 적절하게 사용고, 타이포 크기 또한 강/약을 두어 오실레이션을 사용하였다. 제품 정보부분은 미니멀 디자인으로 군더더기는 빼고 1P 1 Message로 제품을 소개 하고 있다. 많은 이미지 편집을 이루기보다는 제품특징 부분 레인 뷰 디자인 부분에는 레인 뷰의 비디오 bg을 이용하였고, 상부 급수 페이지에서는 물이 흐르는 모습, 제품의 view 모습 등 제품과 연관성이 높은 이미지 등을 이용하여 시원시원하고 집중력 있게 1P 1image로 보여주고 있다.
-
프로그램 :photoshop xd
레이아웃 - 블록그리드, 플로우그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Osulloc
  • 이지은 학생
오설록 티 뮤지엄 마이크로 사이트이다. 컨셉은, 제주도에 있는 티 뮤지엄을 표현하기 위하여 제주도의 느낌을 일러스트로 표현. UI 인터페이스는, 마우스 스크롤에 따라 자전거 일러스트가 움직임을 보여주며 좌에서 우로 이동하며 둘러 볼 수 있고, 많은 표현기술이 쓰인 것에 비해 움직임의 속도는 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠기획은, 티 뮤지엄과 제주도를 고려하여 일러스트로 제주의 아침부터 밤까지 표현하였다.
긴 스크롤 사이트의 특징은 한 페이지 안에 스크롤로 이어지는 듯한 스토리 텔링 컨셉을 가져갈 수 있다. 섹션들을 명확하게 구분할 필요 없이 자연스럽게 스크롤의 진행으로 이야기하듯 콘텐츠를 풀어나갈 수 있다는 점을 충분히 활용한 작품이다. 팝업으로 뜨는 섹션 콘텐츠가 있지만 다양하지 못하며 단조로운 편이다.
-
프로그램 :photoshop xd
레이아웃-플렉시블그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Ray
  • 서유진 학생
기아자동차 레이 프로모션이다. 컨셉은, 사진편집을 활용하여 한눈에 레이를 소개하고 있다. UI 인터페이스는, 위에서부터 밑으로 스크롤링 되는 방식으로, 사진편집들로 인하여 많은 이미지를 사용한 것에 비해 움직임의 속도는 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있으며, 해상도 관련 코치 마크가 사이트를 보는 사용자들의 친절함을 더한다.
콘텐츠기획은, 레이 자동차에 대한 정보성으로 제작되었으며 타이포의 내용전달보다 이미지의 내용전달로 쉽게 볼 수 있도록 구성되었다. 심플함을 초점으로 시작하여 편집적 관점으로 사이트를 풀어간다. 군더더기 없는 핵심 내용만 전달하는 심플함과 함께 monochromatic colors를 이용 사이트에 이용되는 사진 및 제품의 컨셉 색등과 같이 일관된 색으로 전체를 유지하고 있다.
인터렉션이 들어가는 버튼이나 사용자의 유도나 집중이 필요한 곳에 대비되는 색으로 노란색 버튼과 같은 요소를 만들기도 하였다. 심플함이 자칫 단순하고 평이한 부분으로 이어질 것을 고려, 섹션들마다 레이아웃을 다양하게 사용하고 있어 지루함 또한 적으며 호버효과등을 이용하여 시원시원하게 콘텐츠들을 보여주고 있다. 메인부터 시작하여 이질감 해소값으로 적용된 누끼편집이 스크롤링 시 간간이 보여 스타일리쉬해 보이는 점도 꽤 볼만하다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드, 혼합그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Journey
  • 이진영 학생
힐링 게임 저니의 마이크로 아이덴티티 사이트이다. 컨셉은, 저니 특유의 일러스트를 살려 아름답고 몽환적인 느낌으로 표현하였다. BG사운드 또한 훌륭하며 일러스트의 느낌만으로도 힐링이 된다.
UI 인터페이스는, 밑에서부터 위로 스크롤링으로 사이트를 둘러 볼 수 있으며, 사운드는 별도로 off 버튼이 구성되었다. 각각의 섹션마다 모션의 느낌은 최대한 부드럽게 표현되었다. 모니터 해상도는 PC용 디바이스 1920 해상도에 맞춰 있다.
콘텐츠기획은, 저니 특유의 몽환적인 아이덴티티를 살려 표현하는 것이 주된 기획이었으며 섹션없이 단페이지 구성이 특징이다.
-
프로그램 :photoshop xd
레이아웃-플렉시블그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 아이덴티티 컬러 (그라데이션 표현)
사이트 보러가기
  • nas story
  • Melon Load
  • 이병용 학생
멜론 음악 사이트에서 준비한 음악 문화 페스티벌 프로모션 사이트이다. 컨셉은, 홍대라는 특정한 공간에서 열리는 음악 페스티벌이라는 방향성으로 홍대 지도로 멜론 로드를 표현하였다. UI 인터페이스는, 마우스 좌표 드래그 값으로 이동하는 방식이며, 메뉴는 좌측으로 GNB영역과 함께 히든메뉴로 공연장 이름의 말풍선을 클릭하면 박스구성으로 콘텐츠 정보를 살펴볼 수 있다.
둘러 보기 방식을 이용하였지만, 사용자들이 지쳐서 이탈하는 현상을 방지하고자 주요 콘텐츠에 대해서 하단에 네비게이션을 노출하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠는, 단그리드와 혼합그리드를 이용하여 보여주며, 콘텐츠 또한 육하원칙을 기준으로 풀었다.
페이퍼 아트의 느낌과 라인일러스트를 활용하여 아기자기함을 풀었으며, 멜론로드 좌측의 GNB를 이용하여 퀵 메뉴를 이용 멜론로드에 대한 정보를 빠르고 쉽게 볼 수 있도록 진행하였다. 야외공연으로 진행하는 만큼 날씨에도 민감한 부분을 놓치지 않고 상단에는 날씨에 대한 정보를 빠르고 쉽게 보여주고 있다. 오실레이션부분으로 멜론로드 이벤트를 하는 곳과 그렇지 않은 곳의 음영 차이를 확실히 했다면 한결 가시성을 좋았을 것 같은 아쉬움과 말풍선을 클릭하면 콘텐츠 내용을 볼 수 있다는 직관성이 표기되어 있지 않은 부분에서 여운이 남는다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Porsche
  • 나예솔 학생
포르쉐 마이크로 아이덴티티 사이트이다. 컨셉은, 다양한 그래픽과 모션을 이용하여 흥미롭게 제작되었으며 마우스 좌표를 이용한 레이아웃이 포인트이다. UI 인터페이스는, 마우스를 잡고 끄는 방식으로 제작되어 재미와 불편함의 두 가지가 공존한다. 그래픽의 표현력은 집중력 있게 잘 표현되었지만 이로 인해 무거운 인터페이스는 다양한 디바이스를 제공하지 못한다.
모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있으며 와이파이 환경에서는 느린 편이다. 콘텐츠기획은, 보여주기에 대부분 맞춰 있다. 정성을 들여 표현한 그래픽작업은 충분한 비주얼을 보여주지만 섹션기획은 거의 없어 단출하다.
-
프로그램 :photoshop xd
레이아웃-플렉시블그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Maserati
  • 김정아 학생
이탈리아 스포츠카 마세라티의 Granturismo 브랜드 마이크로 사이트이다. 컨셉은, '스포츠카 마세라티의 웅장함을 소개하다'에 주안점을 맞추었다. 고객 경험관리(CX: customer experience)에 초점을 둔 마세라티의 콘텐츠는 Granturismo 차량 소개, 카 컨피규레이터, 기종 소개에 대해서 3개의 섹션으로 나뉘며, UI 인터페이스는, 비주얼에서 보이는 블럭 메뉴들로 순차적으로 섹션을 이동하는 방식이다. 또한, 좌측 최상단에 있는 마세라티의 로고 메뉴로 활용하고 있어 블럭 메뉴 클릭 이동 방식 외에도 쉽게 전반적인 사이트 카테고리를 살펴볼 수도 있다.
마세라티는 사진을 활용 편집적인 디자인으로 이끌고 있다. 많은 사진을 사용함에도 움직임의 속도는 빠른 편이다. 페이드아웃을 이용, 각각의 섹션마다 넘어갈 때의 시선의 흐름을 최대한 부드럽게 연결한다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠기획은, 광고사진과 같은 느낌으로 메인 비주얼 한 장에 마세라티를 로우앵글 구도와 함께 빛의 느낌 및 편집적 느낌으로 중후함을 자아내고 있다.
각 섹션마다 2분할, 4분할 등으로 분할 레이아웃을 사용 주목성과 명쾌성을 띠고 있다. Micro Interaction 디자인이론을 사용하고 있는 마세라티는 고객 경험관리(CX: customer experience)에 꽤 많은 기획력을 생각하며 만들어진 작품이며, 콘텐츠 중에서도 카 컨피규레이터를 보면 그 점을 잘 느낄 수 있다.
카 컨피규레이터는 올해 영국으로 시작한 잠재적 소비자들을 위한 차량 색상, 옵션 등의 맞춤 선택 기능을 추가하여 상세하게 살펴볼 수 있는 플랫폼이다. 모든 페이지에서는 다양한 비주얼의 요소가 등장하기보단 마세라티 Granturismo에 초점을 맞추어 보여주고 있는 힘이 있다. 집중력있게 사이트를 보여주는 힘을 갖고 있다. 그래서 더욱 집중력 있게 살펴 보게 된다.
-
프로그램 :photoshop xd
레이아웃-블록그리드    /    타이포그래피 - 이미지폰트 80%, CSS 폰트 20%    /    컬러 - 통합컬러
  • nas story
  • Absolut
  • 박지수 학생
앱솔루트 마이크로 아이덴티티 사이트이다. 컨셉은 앱솔루트를 즐기는 화려한 분위기를 표현하고, 기획은 광고기획으로 초점을 이루어졌다. UI 인터페이스는, 위에서부터 밑으로 스크롤링을 이용하여 둘러 볼 수 있고, 각각의 섹션마다 모션의 느낌은 최대한 부드럽게 연결되었다. 모니터 해상도는, pc용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠기획은, 앱솔루트는 광고기획 관점으로 풀어진 사이트이며, 이점은 인트로 부분에서부터 만날 수 있다. 인트로에서 스위치 부분은 인상적인 부분으로 꼽을 수 있다. '불을 키다'는 기획으로 어두운 화면에서 시작하여 스위치가 켜지는 느낌과 함께 앱솔루트 내용을 볼 수 있는 건 참신한 광고기획으로 여길 수 있다. 이미지 리터칭으로 표현하고 있으며, 아이덴티티 컬러 및 제품의 질감, 패키지 활용 등을 적극적으로 활용하여 앱솔루트가 가진 시원함을 잘 보여준다.
섹션 페이지로 넘어갈 때마다 부드럽게 화면에 보이는 콘텐츠들은 앱솔루트가 가진 고급스러운 느낌을 증폭시킨다. 앱솔루트는 명확한 타깃 오디언스 선정을 한 작품으로 볼 수 있다. 아이텐티티가 제품과 제품의 컬러 초점이 맞춰져 있어 비주얼 퀄리티로 오늘 밤 앱솔루트가 한잔 기울여보고 싶다는 생각이 들 정도다. 실무에서 정말 좋은 광고는 멋지고 크리에이티브하고 아이디어가 살아 있는 광고보다는, '광고 기획에서 설정한 타깃 오디언스의 마음을 움직이고 광고 목표를 달성해야 한다'는 부분까지 살펴보아야 하는 점에서 이 작품을 본다면 성공한 작품이라고 볼 수 있다.
-
프로그램 :photoshop xd
레이아웃-플렉시블그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • Yves Saint Laurent
  • 고광석 학생
이브 생로랑 마이크로 아이덴티티 사이트이다. 컨셉은, '내 책상 위의 이브 생로랑'으로 VEG 포토그래피 스큐어모피즘을 활용, 사실적 비주얼 표현방식을 사용했다. UI 인터페이스는, 센스있는 인터렉션으로 마우스 무브 드래그 형식으로 감상할 수 있다. 마우스 드래그 형식으로 마치 책상 위를 둘러보는 느낌으로 부드럽고 자연스레 이동한다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
이브 생로랑이라면 누구나 한 번쯤 들어보았듯 명품 분야에 속한다. 콘텐츠 기획은, 홍보 및 브랜드 전달 목적으로 만들어진 사이트의 목적과 함께 스큐어모피즘에 맞추어 사실적 주의 관점에서 여성들이 좋아할 이브 생로랑의 베스트 제품들을 책상이라는 공간에서 친근한 느낌처럼 보여주고 있다. 사용자의 행동에 반응하는 인터렉션등 사용자에게 흥미를 유발하고 감각이 돋보이는 인터렉션이기하다.
반면 마우스의 드래그로써 이동해야 하는 번거로움도 따른다. 비주얼사이트로 이루어진 이브 생로랑 사이트에서 사용자들을 위해 준비한 재미 중 소개해 볼 만한 부분이 있다면, 책상 스탠드의 on/off로 불을 꺼보기도 하고, 부드럽게 롤링 되는 책의 비주얼 영역이라든지, 노트북 밑에서 나오는 명함 등은 Real-Life Metaphor의 역할로 재미있는 요소이자 스큐어모프를 더욱 강조시킨다.
비주얼 사이트에 초점을 맞추어서였을까? 볼만한 콘텐츠의 내용은 적은 편이어서 애석하다. 사실적 비주얼을 고려, 책상 위에 있을 법한 태블릿, 노트북, 책과 같은 오브젝트를 활용하여 비주얼 영역과 콘텐츠 영역을 구분해두기보단, 자연스럽게 오브젝트 내에서 콘텐츠들을 풀고 있어 콘텐츠 정보 전달에는 힘이 약하다.
-
프로그램 :photoshop xd
레이아웃-플렉시블그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 색상의 간소화로 아이덴티티 강조
사이트 보러가기
  • nas story
  • PutongPutong Taiwan
  • 김유나 학생
타이완(대만) 여행을 소개하는 프로모션 사이트이다. 컨셉은, 타이완 마스코트 오숑 캐릭터가 소개하는 여행 소개로서 재미있고 친근함으로 이루어졌다. UI 인터페이스는, 위에서 아래로 내려가는 스크롤 다운 형식이며, 북마크처럼 우측에서는 오숑이 따라 다니며, 현재 보고 있는 페이지가 몇 번째고 어디인지 친절하게 알려준다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠는, 여행소개 하면 떠올리는 그런 딱딱한 레이아웃과 정보전달이 많은 형식을 벗어나 친근한 일러스트와 함께 오브젝트 꼴라쥬 등의 인터렉션 디자인으로 눈길을 사로잡는다. 각 섹션 1페이지당 1메시지를 전달하고 있다. 크게 섹션으로 살펴본다면, 미식    /    문화    /    쇼핑 여행으로 나누어지며 놓치지 말아야 할 꿀팁을 오숑의 캐릭터 활용으로 재미있게 전달한다.
각 섹션으로 넘어가기 전의 간지 페이지가 볼거리 중 하나이다. 오브젝트들과 변형체 타이틀로 시선을 끌며 누끼편집이 활용되어 레이아웃의 리듬감과 율동감과 함께 곧 소개될 본문의 내용에 대해 궁금증을 유발하기 때문이다. 콘텐츠 보기 방식에는 팝업창 방식의 포맷편집 구성을 이용, 시선 고정을 시키며 내용을 소개하고 있다. 포맷편집에서 고려해야 하는 점인, 정리는 잘 되어 보일지라도 자칫 재미없는 레이아웃이 될 수 있는 것처럼 포맷편집 안에서도 오실레이션을 활용했더라면 더 보기 좋은 형식으로 디자인이 되었을텐데하는 안타까움이 남는다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드, 블록그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • NICK KNIGHT : IMAGE
  • 지슬아 학생
국내 최초로 전시되는 닉나이트 사진전이다. 컨셉은, 사진전인 만큼 최대한 모던하게 표현하기 위하여 투톤 위주의 작업으로 진행되었다. UI 인터페이스는, 빠르고 쉽게, 그리고 정보전달 위주로 제작되었으며 메인 인터페이스에서 동적인 모션을 추가하였다.
모니터 해상도는, 21인치 이상의 1920 해상도에서 가장 적합한 뷰를 볼 수 있으며, 기타 사이즈에서 반응형으로 제작되지 않았기 때문에 노트북이나 태블릿에서 작품을 보기가 어렵다. 콘텐츠는, 대림미술관에서 진행되는 정보와 이벤트 프로모션을 구성으로 생각하며 진행하였다.
타이포그래피는 정보전달에 맞게 변형체는 사용되지 않았으며 고딕계열의 카피라이트와 본문으로 자간의 움직임을 조밀하게, 자폭의 움직임은 카피라이트에서 표현되어 좀 더 판독성 위주의 작업이 진행되었으며 본문 이미지 폰트의 쓰임으로 가독성이 아쉬운 부분이다. 단순한 사진 편집에서 그치지 않고 색채 표현방식으로 듀오톤(duotone)을 사용하여 투톤 이상에서 오는 강렬하고 세련된 느낌을 연출하였다.
-
프로그램 :photoshop xd
레이아웃 - 플랙시블그리드, 블록그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 투톤이상에서의 강조
사이트 보러가기
  • nas story
  • Wedge wood
  • 임유정 학생
영국의 도자기 회사인 웨지우드 아이덴티티 사이트이다. 컨셉은, 라인일러스트와 수묵화 등의 표현방식을 활용 250년의 전통과 따뜻한 느낌의 웨지우드 아이덴티티를 전달하려는 기획컨셉으로 구성되었다. UI 인터페이스는, 위에서부터 밑으로 스크롤링 되는 스크롤다운이며, 많은 이미지를 사용한 것에 비해 움직임의 속도는 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠는, 큼직큼직한 사진 편집을 중앙정렬로 이용하여 맞추어 스크롤 다운으로 밑으로 내려오며 페이지가 보이는 형식이다. 큼직큼직한 사진 편집 , 타이포 등으로 시원시원해 보이는 느낌을 주고 있다. 화이트 BG가 가진 깨끗함과 단색의 라인 일러스트으로 비주얼을 표현해 나가고 있으며, 이는 도자기의 아이덴티티의 오리엔탈리즘과도 조화롭게 이어가며, 고급스러움을 한층 돋보이고 있다.
콘텐츠 섹션들의 여백으로는 텀이 길어 자칫 공백으로 보일 수 있던 부분을 라인일러스트를 타고 내려오면서 꾸준히 보여주고 있기에 이질감 해소와 눈 트임의 부분을 잘 풀어가고 있다. 아쉬운 점이 있다면, 타이포 부분과 편집 2가지를 꼽을 수가 있다. 섹션 타이틀과 본문은 이미지 폰트로 이루어져 있으며 약간의 픽셀 깨짐 등이 눈에 읽히게 된다. 이러하듯, 가독성 및 사진과 본문의 내용 겹침, 여백 등 미세하지만 조금 더 신경을 썼더라면 더 좋은 작품으로 승화되지 않았을까? 라는 여운이 감돈다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드    /    타이포그래피 - 이미지폰트 70%, CSS폰트 30%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Johnnie Walker
  • 이도화 학생
스카치위스키 브랜드 조니워커의 아이덴티티 사이트이다. 컨셉은, 신사를 위한 조니워커라는 조니워커 브랜드 아이덴티티를 활용하여 만들어갔다. UI 인터페이스는, 하단의 원형 기어 GNB를 이용하여 각 섹션으로 넘어간다. GNB는 원형 기어 형태의 모양성과 가죽 텍스쳐를 이용, 고급스러움과 원형 기어를 돌리며 전환되는 UI 구성으로 인상적이다.
모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠에서 BG는 어두운 값으로 조니워커의 제품과 콘텐츠를 잘 보일 수 있도록 염두에 뒀다. 각 섹션 마다 조니워커의 라벨링에 그려진 신사가 등장, 신사의 캐릭터는 오른쪽 아래에 존재함으로 이야기를 이어나가며 콘텐츠를 보여주고 있는 느낌마저 감돈다.
필기체 변형체와 명조체 등의 타이포와 오브제 꼴라쥬 등은 조니워커의 아이덴티티는 중후함을 전달하고자 하였다. 타이포그래피 부분 활용된 명조체, 자간, 행간 및 각 섹션마다 달라지는 레이아웃 정렬 방식 등을 전반적으로 살펴본다면 조금은 오래되어 보이는 듯한 사이트의 느낌이지만 이는 조니워커의 전통성과 연계되는 느낌을 준다. 프로모션에 나오는 음주운전을 하지 않겠다는 약속의 콘텐츠 내용으로 소개되는 약속한 사람, 집까지 안전하게 타고 간 거리 등은 조니워커의 품격을 더하는 페이지는 UX 부분에서 조니워커의 브랜드를 잘 보여주는 콘텐츠로 기억에 남는다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드, 혼합그리드    /    타이포그래피 - 이미지폰트 70%, CSS폰트 30%    /    컬러 - 아이덴티티 컬러
사이트 보러가기
  • nas story
  • Galaxy GearS2
  • 박혜은 학생
삼성 스마트 워치 기능에 대하여 설명하는 갤럭시 기어 s2 마이크로 사이트이다. 메인화면에서는 로켓 발사 표현을 보여주며 아래에서 위로 올라가는 스크롤링 방식으로 우주를 표현하고 있다. 컨셉은, 기어 s2에 대한 Unique and Advanced 앞선 이미지를 표현할 수 있는 유니크하고 특별한 디자인을 보여주는 부분에 콘텐츠 초점을 풀고 있어 스크롤링과 함께 따라오는 기어 s2 화면에서 콘텐츠를 보여주며 고객 경험관리(CX: customer experience)도 함께 고려 되었다는 점을 발견 할 수 있다.
UI 인터페이스는, 플렉시블그리드, 혼합그리드로 이루어져 있으며, 긴 스크롤링 페이지로 감상 할 수 있다. 메인화면에서는 로켓 발사 표현을 보여주며 아래에서 위로 올라가는 스크롤링 방식으로 우주를 표현하고 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠 중 첫 번째 섹션에서는 기어에 대한 다양한 스크랩을 보여주며, 두 번째 섹션에서는 기어의 화면에서 이루어지는 다양한 애플리케이션 제공방법을 보여주어 고객 경험관리(CX: customer experience)를 고려하고 있다는 것을 알 수 있다. 시원시원한 view를 위하여 혼합그리드로 콘텐츠 내용에 맞게 적절하게그리드를 사용해 나가며, 그로 인하여 시원시원한 느낌마저 든다.
아쉬움이 있다면, 화면 구성상 기어 s2 화면이 가운데 정렬에 맞추어 지속해서 보여주어 콘텐츠에 대한 정보전달에 대해서는 가시성, 가독성이 떨어지는 부분이다. 또한, 타이포도 그레이 계열로 오실레이션을 고려하여 강조, 비강조를 생각한 부분이라든지, 시원시원한 비주얼을 고려하여 여백 활용에 대하여 생각 해 본다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드, 혼합그리드    /    타이포그래피 - 이미지폰트 80%, CSS폰트 20%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Nikon
  • 임지혜 학생
니콘 카메라 중 D500 기종을 소개하는 마이크로 사이트이다. 컨셉은, 우주로 잡아 신비로움을 표현하고 있고, UI 인터페이스는, 위에서부터 밑으로 스크롤링 되는 방식이다. GNB는 메인화면에 고정, 퀵 메뉴 역할로 화면 우측에 게이지 바가 따라 다니지만, 숫자로 표기되어 어떤 메뉴인지 확인이 어려운 점은 약간 불편한 사항 중 하나로 꼽을 수 있다.
모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 니콘 사이트는, 스큐어모피즘의 디자인이론에 초점을 맞춘 만큼 극사실화의 더 가까워질 수 있도록 비주얼 스킬에서는 오브제꼴라쥬, 텍스쳐드로잉, 명암스킬, 이미지 리터칭 합성으로 이어지고 있다.
특히 가장 큰 강점은 모션이라고 볼 수 있다. 메인 비주얼 중 마우스 좌표값을 따라 다니는 지오 메트릭은 마치 별자리 같은 느낌으로 재미와 시선을 사로잡으며, 각 섹션에서도 빛의 움직임 등 모션을 추가하여 화려함을 더해주고 있다. 아쉬운 점이 있다면 충분한 비주얼을 보여주고 있지만, 섹션콘텐츠가 있지만 전달하고자 하는 내용이 적은 부분에서는 심심함이 감돈다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • HONEY TONGTONG
  • 김혜인 학생
해태브랜드 과자 허니통통 프로모션 사이트이다. 컨셉은, 꿀벌들이 허니통통을 만드는 제조공장을 구경한다는 스토리텔링과 귀여움을 더하는 일러스트 사용, 모션들을 가미하여 더욱 아기자기한 맛을 살려낸다. UI 인터페이스는, 패럴렉스 스크롤 방식이다. 섹션으로 내려갈 때의 속도감과 부드러움은 좋은 편에 속한다. 메인부터 따라 내려오는 꿀벌이 스크롤링에서도 지속해서 보여주는 재미를 추구한다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
허니통통 사이트 콘텐츠에서 가장 볼만한 요소는 표현기술을 꼽을 수 있다. 이 작품은 명암스킬을 통해 하나하나 그려나간 것이 인상적이다. 일러스트는 일러스트 프로그램으로 그려나간다는 생각을 하는 것이 보편적인 생각이지만, 웹 형태에서는 사실 일러스트 프로그램은 잘 사용하지 않는다.
그 이유는 한 번 더 비트맵으로 컨버팅이 된다면 깨져 보이는 경향도 있기에 처음부터 포토샵에서 제작하기 때문이다. 명암스킬은 사물을 다른 시각으로 인지시키기에 눈을 키우고, 처음부터 끝까지 고해상도로 그리는 형태로 높은 퀄리티를 보장한다.
scrolling over clicking (단일페이지)로 이루어져 비주얼에 끊김이 없도록 표현작업을 이어갔다. 편집적 관점으로 순서를 스텝으로 나누어 시선의 흐름을 잡아주고 있다거나, 아이덴티티에 잘 어울리는 변형체와 정보전달을 위한 고딕체를 적절하게 잘 섞어서 사용하였다. 비주얼은 잘 표현된 작품이나 전반적으로 쉐도우 값으로 표현된 그라데이션에서 미련이 남는다. 그라데이션을 조금 덜 추가했다면 더 좋은 작품이 될 수 있지 않았을까 싶은 생각이 떠오른다.
-
프로그램 :photoshop xd
레이아웃 - 혼합그리드    /    타이포그래피 - 이미지폰트 70%, CSS폰트 30%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • I Love You Movie
  • 한은주 학생
영화 좋아해줘에서 이벤트로 진행하는 직장인 칼퇴근 프로젝트 '썸' 프로모션 사이트이다. 컨셉은, 미디어 적극 활용으로 좋아해줘 영화를 소개하기에 맞출 수 있다. UI 인터페이스는, 위에서 아래로 이동하는 스크롤다운 형식이다. 또한 최상단 우측에 존재하는 햄버거 메뉴를 이용하고 있어 쉽게 원하는 콘텐츠로 이동도 가능하지만, 아이콘만 그려져 있기에 한 번씩 눌러봐야 어떤 콘텐츠로 이동하게 되는지를 알 수 있는 번거로움이 따른다.
각 섹션마다 large videos background로 좋아해줘 영화를 적극적으로 홍보하고 있지만, 움직임의 속도는 빠른 편이다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠는, 영화를 소개하는 목적성에 초점을 크게 두며 콘텐츠를 보여주고 있다.
각 섹션별로 나누어지는 블록그리드로 구성되었으며, 가로 형태로 시원시원하게 2분할로 풀 화면 구성 레이아웃을 발견하게 된다. 분야가 영화이다 보니, 보여주는 콘텐츠는 영상, 사진 등이어서 자칫 지루해 보일 수 있는 콘텐츠이기에 전반적으로 타이포그래피에 힘을 쓰고 있다.
영화 포스터에서나 볼 법한 큰 카피와 각 섹션에 대한 이름, 그리고 변형체 슬로건 등 오실레이션을 잘 활용하여 조화롭게 이루어졌다고 볼 수 있다. 새로운 창으로 바뀌는 것이 아닌, 현재 값에서 각 섹션 해당 콘텐츠를 가로 슬라이드 형식으로 보여주는 새로운 UX 구성 또한 인상적이라고 할 수 있다.
-
프로그램 :photoshop xd
레이아웃 - 단그리드, 혼합그리드    /    타이포그래피 - 이미지폰트 80%, CSS폰트 20%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Panda World
  • 남보라 학생
에버랜드에서 진행되는 판다월드 프로모션이다. 컨셉은, 친근함을 표현하기 위하여 전체 일러스트로 표현작업을 이루었다. UI 인터페이스는, 메인에서 서브메인으로 이루어지며 밑에서부터 업스크롤링으로 둘러볼 수 있으며, 기차나 캐릭터의 움직임이 재미있으나 전체적으로 큰 변화가 있지는 않다.
모니터 해상도는, 1920 기준에서 최적화되어 있으며 태블릿이나 노트북디바이스에서도 잘 볼 수 있다. 와이파이 환경에서도 빠르게 오픈될 수 있는 만큼 가볍게 제작되어 속도가 좋은 편이다.
콘텐츠는, 에버랜드에서 진행되는 프로모션의 기획을 담았으며, 에버랜드와 판다가 갖고 있는 이미지화와 아이덴티티를 생각하여 만들어진 일러스트의 퀄리티는 성공적이라고 볼 수 있지만, 내용의 간소한 점과 섹션UI 등의 콘텐츠 기획에서는 전반적으로 단출함에 안타깝다. 타이포그래피는 이미지 폰트로 미적 기능 위주의 타이포로 제작되었으며 변형체의 움직임이 좋다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 단컬러 일러스트 (백터일러스트-그라데이션 배제)
사이트 보러가기
  • nas story
  • Hyundai Card , Music Library
  • 김예은 학생
현대카드에서 운영 중인 뮤직 라이브러리 아이덴티티 사이트이다. 컨셉은, 라이브러리라는 공간에 초점을 맞추어 공간 꼴라쥬와 함께 편집적으로 사이트로 풀어간다. UI 인터페이스는, 스크롤다운 다운 방식 형식으로 이루어진다. 모니터 해상도는 PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠 시작부분은, 불을 켜주세요라는 코치 마크로 시작되는 콘텐츠. 불을 켜면 서재라는 공간이 비치며, 책상 한가운데에는 현대카드 뮤직 라이브러리 미니어처가 등장한다. 현대카드를 만든 학생의 전공인 건축학과라는 장점을 살리기 위하여 수작업으로 현대카드 뮤직 라이브러리를 직접 미니어처로 만들어 보았다. 공간적 소개 페이지로써 고딕의 시스템 폰트 느낌의 타이포 활용 정보전달을 위해 편집적으로 기획구성에 포인트를 잡았다.
전반적으로 오실레이션을 너무 고려해서 그런지 폰트의 쓰임과 옅은 색채로 가독성이 아쉬운 부분 또한 따른다. 현대카드 브랜드의 아이덴티티를 고려, 편집적인, 정갈한 느낌 및 심플한 아이콘 활용 등을 고려하며 작업하였다. 라이브러리 자체를 소개하는 페이지들과 언더스테이지라는 공연 관련 소개 페이지를 나눈 그룹 섹션이 인상적이다. 언더스테이지를 보기 위해 자동 스크롤링으로 한참 내려가게 되는데, 이는 마치 엘리베이터를 타고 지하로 내려가는 느낌이 들 정도로 블럭 구분을 잘 나누었다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드, 블록그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 아이덴티티 컬러
사이트 보러가기
  • nas story
  • ANimalFilm Festivalin Suncheounbay
  • 이정희 학생
순천만 세계 동물 영화제 프로모션 사이트이다. 컨셉은, 축제라는 점을 충분히 살리기 위하여 다양한 일러스트와 다채로운 색채는 시선을 사로잡으며 축제라는 컨셉을 전달한다. UI 인터페이스는, 위에서 아래로 내려가는 스크롤다운으로 둘러 볼 수 있으며, 좌측의 GNB 부분에는 쉽고 빠른 이동을 염두에 두어 아이콘을 활용하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠는, 1장의 큰 그림처럼 섹션 나눔 없이 단 페이지로 일러스트로 표현되었다. 귀여운 색상 활용과 함께 대비구성으로 시선의 흐름을 고려하여 지그재그로 콘텐츠를 보여주고 있으며, 상세 페이지는 최대한 줄이도록 노력하였다.
열린 포맷편집구성을 활용, 콘텐츠를 보여주고 있기에 전체적으로 조화를 생각하며 작업한 흔적이 보인다. 타이포그래피는 정보전달에 맞게 변형체는 사용되지 않았으며 고딕계열의 카피라이트와 본문으로 자간의 움직임을 조밀하게 사용하였지만, 전체적인 조화를 위하여 사용된 콘텐츠 본문 색채와 시원시원 하지 못한 작은 박스 판 구성을 보면서 가독성과, 여백에 대해서 조금은 미련이 남는다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 단컬러 일러스트 (백터일러스트, 그라데이션 배제)
사이트 보러가기
  • nas story
  • Jeonju International Film Festival
  • 박지애 학생
제17회 전주 국제영화제 개막을 알리는 프로모션 사이트이다. 컨셉기획은, 전주국제영화제 홍보를 알리기 위한 목적이며, 45개국에서 211편의 영화로 141번을 만난다는 카피와 같이 규모가 큰 영화제 소개와 함께 영화제에 참석하려는 방문객들에게 영화소개 및 상영시간을 알리고 있다.
UI 인터페이스는, 오른쪽 중앙배열로 놓인 GUI를 이용, 원하는 페이지로 이동하게 된다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠 중, 각 섹션페이지 내의 콘텐츠는 플렉서블그리드를 이용하여 긴 가로형태로 내용이 구성되어 있다.
이는 스크롤을 활용해 읽어 나갈 수 있다. 흔히 접하지 않은 구성방식이기에 재미있는 점도 있지만, 여기저기 흩뿌려진 UI 인터페이스와 페이지 넘김 없이 한 페이지에서 전반적인 내용을 둘러보는 것은 좋지만 스크롤의 번거로움과 사면에 흩뿌려져 있는 UI는 한번에 살펴 보기에는 어려움이 따른다. 전주국제영화제는 편집 스타일과 보정의 조화로움을 생각하며 이루어졌다.
-
프로그램 :photoshop xd
레이아웃 - 블록그리드, 혼합그리드    /    타이포그래피 - 이미지폰트 20%, CSS폰트 80%    /    컬러 - 아이덴티티 컬러
사이트 보러가기
  • nas story
  • Horror maze
  • 이경연 학생
에버랜드 호러빌리지 마이크로 프로모션 사이트이다. 컨셉은, 스토리텔링과 그래픽 관점에 맞추어 작업을 진행했다. UI 인터페이스는, 하단의 GNB를 이용하여 각 섹션으로 넘어가게 되며, 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠는, 광고 기획으로 비주얼에 초점을 맞추어져 있기에 내용상으로는 단조롭지만, 스토리텔링과 함께 hyper realism으로 극사실적인 표현에 초점을 맞춘 그래픽에서는 볼만하다. 마치 호러 빌리지에 온 것과 같은 기분처럼 으스스한 기분에 보는 내내 가슴을 졸이게 된다.
-
프로그램 :photoshop xd
레이아웃 - 블록그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 아이덴티티 컬러
사이트 보러가기
  • nas story
  • Socar
  • 이종찬 학생
카셰어링 서비스 쏘카 마이크로 사이트이다. 컨셉은, 귀여운 플랫 일러스트를 활용하여 쏘카를 친근하게 소개한다. UI 인터페이스는, 위에서 아래로 내려가는 스크롤다운 방법이며, 쏘카 콘텐츠는 블록그리드로 구성되어 있어 위의 GNB와 각 섹션에 있는 top의 버튼을 이용하여 둘러보는 것도 보기 편한 인터페이스의 방법이라 볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠에서 컬러는 쏘카의 브랜드 아이덴티티인 하늘색 색상을 이용, 전반적으로 연계색상을 이어간다. 포인트로 비쳐야 하는 강조 부분인 버튼 부분 등은 대비색상인 노란색을 이용하였다. 메인 비주얼 등 곳곳에서 귀여운 플랫 일러스트를 활용하여 일러스트 표현을 함으로 친근함을 전하고자 하였다.
스크롤 다운으로 보는 사용자들을 위하여 넘버링 활용과 레이아웃 교차 대비 방식으로 접근성을 고려하며 콘텐츠를 보여주는 방식에 도입하였다. 비주얼적으로는 하나로 이루어졌지만, 서비스를 이용하려는 사용자들을 위하여 콘텐츠 부분에서는 블록그리드로 정보 제공을 하고 있다.
이질감을 고려하여 흩뿌린 오브젝트 등으로 꽉 차 보이는 느낌에 대한 답답함과 콘텐츠 간의 블럭 구분의 사이 여백이 생각보다 좁아 보인다. 타이포의 고딕계열 변형체로 인한 가독성과 전체적으로 눈 트임을 고려한다면 더 좋은 사이트가 되지 않을까 하는 아쉬움이 떠오른다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드, 혼합그리드    /    타이포그래피 - 이미지폰트    /    컬러 - 아이덴티티 컬러
사이트 보러가기
  • nas story
  • another_Planet
  • 박초희 학생
주얼리 브랜드 어나더 플래닛 마이크로 사이트이다. 컨셉은, 주얼리 브랜드의 초점으로 영롱함을 표현하고자 하였으며, 영롱함으로 밤하늘을 선택하였다. UI 인터페이스는, 긴 스크롤링 페이지로 만날 수 있다. 긴 스크롤링 페이지 이동 방식이지만, 3개의 섹션으로 나누어 보여준다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠에서 볼만 한 점은 기하학적인 도형과 선, 패턴 등을 표현과 조화를 띄고 있는 주얼리 고유의 디자인을 그대로 감상할 수 있다. 주얼리가 가진 입체감과 세련미를 조화롭게 이루기 위해 Polygon graphic design과 그라데이션을 이용하여 그래픽 표현방식을 활용하였다.
디자이너들의 욕구와 함께 기하학적인 도형과 선, 패턴 등을 사용해 메인화면의 집중도와 브랜드 이미지 강화를 높였다. 모션 움직임을 이용, 재미있는 디자인을 많이 사용 정적으로 보이지만 동적인 표현도 가미하였다. 어나더 플래닛이 가진 브랜딩을 소개하는 사이트로 초점은 그래픽 사이트로 맞추어 그래픽을 해치지 않도록 고스트 버튼 등을 이용, 그래픽을 방해하지 않는 초점으로 작업을 이어간다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드    /    타이포그래피 - 이미지폰트 70% CSS폰트 30%    /    컬러 - 통합컬러
사이트 보러가기
  • nas story
  • Bless barbershop
  • 장동혁 학생
남성을 위한 헤어샵 블레스바버샵의 아이덴티티 사이트이다. 컨셉은, 바버샵이라는 헤어샵이 친숙하지 않은 사람들을 위하여 공간을 선택하여 풀어간다. UI 인터페이스는, 위에서 아래로 내려가는 스크롤다운 방식으로 사이트를 볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다.
콘텐츠로는, 메인 비주얼에서는 군더더기 없이 바버샵 view를 보여주며 소개한다. 이는 합성작업을 통하여 공간 꼴라쥬로 표현했지만, 합성작업이 눈에 읽히는 느낌은 애석하다. 메인 다음의 섹션 이동 시, 바버샵의 샵 내부로 공간변화가 생겨 마치 현재 바버샵에 들어온 듯하다.
공간이라는 부분을 어떻게 하면 친근하게 풀어갈 수 있을까? 라는 생각을 하며 작업한 흔적이 느껴진다. 아쉬움은 타이포그래피의 정교함이다. 변형체와 행간의 여유와 자간의 여유를 조금 더 고려했다면, 더 좋은 생각을 하게 되는 아쉬움이 든다. 많은 대중에게 익숙하지 않은 헤어 브랜드샵으로 많은 내용을 보여주려고 한 탓일까? 꽉 찬 콘텐츠로 인하여 눈 트임과 여백의 공간에 대하여 미련이 남는다.
-
프로그램 :photoshop xd
레이아웃 - 플렉시블그리드, 혼합그리드    /    타이포그래피 - 이미지폰트 70%, CSS폰트 30%    /    컬러 - 통합 컬러
사이트 보러가기
  • nas story
  • KIA
  • 박선유 학생
기아자동차 브랜드의 시승체험센터 마이크로 사이트다. 컨셉은, 시승체험이라는 주제를 갖고 풀어갔다. UI 인터페이스는, 하단 부분의 핸들 GNB로 원하는 섹션 페이지로 넘어가게 된다. 모니터 해상도는, PC용 디바이스 1920 해상도에 최적화로 맞춰 있다. 콘텐츠에서도 가장 인상적인 부분은 메인화면에서는 Custom Typography이다. 아무리 타이포가 멋지더라도 가독성 또한 중요하다.
이미지와의 결합이든 독립형 아트웍과의 결합이든, 사용자가 한눈에 당신이 말하고자 하는 것을 정확히 이해할 수 있도록 하는 게 중요한 것처럼 ROAD TRIP는 기아의 시승체험센터를 표현하기에 가장 적합한 형태를 보인다. 콘텐츠는 입체단을 활용하여 3D 느낌을 표현하고 있으며, 보여주는 정보 영역 부분도 도표, 그래프 등 최대한 간결하게 내용 전달에 초점을 맞추었다.
섹션의그리드로는 혼합그리드를 이용하며, 보정을 통하여 증강현실 비주얼 스킬 표현방식으로도 이루어졌다. 재치있는 로딩 애니메이션으로 각 섹션 이동 시 기아의 아이덴티티 컬러로 이루어진 셔터가 내려가고 올라가는 부분과 events 페이지에서는 탑 앵글의 기점으로 비춰주고 있기에 시승을 통해 달리는 모습을 보여주는 느낌 또한 자아낸다. 고객 경험관리(CX: customer experience)까지도 고려하며 만들었지만, 아직 완벽한 완성작이 아닌 부분이 안타깝다.
-
프로그램 :photoshop xd
레이아웃 - 단그리드, 혼합그리드    /    타이포그래피 - 이미지폰트 50%, CSS폰트 50%    /    컬러 - 아이덴티티 컬러
사이트 보러가기

디자인나스 학생은 국내 최고의 실력을 갖추고 있습니다

nothing more than quality

  • Del Monte
    사이트 보러가기
  • Primera
    사이트 보러가기
  • Monsters University
    사이트 보러가기
  • WINIX
    사이트 보러가기
  • Lost Valley
    사이트 보러가기
  • Diptyque
    사이트 보러가기
  • CANON
    사이트 보러가기
  • TOMS
    사이트 보러가기
  • New Balance
    사이트 보러가기
  • 7even
    사이트 보러가기
  • SISLEY
    사이트 보러가기
  • CORNSOX
    사이트 보러가기
    • nothing more than quality, designnas
    이전 1 다음