반응형

반응형 웹 디자인의 9가지 기본 원칙

https://knulab.com/archives/1153

 

반응형 웹 디자인의 9가지 기본 원칙 – KNULAB

반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없

knulab.com

 

반응형
반응형

피그마 Figma, 주목받는 UI GUI 디자인 프로그램

 

https://www.figma.com/

 

Figma: the collaborative interface design tool.

Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.

www.figma.com

1) 윈도우OS, 맥OS 대응 + 웹 브라우저를 통한 디자인 진행

  • 웹 기반 브라우저로 사용하여 프로그램 활용 범위가 용이하며 앱 설치를 하지 않아도 됩니다.
    → 스케치는 맥OS에서만 사용 가능하지만, 피그마는 윈도우OS 및 웹 브라우저에서도 사용할 수 있습니다.
  • 웹 브라우저가 아니라도 컴퓨터에 직접 (네이티브) 프로그램을 설치하여 사용할 수도 있으므로 빠르게 작업을 진행할 수 있습니다.

2) 실시간 협업 시스템 (공동 라이브 디자인)

  • 웹 기반 브라우저 프로그램으로서, 피그마 계정 소유자가 링크를 공유하여 여러 명이 아트 보드를 확인하며 동시에 온라인으로 실시간 작업을 진행할 수 있습니다.
  • 개발자가 참조할 수 있는 정보를 주는 ‘개발 툴바’가 있어 개발자와 소통에 매우 효과적입니다.
    마우스 툴바로도 수치값을 확인할 수 있어 가이드라인이 없어도 빠른 작업이 가능합니다.
  • 스케치는 제플린 zeplin이라는 앱을 따로 사용하여 (핸드오프) 작업물을 내보내는 방식으로 개발자와 소통하는 반면, 피그마는 앱 하나에서 바로 핸드오프 기능을  사용할 수 있습니다.

3) 버전 히스토리 관리

  • 히스토리 영역을 통해 협업자 중 누가 무엇을 변경했는지 확인하고, 필요에 따라 날짜&시간별로 기록되어 있는 히스토리를 확인할 수 있습니다. 때문에 버전 관리 필요 없이 히스토리 기능을 사용하여 편리하게 버전 관리가 가능합니다.
  • 포토샵과는 다르게 사용자가 날짜를 지정하여 저장할 수 있으며, 최대 30일까지 히스토리 저장이 가능합니다.
  • 히스토리뿐만 아니라 피그마 파일로도 저장이 가능하므로 필요시 파일로 내보내기 하여 파일을 관리하실 수 있습니다.

4) 최적화된 어댑티브(ADAPTIVE) 레이아웃 시스템

  • 포토샵은 해상도에 맞추어 매번 새롭게 작업을 해야 하는 것에 비해, 피그마는 외곽 선을 조정하는 것만으로도 대부분의 콘텐츠 레이아웃을 크기에 맞게 자동 조정해 줍니다.

5) SKETCH 파일과의 연동

  • 기존에 작업하던 스케치 파일들을 피그마에 임포트 하여 작업할 수 있습니다.
  • 현재 온라인에 배포되어 있는 스케치 UI 키트들을 피그마에서도 사용할 수 있습니다.

6) 프로토타이핑 PROTOTYPING

  • 직관적인 인터페이스로 UI 상호작용 및 애니메이션 제작이 가능합니다.
  • 클릭/호버/버튼 동작 등 단순한 인터렉션을 넣어 프로토타입을 제작할 수 있습니다.
  • 모바일에 최적화되어있어 플레이 시 프레임 및 모멘텀 스크롤과 같은 세부적인 부분의 프로토타입 또한 실제 화면처럼 느낄 수 있습니다.

장점

  • 스케치와 거의 비슷한 인터페이스를 다양한 환경에서 사용하실 수 있습니다.
  • 윈도우와 맥 모두 호환이 가능하여 사용 환경이 넓습니다.
  • 프로그램을 설치하지 않아도 사용할 수 있고, 1인은 무료로 사용 가능합니다. 

