nas
브랜딩 마이크로 프로모션.
브랜딩 마이크로 사이트는 웹프로모션에서 가장 중요한 능력으로 평가 받습니다.
  디자인나스 학생은 국내 최고의 실력을 갖추고 있습니다  
디자이너의 편집능력과 그래픽의 기술능력을 인정 받을 수 있는 작품이며 다른 디자이너들이 제작하기 어려운 기술로 표현되어 압도적인 우위를 갖는 작품입니다.
모든 작품은 인터렉션을 이용하여 직접 그려표현한 작품입니다.
[ ※ 디자인나스의 모든 작품은 학생작품이며, 제안시안으로 만들어져 취업지원시 비상업적 포트폴리오 용도로만 사용됩니다. ]
  아래 이미지를 클릭하면, 완성된 작품을 볼 수 있습니다.  
▼
  • nas story
  • Dyson
  • 임채린 학생
우리가 잘 알고 있는 전자제품 다이슨을 소개하는 브랜딩 아이덴티티 사이트입니다. 컨셉은, '일상생활을 바꾸는 다이슨' 이라는 슬로건을 활용, 다이슨 제품을 다양한 시각화 관점에서 다양한 사람들이 선보이는 일상생활과 상황별 모습을 일러스트로 직접 표현하며 구성하였습니다. UI 인터페이스는, 인트로의 코치 마크와 마우스 포인터로 scroll / click의 기능을 직관적으로 알려주는 UI를 설계하였습니다. 스크롤 트리거를 통해 보여주고자 하는 페이지마다 다르게 운영됩니다. 전반적으로 쉬운 인터페이스 운영으로 직관적으로 사이트를 둘러볼 수 있도록 하였습니다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞췄습니다. 콘텐츠 기획은, 인트로 화면부터 메인으로 연결된 큰 이미지는 직접 제작한 일러스트로 시선을 끌고 있습니다. 일러스트는 펜 드로잉 느낌을 웹상에서 리얼하게 구현, 세밀한 표현기법으로 하나하나 살펴보는 재미를 부여하였습니다.
밀도 있는 묘사로 높은 완성도를 이루었습니다. 콘텐츠 색상 운영은 모노톤으로 운영하여 상대적으로 채도 높은 제품 콘텐츠들이 더 돋보일 수 있도록 신경 썼습니다. 서브페이지에서는 가로 스크롤을 통해 영상 콘텐츠, 편집력으로 정보를 소개합니다. 일러스트 중에서도 상황별로 나누어 그에 맞는 제품을 그래프와 사진 편집, 타이포그래피 운영으로 소개합니다. 내가 가진 장점을 부각하는 점은 매우 전략적인 방법 중 하나입니다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • ohora
  • 이진아 학생
뷰티 네일 브랜드 오호라를 소개하는 브랜딩 아이덴티티 사이트입니다. 컨셉은, 화보집의 느낌으로 오호라의 브랜딩을 소개하며 사진 편집을 주로 이루었습니다. UI 인터페이스는, 원 스크롤을 통하여 별도의 UI를 제어하지 않기에 보기 편한 환경을 선사하며, 스크롤 트리거를 통하여 카테고리 별로 스크롤링을 다르게 운영하여 흐름을 나눠 소개합니다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞췄습니다. 콘텐츠 기획은, 화려한 세리프체와 산뜻한 편집을 이용하여 오호라 가진 뷰티 네일 브랜딩을 강화하고 있습니다. 콘텐츠는, 시원한 화보 이미지를 적극 활용, 오실레이션의 율동성과 대비성 운영, 형태조합, 미적기능들을 더하여 완성도 및 편집력을 깔끔하게 끌었습니다.
전체적으로 가로로 움직이는 원스크롤 중 다양한 애니메이션 효과 , 트리거를 이용하여 단조롭지 않게끔 기획구동을 선보입니다. 이미지 편집 또한 단순한 사각 프레임에 담아두기보단 오호라의 타켓층인 여성을 고려하여 곡선미를 가진 다원형 모양의 프레임을 사용하는 등 브랜딩과 여성미를 부각하며 타이포, 편집력 등에 힘을 실어 보았습니다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • sbau
  • 주진미 학생
