Ideas of how to create list for mobile (2 buttons, 3 texts and 1 image and text)
Hi, I am trying to develop React Native app (I have GitHub users API) I am using the response data to display list, and this data in a list have Image-avatar image URL, Text-username, name, description, Buttons-followers - followers count and following - the following count
So I tried designing my list as
left handle side - tried putting the image and at the bottom of the image I put the username
middle - I tried putting the name, description
right-hand side buttons contain followers count with text followers
Button contains the following count with text following
I want ideas on how this list can be created with good design.
25 Replies
do you have a screenshot of what you have currently? or what you want to achieve? It's kind of hard to offer specific feedback with just this description
altho i would say for mobile design, you generally want the image on it's own without trying to cram information on the left or right side of it. But if it's just a tiny avatar, and not an image image, it could be fine
Hi , I do
This doesnt not look good, I thought of thinking design first and then can make an UI according to it, Not sure how followers and following those button would fit in the list
This is where I am stuck at right now
my personal rule of thumb on mobile size, is I try to never go more than 2 columns wide
I tend to stack vertically whenever possible
so for instance in this layout, i feel like the followers/following could be under the icon and name section, one after the other on the same row
maybe if they were in a small pill shape containers with a different background color
also, I cant' tell if the user name is being repeated twice *(once under the icon, and once above the hello text), but if it is, you can probably get rid of the redundancy and only display that information once
No, one is username and one is name (both are two diff values)
username is below the icon , and name is above the text (Hello)
How can we put the following/followers under the icon?
You are suggesting it like Avatar Icon Name Username Description
You are suggesting it like Avatar Icon Name Username Description
what is the action here for this list? What is the end user doing with this information? They are clicking on something on another page and this is coming up, or this is a dashboard, or some other call to action?
and will there only be one person at a time, or you will see a bunch of these people cards at the same time ?
(Functionality is when GitHub username is searched, it should populates the list with all details i mentioned above , if not present usernot found and you will have two buttons on list which is followers with followers count and following with following count , on click of these had to navigate to diff page where it shows followers /following list
When user click the username in followers list then it will navigate back to this page.
This page is first page (like Mainscreen)
well for sure it sounds like you need 2 buttons at the very least, as well as some sort of return navigation
and then all this information
but all together, that gives you a lot of room for the design as that will be easy to fit in a mobile screen
if you google something like 'css social cards' or similar
you can see a lot of variations of a similar theme
and then find a design style that suits your specific project
or alternately, check out twitter or instagram or other places that show off follower info cards and see how they designed their versions of the same data
How does this look?
@ghostmonkey
yep seeing a good structure develop now. You could experiment with the spacing a bit between sections, like grouping the @lohita and 'Hello world' together, but with double the space between them and the Lohi name and followers lines
Is this better ?
I think it looks ok not satisfied but no ideas on how can I improve.
@ghostmonkey
Might as well follow what facebook/twitter does
Move the name to be beside the picture
And use 1 uniform padding value, it looks like your description and followers count have different margins/padding
Instead of the flat grey background, make it a card with a box shadow
Beautiful CSS box-shadow examples - CSS Scan
🎨 Curated collection of 93 free beautiful CSS box-shadow, ready-to-use for your next projects. Click to copy.
Instead of having the numbers be slightly bigger than the follower/following text, establish hierarchy by making the follower/following text less opacity than the number and make that text black instead of purple
Make the background color of the card white
I'm at the gym right now, in about an hour and a half ill send you an example
It looks so much better after adding line height and letter spacing all that
Wow thank you guys I see so much improvement already
Awesome that looks good
That's pretty much what I was going to send just a few small changes like the padding and heirarchy