오늘의 공부/디자인 (8) 썸네일형 리스트형 [웹디자인] 와이어 프레임과 게슈탈트 이론 와이어 프레임이란? - 본격적인 웹 시안을 디자인 하기 전에 간단한 모양으로 컨텐츠의 골격을 시각화는 작업 - 유저의 목적 도달과 서비스 사용성을 예측하며 제작 해야한다. 게슈탈트 이론이 뭘까? - 게슈탈트 이론은 막스 베르트하이머, 볼프강 퀼러, 크리스찬 폴 에렌펠스 라는 학자들이 연구한 심리학 이론이다. 1. 게슈탈트는 '전체로써의 형태' 라는 독일어이다. 2. 이론에 따르면 사람은 전체 이미지를 각 요소의 상호 관계와 맥락에 따라 의미를 파악한다. = 각 요소들의 모양이나 형태, 색 등등의 차이를 보고 전체 이미지를 알아낸다. = 각각의 시각적 요소에 따라 전체 이미지 의미가 따라진다. 디자인에서 쓰이는 게슈탈트 이론 4가지 - 유사성 > 유사한 색이나 모양, 크기를 하나로 인식한다. - 근접성 >.. [웹디자인] 웹디자인의 필수 - 그리드 시스템과 레이아웃 그리드 시스템을 배우는 이유는? 다양한 디자인이 나오고 있는 상황에서 웹과 앱을 모두 다룰 줄 알아야 하기 때문에 그리드로 기준을 잡고 제작하면 반응형에 대응하기 쉽고 일정 레이아웃이 나올 수 있기 때문입니다. 그리드 시스템이란? 1. 컨테이너 > 컨텐츠의 크기 2. 컬럼 > 단의 수 3. 거터 > 단끼리의 거리 4. 좌우 마진 으로 이루워진 가이드 라인이다. * 컬럼의 크기가 정수로 떨어져야 마음이 편안한 사람이 있지만 사실 소수점으로 떨어져도 된다. 어차피 반응형을 대비해서 가이드를 만들기 때문이다. 웹디자인에 최적화 된 그리드 시스템은? 1. 컬럼 > 12단 - 12단이 반응형에 대응하기 가장 좋다. 2. 거터 값 .> 30 , 24 , 20 - 커터값은 통일 시켜야 디자인도 일정하고 개발자가 개발.. [웹디자인] 웹디자인 용어를 알아보자2 - UI 컴포넌트 부트스트랩 기준으로 많이 알려진 용어들을 정리해 보았다. 1. UI 컨포넌트 - Breadcrumbs > 네비게이션 체계 내에서의 현재페이지 위치를 알려준다. 상위 위치만 클릭이 가능하다. - Pagination > 같은 정보 체계 안에서 다음 페이지로 이동하거나 클릭시 다음 페이지를 보여주는 버튼이다. - Badge > 새롭거나 읽지 않은 항목이나 알림을 말한다. 주로 버튼 옆에 붙어서 알림이 온다. - Progress bars > 얼마나 진행 되었는 지 알려주는 UI이다. 보통은 게이지바로 많이 보인다. - Caroual > 슬라이드와 같다. - Embed > 코드나 이미지 또는 어떠한 정보를 변형없이 그래도 나의 소스에 그래도 포함 시키는 것, 복사 붙이기 - Popover > 버튼 요소나 다른 클.. [웹디자인] 웹디자인 용어를 알아보자! 웹디자인 할때 많이 쓰는 용어를 알아보자! 1. 디자이너의 역할 - UX > UX(User Experience), 유저의 경험을 반영하여 앱과 웹상 화면 설계하는 것(컴퓨터와 관련없는 부분도 찾아서 설계한다.) - UI > UI(User Interface)는 웹이나 앱을사용하는 사용자가 편하게 사용하도록 설계된 내용을 디자인하고 제작하는 것 - GUI > GUI(Graphical User Interface), 그래픽 사용자 인터페이스를 줄인 말로 UI에 그래픽(컬러,아이콘,인터렉션 등)까지 더해서 디자인 하는 것 사실 학문적으로 보면 UX > UI > GUI 이고 실무에서는 UI = GUI로 통용된다. 더욱 작은 조직이라면 UX=UI=GUI로 디자이너가 기획 또는 설계도 함께 진행한다. 용어가 헷갈리게 .. [디자인 - 연습] 웹디자인 연습(3) - 태안군청 3) 태안군청 *분석 주제 > 태안 관련 소식 및 정보 공유 컨셉 > 찾기 쉬운, 편안한, 신뢰적인 표현방법 >사진, 콘텐츠 폰트 > 'gmarket' 타겟층 > 다양한 연령층, 여남노소 주요색 > #eaf3f8 #4ba5ec 색 분배 비율 > 레이아웃 1. 컨텐츠가 많은 유형의 웹사이트로 컨텐츠 간의 간격이 100px 이상 넘어가지 않는다. 2. 다른 영역에 컨텐츠로 넘어갈 경우 아랫부분의 간격이 1.5배 정도 된다. 3. 파악하기 쉬운 그리드 형태로 나타있다. 4. 컨텐츠 간에 영역 구분이 굉장히 잘 되어있다. 5. 컨텐츠 마다 간격이 다 다르지만 각자의 상하좌우 간격이 일정하다. *리뷰 - 작업시간 > 4시간 -선정이유 > 1. 다양한 컨텐츠 있음에도 레이아웃이 굉장히 일정하고 깔끔하게 잘 짜여져 .. [디자인 - 연습] 웹디자인 연습(2) - kisi보험연구원 2) kisi보험연구원 *분석 주제 > 연구소의 연구논문 및 자료 공개, 연구원 모집, 보험 자료 관련 공개 컨셉 > 안정적, 모던한, 신뢰적인 표현방법 >사진, 콘텐츠 폰트 > Pretendard 타겟층 > 30-40대 , 40대 이후 주요색 > #568AE5 색 분배 비율 > 레이아웃 > 왼쪽정렬을 사용하고 레이어 끼리 겹치는 표현은 자주 사용한다. ① 섹션 간격이 보통 200px 이상이다. ② 전체 섹션의 범위는 1480px ③ 메인 텍스트 또는 컨텐츠의 테두리 간격이 일정하지 않다.(4~5px 차이가 난다.) ④ 제목과 컨텐츠 간의 간격이 일정하지 않다. ⑤ 단조로운 레이아웃을 피하기 위해 계속해서 새로운 섹션별로 레이아웃이 모두 다르다. ⑥ 메인 비주얼의 text는 1480px 범위 안에서 자리.. [디자인 - 연습] 웹디자인 연습(1) - 11번가 '어떻게 공부 해야할까?' 라고 모부님 한테 이야기 했을 적이 있다. 그때 아버지가 가장 인상깊은 말을 해주었다. 누구의 말인지는 모르겠으나 사수들도 비슷한 이야기를 많이 해주었던 참이라 기억력이 짧은 나도 잃어 버리지 않는 다. (물론 기억하기를 다르게 기억할 수 있다.) 거인의 어깨에서 배운다. 나는 저번주 부터 각각의 사이트를 있는 그대로 카피하여 웹디자인을 공부해보기로 했다. 1) 11번가(t공식 대리점) *분석 주제 > 11번가에서 skt 통신과 관련된 제품, 요금제, 할인 등등 소개 및 판매하는 사이트 컨셉 > 안정적, 깔끔한 표현방법 > 제품/ 사진/ 일러스트 색상 > #FF0038(메인) 폰트 > Noto Sans KR 타겟층 > 10대 ~ 60대 포괄적 *리뷰 - 작업시간 > 5시간 30.. [웹디자인] 웹 디자인 방식 - 원페이지, 패럴랙스, 풀스크린, 타이포그래피 더보기 1. 원페이지 - 원페이지 웹사이트란 접속한 전면페이지에서 스크롤 다운으로 전체 메뉴가 구성되어 별도의 페이지 이동이 없이 전체 스크롤 페이지 내에서 위치를 이동할 수 있도록 구현된 웹 페이지입니다. - 어디에 쓸까? 단기적인 캠페인을 홍보하거나 마이크로사이트 https://www.andrewleguay.com/ Andrew Leguay Andrew Leguay Folio21 www.andrewleguay.com https://www.cj.net/ CJ그룹 LIVE NEW CJ www.cj.net 더보기 2. 패럴랙스 스크롤 - 스크롤을 이용하여 화면과 요소가 시간차별로 애니메이션 된다. - 어디에 쓸까? 원페이지 또는 내용이 얼마없고 이미지에 효과를 주며 스토리텔링이 필요한 페이지 https:/.. 이전 1 다음
