└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # UI-UX-For-Noobs [STAR] 2 | 3 | ## Some tips and free resources for making nice looking stuff. Open to contributions! 4 | 5 | ### Contents 6 | - **[1 - Fonts](#1---fonts)** 7 | 8 | - **[2 - Vector/Graphic Sites](#2---vectorgraphic-sites)** 9 | - **SVG Waves, Lines, Blobs etc** 10 | - **Icons** 11 | - **Placeholders** 12 | 13 | - **[3 - Hex Colours](#3---hex-colours)** 14 | - **Common Colours** 15 | - **Companies** 16 | - **Red** 17 | - **Green** 18 | - **Blue** 19 | 20 | - **[4 - UI/UX Fundamentals](#4---uiux-fundamentals)** 21 | - **Colour and Contrast** 22 | - **Visual Heirarchy** 23 | - **Complexity vs Simplicity** 24 | - **Consistency** 25 | - **Scale** 26 | 27 | - **[5 - Dimensions](#5---dimensions)** 28 | - **Screen Sizes** 29 | - **Text/Component Dimensions** 30 | 31 | - **[6 - Figma and Code Components](#6---figma-and-code-components)** 32 | - **Figma Plugins** 33 | - **Figma Components** 34 | - **Code Components/Libraries** 35 | 36 | - **[7 - Credit](#7---credit)** 37 | 38 | 39 | # 1 - Fonts 40 | - **[DMSans](https://fonts.google.com/specimen/DM+Sans)**: Similar to Montserrat, good for large text such as heros. 41 | - **[Lato](https://fonts.google.com/specimen/Lato)**: Formal and good for small text. 42 | - **[Montserrat](https://fonts.google.com/specimen/Montserrat)**: Bold and rounded, good for logos and headers. 43 | 44 | # 2 - Vector/Graphic Sites 45 | - **SVG Waves, Lines, Blobs etc** 46 | - **[getwaves.io](https://getwaves.io/)**: Get custom svg waves to paste and act as content dividers. 47 | - **[haikei.app](https://haikei.app/)**: Custom svg objects like blobs, stars, waves etc. Creators of getwaves.io. 48 | - **[bgjar.com](https://bgjar.com/)**: Cool custom svg's such as lines, waves for background. 49 | 50 | - **Icons** 51 | - **[svgrepo.com](https://www.svgrepo.com/)**: 300,000 svg icons and vectors for commercial use. 52 | - **[fontawsome.com](https://fontawesome.com/)**: Icons with simple html code ready to paste. 53 | 54 | - **Placeholders** 55 | - **[uifaces.co](https://uifaces.co/)**: Pictures of people for profile icons. Filter by age, gender etc. 56 | - **[placeholder.com](https://placeholder.com/)**: Easily link placeholder images online for custom sizes. 57 | - **[loremipsum.io](https://loremipsum.io/)**: Quickly generate dummy text. 58 | 59 | # 3 - Hex Colours 60 | - **Common Colours** 61 | - **Pure White**: `#ffffff` ![#ffffff](https://via.placeholder.com/15/ffffff/000000?text=+) 62 | - **Soft White**: `#f8faff` ![#f8faff](https://via.placeholder.com/15/f8faff/000000?text=+) 63 | - **Pure Black**: `#000000` ![#000000](https://via.placeholder.com/15/000000/000000?text=+) 64 | - **Soft Black**: `#333333` ![#333333](https://via.placeholder.com/15/333333/000000?text=+) 65 | 66 | - **Companies** 67 | - **Twitter Blue**: `#1da1f2` ![#1da1f2](https://via.placeholder.com/15/1da1f2/000000?text=+) 68 | - **Facebook Blue**: `#4267b2` ![#4267b2](https://via.placeholder.com/15/4267b2/000000?text=+) 69 | - **Discord Old Blue**: `#7289da` ![#7289da](https://via.placeholder.com/15/7289da/000000?text=+) 70 | - **Stripe Blue**: `#008cdd` ![#008cdd](https://via.placeholder.com/15/008cdd/000000?text=+) 71 | - **Shopify Green**: `#96bf48` ![#96bf48](https://via.placeholder.com/15/96bf48/000000?text=+) 72 | - **Robinhood Green**: `#78a175` ![#78a175](https://via.placeholder.com/15/78a175/000000?text=+) 73 | 74 | - **Red** 75 | - **Pure Red**: `#ff0000` ![#ff0000](https://via.placeholder.com/15/ff0000/000000?text=+) 76 | - **Fun Red**: `#e17a77` ![#e17a77](https://via.placeholder.com/15/e17a77/000000?text=+) 77 | - **Fun Orange**: `#f4af78` ![#f4af78](https://via.placeholder.com/15/f4af78/000000?text=+) 78 | 79 | - **Green** 80 | - **Pure Green**: `#008000` ![#008000](https://via.placeholder.com/15/008000/000000?text=+) 81 | - **Fun Green**: `#85ec6b` ![#85ec6b](https://via.placeholder.com/15/85ec6b/000000?text=+) 82 | - **Neon Green**: `#39ff14` ![#39ff14](https://via.placeholder.com/15/39ff14/000000?text=+) 83 | 84 | - **Blue** 85 | - **Pure Blue**: `#0000ff` ![#0000ff](https://via.placeholder.com/15/0000ff/000000?text=+) 86 | - **Fun Blue**: `#729fec` ![#729fec](https://via.placeholder.com/15/729fec/000000?text=+) 87 | - **Fun Purple**: `#5900cc` ![#5900cc](https://via.placeholder.com/15/5900cc/000000?text=+) 88 | 89 | # 4 - UI/UX Fundamentals 90 | - **Color And Contrast**: The mix of different colours. No more than 3 different colours. Shades are nice, but important components should be easily visible. 91 | - **White Space**: The white space between components. White is nice, use it. Space out your components, but not too much. Keep an overall symmetry with your spacing. 92 | 93 | - **Visual Heirarchy**: The order in which your eyes input the site. For example looks at logo, then button then... Use scale, color and contrast to make important content stand out and be viewed first. Things such as hero and logo should be viewed first. 94 | 95 | - **Complexity vs Simplicity**: Most of the time, less is better. Too much content can make your site cluttered and messy, especially on mobile devices. Your design should be clear and straight to the point, especially with important components writtent above. 96 | 97 | - **Consistency**: The design colours and feel should be similar throughout the whole user flow. Helps build trust and users remember your theme. No consintancy can be daunting and look like you stuck different projects togethor. 98 | 99 | - **Scale**: Large enough so older people can read your text. No more than 4 text sizes. 100 | 101 | # 5 - Dimensions 102 | - **Screen Sizes [WxH in px] (With Proportion of Users)** 103 | - **Small Mobile**: 360x640 (23%) 104 | - **Average Laptop**: 1366x768 (12%) 105 | - **Large Desktop**: 1920x1080 (7%) 106 | - **Average Mobile**: 375x667 (5%) 107 | - **Average Desktop**: 1440x900 (3%) 108 | - **Large Mobile**: 720x1280 (%3) 109 | 110 | - **Text/Component Dimensions** 111 | - **NavBar Height**: 64px 112 | - **Hero Image**: 16:9 113 | - **Paragraph Text Size**: 16px (21px for text heavy sites) 114 | - **Secondary Text Size**: 14px 115 | - **Input Field Text Height**: >16px 116 | - **Small Input/Buttons Height**: 28px 117 | - **Medium Input/Buttons Height**: 37px 118 | - **Large Input/Buttons Height**: 46px 119 | 120 | # 6 - Figma and Code Components 121 | - **Figma Plugins** 122 | - **[Contrast](https://www.figma.com/community/plugin/748533339900865323/Contrast)**: Color contrast checker. 123 | - **[Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash)**: Free stock images. 124 | - **[Figmotion](https://www.figma.com/community/plugin/733025261168520714/Figmotion)**: Figma animation tool. 125 | - **[Iconify](https://www.figma.com/community/plugin/735098390272716381/Iconify)**: SVG icons. 126 | - **[Mapsicle](https://www.figma.com/community/plugin/736458162635847353/Mapsicle)**: Create and edit custom maps. 127 | 128 | - **Figma Components** 129 | - **[Lo-fi Wireframe Kit](https://www.figma.com/community/file/887892609124245416)**: For creating wireframes. 130 | - **[Food Delivery App UI](https://www.figma.com/community/file/893381127703378146)**: A modern food delivery app UI kit. 131 | - **[Pegasus Design System](https://www.figma.com/community/file/889142897767055377)**: Modern components kit. 132 | - **[Apple IOS 15 UI Kit](https://www.figma.com/community/file/984106517828363349)**: Apple iOS UI kit. 133 | - **[Marvie IOS Dark Theme](https://www.figma.com/community/file/827876058453173134)**: Apple dark theme UI kit. 134 | - **[Material Design Icons](https://www.figma.com/community/file/878585965681562011)**: Icons for material design. 135 | 136 | - **Code Components/Libraries** 137 | - **[Bootstrap](https://getbootstrap.com/)**: HTML/CSS/React components and styling. 138 | - **[Material UI](https://material-ui.com/)**: React components, look like Google's. 139 | - **[Tailwind UI](https://tailwindui.com/)**: Professional components for HTML, React and Vue. 140 | - **[Tailwind CSS](https://tailwindcss.com/)**: Easy and effective CSS styling. 141 | 142 | # 7 - Credit 143 | 144 | - **[Size in Design, Nathan Curtis](https://medium.com/eightshapes-llc/size-in-design-systems-64f234aec519)** 145 | 146 | - **[Responsive Design, Daniel Schwarz](https://www.toptal.com/designers/responsive/responsive-design-best-practices)** 147 | 148 | - **[UI Design Crash Course, Gary Simon](https://www.youtube.com/watch?v=_Hp_dI0DzY4)** 149 | 150 | - **[UI UX Designer Roadmap, Togiberlin](https://github.com/togiberlin/ui-ux-designer-roadmap)** 151 | 152 | --------------------------------------------------------------------------------