디자인6 컴포넌트 클로닝(1) - 유튜브 썸네일 디자이너 입장에서 컴포넌트를 Flexbox로 레이아웃만 잡는다는 가정하에 클론 해보고 연구하는 글입니다 레이아웃만 구성하기에 html/css를 사용하지만 반응형 및 시맨틱한 요소는 고려하지 않습니다 마우스 이벤트 혹은 상태에 따른 컴포넌트 변화는 작성하는데 너무 오래 걸리기 때문에 고려하지 않습니다 요즘 플러터를 공부중인데 레이아웃을 잡는 게 기존 웹에서 많이 쓰이는 Flexbox를 기준으로 하고 가벼운 마음으로 플러터로 코드를 작성해보았습니다. 그런데 디자인 파트에서부터 레이아웃을 정확하기 잡지 않으니 코드 작성 시에 막히거나 실제로 이벤트 혹은 상태에 따른 고려도 많이 해야 하기에 예습 및 복습 겸으로 웹에 있는 컴포넌트를 클론 하면서 공부하기 위해 작성합니다. 첫 번째로 많이 사용하는 유튜브 썸네일.. 2020. 11. 18. 2020 UI/UX 디자인 툴 스택 원문 : https://uxdesign.cc/designers-tech-stack-of-2020-1df2e1203638 Designers tech stack of 2020 We’re apporaching the end of the decade and a lot has happened in UX, HCI and Interaction design during the last ten years. Especially… uxdesign.cc 미디움을 둘러보다가 UI/UX 디자인 툴에 관한 아티클을 보고 정리 및 의견을 목적으로 작성합니다. 저는 원래 모션그래픽을 했었고, 툴을 배우는 속도는 빠르다고 자부하기 때문에 그리고 지금까지 여러 가지 툴을 다뤘던 경험이 있다 보니 도움이 그다지 되지는 않을까 했는데 생각보.. 2019. 12. 22. 진정한 반응형 폰트사이즈 개인적으로 미디어 쿼리로 폰트 사이즈를 정리하는 건 굉장히 불편하고 관리 포인트가 많이 늘어난다고 생각합니다. (특히 반응형 사이트!) 그렇기 때문에 디자인과 최종 결과물이 다르게 나오더라도 어느 정도 이해하는 편입니다. 퍼블리싱이 되고 만약 폰트나 텍스트 관련해서 수정이라도 발생하면 결과물이 점점 산으로 가거나 작업 시간도 늘어나고 관리도 힘들어집니다. 그렇기 때문에 실제 디자인된 사이트를 둘러보면 PC, Mobile 뷰 정도만 적극적으로 지원하는 경우가 많습니다. 그러나 앞으로 지원해야 할 디바이스의 비율이나 해상도가 다양(최근에 나온 갤럭시 폴드의 경우 거의 태블릿 정도)해질거라고 생각합니다. 결국엔 PC, Tablet, Mobile 뷰는 기본으로 지원해야 하며 세세하게 분류가 될 가능성이 높습니다.. 2019. 11. 6. 톤 앤 매너란 무엇인가 한때 유행어처럼 쓰였던 '톤 앤 매너'의 정확한 의미는 무엇일까요? 간단하게 말하면 컨셉이라고 할 수 있겠고, UI/UX 디자인의 관점에서 보다 장기적인 관점에서 표현한다면 '일관된 방향'이라고 할 수 있을 거 같습니다. 디자인적인 시각에서 본다면 톤 앤 매너를 유지하는 요소로는 레이아웃, 색상, 폰트, 컨텐츠 등등이 있을 텐데요. 물론 저것들도 중요한 요소들이지만 저는 오늘 'Glossary'와 관련지어서 톤 앤 매너에 관해 써보겠습니다. 그럼 먼저 Glossary가 의미하는건 '용어사전'입니다. 디자인에서 웬 용어사전이냐고 하겠지만 분명히 텍스트도 시각적인 요소이며, 규모가 큰 디자인 시스템의 경우 따로 용어사전을 정의하는 편입니다. IBM의 카본 디자인 시스템의 Glossary - https://w.. 2019. 11. 1. Hierarchy란 무엇인가 먼저 Hierarchy의 사전적 의미는 '계층'을 뜻하며 UI/UX에서는 보통 계층 구조라고 이해를 합니다. Hierarchy(이하 계층 구조)는 UI에서 굉장히 중요한데, 보통 Typography와 많이 연관됩니다. 예를 들어, 각 페이지나 컴포넌트를 대표하는 텍스트는 대표스럽게 보이면 되고, 덜 중요해 보이는 텍스트는 덜 중요해 보이면 되는 겁니다. 쉽게 말해서 각 요소들의 서열을 정리해주는걸 계층 구조를 정리한다고 생각하면 쉽습니다. 계층 구조를 정리하는 방법은 여러 가지가 있지만 개인적으로는 Typography가 가장 쉽게 이해가 되는 방법이므로, Typography를 예로 들어 설명하겠습니다. Typography에서 계층 구조를 정리하는 요소로는 폰트의 크기(size), 굵기(weight), 색.. 2019. 10. 31. (번역)당신은 UX를 할 수 있나요? 미디엄을 보다가 굉장히 맘에 들어 충동적으로 번역합니다. 원문은 아래에 링크입니다. https://uxdesign.cc/hey-can-you-do-the-ux-for-us-432a38eac295 Hey, can you ‘do the UX’ for us? A tale of UX as a misconception. uxdesign.cc — 안녕하세요. 저는 John입니다. 오늘부터 이 프로젝트에 UX 디자이너로 참여하게 되었습니다. — 저는 프로젝트 매니저인 Joe라고 합니다. 같이 일하게 되어 반갑습니다. — 저도 반갑습니다. 뭐부터 하면 될까요? — 음.. 저희가 첫 번째 버전을 디자인했는데요, 몇 가지 UX 하는 걸 개선할까 생각 중입니다. 사람들이 앱을 받고 한 번만 사용하고 다시는 사용하지 않더군요.. 2019. 6. 12. 이전 1 다음
