Application Login Screen

The first time I ever heard about design systems, I had to ask myself "How is it that nobody ever came up with this concept until now?". After using the Indigo.Design Sketch UI Kit, I realized that Indigo.Design not only essentially builds off the idea of a design system, but adds immense value to it.

Essentially, a UI Kit, as a fundamental design system tool, is developed to not only meet a specific product’s needs, but is based on the fundamental needs of a wider range of products. By testing the Indigo.Design UI Kit with various UX scenarios that can now be found on Dribbble, the Indigo.Design team has continuously proved that the design system offers various solutions for a broader spectrum of UX challenges when compared to a design system created for a single product.  

Before going through the steps of creating my debut dribbble shot with Indigo.Design, I want to reaffirm the pieces that the Indigo.Design system ties together:  

• UI Kits and Plugin* to speed up the creative process of designers in Sketch 
• Cloud services to share prototypes with stakeholders for rapid feedback or to create and execute in-depth remote usability studies with real users 
• Extension to integrate with Visual Studio Code that allows one to generate native Angular code from his/her prototypes supported by Ignite UI for Angular  

As for my own debut dribbble shot I went on to present a simple, yet tastefully laid out login page, including a few UI components and an image as a brand asset. To achieve this, I set off with the decision to divide my artboard in two equal parts: one for the image and another one for the signup form.  

Let’s go through the rest of the steps together. I will begin by placing all the components, such as headings, inputs for the user data, raised and flat buttons. For now, let's ignore the exact arrangement of the elements, I will just place them on the artboard. Through the various overrides that represent component variations and configuration options, like adding a prefix or suffix, changing the text content, and deciding whether to have some helper text or not, I can configure the inputs in the way I need them. 

It is a common design practice to prepare a draft paper sketch of the rough layout you intend to create. This helps one to think about the whole picture and plan his arsenal of components to use.  

Before arranging things pixel-perfect, let’s do one more thing and organize  components into meaningful groups, i.e. a group for the two inputs (username and password), the title “Hello, again, please sign in here”, as well as the “Sign in” and “Forgot password?” buttons. Next, I will configure the properties of the inputs by making sure they are of type border and setting their variant to dark and state to idle. 

The “Sign in” button is Raised with background color set to Primary 500, while for the “Forgot your password” I will be using a Flat button with text style set to Error. For the title text “Hello again, please sign in here”, I will be using H6 Headline styled in Active color, but you are totally free to pick another style and adjust the title according to your aesthetic preferences, only make sure that it is more subtle than the main slogan. Lastly, lets align all elements like on the image below and use a uniform vertical whitespace between them of 24 px.  

The big button labeled “Sign up here” in the bottom right corner let new users easily switch to the Signup page. This button consists of secondary color background layer, white line and text field, which I combined in a group. It is important that these three elements and the whole group to be pinned to the bottom and right edge as well as to have fixed vertical size. 

Next, I need to apply brand assets such as colors and typography to all components in the design. In fact, thanks to the new Theming functionality in the Indigo.Design plugin, such changes e.g. of the base typeface and individual typography font weights for all components, can be applied quickly and easily whenever necessary. I personally prefer to apply brand colors and edit the typography at once. After applying these, due to font differences in size and letterspacing, one may need to tweak the width of his/her text fields for example by adjusting the size of some components. 

One more thing, I need to adjust the image size and position, cropping it if necessary, and setting its resizing properties in Sketch like below. I was able to find a high quality image visually supporting my design on Unsplash upon which these adjustments were made. 

Lastly, I need to take care of the main slogan “Keep an eye on your budget”, so let’s give it a H1 or H2 Headline Primary style. 

That’s it! As you can see, I have followed a logical and systematic design process, with attention to which components are more important than others and striving to achieve an aesthetic composition of colors, typography and imagery to achieve a stunning result. 

 

*On February 12^th was published Theming functionality to Indigo.Design Sketch Plugin, which makes the design process even quicker and better organized. It lets users edit their color palette and typography with minimal effort for a fraction of the time it used to take before.