My studio group app design 。◕‿◕。

Hi there,
I’ve been re-designed the app by myself and I think everything is better than before (﹡ˆᴗˆ﹡):heart:.

And I’m pretty much like for the styled horizontal line

No matter are you understand the Chinese language,this isn’t a important focus case.

4 Likes

Nice. How have you made It? Could you post a simple tutorial?

3 Likes

@BlueWhaleYT,

It looks great! :+1:

1 Like

Great app!

I wonder if you could do some little Tutorial on Youtube!
This is a great Idea for people who want to have a nice UX/UI as app Developer.

Cheers!

3 Likes

For this, (with the help of BlueWhaleYT) you may try this app -


Thanks! :blush:

Thank you so much for you to like my app design @junjoseph ! If I have any extra time,I might do some tutorial for those interesting design

2 Likes

Hi, @kartik14.
This app I’ve tried and took a look at it.
Sometimes,it help me a little,sometimes I don’t like it.
Therefore,I design it by myself with wisdom XD

1 Like

This is such a cool design. I really like the blue and orange accents on the left of the widgets. Very nice! I would love to know how to do something like this.

1 Like

Hi, @eoinparkinson! :smile:
For my Hackathon’s App, I was about to use this kind of thing in design :sweat_smile:
I figured out how to make it, perfectly.


But, I saw the Simple CRM app (July’s runner up) and it had the same design :sob:
So, I changed it.


Anyways; :sweat_smile:

:arrow_right: The Recipe -

  • Take a column, set it’s height and width to 125px & 90% respectively.
  • Now, Take another Column, set it’s height and width to fil container & fil container respectively.
  • Now, (for the inner column) add a margin of 1px (or you may try 0.5px) to both top and bottom; and 7.5px/10px for the left & 0 for the right.
  • Add the (background) color of your choice to the outer column.
  • After this, add whatever you want to add in the inner column.
  • Change the radius of both to 10px

And Voilà! You are done! :wink:


Thanks a lot! :blush:

1 Like

Hi there! @eoinparkinson.
Thank you for your like my design and this design is very common.
Step 1 : Drag a column/row become a container.
Step 2 : Set it’s shadow elevation to 0.5
Step 3 : Set it’s border-left to 4 width and set their (border-left) colours.
Step 4 : (Optional) Set the border radius to 4
DONE DONE AND DONE ヾ(❀╹◡╹)ノ~

2 Likes

Thanks, @BlueWhaleYT! :smile:
I forgot to add border radius in my receipe :sweat_smile:

Thanks! :blush:

Lovely, I am going to implement this for sure! Thanks!

1 Like