도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

[웹디자인] 중요한 50가지 요소 3편 : All the Little Things

[웹디자인] 당신이 잊기 쉬운 중요한 50가지 요소 - 3편 : All the Little Things

- 1편: Login & Signup stuff (1~5)

- 2편: First Experience (6~10)

- 3편: All the Little Things (11~25)

- 4편: Launch Materials (26~35)

- 5편: Profile Stuff (36~40)

- 6편: Mad Flows (41~50)

- 최종 합본

웹디자인, 기획관련 자료를 찾던중 좋은 자료를 찾아 번역 공유합니다.

원래는 1개의 글로 작성되어 있지만, 저의 개인적인 시간문제로 인하여 6편으로 나눠서 연재를 하고, 최종으로 연재를 합본으로 다시 작업을 할 예정입니다.


우리는 때때로 뭔가를 디자인하는 것을 잊어 버립니다

글쎄, 이건 좋지 않아 ...하지만 ... 괜찮아.

이런일은 늘 일어납니다.

이것은 단지 여러분이 디자인하는 것을 잊어 버릴수 있는 것들의 목록입니다. 인스타그램이나 Snapchat 같은 앱이 얼마나 간단한지 생각해 보면, 얼마나 많은 Screen, States, 그리고 Stuff들이 정말로 멋진 사용자 경험을 만들어 내는지에 대해 간과하기 쉽습니다.


All The…Small Things

11. The App Footer [Footer]

대부분의 시간 동안 사람들은 세상이 평평하다고 믿었을 때와 같이 페이지가 계속 영원히 계속한다고 가정합니다. 참고 : 지구는 평평하지 않습니다.


Ash Schweitzer might be lost in the woods somewhere. Someone help her.
애쉬 슈바이처 (Ash Schweitzer)는 어딘가 숲에서 길을 잃을 수도 있습니다. 누가 그녀를 도와주세요.


12. The Browser Favicon [파비콘]

브라우저 탭에 나타나는 작은 아이콘. 더 이상 초록색이 아니므로 계속 Medium 탭을 잃어 버립니다. 하지만 이쁘긴해요!


Michael Flarup는 당신이 다운로드 할 수있는 멋진 favicon 템플릿을 만들었습니다


13. The 404 Page


Rizvan is stuck in that hole. Go help her.
Rizvan은 그 구멍에 갇혀 있습니다. 그녀를 도와주세요


14. The Default/Hover/Focus/Pressed/Disabled/Etc. Input States

엄청 많은 상태들. "Focus + Hover"는 내가 가장 좋아하거나 가장 모호한 것일 수 있습니다. 아래 스크린 샷은 UX Power Tools Design System에서 가져온 것입니다.


내 사이드 ​​프로젝트에 대한 메모, 당신은 확실히 이것을 확인해야 합니다 :


15. The Tab Order [탭 순서]

탭 주문은 사용자가 Tab 키를 사용하여 페이지를 탐색 할 수있게 해주는 접근성 기능입니다. 나는 이것을 표현할 이미지를 찾을 수 없었습니다. 그래서 Christian Beck이 2007 년에 썼던 스펙의 스크린 샷을 가져 와서 테이블의 각 UI 컨트롤에 대한 테이블의 탭 순서 위치를 정의했습니다. SnoozeFest 2017 ™). 기본 작업이 보조 작업보다 먼저 수행되도록 항목을 방문하는 순서를 실제로 정의 할 수 있습니다. 이것은 깔끔한 디자인 도전입니다.


Ahhh, the days of writing 80-page spaces and waterfall development.
아, 80 페이지 분량의 공간을 만들고 폭포수를 개발 한 시대


16. The Scrolling Behavior [스크롤링 동작]

어디서 어떻게 스크롤되는지 알려주기만 하는게 아니고 실제 스크롤 화면이 필요합니다. 헤더가 고정되어 있습니까? Footer는요?


Oh man, Peter Blazej, this feels smooth, Nice!
이런, 피터 블레이즈,이 느낌이 부드럽 네, 좋았어!!


17. The Intercom Button [인터콤 버튼]

적어도 당신이 할 수있는 일은 당신의 앱 색상과 일치시키는 것입니다. 여러분 방문하십시오.  이건 로켓 수술이 아니에요.


이것은 시리얼 한 그릇을 만드는 것보다 쉽습니다.


18. The Pagination Buttons [페이지 매김 버튼]

