mydesuniwork-blog

[mydesuniwork-blog]

Conclusion

Overall I am very happy with my icon set created for COM311. I would love to add more icons over time to the website, so follow this blog for updates.

There are however a few things I would like to change.

I would of liked to make the site more responsive. The site itself runs fine on my mobile phone. However I would like to test it on other devices.

Animation would be a great thing to add to the website. This would give the site more aesthetic appeal.

I would love the site to run from a database. Meaning I can quickly add more icons in future and having the page generate from the database.

[mydesuniwork-blog]

I had the idea to animate the bottle caps by having them spin around. I didn’t include this in the site, but it would be something I would like to add in future.

[mydesuniwork-blog]

Building the Site

Check out the site here! jonnytodd.com/bottlecaps/

The site itself has a very simple layout which didn’t take me long to put together. The difficult part was adding the JavaScript and jQuery effects, as well as adding lines beside the headings.

This is what the final site looks like. As you can see if differs slightly from my initial Photoshop design. I added a background of bottle caps. These can viewed if the user moves the mouse off the screen, it then displays all the bottle caps (some not featured in the site). When the user puts his mouse back on to the page the container reappears. This uses transitions to give a smooth change.

This is what the site looks like when you first load it.

 The jQuery counter found below each icon was hard to code. However it works perfectly.

It selects the select tags through the specific id in each div. It then activates the function once a selection box is changed.

If I had more time I would like to add more instant feedback about whether the user got it right or wrong. At the moment its only the number changing at the bottom. However as more caps are added (which I intend to do) this will be pushed further down the page. Meaning the user will have to scroll down.

[mydesuniwork-blog]

Intial Website Design

I had a really strong image in my head about what the site will look like. I started by designing the look of the site on photoshop. As I mentioned earlier, once I have an idea that I draw down I tend to be very happy with it. This is why my initial design looks very similar to the final site.

The final site can be found here: jonnytodd.com/bottlecaps/

[mydesuniwork-blog]

These are the bottle caps featured on the TV shows section

Duff Beer (The Simpsons)

Pawtucket Patriot Ale (Family Guy)

“The Gang makes a brew” (Its always sunny)

Dharma (Lost)

Slurm (Futurama)

[mydesuniwork-blog]

These are the bottlecaps used on the movie section of my site.

100 Proof (Death Proof)

Coconut (Django Unchained)

Pan Galatic Gargle Blaster (The Hitchhikers Guide to the Galaxy)

Bingo (Inglorious Basterds)

Deadpool (Deadpool)

[mydesuniwork-blog]

These are the bottle caps featured on the games section of the website.

Energizer Drink (Dead Island) 

Nuka Cola Quantum (Fallout)

Nuka Cola (Fallout)

Pisswasser (GTA)

[mydesuniwork-blog]

These are a few pages from my sketchbook. These were some ideas that I was playing around with as I was coming up with a few more ideas.

[mydesuniwork-blog]

Here is the first batch of bottle cap icons I completed Slurm - Futurama "The Gang Makes a Brew" - It's always sunny in Philadelphia Duff Beer - The Simpsons

[mydesuniwork-blog]

These are my first designs for my caps, as you can see I really was happy with most of my initial ideas, although I do experiment I only really tend to draw down an idea that I really like in my head.

[mydesuniwork-blog]

Getting my idea

My idea for my icon set came about after (slightly tipsy) I traced around a bottle cap in my sketch book. My friend, knowing of this project noticed this and said I should do a set of icons around fictional beverages from different types of media. I thought this idea was perfect and immediately started doing sketches.

This then continued to the idea for the website, which was to have users try and guess where the bottle cap is from. For example, users would guess that the Duff Beer cap is from The Simpsons. I did not only want to do fictional drinks from shows, but also create caps for drinks that could exist in the piece of media they are from or design a cap around certain references form the piece of media, for example the “Bingo” cap is inspired by Inglorious Basterds and themed heavily around references from the film but also drawing inspiration from German beer logo designs.

The great thing about this idea is that it can be constantly added to. I didn’t feel pressured to do many icons, I just made them after I came up with the idea. (Getting them was quite difficult at times). I fully intend to keep creating bottle cap designs even when the project is completed. This is also why I am hosting the site on my own personal web address, I am very proud of the project and wish it to reach a wider audience that just my colleagues from University.