본문 바로가기

전체 글31

[UI 디자인 기초]레이아웃에 대한 이해 ㅣ플러스 엑스 UI 강의 후기 08ㅣ 02. 3-2 레이아웃에 대한 이해 레이아웃이란, 효과적인 레이아웃을 만드는 게슈탈트 법칙. '레이아웃이란?' 그리드를 기반으로 영역 배치, 여러 디자인을 효과적으로 정리하는 것. '레이아웃' 유사한 맥락으로 화면을 디자인하여 어떤환경에서도 동일한 서비스를 경험하게 하는 것. '균형과 구조' [균형] 정적인 화면 균형 [구조] 추상적인 공간 구조 레이아웃의 구성 = 오브젝트의 순서, 위치에 따라 단으로 나눌 수 있음 [1단] 가장 간단한 레이아웃. - 하나의 컬럼으로 이루어짐. - 디자인 자유도 높음. 한 페이지에서 스토리흐름에 따라 보여주기 좋음. - 모바일확장 쉬움 [2단] - 두개의 컬럼. - 1단 보다 확장된 콘텐츠 배열로 정보 제공 가능. - 모바일로 확장 .. 2023. 7. 28.
[UI 디자인 기초] 그리드에 대한 이해 ㅣ플러스 엑스 UI 강의ㅣ 그리드 시스템 그리드을 쓰는 이유와 해상도에 따른 적용 방법, 유의점을 알려줄게 목적 사용자가 시각적으로 이해하는 디자인을 만들어야 한다. 1. 규칙과 기준 세우기 2. 사용자가 가진 해상도에 적용된 유연하면서 정돈된 UI구조를 설계 해야 함. => 그리드를 통해 설계한다. 비핸스 / 핀터레스트 / 드리블 / awwwa 참고 벤치마킹 함. '그리드에 대한 이해 ' [그리드 Grid] 디자인에 규칙을 부여하는데 필요한 가이드 - 심리: 기준에 맞춰 정렬되어 있으면 안점감 아름다움을 느낌. 디자인 작업 전반에 동일한 그리드 시스템을 적용 하여 '그리드 시스템'이라고 부름 그리드 시스템을 따르면 일관성을 가지게 됨. UI 그리드 시스템 =/= (다름) 인쇄물인 편집 디자인 UI 온라.. 2023. 7. 28.
[UI 디자인 기초] 해상도 ㅣ플러스 엑스 UI 강의 후기 07ㅣ 02강_02-03: 다양한 디바이스에서 해상도 정하는 기준 요약: 환경에 따라 달라지는 해상도. 어떻게 디자인 하면 좋을까? 해상도를 정하는 두가지 사항 1. 파트너사가 명확한 해상도의 기준을 제시하는 경우 2. 플러스엑스 자율 1 의경우 파트너사가 제안한 해상도가 트렌드에 떨어지고 장점보다 단점이 많을 때, 파트너사를 설득하여 기본 해상도를 정함 [기준해상도 설정 방법] - 서비스의 성격에 맞는 환경(PC,모바일)이 무엇인지 고려 ex) 회사 홍보 사이트 = pc / 이커머스 플랫폼 = 모바일 - 메인 작업이 될 플랫폼이 무엇인지 고려 웹: pc와 모바일 모두 고려 / 앱: 안드로이드, IOS 고려 - 앱: 푸시알림, 런처아이콘, 위치정보, 제스쳐 기능 사용 가능.. 2023. 7. 24.
[UI 디자인 프로세스] 2 - 04. PR 페이지 만들기 ㅣ플러스 엑스 UI 강의 후기 05ㅣ 02_04. 요약: 포폴 정리겸 디자인 사이트에 올릴 작업물을 만드는 방법 비핸스와 자사 홈페이지에 작업물을 올리고 홍보를 해. PR 페이지 만으로 홍보가 되기 때문에 공을 들여 작업해. 어떻게 작업하는지 알려줄게. PR이 왜 중요 한가? 영업 수단이 된다. 다른 디자이너들에게 귀감이 되고 파트너사에 홍보하기 위해 업로드 한다. PR 페이지 만드는 방법 [PR 페이지 디자인] 프로젝트를 작업한 UI와 UX디자이너 한명씩 작업. UX디자이너가 전체적인 흐름을 만들고 UI 디자이너가 디자인 전개 방법 Project Overview Interview & Research Insight UX/UI Concept Page Design 자사 웹 사이트 용 / 비핸스 업로드용으로 .. 2023. 7. 22.
[UI 디자인 프로세스] 2-03. UI 구축 프로세스 ㅣ플러스 엑스 UI 강의 후기 04ㅣ 02강_03 요약 확정된 시안으로 구체적인 디자인을 만드는 프로세스를 알려줄게. 시안 확정 이후 설계 -> 디자인 -> 개발이 순차적으로 이루어 짐. 많은 협업으로 스케쥴 관리가 필요 이때 디자이너의 일정은 세 가지로 나누어 일정을 짜고 작업 한다. 페이지 디자인 피드백 반영 가이드 다수의 디자이너가 카테고리 단위로 나누어 작업함. 일관된 디자인 작업을 위해서 먼저 Common Design Style Guide를 세운다. 프로젝트 설계 단계에서 틀을 만들고 디자인 진행에 따라 업데이트 하면서 관리함. [Common Design Style Guide] ‘폰트, 컬러, 그리드, UI 콤퍼넌트’ - 폰트 스타일 가이드: 폰트명, 영문, 한글, 사용 크기 - 타이틀 폰트 /.. 2023. 7. 21.
[UI 디자인 프로세스] 2 - 02. UI제안 프로세스 ㅣ플러스 엑스 UI 강의 후기 01ㅣ 02_02. Plus X, UI 제안 프로세스 요약 파트너사가 요청한 프로젝트의 시안을 작업 할 때 이렇게 작업해. 플엑이 고객사의 요청으로 프로세스를 진행하고 시안을 전달할때 어떤 프로세스로 일하는지 알아보자. 1. 파트너사 데스크 리서치와 인터뷰 진행. ㄴ 배경지식 향상, 비즈니스 모델에 대한 이해, 브랜드 분석 을 중점적으로 데스크 리서치 [배경지식 향상] - 유사서비스, 관련 서비스, 연관된 디자인, 기술트렌드 등 다방면으로 검색. - 고객사 서비스 리처치: 현황, 인터뷰, 뉴스, 기사, 논문... - UI 디자인 리서치 : UI 디자인에 필요한 부분들 광범위하세 리서치 하여 트렌드를 읽고 반영한다. [비즈니스 모델] - 고유한 비즈니스 모델 분석. 이해 [파.. 2023. 7. 20.
[UI 디자인 프로세스] 2-01. 업무 프로세스 ㅣ플러스 엑스 UI 강의 후기 02ㅣ Plus X 에이전시 대표 프로젝트 소개 요약: 우리 이런 프로젝트 했어. ~ 프로젝트에서는 이런 인사이트가 있었고 이런부분이 아쉽 or 좋았어. 플러스 엑스가 진행한 프로젝트 과정을 보면서 작업 과정을 유추 해 볼 수 있었다. 1. 해결 해야 할 미션 정립 2. 목표 정의 3. 디자인 원칙 정립 (키워드-문장형) 4. 앞선 원칙을 효과적으로 표현 할 수 있는 디자인 방향성 설정 (컨셉, 워딩, 이미지 방향, 컬러, 느낌, 인터렉션....) 위 4가지 진행상황의 예시. [ L포인트 프로젝트 구축] 1. 미션 : 고객에게 잔존해 있던 롯데멤버십의 이미지를 개선 엘포인트만의 브랜드 메시지를 전달 2. 목표 정의: Good Impression 엘포인트가 고객에게 좋은 인상.. 2023. 7. 19.
2023 Google material 새로운 기능 Carousel ㅣUIUX 기능ㅣ 캐러셀은 다양한 크기의 캐러셀 항목을 표시하도록 구성할 수 있습니다. Material에는 한 가지 유형의 캐러셀이 있습니다. 캐러셀 항목은 스크롤할 때 확장 및 축소되어 시차 효과를 생성합니다. 머트리얼 3의 새로운 구성요소 Carousel : 캐러셀 - 모양 : 동적 회전식 항목은 스크롤할 때 모양이 변경됩니다. - 모션 : 캐러셀 항목은 콘텐츠와 다른 속도로 이동하여 시차 효과를 생성합니다. - 상호 작용 : 스크롤 시 캐러셀 항목이 제자리에 고정되어 동일한 레이아웃을 유지합니다. [연구] Material Research Team은 200명이 넘는 참가자와 함께 두 가지 연구(정량적 및 정성적)를 수행하여 5가지 회전 목마 디자인에 대한 관점을 이해했습니다. 이 연구는 각 캐러셀과 .. 2023. 5. 23.
사업 계획서의 '요약서' 단계별 작성하기 ㅣ비지니스ㅣ [🌰인사이트] ● 사업계획서 작성 시 일관된 메세지 정립 [톤] 총괄 요약은 격식 있고, 개성 있고, 자신감 있고, 겸손한 것 사이에서 섬세한 균형을 유지 [어조] 읽을 사람의 특성을 파악한 어조 설정 필요 ex) 형식적이고 경의를 표하는 것, 전문적이면서도 간결한 것, 비공식적이고 사교적인 것 또는 기타 적절한 어조... [레이아웃] 가독성을 우선시 하여 작성 편안하게 읽힐 수 있도록 충분한 여백, 충분히 큰 글꼴 사용 ●사업 계획서 요악서 작성팁! - 요약문은 사업계획서 다 쓰고 핵심 내용을 간추려 가장 나중에 쓰는것이 쉽다. - 가능한 한 짧고 간결 일반적으로 총괄요약은 1~2 Page 이내로 작성 할 것 - 글 머리 기호 를 사용하여 짧은 요약을 제시 - 요약본에 여백을 추가 하면 명.. 2023. 5. 15.

티스토리툴바