비전공 개발자 캐나다 브리

데브리입니다. 지난달부터 갑자기 UI UX에 관심이 많아지기도 했고, 일하는데 도움도 될 것 같아서 유데미에서 Figma 수업을 수강했어요. 한동안 유튜브에서 UI 디자인 수업을 랜덤으로 찾아봤었는데 아무래도 유데미처럼 온라인 수업으로 딱 정리된 게 저는 집중해서 따라가기 더 좋더라구요. 유데미에서 UI UX 디자인을 검색해서 나오는 강의들 중에 가장 인기가 많고 리뷰도 좋은 Daniel Walter Scott의 수업으로 골랐습니다. 총 수업시간 : 11.5 (하루 1-3시간 정도씩 투자해서 수료하기 까지 10일 정도 걸렸어요.) 좋았던 점 : 따라하기 쉽게 꼼꼼하게 잘 설명해주는 편이고, 섹션마다 과제가 있어서 배운 내용을 꼭 복습하게 된다는 것. 아쉬웠던 점 : dad jokes. 깔끔하게 잘 정리된..

가상의 페르소나를 만들 수 있는 사이트 Random Project Generator https://randomprojectgenerator.com/ Wireframes - 다운로드 받을 수 있음 Free icons 다운받을 수 있는 사이트 icon finder https://iconfinder.com png vs svg 차이? png: 크게 확대하면 깨짐, 큰 사이즈로 받을 경우 파일 사이즈가 큼 svg: 깨지지 않고 파일 사이즈가 작음. Figma에서 vector 파일로 분리해서 컬러를 바꿀 수도 있음. 2. figma community 거의 무료버전이고, Fig pick이면 괜찮은 퀄리티 duplicate - detach instance Plugins 활용할 것 Testing a prototype o..

1. mobile font font-size mobile: 12px 이상 / 24px 이상 desktop: 16px default font size (1em) text-align 3줄 이상 넘어가면 text-align: left가 가독성이 좋음. font-family 통일감 있게 1, 2가지만 사용할 것 font-weight 2-3가지만 써도 충분. 넘어가면 복잡해 보임 font color 폰트 컬러는 접근성 4.5:1 이상? (Contrast Ratio 인가?) 브랜드 컬러로 강조하는 건 좋지만, 너무 여기저기 쓰지 않도록 절제하는 것이 중요 2. button font-size 16 px 손가락 굵기를 생각해서 여백은 넉넉하게 계층 구조: 강-중-약 (중요도에 따라 계층 구조를 나눔: 로그인, 예약하기..

1. UX research - Timeline (Research, Information, Interaction Design, UI Design, Iteration - User Interview - Empathy Map - Identify User Pain Points - Personas - User Journey Map - Problem Statement - Competitor Analysis - Affinity Diagram - Insights 2. Define & Ideation - Brainstorms (Workshops) - Meetings (Planning) - Diagramming (Research & Design) - Engineering 3. Information Architecture -..

When determining the theme color for UI/UX design, there are several factors to consider. The theme color will play a significant role in establishing the overall look and feel of the design, as well as conveying the desired emotions and enhancing usability. Here's a step-by-step guide to help you determine the theme color: 1. Understand the project and target audience Start by gaining a thoroug..

카트 넣은 아이템을 유저가 마지막 결제 단계 전 변심으로(혹은 다른 추가하고 싶은 상품이 있어서) 카트 페이지를 떠나면, 자동으로 쇼핑카트에 담긴 아이템들이 싹 비워지도록 만들어달라는 요청을 받았다. 쇼피파이 뿐만 아니라 아마존이나 다른 큰 이커머스 웹사이트를 참고하면 알 수 있듯이 카트에 든 상품은 심지어 다른 웹사이트를 둘러보고 와도 한동안은 남아있어야 하는 것이 구매 가능성을 높이는 데 도움이 되는데, 이 클라이언트는 user experience에 대한 이해가 부족하다. 내 개인 클라이언트는 아니고, 팀에서 받은 클라이언트라 내가 직접 대화하지는 못하지만 도움이 될까봐 쇼핑카트 UX 디자인에 대한 글을 찾아보다 그 이유를 잘 설명해주는 아티클을 발견했다. 해당 내용만 요약해서 전달해주고 싶었는데 이..

잠들기 전 링크드인 피드에서 발견하고 눈이 번쩍 뜨인 레터링 작품들! 포르투갈의 Type 디자이너이자 레터링 아티스트인 Rafael Serra라는 분의 링크드인 프로필을 찾았고, 프로필을 통해 이 분 개인 웹사이트까지 들어가보고는 너무 흥미로워서 공유합니다 :) 뭐랄까, 이런 분들은 재능도 재능이지만 쉬지않고 꾸준히 작업하시는 에너지가 더 대단한 것 같아요! 관심 있으신 분들 들어가보셔요 :-) https://www.fael.pt/ Rafael Serra - Type Designer and Lettering Artist My name is Rafael Serra aka FAEL and I am a Type Designer and Lettering Artist based in Lisbon with a pa..

디자인이 메인 업무는 아니지만 늘 웹사이트를 만들 때 UX/UI 디자인에 대한 기본 개념이 좀 잘 잡혀있었으면 좋겠다라는 아쉬움이 들었어요. 그래서 올해는 디자인 감각도 함께 키워나가기 위해서 매주 관련 기사를 읽거나 온라인 수업을 듣는 등 저만의 속도로 조금씩 공부해보기로 했습니다. 최근에 컬리지에서 UX/UI 디자인을 공부한 친구 P를 만나서 얻은 정보입니다. UI 디자인을 할 때 꼭 기억해야하는 10가지 유저빌리티 휴리스틱스라고 해요! 프론트엔드 개발자들도 함께 익혀두면 좋겠죠? 1. Visibility of system status https://www.nngroup.com/articles/visibility-system-status/ 2. Match between system and the re..

아직까지는 구글 폰트 https://fonts.google.com/ 만 이용하고 있지만, 여러 폰트를 섞을 경우 잘 어울리는 폰트 찾기에 도움이 되는 사이트입니다. 2개 이상의 폰트를 쓸 때 잘 어울리는지 미리 보고 결정하기 좋겠죠? Fontpair https://www.fontpair.co/ Fontpair - Free, beautiful fonts and font pairings curated just for you Free typography for your next design project (Google Fonts, Fontshare, Fontesk, Font Squirrel, and more) www.fontpair.co

이미 오랫동안 쓰고 있는 컬러 뽑기 좋은 사이트인 Colorhunt 와 Gradienthunt, CSS Animation 그대로 가져와서 쓸 수 있는 사이트 Animista, 카테고리별로 트렌디하거나 많이 쓰이는 컬러를 참고할 수 있는 Adobe Color - trends 1. Colorhunt https://colorhunt.co/ Color Palettes for Designers and Artists - Color Hunt Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects. colorhunt.co 2. Gradienthunt https://g..