반응형
'디자인' 태그의 글 목록
반응형
본문 바로가기
반응형

디자인13

반응형 디자인의 결함 제거 지난 5년동안 모바일 트래픽의 점유율이 20% 증가했으며, 오늘날 반응형 디자인은 이미 당연한 것으로 받아 들여지고 있다. 2020년에는 모바일에서 모든 웹 사이트에 액세스 할 수 있으며 잘 작동한다. 대부분의 사용자는 스마트폰이나 태블릿에서 제대로 작동하지 않는다는 사실을 알게되면 사이트를 떠나고, Google은 모바일 장치에 최적화되지 않은 경우 검색 결과에서 사이트 순위를 낮춘다. 따라서 반응형 웹 사이트의 디자인에는 정적 웹 사이트의 개발과는 다른 특별한 접근 방식이 필요하다. 디자이너는 반응형 디자인을 사용함에 있어, 먼저 기기(스마트폰, 태블릿 또는 컴퓨터)에 의해 디자인을 결정한 후 기기의 화면 크기에 따라 보여준다. 한편으로 반응형 디자인의 생성은 사이트의 개발과 유지 관리를 단순화한다. .. 2020. 10. 30.
프로토타이핑 UI : 필요한 툴 찾기 디자인은 끊임없이 진화하고 복잡해지고 있다. 사용자 인터페이스 설계는 더 이상 아이콘의 와이어프레임과 디자인에만 국한되지 않는다. 오늘날, 디자이너들은 그래픽 소프트웨어와 프로토타이핑 툴을 포함하여 단순함에서 정교함에 이르기까지 다양한 유용한 도구들을 가지고 작업한다. 웹 애플리케이션을 만들든, 모바일 애플리케이션을 만들든 프로토타이핑 제작에는 준비와 전문 소프트웨어가 필요하다. 그러나 프로토타이핑 툴의 수가 매년 증가함에 따라 어려운 선택을 해야 한다. 어떤 툴을 사용하면 가장 효율적이고 효과적으로 작업할 수 있으며 가장 유용한 프로토타입을 만들 수 있을지 고민해야한다. 이 글에서는 가장 인기 있는 프로토타이핑 툴의 장단점을 살펴보기로 한다. 우리 회사 UX팀의 디자이너들에게 그들이 가장 좋아하는 프로.. 2020. 6. 16.
UI디자이너의 아티클 활용법 에이전시 입사 이래로, 나 자신과 약속한 디자인 레벨업 루틴이 있다. 이 루틴은 빈도에 따라 매일, 매주, 매달 하는 것으로 나누어진다. 그중 매일 하는 것은 아래와 같이 두 가지이다. -1. Pinterset 업로드 -2. IT 혹은 디자인 관련 아티클 하나 이상 읽는 것 많은 것을 행하려고 하기보다는, 정말 내가 꾸준히 할 수 있고 해야만 하는 것에 초점을 맞춰 계획을 세웠었다. 위의 두가지 중 내가 꾸준히 실천해오고 있는 아티클 루틴을 소개해보려 한다. "출퇴근 길에는 메일함을 열어본다." 출퇴근 길은 양질의 아티클을 선별할 시간이 부족하기 때문에, 주로 좋은 아티클을 선별해서 소개해주는 뉴스레터 형식의 국내 플랫폼을 활용한다. 디독 Design+讀(읽을 독)의 합성어로, 해외 디자인 아티클을 읽기.. 2020. 6. 10.
프로토파이(Protopie) - 02.Formula와 Variable 사용해서 Number Spinner 만들기 Formula 간단한 수식부터 변수, 함수를 활용한 가변적인 값이나 레이어의 x, y, width, height 같은 속성 값을 참조할 수 있다. 이를 활용하면 인터랙션을 보다 역동적이고 간결하게 만들 수 있다. Formula의 기본적인 사용법 Variable 숫자, 문자, 컬러 값을 할당할 수 있고, assign reponse를 사용해서 Variable의 값을 변경하고 그에 따라 변하는 인터랙션을 만들 수 있다. Variable의 기본적인 사용법 01 감소 버튼 / 증가 버튼 / 숫자가 들어갈 Text 세가지를 제작한다. 감소 버튼과 증가 버튼은 Container로 그룹핑한다. 02 Variable을 추가하고, Number를 선택한다. 03 먼저, 감소버튼에 Tab 트리거를 추가한다. Tab 하단의 +.. 2020. 6. 5.
UI / UX 디자이너를 위한 짧고 유용한 디자인 Tip Steve Schoger의 Twitter 모음 'Little UI Details'는 이해하기 쉬운 이미지로 UI 디자인의 다양한 요소를 다룬다. 확인해본 결과, 최신 업데이트는 지속적으로 이루어지지 않는다. 하지만 기본적이지만 놓칠 수 있는 디테일에 대해 쉽게 설명해주기 때문에 한 번쯤 훑어볼만하다. 01. 부정적인 링크에 대한 교묘한 액션 유도 부정적인 이차적 액션에 대한 미묘한 연결고리는 종종 큰 굵기의 버튼보다 더 잘 작동한다. (확인과 관련된 액션을 더 확실히 할 것!) 02. 최소한의 라인 사용 테두리가 너무 많으면 디자인이 정신없어 보일 수 있다. 03. 텍스트 정렬 텍스트를 정렬하는 것은 디자인을 정리하고 콘텐츠의 가독성을 높이는 쉬운 방법이다. 04. 텍스트 컬러 조정 순수한 회색 텍스트는.. 2020. 6. 4.
프로토파이(Protopie) - 01.토글(Toggle)로 Condition 이해하기 Condition Range / Chain / Condition을 이용하면, 조건부 인터랙션을 구현할 수 있다. 그중 Condition은 특정값을 기준으로, 조건부 리스폰스를 실행시킬 수 있다. 아래와 같이 'a초과, a이상, a미만, a이하, a와 같다, a와 같지 않다'의 조건 설정이 가능하다. 기준이 되는 a는 오브젝트의 속성 값과 함수, 그리고 숫자를 추가할 수 있다. 01 토글의 기본 요소인 Oval와 Rectangle를 생성하고, Container로 그룹핑한다. 02 토글버튼은 Tab 했을 때 이루어지는 인터랙션이기 때문에, Oval와 Rectangle로 구성된 Container에 Tab 트리거를 추가한다. 03 토글의 상태는 On과 Off 두 가지이기 때문에, 두 개의 Condition 설정.. 2020. 6. 3.

티스토리툴바

반응형