서울건축비엔날레를 소개하는 마이크로 사이트입니다. 컨셉은, 서울건축비엔날레를 4가지의 메뉴에 담은 기하학 모던을 끌며 소개하고 있습니다. UI 인터페이스는, 원 스크롤을 통하여 별도의 UI를 제어하지 않기에 보기 편한 환경을 선사하며, 스크롤 트리거를 통하여 카테고리 별로 스크롤링을 다르게 운영하여 흐름을 나눠 소개합니다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞췄습니다.콘텐츠 기획에서는 인트로 화면에서는 조형적에서 가장 기초가 되는 선과 면으로 시선을 끌며 2차원에서 3차원의 이미지로 운영되는 모션 그래픽을 활용하여 시선을 사로잡았습니다. 메인에서는 제이쿼리 기법 중 mouseenter을 통해 마우스 포인터와 트리거를 활용하여 이벤트가 발생하여 효과를 주고 있으며, 색상 운영은 전체적으로 모노톤으로 구성하였으며 다크 모드에서 타이포 색채 운영을 통하여 위계질서를 구성하여 편집력이 더 돋보일 수 있는 디자인으로 완성하였습니다.
디자인 부분에서도 조형적인 기초가 되는 점, 선, 면을 운영하며 그리드 시스템을 활용하여 편집 부분에 힘을 실었습니다. 메뉴 또한 스테디 하게 운영되는 탑 메뉴 방식을 활용하여 누구라도 사이트를 직관적으로 둘러볼 수 있도록 UI를 기획하였습니다. 부분 운영으로 설계도를 연상시키게 하는 기하학 스타일의 모던한 영상들을 bg로 활용하며 전반적으로 그래픽적인 요소를 걷어내며 가장 기초적인 베이스로 최상의 편집력을 이끌 수 있도록 디자인하였습니다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • logitech
  • 이혜민 학생
로지텍 키보드를 소개하는 브랜딩 마이크로 사이트입니다. 컨셉은, 형태 타이포그래피와 영상의 조화를 통해 로지텍의 제품이 돋보일 수 있도록 진행하였습니다. UI 인터페이스는, 패럴럭스 구동으로 기승전결이 느껴지는 움직임과 자연스러운 페이지 전환이 역동적으로 느껴지도록 구성하였습니다. 자연스러운 페이지 전환 부분으로 하단 내비게이션 바 UI 구성으로 명확한 제품 소개를 보여주고 있습니다. 콘텐츠 기획에서는 메인에서는 제이쿼리 기법 중 mouseenter을 통해 마우스 포인터와 트리거를 활용하여 이벤트가 발생하여 효과를 주는 등 다양한 기획 구동과 UI를 선보입니다.
색상 운영 중 BG는 다크 모드를, 타이포 운영은 그레이 컬러를 활용하여 편집력이 더 돋보일 수 있는 디자인으로 완성하였습니다. 부분 운영으로는 설계도를 연상시키게 하는 기하학 스타일의 모던한 영상들을 bg로 활용하며 그리드 시스템을 운영하여 군더더기 없는 사이트를 만들었습니다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • sweet_home
  • 이소희 학생
