affinity designer Android App Mockup

[Wifestealer]

Hello everyone,

This is my first project I made in AD, it took me couple of weeks to finish it. I am really happy that I finished it and will be uploaded on behance soon. I did UX part first especially research. I took a survey regarding internet, what ISP they have and how much data do they use. I even took online interview and then started UI part. I am learning java to compile it and make an android app. I made light theme also. I will be grateful if I could improve something more.  :)  :)  :D

[Wifestealer]

any feedback? No one likes it? did I make it so bad?

[CR380R_3X]

Hey I'm new here. I've only recently started to learn Java and UX, UI myself, but I like you designs. 

The 2-color palette is nice. The simplicity of the design does improve the readability of all that info at a glance.

Overall really nice job!

[Wifestealer]

Hey I'm new here. I've only recently started to learn Java and UX, UI myself, but I like you designs. 

The 2-color palette is nice. The simplicity of the design does improve the readability of all that info at a glance.

Overall really nice job!

Hello, thanks for comment and here I was thinking and no one likes it cause i made it so bad. I am too learning java. I even don't know a word about java.  :D  :D  :D  :D 

We could help each other. what you say?

[v_kyr]

Looks good so far, let's see how your implementation work with AndroidStudio will go then. BTW it was unclear for me due to your description, if it will be sort of a internet usage survey app or instead something which compares and shows ISP deals/offers?

[Wifestealer]

Looks good so far, let's see how your implementation work with AndroidStudio will go then. BTW it was unclear for me due to your description, if it will be sort of a internet usage survey app or instead something which compares and shows ISP deals/offers?

hi, it will be internet usage survey app. Sorry about description

[v_kyr]

Ah Ok, then you will have to collect, store and evaluate the supplied data. - BTW for an Android app in order to communicate/interact with an external database you will need then some Web service in between. So you might want to take also a look on PHP for that service together with Java.

[Wifestealer]

Ah Ok, then you will have to collect, store and evaluate the supplied data. - BTW for an Android app in order to communicate/interact with an external database you will need then some Web service in between. So you might want to take also a look on PHP for that service together with Java.

oh, is that too hard php? I am learning java now which will take some time.

[v_kyr]

No IMO using/learning a little bit of PHP beside Java isn't that hard. And in your case you probably will need PHP only to be used as a mediator (web service) in order to access an external database, where you can store and read the needed data for your Android App. - This is just due to the fact that you can't connect directly from Android to an external database, usually you can easily do so in plain Java, but sadly not out from Android programs (the Android API). So you must go the other way here and in turn connect from Android to an web service, which in turn plays the mediator for Android and does the database communication.

 

Learning Java should be fun and once you know Java, it's also easy afterwards to learn C#, since they share similar concepts!

[fernandolins86]

Hello everyone,

 

This is my first project I made in AD, it took me couple of weeks to finish it. I am really happy that I finished it and will be uploaded on behance soon. I did UX part first especially research. I took a survey regarding internet, what ISP they have and how much data do they use. I even took online interview and then started UI part. I am learning java to compile it and make an android app. I made light theme also. I will be grateful if I could improve something more.  :)  :)  :D

 

Hello, that's a good start.

Some suggestions I would make (some are actually things for you to consider):