단점

  • 스케치에서 옮겨올 시 폰트가 깨질 가능성이 높습니다.
    *특히 한글 폰트는 무조건 깨집니다. 앱으로 사용할 시 폰트 깨짐 현상이 줄어듭니다.
  • 심볼 기능이 없으나, 스케치에서 옮겨온 것은 사용이 가능합니다, 단 Figma → Sketch로 파일을 옮기는 것은 불가능합니다.

출처 : https://medium.com/designcodeio/figma-vs-sketch-c01e5e74eddd#.jufkza6p1

 

Figma VS Sketch

Figma is like Sketch in the browser with real-time collaboration.

medium.com

 

.

반응형
반응형

애플의 목표는 돈을 버는 것이 아닙니다. 우리의 목표는
위대한 제품을 디자인하고 개발해 시장에 출시하는 것입니다.
좋은 제품을 시장에 내놓으면 사람들이 그 제품을 좋아하게 될 것입니다.
그리고 사람들이 그 제품을 좋아하면 우리는 돈을 벌 것입니다.
그러나 우리는 우선적 목표가 무엇인지 아주 명확히 알아야 합니다.
- 스티브 잡스


‘세상을 더 좋게 만들기 위한 우리의 노력을 시장과 고객이 알아봐서
우리를 선택한 것’이 바로 매출이고,
‘더 좋은 상품과 서비스를 개발하기 위한 원천 자본’이 되는 것이 바로 이익입니다.
회사는 분명 매출과 이익 없이는 살아갈 수 없습니다.
그러나 매출과 이익에 집착하는 대신,
세상과 고객을 위해 더 좋은 가치를 창출하는데 집중하다 보면
자연스럽게 따라오는 것이 바로 매출과 이익입니다.

반응형
반응형

이해할 수 없는 모순중 하나는 사람들이 여가를 즐길 때보다
일을 하는 가운데 긍정적인 결과를 더 많이 경험한다는 사실이다.
인간의 감정시스템은 목표를 향해 나아가도록 디자인되어 있다.
유전자는 향상과 성취를 향해 끊임없이 달려가도록 우리를 만들어 놓았다.
- 테리 버넘, ‘다윈이 자기계발서를 쓴다면’에서 

우리는 늘 게으름을 꿈꾸고 더 많이 쉴 수 있는 삶을 동경합니다.
그러나 그와 동시에 일에 몰입하고 목표를 성취하고,
일과 학습을 통해 성장하는 데서 짜릿함과 행복을 느낍니다.
일의 의미, 인생의 진정한 목적을 생각해보는 시간을 먼저 가져야 합니다.

반응형
반응형

파사드(프랑스어: Façade)는 건물의 출입구로 이용되는 정면 외벽 부분을 가리키는 말이다. 한글화하여 순화하려면 '정면'(正面)이 무난할 것으로 여겨진다. 건축에서 파사드의 궁극적 목적은 '소통'이다. 건물의 입면이 다양해지면서 파사드는 건물 외피 전체를 의미하기도 한다.

건축의 관점에서 파사드는 종종 그 건물에서 가장 중요한 디자인적 요소가 된다. 그리하여 파사드가 그 건물의 나머지 부분의 색채, 톤을 잡아준다. 이런 측면에서 '파사드'라는 개념은 은유적으로 사용될 수 있는데, 거시적 관점과 미시적 관점에 대해 사유할 여지를 준다.[1]

많은 경우에 파사드는 역사적인 구조물이며, 지역 법률에 의하여 그 변경이 크게 제한되어 있으며, 가끔 파사드의 변경은 거부감을 발생시킨다.

'미디어 파사드'는 '파사드(Facade)'와 '미디어(Media)'의 합성어로, 건물 외벽 등에 LED 조명을 설치해 미디어 기능을 구현하는 것을 의미한다.

반응형
반응형
성공적인 UX디자인을 위한 프로토타입 방법론


.


반응형

+ Recent posts