Design (38) 썸네일형 리스트형 2020 Sketch Inspector 베타 버전 | 테스트 후기 2020년 1월, 스케치가 Inspector 기능을 업데이트했다. 다른 UI 디자인 툴도 제공하고 있지만, 많은 디자이너들이 사용하는 스케치에서 내놓은 만큼 파장이 더 클 것 같다. 과연 제플린을 대체할 수 있을지 사용해보기로 했다. 업데이트 내용 웹에서 Inspector 지원 Copy버튼으로 수치 복사 가능 컬러값을 각 개발 언어에 맞춰서 복사 가능 앞으로 업데이트할 내용 심볼, 오버라이드, 텍스트 스타일을 명확하게 볼 수 있도록 디자인 시스템에 대한 지원 레이어부터 전체 디자인까지 에셋 추출 기능 코드와 컬러 포맷 형식 개선 (CSS와 다른 언어 포함) 언어 저장 (컬러 포맷같은 곳에서 개발 언어를 한 번만 선택해두면 전체 설정됨) Sketch blog에서 업데이트 내용 확인하기 사용 후기 제플린과 .. [디자인 스펙트럼] 텐센트 디자이너들의 중국 디자인에 대하여 중국의 브랜드 디자인과 중국 IT회사에서의 경험 김유라(텐센트 뮤직 엔터테인먼트=QQ뮤직), 이현규(텐센트 게임즈) 2020년 1월 18일 토요일 https://www.openpath.kr/23/?idx=13 * 중국에서 일하게 된 계기는? 김유라님(이후 ‘김'이라고 칭하겠음) : 플러스엑스라는 에이전시에서 일을 했었는데 이후 커리어에 대한 고민이 많았다. 에이전시, 인하우스, 스타트업 등에 대한 고민이 많았고, 에이전시가 아닌 색다른 경험을 하고 싶은 니즈가 있었다. 그러던 중 회사에서 중국 클라이언트를 받아서 리서치와 미팅을 위해 중국에 가보면서 중국에 관심을 갖게 되었다. 워낙에 반복되는 일보다는 새로운 일을 하는 걸 좋아하다 보니 새로운 기회를 찾으러 떠난 것 같다. 이현규님 (이후 ‘이'라고 칭.. 상표 표시로 브랜드 보호받기 (TM ™, SM ℠, R ®) 현 회사에서 아마존에 물건을 등록하면서 Amazon Brand Registry 과정을 진행했다. (내가 진행한 건 아니고 어깨 너머로 봤다.ㅋㅋㅋ) 아마존에 브랜드 등록을 하면 복제품에 대해서 보호받을 수 있고 아마존에서 제품이 좀 더 적극적으로 노출될 수 있도록 해주는 것 같다. 옆에서 주워들은 내용을 조금 정리해보고자 한다. 모든 내용들은 미국을 기준으로 한다. 상표 표시 우리는 일상생활에서도 상표 표시를 매일 접한다. 우리가 자주 가는 스타벅스만 해도 로고나 각종 굿즈 옆에 ®, ™ 표시가 있다. 심지어 일회용 컵 홀더에도! 지금 옆에 스타벅스 컵이 있다면 한번 확인해보자. 위 이미지처럼 오른쪽 하단/상단에 붙이는 게 가이드라인이고, 읽히지 않더라도 존재가 인지될 정도로만 넣으면 된다. 이런 ®과 .. iPhone X, iPhone 11의 안전영역(Safe area)을 알아보자. iPhone X 2017년에 나온 아이폰 X. 출시 당시 탈모 디자인으로 수많은 논란이 있었지만 많은 사람들을 강제로 적응시켰다. 많은 핸드폰 제조사들도 노치 디자인을 따라가며 스크린 사이즈를 넓히기 시작했고 애플은 2020년까지도 아이폰 11, XS, XR로 노치 디자인을 이어가고 있다. 이번에 X 계열 디자인을 제대로 대응하게 되면서 정리 글을 작성하게 되었다. (그동안은 개발자가 알아서..) 정리하면서 Portrait 모드 같은 경우 가이드를 쉽게 찾을 수 있지만 Landscape 모드는 찾기가 쉽지 않아서 한 번 정리해보고자 한다. 일단 Safe area를 알아보기 전에 노치 디자인에서 주의해야할 Common Elements에 대해서 짚어보고 가자. Common Elements 아이폰 X의 Por.. Sketch meet up in Korea 디자이너와 개발자의 협업 : AB180의 에어브릿지 (https://airbridge.io/) 디자인 시스템을 구축하는 도전기 (스케치,리액트,깃) 디자인 요소 정리 반복적으로 쓰이는 디자인 요소들의 수정 용이를 위해 예외 처리된 부분은 과감히 제외하고 컴포넌트화할 수 있는 부분들을 정리. 개발과 네이밍을 통일. 동기화를 유지하기 위해서 네이밍을 같이 고민하는 것이 매우 중요하다. Ui 구현 프로토콜 UI 구성을 코드 관점으로 이해 커뮤니케이션 간극을 축소 (CSS를 배워서 디자이너가 직접 수정하고 Git으로 커뮤니케이션) 구현의 순도를 높이고 View QA 프로세스 개선 시스템 활용 자주 스타일이나 기능이 바뀌는 스타트업의 성격상, 디자인/기능을 완전히 제한시켜버리면 나중에 변화를 위해 써야 할 시간 .. [테헤란로 런치클럽] 디자이너의 슈퍼파워 (feat. 스타트업과 아마존) 백목련님 - 아마존 디자인팀 아마존 디자인 팀은 어떻게 일하는지, 스타트업의 디자인과의 비교, 디자이너의 영향력과 리더십은 무엇인지 세계 최대 온라인 쇼핑몰인 '아마존'의 디자인 팀과 스타트업 아마존에 가기 전에는? 현재는 시애틀 아마존에서 일하고 있지만, 이 전에는 스타트업만 다니며 큰 회사에서 일한 적이 없었다. 팀으로 일하는 걸 스타트업에서 처음 배웠다. 처음에는 소프트웨어를 주로 하다 보니, 하드웨어도 해보고 싶어 '어웨어'라는 회사에서 공기청정기도 만들어봤다. 그 과정에서 실제 유저 데이터를 보게 되니, 자연스럽게 더 많은 데이터를 다루면서 디자인을 하고 싶어 졌다. 각 회사에서 키워드가 있었다. 혼자 일할 땐 내가 뭘 잘하고 하고 싶은지가 중요했었다. 디자인이 필요한 곳에서 다양한 걸 할 수 .. [리뷰] 아이디어가 고갈된 디자이너를 위한 책 (그래픽 디자인편) 색 겹치기 - 1 더하기 1은 '많다' 오랫동안 디자이너들은 CMYK 컬러의 혼합으로 열린, 수많은 색채의 가능성을 탐험하면서 색 겹치기를 시각 효과의 하나로 사용해왔다. 색 겹치기는 20세기 중반 모더니즘 그래픽 디자인에서 동 시대성을 표현하는 흔한 방법이었다. 마이클 비에루트가 디자인한 고급 종이 제조업체 모호크 사의 2013년 로고는 글자 M으로 둥글게 말린 종이의 움직임을 기발하게 표현하고 있다. 동시에 투명한 색들을 서로 겹치게 하는 현대적인 기법으로 이것을 강조한다. 여백 - 페이지를 해방시키다 '중요한 것은 무엇을 넣느냐가 아니라 무엇을 빼느냐이다'. 여백의 활용에 관한 이 말은 그래픽 디자인에도 적용된다. 19세기 잡지와 신문의 조판공들은 모든 공간을 활자나 이미지로 가득 채웠다. 그러나 .. [ProductTank Meetup] 사용자 리서치로 팀의 속도를 높이는 방법 사용자 리서치로 팀의 속도를 높이는 방법 연사: Jay(박준형), UX Designer (https://brunch.co.kr/@sluggerpark) 리서치의 종류 다이어리 리서치 : 서비스를 자주 쓰는 사람들을 대상으로 하는 리서치로 테스크를 주고 어떻게 그걸 해결하는지 확인한다. ERP System 사용성&만족도 score : 우리의 리소스를 어디에 투입할 것인가에 대한 의사결정의 용도로 사용한다. 카드소팅, 사용성평가, A/B 테스트... 하지만 리서치는 답을 알려주는 게 아니다. 사용자의 숨겨진 니즈를 알려주는 게 아니라 현상을 최대한 자세히 설명해주는 것이다. 통계는 인과관계를 설명해주지 않으므로 숫자를 해석하는 능력이 필요하다. 대규모 단발성 리서치가 가진 문제점 대규모 리서치는 기획자, P.. Sketch Library (Sketch, Invision DSM) Design Library 디자인 라이브러리는 스케치를 사용하는 팀원들 간에 심볼과 스타일 공유하고 동기화할 수 있어 많이들 사용한다. 이 것을 사용하면 디자인의 통일성과 비용절감을 할 수 있겠쥬. 이번에 라이브러리를 사용함에 있어서 리서치한 내용을 기록차 남겨보도록 한다. 먼저 Symbol Library를 적용함에 있어서 2가지 툴을 조사했다. 하나는 보편적으로 사용되고 있는 Sketch에서 제공하는 Symbol Libary와 Invision에서 제공하는 DSM. 먼저 DSM부터 알아보자 Invision DSM Invision DSM은 인비전에서 Brand.ai라는 회사를 인수하고 재정비하여 오픈했다. 간략한 기능은 아래와 같다. 스케치, 일러스트레이터 공유 CSS, Sass, Json, Android.. 디자인과 개발 아웃풋의 컬러가 다르다면 ? 내 컴퓨터에서는 색을 잘 맞췄는데 실제 아웃풋에서는 생각보다 쨍하거나, 칙칙하게 나오는 일이 많다. 디자인과 실제 아웃풋 컬러가 다르게 보이는 일이 발생하는 것이다. 이런 일을 타파하기 위해서 컬러 프로파일의 개념을 알아둬야한다. 디지털 디자인과 컬러 프로파일의 관계 컬러 프로파일은 크게 3가지로 나누어진다 sRGB, Adobe RGB(ARGB), P3 sRGB : 모니터 및 프린터 표준 RGB 색공간 ARGB : sRGB에서 손실되고 부족한 영역대를 보완한 색공간, 어도비의 인쇄장비 기준 P3 : sRGB보다 약 25% 더 많은 컬러를 제공, 디지털 시네마 기준 대표적인 제품은 Iphone 7, 아이패드 프로, 아이맥 등 ARGB는 인쇄 기준 색공간이므로 크게 신경쓰지 않아도 된다. 실제로 요즘 많은 .. 이전 1 2 3 4 다음
