Icon Usage in Website Design

Today is the last day of my EDLD 5303 class, so at some point over the next week, my e-Portfolio will be reviewed and graded. So for the next week or so, I really shouldn't make any updates.

Except now I really want to make updates.

Over the last couple of weeks, I have been part of a team building and collaborating on a internal website for my district, one that has tutorials and resources for teachers during our time of at-home learning. Even though I have experience with web design, I haven't really done it in a team setting. I learned a lot about design and one of the cool things I learned about is flat icons.

According to Iconion, Flat icons are part of flat design, "which is a minimalistic design approach that put emphasis on usability. This kind of interface focuses on open space, bright colors and flat graphics or illustrations."  Flat icons are "clean and have crisp edges again with a flat two- dimensional graphic layout".

I had heard the term flat icon before, but hadn't given it much thought. But with this project, I learned a little and found the Flaticon website. I started browsing, and I found some icons I really like. Below are a couple...

digital learning girl digital chat


So now I want to redo my whole portfolio with these icons.... I have been been working on a new header photo to match the colors of these icons. But I will have to wait....

Use of Icons on my e-Portfolio

The other thing we have discussed in our collaboration and in my class discussions are the use of icons in general. I assume when there is an icon that I should click on it, because it will lead me somewhere, and if it doesn't, nothing will happen. But I learned that is not always the case. 

I got some feedback that my e-portfolio was a little hard to navigate, and I struggled with that. Since my job is teacher technology support, I spend a lot of time thinking about the end user when creating websites or professional development. So hearing that about my personal site made me scratch my head a little.. and I realized it was due to the icons. Not everyone understood they could click on the icons. For example, my About me page has links to my learning networks, but they are icons only. So I added a note that clicking an icon will take you to the needed resource. I then went back and added a similar note to most of my e-Portfolio pages, if they needed it. After that, I went to other sites (for teacher trainings or reference materials) I have created and added a similar note. 

Having this conversation helped me realize that while I know a lot, there is still much I need to learn in order to grow in this area - and I am looking forward to it! 





Icons made by Freepik from www.flaticon.com

Resources:

Iconion. (2013). What is Flat Web Design? Retrieved April 5, 2020, from http://iconion.com/posts/flat-icons---what-is-a-flat-web-design-exactly-g.html

Comments

Popular posts from this blog

Math Icon Board

Remote Learning Recommendations, part 1

My Personal User Manual