UXUI

온라인에서 사용할 수 있는 UX/UI 디자인 및 프로토타입 제작을 위한기능들을 제공하는 디자인 툴로 클라우드 기반 웹 브라우저에서 사용할 수 있으며,가볍고 실시간 협업이 가능하다는 장점이 있습니다.피그마 사이트 바로가기이용 흐름 설계를 뜻한다. 사용자 입장에서 작업의

피그마 프로토타입 화면 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일(클릭, 드래그, 스크롤)로 이동할 것인지 목업으로 보여주는 것 핫스팟(Hot Spot) : 인터랙션이 시작하는 위치 커넥션(Connecti

제품이나 서비스를 사용하는 사용자가 느끼는 전반적인 경험을 뜻함.사용자 경험(서비스 이용 과정, 감정, 태도, 인식 등)의 모든 측면을 고려해 기획하고 구현하는 일사용자의 요구사항과 행동을 고려하여 제품이나 서비스를 구성하는 것사용자 경험을 분석하고 반영한 제품이나 서

1. UI/UX 디자인 아티클 스터디 출처 : 알아두면 쓸모 있는 웹 접근성 > ### ✅ 핵심내용 정보의 누락이나 왜곡을 방지하고 정보의 접근을 보장하는 것이 ‘웹 접근성’이라고 한다. 웹 접근성은 모두가 평등하게 이용할 수 있는 웹 환경을 위해 꼭 필요한 요소이

1. UI/UX 디자인 아티클 스터디 출처 : 신입 UX디자이너로서 취업하기 위한 필수 능력 > ### 🤔 신입 UX디자이너에게 요구되는 능력은 무엇인가? 사용성과 접근성을 고려한 디자인 레이아웃 디자인 타이포그래피 와이어프레임 및 프로토타이핑 필수적인 사용자 조사

출처 : 시선을 사로잡는 디자인, 3가지면 됩니다.하나의 콘텐츠를 하나의 속성으로 바라보고 이것을 도형의 모양으로 그룹화한다. 이때 최대한 유사한 것들끼리 묶어준다.정보 영역과 이미지 영역을 명확히 구분하여 시선의 분산을 최소화하고 정보 전달의 몰입도를 높일 수 있다.

지난 일주일 동안 가장 인상 깊었던 배움에는 뭐가 있었지?그 배움까지 다가가는데 어떤 어려움이 있었지?결과적으로, 현재 나의 상태는 어떻게 되었지?이 상태에서 다음 일주일을 더 잘 보내려면 무엇이 필요할까?The four Fs (참고 링크)현재 웹/앱에는 어떤 서비스들

출처 : 팁스터, 놀랍도록 쉬운 피그마 그래픽 플러그인이미지1클릭 한 번으로 이미지의 배경을 지워주는 플러그인이다.플러그인 다운로드 하기이미지2 이미지2 참고픽셀 이미지 생성 플러그인으로 80~90년대 컴퓨터 그래픽 느낌의 픽셀 패턴과 컬러칩을 만들 수 있다.플러그인

좋은 UX를 제공하는 제품에 숨은 비법UI는 UX를 위한 매개체로 화면이나 버튼과 같이 명확한 물리적인 대상이 존재하며, UX는 사용자가 UI를 보고 조작하면서 생각하고 느끼는 심리적인 반응의 결과.UX는 사용자를 이해하고 배려하는 것이 중요함.좋은 UX는 고객의 만족

2. 미션) 컴포넌트 만들기 ✅ 웹사이트 : 현대카드

UI/UX 기획자가 이야기하는 사용자 리서치 방법https://yozm.wishket.com/magazine/detail/2285디자인 학술적 관점에서의 연구에 해당하는 모든 활동디자인에 UX의 개념이 포함되면서 그래픽 연구뿐만 아니라 사람에 대한 연구와 조사

출처 : UX디자인에서 벤치마킹의 숨겨진 힘"훌륭한 예술가는 복사하고, 위대한 예술가는 훔칩니다.” - 파블로 피카소 (사실 이 말은 스티브잡스가 피카소가 한 말이라고 오인 발언함.) 누가 이 말을 했든, 요지는 예술은 다른 예술가의 생각들로부터 영감을 받는 것이 전부

서비스명 : 마켓컬리서비스 소개 : 식재료, 뷰티, 라이프스타일 등의 상품을 판매하는 앱 커머스서비스 선정 이유 : 먹거리를 사기도 하고, 화장대를 채우기도 하고, 집에 필요한 것들을 찾아보기도 한다. 앱이 사용하기 편하고 본능적으로 들어가게 된다. 그래서 요즘 제일

