coders-guide-to-design

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #golang #android #rust #java #windows #cli #vue #security #pytorch #open-source

coders-guide-to-design

(★ 11)

A curated collection of articles and tutorials for developers to learn about Design and UI/UX

coders-guide-to-design Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Coder's Guide To Design
A curated collection of articles and tutorials for developers to learn about Design and UI/UX

## Set your mind
- [How to become a designer without going to design school](http://www.karenx.com/blog/how-to-become-a-designer-without-going-to-design-school) Karen&nbsp;X&nbsp;Cheng&nbsp;([@karenxcheng](http://twitter.com/karenxcheng)) first step, learn to see is one of the most important advice. Filled with great resources, the rest of her article is worth a read as well.

## Colors
- [It's only color](https://robots.thoughtbot.com/Its-only-color) - A short introduction into basic color theory from Mike&nbsp;Borsare&nbsp;([@mborsare](https://twitter.com/mborsare)) followed by extracting a color palette from an image and applying it to a basic web layout.
- [A Simple Web Developer’s Color Guide](https://www.smashingmagazine.com/2016/04/web-developer-guide-color/) - Laura&nbsp;Elizabeth&nbsp;([@laurium](https://twitter.com/laurium)) shows step by step how to create a color scheme from ground up.

## Information Architecture
- [Defining Design](https://medium.com/hh-design/defining-the-big-d-afc856b4b8d) - Really awesome and short read starting with Information Architecture, moving to UI Design and introduces Visual Design with a focus on Product Design by Chen&nbsp;Ye&nbsp;([@siranachronist](https://twitter.com/siranachronist))
- [Complete Beginner’s Guide to Information Architecture](http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/) - Information architecture is about helping people understand their surroundings and find what they’re looking for, in the real world as well as online. A great read with lots of additional resources to dive deep and follow a set of awesome people on twitter. 
- [Now I get it! How to design clarity in 3 steps](https://blog.prototypr.io/now-i-get-it-b97b022a380c) - Ralph&nbsp;Ammer&nbsp;([@ralphammer](https://twitter.com/ralphammer)) guides with is awesome read from Structure to Process to the actual Design.

## Typography
- [26 Digital Typography Rules for Beginners](https://medium.com/product-design-ux-ui/26-digital-typography-rules-for-beginners-a04c6a5aaff3) - Quick collection of Typography tips by Tom&nbsp;Koszyk&nbsp;([@tomkoszyk](https://twitter.com/tomkoszyk)). Some provide an explenation, some purely a direction.
- [don't fear the internet - Web Typography](http://www.dontfeartheinternet.com/07-web-typography/) - 15 minute Video by Jessica&nbsp;Hische&nbsp;([@jessicahische](https://twitter.com/jessicahische)) about Web Typography. This Video is originally aimed at Designers learning to code, but the concept works in both directions. At around 8 minutes, Jessica shows you step by step how she structures and styles a simple website. 
- [Better web typography in 13 simple steps](http://www.creativebloq.com/typography/better-web-typography-few-simple-steps-5132803) is a series of hands-on tipps. Most useful to it, '07 learn your HTML entities and '11 Take control over line-breaks 
- [A five minute guide to better typography](http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography) is an excellent short scroll tutorial by Pierick&nbsp;Calvez&nbsp;([@pierrickcalvez](https://twitter.com/pierrickcalvez)) with great illustrative examples to implement right away.
## UI Design 
- [How to use contrast in UI Design](https://blog.prototypr.io/how-contrast-works-in-ui-design-21bf75a5a2bf) - A short scroll through blog post by Wojciech&nbsp;Zieliński&nbsp;([@acreno_](https://twitter.com/acreno_)) with examples on contrast can be used to direct attention. 
- [Mastering the Power of Nothing](https://medium.springboard.com/mastering-the-power-of-nothing-a9f6971f1fd) - how to use whitespace in a design to improve user experience. Nick&nbsp;Babich&nbsp;([@101babich](https://twitter.com/101babich)) addresses one of the most valuable assets of interactive design. The whitespace on a page, even though often overlooked, can be every bit as important as the space occupied by UI elements.
- [7 Rules for Creating Gorgeous UI](https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda) - Couple of Suggestions from Erik&nbsp;Kennedy&nbsp;([@erikdkennedy](https://twitter.com/erikdkennedy)) that will improve your Design. 
- [Optical adjustment](https://medium.com/@lukejones/optical-adjustment-b55492a1165c) - Different ways to adjust Elements in the context of an overall visual language, or how a human would perceive the object by Luke&nbsp;Jones&nbsp;([@lukejones](https://twitter.com/lukejones)). Ever tried to center a play button?
- [Stealing Your Way to Original Designs](http://danmall.me/articles/stealing-your-way-to-original-designs/) Dan&nbsp;Mall&nbsp;([@danmall](https://twitter.com/danmall)) sharing his process to come up with an individual design. The more obscure your references, the more sources you combine, the more moves away from the original you can take, the more original your design will become.
- [Little UI Details](https://twitter.com/i/moments/880688233641848832) - A collection of little tips from Steve&nbsp;Schoger&nbsp;([@steveschoger](https://twitter.com/steveschoger)) to improve your visual design skills with the little details that make a big difference 
- [A framework for creating a predictable & harmonious spacing system for faster design-dev handoff](https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c) The 3Cs is a great concept of a systematic approach to UI Design can result in a way more readable and consistant design across the entire solution. Priyanka&nbsp;Godbole&nbsp;([@priyankagodbole](https://twitter.com/priyankagodbole)) guides through the rules for Containers, Content and Components. The various examples on how the rules are being applied to form fields are a must read.
- [Optical Effects in User Interfaces (for True Nerds)](https://medium.muz.li/optical-effects-9fca82b4cd9a) - How to make optically balanced icons, correct shape alignment, and perfect corner rounding by Slava&nbsp;Shestopalov&nbsp;([@shestopalov_v](https://twitter.com/shestopalov_v)).
- [A developers guide to web design for non-designers](https://medium.freecodecamp.org/a-developers-guide-to-web-design-for-non-designers-1f64ce28c38d) - A good intro showing the importance of using the right tools for the right purpose by Patrik&nbsp;Krupar&nbsp;([@pkrupar](https://twitter.com/@pkrupar))

# Ressources
Find a collection of twitter accounts, blogs and helpful ressources to keep you

## Amazing people to follow on twitter
Check out the [A Coder's Guide To Design Twitter list](https://twitter.com/AlexG0G/lists/a-coder-s-guide-to-design)

### Contributors
- Alexandru&nbsp;Gogan&nbsp;[@alexg0g](https://twitter.com/@alexg0g) 
- Ralf&nbsp;Hoffmeister&nbsp;[@ralfhoffmeister](https://twitter.com/@ralfhoffmeister)

### Featured articles and posts
- Chen&nbsp;Ye&nbsp;[@siranachronist](https://twitter.com/siranachronist)
- Dan&nbsp;Mall&nbsp;[@danmall](https://twitter.com/danmall)
- Erik&nbsp;Kennedy&nbsp;[@erikdkennedy](https://twitter.com/erikdkennedy)
- Jessica&nbsp;Hische&nbsp;[@jessicahische](https://twitter.com/jessicahische)
- Karen&nbsp;X&nbsp;Cheng&nbsp;[@karenxcheng](http://twitter.com/karenxcheng)
- Laura&nbsp;Elizabeth&nbsp;[@laurium](https://twitter.com/laurium)
- Luke&nbsp;Jones&nbsp;[@lukejones](https://twitter.com/lukejones)
- Mike&nbsp;Borsare&nbsp; [@mborsare](https://twitter.com/mborsare)
- Nick&nbsp;Babich&nbsp;[@101babich](https://twitter.com/101babich)
- Pierrick&nbsp;Calvez&nbsp;[@pierrickcalvez](https://twitter.com/pierrickcalvez)
- Priyanka&nbsp;Godbole&nbsp;[@priyankagodbole](https://twitter.com/priyankagodbole)
- Ralph&nbsp;Ammer&nbsp;[@ralphammer](https://twitter.com/ralphammer)
- Slava&nbsp;Shestopalov&nbsp;[@shestopalov_v](https://twitter.com/shestopalov_v)
- Steve&nbsp;Schoger&nbsp;[@steveschoger](https://twitter.com/steveschoger)
- Tom&nbsp;Koszyk&nbsp;[@tomkoszyk](https://twitter.com/tomkoszyk)
- Wojciech&nbsp;Zieliński&nbsp;[@acreno_](https://twitter.com/acreno_)
- Patrick&nbsp;Krupar&nbsp;[@pkrupar](https://twitter.com/@pkrupar)

coders-guide-to-design

coders-guide-to-design Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

coders-guide-to-design

coders-guide-to-design Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README