무한 스크롤을 선택하지 않았다면 사용자는 27 페이지로 이동할 수있는 방법이 필요합니다.

Borunda did a nice job. Love that yellow, Borunda!
Borunda 굿잡! 노란색, Borunda 사랑해!


19. The Cursors [커서]

버튼에는 포인터가 있어야합니다. Non-interactive 항목에는 기본 커서가 있어야합니다. 텍스트에는 텍스트 커서가 있어야합니다. 개발자는 항상 이것을 알지 못합니다. 어떤 개발자는 텍스트 커서를 버튼의 마우스를오버 상태에적용 했습니다. 너그러움이 필요합니다...

Jeff Borderick LOVES clicking on stuff. He also made a freebie.
Jeff Borderick는 물건을 클릭하는 것을 좋아합니다. 그는 또한 공짜 버전을 만들었습니다


20. The Table Sort/Filter/Search Mechanism(s) [테이블 정렬 / 필터 / 검색 메커니즘]

"Beards with Bands"데이터 테이블에서 ZZ Top으로가는 더 빠른 방법이 있어야합니다 ...


Eugen Esanu has an exceptional eye for filtering mechanisms, and purple/yellow combos. Nice
Eugen Esanu는 필터링 메커니즘과 자주색 / 노란색 조합에 대한 뛰어난 눈을 가지고 있습니다. 나이스!!


21. The “No Results” Empty States ["결과 없음"빈 상태]

때로는 무언가를 검색하거나 너무 많은 필터를 추가하고 결과가 없습니다. 얼마나 슬픈일인가.... 건방진 일러스트레이션으로 사용자를 격려해주십시오. 


Reiner Wendland pretty much covered everything for Zendesk
Reiner Wendland는 Zendesk의 모든 것을 거의 다 다루었습니다.


22. The Error States [오류 상태]

입력이 잘못되었습니다. 잘못된 비밀번호. 기존 계정!! 너무 많은 것을 선택했습니다. 등등등... 상황이 잘못 될 수있는 모든 종류의 방법이 있습니다. 특히 내가 할머니이고 크리스마스 용 iPad를 가지고 있다면. 그건 실수 였어!!!!


Mike Stezycki really had me thinking that email got sent. Then he was all: 😦
Mike Stezycki는 정말로 전자 메일이 전송되었다고 생각했습니다. 그게 다였다 ㅠㅠ 


23. The System Notifications [시스템 알림]

시스템은 커튼 뒤에서 항상 무언가를하고 있으며 때로는 일이 성공적으로 끝났을 때 (또는 실패 했을 때)를 아는 것이 좋습니다. 분명히 사용자에게 알려야합니다.


This is from Google Inbox. The “Undo” is really convenient when you “accidentally” delete an email from your mom
Google Inbox에서 가져온 것입니다. '실행 취소'는 엄마가 실수로 이메일을 삭제할 때 편리합니다


24. The Empty Autocomplete Dropdown [빈 자동 완성 드롭 다운]

자동 완성 기능은 시스템에서 객체를 찾는 데 도움이되지만 때로는 결과가 없습니다. 이 경우 빈 상자 만 있으면 됩니다. 작은 메시지를 보여 주거나 일종의 행동을 취하도록 허용하십시오.


Apparently Jurriaan van Drunen didn’t have “Bra” in his contacts already. Probably for the best.
명백하게 Jurriaan van Drunen은 이미 그의 브래지어에 "브래지어"가 없었습니다. 최고를 위하여...

25. The Loading State [ 로딩 상태]

물론, 페이지가 로드 되는 동안 사람들은 휴대 전화에서 Tindering을 하고 있을 것입니다.하지만 실제로 섹시한 스와이프를 들여다 보면, 여전히 데이터가 로드되고 있다는 시각적 표시가 있어야합니다.


Not the best pan flip form, XPLAI. Keep practicing. But this is still painfully adorable
최고의 팬 플립 양식, XPLAI가 아닙니다. 계속 연습 해. 그러나 이것은 여전히 고통스럽게 사랑 스럽다.




- 1편: Login & Signup stuff (1~5)

- 2편: First Experience (6~10)

- 3편: All the Little Things (11~25)

- 4편: Launch Materials (26~35)

- 5편: Profile Stuff (36 ~ 40)

- 6편: Mad Flows - (40 ~ 50)

- 최종 합본

원본 링크입니다.


리뷰