본문 바로가기

전체 글

 (12)
[디자인 - 연습] 웹디자인 연습(7) - 대구은행 *리뷰 작업시간 > 2시간 선정이유 > 1. 간단하고 일괄적이고 규칙적인 레이아웃을 찾다가 선택함. 2. 일상적인 일에 변화가 생겨서 난이도가 낮은게 필요했음. *오늘 깨달은 점 1. 전체을 한가지 기준으로 작업한게 아니고 각의 섹션에 규칙이 있는 것 같다. 2. 워낙에 빠른 접근성을 위해 만든 웹사이트라서 간격이 굉장히 크게 느껴진다. ****회고록 일단 일상일에 변화가 생겨서 일주일에 2번 정도로 끝낼 수 있는 홈페이지로 골랐다. 근데 하다보니 뭔가 내가 받아쓰기를 하고 있다는 느낌이 들었다. 전과 같이 한번은 기억만으로 연습하고 나머지 한번은 섹션별로 크기를 봐며 했는데 이게 맞는 건가 싶다. 그러나 확실히 실전에서 레이아웃을 짜는 실력이 올라가고 있다. 다만 색을 조합하고 배치하는 게 아직까지 어..
[디자인 - 연습] 웹디자인 연습(6) - 로톡 *리뷰 작업시간 > 3시간 선정이유 > 1. 정돈된 레이아웃과 반복적인 요소가 컴포넌트화 하기 좋다. 2. 메인 컬러가 포인트 컬러로 활용되고 중간에 환기 시켜줄 서브 컬러 사용도 좋아보였다. *오늘 깨달은 점 1. 메인 슬라이더와 첫번째 섹션의 간격은 다른 섹션 끼리의 간격과 반정도 적다 2. 큰 레이아웃은 그리드를 따라가고 작은 레이아웃은 무시하는 경우가 있느나 간격과 크기는 일정하다 3. 컴포너트화로 하면 빠르다. 메인 컴포넌트를 계속 수정하면 한꺼번에 바꿀 수 있다. 4. 컨텐츠 전체크기 보다 안으로 들어간 경우의 이유는 클릭 존이 있기 때문이다. *셀프 점검 1. 이 시안 연습을 얻어가고 싶은 게 무엇인지 파악하고 연습할 것 --> 여러 컨텐츠를 비슷하지만 다른 레이아웃을 반복적으로 사용했음에도..
[디자인 - 연습] 웹디자인 연습(5) - 이마트24 주제 > 이마트 24 편의점 제품, 편의점 창업 컨셉 > 귀여운, 재미있는, 심플한 표현방법 > 그래픽디자인, 컨텐츠, 이미지 폰트 > 'Noto Sans KR' 타겟층 > 20-30대, 30-40대 주요색 > #F8BB00 색 분배 비율 와이어 프레임 1. 모든 길이가 일정하지 않다. 2. 컨텐츠에 맞는 길이대로 설정이 되어있다. ex) 제품은 박스 길이가 좁고 길게 되어있고 부모 컨텐츠는 위아래 비해서 짧다이벤트, 프랜드 소개, 창업 문의 등 중요도는 낮지만 방문 고객에 딱맞는 컨텐츠는 간격이 넒다. *리뷰 작업시간 > 3시간 선정이유 > 1. 이전보다 레이아웃이 정돈 되어 보이지느 않지만 각기 다른 레이아웃을 다룰 수 있을 것 같았다. 2. 메인 컬러가 사이트 전체 비중이 높은 편이다. (보통은 흰..
[디자인 - 연습] 웹디자인 연습(4) - 유플러스 알뜰모바일 주제 > 유플러스 요금제 및 유심 판매 컨셉 > 귀여운, 심플한, 재미있는 표현방법 >아이콘, 일러스트, 타이포그래피 폰트 > 'Pretendard' 타겟층 > 다양한 연령층 주요색 > #F2F4F5 #a480dv 색 분배 비율 > 와이어 프레임 1. 부모 컨텐츠 간의 간격도 첫번째를 제외하고 모든 섹션간의 간격이 일정하며 메뉴,텝메뉴(40px) 또는 자식 컨텐츠(20px) 간의 간격이 각각 일정하게 떨어진다. 2. 컬러도 정확히 5~6개만 쓰이고 폰트 굵기도 4가지로만 이루어져있다. 3. 사이트 별로 컨텐츠가 많을 수록 부모 컨텐츠 간격이 100px이하 또는 조금 넘는 정도인 것 같다. 4. 다른 종류거나 더욱 중요한 내용은 전체 크기로 색까지 줘서 차별화 시킨 것 같다. 5. 자잘한 혜택과 같은 컨텐..
[웹디자인] 와이어 프레임과 게슈탈트 이론 와이어 프레임이란? - 본격적인 웹 시안을 디자인 하기 전에 간단한 모양으로 컨텐츠의 골격을 시각화는 작업 - 유저의 목적 도달과 서비스 사용성을 예측하며 제작 해야한다. 게슈탈트 이론이 뭘까? - 게슈탈트 이론은 막스 베르트하이머, 볼프강 퀼러, 크리스찬 폴 에렌펠스 라는 학자들이 연구한 심리학 이론이다. 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로 디자이너가 기획 또는 설계도 함께 진행한다. 용어가 헷갈리게 ..

티스토리툴바