목록전체 글 (269)
알씨타운
오뚜기 웹 제작방식을 알아보자! [intro] 대한민국의 식품회사 오뚜기! 식료품 제조 및 판매업을 주로 하고 기업명처럼 식품업계에서 우뚝 자리 잡은 오뚜기는 어떻게 홈페이지 제작을 했는지 알아볼까요? [main] 1. 오뚜기 홈페이지를 접속하면 가장먼저 메인슬라이드배너가 눈길을 사로잡는데요. 고화질은 화면을 꽉채우는 메인배너를 활용하여 사용자의 시선을 사로 잡고, 이벤트 또는 주력상품을 효과적으로 홍보하고 있네요. 2. 메인배너 하단으로 오뚜기 회사에 관련된 뉴스컨테이너가 위치하고 있네요. 홈페이지 이용자에게 자사 관련 공지사항을 빠르게 확인할 수 있도록 메인페이지에 삽입한 것 같아요. 3. 이벤트 컨테이너는 회사에서 출시한 신제품, 현재 진행하고 있는 이벤튼를 보여줌으로써 사용자에게 관심을 유..
에버랜드 웹 제작방식을 알아보자! [intro] 국내 최대규모의 테마파크 에버랜드! '에버'는 시간, '랜드'는 공간을 의미하며 에버랜드하면 생각나는 멜로디 '환상의 나라 에버랜드로~' 에버랜드 홈페이지는 어떤방식으로 제작되었는지 한번 살펴볼까요? 1. 에버랜드 홈페이지는 에버랜드 리조트 인트로 페이지에서 에버랜드 와 케리비안베이 사이트맵을 선택할 수 있는 페이지가 나오는데요 하단의 버튼을 클릭 하면 원하는 사이트로 이동하는 구조로 제작되었네요. 관련 이벤트를 화면에 꽉차는 이미지를 삽입하여 사용자의 시선을 효과적으로 사로 잡은것 같네요. [main] 메인페이지의 구조를 한번 살펴볼까요? 상단 헤더에는 사이트맵과 사이트의nav 가 있고, 헤더 아래 영역의 제일 첫번째 컨텐츠는 슬라이드 배너 이미지..
DIOR 웹 제작방식을 알아보자! [intro] 프랑스의 하이엔드 명품 프랜드 디올! 전 세계적으로 대중들에게 사랑받고있는 디올은 어떤식으로 홈페이지가 제작되었는지 살펴볼까요? 1.main_top 디올 홈페이지 메인화면은 화면을 꽉채운 슬라이드 배너와 이미지 클릭 시 해당 페이지로 이동하는 구조의 형식으로 제작되었네요. 2.main_mid 메인페이지 컨텐츠는 디올자사에서 선정한 그달의 주력상품 또는 뷰티,여성의류,남성의류 컬렉션으로 나누어 해당 제품(컬렉션) 썸네일을 누르면 해당 페이지로 이동하는 구조입니다. 디올은 워낙 유명한 명품브랜드이기때문에 화려한 애니메이션 없이 상품이미지, 모델화보만 노출시켜도 시각적인 효과가 큰것 같네요. 3.footer 푸터영역에는 먼저 '부띠끄찾기'라는 전국, 세계..
pren 웹 제작방식을 알아보자! [intro] 검증 된 각 분야의 아웃소싱 전문가와 클라이언트를 연결해주는 플랫폼 프랜! 다양한 분야의 검증된 전문과들과 쉽고 빠르게 소통 할수 있는 플랫폼 프랜은 어떤 방식으로 제작했는지 살펴볼까요? [main] 먼저 메인화면 부터 살펴볼까요? 프랜은 의뢰인과 전문가의 매칭플랫폼으로 클라이언트와 전문가 상호 협의를 통해 계약을 하고 전문가가 협의된 견적금액을 받고 플랫폼사에 일정 수수료를 지불하는 형식으로활동을 합니다. 1. 헤더는 전문가찾기,의뢰요청하기 오른쪽에는 로그인tab 로그인시 로그인text는 가입자 아이디로 변경되고 의뢰요청하기탭 우측으로 마이페이지기능을하는 '마이프랜'이 추가되요. '매칭서비스'가 프랜의 핵심서비스이기때문에 이를 강조하기위해 매칭을 빠르..
단디헬퍼 웹 제작방식을 알아보자! [intro] 국내 가정도우미 전문 구인구직 1위사이트 단디헬퍼! 베이비시터, 가사도우미 등 신뢰도 높은 플랫폼으로 우뚝선 단디헬퍼 홈페이지는 어떤식으로 제작되었는지 알아볼까요? [main_top] 먼저 메인페이지부터 살펴볼까요? 우선 개인적으로 단디헬퍼의 메인컬러 pink를 포인트컬러로 사용하여 홈페이지 요소 곳곳에 사용된 것이 눈에 띄었습니다. 베이비 시터, 가사도우미를 사용자와 구직자간 매칭해주는 사이트 이기에 편안하고 따뜻한 느낌을 살려주는 분홍색을 사용한점이 긍정적으로 다가왔습니다. 1. 메인페이지에 검색하기 버튼과 맞춤인재추천 서비스를 받을 수 있는 버튼이 삽입되어있네요. 이런 ui는 사용자가 검색기능 활용도가 높은 사이트에서 많이 사용하는데 단디헬퍼는 자..
지그재그 앱 제작방식을 알아보자! [intro] 여성 쇼핑몰을 한번에 모은 애플리케이션 지그재그! 다양한 업체가 입점해 사용자들이 이를 한눈에 모아볼 수 있는 앱 앞으로가 더 기대되느 지그재그는 어떤형태로 제작되었는지 알아볼까요? 지그재그 앱 메인 화면입데요. 쇼핑몰 어플이기 때문에 상품이 제일 먼저 화면에 노출이 되고 있네요. 1. 상단 우측에는 로고를 삽이하여 버튼을 누르면 메인화면으로 이동하는데요. 업체의 로고를 보여주면서 사용자가 메인으로 빠르게 이동할 수 있는 장점이 좋은것 같네요. 2. 검색 ui도 최상단에 위치해 사용자가 빠르고 쉽게 검색 할수 있는 페이지로 이동할 수 있는 구조로 검색기능은 다음 페이지에서 더 자세히 살펴보겠습니다:) 3. 이 부분이 메인화면에서 가장 주목되는..
현대카드 홈페이지 제작방식을 알아보자! [intro] 현대자동차그룹 계열의 신용카드사 현대카드! 업계최초 세이브포인트제도를 도입하여 현대카드만의 브랜드 정체성을 담아 디자인을 하고 틀에박힌 가로형이아닌 세로형 카드로 다른 카드사와의 특별함을 강조하고 있는 카드사 입니다. 자 그럼 현대카드홈페이지는 어떻게 제작되고 사용자에게 어떤 장점을 선보이고 있는지 한번 알아볼까요? [main page] 먼저 메인페이지부터 살펴볼까요? 메인페이지는 현대카드만의 독톡하고 톡톡튀는 감성이 돋보이는 color가 사용자의 시선을 사로잡네요. 1. 현재 선보이고 이벤트에대한 문구를 홈페이지 접속시 최상단에 팝업을 삽입하여 사용자에게 진행중인 이벤트 또는 출시한 카드를 홍보하고 있네요. 작고 사소한 부분이지만 이런 ..
H&M 홈페이지 제작방식을 알아보자! [intro] 세계적인 SPA브랜드 H&M! 명성에 걸맞게 합리적인 가격, 디자인의 옷들이 많은 브랜드 인데요. H&M은 스웨덴에서 시작된 글로벌 브랜드 입니다. 한국 H&M홈페이지는 어떻게 제작되었는지 한번 살펴볼까요? [main] 1. 홈페이지 메인 상단 중앙에는 H&M 로고가 위치해 있네요. 로고의 색상은 강렬한 레드색상, 심플한 ci로 홈페이지 접속시 브랜드인식을 강렬하게 해주고 있네요. 2. 메인navigation은 심플하게 텍스트로 제작되었네요. 홈페이지가 전반적으로 심플하게 구성되있는데 이런 디자인이 트렌디하고 H&M브랜드가 추구하는 아이덴티티와 잘 어울린다고 생각되네요. 3. H&M의 강렬한 로고색상에 맞춰 메인배너도 레드컬러의 박스안에 강조하..