유튜브 검색 엔진

UIUX모바일디자인 초급강좌[Adobe XD]

조회수 5583회 • 2020. 05. 08.

채널

Madia Designer

추천, 구독, 알림 꼬오옥~ 눌러주세요! 안녕하세요 디자이너 마디아입니다. 현재 실무에서 쇼핑몰 UIUX 구축 디자이너로 활동하고 ...

아 으 5 [음악] 황당한 방톡 [음악] 반갑습니다 디자이너 마디 합니다 오늘은 노드가 모바일 디자인을 좀 진행을 할 겁니다 xd 로 진행이 될 겁니다 현재 대지 앞에 보드 사이즈는 750 때 1624 로 진행이 되었구요 오늘 페이지는 총 3가지 페이지가 진행이 될 겁니다 어도 카 방송에서는 아마 조금 편집이 됐고 배속이 되서 돌아갈 거예요 실시간 에서는 원본 속도로 보여드리는 거니깐요 많은 분들이 실시간 오셔서 원보 속도를 확인해 보시면 좋을 것 같습니다 그런 디자인을 바로 시작해보죠 우리는 자 그러면 지금부터 디자인을 진 해볼건데요 여러분 2 일단 상단에 주 mb 부터 영역을 좀 잡아 주도록 하구요 좌 추구 쭉 마즙 각을 잡아 주시면 됩니다 아 지금 자 추고 쭉 맞은 갑은 처음 45를 잡았는데요 조금 좁은 것 같아서 입술까지 좀 들려 씁니까 준비 같은 경우는 좌우 마진을 따로 가져가지 않습니다 그러니까 60 마진을 따라갈 필요는 없는 거죠 자 우리가 적 선 텐 치 안에서만 디자인을 해 주시면 됩니다 컨텐츠 마 자축 쭉 맞으나 좀 지켜주시면 그랬듯 한비자 여러분들을 아셨죠 어 자 지금 오늘 2배수 dg 아니잖아요 이 베스 디젠 에서 가장 중요하게 생각해야 되는 것은 뭐냐면 바로 짝수 짝 쑥 2배 슨다 짝 수저 그러니까 짝 쏙 빼서 디자인을 접해 주셔야 그러니까 폰트나 간격이나 버튼이나 아이폰이나 어떤거 든다 짝수가 나와야 되는거 쪽 일단 전체적으로 지금 느낌을 보시면은 제가 자주색 박스로 아이폰 영어 걸들이 자바나 두어 폰트 같은 경우는 일단 기본적인 포트 표기를 28로 증시 했습니다 지금 막 보이시는 처럼 적혀 들이다 28승째 정도라 보여도 것들이 생각해주시면 좋을 듯 싶어 좋습니다 레이아웃은 굉장히 단순해요 오늘 페이지 드 총 3가지 페이지 긴 하지만 레이아웃 자체는 전혀 어렵지 않은 페이지 이니까 여러분들이 쉽게 따라 하실 수 있을 겁니다 아 봐요 즉 간격도 다시 조정이 됐구요 아이폰 영역도 다시한번 확장을 좀 시켰어요 그 다음이 텍스트도 지금 2단으로 남아가 쏘고 있는걸 여러분들이 확인 하실수가 있죠 아직 이미지가 들어오지 않았고 아이콘이 트로 오지 않아서 아직 느낌을 보시기에는 쪼꼼 어려움이 있으실 수 있습니다 그치만 레이아웃은 먼저 잡아놓고 디자인을 하면 중간중간에 수려하고 훨씬 더 수월하다는 거 여러분께 하시면 좋을것 같아요 지금같은 경우는 이미지 부분에 이제 텍스트를 써주고 있어요 아직 이미지가 안 들었기 때문에 그냥 텍스트 센터 인데 저 텍스트가 화이트로 들어갈 거 같구요 그러며 다 가져 이미지 사진이 왜 검은 색깔 깔아 주셔야 흰색 폰트와 보이겠죠 자 지금 밑에 부분 디자인 작업 중에 가고 있는데요 좁은 영역에서 텍스 하고 발언 프로필 이미지 영역 이라고 할까요 어 어 저런 것들을 좀 더 좋아졌는데 생각보다 좀 많이 빠 카 더라구요 어 그래 가지고 가로 까 조금더 버렸습니다 여러분들을 좋아요 그럼 계속해서 간격을 뭔가 빠르게 조정하고 있는게 보이시죠 이런식으로 이렇게 좀 진행이 됩니다 아 어 페이지 자체나 뭐 전혀 어렵지 않죠 뭐 여러분들이 어렵게 생각하실 정도의 페이지 나뉩니다 그냥 폰트 큰 피하고 감경하고 레이아웃 중 꿈을 여러분들이 생각하지만 됐구요 지금 다 둔치 찾아 캐 찜한 척 때 의 집 두번째 페이지 세 번째 페이지 자체다 보시면 좌 추구 취업 60 마징가 처음 잡았던 것 계속해서 지켜가고 있는 과정이에요 그리고 지금 상단에 보시면 메뉴 카테고리 메뉴 고 노를 잡고 있는데 지금 자세히 보시면 제가 박스를 쳐 가면서 텍스트를 쓰고 있죠 맛술을 쳐가면서 저게 뭐냐면 퇴치 영역을 더욱 고려해서 버프 데 위치를 잡아주고 생각했으며 됩니다 물러지고 회색 박스를 그은 다음에 더 박스 난 보이게 해 주는게 뒤 참 5 되죠 그래서 이런 식으로 제대가 되시면 누구나 작다 라고 쉽게 여러분들이 버튼 하실수가 있는 응 병 업체가 틀어 있습니다 지금 레이아웃도 다 거기서 거기고 지금 여기서 눈치 채신 바하마 더 뭐냐면 바로 썸네일 비율을 다 똑같이 맞춰 준다 여기도 간격이 매 처음에 너무 안잡혀서 계산기를 정말 많이 들리겠습니다 간격이 40 쑥 않아 o 정제의 크기가 만 볼수가 나오고 짝수가 5 감격이 가지면 썸데이 크기가 아마도 지 계속해서 주저하고 있는 거 보이시죠 계산기로 계속돼 두들겨 가면서 세상에 때라 가면서 막 하고 입력하지 올게요 입에서 디자인이라서 절대적으로 짝수가 나와요 전체적으로 딱 맞아야 되고 짝도 다 나와야 되는 상황에 가서 리 픽셀의 픽셀의 되게 목숨걸고 뭐라고 시도를 했습니다 이렇게 하면 일단 레이아웃은 어느정도 다 잡혔다고 여러분들이 이제 생각을 하시면 됩니다 간단하죠 좋습니다 이제 밥을 다 됐네요 자 이렇게 해서 우리가 지금 현재 나와있는 레이어 페이지는 다 잡아갔습니다 총 3가지 페이지 줘 레이아 아직 디테일이 간 컬러는 많이 잡지 않았고 아직 아이폰 더 들어가지 않았고 2위 지도 아직 들어가지 않았습니다 이제 이미지 야호 아이콘을 좀 넣으면서 컬러도 하나로 가 통일시키고 그런 작업들을 진행하도록 하겠습니다 아셨죠 지금부턴 이제 아이폰 하고 이미지를 조금 사회 파면서 디테일하게 간격이나 목 폰트의 플로라 뜬지 기타 경 등을 세부적으로 디테일하게 충전하는 과정이라고 여러분들이 보시면 됩니다 아 그렇지 아이폰을 넣고 있는 과정이며 절감에 처음에 자주색 박사를 의미 만들어 놨기 때문에 아이콘 만원 추면 괴저 엄청 간단하죠 좋습니다 이미지는 일단 더 전체적으로 큰 썸네일 은 요다 풍경에 이미지를 넣었구요 원 송 보람 이 안에 들어가는 거 인물 이미지를 줌 얻었습니다 아 그리고 주용 약간 풍토 색 갈색 이라고 해야 될까요 처럼 황토색 을 지금 브랜드 컬러로 가져가려고 포인트 쪽으로 주고 있구요 뒷물 이미지 쪽을 여러번 좀 가까와서 느낌을 좀 최대한 맞춰 보고 있는 과정이라고 생각하시며 됩니다 아 따라 줘 자 그 다음에 여기 흰색과 텍스트로 들어오니까 힙 한껏 라디언트 에서 검은색 깔아 준거 잠깐 나오고 보셨죠 아 여기도 이제 인물 이미지들이 하나씩 들어가고 켈러 게이지가 깔리고 하니까 어느 정도 느낌이 조금씩 잡히고 있는 단어가 분들을 확인하실 수가 있겠죠 좋습니다 오늘 여기서 나오는 뭉크 둘은 크게 신경 쓰실 때 전혀 없습니다 그냥 구글에서 아무거나 들고 와서 박스는 봅니다 5 공부 내용에 대해서 여러분들이 징역 써질 들어 없습니다 봐요 자 이런식으로 이제 디자인이 즉 진행되고 있네요 여러분들 그쵸 자 그리고 우리가 오랜 11월 12월 쯤에 이지 오프라인 수업이 좀 진행이 될 겁니다 여러분들 11월이 나 12월중 오프라인 수업이 진행될 건데요 모바일 하고 pc 씰 뭐 디자인이 실직적으로 여러분들이 3개월도 가 직접 키지 않은 하는 그룹과 에 오프라인에서 훨씬 하니깐요 그때도 이제 많은 분들이 참석을 원하시며 때 한번 지원해 주시면 좋습니다 아 아셨죠 미리 지원해 주시면 더빙 이 자리를 좀 마련할 수도 있겠죠 좋습니다 이메일로 지원 해 주시면 됩니다 벨 탄력이 독바 레 제가 기존에 갖고있던 폭발을 확보 아가 지구요 붙여 넣어봤습니다 여러분들 자 이렇게 해서 우리가 모든 디자인이 다 완료가 됐습니다 여러분들 어떠신가요 어려운 거 같음 에서도 생각보다 쉽죠 우리가 처음에 레이아웃을 잡고 폰트도 좀 어느정도 간격도 잡고 컬러 그 잡고 크기도 접기 했지만 이미지가 들어감에 따라서 조금씩 더 조정이 된것 여러분들이 확인 하실수가 있어요 자 우리가 여기서 어느 중요하게 생각해야 되는 건 뭐냐면 바로 감격이 감격의 주요 써 즉 간격을 제가 계속해서 똑같이 똑같이 최대한 맞추려고 하고 있죠 자백 그렇게 또 시작 정택 여기도 시작점 100 그저 각 컨텐츠 당 팩 여기도 100 그저 100 그쵸 이런 감격의 기준이 좀 있으셔야 됩니다 여기도 보시면 보세요 이렇게 그리드의 딱 밖에 디자인했고 여기서부터 에 간격 20 그 여기도 22조 20 22 줘 그리고 이 돼서 디자인이기 때문에 짝수 짝 쏘 얘도 짝수 짝수 얘도 짝수 짝수 요렇게 그리고 모든 폰트도 다 지금 짝수로 떨어져 있어요 28 588 회 154 보조 얘네 트기도 72 짝 쏘 얘도 짝수 그렇죠 얘네들도 다 짝수 간격도 다 짝수 얘도 여기서 격이 짝수 익혀 기도자 쏘이 그 기도 짝 쏙 어 여기 소수점 으로 들어갔네요 이런 것들이 있으면 되요 입에 5.38 아냐 1대 6으로 들어가야 됩니다 그럼 이거 제 실수 에요 자 206 으로 들어가셔도 되요 아 그렇구요 우리가 이렇게 좀 완벽하게 했다고 가정을 해도 항상 이런 실수들이 나 무조건 짝수 의 기준점을 항상 맞추셔야 된것 하셨죠 오늘도 여러분들 도움이 좀 말 드셨나요 큰 화면으로 다시 한번 같이 봐볼까요 자 첫 페이지 두번째 페이지 세 번째 페이지 이렇게 디자인이 됐습니다 음 오늘 영상도 도움이 많이 되셨다면 좋아요 구도 알림 설정 감사합니다 마대 였습니다 다음에 더 좋은 강의를 찾아 올게요 안녕히 계세요 [음악]

추천

시즌 첫 농어!!

ㅤ거제도 최군의 횟집 TV

조회수 6722회 • 2021. 04. 07.

4.7 재보궐 선거, 민심의 선택은? / YTN

YTN news

조회수 6876회 • 2021. 04. 07.

[영상] 승자와 패자 뒤바뀐 민심 / YTN

YTN news

조회수 5979회 • 2021. 04. 08.

[과수다]멋진신세계

국립과천과학관

조회수 49회 • 2021. 04. 08.