{"id":826,"date":"2018-09-19T14:00:00","date_gmt":"2018-09-19T14:00:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=826"},"modified":"2025-02-25T15:25:50","modified_gmt":"2025-02-25T15:25:50","slug":"designing-a-user-profile","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/designing-a-user-profile","title":{"rendered":"Designing a User Profile: How to Use Overrides"},"content":{"rendered":"\n<p>No matter the type of software project UI\/UX designers have their hands on \u2013 apps for fintech, blockchain, or e-commerce \u2013 almost all projects share one screen in common. In this case, we\u2019re talking about the part of an app containing the user\u2019s personal info\u2026his profile.<\/p>\n\n\n\n<p>Yes, on the surface, everything looks like a piece of cake. We should include an image, name, password, and save button, plus various option settings. While all this holds true, this simplicity only applies to run-of-the-mill scenarios. When diving deeper into a concrete business case of a software product, the user profile screen is likely to become a bit more complicated. From inner levels to billing and verification \u2013 when it comes to the profile screen \u2013 the devil is in the details.<\/p>\n\n\n\n<p>If you have to design a component-rich user profile case,it&#8217;s time to gear up; you\u2019ll confront a few challenges defining the best UX scenario and picking the optimal components to represent it. Then, after performing UX tests on the initial prototype iteration, it\u2019s time for changes and improvements of the wireframes. And yes, we would need to make the wireframe improvements as soon as possible.<\/p>\n\n\n\n<p>Furthermore, let\u2019s stick to this familiar phrase, \u201cAs soon as possible!\u201d, and let me show you how to use the pixel-perfect predefined Sketch Components and Indigo.Design patterns to build up our UX concept.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"lets-begin\"><strong>Let&#8217;s Begin<\/strong><\/h2>\n\n\n\n<p>With the initial paper sketches already done, we\u2019re in front of the screen and ready to begin with Sketch. Here comes the first neat surprise (let\u2019s stick to using surprise only for positive vibes):<\/p>\n\n\n\n<p>We don\u2019t need to lose time thinking about how to start from the blank artboard when we use Indigo.Design UI Kits, because we can simply insert one of the patterns closest to our design concept.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/0880.1.png\" alt=\" when we use Indigo.Design UI Kits, because we can simply insert one of the patterns closest to our design concept\" title=\"when we use Indigo.Design UI Kits, because we can simply insert one of the patterns closest to our design concept\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2055.2.png\" alt=\" when we use Indigo.Design UI Kits, because we can simply insert one of the patterns closest to our design concept 2\" title=\"when we use Indigo.Design UI Kits, because we can simply insert one of the patterns closest to our design concept 2\"\/><\/figure>\n\n\n\n<p>As a member of the Indigo.Design product team, I\u2019m excited to create more patterns that are going to aid in a variety of use cases. So, if you have a need for a specific use case, don\u2019t hesitate to <a href=\"\/community\/ideas\/i\/indigo-design\" target=\"_blank\" rel=\"noopener noreferrer\">drop us a line<\/a>. You can even attach a mock-up to illustrate it better.<\/p>\n\n\n\n<p>The next step is to configure the existing User Profile Pattern according to our specific requirements. I\u2019m going to keep the initial pattern next to the modified one to keep track of changes:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2055.3.png\" alt=\" keep the initial pattern next to the modified one to keep track of changes\" title=\"keep the initial pattern next to the modified one to keep track of changes\"\/><\/figure>\n\n\n\n<p>Here is the result after choosing a different profile image representation.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/0317.4.png\" alt=\" the result after choosing a different profile image representation\" title=\"the result after choosing a different profile image representation\"\/><\/figure>\n\n\n\n<p>From the option situated under Avatar, we can quickly define the background color of the icon in the bottom-right corner, the icon type, text color, placeholder text, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/3022.5.png\" alt=\" From the option situated under Avatar, we can quickly define the background color of the icon in the bottom-right corner, the icon type, text color, placeholder text, etc.\" title=\"From the option situated under Avatar, we can quickly define the background color of the icon in the bottom-right corner, the icon type, text color, placeholder text, etc.\"\/><\/figure>\n\n\n\n<p><strong style=\"font-family: inherit;\"><\/strong><\/p>\n\n\n\n<p>As you can see, the initial pattern provides several inputs, the first of which is represented in the focus state, while the rest are in the filled state. Of course, if we want to change the state, it can be done easily from State options.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/3022.6.png\" alt=\" if we want to change the state, it can be done easily from State options.\" title=\"if we want to change the state, it can be done easily from State options.\"\/><\/figure>\n\n\n\n<p>For the current example, I chose idle state, so I receive that result. What\u2019s rather useful when specifying an input is clearly describing its behavior. For example, noting whether a password is incorrectly or successfully typed. That can be set up from State dropdown again. After choosing the state that we want, the inputs are perfectly distributed vertically.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7.png\" alt=\" After choosing the state that we want, the inputs are perfectly distributed vertically\" title=\"After choosing the state that we want, the inputs are perfectly distributed vertically\"\/><\/figure>\n\n\n\n<p>What if we want to change the layout of the input to show boxes instead of lines? No worries, just change it like this\u2026<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8.png\" alt=\" What if we want to change the layout of the input to show boxes instead of lines? No worries, just change it like this\u2026\" title=\"What if we want to change the layout of the input to show boxes instead of lines? No worries, just change it like this\u2026\"\/><\/figure>\n\n\n\n<p>\u2026and you receive a perfect-pixel boxed input. Needless to say, if you prefer that layout, better to stick to it for all other inputs.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/9.png\" alt=\" \u2026and you receive a perfect-pixel boxed input. Needless to say, if you prefer that layout, better to stick to it for all other inputs.\" title=\"\u2026and you receive a perfect-pixel boxed input. Needless to say, if you prefer that layout, better to stick to it for all other inputs.\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-left\">Moving on, what if you wanted to have more complicated inputs including suffixes, prefixes, or icons? Our library provides easily editable templates that cover several cases. Let\u2019s start with the initial condition.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/10.png\" alt=\" what if you wanted to have more complicated inputs including suffixes, prefixes, or icons\" title=\"what if you wanted to have more complicated inputs including suffixes, prefixes, or icons\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-left\">Then, you can see how to get the input with prefix and suffix icons.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/11.png\" alt=\" Then, you can see how to get the input with prefix and suffix icons.\" title=\"Then, you can see how to get the input with prefix and suffix icons.\"\/><\/figure>\n\n\n\n<p>It\u2019s likely you\u2019ll just need to edit the icon which you can edit both for prefix and suffix color and icon type.<\/p>\n\n\n\n<p>If we want to go even further and use another Component rather than and Input, we&#8217;ll have to detach our Profile pattern and edit the smaller components.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/12.png\" alt=\" if we want to go even further and use another Component rather than and Input, we'll have to detach our Profile pattern and edit the smaller components.\u00a0\" title=\"if we want to go even further and use another Component rather than and Input, we'll have to detach our Profile pattern and edit the smaller components.\u00a0\"\/><\/figure>\n\n\n\n<p>Very often we need a switch option when editing a profile, so let\u2019s add and edit such a component from the Indigo library.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/13.png\" alt=\" Very often we need a switch option when editing a profile, so let\u2019s add and edit such a component from the Indigo library.\" title=\"Very often we need a switch option when editing a profile, so let\u2019s add and edit such a component from the Indigo library.\"\/><\/figure>\n\n\n\n<p>Since the pattern is already detached, I recommend deleting an input after adding another option, to use it as a base point for alignment.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/14.png\" alt=\" Since the pattern is already detached, I recommend deleting an input after adding another option, to use it as a base point for alignment.\" title=\"Since the pattern is already detached, I recommend deleting an input after adding another option, to use it as a base point for alignment.\"\/><\/figure>\n\n\n\n<p>After precise alignment, you can just stretch the switch component to fit between the offset.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/15.png\" alt=\" After precise alignment, you can just stretch the switch component to fit between the offset.\" title=\"After precise alignment, you can just stretch the switch component to fit between the offset.\"\/><\/figure>\n\n\n\n<p>Finally, just delete the input or field that you don\u2019t need and edit the switch label.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/16.png\" alt=\" Finally, just delete the input or field that you don\u2019t need and edit the switch label.\" title=\"Finally, just delete the input or field that you don\u2019t need and edit the switch label.\"\/><\/figure>\n\n\n\n<p>In case of more complicated profile settings, we may need to add an item that navigates the user to another screen or deeper level. If we face this case, I recommend using a list item.<\/p>\n\n\n\n<p>First, we add it as a component from the library, then we put it wherever we want on the screen and simply adjust its width to fix the screen size. Finally, don\u2019t forget to change the label.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/17.png\" alt=\" we add it as a component from the library, then we put it wherever we want on the screen and simply adjust its width to fix the screen size.\" title=\"we add it as a component from the library, then we put it wherever we want on the screen and simply adjust its width to fix the screen size.\"\/><\/figure>\n\n\n\n<p>An important note that I would like to add: Don\u2019t add a component from the Overrides menu. I know it is very tempting since it is positioned on the top of the components list, but it\u2019s better first to add the initial form of the component than to configure it from the right option panel.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/18.png\" alt=\" Don\u2019t add a component from the Overrides menu\" title=\"Don\u2019t add a component from the Overrides menu\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/19.png\" alt=\" That\u2019s all! \" title=\"That\u2019s all! \"\/><\/figure>\n\n\n\n<p>That\u2019s all! As&nbsp;promised, using our Sketch UI library speeds up your productivity. But that\u2019s just the beginning, as more exciting&nbsp;<a href=\"\/products\/indigo-design\" target=\"_blank\" rel=\"noopener noreferrer\">Indigo.Design<\/a>&nbsp;capabilities (such as how to code generate your design) will be revealed in upcoming articles.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>No matter the type of software project UI\/UX designers have their hands on \u2013 apps for fintech, blockchain, or e-commerce \u2013 almost all projects share one screen in common. In this case, we\u2019re talking about the part of an app containing the user\u2019s personal info\u2026his profile.<\/p>\n","protected":false},"author":165,"featured_media":2391,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,13],"tags":[],"class_list":["post-826","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-ux"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/165"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=826"}],"version-history":[{"count":2,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/826\/revisions"}],"predecessor-version":[{"id":2176,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/826\/revisions\/2176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2391"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}