Difference between revisions of "Category:Design"

From perpendicular angel knowledgebase
Jump to navigation Jump to search
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[Category: Main]]
[[Category: Technology]]
I'm a UX Designer, so these are my UX Designer tools.
I'm a UX Designer, so these are my UX Designer tools.
(Also, there may be good things in [[:Category: Behavior]] you want to read.)
(Also, there may be good things in [[:Category: Behavior]] you want to read.)
Line 14: Line 14:


==Animation==
==Animation==
* [https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9 The ultimate guide to proper use of animation in UX] by Taras Skytskyi aggregates a number of [[:Category:Design Principles | Design Principles]] regarding animation into one place.  
* [https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9 The ultimate guide to proper use of animation in UX] by [[Taras Skytskyi]] aggregates a number of [[:Category:Design Principles | Design Principles]] regarding animation into one place.  
* [http://destroytoday.com/writings/building-the-pencil-page/ Building the Pencil Page] by Jonnie Hallman explains what his thinking was and how he built Paper53's page on [https://fiftythree.com/pencil Pencil].
* [http://destroytoday.com/writings/building-the-pencil-page/ Building the Pencil Page] by [[Jonnie Hallman]] explains what his thinking was and how he built Paper53's page on [https://fiftythree.com/pencil Pencil].


==Artificial Intelligence and Machine Learning==
==Artificial Intelligence and Machine Learning==
* [https://vkrakovna.wordpress.com/2018/04/02/specification-gaming-examples-in-ai/ Specification gaming examples in AI] by Victoria Krakovna links to a master list of times artificial intelligence and/or machine learning went horribly wrong, generally in the field of games.  
* [https://vkrakovna.wordpress.com/2018/04/02/specification-gaming-examples-in-ai/ Specification gaming examples in AI] by [[Victoria Krakovna]] links to a master list of times artificial intelligence and/or machine learning went horribly wrong, generally in the field of games.


==Branding==
==Branding==
* [https://library.gv.com/the-three-hour-brand-sprint-3ccabf4b768a The Three Hour Brand Sprint] by GV Library (Google Ventures)
* [[Branding]]


== Color==
== Color==
Line 32: Line 32:


== Content Strategy ==
== Content Strategy ==
''See [[:Category: Writing]] for fiction-writing-specific tools.''
''See [[:Category: Writing]] for tools specific to writing fiction or nonfiction of the "this is a blog post / this is a book" variety.''
''See [[:Category: Copywriting]] for nonfiction/web/UX writing''
''See [[:Category: Copywriting]] for nonfiction/web/UX writing, especially around plain language, voice and tone, etc.''


[[:Category: Content Strategy]] contains an accumulation of content strategy related tools and lessons.
[[:Category: Content Strategy]] contains an accumulation of content strategy related tools and lessons.
* [[Feedback Messaging]] -- I've written this info for like three different companies now, time to store it.


==Copywriting==
==Copywriting==
Line 44: Line 45:


==Data Visualization==
==Data Visualization==
* [https://news.nationalgeographic.com/2015/06/150619-data-points-five-ways-to-lie-with-charts/ A Quick Guide to Spotting Graphics that Lie] by National Geographic
* [[Compound Interest]] is full of educational [[:Category:Science]] and Chemistry infographics. View the [https://www.compoundchem.com Compound Interest website].
* [https://news.nationalgeographic.com/2015/06/150619-data-points-five-ways-to-lie-with-charts/ A Quick Guide to Spotting Graphics that Lie] on [[National Geographic]]
* [https://xkcd.com/1138/ XKCD 1138: Heatmap] points out you can lie with maps too.
* [https://xkcd.com/1138/ XKCD 1138: Heatmap] points out you can lie with maps too.
* [http://diagrammer.duarte.com Duarte's Diagrammer library] contains thousands of diagrams for Powerpoint (and inspiration for everything else).
* [http://diagrammer.duarte.com Duarte's Diagrammer library] contains thousands of diagrams for Powerpoint (and inspiration for everything else).
* [http://www.uxbooth.com/articles/how-to-make-a-dashboard-that-doesnt-suck/ How to Make a Dashboard That Doesn't Suck] by Dylan Wilbanks explains the mindset behind most dashboards at most organizations and how you can make one that's useful.
* [http://www.uxbooth.com/articles/how-to-make-a-dashboard-that-doesnt-suck/ How to Make a Dashboard That Doesn't Suck] by [[Dylan Wilbanks]] explains the mindset behind most dashboards at most organizations and how you can make one that's useful.
* [https://www.smashingmagazine.com/2016/06/improving-ux-for-color-blind-users/#11-graphs The Graphs section of Accessibility: Improving The UX For Color-Blind Users] by [[Adam Silver]] on [[Smashing Magazine]]
* [https://www.smashingmagazine.com/2016/06/improving-ux-for-color-blind-users/#11-graphs The Graphs section of Accessibility: Improving The UX For Color-Blind Users] by [[Adam Silver]] on [[Smashing Magazine]]
* National Geographic provides [https://news.nationalgeographic.com/2015/06/150619-data-points-five-ways-to-lie-with-charts/ A Quick Guide to Spotting Graphics that Lie]. It helps you to see a lot of the dark patterns that we should avoid creating graphics in general.
* [http://viz.wtf/ WTF Visualizations] documents horrible infographics and charts.
* [http://viz.wtf/ WTF Visualizations] documents horrible infographics and charts.


== Design Containers and Components ==
== Design Containers and Components ==
* [[Links vs Buttons]]
===Page Frameworks and Layouts===
===Page Frameworks and Layouts===
''See the Layouts section of [[:Category:Cascading_Style_Sheets | Cascading Style Sheets]]''
''See the Layouts section of [[:Category:Cascading_Style_Sheets | Cascading Style Sheets]]''
* [https://uxdesign.cc/how-white-space-killed-an-enterprise-app-and-why-data-density-matters-b3afad6a5f2a How white space killed an enterprise app (and why data density matters)] by Christie Lenneville and Patrick Deuley
* [https://uxdesign.cc/how-white-space-killed-an-enterprise-app-and-why-data-density-matters-b3afad6a5f2a How white space killed an enterprise app (and why data density matters)] by [[Christie Lenneville]] and [[Patrick Deuley]]
* [https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/ Building better UI Design with Layout Grids] by Nick Babich on Smashing Magazine covers the basics of grids, their history, and grid theory for page layouts.  
* [https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/ Building better UI Design with Layout Grids] by [[Nick Babich]] on [[Smashing Magazin]]e covers the basics of grids, their history, and grid theory for page layouts.  
* [https://aerolab.co/blog/flexbox-grids/ Flexbox and Grids, your layout's best friends] by Eva Ferreria at Aerolab describes using Flexbox and Grid in concert with each other for better page layouts.
* [https://aerolab.co/blog/flexbox-grids/ Flexbox and Grids, your layout's best friends] by [[Eva Ferreria]] at [[Aerolab]] describes using Flexbox and Grid in concert with each other for better page layouts.


===Content Containers===
===Content Containers===
* [[:Category: Containers]]
* [[:Category: Containers]]
* [[Accordions]]
* [[Accordions]]
* [[Cards]]
* [[Carousels]]
* [[Carousels]]
* [[Dialogs]]
* [[Dialogs]]
* [[Tabs]]
* [[Tabs]]
===Messaging and Notifications===
===Messaging and Notifications===
* [[:Category:Messaging and Notifications]]
* [[:Category:Messaging and Notifications]]
===Navigation===
===Navigation===
* [[:Category: Navigation]]
* [[:Category: Navigation]]
* [[Breadcrumbs]]
* [[Clean (Human-Readable) URLs]]
* [[Clean (Human-Readable) URLs]]
* [[Menus]]
* [[Menus]]
* [https://en.wikipedia.org/wiki/Mystery_meat_navigation Mystery Meat navigation] on [[Wikipedia]]
* [https://en.wikipedia.org/wiki/Mystery_meat_navigation Mystery Meat navigation] on [[Wikipedia]]
* [[Pagination]]
* [[Pagination]]
===Form fields===
===Form fields===
* [[Buttons]]
* [[Buttons]]
Line 78: Line 84:
* [[File Upload]]
* [[File Upload]]
* [[Radio Buttons]]
* [[Radio Buttons]]
* [[Select menus|Dropdowns aka Select Menus]]
* [[Select menus | Select Menus aka Dropdowns]]
* [[Sliders]]
* [[Sliders]]
* [[Toggles]]


===Search===
===Search===
Line 89: Line 96:


== Design Systems ==
== Design Systems ==
* [[List of Design Systems]]
* [https://bigmedium.com/ideas/boring-design-systems.html The most exciting design systems are boring] by [[Josh Clark]] discusses why blowing away the existing system and starting fresh may be against your best interests. "The job is not to invent, but to curate."  
* [https://bigmedium.com/ideas/boring-design-systems.html The most exciting design systems are boring] by [[Josh Clark]] discusses why blowing away the existing system and starting fresh may be against your best interests. "The job is not to invent, but to curate."  
* [http://designsystem.morningstar.com Morningstar's design system]
* [https://www.maban.co.uk/projects/front-end-style-guides/ Front-End Style Guides] by [[Anna Debenham]]
* [https://www.maban.co.uk/projects/front-end-style-guides/ Front-End Style Guides] by Anna Debenham
* [https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 Team Models for Scaling a Design System] by [[Nathan Curtis]] on [[Medium]]
* [https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 Team Models for Scaling a Design System] by Nathan Curtis
* [https://articles.uie.com/the-salesforce-team-model-for-scaling-a-design-system/ The Salesforce Team Model for Scaling a Design System] by [[Jina Bolton]]
* [https://articles.uie.com/the-salesforce-team-model-for-scaling-a-design-system/ The Salesforce Team Model for Scaling a Design System] by Jina Bolton


== Examples ==
== Examples ==
Line 100: Line 107:


==Design Visioning activities ==
==Design Visioning activities ==
* [https://www.joelonsoftware.com/2002/05/09/product-vision/ Product Vision] by Joel Spolsky
* [https://www.joelonsoftware.com/2002/05/09/product-vision/ Product Vision] by [[Joel Spolsky]] on his website
* [http://boxesandarrows.com/make-the-commercial-first/ Make the Commercial First] by Steve Turbek
* [http://boxesandarrows.com/make-the-commercial-first/ Make the Commercial First] by [[Steve Turbek]] on [[Boxes and Arrows]]


== Freelancing/Consulting ==
== Freelancing/Consulting ==
* [http://ngenworks.com/business/the-pause-clause/ The Pause Clause] by NGenWorks discusses an entry in their contracts that essentially says if the client is more than 10 days late with a deliverable, the project goes on hold until the client responds.
* [http://ngenworks.com/business/the-pause-clause/ The Pause Clause] by [[NGenWorks]] discusses an entry in their contracts that essentially says if the client is more than 10 days late with a deliverable, the project goes on hold until the client responds.


==Gender issues in Design ==
==Gender issues in Design ==
*[https://motherboard.vice.com/en_us/article/j5a753/design-bias-conference-chairs Dear Conference Organizers: You're Doing Chairs Wrong] by Rose Eveleth at Motherboard discusses how not-thinking about femme-presenting speakers and conference presenters can cause major frustrations around skirts and microphones.
*[https://motherboard.vice.com/en_us/article/j5a753/design-bias-conference-chairs Dear Conference Organizers: You're Doing Chairs Wrong] by [[Rose Eveleth]] at [[Motherboard]] discusses how not-thinking about femme-presenting speakers and conference presenters can cause major frustrations around skirts and microphones.
* [http://www.metafilter.com/166770/The-Unbearable-Pinkness-of-Bleeding The Unbearable Pinkness of Bleeding] on Metafilter
* [http://www.metafilter.com/166770/The-Unbearable-Pinkness-of-Bleeding The Unbearable Pinkness of Bleeding] on [[Metafilter]]


== HTML,  CSS, and JavaScript ==
== HTML,  CSS, and JavaScript ==
Line 147: Line 154:
== Visual Hierarchy ==
== Visual Hierarchy ==
* [https://accssible.com/2019/02/05/proper-ui-hierarchy/ Proper UI Hierarchy] on accssible discusses how flat interfaces damage visual hierarchy and provides some example CSS for correcting them
* [https://accssible.com/2019/02/05/proper-ui-hierarchy/ Proper UI Hierarchy] on accssible discusses how flat interfaces damage visual hierarchy and provides some example CSS for correcting them
== Additional Resources ==
* [https://airtable.com/universe/expqM3OWZoJkjl7wy/monster-list-of-ux-books Monster List of UX Books] by [[Chris Oliver]] on his website

Revision as of 15:25, 9 June 2021

I'm a UX Designer, so these are my UX Designer tools. (Also, there may be good things in Category: Behavior you want to read.)

User Experience Design

Accessibility

Animation

Artificial Intelligence and Machine Learning

Branding

Color

See Tools and Colorblindness for more information on color.

Category:Color

Conferences

  • Confs.tech is a full list of conferences in the tech industry.

Content Strategy

See Category: Writing for tools specific to writing fiction or nonfiction of the "this is a blog post / this is a book" variety. See Category: Copywriting for nonfiction/web/UX writing, especially around plain language, voice and tone, etc.

Category: Content Strategy contains an accumulation of content strategy related tools and lessons.

  • Feedback Messaging -- I've written this info for like three different companies now, time to store it.

Copywriting

See Category: Writing for fiction-writing-specific tools. See Category: Content Strategy for content and publication strategies for the web

Category: Copywriting contains an accumulation of copywriting related tools and lessons.

Data Visualization

Design Containers and Components

Page Frameworks and Layouts

See the Layouts section of Cascading Style Sheets

Content Containers

Messaging and Notifications

Navigation

Form fields

Search

Tables

Design Systems

Examples

Design Visioning activities

Freelancing/Consulting

  • The Pause Clause by NGenWorks discusses an entry in their contracts that essentially says if the client is more than 10 days late with a deliverable, the project goes on hold until the client responds.

Gender issues in Design

HTML, CSS, and JavaScript

Iconography and Imagery

Recruiting

Sound Design

  • A comforting lie tells the story of the background hiss you hear on digital phones, even though they don't produce the hiss.

Tools

Typography

User Behavior

User Research

Visual Hierarchy

  • Proper UI Hierarchy on accssible discusses how flat interfaces damage visual hierarchy and provides some example CSS for correcting them

Additional Resources