Mockup Plugin을 통해 목업이미지를 제작Unsplash Plugin을 통해 알맞는 이미지를 활용 Material Symbols Plugin을 통해 알맞는 아이콘을 활용wireframe designer Plugin에서 원하는 와이어프레임 검색을 통해 와이어프레임

UX 디자인을 위한 휴리스틱 평가https://www.emotion.co.kr/magazine/41/휴리스틱 평가는 사용성을 평가하는 것, 제품이 인간의 인지적 오류를 줄여줄 수 있는 방향으로 디자인되었는지, 유용한 정보를 포함하며 사용자가 제품 이용 과정에서

🔗 출처 모바일 앱 온보딩에서 컴포넌트와 적용법에 대해 https://brunch.co.kr/@potatohands/293 ✅ 요약 🔸 온보딩이란? 사용자가 앱을 접하는 첫 번째 지점. 새로운 인터페이스, 특정한 작업(플로우) 그리고 UI요소들을 익숙하게 만

제작에 앞서 필요한 키트를 다운받았다. 최대한 유명하고 다운로드 수가 많은 걸로 골랐다.iOS 16 UI Kit : 아이폰 UI 키트 모음Tetrisly Icon Library : 아이콘 모음큼직한 레이아웃 부터 제작이미지는 플러그인 'Unsplash'를 사용, 아이콘

MVP 디자인: 디자이너가 말하지 않는 접근 방식스타트업이 제품의 가장 중요한 기능에 집중하여 개발하는 초기 모델. 이는 고객의 기본적인 요구를 충족시키는 동시에, 시간과 비용을 최소화하여 시장 반응을 빠르게 측정할 수 있는 방법을 제공.제품 아이디어를 테스트하는 간결

1차 검색 바 및 즐겨찾기 레이아웃 제작 (오토레이어 사용)아이콘은 플러그인 'Meterial Symbols'를 사용상단 메뉴바와 콘텐츠 구성 레이아웃 제작 (오토레이어 사용)이미지는 플러그인 'Unsplash'를 사용텍스트 작성 및 완성작