웹툰과 넷플릭스에서 진행한 부분으로 인기리에 방영한 스위트홈 브랜딩 랜딩 사이트입니다. 컨셉은, 드라마 속 장면을 실감나게! 원작이 가진 웹툰 성향의 이미지 팝아트 기법, 그런지 질감 등을 활용하며 아이덴티티를 표현하였습니다. UI 인터페이스는, 마우스 커서 기본 모양을 스위트홈 심볼을 이용하며 흐름이 이어질 수 있도록 원-스크롤 활용으로 스토리와 이미지텔링으로 진행합니다. 패럴럭스 구동 등을 활용 스토리가 가진 힘을 전달하고자 기획하였습니다.콘텐츠 기획에서는 편집, 그래픽, 구동과 기승전결의 흐름을 기획하여 운영하여 볼거리와 정보 전달력 부분에 전체적으로 집중도를 생각한 사이트입니다. 부분적으로 팝아트 기법, 그런지 질감 등 표현기법으로 보여주며 드라마 아이덴티티를 표현하며 편집과 대비를 이뤄 밀도감을 높였습니다.
헤드 카피 등을 활용하며 타이포그래피에 오실레이션을 통해 위계질서를 만들어 스위트홈을 처음 만난 사람들도 단번에 스위트홈의 스토리를 인지할 수 있도록 도모하였으며, 드라마에 대한 관심과 호기심을 불러일으킬 수 있는 마케팅, 기획홍보 부분 등을 생각하며 스토리를 만들어 사이트를 제작하였습니다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • vans
  • 백지호 학생
다양한 연령층의 마니아를 자진 반스 스니커즈 시리즈, 올드스쿨 브랜딩 사이트입니다. 컨셉은, 반스의 마니아층을 고려하여 반스의 아이덴티티 #젊은 #밝은 #키치 #생동감 등의 키워드를 활용하였습니다. UI 인터페이스는, 애니메이션 효과와 마우스 휠 등의 UI를 활용하여 반스 스타일을 더 돋보이게 만들었으며, 올드스쿨을 소개하는 페이지(home)는 원-스크롤을, 프로덕트, 커스텀 페이지는 고정된 단면 페이지를 활용하여 보여주는 콘텐츠에 맞추어 인터페이스를 고려하였습니다. 콘텐츠 기획은 올드스쿨로 시작하여 Old Grunge Ripped Torn Vintage Collage, retro, Wrinkled Reflections, collection of glued paper 등 다양한 빈티지한 꼴라쥬 편집 스타일을 활용하여 반스의 브랜드를 표현하였습니다. 커스텀 페이지에서는 제품을 활용하는 커스텀 하는 모습을 직접 체험할 수 있도록 UX부여하여 올드스쿨의 다양함을 소개하고, 구매까지 이어질 수 있도록 기획 운영 하였습니다.
반스 사이트는 스티커, 로고 등을 활용하며 소개 페이지에서도 탈 타이포그래피를 운영하여 반스가 가진 자유로움을 부각시켰습니다. 다양한 오브젝트를 동시에 보여주고 있어 과하게 느껴질 수 있는 요소들을 패럴렉스와 마우스 휠, 애니메이션 효과, gif 등의 다양한 기법을 통하여 순간 기법으로 보여주고 있어 복잡한 느낌을 탈피하였으며, 미적기능에 힘을 강하게 주어 콘텐츠 부분은 단순하게 운영하는 오실레이션을 주어 힘을 분배하여 여백을 만들었습니다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Pamela
  • 김태연 학생
쥬얼리 파멜라의 브랜딩 아이덴티티 사이트다. 컨셉은, 파멜라를 소개하는 하나의 화보집과도 같이 구성하였다. UI 인터페이스는, UI인터페이스는, 최신 유행하는 Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders 기법 등 다채로운 운영을 활용하지만, 쉽게 인터페이스를 운영할 수 있도록 직관적인 ui 타이포를 활용하여 보다 쉽게 사이트를 둘러 볼 수 있도록 구성하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰있다. 콘텐츠 기획은, 인트로화면에서부터 1장의 이미지로 이루어진 인트로 화면과 빅타이포그래피를 운영하여 시선을 압도하고 있다. 인트로 화면에서 클릭을 통해 사이트를 들어오면 Diagonal Thumbnail Slideshow Animation 움직이는 썸네일과 큰 제목이 기울어 진 간단한 슬라이드 쇼를 활용하여 콘텐츠를 간접적으로 보여주고 있다.
직접적 정보 제공 운영보다 파멜라가 가진 아이덴티티를 보여주기 위하여 사진편집과 타이포그래피 운영으로 Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders 기법을 활용하여 스크롤 할 수 있는 원형 갤러리를 만들어 스타일을 보여주고 있다. 유럽에서 유행하는 가변 레이아웃 스타일과 인터렉션 타이포그래피를 활용하여 파멜라가 가진 아이덴티티를 극대화로 보여주는 브랜딩 마이크로 사이트로 콘텐츠 기획, 편집력, 구동방식 3박자가 합이 잘 만나 조화를 이루고 있다.
-
프로그램 :photoshop xd
레아아웃 - 가변레이아웃, 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Pandora
  • 배주원 학생
