WON by ONE

목차 웹사이트 섹션 개념반응형 디자인 개념실습 _ 랜딩페이지 제작 웹사이트 섹션 개념 Section설명Header (Navigation) 페이지 상단에 위치하는 영역. 모든 페이지에서 공통 사용(로고, 내비게이션 메뉴, 로그인/회원가입 버튼 등)Hero Section 메인 섹션. 방문자를 사로잡는 헤드라인, 서브헤드라인, CTA, 비주얼 등 포함About Section 서비스나 브랜드에 대한 소개를 담은 영역.(브랜드 미션, 가치, 회사 소개 등)Feature Section 제품이나 서비스의 핵심 기능이나 혜택을 설명하는 영역Testimonial / Review Section 제품이나 서비스의 핵심 기능이나 혜택을 설명하는 영역FAQ Section 자주 묻는 지룬과 답변을 정리한 섹션Pricing ..

목차 노코드 툴을 배우는 이유Framer 인터페이스 Figma ↔ FramerPosition 개념실습 노코드 툴을 배우는 이유 ▶ 시간 단축 : 아이디어 → 실행까지 시간을 단축하여 속도를 폭발적으로 끌어올릴 수 있음 (기획 → 디자인 → 개발자 or 퍼블리셔 필요 → 비용/시간 소요 → 일정 지연) ▶ Framer 의 강점빠르게 디자인 → 웹으로 변환개발자 없이 빠른 MVP / 랜딩페이지 제작스타트업, 1인 브랜드, 프로토타입에 최적기업 블로그 제작 최적(CMS - 컨텐츠 관리 시스템) ▶ 개발자가 필요한 경우복잡한 기능(ex. 로그인, 결제, 사용자 데이터 처리)대규모 웹사이트(수십 ~ 수백 페이지 규모)기업 전용 솔루션 통합(맞춤형 백엔드 개발) ▶ 결론 : Framer 는 빠..

목차 사용성 테스트사용성 테스트 _ 준비사용성 테스트 _ 실행사용성 테스트 _ 결과 정리휴리스틱 평가 방법 사용성 테스트 ▶ 사용성 테스트 (Usability Test ; UT) : 잠재 사용자들에게 테스트를 진행하여 제품을 평가하는 기술 → 프로토타입이 있다면 제품 개발 단계 중 언제든 활용 가능유저가 제품이나 서비스를 실제 사용 시, 의도한 시나리오에 따라 테스크를 수행하는지, 문제점은 없는지 관찰하기 위해 진행유저가 제품이나 서비스를 사용할 때 어떤 생각을 가지고 어떤 혼란을 겪는지 파악 가능제품 개선 전 → 유저의 페인 포인트 파악 가능제품 개선 후 → 유저가 실제 어떻게 사용하는지 파악 가능 ▶ 사용성 테스트 중요성우리가 사용자가 아니기 때문에(우리는 오히려 프로젝트에 대..

목차 UX 기획 _ 문제정의 및 가설수립UX 기획 구체화 _ 유저 사용 맥락 반영UX 기획 구체화 _ 논리적인 흐름 설계UX 기획 문서화 _ 화면 설계서 및 QA 문서 UX 기획 _ 문제정의 및 가설수립 ▶ 문제 정의 : 유저 리서치를 통해 도출한 제품의 현재 문제점을 특정하는 단계해결해야 할 문제가 무엇인지 정의문제의 크기를 정량화된 수치로 파악왜 문제로 정의했는지 충분한 근거 필요문제 발생 원인에 대한 근거 데이터 파악 ▶ 가설 수립 : 특정 문제에 대한 가정을 명확하게 정의하고 검증 가능한 형태로 제시하는 단계가설 설정어떤 변경을 통해어떤 결과를 얻고자 하는지 담기가설 검증어떻게 검증할 것인지 검증 방법 선정가설을 검증할 수 있는 올바른 모니터링 지표 설정좋은 가설이란..목표 ..

목차 리서치 결과 정리어피니티 다이어그램유저 페르소나 작성 리서치 결과 정리 ▶ 리서치 결과 정리 Tip사용맥락사용 상황: 어떤 상황에서 유저들이 제품을 사용했나요? → 사용상황은 잠재적인 내적 동기로 이어질 수 있음사용 장소: 어떤 장소에서 유저들이 제품을 사용했나요? → 장소에 대한 유저의 태도가 제품사용경험에 영향사용 시간: 언제 유저들이 제품을 사용했나요? → 특정 유저 그룹의 경험을 반영하기도 함 → 사용 지속 시간이 = 사용자 경험의 척도유저인구 통계학적 특성: 인구 통계학적 특성이 제품 이용 특성과 관련성이 있나요? → ex) 나이, 성별, 소득 수준, 거주지, 가구 구성 라이프 스타일: 라이프 스타일이 제품 이용 특성과 관련이 있나요? → ex) 소비습관, 취미생활, 사회문..