네이버, 하이퍼커넥트를 통해 생성형 AI광고 상품과 검색 서비스 큐:를 모바일에 도입Galaxy AI is Here, 삼성 디바이스로 확대 (AI카메라, 실시간 통역, 긴 문서 요약 정리)피그마, 어도비(Firefly-이미지 제작), Canva(Magic Design-

디자인 작업을 빠르게 하기 위해 자주 사용했던 서비스미리캔버스 : 템플릿을 활용하여 디자인 작업을 구성하는 웹 서비스화면 구성메인 화면은 직관적인 버튼으로 ‘바로 시작하기’와 ‘템플릿 보러가기’로 구성템플릿별로 다양하기 때문에 복잡할 수 있지만 메인에는 인기 카테고리

UX디자이너로 성장하기 위해 알아야 할 3가지같은 목표를 이루기 위해 기획자와 엔지니어의 업무를 이해BM, 비전, 마케팅, 전체예산, 마진 등 눈에 보이는 서비스와 숨은 운영방식 등을 이해하고 조화롭게 받쳐 주기 위한 방법왜, 어떻게 무엇을 생각하며 플로우를 바꿔보기도

화면 구성오더를 진행하기 위한 기능들로만 구성된 메인 화면전체적으로 텍스트가 조금 작다고 느낄 수 있을 것 같다.픽업 오더 주문 시 가까운 매장들을 지도로 보고 싶었다. 직접 클릭해야 보이고 지도로 볼 수 있는 건 다른 메뉴인 매장찾기로 가야 볼 수 있었다.텍스트를 조

웹과 모바일 형식의 와이어프레임 제작 후 모바일로 진행하기로 결정작업해주신 팀원 최고!!

팀 소개 페이지에 들어갈 우리 팀의 약속과 목표, 특징들을 전부 만들었다.

진척도, 각자의 일일계획, 팀이 어떤식으로 진행하고 있는지 등을 보여줄 수 있게 업로드저번 시간에 끝내지 못한 팀원(곰돌이님)의 프로토타입 진행 (이미지 슬라이드, 캐러셀)나름 혼자 작업해봤는데 꽤 복잡했다. 작업 내용 공유받아야겠다!작업은 어느정도 완성되었고, 프로젝

발표자료 제작 목차 팀 및 팀원소개 와이어프레임 컨셉 & 진행사항 & 결과 제작과정 및 완성본 프로토타입 및 진행이슈

🔗 출처 : 피튜브 - 컴포넌트 기초편 / 스왑인스턴스편 / 프로퍼티편 / 베리언트편 1.컴포넌트(Component) > 마스터 컴포넌트 (원본) > 인스턴스 (복제본) UI의 구성을 저장하여 복제, 변형을 용이하게 하는 기능 컴포넌트는 레고 같은 것 : 화면에

이번 주 경험한 모든 일새로운 팀 진행이번주는 팀이 생성되고 미니 프로젝트를 진행했는데 처음 진행을 어떻게 시작해야하는지에 대한 어려움이 있었다.팀 프로젝트 제작 및 기획와이어프레임 부터 기본적인 커리큘럼을 따라 진행했고, 같은 결과물을 만들기 위한 프로젝트여도 각각의

팀 소개 페이지에 대한 발표를 진행하고 튜터님께 피드백을 받음.기존 개인 상세페이지에서 채팅 형식의 QnA를 각 팀원마다 다른 질문으로 넣어보는건 어떨지채팅의 질문과 답이 음슴체로 끝나것에 대한 의문개인적으로 다시 레이아웃을 구성해봤다. 한 페이지에서 해당 인물에 대한

UXUI 입문 강의 1차 요약정리 UX/UI : 제품을 사용하는데 수단이 되는 것을 'UI', 사용자가 이용하면서 느끼는 모든 경험을 'UX'라고 함 HIG / CX / BX 용어 : 인간과 컴퓨터의 상호작용에 연구하는 것을 'HIG', 브랜드를 처음 만나는 순간부

UX/UI 입문 강의 2차 요약정리 디자인씽킹은 사용자에 대한 이해를 기반으로 문제를 찾고, 제품을 만들어 검증하는 프로세스다. 디자인 씽킹에는 5단계가 있다. '①공감하기, ②문제정의하기, ③아이디어발산하기, ④프로토타입만들기, ⑤테스트하기'인데 순차적으로 전부 진

제품팀이란? 제품을 각자 만들기 위해 각자 다른 전문적인 능력을 갖춘 사람들이 모인 팀을 말한다. 보통 1명의 제품관리자, 1명의 디자이너, 2명의 엔지니어로 구성되는 최소 조건이다. 조직은 3가지로 ①목적을 달성을 위해 여러 직무의 사람들로 구성된 '목적조직', ②유

디자인툴에는 ①인터페이스 디자인 툴(피그마, 스케치(MacOS기반), XD), ②그래픽 디자인 툴(포토샵, 일러스트레이터), ③3D 그래픽 디자인 툴(블렌더, 시네마4D), ④모션 그래픽 디자인 툴(프리미어, 애프터이펙트)가 있다.비트맵과 벡터 방식비트맵 방식은 픽셀이

디자인 원칙은 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것이다. 종류는 ①게슈탈트 법칙, ②UX 비주얼 디자인 원칙, ③UX/UI 심리학 법칙, ④기업의 디자인 원칙이 있다.①게슈탈트 심리학은 사람이 이미지를 인식할 때 주변에 있는 요소간의 관계와

여러 사례를 상세하게 분류해 생각해 보고 도움이 될 만한 부분을 찾아보는 과정으로 다양한 사례를 수집하고 장단점이나 이유를 찾고 분석을 통해 얻은 인사이트를 정리하는 것.레퍼런스 분석을 통해 영감을 얻고 좋은 디자인을 구분하는 지식을 쌓고 스스로 생각하는 힘을 기를 수

11번가라는 이름은 '1' 고객과 '1' 판매자가 서로 만나(1+1)는 쇼핑 플랫폼11번가는 고객에게는 질 좋은 제품을 빠르게 제공하며 긍정 경험을 높이기 위해 익일배송인 ‘슈팅배송'을 운영경쟁력을 키우기 위해 직매입 사업인 ‘아마존 직구 서비스'를 제공하는데 이 서비

제품의 주요 사용자는 누구인가요?40대 직장인, 주로 여성보다는 남성이 많이 이용한다.사용자의 어떤 문제를 발견했나요?11번가 앱을 사용하는데 이탈률이 높다왜 문제라고 생각했나요?한 눈에 파악되지 않는 상품들터치영역에 비해 아이콘이 다소 작음그룹화가 되어 있지않고 시각

피그마는 현재 가장 강력한 디자인 툴이자, 와이어프레임부터 핸드오프 과정 전부를 하나의 툴에서 할 수 있는 효율적인 툴언제나 어디서나웹에서도 사용할 수 있어 접근성이 좋고, 맥과 윈도우 모두 사용할 수 있다.디자인부터 개발까지 올인원디자인 툴로 시작했지만, 지금은 개발

프레임은 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, 컨테이너(Container)라고도 불러요.그룹은 여러 개체를 하나로 담는 기능그룹 기능은 여러 요소를 한번에 담아서 움직일 때 주로 사용

디지털 화면(TV나 일반적인 모니터)을 디스플레이라고 하며, 픽셀(Pixel)로 이루어짐해상도는 디스플레이의 선명한 정도, 픽셀의 개수를 의미해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커짐화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는

개인과제첫 개인과제가 진행되었다. 강의에서 진행했던 내용들을 복습하듯이 실제로 진행해보면서 재밌다가도 머리아프고 어렵다가도 완성한 내가 뿌듯했다.강의(UX/UI 디자인 입문)디자인의 원칙, 디자인 씽킹, 디자인 툴, 레퍼런스 분석 등 디자인을 하는데 있어 필요한 생각,

✳️ 컴포넌트 1. 컴포넌트의 개념 컴포넌트는 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품 2. 컴포넌트의 모양이 아니라 기능이 중요한 이유 우리는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문 따라서 UI의 목적, UI의 기능에 초점을 두고 공부

컴포넌트를 모아 또 컴포넌트를 만드는 경우를 합성 컴포넌트(Compound Component)라고 함. 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있다.화

차이점들을 잘 알고 적합한 UI를 설계하는 것이 중요웹과 앱의 특성 비교1) 페이지 이동 : 웹은 주소를 입력해서 어디든 접근이 가능하지만 앱은 이동 불가2) 뒤로가기 : 앱은 상단 아이콘 등 버튼을 눌러 이동하지만 웹은 브라우저 자체 기능을 통해 이전 화면으로 돌아가