• The design doesn't use Android's default font (which is Roboto), but instead something like Arial or Helvetica which is closer to iOS. It feels out of place. If this is something related to branding, I would suggest exploring more font weights.
• When you use horizontal lines above and below elements it makes them look static, like table rows. For example, on the third screen where it says "Mobile Data" and "Wi-fi", I believe those are tabs and you can switch between them, correct? If that is the case, the default Android look for tabs has only the bottom line for the selected tab. The inactive tab shouldn't have a bottom line and neither of them should have top lines...
• ... Which brings me to the point of why you are not using the standard Material Design controls? Even if you're going to customize the look of the application later I suggest you start by designing with the default Material Design elements so you get the fonts, spacing and controls right. You can find it all at https://material.io/guidelines/website
• The < and > buttons around "June" and "2016" on the graph screen are far too small to be touched by a finger (usually touch screen controls shouldn't be smaller than 46x46)
• Are the "RS 497" and similar shapes buttons? They look "tappable" because of the drop shadow.
• In any case, how do you navigate from screen to screen? I see there's a side menu on the last image, but how do you open it?

[Wifestealer]

No IMO using/learning a little bit of PHP beside Java isn't that hard. And in your case you probably will need PHP only to be used as a mediator (web service) in order to access an external database, where you can store and read the needed data for your Android App. - This is just due to the fact that you can't connect directly from Android to an external database, usually you can easily do so in plain Java, but sadly not out from Android programs (the Android API). So you must go the other way here and in turn connect from Android to an web service, which in turn plays the mediator for Android and does the database communication.

 

Learning Java should be fun and once you know Java, it's also easy afterwards to learn C#, since they share similar concepts!

I really didn't understand because i am new in coding world. I am confused should I learn java first or php?

[Wifestealer]

 

Hello, that's a good start.

Some suggestions I would make (some are actually things for you to consider):

• The design doesn't use Android's default font (which is Roboto), but instead something like Arial or Helvetica which is closer to iOS. It feels out of place. If this is something related to branding, I would suggest exploring more font weights.
• When you use horizontal lines above and below elements it makes them look static, like table rows. For example, on the third screen where it says "Mobile Data" and "Wi-fi", I believe those are tabs and you can switch between them, correct? If that is the case, the default Android look for tabs has only the bottom line for the selected tab. The inactive tab shouldn't have a bottom line and neither of them should have top lines...
• ... Which brings me to the point of why you are not using the standard Material Design controls? Even if you're going to customize the look of the application later I suggest you start by designing with the default Material Design elements so you get the fonts, spacing and controls right. You can find it all at https://material.io/guidelines/website
• The < and > buttons around "June" and "2016" on the graph screen are far too small to be touched by a finger (usually touch screen controls shouldn't be smaller than 46x46)
• Are the "RS 497" and similar shapes buttons? They look "tappable" because of the drop shadow.
• In any case, how do you navigate from screen to screen? I see there's a side menu on the last image, but how do you open it?

 

Hello, I am so happy that you asked these questions and gave me suggestions since I am new in UI/UX field. This is my goal to become UI/UX designer as well as coder too. 

1. The font I used is Opensans. I will try Roboto font. I'd no idea that it's essential to use android fonts and I will check font weight too.

2. "Mobile Data" and "Wifi" both are tabs where we can only swipe nothing else and to show data and if I remove the bottom and top line, wouldn't it look weird? 

3. I will do it with standard material design, it's just that it is hard to learn.

4. The thing is I don't understand how would it look on a phone when the actual app is developed. I hard to guess that are they smaller or not. I did increase size now but you saying it shouldn't be smaller than "46x46" in what sense? "DP" or "Pixels"

5.Rs 497 is not tappable, it is a price of that data.

6.I thought that if a user wants to open it. Just slide it from left to right and it will open from any screen.

I made some changes. I am skeptical about point 2. I removed both lines so it wasn't looking good. So I thought to remove 1 top line and I changed fonts to Roboto and gave little bit stroke also.

[v_kyr]

I really didn't understand because i am new in coding world. I am confused should I learn java first or php?

 

Java first !!!

[Wifestealer]

Java first !!!

thanks, learning basics of xml and then java <3

[fernandolins86]

Hello, I am so happy that you asked these questions and gave me suggestions since I am new in UI/UX field. This is my goal to become UI/UX designer as well as coder too. 

1. The font I used is Opensans. I will try Roboto font. I'd no idea that it's essential to use android fonts and I will check font weight too.

2. "Mobile Data" and "Wifi" both are tabs where we can only swipe nothing else and to show data and if I remove the bottom and top line, wouldn't it look weird? 

3. I will do it with standard material design, it's just that it is hard to learn.

4. The thing is I don't understand how would it look on a phone when the actual app is developed. I hard to guess that are they smaller or not. I did increase size now but you saying it shouldn't be smaller than "46x46" in what sense? "DP" or "Pixels"

5.Rs 497 is not tappable, it is a price of that data.

6.I thought that if a user wants to open it. Just slide it from left to right and it will open from any screen.

I made some changes. I am skeptical about point 2. I removed both lines so it wasn't looking good. So I thought to remove 1 top line and I changed fonts to Roboto and gave little bit stroke also.

 

1. If you don't use Roboto you will need to bundle OpenSans into your app and have a license to use it in the app. So I suggest you use Roboto which is loaded by the system as default.

2. This is what I mean about the tabs - they're usually on a different color background following the top bar and they only have a bottom border on the selected item - https://material.io/guidelines/components/tabs.html#tabs-usage

4. You'll get used to the sizes eventually. If you design at mdpi scale you get a better feeling of what's big and small. You can find a list of devices and their pixel resolutions here - https://material.io/devices/

6. It is not clear that you can open a menu sliding from the left edge to the right, in those cases you usually have a "hamburger menu" button/icon to open and close the sidebar, like here - https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior(scroll down until the "Persistent" topic

[Wifestealer]

1. If you don't use Roboto you will need to bundle OpenSans into your app and have a license to use it in the app. So I suggest you use Roboto which is loaded by the system as default.

2. This is what I mean about the tabs - they're usually on a different color background following the top bar and they only have a bottom border on the selected item - https://material.io/guidelines/components/tabs.html#tabs-usage

4. You'll get used to the sizes eventually. If you design at mdpi scale you get a better feeling of what's big and small. You can find a list of devices and their pixel resolutions here - https://material.io/devices/

6. It is not clear that you can open a menu sliding from the left edge to the right, in those cases you usually have a "hamburger menu" button/icon to open and close the sidebar, like here - https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior(scroll down until the "Persistent" topic

Hi, thank you very much for helping me out!!

I changed it as you mentioned above. Please see.

[Zunaid]

As feedbacks were given already. I will give some general suggestion regarding this design or any design.

 

- Follow the general guidelines

 

- Use a good amount of spaces. Eg. If you use 10 px font then give atleast 1.5 times spacing on top and bottom. That is 15 px. Add more if it looks good.

Same goes for elements. Use good amount of spacing

 

- Use coherent icons. Some icons in your page (the social ones). Some are rounded, some are square. Try to stick to one style.

 

- Don't use too light or too dark dividers. Use a color that is near to the background.

 

Overall great start. And i wish you best of you luck.

If you have any question then feel free to ask me.

[Wifestealer]

As feedbacks were given already. I will give some general suggestion regarding this design or any design.

 

- Follow the general guidelines

 

- Use a good amount of spaces. Eg. If you use 10 px font then give atleast 1.5 times spacing on top and bottom. That is 15 px. Add more if it looks good.

Same goes for elements. Use good amount of spacing

 

- Use coherent icons. Some icons in your page (the social ones). Some are rounded, some are square. Try to stick to one style.

 

- Don't use too light or too dark dividers. Use a color that is near to the background.

 

Overall great start. And i wish you best of you luck.

 

If you have any question then feel free to ask me.

Thank you!!!!!!!!

I am following and will post here soon since it's completed.

[fernandolins86]

Hi, thank you very much for helping me out!!

I changed it as you mentioned above. Please see.

 

Ah, can you noitce the improvement already? Following the guidelines is always the way to go.

Now redesign the 2nd and 4th screens with lists and cards as Google suggests in the Material Design guidelines and you'll see a huge jump in design quality.

[Zunaid]

Thank you!

[Wifestealer]

Ah, can you noitce the improvement already? Following the guidelines is always the way to go.

Now redesign the 2nd and 4th screens with lists and cards as Google suggests in the Material Design guidelines and you'll see a huge jump in design quality.

Hi, i re-designed it. How does it look now?

[fernandolins86]

Hi, i re-designed it. How does it look now?

 

That's better, however the Hibernate and Disable text don't look like buttons.

Here are some suggestions:

• Make them buttons :P
• Add a third column after the amount of downloaded/uploaded data with an icon button to disable and an icon button to hibernate (they should be toggable)
  • Downloaded - 300kb - [O] [X]
• Make the blocks taller and add two rows: "Enabled" and an on/off switch, and "Hibernating" and an on/off switch. The text should be on the far left and the switches on the far right of the card.

[Wifestealer]

 

That's better, however the Hibernate and Disable text don't look like buttons.

Here are some suggestions:

• Make them buttons :P
• Add a third column after the amount of downloaded/uploaded data with an icon button to disable and an icon button to hibernate (they should be toggable)
  • Downloaded - 300kb - [O] [X]
• Make the blocks taller and add two rows: "Enabled" and an on/off switch, and "Hibernating" and an on/off switch. The text should be on the far left and the switches on the far right of the card.

 

Hi, sorry for my bad english, I couldn't understand propelry but do you mean like this? 

[fernandolins86]

Yeah, or something like these...

 

 

On the second one the icons work as on/off switches, the one with the moon (which I used to represent "Hibernate") is currently off therefore it is lighter.

[Wifestealer]

Yeah, or something like these...

 

mockup1.png

 

On the second one the icons work as on/off switches, the one with the moon (which I used to represent "Hibernate") is currently off therefore it is lighter.

Sorry for the noob question but why there is "enabled on first one?  I mean if I just put only Hibernate then it works both sides, off and on. What does "Enabled" switch do?