Monthly Archives: November 2013

Portfolio Progress

I started work on my portfolio website after a lot of time contemplating design ideas and looking at other websites for inspiration. As the website is supposed to be representative of myself, I’ve decided to use a greyscale colour scheme with red as an accent colour because of my dislike of colours and my favourite colour being grey (Fun, right?). I wanted to keep the site clean and as minimalistic as possible hopefully without looking too boring and dull.

Image

Here’s a screenshot of how i currently have the main page of my site. The index page will be where I display my portfolio of work as this is the first thing I want people to see, making it clear that I do stuff… and this is it. Ignore the pretty pictures of flowers and such, they’re just placeholder images until I actually put some real work on there. On hovering over an image, it becomes resaturated, adding a splash of colour to the page and the title of the piece of work appears, as demonstrated by the first image in the grid. After making this i realised there are some potential issues here when viewing the website on a phone or tablet as you can’t exactly ‘hover’ over an image. A work around for this would be needed to detect when a mobile device is being used.

Advertisements
Tagged ,

Responsive Design

For my portfolio website I really wanted it to be responsive, to adapt to fit the window size better when it is changed. So Instead of using pixels to size and position things, percentages could be used. After playing around with them for a bit i had a lot of trouble trying to get it to work as i wanted. The same goes for VW and VH units. After stumbling across this website while looking for a solution to my responsive question I looked further into CSS3’s media queries. They look at the size of the browser and even the resolution of the device its being viewed on and can change stylesheet properties as appropriate. I feel this will come in handy when creating my website and making it responsive.

Tagged ,

I’m back! (with logos)

After almost 2 weeks of being too ill to move with glandular fever, i’m finally at a stage where I feel my brain is working enough to actually do something, and what better thing to do that post on this blog I’m supposed to be doing! 

Now, whats a digital media design blog without pieces of digital media design?! It feels appropriate to post something that I’ve done recently so that i don’t look like a complete failure as a student…

Logo Design

Image

Here is a logo i designed for my parent’s business, BuyBits (shameless advertising here). The logo was to be printed on their shipping boxes and therefore had to simple, clear and use minimal colours. The bold black font is easy to read, and the orange underline creates a link between the boxes and the online store. I made the logo on Adobe Illustrator which allowed me to change the shape of the letters to something slightly more interesting. I adjusted some of the letters to make them sort of fit together, which, in a way links to the tagline ‘Hybrid mounting solutions’ as everything is supposed to fit together and work. After seeing the printed boxes (unfortunately i don’t have any pictures) I can say the logo came out just as expected and is clear and easy to read. My only criticism is that the orange on the printed version isn’t the same. I’m not sure if that is a printing error or they just couldn’t make the right colour…. But it’s still cool.

On the topic of logos, this isn’t the only one I’ve created. For my A2 Product Design coursework where i was making a scale model of a shop, I decided to redesign the logo for the front of the store to create an individual brand persona which was still similar to the original brand. 

Image

The logo is for Diamond Supply Co, a clothing company, and as it was going on the front of the store it needed to be bold and easy to read from a distance. The ‘DMND’ lettering is indexical of the word ‘Diamond’ and the shortening has been used before by the brand and would be recognisable. As a failsafe the full name of the brand was included below just for clarification. The use of diamond outlines also anchored the name of the brand. The lettering on this logo design was made on Adobe Illustrator again, but to add the diamonds I used Photoshop. I know it would’ve been possible to do it all in Illustrator but honestly I had no idea what i was doing and am a lot more comfortable on Photoshop. This is something I would like to work on in the future and become more competent with both pieces of software. 

Im sure all of you are wondering what the final model looked like… Never fear, this time i actually have a picture of what it looked like. 

Image

It actually came out a lot better than I expected. The shop front logo was made of two parts, a sublimation printed background which has the diamonds and the small writing on it, and 3D laser cut lettering to make it stand out even more. As you can see I cheekily added a bit of colour to the diamonds to make it a bit more interesting and I think this really makes it stand out more than them just being grey. 

 

Tagged

I'm back! (with logos)

After almost 2 weeks of being too ill to move with glandular fever, i’m finally at a stage where I feel my brain is working enough to actually do something, and what better thing to do that post on this blog I’m supposed to be doing! 

Now, whats a digital media design blog without pieces of digital media design?! It feels appropriate to post something that I’ve done recently so that i don’t look like a complete failure as a student…

Logo Design

Image