쥬얼리 판도라 디즈니의 이상한 앨리스의 Collaboration을 소개하는 브랜딩 캠페인 사이트다. 컨셉은, 이상한 앨리스의 스토리로 이루어진 화보집 운영으로 판도라 모멘트를 소개하고 있다. UI 인터페이스는, UI인터페이스는, 최신 트렌드 스크롤링 ui와 상/하 스크롤 다운과 상단 우측의 메뉴를 이용하여 각 콘텐츠 페이지로 이동할 수 있는 쉬운 메뉴로 구성되어 누구나 쉽게 사이트를 살펴볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰있다. 콘텐츠 기획은, 오버롤 디자인 스프린트와 플로우레이아웃, 인터렉티브 타이포 그래피 ui 컴포넌트로 작업이 이루어졌다. 메인에서는 해당 콘텐츠 정보를 보여주기보단 화보집의 컨셉을 활용하여 스크롤링으로 시각적 효과를 자아내고 있다.
서브 콘텐츠 페이지에서는 이미지스토리텔링으로 화보집의 사진편집과 누끼편집을 활용하여 판도라의 모멘트 참 제품을 Digital interpretations of physical products로 구성하여 서브페이지들을 구성하고 있다. 아이덴티티 컬러 또한 인디핑크를 활용하여 한층 사랑스러움을 더하며, 트렌디한 스타일을 앞세워 젊은 타켓층으로 전향해 나가려는 캠페인성으로 '대중성' 키워드에 초점으로 두며 작업을 진행하였다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Google pixel Buds
  • 김혜진 학생
구글 픽셀 버즈 랜딩 사이트다. 컨셉은, 구글 버즈의 제품을 알리는 랜딩 사이트로 기능적인 부분을 직관적으로 소개하는 구성으로 이루어지고 있다. UI 인터페이스는, 원스크롤 페이지로 한번에 콘텐츠를 쉽게 볼 수 있도록 구성하였으며, 우측 상단 메뉴를 이용하여 각 콘텐츠 섹션 페이지로 이동할 수 있는 쉬운 메뉴로 구성되어 누구나 쉽게 사이트를 살펴볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰있다. 콘텐츠 기획은, 랜딩페이지는 상품구매의 직접적 이익을 가져올 수 있는 페이지로 효과적인 온라인 마케팅을 진행할 수 있는 페이지어야 한다. 그렇기에 랜딩페이지에서는 직관적으로 보여줄 수 있는 ux기획과 ui부분이 중요하다. 한눈에 정보를 인지할 수 있는 타이포그래피, 고객의 액션을 직접적으로 불러올 수 있어야 하는 CTA(Call to Aciton)Btn,
Benefits, Lead generation forms을 활용하여 한눈에 버즈 제품의 핵심 기능을 집중적, 직관적으로 보여줄 수 있는 심플한 콘텐츠 기획으로 제작하였다. 구글 버즈의 제품이 가진 제품의 트렌디함을 살려 뉴모피즘의 디자인스타일로 방향을 잡으며 보다 깔끔한 그래픽과 타이포 편집적인 힘을 이용하여 제품 소개에 집중하는 편집스타일로 이루어지고 있다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Huxley
  • 심혜수 학생
