I'm building my portfolio website. On the navigation bar, there are 3 links: Home, About, and Portfolio. I plan to use icons with them.

Home would be enter image description here while About is enter image description here

Which icon should "portfolio" be? Since in my portfolio page, projects are displayed in grid view, I thought about (1) enter image description here or (2) enter image description here

Within each project, there are 4 sections:

Intro: enter image description here, motivation: enter image description here, process: enter image description here, and reflection. In the reflection section, I wrote what I learned and potential next steps. I'm open to renaming it if there are other words that suits better, e.g. evaluation? Whichever word I use, this one is hard to think of an icon to go with. And the icon can't be too sophisticated since the icon size is less than 24x24px. This one is good enter image description here but looks blurry in 24x24. Does enter image description here capture the concept of iteration?

Appreciate any feedback.

  • This is really a graphic design question. That said, don't overthink icons, either. Icons are great for task-based navigation but it's hard to nail abstract things like 'thoughtful reflection' in an icon. – DA01 Sep 28 '14 at 1:59

well, for portfolio you could obviously use a typical porfolio/briefcase icon, but hear me out on this: I am assuming your portfolio is about a creative service, probably design, right? Why not go for something creative? I mean, none of those icons tells me nothing, and as a matter of fact if they tells me something, is that you didn't worry very much (something quite common designer's portfolios, to be honest, and I'm guilty).

So, why don't you try a slightly different approach, where (for example) intro could be a movie clapper, motivation a car, and so on (note these are just fast and pretty dumb ideas)

or a totally different approach, where icons could be abstract shapes or colors?

This way, when you show only the icons, you'll create an element of intrigue which, in term, will create an action. Which, after all, is what you're looking for

| improve this answer | |
  • Although not the answer I was looking for, but it's worth thinking (gave you an up vote). Thanks, I'll see if something along this line pops out. If I can't come up with an impressive one, I'll probably still use the conventions. – SeanC Sep 28 '14 at 3:56

Why not stick with the names and avoid using the icons there?

No matter which icons you pick, you'll never achieve the descriptiveness of the text.

| improve this answer | |
  • I understand the tradeoffs. That's why I plan to use both. With icons, it's visually more pleasing and I can make text smaller or show when hovered. – SeanC Sep 28 '14 at 1:41
  • @SeanC if this is a UX portfolio, I'd be wary of overly small navigational text (which is typically bad UX broadly speaking) – DA01 Sep 28 '14 at 1:59
  • @DA01 I agree. Sometimes visual and UX conflict each other. My detailed plan is that for the laptop version, only icons will show, and with hovered tips, hoping that once they get the idea of what each of the 4 icons stands for, they'll be able to recall it within the course of navigating my website. For mobile versions, there'll be a drop-down menu which shows both icons and large font texts. You think that'll be ok? – SeanC Sep 28 '14 at 3:50

I've once heard that the best icon is a text box. It is down to the point and cannot be mistaken for something else.

In addition to this, reflecting on your choice of icons, a typical user's mental model would be to think of your intro icon as "INFO", your motivation as "IDEA" and your process as "SETTINGS". It is key to immediately have your users relate to what you are trying to communicate. Match their mental model. Don't give them something else than they are already used to. You'll either be seen as pushing the envelope or as someone completely missing the mark.

My suggestion would be that if you are struggling to find an icon, then don't use one. You'll only end up with so many icons later-on that you'd need a legend. Made that mistake a lot of times!

Hope this helps you.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.