Here is a logo i designed for my parent’s business, BuyBits (shameless advertising here). The logo was to be printed on their shipping boxes and therefore had to simple, clear and use minimal colours. The bold black font is easy to read, and the orange underline creates a link between the boxes and the online store. I made the logo on Adobe Illustrator which allowed me to change the shape of the letters to something slightly more interesting. I adjusted some of the letters to make them sort of fit together, which, in a way links to the tagline ‘Hybrid mounting solutions’ as everything is supposed to fit together and work. After seeing the printed boxes (unfortunately i don’t have any pictures) I can say the logo came out just as expected and is clear and easy to read. My only criticism is that the orange on the printed version isn’t the same. I’m not sure if that is a printing error or they just couldn’t make the right colour…. But it’s still cool.

On the topic of logos, this isn’t the only one I’ve created. For my A2 Product Design coursework where i was making a scale model of a shop, I decided to redesign the logo for the front of the store to create an individual brand persona which was still similar to the original brand. 

Image

The logo is for Diamond Supply Co, a clothing company, and as it was going on the front of the store it needed to be bold and easy to read from a distance. The ‘DMND’ lettering is indexical of the word ‘Diamond’ and the shortening has been used before by the brand and would be recognisable. As a failsafe the full name of the brand was included below just for clarification. The use of diamond outlines also anchored the name of the brand. The lettering on this logo design was made on Adobe Illustrator again, but to add the diamonds I used Photoshop. I know it would’ve been possible to do it all in Illustrator but honestly I had no idea what i was doing and am a lot more comfortable on Photoshop. This is something I would like to work on in the future and become more competent with both pieces of software. 

Im sure all of you are wondering what the final model looked like… Never fear, this time i actually have a picture of what it looked like. 

Image

It actually came out a lot better than I expected. The shop front logo was made of two parts, a sublimation printed background which has the diamonds and the small writing on it, and 3D laser cut lettering to make it stand out even more. As you can see I cheekily added a bit of colour to the diamonds to make it a bit more interesting and I think this really makes it stand out more than them just being grey. 

 

Tagged

Concept Brief 1

Anyone familiar with this brief would be quick to realise that this is being posted long after the 2 week project was completed. Why, you may ask. Well it’s because I only found out yesterday that the first blog post needed to be posted by today so i thought i better get cracking.

The brief was about Bristol Zoo, asking us, in groups, to create a digital user experience to keep regular visitors engaged and to add new ones. There were five main criteria that had to be met outlined by the brief.

• Utilises the Zoo’s archive collection of photos and associated facts from its past 176 years.
• engages users and facilitates new kinds of interaction.
• Makes the heritage sector relevant by using new technology.
• Maximises locative aspects (ie from mobile smart phone access – to onsite installation)
• Appeals to an audience of young families: (children 5-12 and their parents), visitors to Bristol
Zoo, animal lovers.

After a small discussion about the brief, then almost a week coming up with ideas we finally decided how we were going to fulfil all of the design points. Our idea was ‘Safari Snap’ a smartphone game/application which would create an engaging and enriching experience for children.

The general principal for the game was to first present the user with a question where the answer is an animal in the zoo. The user then had to go over to the animals enclosure and take a picture of the animal. after doing so they would need to scan a unique QR code for each animal which will identify whether the answer is correct. This process uses the ‘associated facts from the past 176 years’ mentioned in the points above. If the wrong QR code was scanned it would then prompt the user with another, easier fact in order to help them get it right.

Obviously having to scan a QR code retracts from the immersion in the game as the actual ‘taking a picture of an animal’ is rather meaningless. But then we thought, with all the pictures taken, the can be saved to create a lasting timeline of their day, the animals they’ve seen and it acts as a free memento for the day out. It would be nice to have software which actually analysed the pictures themselves to determine which animal was in it but this seemed to be a bit excessive for a niche game such as this.

The logo for the game was designed in the same style as the iOS 7 application icons as its always good for the icon itself to look good as it makes it more likely that people will keep the app on their phone for longer. The app logo uses the same orange as the website and the original Bristol Zoo logo to create an obvious link between the two. The main image is iconic of a camera and mimics the appearance of the existing camera application on the iPhone as it connotes that this app is to be used for taking pictures. 

Image

(That picture is really big.)

While that logo was being made I too was playing around on photoshop to see what wondrous marvels I could come up with. after a couple of attempts (and looking at an online guide) I finally managed to get the look I desired. This potential logo (or just a cool creation) wasn’t used for the presentation or even acknowledged by my group but I decided I will include it here as i’m quite proud of how it came out, even if I needed a little help. I’m just hoping that no one spots the part on the first ‘S’ where I forgot to add ‘fur’ to the outside. 

Image

 

When it came down to the actual presentation, that’s where I really need to step up my game. When choosing this course I overlooked the fact that it would require presenting ideas in front of other people. I was more focused on how cool it would be to make websites and games rather than what I would actually be doing. Public speaking, even in front of a small group is not my forte. This is a skill I will really need to work on over this first year as the briefs (I presume, anyway) become more substantial, and my presentation skills are under increased scrutiny. 

 

Tagged