헉슬리 브랜드 아이덴티티 사이트다. 컨셉은, 브랜드가 가진 컨템포러리한 슬로건인 맑고 깨끗하게 균형 잡힌 피부를 위한 피부의 밸런스 헉슬리 브랜드의 아이덴티티를 위하여 Clean 느낌을 보여주고자 하였다. UI 인터페이스는, UI인터페이스는, 메뉴 또한 minimalism 키워드에 맞추어 우측의 drawer button를 두었고, 메인 페이지 하단의 콘텐츠에서도 바로 해당 부분 콘텐츠로 이동할 수 있도록 button을 배치하여 동선적인 부분에도 피로도를 낮추고자 하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰있다. 콘텐츠 기획은, 헉슬리가 가진 Gallery, Photo & Video를 채택하여 브랜드의 이미지를 전달하는 브랜드 사이트로 기획되었다. 기획, 디자인/편집력, 구동방식 3박자를 모두 신경쓴 부분으로 느껴진다. 최신 해외 / 한국 사이트를 보면 많이 보는 유형. 타이포그래피에 기반한 레이아웃를 사용하며, 플로우(composition flows) 요소로써 편집 디자인을 선보이고 있다.
볼드, 이탤릭, 세리프, 산세리프와 결합해 동일한 단락과 형태조합으로 레터폼(letterforms)을 그래픽 요소 사용하고 있다. 인트로부터 첫 화면 등장의 Dissolve Effect Transition와 GSAP Animation 구동방식을 채택하여 The 5 Second Rule과 같이 시선을 빠르게 사로잡아 사이트에 더 머물게 하며 하단의 구동방식들 또한 Parallax Animation로 이루어진 부분으로 사용자가 많은 시간 동안 사이트에 머물도록 기획하였다. 헉슬리만의 스타일을 보여주고있다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 40%, CSS 폰트 60%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • SMEG
  • 서문명수 학생
SMEG 50주년 역사를 보여줄 수 있는 브랜딩사이트로 이루어졌다. 컨셉은, 독보적인 smeg의 역사와 스타일, 기술 부분을 선보이는 부분으로 기획력을 높였다. UI 인터페이스는, one scroll 활용으로 페이지를 쉽게 볼 수 있도록 구성하여 모든 콘텐츠를 쉽게 볼 수 있도록 구성되어 있으며, GNB로 JUMP MENU를 비강조로 상단 배치하며 one scroll의 단점인 모든 페이지를 보며 희망하는 콘텐츠 영역으로 내려가기보단 원하는 정보로 바로 넘어갈 수 있도록 구성하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 표현기법으로는 빅타이포와 콘텐츠로는 VEG 포토그래피 및 Video를 채택한 시원시원한 사이트를 선보인다.
Fade IN/OUT으로써 색채의 변화 속에서도 이질감이 느껴지지 않도록 구동방식에서도 신경썼다. 일러스트와 사진편집을 혼합하여 사용함으로 실제적으로 사용자에게 메시지 정보전달을 명확하게 할 수 있다. 제품사진은 브랜딩을보다 완벽하게 지원하는 부분으로 도움을 준다. 중간중간에는 Parallax Animation로 구동적인 부분에서 또한 SMEG 브랜드를 보여주기 위하여 많은 기획까지도 신경썼는지 느낄 수 있는 사이트이기도 하다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 50%, CSS 폰트 50%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Monument Valley
  • 이은재 학생
모바일 게임 모뉴먼트 밸리 브랜딩 사이트다. 컨셉은, 시놉시스 '불가사의한 건물의 길을 조작하여 침묵의 공주를 아름다운 세계로 이끄는 모험을 떠나게 되다'는 스토리텔링으로 맞추었다. UI 인터페이스는, 페이지 마다 각기 다른 드래그, 클릭 등의 형태로 경험을 부여할 수 있는 인터페이스로 이뤄지고 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 각 페이지는 순차적으로 넘어가며 블럭그리드를 이용하여 1MSG 1Point로 간결하게 페이지마다 모뉴먼트가 가진 간결한 3D 디자인과 Oscillation을 이용하여 타이포그래피와 전체적인 Minimalism에 입각한 군더더기 없는 디자인을 아우르고 있다.
페이지 마다 게임을 직접적 경험을 해보는 느낌과 같이 간편한 조작으로 직접 드래그를 밀어 내리기, 클릭 등의 다양한 UI를 사용하고 있으며, 좌측에 위치되어 있는 메뉴를 통해 모뉴먼트 밸리의 제작사 어스투게임즈 및 게임의 시놉시스소개를 볼 수 있는 페이지도 별도구성하고 있다.
-
프로그램 :photoshop xd
레아아웃 - 블록그리드    /    타이포그래피 - 이미지폰트 60%, CSS 폰트 40%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Dr.dre
  • 전찬우 학생
