![](\"https:\/\/lh5.googleusercontent.com\/Ab23RX-MoIDAWeKn1Z1n2EXW64TSfwdKU6qTeJe_UuiVo07wHnsn_oVMJcLuo9ul3X9h8tZqOZtJZq5zZOk1FYd2uIRXUD15NzX4LgCTukJ08_Sk7wDA-rPOrBWIcBuf94ePWclc\")
<\/p>\r\n\r\n\r\n\r\n
A UI design system keeps your product design organized and consistent. Here\u2019s how to create one for your next project.<\/p>\r\n\r\n\r\n\r\n
The world of web design allows for more creativity than ever. Long gone are the days of static pages with neon fonts and background music. Evolving technology means web design can include so much more than previously imagined. It also means that design can be more complex than ever. Keeping your component design consistent can be a challenge. That\u2019s where UI systems come in. Read on to learn how to design components to be uniform across the whole of your product.<\/p>\r\n\r\n\r\n\r\n
A component design system is a reference point for certain design standards that you\u2019ve decided on prior to or while putting your product together. Think of it as a visual style guide, or an inventory for design components. This will include your color palette, type scale, icons, buttons, and any other design elements the product uses (more on each of these components and more below).<\/p>\r\n\r\n\r\n\r\n
What\u2019s the point? Having these elements in one place will make it easier for you to keep your design consistent. You\u2019ll know exactly what color your buttons are supposed to have, the general style of your icons, your font sizes and style, and so on. UI systems eliminate the guesswork when adding future pages and features to your product.![](\"https:\/\/lh3.googleusercontent.com\/WSW-zteEQ-uYr9btumTaAQxo1GuwGtTEr3uZFhUoQl1bZv60ITnCV4wqm8qg-asFwvoEv9XAQZcEIhC13UUGM2fYQQ0KEY6Gd7XRlV00X_TVfK0i19PH3Ns_O_KveyTITrnXPFq5\")
To get a better idea of what this looks like, take a look at some UI design systems<\/a> from recognizable brands and our free repository of available design systems and pattern libraries \u2013 Adele<\/a>.\u00a0<\/p>\r\n\r\n\r\n\r\n There are a number of reasons why a component design system is necessary, and a number of ways poor design can hurt you.<\/p>\r\n\r\n\r\n\r\n A well-designed website doesn\u2019t just look good. It reads well and gets your message across with intuitive navigation. Your product, whether a website or an application, becomes the user\u2019s first impression of your brand. Consistent design is the key to an intuitive design, as the user can get a good grasp of where to navigate, how buttons look, what an error looks like, and so on.<\/p>\r\n\r\n\r\n\r\n Ux-optimized design can also make or break your product\u2019s visibility. SEO best practices<\/a> may seem like a moving target, but today\u2019s tactics are much more involved than the keyword stuffing of yesterday. Design and accessibility play big roles in SERP rankings<\/a>, so if your product delivers a poor user experience, search engines will not look favorably upon it.<\/p>\r\n\r\n\r\n\r\n Building your own UI system isn\u2019t something to be taken lightly. It\u2019s a process that takes a lot of time and dedication. But it\u2019ll be worth it when you have a consistent, high-quality design for your product. So don\u2019t rush! You\u2019re taking crucial planning steps for your product\u2019s brand.<\/p>\r\n\r\n\r\n\r\n Your first step to planning your component design should be constructing a mood board. Here\u2019s where you gather images of anything that inspires your intended design. That can include current design trends, inspirational images, thematic graphics, and so on. You\u2019re essentially putting together a private Pinterest board. Once you have enough \u201cpins,\u201d you\u2019ll be able to step back and see some common threads between them. And with these common threads, you can decide on components like colors, lines, and icons.<\/p>\r\n\r\n\r\n\r\n Your product\u2019s color palette should be based on your mood board and research into your product or service. For example, if your industry has anything to do with water (boats, sailing, fishing, conservation, etc), it may not make sense for you to have a palette with primarily warm colors. And the images you\u2019ve gathered on your mood board would likely steer you in the direction of greens, blues, and purples. But color palettes in UI design systems are more complex than that. You\u2019ll want to decide on primary, secondary, and tertiary colors, as well as colors that indicate success or failure for relevant fields. (These will relate to your buttons and forms, described below.)<\/p>\r\n\r\n\r\n\r\n You\u2019ll want a basic understanding of color theory to make an eye-catching color palette. This means understanding value, saturation, and color schemes. You\u2019ll also need to decide how often to use each color, using primary colors and accents often enough to convey their importance. There\u2019s a 60-30-10 rule that\u2019s generally recommended for this purpose: your primary color gets used 60% of the time, secondary color 30%, and accents 10%.<\/p>\r\n\r\n\r\n\r\n Read more about choosing a color palette<\/a>.<\/p>\r\n\r\n\r\n\r\n With all our technological advancements, computer screens are still two-dimensional. But that doesn\u2019t mean you can\u2019t add some depth and perspective to your design, and it\u2019s definitely something to consider. The use of shadow is a trending design element lately, and with good reason. Strategic use of shadows with your design components is an effective yet subtle way to add emphasis and draw the eye. Just make sure to keep these shadows consistent with direction, depth, and strength.<\/p>\r\n\r\n\r\n\r\n When it comes to your text, you want to make sure the font stays consistent and legible. But you also want to pay attention to the scaling of your text and headers so that everything looks uniform. If your H2 on the homepage looks different from an H2 on your contact page, that\u2019s not a good look. You also want to avoid your H2s looking too close in size to H1s or H3s. A standardized type scale helps with this by establishing uniform sizes and formats for your body text, headings, links, and so on.<\/p>\r\n\r\n\r\n\r\n If you need help establishing a type scale, there\u2019s a free-to-use type scale<\/a> online.<\/p>\r\n\r\n\r\n\r\n Keep your icons simple and uniform. Since they\u2019re small by nature, too much detail can get lost. Inconsistent design with your icons will only look sloppy. There are free icon set packs available online if you have trouble nailing down a design but to make things much easier for you, we have ready-to-use icon library in UXPin<\/a>.\u00a0<\/p>\r\n\r\n\r\n\r\n These are vital parts of your UI design, as these are the elements that your users will interact with the most. They must stand out and be identifiable, and their purpose should be obvious. Buttons are like icons in the sense that simple design is best, and consistency across buttons is a must. This doesn\u2019t mean button design has to be boring – there\u2019s plenty of room to play around with the look of your standard buttons<\/a> and radio buttons<\/a>! If you need inspiration or want to add ready-to-use components to your design, you can find a ready library in UXPin<\/a> with Material Design patterns.\u00a0\u00a0<\/p>\r\n\r\n\r\n\r\n Keep your other components like navigation drop-downs and text fields visible without crowding the rest of your design. This is where your color palette and shadows can come into play.<\/p>\r\n\r\n\r\n\r\n\u00a0<\/div>\r\n\r\n\r\n\r\nWhy do you need a component design system?<\/h2>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\nCreating a component design system<\/h2>\r\n\r\n\r\n\r\n
Mood board<\/h3>\r\n\r\n\r\n\r\n
![](\"https:\/\/lh3.googleusercontent.com\/wuhA5UpEiRmS1ELhIXsp7omA7G98UKhX8LMpc3S7apHLsEVfsRauw5879wQlpz6zqpFzdX8expLZ4I3DQvGiyK2wxVYfIseXypELJPrm6EvESNAC5weB1qefXfq2phFDOw8BZL9Q\")
Color palette<\/h3>\r\n\r\n\r\n\r\n
![](\"https:\/\/lh5.googleusercontent.com\/-52Hyc9IPARV15CQolXOPQU-bN-278neANFQrSYfCg9l5mz-ffdIftMjfRR11_v4PbO8HhhrwhQTQooM59zHwySSjPerV1i11OisUIHFwwFwXdueeYI5SwXUArHtGuX5PjvvHCEY\")
Shadows
![](\"https:\/\/lh4.googleusercontent.com\/7Y1MeYhTIu4M9C1eCPRGgocuVqyT1QmzsGF3FH2j7tXZQNXPtAs84P3_oJsjIyrW0Bw449ohID5sWxvUmIrYBOJrihccMdmp3jQtgXAzGOA1ilJSlOJi9PkWXI42NIk6uIIi6h2z\")
Type scale
![](\"https:\/\/lh4.googleusercontent.com\/l1lIthQMdtvDrm02hLTlRquI3dIkf_nRY1JOLGzjcOTYNjQ4gFU3QG1tUkyE5Yu2Vh-WMB0wI2RFobzRj8M232aPlXNcouQEAMsl4d5_qld6JGc7tKoHYh1GU4piHbxxZwQF1mwc\")
Icons<\/h3>\r\n\r\n\r\n\r\n
![\"\"](\"https:\/\/lh3.googleusercontent.com\/usN8SD1j-mp9OWFvEoipcQW90UYpQsPDROeFuVwyyhJfhhlrmULoMTTs5MLoXTVM3ZKPjKA12ZOrVo9HyzHVdFRrBKpUKIFkuJE_tWLV3E81BX_qBlhh_P6BiReI6dLJHgf9S6OL\")
\u00a0<\/div>\r\n\r\n\r\n\r\nButtons, sliders, forms, and other components<\/h3>\r\n\r\n\r\n\r\n
![](\"https:\/\/lh3.googleusercontent.com\/-Mrz0K9ojfUbDUi4yrzRzRmYd8j-AtPljAj_gdZKc4Ed3i6sJOPLed9TOfTFq470Nw0_sCtnKYQZhXueRfLK8fat1i1fm4KfXcXkLnoUWqw9X8xoVV8a1yC0ImM4rbIyYr894eSP\")