본문 바로가기

기획/Note

[읽은거리] The complete guide to website wireframe design

배워야 할 거리도, 배우고 있는 것도, 할 일도, 한 일도 많은 요즈음이라, 오늘 문득 조금 더 나은 UX를 만들 수 있었는데, 왜 그때 먼저 생각하지 못했지? 라는 생각이 떠올라서, 그냥 노트를 어떻게 꾸밀까.. 어떻게 관리를 조금 더 잘할까 고민을 하고 있습니다. 

 

와이어프레임 관련해 지난번 스크랩해두었던 게시물을 정리해둘까 해요. 분량이 꽤 됩니다. 

 

주의? 굉장히 많은 이론이 있고, 의견이 있어요. 제가 보기에 좋은것도, 제가 보기에 나쁜것도 있지만, 적절히 필요한 것들을 수렴하시는 분들이시리라 기대하고 정리해봅니다. 

 

원문 출처는 아래

https://www.justinmind.com/blog/website-wireframe-design-guide/

 

The complete guide to website wireframe design

The complete guide to website wireframe design

www.justinmind.com

 

Chapter

 

1. Low fidelity vs high fidelity wireframes: what's the difference?

2. Wireframes Vs Mockups: what's the best option?

3. What's the difference between wireframes and prototypes?

4. Information architecture: a UX designer's guide

5. You guide to space and layout in UI design

6. Beginner's guide to wireframing UIs: benefits & best practices

7. 20 inspiring web and mobile wireframe examples

8. Beginner's guide to UI sketching

 

배우게 될 것들

 

와이어프레임이란?

언제, 왜 웹사이트 와이어프레임 디자인이 필요할까?

Information Architecture (I.A.)

웹사이트 네비게이션 와이어프레임

와이어프레임에 Lorem ipsum을 넣을까, 실제 콘텐츠를 넣을까?

비쥬얼 디자인의 적정량

인터렉션의 적정량

웹사이트 와이어프레임 UI 킷

와이어프레임 도구

웹사이트 와이어프레임 예