tistory.com

웹 디자인 해상도, 적응형과 반응형 차이

처음 UI 디자인을 시작하였을 때 어려웠던 부분은 해상도였습니다. PC웹 혹은 앱, 모바일 앱을 디자인 들어갈 때마다 어떤 해상도를 기준으로 디자인 해야 할지, 반응형은 어떻게 대응해야 하는지 참 어려웠었죠. 특히 웹 UI 디자인을 했을 때 마주한 광활한 아트보드는 제겐 너무 막막하였습니다. 어떻게 디자인을 채워야 할지 말이죠… 그래서 그때 그시절 제가 고

김새롬

tistory.com

모바일 디자인 | 디바이스별 픽셀 밀도 이해하기

Device Pixel Density 모바일을 포함한 반응형 웹 디자인과 밀접한 관련이 있는 장치 별 픽셀 밀도에 대해 알아보도록 하겠습니다. 오늘 날과 같은 발빠르게 다변화하고 있는 환경, 즉 수많은 디바이스를 접하는 시대에 디바이스마다 각각 픽셀을 어떻게 처리하고 있으며, 이에 대응하는 방법이 무엇인지를 알아야 합니다. TV 해상도 비교 픽셀 밀도(Pi

김새롬

tistory.com

반응형 디자인의 결함 제거

지난 5년동안 모바일 트래픽의 점유율이 20% 증가했으며, 오늘날 반응형 디자인은 이미 당연한 것으로 받아 들여지고 있다. 2020년에는 모바일에서 모든 웹 사이트에 액세스 할 수 있으며 잘 작동한다. 대부분의 사용자는 스마트폰이나 태블릿에서 제대로 작동하지 않는다는 사실을 알게되면 사이트를 떠나고, Google은 모바일 장치에 최적화되지 않은 경우 검색

김새롬

pxd.co.kr

상황에 맞는 키패드를 보여주기

들어가며 혹시 모바일에서 서비스에 회원가입을 한다던가, 무언가 내용을 입력할 때에 특수문자 키보드로 바꾸었다가, 다시 영문으로 바꾸었다가.. 상황에 맞지 않는 키보드가 나와서 번거로운 적 있으신가요? 의미 있는 HTML을 사용하여 사용자에게 더욱 편리한 UX를 제공할 수 있어요. 입력과 관련하여 어떻게 하면 좋을지 알아볼까요? none 가상 키보드를 사용하

김새롬

youtube.com

How to Work With Colors | Design Tips for Developers

📘 Courses - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav

📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb

📫 Business - codevolution.business@gmail.com

Design Tips for Developers
Colors

도봉도봉

youtube.com

How to Improve Text Content | Design Tips for Developers

📘 Courses - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav

📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb

📫 Business - codevolution.business@gmail.com

Design Tips for Developers
Typography

도봉도봉

youtube.com

How to Create Better Forms | Design Tips for Developers

📘 Courses - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav

📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb

📫 Business - codevolution.business@gmail.com

Design Tips for Developers
Forms

도봉도봉

youtube.com

How to Improve UI with Cards | Design Tips for Developers

📘 Courses - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav

📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb

📫 Business - codevolution.business@gmail.com

Design Tips for Developers
Cards

도봉도봉

youtube.com

How to Fix Boring Empty States | Design Tips for Developers

📘 Courses - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav

📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb

📫 Business - codevolution.business@gmail.com

Design Tips for Developers
Empty States

도봉도봉

youtube.com

How to Handle Image Quirks | Design Tips for Development

📘 Courses - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav

📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb

📫 Business - codevolution.business@gmail.com

Design Tips for Developers
Images

도봉도봉

youtube.com

How to Improve Boring Tables | Design Tips for Developers

📘 Courses - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav

📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb

📫 Business - codevolution.business@gmail.com

Design Tips for Developers
Tables

도봉도봉

youtube.com

Introduction | Design Tips for Developers

📘 Courses - https://learn.codevolution.dev/
💖 Support UPI - https://support.codevolution.dev/
💖 Support Paypal - https://www.paypal.me/Codevolution
💾 Github - https://github.com/gopinav

📱 Follow Codevolution
+ Twitter - https://twitter.com/CodevolutionWeb
+ Facebook - https://www.facebook.com/codevolutionweb

📫 Business - codevolution.business@gmail.com

Design Tips for Developers

도봉도봉

tistory.com

워크플로우 제작하기

워크플로우 제작하기 1. 워크플로우 이해 • 사용자의 앱 인터페이스 작동 방법과 수행 순서를 고려하여 혼란을 일으키지 않는 워크플로우를 제작할 수 있다. 1. 워크플로우(workflow) 이해 1-1. UI 화면 설계 작성 순서 UI 화면 설계는 UI 디자인에 앞서, 먼저 사용자의 분석을 토대로 UI 시나리오 문서를 충 실히 작성하여야 한다. 또한 최종 사

김새롬

tistory.com

UI 정보구조 설계하기

UI 정보 구조 설계하기 1. 정보 설계 구성 • 수립된 UI/UX 전략을 바탕으로 스마트 문화 앱 UI 디자인 개발에 필요한 정보 구조를 설계할 수 있다. 1. 정보 설계 정보 설계의 목적은 사용자와 앱의 상호작용을 원활하게 하여 사용자가 원하는 정보를 쉽 고 빠르게 찾을 수 있도록 하는 데 있다. 사용자 요구 사항으로부터 도출된 콘텐츠와 기 능 구조를

김새롬

uxplanet.org

Modal vs Page: A Decision Making Framework(영문자료 구글번역 활용가능)

Have you ever wondered if your design should just be on a page instead of in a modal overlay? Here’s a framework to help you decide.

yuli_kim

wishket.com

모달윈도우(팝업)를 디자인할 때 생각할 9가지 원칙 | 요즘IT

디자이너들은 사용자들의 눈길을 끌기 위해서 이러한 모달윈도우를 사용합니다. 따라서 모달윈도우에 있는 정보나 행동들은 순전히 사용자의 관심을 사로잡기 위한 것입니다. 이번 글에서는 모달윈도우를 좀 더 잘 디자인할 수 있는 몇 가지의 간단한 원칙들을 살펴보겠습니다.

yuli_kim