목차 유저 리서치의 중요성리서치 종류와 목적데스크 리서치 : 마켓 리서치, 경쟁사 분석정성적 리서치 : 심층 인터뷰, 포커스 그룹, VoC 분석정량적 리서치 : 설문조사, A/B 테스트, 애널리틱스 유저 리서치의 중요성 ▶ 유저 리서치 : 유저의 행동과 통기를 특정 맥락에서 조사하여 개선에 유용한 인사이트를 얻는 활동 ▶ 유저 리서치의 중요성유저에 대한 이해도 강화유저의 행동과 동기 파악해결해야 할 새로운 문제 발견 가능효율적인 커뮤니케이션 도구의사 결정의 근거 마련사전에 문제를 미리 발견 → 수정비용 절감 리서치 종류와 목적 ▶ 유저 리서치의 종류 ▶ 유저 리서치 목적정성적 리서치: 소수 유저를 대상 → 모든 유저를 대표하기엔 어려움유저의 생각, 의견, 감정을 이해하여 왜(Wh..

목차 UX/UI의 개념UX/UI 디자인 프로세스Lean UX와 MVP데이터 드리븐 UX 트렌드실무 UX/UI 용어 UX/UI 개념 ▶ UX (User experience) - 사용자 경험 : 유저가 제품이나 서비스와 상호작용하는 과정에서 얻는 모든 경험 ▶ UI (User Interface) - 사용자 인터페이스 : 유저가 최종적으로 제품이나 서비스를 사용할 때 맞닿는 시각적 구성 요소 ▶ UX / UIUXUI와이어프레임컬러정보 구조도타이포그래피유저 리서치비주얼 디자인유저 페르소나그래픽 디자인사용성 테스트아이콘프로토타입디자인 시스템 UX/UI 디자인 프로세스 ▶ 더블 다이아몬드 (Double Diamond) : 문제 정의와 문제 해결에 초점을 둔 디자인 프로세스 모형Dis..

★ 4배수, 8배수 원칙 기억하기8: 조금 좁은 간격12/16: 보통 많이 쓰는 간격20: 섹션 사이의 간격★ 본문용 폰트는 고딕체를 사용하자!UI 디자인에는 프리텐다드만 써도 반은 간다.- Noto Sans는 행간이 넓어서 인쇄물에 더 적합하다.- Suit는 영문 사용에 주의해야 한다.- 나눔스퀘어는 특정 무드를 줄 때만 사용하는 것이 좋다.★ 자간은 건드리지 않는다!★ 본문 행간은 '16pt/행간 24pt'를 기억하자.본문 행간 150%를 기준으로 하되 .5 소수점이 나오면 조심하는 것이 좋다.제목 행간은 조금 더 좁게 135%~150%를 주면 좋다.관찰을 많이 하자. 폰트-행간을 짝수로 외워두는 것도 좋다.행간이 너무 넓으면 다른 문장처럼 보인다.행간이 너무 좁으면 가독성이 떨어진다.폰트마다 적합한..

UI 클론 디자인 클로닝을 통해 디자인 원칙, 컬러, 타이포그래피, 레이아웃 구성과 활용법을 학습 가능전반적인 UI 구조 파악디자인 역량을 키우기 위한 좋은 연습 방법인기 있는 트렌드를 파악하고 왜 인기가 있는지 분석 가능 UI 화면 구조 ▶ UI 화면 구조 : 큰 블록(페이지) → 작은 블록(컴포넌트) 순으로 설계하는 것이 핵심 ▶ 컴포넌트를 블록처럼 설계하면 좋은 점재사용성: 같은 컴포넌트를 여러 곳에 활용유지 보수 용이: 한 번의 수정으로 전체 UI에 반영 가능유연성: 추가, 삭제 혹은 위치 변경 시, 레이아웃에 큰 변화 없이 유연하게 적용 가능 * 섹션을 조립해서 페이지를 만들 때, 테트리스 블록처럼 빈틈없이 쌓는 것이 포인트

UI 디자인 핵심 ▶ 레이아웃 : 특정 영역 안에 텍스트, 이미지, 여백 등 디자인 요소를 시각적으로 배치하는 것 ▶ 그리드 : 정보와 요소를 체계적으로 배치하고 시각적으로 통일한 디자인을 하도록 도움 해상도 ▶ 해상도 = 가로 픽셀 수 * 세로 픽셀 수 : 화면의 정밀도를 나타내는 지표 ▶ 해상도 선정 기준 : 현재 스크린 점유율 기준으로 작업IOS : 375 * 812Android : 360 * 800 ▶ 일관된 디자인사용자가 모든 해상도에서 일관된 디자인을 경험할 수 있도록 노력해야 함다양한 해상도를 대응할 수 있도록 디자인하는 것이 중요 고정 / 가변 ▶ 고정 (Fix) : 해상도가 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것 ..