본문 바로가기

부트캠프교육중/웹16

Figma Figma -UI디자인 & 프로토타이밍 툴 -개인에게는 모든 기능을 무료로 제공하고있다. 특징 1.실시간 협업가능 -한 화면에서 여러명이 동시에 작업할수있는 기능을 제공한다. 2.다양한 환경 지원 -웹브라우저 기반 프로그램이기때문에 브라우저만 사용할수있다면 어떤 환경에서든 사용이 가능하다. -mac, window, linux 등 가리지 않는다. -필요에 따라 프로그램을 직접 설치해서 사용할수도 있다. 3.자동 저장 및 버전 관리 -자동저장기능을 제공한다. 히스토리기능도 있어 버전관리에도 유리하다 4.다양한 무료폰트 지원 -구글폰트를 활용할수있어 폰트를 별도로 설치할 필요가 없고, 폰트가 없어서 화면이 깨지는 현상도 발생하지 않는다. 구글폰트 이외에도 사용자 PC에 저장된 로컬폰트를 불러와서 사용할수도있다.. 2023. 2. 15.
와이어프레임 & 프로토타입 와이어프레임과 프로토타입은 제품 개발 이전에 화면 구조를 설계하기 위해 작성하는 것이라는 공통점을 가진다. 작성시점, 작성목적 완전히 다르다 #와이어프레임(wireframe) - 선(wire)으로 틀(frame)을 잡는다 -제품 기획단계에서 페이지를 어떻게 구성할것인지 구조를 잡기위한 목적으로 만든다. -피델리티(fidelity): 와이어프레임을 표현할때의 품질수준을 표현하는 전문용어 1. Low Fidelity Wireframe (Lo-Fi Wireframe) -손으로 빠르게 그린 수준의 와이어프레임 -작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉽다. -아이디어를 구체화 시키며 큰 그림을 잡는데 좋다. 2.Middle Fidelity Wireframe (Mid-Fi Wirefr.. 2023. 2. 15.
UI/UX 사용성 평가 ui/ux사용성 평가기준중 하나인 제이콥 닐슨의 10가지 사용성 평가기준(Jakob’s Ten Usability Heuristics) *서비스중인 애플리케이션을 평가하기위한 목적으로도 사용할수있지만, 제품 설계 단계에서 더 완성도있는 애플리케이션을 기획하기 위해서도 사용할수있다. 10가지 원칙을 지속적으로 확인하면 사용성과 효율성을 크게 높일수있다. # 여기서 heuristic이란? -체험적인 이라는 뜻으로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론을 말한다. 1.시스템 상태의 가시성(Visibility of system status) -합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다. -피드백이 존재하나요 / 피드백이 즉시 제공되나요 / 피드백이 .. 2023. 2. 15.
User Flow #User Flow (사용자 흐름) -사용자가 제품에 진입한 시점을 시작으로 취할수있는 모든 행동을 뜻한다. -다이어그램을 그려서 정리한다. #User Flow 다이어그램 작성법 사용자흐름을 다이어그램으로 작성할때, 기본적으로 세가지 요소를 사용한다. 이외의 요소를 필요에 따라 추가하여 사용해도 좋지만, 이 세가지 요소는 거의 필수적으로 사용하게 됩니다. 1.직사각형: 사용자가 보게될 화면 (예: 회원가입페이지) 2.화살표: 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표 3.다이아몬드: 사용자가 취하게 될 행동 (예: 버튼클릭) #User Flow 다이어그램을 그리면 좋은 이유 1. 사용자 흐름상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할수있음 2. 있으면 좋은 기능을 발견하여 추가하거나.. 2023. 2. 15.