음향기기 Dr.dre회사가 선보이는 블루투스 무선 이어폰 프로모션 사이트다. 컨셉은, 블루투스 무선 이어폰의 활용도를 사진편집으로 쉽게 이해할 수 있는 Introduction(소개)로 시작하여, Function(기능), Video(영상), Purchase(구매)로 카테고리를 나누어 단계성으로 제품의 페이지를 살펴볼 수 있도록 구성하였다. UI 인터페이스는, One scroll을 활용하여 편하게 모든 정보를 살펴볼 수 있는 형태로 이루어져있다. 상단에는 Gauge로 콘텐츠 정보의 단계성을 인지할 수 있도록 구성되어 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, Dr.dre는 UX/UI가 대두되며 많은 관심의 대상이 된 인터렉션 디자인에 의거하여 잘 만들어진 사이트라고 생각된다. Navigation transitions에 의거하여 빅타이포와 함께 해외 사이트에서 많이 살펴지는 Parallax Animation을 활용과 함께 Marquee effect 반복적 표현으로 심플한 디자인 안에서도 지루함이 없도록 구성하였다.
보편적인 디자이너의 워크 프로세스는, 완성된 디자인에 의거 후 구동기법 추가 확장하는 방식이지만, Dr.dre는 Navigation transitions의 구동기법으로 파생하여 디자인 기획까지도 맞추어져 빠른 성공을 띄우게 된 MVP(Minimum Valuable Portfolio)로 전략적인 기획방향을 느끼게 되는 사이트다. 아쉬운 부분은 좌측에 GNB 미작동으로 희망하는 단계로 점프업 하기보단 모든 단계성을 살펴보아야 하는 불편함과 Function에서 상세페이지 존재 인지도가 낮기에 클릭의 어포던스 ui적인 부분이다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 2단 그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Coco Capitan
  • 권예린 학생
대림미술관에서 진행되었던 '영 아트 스타(Young Art Star)' 코코 카피탄(Coco Capitan)의 사진전을 소개하는 프로모션 사이트다. 컨셉은, 코코의 사진, 영상, 코코의 타이포그래피를 활용하여 코코의 많은 작품을 쉽게 살펴볼 수 있도록 구성하였다. UI 인터페이스는, 1P , One Scroll Down을 이용해 쉽게 살펴볼 수 있는 UI로 살펴볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 전시회 소개 프로모션 페이지로 구성되었으며, 코코만의 아이덴티티를 보여주기 위한 페이지로 구성되었다. 세계적인 브랜드 구찌 등의 브랜드에서도 자주 선보인 그녀만의 아이덴티티 캘리 타이포그래피를 이용하며, 사진 또한 플로우 그리드 포맷 구성으로 이뤄어진 사진편집부분에서 코코카피탄이 어떤 작업을 이어가는지를 살펴볼 수 있도록 구성하였다.
1P로 이뤄있기에 플로우 그리드안에서도 포맷스타일을 정리하여 깔끔한 편집에 힘을 쓰기도 했다. 자주 살펴볼 수 있는 아이덴티티 컬러 남색 / 레드 / 흰색 / 블랙으로 블럭그리드로 구성하였다. 전시회 프로모션 페이지로 많은 이야기를 보여주고 있지는 않지만, 타이포 형태조합과 사진편집 구동기법에서는 Marquee effect 반복적 표현을 보여줌에도 허전하지 않은 깔끔한 편집력에 눈길이 간다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 블록그리드    /    타이포그래피 - 이미지폰트 60%, CSS 폰트 40%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Omega
  • 황승민 학생