1) OS 별로 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요. 동일한 앱의 UI가 안드로이드 기기와 아이폰에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의2) 웹과 앱에 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요.동

디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것으로 프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑이라고 함Lo-fi(Low fidelity) : 전체적인 흐름을 빠르게 맞춰볼 수 있는 낮은 단계Hi-fi(High fid

스크롤 컨테이너를 활용한 이미지 슬라이드=캐러셀(Carousel) 만들기스마트 애니메이트를 활용한 어코디언=폴더블(foldable)=콜랩서블(collapsible) 만들기스마트 애니메이트를 활용한 어코디언=폴더블(foldable)=콜랩서블(collapsible) 만들기

강의(Figma 활용법 2)팝업과 모달의 차이, 다양한 컴포넌트의 규칙/가이드라인을 자세히 알게 되었다.다양한 환경에 따른 UI 차이를 생각해보고 기획을 시각화하는 방법들을 알게 되었다.프로토타입을 어떻게 활용하면 좋은지 자세히 알게 되었다.팀 아티클 스터디 진행사전캠

Figma 활용법 개인 과제 : 디자인 시스템 및 프로토타입 제작하기 식료품 및 생필품을 구매할 수 있는 가상의 커머스 앱 UI를 설계 위 UI 앱의 프로토타입 제작 화면 디자인과 프로토타입에서 활용한 색상 및 폰트 스타일, UI 컴포넌트로 디자인 시스템 제작 두번째

오늘도 디자인 시스템 작업하다 끝이 났다. 내일은 무조건 60%까지는 마무리하기!!!컬러, 폰트, 버튼, 아이콘 스타일

드디어 디자인 시스템 작업마무리 완료!홈화면, 상품목록화면을 작업카테고리 탭에 우측에 하얗게 그라데이션 주는 것카테고리 탭의 포지션을 Sticky로 변경하는 것이미지 슬라이드에서 이미지를 드래그해서 변경하는 프로토타입이 세가지가 지금 잘 안된다.... 마무리 전에 피드

오늘 드디어 어느정도 마무리가 되었다.98% 정도?컴포넌트들을 만들어두면서 시작했다. 수정이 한 번에 되서 참 좋은 기능이다. 피그마로 프로토타입을 제작하는데 어려운 것을 알게되었다. 내가 하고 있는 부분이 잘 하고있는지 잘 되고 있는지 궁금할때가 종종 있다.✳️ 기

팀 편성또 새로운 팀이 생성되었다. 하루이틀만에 잘 맞을 것 같은 느낌이 들었고 편하게 이야기도 하고 유튜브 광고때문에 음악을 듣기 힘들다고 했더니 직접 음악방송까지 열어주셔서 너무 좋았다.팀 아티클 스터디 진행이번 팀에서도 아티클 스터디를 진행했는데 팀마다 분위기도