Images and Icons

From my wire frame last week, I knew I had to design two icons (one for my blog and one for my coursework homepage) and an image to go with my education section on my introduction project page.

I used Adobe Illustrator for these designs.

I began with the image for the education section. I used one of my own pictures of Greenwich University and cut out the building using the pen tool.


I then created a clipping mask so that I could use the cut-out image. I placed it on a new artwork and added two hexagons.


I was inspired by the hexagons from this image on Pinterest. I really liked the simple designs and uniqueness of each hexagon.

I also really wanted to add my own design to the hexagons to make them a bit different. I played around with different “tribal” style patterns and designs. I used very simple geometric shapes and lines.


I wanted the design to be symmetrical and balanced.


The final design placed on the muted yellow hexagon looked different and eye-catching. Although it is not perfectly symmetrical, I tried to keep it as balanced as possible. It looks more astronomical than tribal in it’s final form, but I am happy with the overall look.


I then kept this design and started playing around with my blog and coursework website icons. I knew I wanted to keep the hexagons and use them as the icon shape. I also wanted to incorporate the design I created.

I didn’t want the design to be exactly the same on each hexagon. I un-grouped the design and removed half of it and played around with some text for the icon. However, I did not like how any text looked next to the very detailed design. I decided not to use text for the icons. I may need to go back and add text if it doesn’t make sense to the user.

These are the final (for now) blog and coursework icons:


Finally, I wanted to add the hexagons to my profile picture as well, so that the whole page would tie in together.


The hexagons on this image use the three main colours for the page from my swatches. They also incorporate my design on the y axis.

Although I am happy with my icon and image designs, I now need to add them to my HTML to make sure they work on my introduction page.

Thanks for reading, more updates to come!

Leave a Reply

Your email address will not be published. Required fields are marked *