웹/UIUX 공부24 웹&앱 컬러 테마, 폰트 정하는 방법 웹이나 앱을 디자인 할 때, 컬러 테마와 폰트를 정해서 디자인 가이드를 수립한 뒤에 디자인을 하는 것이 효율적입니다. 컬러 테마를 정할 때는 서비스의 정체성을 잘 드러내야하고, 가독성이 좋아아하고, 컴포넌트 구조를 잘 드러내주어야 합니다. 폰트를 정할때도 기준선, 자간과 줄간격 등을 설정하여 가독성을 살리고 일관된 규칙을 주는 것이 좋습니다. 앱을 제작하는 경우라면, iOS에서 제공(권장)하는 시스템 색상을 참고하시는게 좋습니다. 구글 머티리얼 디자인은 따로 색상에 제한은 두지는 않지만, 기본 색상을 기준으로 일정 수치로 베리에이션 하는 것을 권장하고 있습니다. 구글 머티리얼 디자인 컬러 시스템이 자세하고도 이해하기 쉽게 나와있기 때문에, 이를 기반으로 해서 소개해드리도록 하겠습니다. 1. 컬러 테마에서.. 2022. 5. 22. 기기별 그리드 시스템 만드는 방법 기기별로 그리드 시스템을 만드는 기준, 그리드 시스템을 만드는 방법에 대해 정리합니다. 웹이나 앱을 디자인 할 때 모바일, 태블릿, 데스크탑 등의 기준으로 그리드를 나눠 관리하면 시각적으로도 일관적이며 반응형 설계에도 효과적입니다. 그리드는 레이아웃의 토대가 되는 화면 구성의 기본 중의 기본이니, 그리드를 이해하고 만드는 방법을 꼭 이해하셨으면 좋겠습니다. 이 글에서는 먼저 그리드 시스템이 무엇인지 이해하고, 기기별 구체적인 그리드 설정 기준과 만드는 방법에 대해 알아보겠습니다. 0. 그리드 시스템이란? 그리드는 디자인 영역을 구획하는 것을 의미합니다. 이러한 그리드 시스템을 사용하면 이미지, 문자, 여백 등이 어떻게 배치되느냐에 따른 효과를 고려해서 디자인을 할 수 있습니다. 배치에 질서와 구조를 줌으.. 2022. 5. 22. iOS 안드로이드 UI 디자인 패턴의 차이 iOS와 안드로이드의 UI 디자인 패턴의 차이에 대해 알아보겠습니다. 이러한 모바일 UI 디자인 패턴의 차이를 인식하고 포괄할 수 있어야 두 운영체제의 기기에서 모두 사용하기 좋은 UIUX를 디자인할 수 있습니다. 0. 모바일 UI 디자인 패턴이란? 모바일 UI 디자인은 곧 모바일 UI 패턴 디자인이라고 할 수 있습니다. 모바일 UI 디자인 패턴은 모바일 앱이나 시스템을 설계할 때 자주 발생하는 문제에 대한 해결책·가이드·템플릿이라고 할 수 있습니다. 이러한 모바일 UI 패턴은 기기의 운영체제에 따라 애플, 구글에서 제공하는 디자인 가이드에 따릅니다. 따라서 이번 글에서는 다음과 같은 내용을 다뤄보도록 하겠습니다. 먼저 각 운영체제와는 별도로, 모바일 기기를 사용하는 환경의 특징에 대해서도 잠시 알아보겠.. 2022. 5. 19. 와이어 프레임 만드는 방법, 순서 와이어 프레임을 만드는 방법과 순서에 대해 알아보고 피그마 등의 관련 프로그램도 소개합니다. 또한 구현 가능한 와이어프레임 작성을 위해 웹 표준, 모바일 운영체제 가이드라인 등의 정보도 모아보았습니다. 와이어 프레임의 시작 단계에서는 러프 스케치를 한 것을 올려놓고 어떻게 작동될지 살펴보면서, 실제 서비스에서 콘텐츠 간에 이동을 하는 것처럼 테스트해볼 수 있습니다. 그리고 점점 프로토타이핑 테스트를 하면서, 수립된 디자인을 제작해 완성품으로 만들어 갈 수 있습니다. 이전 글에서 와이어 플로우 차트에 대해 언급한 적이 있습니다. 와이어 프레임을 만들 수 있고 플로우 차트에 대한 이해가 있다면, 플로우 차트와 와이어 프레임을 혼합하여 만드는 와이어 플로우 차트를 만들 수 있습니다. 개인적으로 한 파일에 전체.. 2022. 5. 19. 안드로이드 iOS 모바일 해상도 기준 모바일 UIUX 디자인을 하기 위해서는 해상도와 밀도에 대해 이해해야 합니다. 이를 통해 아트보드를 만드는 기준이나 리소스의 크기를 정하고, 적절한 크기로 에셋을 추출 할 수 있습니다. 아래와 같이 기본적으로 통용되는 해상도 단위와 안드로이드, iOS 각각의 해상도 단위에 대해 알아보겠습니다. 0. 해상도란? 해상도는 화면이나 인쇄물에서 이미지가 몇 개의 픽셀로 표현되는지를 나타내는 정밀도이며, 해상도가 높을수록 선명합니다. 위키피디아 그래픽 디스플레이 해상도 규격 페이지를 통해 디스플레이별 해상도 규격은 어떤 종류가 있는지 참고해볼 수 있습니다. 1. 기본 해상도 단위 ppi(pixel per inch) 1인치당 몇 개의 픽셀이 있는지, 즉 화면의 1인치 면적당 표시되는 픽셀 수를 의미합니다. 픽셀은 .. 2022. 5. 19. 사용자 시나리오, 스토리 보드 수행 방법 사용자 시나리오와 스토리 보드에 대해 정리해보았습니다. 리서치 결과를 분석해서 모델링을 하고 아이디어를 도출했다면, 이제 디자인을 설계할 차례입니다. ※ 지금까지 웹디자인 > 기초 지식 카테고리에서 UIUX 디자인의 개념과 UIUX 디자인의 프로세스에 대해 다루었으며, 이 글은 이 카테고리의 마지막 글입니다. 디자인 리서치에서 얻은 데이터 그것을 바탕으로 구조화한 모델링 아이디어 도출을 바탕으로 디자인 설계를 진행하기 때문에, 이전 글을 보지 않으신 분들은 참고해주세요. UIUX 디자인 리서치 방법 UIUX 디자인 리서치의 종류와 프로세스, 기법, 결과를 분석하는 방법에 대해 정리해보았습니다. 디자인 리서치는 서비스의 특성, 사용자에 대한 이해, 사용자의 니즈를 파악해 해결함으로서 가치 cucat.tis.. 2022. 5. 19. UIUX 아이디어 도출 방법 3가지 아이디어를 도출하는 과정을 통해 서비스의 목표와 사용자 경험에 대한 데이터와 생각을 효과적으로 정리할 수 있습니다. 그러나 맨바닥에서 아이디어를 생각해내는 것은 아닙니다. 지난 글에서 디자인 리서치, 모델링(전략을 세우기 위한 모델을 만드는 것)에 대해 다루었는데, 아이디어 발상은 이 데이터를 기반으로 합니다. UIUX 디자인 리서치 방법 UIUX 디자인 리서치의 종류와 프로세스, 기법, 결과를 분석하는 방법에 대해 정리해보았습니다. 디자인 리서치는 서비스의 특성, 사용자에 대한 이해, 사용자의 니즈를 파악해 해결함으로서 가치 cucat.tistory.com UIUX 모델링 기법 4가지 UIUX 모델링 기법에는 여러 가지가 있지만 대표적으로 많이 사용되는 기법으로 어피니티 모델링, 페르소나, 멘탈 모델,.. 2022. 5. 19. 플로우 차트 만드는 방법 플로우 차트는 사용자가 서비스를 이용하는 동선을 나타내는 순서도입니다. 프로그래머에게는 상당히 익숙한 양식인데, 프로그래밍처럼 논리에 따라서 흐름이 진행되기 때문입니다. 지난 글에서 메뉴 트리와 정보구조도 등의 정보 구조 설계 방법에 대해 설명했었습니다. 플로우 차트는 이 데이터를 바탕으로 작성되니 참고하시기 바랍니다. 플로우 차트는 서비스의 흐름을 파악하고, 보완해야할 점을 찾을 수 있기 때문에 상당히 유용하게 사용할 수 있는 방법입니다. 이 글에서는 다음과 같은 내용을 다룹니다. 1. 플로우 차트 표준 기호 알기 플로우 차트를 그릴 때는 반드시 표준 기호로 그려야 합니다. 전 세계적으로 그렇게 하기로 약속한 내용이기 때문입니다. 플로우 차트의 표준 기호는 TCP 스쿨 플로우 차트 페이지에 설명되어 있.. 2022. 5. 18. 이전 1 2 3 다음