안녕하세요 찐망고입니다. 디자인은 단순히 시각적인 요소를 넘어서 사용자와의 소통을 위한 도구인데요. 효과적인 디자인을 위해 스토리텔링을 활용하고, 각 디자인 요소에 의미를 부여하는 방법을 포스팅 해볼게요. 1. 디자인에 스토리 담기디자인의 각 요소에 의미를 부여하고, 사용자와의 소통을 강화하기 위해 스토리텔링을 활용하세요.스토리텔링: 디자인에 이야기를 담아내어 사용자와 감정적으로 연결됩니다. 예를 들어, 브랜드의 역사나 철학을 시각적으로 표현합니다.의미부여: 디자인 요소 하나하나에 의미를 담아 일관성을 부여합니다.화면 구성: 이벤트 배너를 클릭을 유도하기 좋은 위치에 배치하여 사용자의 행동을 유도합니다.디자이너의 고민 이해하기: 디자인을 보면서 디자이너의 고민을 이해해보세요.이 버튼을 왜 이렇게 배치했..
안녕하세요 찐망고 입니다. 요즘 디자인 시안은 모바일 시안부터 뽑는다죠? 제가 전에 포스팅했던 단위 dp에 대해서 이해하다 보면 디자인 시안은 1 배율에 맞는 화면으로 작업하는 게 좋아요. 2023.08.28 - [UIUX디자인/디자인] - 모바일 디자인을 위한 해상도와 DPI 이해하기: 안드로이드와 iOS의 차이점 단위 DP란 뭘까요? 안녕하세요 찐망고 입니다. 오늘은 안드로이드와 iOS단위에 대해 포스팅해보겠습니다. 일단 해상도를 좀 알아볼까 해요 해상도는 화면에 보이는 픽셀의 총 개수를 이야기합니다. 요즘 나오는 스 uiweb.tistory.com 안드로이드는 360 * 640 iOS는 375 * 812 하지만 마크업은 어디까지 해야 할까요? statcounter에서 우리나라 운영체제 시장점유율을 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Pd0xj/btsF87kLxfX/hhIcMRJ8IwqKe6zMkJ9qFk/img.png)
안녕하세요 찐망고입니다. 클론 코딩을 하던, 클론 디자인을 하던 레퍼런스를 찾다 보면 전체 사이트를 캡처해야 하는 상황이 있단 말이죠~ 당연히 알고 있을 거라 생각했는데 생각보다 몰라서 못쓰던 사람들도 많아 포스팅해봅니다. chrome 웹스토어에 접속합니다. https://chromewebstore.google.com/category/extensions?utm_source=ext_sidebar&hl=ko&pli=1 Chrome Web Store 브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다. chromewebstore.google.com 티스토리 화면을 캡처해 봤는데요. 한 장의 이미지나 혹은 pdf로 저장이 가능합니다. 참고로 fixed 걸린 요소들은 연속으로 캡처되는 단점이 있습니다~
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/qRqgC/btsF77RwNDF/7aCorWO5uFACNLbKEsE1G1/img.png)
https://collectui.com/challenges/sign-up 안녕하세요 찐망고입니다. 이전 글에 디자인 참고 레퍼런스 사이트관련 글을 포스팅했는데요. 디자인 레퍼런스 참고사이트 1. WWIT - What Was IT 국내의 UI/UX 모바일 패턴을 수집하는 사이트 입니다. UI 키트, 아이콘, 템플릿 등 다양한 디자인 리소스를 제공합니다. 모바일APP디자인이 한눈에 보이죠? 기획이나 디자인에 레퍼 uiweb.tistory.com 오늘은 ui디자인 레퍼런스 사이트를 포스팅 해보려고 합니다. 1. Mobbin - iOS 앱 UI 사이트 https://mobbin.com/browse/ios/apps 2. UI Garage - ui플랫폼 별 분류 https://uigarage.net/ UI Gara..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/8IK4U/btsB3trx2Gj/ARaBaYJPGtoiBSxH0UZW3k/img.png)
안녕하세요 찐망고입니다. 디자인 어렵죠? 이론적인 게 머리에 충만해도 막상 흰 창을 보면 머부터 시작해야 할지 막막하고 그래서 조금 쉽게 풀어보고자 해요. 제품상세페이지디자인! 상세디자인이라고 하는 그 이미지들. 기억나네요.. 2006년인가 지마켓에 옥수수 판매 상세페이지를 만들어달라던 농부님.. 그때 당시엔 뭣도 모르고 내 눈에 이쁘고 내 눈에 이쁘면 그만이지 하는 마음으로 작업했는데.. 지금 생각해 보면 참.. 그 이후로 상세디자인 작업을 종류별로 참 많이 해봤는데요.. 이번 포스팅엔 전체적인 구성을 기획하여 작업하면 좋을지에 대해 포스팅해볼게요.. 레퍼런스는 각종 채널에서 확인이 가능하죠? 저는 와디즈와, 네이버스토어, 쿠팡을 많이 보는데요. 특히 와디즈 베스트 펀딩 상세페이지들은 정말 좋은 레퍼런..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dqfPug/btsBBpb1vFQ/gsz7swe6MOjyHgAcb8RLO1/img.png)
안녕하세요 찐망고입니다. 가끔 이벤트 상세디자인이나 배너들을 보다 보면 어떤 폰트를 사용했는지 궁금한 디자인들이 있더라고요 저만 그런 거 아니죠? 저 폰트는 뭘까 하고 고민하면서 구글링 해보니 비슷한 폰트를 찾아주는 사이트가 있어 포스팅해 봅니다. https://www.sandollcloud.com/#schpop 산돌구름 폰트가 필요할 때 언제 어디서나! www.sandollcloud.com:443 링크에 접속하면 이미지를 업로드하거나 url을 입력하라는 창이 뜹니다 저기에 이미지를 업로드하고 해당 폰트 영역을 선택하면~~~ 짠~~ 이렇게 리스트 형태로 뜹니다. 이 이미지를 업로드해서 쿼터 이상 구매 시라는 텍스트 박스를 눌러봤거든요. 프리텐다드 폰트가 딱? 물론 정확한 폰트가 아닐 확률이 더 높긴 하지..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/n5kkm/btsBupC8i1Q/s5fkm0K2EBRaNFOUdcvEsK/img.png)
안녕하세요 찐망고 입니다. 오늘은 웹내비게이션에 대해 알아보려 합니다. 웹사이트에 접속한 사용자가 현재 위치와 이동경로를 파악할 수 있도록 돕는 내비게이션은 매우 중요합니다. 이는 사용자가 빠르게 원하는 목적을 달성할 수 있도록 도와주죠. 내비게이션은 그 구성에 따라 여러 단계로 나누어집니다. 예를 들어 사이트는 노란색 컬러에 해당하는 1단 메뉴를 눌렀을 때 빨간색에 해당하는 2단 메뉴가 나오고 빨간색을 기준으로 파랑계열의 3단 메뉴가 나옵니다. 이처럼 3단계 내비게이션은 깊이가 있지만, 너무 많은 단계는 사용자에게 혼란을 줄 수 있어 피하는 게 좋습니다. 반응형 사이트를 설계할 때는 PC와 모바일에서 내비게이션을 어떻게 표현할지 고민해야 합니다. 때로는 한 개의 내비게이션을 공유하고, 때로는 두 개의 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/zJys9/btssgn2LQX7/GSLt5xzk0d2U1wqVzQp9L1/img.png)
안녕하세요 찐망고 입니다. 오늘은 안드로이드와 iOS단위에 대해 포스팅해보겠습니다. 1. 해상도란 무엇인가? 해상도는 화면에 표시되는 픽셀의 총 개수를 이야기합니다. 최신 스마트폰들의 해상도를 살펴보면 다음과 같습니다. 갤럭시 Z 플립5: 2640 x 1080 갤럭시 S23+: 2340 x 1080 아이폰 14: 2532 x 1170 아이폰 14 Pro: 2556 x 1179 아이폰 14 Pro Max: 2796 x 1290 2. 픽셀 밀도(pixels per inch, ppi)와 중요성 픽셀 밀도는 화면의 선명도를 결정하는 중요한 요소로, 1인치 안에 들어가는 픽셀의 수를 나타냅니다. 예를 들어, 아이폰 14 Pro Max는 1인치 안에 460 x 460개의 픽셀이 들어있다는 의미입니다. 3. 뷰포트와..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cHQXaF/btsrkOMTajl/RHA8jQJ4v7gaa8dKaNIRM0/img.png)
안녕하세요 찐망고입니다. 오늘은 조금 재밌는 사이트를 찾아내서 포스팅 해보는데요.. 회원가입을 하면 (구글로그인가능) 원하는 카테고리에 맞춰 이미지를 보정할 수 있는데 합성, 보정, 일러스트도 가능하구여.. 무료와 유료가 합쳐져 있는 사이트 입니다. Hotpot.ai Hotpot.ai helps you create amazing graphics, pictures, and text. AI tools like AI Art Generator spark creativity and automate drudgery while easy-to-edit templates empower anyone to create device mockups, social media posts, marketing images, app i..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cZLoos/btspH18DHdv/BcXk3RE392feD8cz8KKv4k/img.png)
안녕하세요 찐망고입니다. 오늘도 시작해 볼까요? 컴포넌트는 사용자와 상호작용하는 기본적인 형태로, 어떤 공간에서든지 기능을 수행할 수 있는 가장 작은 단위입니다. 컴포넌트의 가장 중요한 특성은 재사용성이며, 어떤 문맥에서든지 사용자에게 이해하기 쉽고 사용하기 편리해야 합니다. 이의 목적은 특정 영역에만 제한되지 않고 명확하게 정의되어야 하며, 색상, 텍스트, 아이콘 등을 시각적으로 조직화하여 사용자에게 제공되어야 합니다. Definition 컴포넌트는 사용자가 다른 요소와 쉽게 구별하고, 사용자의 행동에 적절하게 반응하며, 현재 상태에 대한 정보를 명확하게 전달하는 가장 작은 단위입니다. 컴포넌트는 다섯 가지 특성을 가지고 있습니다. Usage: 컴포넌트의 목적과 역할을 정의 Shape: 다른 요소와 구..
- Total
- Today
- Yesterday
- 코딩교육
- UI디자인
- JavaScript
- 웹접근성
- 웹표준
- uidesign
- slickAPI
- css4
- 슬라이드플러그인
- 포토샵합성
- css
- JavaScriptTips
- 자바스크립트숫자카운트
- boxmodel
- 크로스브라우징
- 웹디자인
- padding
- margin
- 피그마플러그인
- 디자인팁
- css그리드
- 프로그래밍기초
- uxdesign
- CSS3
- uiux
- 스마트폰해상도
- 시멘틱마크업
- 반응형웹
- Border
- Slick
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |