Skip to content

Instantly share code, notes, and snippets.

@realph
Last active April 6, 2020 21:47
Show Gist options
  • Save realph/b2f11c22a75e4e8ef002f7e3964a4dc8 to your computer and use it in GitHub Desktop.
Save realph/b2f11c22a75e4e8ef002f7e3964a4dc8 to your computer and use it in GitHub Desktop.

Revisions

  1. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -63,4 +63,5 @@ https://lawsofux.com/

    ### Atomic Design Principles
    > TLDR: https://bradfrost.com/blog/post/atomic-web-design/
    Book: http://atomicdesign.bradfrost.com/
  2. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -62,6 +62,5 @@ Some of these tutorials may be missing some of the most-recent features that hav
    https://lawsofux.com/

    ### Atomic Design Principles
    TLDR: https://bradfrost.com/blog/post/atomic-web-design/

    > TLDR: https://bradfrost.com/blog/post/atomic-web-design/
    Book: http://atomicdesign.bradfrost.com/
  3. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -63,4 +63,5 @@ https://lawsofux.com/

    ### Atomic Design Principles
    TLDR: https://bradfrost.com/blog/post/atomic-web-design/

    Book: http://atomicdesign.bradfrost.com/
  4. realph revised this gist Apr 6, 2020. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -56,11 +56,11 @@ Some of these tutorials may be missing some of the most-recent features that hav
    * [Prototyping and Interactions in Figma](https://www.youtube.com/watch?v=E-H06QNkHTU)
    * [Working with Contraints and Adaptive Layout in Figma](https://www.youtube.com/watch?v=n5LOZm3mdY4)

    # Other Resources
    ## Other Resources

    ## The Laws of UX
    ### The Laws of UX
    https://lawsofux.com/

    ## Atomic Design Principles
    ### Atomic Design Principles
    TLDR: https://bradfrost.com/blog/post/atomic-web-design/
    Book: http://atomicdesign.bradfrost.com/
  5. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ Heard good things about this book.

    ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10)

    Well-regarded bible on UX design. Does what it says on the tin by stressing one of the most important priciples of screen design — don't make the user think.
    Well-regarded bible on UX design. Does what it says on the tin by stressing one of the most important priciples of screen design — never making the user think.

    <img src="https://i.imgur.com/qQHjEZRl.jpg" width="70">

  6. realph revised this gist Apr 6, 2020. 1 changed file with 6 additions and 8 deletions.
    14 changes: 6 additions & 8 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -32,21 +32,21 @@ There is a large pool of design tools to choose from, but if there was one tool

    In the last few years it's become *the* tool to use for interface designers. Why do people love it, you ask? Some years back the popular design tools (mainly Adobe and Sketch) started to plateau, and they also did a good job of convincing designers at the time that the design tool was never going to close the gap between design and engineering, and that handoff, the process where designers "hand-off" finished designs for engineers to implement, would remain a somewhat arduous and painful task forevermore. This went on to spawn a new market of separate handoff tools, but that's another story.

    While Sketch and Adobe had taken their eye off the ball, a little tool called Figma came along and they weren't shy about pushing the envelope. This brought Figma closer to the engineering tools that were responsible for implementing these designs. Yay!
    With Sketch and Adobe having taken their eye off the ball, a little tool called Figma came along and it wasn't shy about pushing the envelope, and slowly nudging itself closer to the engineering tools that were responsible for implementing these designs. Yay!

    Fast-forward a few years and many innovations later, Figma has dethroned Sketch and become the defacto interface design tool in the industry. It's also platform agnostic (yay!), running on Mac, PC, Linux, and Web.
    Fast-forward a few years and many innovations later, Figma has dethroned Sketch and become the defacto interface design tool in the industry. It's also platform agnostic (yay!), running on Mac, PC, Linux, and Web. Also this wraps up the the history lesson. Another yay!

    --

    End of history lesson. Another yay!
    ### Figma tutorials

    Here are some great tutorials from the Figma team which should help you get started.
    Here are some great tutorials from the Figma team's YouTube channel which should help you get started.

    1. [What's Figma](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4&index=1)
    2. [The Basics (playlist)](https://www.youtube.com/watch?v=5i-ebNTjad8&list=PLXDU_eVOJTx6zk5MDarIs0asNoZqlRG23)
    3. [Components (playlist)](https://www.youtube.com/watch?v=k74IrUNaJVk&list=PLXDU_eVOJTx5LSjOmeBYMuvaa4UayfMe4)

    YouTube is also a fantastic resource for Figma tutorials. Here's a few videos I found that delve into process and techniques.
    Speaking of YouTube, here's some more videos I found that delve into process and techniques.

    Some of these tutorials may be missing some of the most-recent features that have come to Figma in the last 12 months. However they're still a good watch.

    @@ -58,11 +58,9 @@ Some of these tutorials may be missing some of the most-recent features that hav

    # Other Resources

    Here are some more resources on systems and principles.

    ## The Laws of UX
    https://lawsofux.com/

    ## Atomic Design Principles
    Gist: https://bradfrost.com/blog/post/atomic-web-design/
    TLDR: https://bradfrost.com/blog/post/atomic-web-design/
    Book: http://atomicdesign.bradfrost.com/
  7. realph revised this gist Apr 6, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -12,13 +12,13 @@ Haven't read it before but it's often heralded as good entry point for designing

    ### [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789)

    Heard good things about this book too.
    Heard good things about this book.

    <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70">

    ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10)

    Well-regarded bible on UX design.
    Well-regarded bible on UX design. Does what it says on the tin by stressing one of the most important priciples of screen design — don't make the user think.

    <img src="https://i.imgur.com/qQHjEZRl.jpg" width="70">

  8. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ Heard good things about this book too.

    ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10)

    Well-regarded bible on UX design. Full of good examples too!
    Well-regarded bible on UX design.

    <img src="https://i.imgur.com/qQHjEZRl.jpg" width="70">

  9. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@ Well-regarded bible on UX design. Full of good examples too!

    I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough!

    # Tool~s~
    ## Tool~s~

    There is a large pool of design tools to choose from, but if there was one tool I'd recommend getting familiar with it would be [Figma](https://www.figma.com/).

  10. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ Heard good things about this book too.

    Well-regarded bible on UX design. Full of good examples too!

    <img src="https://refactoring-ui.nyc3.cdn.digitaloceanspaces.com/landing/book-cover-sm.png" width="70">
    <img src="https://i.imgur.com/qQHjEZRl.jpg" width="70">

    ### [Refactoring UI](https://refactoringui.com/)

  11. realph revised this gist Apr 6, 2020. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -2,20 +2,26 @@

    ## Books

    <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70">
    <img src="https://i.pinimg.com/originals/c2/b0/67/c2b06780a1e14e66111e16229e6b0696.jpg" width="70">

    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

    Haven't read it before but it's often heralded as good entry point for designing interfaces.

    <img src="https://is1-ssl.mzstatic.com/image/thumb/Publication118/v4/f9/0a/4a/f90a4a08-8e82-ec86-bbb0-2d97c74836a1/9780134778259.jpg/320x0w.jpg" width="70">

    ### [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789)

    Heard good things about this book too.

    <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70">

    ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10)

    Well-regarded bible on UX design. Full of good examples too!

    <img src="https://refactoring-ui.nyc3.cdn.digitaloceanspaces.com/landing/book-cover-sm.png" width="70">

    ### [Refactoring UI](https://refactoringui.com/)

    I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough!
  12. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,7 @@
    ## Books

    <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70">

    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

    Haven't read it before but it's often heralded as good entry point for designing interfaces.
  13. realph revised this gist Apr 6, 2020. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,6 @@
    ## Books

    <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70">

    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

    Haven't read it before but it's often heralded as good entry point for designing interfaces.
  14. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,7 @@

    ## Books


    <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="50">
    <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70">

    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

  15. realph revised this gist Apr 6, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,8 @@

    ## Books

    ![](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg){:width="50px"}

    <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="50">

    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

  16. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    ## Books

    ![](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg | width=60)
    ![](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg){:width="50px"}

    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

  17. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    ## Books

    ![](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg | width=60px)
    ![](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg | width=60)

    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

  18. realph revised this gist Apr 6, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    ## Books

    ![designing-interfaces](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg =60px)
    ![](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg | width=60px)

    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

  19. realph revised this gist Apr 6, 2020. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,22 @@
    # Getting started with interface design

    # Books
    ## Books

    ![designing-interfaces](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg)
    ![designing-interfaces](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg =60px)

    ## [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)
    ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

    Haven't read it before but it's often heralded as good entry point for designing interfaces.

    ## [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789)
    ### [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789)

    Heard good things about this book too.

    ## [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10)
    ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10)

    Well-regarded bible on UX design. Full of good examples too!

    ## [Refactoring UI](https://refactoringui.com/)
    ### [Refactoring UI](https://refactoringui.com/)

    I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough!

  20. realph revised this gist Apr 6, 2020. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,8 @@

    # Books

    ![designing-interfaces](https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg)

    ## [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

    Haven't read it before but it's often heralded as good entry point for designing interfaces.
    @@ -50,7 +52,7 @@ Some of these tutorials may be missing some of the most-recent features that hav

    # Other Resources

    Here are some more resources on systems and principles
    Here are some more resources on systems and principles.

    ## The Laws of UX
    https://lawsofux.com/
  21. realph revised this gist Apr 6, 2020. 1 changed file with 3 additions and 7 deletions.
    10 changes: 3 additions & 7 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -2,23 +2,19 @@

    # Books

    ## Designing Interfaces
    https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1
    ## [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1)

    Haven't read it before but it's often heralded as good entry point for designing interfaces.

    ## [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789)

    Heard good things about this book too.

    ## Don't Make Me Think
    https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10
    ## [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10)

    Well-regarded bible on UX design. Full of good examples too!

    ## Refactoring UI

    https://refactoringui.com/
    ## [Refactoring UI](https://refactoringui.com/)

    I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough!

  22. realph revised this gist Apr 6, 2020. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -7,8 +7,7 @@ https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=

    Haven't read it before but it's often heralded as good entry point for designing interfaces.

    ## Simple and Usable Web, Mobile, and Interaction Design
    https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789
    ## [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789)

    Heard good things about this book too.

    @@ -32,7 +31,9 @@ In the last few years it's become *the* tool to use for interface designers. Why
    While Sketch and Adobe had taken their eye off the ball, a little tool called Figma came along and they weren't shy about pushing the envelope. This brought Figma closer to the engineering tools that were responsible for implementing these designs. Yay!

    Fast-forward a few years and many innovations later, Figma has dethroned Sketch and become the defacto interface design tool in the industry. It's also platform agnostic (yay!), running on Mac, PC, Linux, and Web.
    --

    --

    End of history lesson. Another yay!

    Here are some great tutorials from the Figma team which should help you get started.
  23. realph created this gist Apr 6, 2020.
    63 changes: 63 additions & 0 deletions interface-design-getting-started.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    # Getting started with interface design

    # Books

    ## Designing Interfaces
    https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1

    Haven't read it before but it's often heralded as good entry point for designing interfaces.

    ## Simple and Usable Web, Mobile, and Interaction Design
    https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789

    Heard good things about this book too.

    ## Don't Make Me Think
    https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10

    Well-regarded bible on UX design. Full of good examples too!

    ## Refactoring UI

    https://refactoringui.com/

    I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough!

    # Tool~s~

    There is a large pool of design tools to choose from, but if there was one tool I'd recommend getting familiar with it would be [Figma](https://www.figma.com/).

    In the last few years it's become *the* tool to use for interface designers. Why do people love it, you ask? Some years back the popular design tools (mainly Adobe and Sketch) started to plateau, and they also did a good job of convincing designers at the time that the design tool was never going to close the gap between design and engineering, and that handoff, the process where designers "hand-off" finished designs for engineers to implement, would remain a somewhat arduous and painful task forevermore. This went on to spawn a new market of separate handoff tools, but that's another story.

    While Sketch and Adobe had taken their eye off the ball, a little tool called Figma came along and they weren't shy about pushing the envelope. This brought Figma closer to the engineering tools that were responsible for implementing these designs. Yay!

    Fast-forward a few years and many innovations later, Figma has dethroned Sketch and become the defacto interface design tool in the industry. It's also platform agnostic (yay!), running on Mac, PC, Linux, and Web.
    --
    End of history lesson. Another yay!

    Here are some great tutorials from the Figma team which should help you get started.

    1. [What's Figma](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4&index=1)
    2. [The Basics (playlist)](https://www.youtube.com/watch?v=5i-ebNTjad8&list=PLXDU_eVOJTx6zk5MDarIs0asNoZqlRG23)
    3. [Components (playlist)](https://www.youtube.com/watch?v=k74IrUNaJVk&list=PLXDU_eVOJTx5LSjOmeBYMuvaa4UayfMe4)

    YouTube is also a fantastic resource for Figma tutorials. Here's a few videos I found that delve into process and techniques.

    Some of these tutorials may be missing some of the most-recent features that have come to Figma in the last 12 months. However they're still a good watch.

    * [Figma 101: An introduction tutorial](https://www.youtube.com/watch?v=cCNLD5IZY34)
    * [Design a Basic Layout in Figma](https://www.youtube.com/watch?v=L4YMVsVA8Q4)
    * [Components and Nesting in Figma](https://www.youtube.com/watch?v=Cu3gykpJwi0)
    * [Prototyping and Interactions in Figma](https://www.youtube.com/watch?v=E-H06QNkHTU)
    * [Working with Contraints and Adaptive Layout in Figma](https://www.youtube.com/watch?v=n5LOZm3mdY4)

    # Other Resources

    Here are some more resources on systems and principles

    ## The Laws of UX
    https://lawsofux.com/

    ## Atomic Design Principles
    Gist: https://bradfrost.com/blog/post/atomic-web-design/
    Book: http://atomicdesign.bradfrost.com/