in Uncategorized

Design Basics with Xamarin

Motivation

Do you know what is the main difference between an ok application and an astonishing  application?

The answer is quite simple: how we sell it! depending on how amazing we advertise an application, we can achieve greatness and what better way to do it than making it eye candy. What does eye candy mean, you may ask, and, to put it simple, something is eye candy when it looks so good, there is no possible way to deny and not to want it.

How do we make our mobile applications be eye candy? It is very simple: use Xamarin and the tips & tricks i am going to present to you!

 

Summary

In this article, i am going to give some pieces of advice and tools on theory of colors, icons and resources in general and how to implement some of them.

 

About colors

First things first: there are no such things as universal colors. At most, some colors can be referred as neutral or good to most, depending on the era of design we live in. The colors of the application you are going to create should be considered for:

  1. The purpose of the application. For example: we should not make an app meant for little children dark or morbid, we need to use warm colors.
  2. Text / media usage. If the app will have a lot of text, it must be readable (no dark grey text on black background, please!).
  3. Targeted age. Depending on for who the application is meant, the used colors may or better said, should differ.

As for how many colors we can use, the answer is: how many you need! (but do not go for too many, the optimal number is around 5)

If you desire to know more on this topic, you can check the following articles:

  1. How to master colour theory
  2. Color theory

As for the tools:

  1. 5 – color generator. This one i use most because you can lock the desired colors and then it aids you with the rest.
  2. Paletton

How do we implement them? There are two possible ways:

  1. You are a hard-core programmer, so you will do it in you class by the color property and the Color.FromHex(“hexOfTheDesiredColor”). Example:
    BackgroundColor = Color.FromHex("30bced");
    TextColor = Color.FromHex("fc5130");

    Should generate this(please do not use this combination for background – main text in an actual app, it has only teaching purpose to show you that any color can be used):untitled

  2. you are a more html oriented designer and you want to do it from the xaml page, so you will do this:
    <label text="rgb" BackgroundColor="#30bced"
  3.  TextColor ="#fc5130"/>

     

Moving to resources

Starting from the icon our application has in the os‘s drawer to the ones that there actually in the app itself or even the images used inside, we must always pick something that is:

  1. Resizable. We want our media to scale regardless what device the users are going to use, a small smartphone or a hudge tablet.
  2. Optimal in quality and speed (blurred images are as bad as ones that load in 5 years).
  3. Propper media format (your desire as a designer is to always use what has to be used in certain situations).

To see JPG VS PNG (VS GIF) you must check either the short version or the long version (or both).

As for resources:

  1. google is, as always, your best ally.
  2. icons, this site has amazing icons!
  3. vector resources

 

Implementation

As always, use this! Do not overuse elements, it is better to have a clean interface with multiple pages than a crowded 1 page application.

Moving on to spacing, we want to leave some borders because apps that use 100% of the available space are good locking and most of the time they are stressful for the user. For this purpose you need to check this post on the official Xamarin site.

As for extras:

  1. Rounded buttons. As square (metro UI) ones are a little rusty and in the past, we are going to make them round using the BorderRadius property for our button objects. Here is an example of what i am mostly using:
    Button roundedButton = new Button
     {
     HorizontalOptions = LayoutOptions.Center,
     BorderColor = Color.FromHex("102B3F"),
     BorderRadius = 30,
     VerticalOptions = LayoutOptions.Center,
     BackgroundColor = Color.FromHex("102B3F"),
     TextColor = Color.FromHex("FFFAFF"),
     Text = "I am the button, you may click me!"
     };

     

     

  2. Frames for extra space. Sometimes, the default space a layout gives us is not enough, but have no fear, the frame object is here:
    var frame = new frame()
                {
                    Padding = new thickness(40)
                };

     

     

  3. Tap gesture images. Sometimes, we need to interact with some images we are going to provide so here are the best solutions.
    var tapGestureRecognizer = new TapGestureRecognizer();
                tapGestureRecognizer.Tapped += (s, e) => {
                    // handle the tap
                    if (Condition()))
                    {
                        DoSomething();
                    }
                    else
                    {
                        DoSomethingElse();
                    }
                };
    
                ourImage.GestureRecognizers.Add(tapGestureRecognizer);

     

In conclusion

As you may have observed, a bit of C# coding knowledge is required. For a better understanding of how powerful the C# language really is, you can check out this repository full with basic C# projects. If you want to go deeply into advanced C# topics, you can check out this repository. Stay tuned on this blog (and star the microsoft-dx organization) to emerge in the beautiful world of “there’s an app for that”.

The design of the application has a key role in how the users or, better said, if, the users will use the apps we develop. This is why how we design it is really important and those tips and tricks can aid begin your path to greatness. Always keep in mind:

  1. Read the latest trends in design, nothing is eternal (I still sob for realistic design).
  2. Colors.
  3. Media formats, size, usage.
  4. Be unique but proper to what you are developing, remember, masterpieces can be both hanged in the living room and the bath room, where yours is used depends on how you make it look and work.

 

Cheers,

Xander

Written By:

10 Comments

  1. Bablofil March 12, 2017 Reply
  2. medical health news March 20, 2017 Reply
  3. student loans March 20, 2017 Reply
  4. education sites March 21, 2017 Reply

Add a Comment

Your email address will not be published. Required fields are marked *