현재 회사에서 새로운 블록체인 관련 솔루션을 제작 중.. 디자인을 하기 전 디자인 시스템을 제작하기로 했다. 먼저 컴포넌트를 만들기전 초기 가이드라인을 제작하는게 좋을것 같아 유명 서비스들의 기반을 찾아본다. 라인에서는 최소한의 디자인 규칙을 포함하는 디자인 요소의 가장 작은 단위이며 개발간의 소통을 원활하게 해주는 수단으로 활용된다. Foundation The foundation is the smallest unit of a design element that contains the minimal design rules. designsystem.line.me 지마켓 디자인 시스템에서는 필수적인 시각적 요소라고 말하고 있다. Typography - Gmarket Design System G마켓의 브랜드 ..

UI vs. UX Designer: Which Career Path To Choose? A UX designer and UI designer both work on creating beautiful interfaces, but their involvement and skill sets are required at different… uxplanet.org UX 디자이너와 UI 디자이너는 둘다 인터페이스를 아름답게 만들어주는 일을 합니다. 하지만 디자인과 개발 프로세스가 진행되는 동안 그들은 다른 시점에 참여해야 합니다. 그래서 어떻게 하면 어느 직업이 당신에게 가장 핏이 잘 맞을까요? UX와 UI에 관한 기사는 Designlab에 의한 것이며 당신이 어디에 뛰어난지 읽어보세요. User Experienc..

How To Design Case Studies that People Don’t Skip? Design case studies can be lengthy. Often, recruiters and others may not spend more than a second glancing through them, deciding if it’s… uxplanet.org 디자인 사례 연구는 길어 질 수 있습니다. 종종, 채용 담당자와 다른 사람들은 1초 이상 훑어보고 가치가 있다면 전체를 읽을 결정을 합니다. 진실은, 당신의 디자인 사례 연구 썸네일이 그들의 관심을 끌지 않는다면 클릭하지도 않습니다. 그렇다면 독자들의 마음을 사로잡고 더 나아가 잠재적으로 직업 or 프리랜서로 전환할 수 있도록 하는 디자인 사례 연..

*영어공부 중이라 어색한 번역체 말투가 있을 수 있습니다. UI design tip: Try to avoid using multiple alignments Sticking with a single alignment (or as few as possible) helps to simplify an interface, making it look neater and tidier. medium.com UI 디자인 요소의 정렬 인터페이스는 가장 까다롭고 중요한 파트중에 하나입니다. 올바른 정렬은 심미성과 가독성이 향상됩니다. 다양한 타입의 정렬들을(왼쪽, 오른쪽 또는 중앙) 사용할수록 복잡하고 지저분한 인터페이스를 볼 수 있습니다. 우리의 눈은 각각의 정렬을 따라 움직이는 어려운 일을 해야합니다. 이는 인터페이스의..

세로형 카드에서 가로형 카드되는 반응형 카드 UI 만들기! 먼저 프레임을 만들어 준다. card 이름 지어주고 이펙트, 라운드 넣어줘서 디자인해준다. 카드에 rectangle으로 이미지 들어갈 영역 만들어주고 Unsplash 플러그인으로 이미지 넣어준다. (이미지 플러그인은 다음 글에 소개할 예정) 이미지 밑에 Label, Heading, 본문, 프로필 이미지등등 텍스트들을 넣는다. 여기까지는 아직 오토레이아웃 노노! 참고로 Label/프로필 이미지는 레이어가 2개라서 그룹을 해줘야한다. Label 그룹/프로필 그룹 이렇게 각각 그룹 따로! 이제 여기서부터 오토레이아웃 시작! 밑에 순서대로 하면 된다. 1. Label/Heading/본문/프로필 사진 4개 잡고 오토레이아웃을 준다. 2. 카드 프레임한테 ..

배경 나는 디자이너이지만.. 코드에 대한 이해도가 있어야 개발자와의 소통이 좀 더 잘되는것으로 판단! 또한, HTML/CSS를 알아두면 추후 내 포트폴리오 홈페이지라던지 간단한 마크업은 내가 할 수 있을 것 같아 연습할겸 클론코딩을 진행해보았다. 그래서 이더리움 홈페이지를 방문해 구조를 파악하였다. 목표 먼저 코드를 쓰기전에 내 나름의 규칙을 세웠다. 첫 번째, id와 class를 구분해서 사용할 것. id는 한번 만 쓸 수 있고 class는 여러번 쓸 수 있기 때문에 반복 작업에는 class를 사용하는것이 낫다고 판단했다. 그리고 두 번째, 구조를 한 눈에 알아 볼 수 있도록 header/section/footer 시맨틱 태그 사용해보기, 이 외 CSS 스타일 작업시 지저분하게 작성하지 않을 것, 최대..