반응형 앱디자인5 04. 반응형 웹/앱 UI 디자인 따라하기 반응형 웹이란 데스크탑, 태블릿 PC, 모바일 모두에 최적화된 웹사이트 화면을 구현하는 기법입니다. 이번 예제는 반응형 앱을 다룹니다. 반응형 웹은 언제든지 모형을 변형하고 템플릿을 자유자재로 좌우 양쪽 끝의 최소 크기와 최대 크기를 고려해서 UI를 만들어야 합니다. 반응형 웹은 다음과 같은 장점이 있습니다. 간편한 유지보수: 모바일 버전과 데스크탑 버전의 형태를 함께 고려해서 최적화된 UI를 만들면 HTML/CSS 작업도 수월하고 유지보수를 할 때 하나만 수정하면 자동적으로 모바일, 태블릿, 데스크탑에 맞게 수정됩니다. 모바일 점유율 증가: 사용자가 스마트폰으로 인터넷을 접속할 때 반응형 웹은 기기 종류와 상관 없이 편리한 접근성을 보장합니다. 마케팅 이점: 웹과 앱에서 서비스를 좀 더 원활하게 보여줄.. 2022. 5. 31. 03. SNS 앱 UI 디자인 따라하기 SNS 바이럴 서비스 디자인 UX 분석 실생활에서 많이 쓰이는 SNS(social network service) 앱은 웹상에서 사용자 간 인적 네트워크를 형성할 수 있게 해주는 서비스를 말합니다. SNS는 페이스북, 인스타그램, 트위터, 네이버 블로그처럼 공개형과, 카카오톡, 라인, 텔레그램, 위챗 같은 메신저형으로 구분됩니다. 다수의 참여자가 접속해 사용하는 SNS 앱은 글자의 가독성과 빠른 접근성이 UX 측면에서 가장 중요합니다. 페이스북과 인스타그램은 같은 회사에서 서비스되고 있으며, 필드에 글과 사진을 올려서 사람들과 소통할 수 있습니다. 사용자는 주로 자신의 일상 생활, 취미 등 다양한 콘텐츠를 사람들과 공유하거나 전하고 싶은 메시지를 업로드할 수 있습니다. UI 디자인을 살펴보면 페이스북은 글.. 2022. 5. 30. 02. 디자인에 움직이는 애니메이션 적용하기 디자인에 움직이는 애니메이션 적용하기 디자인 작업이 완료되면 Adobe XD에서 강력한 기능인 프로토타입을 제작할 수 있습니다. 인터랙션을 지정한 모션 및 실제 제어할 수 있는 화면 전환 요소를 다룹니다. [프로토타입] 탭의 화면은 다음과 같습니다. ① 디바이스 미리보기: Adobe XD 모바일 미리보기 앱을 다운로드하고 이를 모바일 화면에서 공유할 수 있습니다. ② 데스크탑 미리보기: 프로토타입에서 만들었던 인터랙션 디자인을 재생할 수 있습니다. ③ 화면 인터페이스를 확대/축소할 수 있습니다. ④ 트리거: [탭], [드래그], [키 및 게임 패드], [음성] 등 프로토타입 인터랙션을 개시하는 요소를 선택합니다. ⑤ 유형: [전환], [자동 애니메이트], [오버레이], [다음으로 스크롤], [이전 아트보.. 2022. 5. 29. 01. HTML+CSS를 고려한 UX/UI 디자인 웹 디자인의 기본 요소 웹 디자인을 설계할 때 모든 요소는 100% 화면 크기를 기준으로 고려해야 합니다. 특히 기본 요소는 포토샵 기준으로 해상도가 72 ppi가 된다는 점을 숙지해야 하며, 이미지 확장자도 그 특성에 맞게 선택해야 합니다. 가령 앞에서 설명된 JPG, GIF에서 사진처럼 색상이 많이 사용된 이미지라면 JPG를 사용해야 하고, 그렇지 않고 몇 가지 단색이 사용된 이미지라면 GIF로 사용하기를 권합니다. 모바일 인터페이스에서는 JPG보다 화질이 더 좋고 투명도 표현을 지원하는 PNG 파일로 저장할 때도 많습니다. 또한 웹상에서 그래픽 해상도가 높으면서도 용량이 최저인 SVG도 많이 사용합니다. 다음으로 웹에서 HTML, CSS로 코딩하는 색상은 빛의 3원색인 빨간색, 초록색, 파란색을 조.. 2022. 5. 27. 00. <기초 탄탄 UX/UI 디자인을 위한 Adobe XD> 연재 예고 웹 & 앱 디자인 기초부터 UI 디자인, 프로토타입 제작까지! 새로운 디바이스가 나타나고 디자인 트렌드가 바뀌는 시장에서 새로운 콘텐츠를 만들기 위해 늘 새롭게 작업해야 하는 고충을 저는 누구보다 잘 알고 있습니다. 이러한 변화에도 불구하고 쉽게 변하지 않는 부분이 있습니다. 보통 우리는 “기본기가 탄탄하다”라는 말을 하는데요. UX/UI 디자인 역시 탄탄한 기초 이론을 바탕으로 실습한다면 어떤 어려움이라도 극복할 수 있습니다. 물론 디자인 트렌드나 브랜드 변화를 열린 마음으로 탐색하고 디자인 감각을 키우는 노력까지 한다면 더할 나위 없겠지요. IT 분야에서는 새로운 스마트폰의 출시뿐 아니라 다양한 웨어러블 디바이스가 나타나고, 이제는 메타버스라는 새로운 가상 공간이 대두되고 있습니다. 그러나 사용자를 .. 2022. 5. 26. 이전 1 다음 반응형
