본문 바로가기

웹122

와이어 프레임 만드는 방법, 순서 와이어 프레임을 만드는 방법과 순서에 대해 알아보고 피그마 등의 관련 프로그램도 소개합니다. 또한 구현 가능한 와이어프레임 작성을 위해 웹 표준, 모바일 운영체제 가이드라인 등의 정보도 모아보았습니다. 와이어 프레임의 시작 단계에서는 러프 스케치를 한 것을 올려놓고 어떻게 작동될지 살펴보면서, 실제 서비스에서 콘텐츠 간에 이동을 하는 것처럼 테스트해볼 수 있습니다. 그리고 점점 프로토타이핑 테스트를 하면서, 수립된 디자인을 제작해 완성품으로 만들어 갈 수 있습니다. 이전 글에서 와이어 플로우 차트에 대해 언급한 적이 있습니다. 와이어 프레임을 만들 수 있고 플로우 차트에 대한 이해가 있다면, 플로우 차트와 와이어 프레임을 혼합하여 만드는 와이어 플로우 차트를 만들 수 있습니다. 개인적으로 한 파일에 전체.. 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.
UIUX 모델링 기법 4가지 UIUX 모델링 기법에는 여러 가지가 있지만 대표적으로 많이 사용되는 기법으로 어피니티 모델링, 페르소나, 멘탈 모델, 사용자 여정 지도가 있습니다. 모델링은 디자인 리서치의 결과를 의미에 따라 구조화하는 방법입니다. 이는 UX 디자인 프로세스 과정 중 하나이며 전략을 수립하기 위한 모델을 만드는 것을 뜻합니다. 전체 UX 디자인 프로세스가 궁금하다면 이전 글에 정리해두었으니 참고해주세요. UX 디자인 프로세스(순서와 방법) UX 디자인의 순서와 방법론을 정리했습니다. 큰 회사라면 UX 디자인 프로세스가 있을 수 있지만, 소규모 회사나 개인의 경우에는 UX 디자인을 어떻게 해야할지 막막할 수 있습니다. 어떤 일이든 cucat.tistory.com 그럼 지금부터 자주쓰이는 UIUX 모델링 기법을 하나씩 소.. 2022. 5. 17.
UIUX 디자인 리서치 방법 UIUX 디자인 리서치의 종류와 프로세스, 기법, 결과를 분석하는 방법에 대해 정리해보았습니다. 디자인 리서치는 서비스의 특성, 사용자에 대한 이해, 사용자의 니즈를 파악해 해결함으로서 가치를 얻기 위해 하는 활동입니다. UX 리서치도 여기에 포함됩니다. 그러나 명심해야 할 것은 리서치를 이용해 어떠한 방법론을 얻을 수 있지만, 어디까지나 창의적인 발상을 제약하지 않는 선에서 이용해야할 도구라는 것을 말해두고 싶습니다. 참고로 디자인 리서치는 UX 디자인 프로세스 과정 중 하나입니다. 전체 과정이 알고싶다면 다음 글을 참고해주세요. UX 디자인 프로세스(순서와 방법) UX 디자인의 순서와 방법론을 정리했습니다. 큰 회사라면 UX 디자인 프로세스가 있을 수 있지만, 소규모 회사나 개인의 경우에는 UX 디자.. 2022. 5. 17.
UX 디자인 프로세스(순서와 방법) UX 디자인의 순서와 방법론을 정리했습니다. 큰 회사라면 UX 디자인 프로세스가 있을 수 있지만, 소규모 회사나 개인의 경우에는 UX 디자인을 어떻게 해야할지 막막할 수 있습니다. 어떤 일이든 순서와 방법을 안다면 일의 프로세스가 생기며, 능률이 올라간다고 생각합니다. 따라서 이 글에서는 UX 디자인을 할 때 어떤 순서로 해야 하고, 어떤 것들을 준비해야 하는지 UX 디자인 프로세스의 전체적인 흐름을 파악해 보도록 하겠습니다. 단지 UX 디자인에 국한된 이야기가 아니라 웹, 앱, 소프트웨어, 게임 등 모든 서비스에 통용되는 프로세스이므로 한번 알아두면 쓸데가 많습니다. UX 디자인은 사용자를 관찰하며 거시 환경(당장 보이는 것)과 미시 환경(겉으로 드러나지 않는 것), 내부 환경 등을 고려해야 합니다. .. 2022. 5. 17.

티스토리툴바