Omega에서 선보이는 엘리아 아트 갤러리 드 빌 트레져 여성시계 컬렉션을 소개하는 프로모션 사이트다. 컨셉은, 빛과 그림자를 활용하여 지속적으로 사라져 가는 시간을 묘사하는 작품을 선보이고 있는 재능 있는 니코즈 알리아가스사진작가와의 콜라보레이션을 선보여, 어둠 속에서도 빛나는 시계의 컨셉으로 컬렉션을 이어가 그대로 반영하였습니다. UI 인터페이스는, 스크롤 다운으로 상하 스크롤 이동으로 전페이지를 볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 콘텐츠로는 영상, 타이포그래피, 사진편집으로 이뤄지며 영상으로 오메가의 아이덴티티를 효율적으로 보여주며, 깔끔한 타이포그래피로 이뤄졌다.
적은 콘텐츠 요소에서도 편집적 기술의 요소와 구사방식 'Space Possession'과 Oscillation를 활용과 Parallax구동으로 오메가의 아이덴티티와 여백의 미를 잘 살려 콘텐츠를 보여주고 있다. VEG 포토그래피를 통한 사진 편집과 가독성 타이포그래피 부분을 잘 표현해내고 있는 사이트다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • Coach
  • 이새봄 학생
Coach의 아이덴티티를 보여주는 F/W 캠페인 사이트이다. 컨셉은, 화보집을 연상하게 하는 영상 / 사진편집으로 심플한 레이아웃을 구성, 아이덴티티컬러로 맞추었다. UI 인터페이스는, 상/하 스크롤 다운과 상단 우측의 메뉴를 이용하여 각 콘텐츠 페이지로 이동할 수 있는 쉬운 메뉴로 구성되어 누구나 쉽게 사이트를 살펴볼 수 있다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 'All over the world, the coach name is synonymous with effortless new york style.' - '전세계적으로 코치 이름은 손쉬운 뉴욕스타일의 대명사다.'라는 카피와 함께 최근 명품 G사, B사 등과 같이 트렌디한 스타일을 앞세워 젊은 타켓층으로 전향해 나가려는 캠페인성으로 '대중성' 키워드에 초점으로 두며 작업을 진행하였다.
비주얼적으로는 영상과 사진 편집을 이용하여, 브랜드 아이덴티티 표현 스타일을 쉽게 느낄 수 있도록 구성하며, 타이포그래피 기술 가독성과 판독성을 신경써서 정보전달을 위한 콘텐츠로 구성하였으며. VEG 포토그래피를 통한 사진 편집과 가독성 타이포그래피 부분을 잘 표현해내고 있는 사이트다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드, 모듈그리드    /    타이포그래피 - 이미지폰트 60%, CSS 폰트 40%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • H&M X MOSCHINO
  • 이채원 학생
패션기업 H&M x 디자이너 MOSCHINO와의 Collaboration을 소개하는 브랜딩 캠페인 사이트다. 컨셉은, MOSCHINO 디자이너와의 콜라보를 위한 사이트로, 그만의 독보적인 카툰, 반짝이는 메탈, 과장된 액세서리, 프린팅의 느낌을 그대로 화면으로 옮겨온 느낌을 자아내어 아이덴티티를 표출하는 캠페인 사이트로 거듭나고자 하였다. UI 인터페이스는, 인트로 후, section 5가지로 희망하는 페이지로 이동하게 이루어져있으며, 섹션 5가지가 GNB의 역할을 대신하고 있다. 서브페이지에서는 단순하게 상/하 스크롤로 정보를 볼 수 있도록 구성하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, H&M X MOSCHINO, Vollaboration 사이트. 디자인 표현기법으로 Brutallism , Maximalism, 그리드 또한 풀페이지, 플로우그리드를 채택하여 Oscillation에서 전체강조의 느낌을 채택하고 있다.
장식적인 부분으로 모든 페이지에서는 아기자기한 마이크로 인터렉션들로 최대화, 화려함, 과장된 키워드를 표현하여 시각적 요소를 채워가고 있다. 인트로 후, GNB역할을 대변하는 Section을 통해 콘텐츠 페이지로 이동하는 3단계의 Depth로 구성되어 단계성의 불편함도 따르지만, 꽉 들어찬 콘텐츠에서 단계성이 없었다면 이질감이 크게 느껴졌을 것으로 이질감 해소를 위한 기획으로 인식하게 된다. 근래 유행하는 구동기법, 표현기법 등의 다양함으로 이뤄져 있어 최신 트렌드적인 기법이 집약적으로 표현된 사이트로 살펴볼 수 있다.
-
프로그램 :photoshop xd
레아아웃 - 플로우그리드    /    타이포그래피 - 이미지폰트 70%, CSS 폰트 30%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • FREITAG
  • 이율리 학생
