pick a project card layout for me
live icon is to jump to live website
github icon is to github repo
the rest of icons are stacks used in the project
(in img 2, the view code button is actually" view live", n the live icon should be github icon)
21 Replies
If you would like a suggestion, mine would be to make it crystal clear which icons are links and which are information. To do that, I would:
1. create an actual button outline for the 2 clickable links, then use a browser icon and text for the live page, and then the github icon and text for github
2. instead of using the icons for the tech stack, just plain text but with a pill shape tag for each product used
and with those changes, I think your first design would look really nice, just with 2 buttons instead of one
hi do you think the two buttons should stack on top of each other or sit side by side (like whats the flex direction)
I think side by side would look best
Ok I will give it a try. The buttons would keep its shape (pill shaped) n the stack icons would be small pill shape w little padding (button like) on top of the buttons?
you can do it like that, just make sure it's clear which is a button and which isn't. so for instance, maybe keep the border outline on the button, but no border on the pill tags
or use different radius amounts
something like that
do you think this looks decent?
finally discard the stack icons n would use unicode symbols in the text to give it some highlight
like this
it took me a bit, but I see, you just decided to not add the pill tags for the stack. in the paragraph text, you forgot the 'R' in react redux
and for the buttons, one should say 'view live' or 'website' or 'www' with the arrow, and the other one should say 'github' with the icon
yeah the paragraph is temporary
do you think the two buttons with icons look good?
I generally prefer to add icons to my buttons, but usually i put them on the left
but yeah, i think compared to where you started, it's an improvement 🙂
and i like the icons on the right in your design
thanks!
what do u think?
I think he means that for the github button, The text should be
Github rather than View Livehi Senra no worry for the text its placeholder 🙂
Are you UI designer or and FE?
I am learning FE, not rly a UI designer but trying to design a portfolio
I see
All the best to you then