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

Post a Comment

Popular posts from this blog

Math Icon Board

Image
In my job, I am always looking for new ideas to share, whether it is a new activity or a new twist on an established one. Recently I got an email from Matt Miller at Ditch That Textbook with this idea -   an icon board for visual thinking.  I really got me thinking about how it could be used... and what other icon boards could be created. Since I am a former math teacher, that is where my mind heads - to math.  I started looking at the icons in the Insert Icons for Slides add-on, and sure enough, I found plenty that apply to math. So I started adding them, and thus creating my Math Icon Board My goal was to add icons that could be utilized in a variety of math and science classes. Obviously I do not have everything, partly because I couldn't find it or it didn't come to mind during my creation. When students use this, my suggestion is that they copy the icon (either by right-clicking and choosing copy OR hitting ctrl and C keys at the same time) and then...
Read more
Image
Math is Real Life!  It is the first Wednesday of November, which means it is time for Math is Real Life! I actually had an recent experience in my house that I shared with my students how my husband and I used the skill they were learning to make waffles. On Saturday morning tradition is to have waffles or pancakes for breakfast. A couple weeks ago, my husband and youngest daughter decided to make waffles and to use what pancake mix was left in the box.   I was in another room, but when I heard my husband say " 2 times one and a half equals 3", I ran into the kitchen and said "What did you say?" He replied "The recipe calls for 2 cups of mix, but there is 3 cups, so I figured out that 2 times 1 1/2 equals 3, so I will multiply my other ingredient amounts by 1 1/2 to determine what I need".  Well, I was a giddy mess, because in my ACCEL class I was introducing Multiplication of Fractions on Monday.  This is a topic that the kids always question me wh...
Read more

Remote Learning Recommendations, part 1

Now that many of us are in the thick of remote learning, or for those of us in my district, where we are preparing for remote learning, I have come across some great resources that I wanted to share. I am sure that throughout all this that there will be more, so that is why this is part 1. First, I have to say, I love Slidesmania . Her templates are amazing and I am constantly recommending her site to everyone. Right now, her Weekly Planner template is a must for teachers teaching remotely. Check it out! Second, I have seen a lot about educational technology companies reaching out to teachers, schools, and districts with free offers of normally paid versions.  On one hand, that is really cool, but it can be really overwhelming to teachers to decide what new tools to try in their classes.  Edweek  even wrote a very good piece on it. Based on what I have seen, planning with teachers and instructional coaches for remote learning, my recommendation is for teachers to ge...
Read more