FREITAG 브랜드 아이덴티티 사이트이다. 컨셉은, FREITAG 브랜드 아이덴티티를 알리기 위한 사이트로 탄생배경부터 제품소개까지 살펴볼 수 있도록 구성하였다. UI 인터페이스는, 상단의 GNB를 이용하며 각각의 콘텐츠로 이동하여 스크롤 다운으로 페이지를 볼 수 있게 하였다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, 1993년 프라이탁형제의 비에 젖는 가방의 고민으로 탄생하게 된 브랜드다. 아이데이션으로써 문제해결을 위해 많은 과정을 통해 화물트럭의 '방수포'를 발견하여 제품 생산 과정을 콜라주 부분으로 재미있게 표현하여 직관적으로 이해 할 수 있도록 보여주고 있며, GIF 애니메이션으로 전달한다.
그래픽 편집으로는 콜라주기법과 VEG 포토그래피를 통한 사진 편집으로 진행되고 있으며, 전형적인 콜라주 기법에서 나타나는 이질감을 최소화하는 부분에 노력하였으며,1MSG 1Point로 간결하게 정보를 전달하고 있다. 타이포그래피의 운영 에서 폰트는 브랜드 성격을 표현하는 중요한 부분으로도 입각된다. 이에 프라이탁과 어울리는 폰트의 적절한 선택으로써 아이덴티티를 표출하는데 힘을 실어주고 있다.
-
프로그램 :photoshop xd
레아아웃 - 블록그리드    /    타이포그래피 - 이미지폰트 60%, CSS 폰트 40%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • nas story
  • God of war
  • 김희겸 학생
Sony사 게임, God of war홍보를 위해 만들어진 프로모션 사이트다. 컨셉은, 게임의 시놉시스를 베이스로 소개와 스타일을 보여줌으로 관심도에 기여할 수 있도록 방향을 설정하였다. UI 인터페이스는, 주로 마우스 드래그로 상/하 스크롤로 볼 수 있게 구성하였으며, 콘텐츠에 의거해 가로 스크롤로 이동도 되며, 고정버튼이 마련되어 있어 페이지 전환을 이어간다. 모니터 해상도는, PC용 디바이스 1920 해상도에 맞춰 있다. 콘텐츠 기획은, Sony에서 만들어진 액션 어드벤처 게임 God of war. 북유럽 신화를 배경으로 이루어진 게임답게 타이포그래피, GUI, 그래픽 스타일을 게임의 배경에서 착안하여 통일성에 의거해 그래픽과 GUI를 구성하였다.
플로우 그리드와 블록그리드로 구성하였으며, 게임스타일을 그대로 착안하여 3인칭 숄더뷰인 자유시점 형태로 진행되고 있다. Parallax effect를 활용하여 depth level - objects로 마우스의 움직임에 따라 시차효과를 사용하여 레이어 변환값을 통해 레이어의 깊이감을 보여주고 있다. 깊이에 대한 인식을 강조하기 위해 속도감을 각각 대입하였다.
-
프로그램 :photoshop xd
레아아웃 - 블록그리드    /    타이포그래피 - 이미지폰트 60%, CSS 폰트 40%    /    컬러 - 아이덴티티컬러
사이트 보러가기
  • 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
  • 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 다음