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.

greenwichcrop

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.

screen-shot-2016-10-28-at-14-42-03

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.

screen-shot-2016-10-28-at-17-06-01screen-shot-2016-10-28-at-17-10-28

I wanted the design to be symmetrical and balanced.

screen-shot-2016-10-28-at-18-12-15

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.

screen-shot-2016-10-28-at-17-57-40

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:

blog-iconcoursework-icon

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

profile-pic

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 *