├── LICENSE ├── README.md ├── books └── README.md ├── color-tools └── README.md ├── design-courses └── README.md ├── image-tools └── README.md ├── inspiration └── README.md └── type-tools └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Hello Web Books 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hello Web Design: Learn Web Design Fundamentals Aimed at Programmers and Non-Designers 2 | 3 | Hey friends! This repository has been created to hold additional files and 4 | information for *[Hello Web Design](https://hellowebbooks.com/learn-design)*, a 5 | really friendly book teaching beginner web design aimed at programmers and 6 | non-designers. 7 | 8 | See [HelloWebBooks.com](http://hellowebbooks.com) for how to order (starts at $14.95 9 | for eBook files), a blog with additional tutorials, and more information. 10 | 11 | ## Contents 12 | 13 | ### Continuing your education 14 | 15 | * [Inspiration 16 | Resources](https://github.com/hellowebbooks/hellowebdesign/tree/master/inspiration) 17 | * [Recommended 18 | Books](https://github.com/hellowebbooks/hellowebdesign/tree/master/books) 19 | * [Design 20 | Courses](https://github.com/hellowebbooks/hellowebdesign/tree/master/design-courses) 21 | 22 | ### Design tools 23 | 24 | * [Color Tools and 25 | Resources](https://github.com/hellowebbooks/hellowebdesign/tree/master/color-tools) 26 | * [Typography and web 27 | fonts](https://github.com/hellowebbooks/hellowebdesign/tree/master/type-tools) 28 | * [Images and 29 | Imagery](https://github.com/hellowebbooks/hellowebdesign/tree/master/image-tools)) 30 | 31 | ## Final thoughts 32 | 33 | Check out the Hello Web Books website if you haven’t already 34 | ([hellowebbooks.com](http://hellowebbooks.com)) and sign up for the newsletter — I send announcements of workshops, new books, and free tutorials fairly regularly. 35 | 36 | You can also keep in touch with me through the Hello Web Books Twitter account 37 | ([twitter.com/hellowebbooks](http://twitter.com/hellowebbooks)) or 38 | through my personal account 39 | ([twitter.com/limedaring](http://twitter.com/limedaring)). 40 | 41 | Best of luck and keep in touch! 42 | -------------------------------------------------------------------------------- /books/README.md: -------------------------------------------------------------------------------- 1 | # Recommended books 2 | 3 | Other books that you could read to continue your design education. Note, I use 4 | affiliate links where they're offered (Amazon links, for example) for a couple 5 | extra cents to support myself. 6 | 7 | ***The Non-Designer’s Design Book*** **([http://amzn.to/2pRnhZJ](http://amzn.to/2pRnhZJ)) by Robin Williams** 8 | 9 | A classic. This book goes into the principles we covered in more detail and covers traditional design concepts that we didn’t cover (like repetition, proximity, and contrast). 10 | 11 | ***Thinking with Type*** **([http://amzn.to/2plhxUO](http://amzn.to/2plhxUO)) by Ellen Lupton** 12 | 13 | The definitive guide to typography and type history, covering not just traditional print typography but also web typography. 14 | 15 | ***Don’t Make Me Think*** **([http://amzn.to/2p7OLuJ](http://amzn.to/2p7OLuJ)) by Steve Krug** 16 | 17 | Dive into user experience, information design, and usability in this wonderful, easy-to-read book. Provides insights into how users surf and experience the web that will help you build more intuitive and better working websites. 18 | 19 | ***A Book Apart*** **([https://abookapart.com](https://abookapart.com)) by Steve Krug** 20 | 21 | Fantastic, short (150 pages or less) books on almost every web topic available — from accessibility, front-end development, responsive design, and more. 22 | -------------------------------------------------------------------------------- /color-tools/README.md: -------------------------------------------------------------------------------- 1 | # Color Tools 2 | 3 | Color theory and color picking can be tough! Some recommended resources: 4 | 5 | ### Color pickers and palettes 6 | 7 | **Colormind** ([http://www.colormind.io/](http://www.colormind.io/)) 8 | 9 | **Adobe Color CC** ([https://color.adobe.com/](https://color.adobe.com/)) 10 | 11 | **Material Design Palette** ([materialpalette.com](https://www.materialpalette.com/)) 12 | 13 | **Colorbook.me** ([https://colorbook.me/](https://colorbook.me/)) 14 | The latest & most popular color palettes trending on Dribbble right now. 15 | 16 | **Flat UI Colors 2** ([http://flatuicolors.com/](http://flatuicolors.com/)) 17 | 280 handpicked colors all ready for copy & paste. 18 | 19 | 20 | ### Color theory 21 | 22 | **A Simple Web Developers Guide to Color** ([https://www.smashingmagazine.com/2016/04/web-developer-guide-color/](https://www.smashingmagazine.com/2016/04/web-developer-guide-color/)) 23 | 24 | **WebAIM Contrast Checker** ([bit.ly/1kVArrR](http://bit.ly/1kVArrR)) 25 | -------------------------------------------------------------------------------- /design-courses/README.md: -------------------------------------------------------------------------------- 1 | # Design Courses 2 | 3 | There are quite a few other design courses online teaching web design. Here are 4 | some I've found (Note: most of these have been tested myself so I cannot 5 | vouch for quality.) 6 | 7 | **Skillshare ([https://www.skillshare.com/browse/design](https://www.skillshare.com/browse/design))** 8 | 9 | This online course website has a wide-ranging selection of design videos and tutorials, from learning Adobe Illustrator, logo design, lettering, and more. The best online resource for design and visual tutorials. 10 | 11 | **Theory Sprints ([http://studiofellow.com/theory-sprints/](http://studiofellow.com/theory-sprints/)) by Jarrod Drysdale** 12 | 13 | Great online course to help designers become better designers. If you’re looking to jump into a career in design, this is the online course for you. 14 | 15 | **Hack Design ([https://hackdesign.org/](https://hackdesign.org/))** 16 | 17 | Weekly emailed design lessons. 18 | 19 | **DesignBetter.co 20 | ([https://www.designbetter.co/](https://www.designbetter.co/))** 21 | 22 | Best practices, stories, and insights from designers. Consists of books, 23 | podcasts, and more. 24 | -------------------------------------------------------------------------------- /image-tools/README.md: -------------------------------------------------------------------------------- 1 | # Image Tools and Recommendations 2 | 3 | ## Stock Photos 4 | 5 | **Unsplash** ([https://unsplash.com/](https://unsplash.com/)) 6 | 7 | **Burst** 8 | ([https://burst.shopify.com/free-images](https://burst.shopify.com/free-images)) 9 | 10 | **picjumbo** ([https://picjumbo.com/](https://picjumbo.com/)) 11 | 12 | **IM Free** ([http://imcreator.com/free](http://imcreator.com/free)) 13 | 14 | **Gratisography** ([http://www.gratisography.com/](http://www.gratisography.com/)) 15 | 16 | **iStock** ([istockphoto.com](http://istockphoto.com)) 17 | 18 | ## Icons and graphics 19 | 20 | **Noun Project** ([thenounproject.com](http://thenounproject.com)) 21 | 22 | **Fiverr** ([fiverr.com](http://fiverr.com)) 23 | 24 | -------------------------------------------------------------------------------- /inspiration/README.md: -------------------------------------------------------------------------------- 1 | # Inspiration Resources 2 | 3 | Places on the web you can use to collect design inspiration. 4 | 5 | ### Inspiration collection websites 6 | 7 | **Dribbble** ([https://dribbble.com/](https://dribbble.com/)) 8 | 9 | "Show and tell for designers." Dribbble lets artists and designers showcase their work, with a particular focus on small elements or design details. 10 | 11 | **PatternTap** ([http://zurb.com/patterntap](http://zurb.com/patterntap)) 12 | 13 | Collection of design resources with the ability to narrow down by element, style, device, and more. 14 | 15 | **Awwwards** ([https://www.awwwards.com/](https://www.awwwards.com/)) 16 | 17 | Features screenshots of community-chosen web designs — a great place to see beautiful design work and current trends. 18 | 19 | **Unmatched Style** ([http://unmatchedstyle.com/](http://unmatchedstyle.com/)) 20 | 21 | Another web design collection site, this one also includes editorial comments on what makes a design great and why it was picked. 22 | 23 | **UI Patterns** ([uipatterns.io](http://uipatterns.io)) 24 | 25 | A collection of patterns that you could use to solve common design and user interface problems, such as designing a date-picker. Most examples are based on mobile interfaces. 26 | 27 | ### Instagram accounts 28 | 29 | * [@ux_ui_wireframes](https://www.instagram.com/ux_ui_wireframes/) 30 | -------------------------------------------------------------------------------- /type-tools/README.md: -------------------------------------------------------------------------------- 1 | # Typography Tools and Web Fonts 2 | 3 | ### Blog posts 4 | 5 | **[A Five Minute Guide to Better 6 | Typography](http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography)** 7 | 8 | ### Webfonts 9 | 10 | **Google Fonts** ([https://fonts.google.com/](https://fonts.google.com/)) 11 | 12 | **Typekit** ([https://typekit.com/](https://typekit.com/)) 13 | 14 | **Brick** ([http://brick.im/](http://brick.im/)) 15 | 16 | ### Typeface Inspiration 17 | 18 | **Font Pair** ([http://fontpair.co](http://fontpair.co/)) 19 | 20 | **Beautiful Web Type** ([beautifulwebtype.com](http://beautifulwebtype.com/)) 21 | 22 | **Typewolf** ([https://www.typewolf.com/](https://www.typewolf.com/)) 23 | 24 | **Typ.io** ([https://typ.io/libraries/google](https://typ.io/libraries/google)) 25 | 26 | **Canva Font Combinations** ([https://www.canva.com/font-combinations/](https://www.canva.com/font-combinations/)) 27 | 28 | **TypeSource** ([http://tobiasahlin.com/typesource/](http://tobiasahlin.com/typesource/)) 29 | --------------------------------------------------------------------------------