My Three Graphic DesignsBy Matija Divkovic

NUMBER:01 My App Design Process

Coffee Run APP PLAYER

The Casual Coffee Run game player would have a range of Apps, that aren’t games. Their homepage would be neatly arranged with folders to save space and stay organised. Just as a reminder, my target audience for the Smartphone version of Coffee Run isn’t the general public, its people that are creative thinkers that don’t necessarily have time sit and play a HD game for the experience, but also don’t want to miss out on any indie games, so they play Coffee Run whilst waiting for/on transport.The whole point of Coffee Run is to display it’s original style and blend of colours. The artwork isn’t very clear on a smartphone screen, the resolution is also reduced to the 3x2 ratio, rendering the experience a little lost, but because the smartphone is operated via touch, there are fewer controls, making it MUCH simpler to maneuver through the city as the key character, making the casual gamers life a little easier.

Final Design

Improvements I have made -

● The Coffee is no longer the Stock image. ● The ‘CR’ initials are removed. ● The Full name is titled. ● There is no shadow over the whole image rendering it

cleaner. ● The Coffee Cup has a much cleaner look. ● The colours are slightly enhanced. ● Shadows have been added and blurred to increase

sharpness into the designs.

NUMBER:02 My T-Shirt Design Process

Adults top 2 Choice

Adults Top 2 Choices

Client Feedback 01 Design (Indirect)

CLARITYThis T-shirt is actually quite funny in a smart way. The fact that there aren’t any colours but you’ve used two contrasting shades of black and white makes it very easy to read the text. Also that it’s bold gives a great impact.

POLISHYou may have left it a bit plain though, but I understand that there isn’t much space to put a hipster picture of a mustache or whatever, it still works well by itself.

CONSISTENCY I think that the text is well spread and the typography is done well, there are even spaces between each letter.

Again, this would be purchased more if you keep the T-Shirt at the same level of quality and slimfit. You should sell them as designer T-Shirts.

I don’t like that the text is a little blurred or that there is a full stop after “cool”, you should change those and maybe add a mustache or hipster glasses at the back of the T-Shirt.

RATIONALI think that the subtext of the message works well with a hip-young audience that have irony interpreted into their humour. It’s not about the image with this T-Shirt, it’s about message.

Client Feedback 02 Design (Direct)

CLARITYThe design makes it less like a games T-shirt because most of them actually are black with the front of the game cover on top. Although the title of your game is on the T-shirt, Its very clearly an app game for, like androids and ipads.

POLISHThe colours seem to be similar to the games theme, just a little brighter perhaps. I think that the way the crates are drawn is interesting, definitely catches peoples eyes. I’m not entirely sure what the line is following the person though, I may recommend removing this.

CONSISTENCY The whole thing works well together, I’m not sure how you came up with the colours but they are very pretty. Maybe you can make them available for girls too? A unisex T-Shirt could be better.

I also want to say that having the T-shirt a slim fit is very important, I think that this t-shirt looks more designer when compared to the other six.

RATIONALThe idea from this shirt really came to life when I was creating the app logo. I have had the measuring accurate and really liked the colours, so I recycled the design.

My Choice

I decided to go with this design based on the feedback I received. This T-Shirt has potential in reaching a higher number of audience because the text complies with young hipsters as well as adult humour. If a younger audience member purchases and wears this T-shirt, it could show an adult that they understand grown humour.

Also, the T-Shirt could easily captivate the publics attention because it doesn’t have any colours like most Tees and could be distinguished from a distance because of it’s contrasting bold black text.

Improvements-

1. There aren’t any graphics on the front because it would clog the front of the T-Shirt. I should add a mustache or a cup of coffee on the back.

2. I could make the T-shirt for women too.

Back Designs?

Below I have some T-Shirts I found on google that all have a back design. I thought that It was appropriate to do some research before making taking the advice of putting a design on the back.

Of course I noticed that they are often very elaborate. They take up most of the back, I dislike that they are very large but I’ve made the decision to still have one. The only issue is that our current design’s T-Shirt’s neck is too low cut, I’ll search for a crew neck T-Shirt to put my design onto, that way I will like it. I still have to figure out what will be on the back.

What design will it be?

I thought about this for a while and remembered the original sketches from Coffee Run, me and the rest of the developers were fixated with using a character based on a film we had just seen called ‘Her’. We kept the Name “Theodore” but ditched the design, so it’ll be more of an inside thing.

I took the strongest feature of the concept art of my

Coffee Run character Theodore (his mustache). The mustache was intended because the game itself was aimed at a hipster/alternative audience so they would feel that the product is more personal to them and something they can understand. The front of the T-Shirt is Punny and could be purchased by the general public, so adding a mustache at the back opens more doors for this type of audience, the Coffee Run Audience.

Design with Improvement

I kept the front design the same whilst the back, I decided to keep it simple and not over do it. The mustache was something I went with because it shows exactly the sort of demographic I was after and it actually relates so much to our initial designs of our games protagonist Theodore.

I’ve kept the design the same on the front because there wasn’t anything wrong with it. Afterwards I took my design for feedback from my Client.

New: Client feedback

I really like the pun, I can relate to it because I bring coffee to work, and I understand that there is a mustache on the back because it’s a hipster style.

Here are a few suggestions in improving your current design - ● “I would add some Coffee Run Text to let people know it’s about your game, otherwise its just a

random cool T-Shirt”. ● I understand the mustache Idea, but you need to either get rid of it or make it a little subtle,

people might think it’s a pair of wings.● If you said you were going to create a womans version, you should do it, it doubles your

audience. ● Also, where will they be sold? They need to be made accessible by Coffee Run Players.

Improvements 02 (Navy hint + Back Mustache Print + Text)

FINAL DESIGN

Improvements 02 (Womens Version + Navy hint + Back Mustache Print + Text)

FINAL DESIGN

Price

ASOS Christmas Deal -These are online stores that have brilliant shipping and return policies.

The best time to release The T-Shirts is december 1st because if it all doesn’t sell by christmas, it will pile with the rest of the items for the big winter sale. This works in my favour because I will still be making a profit when Christmas is over because our products will be passed along to the winter sale, which is the largest sale of the year, next to Black Friday; meaning of course that after our product’s hit the top of their peak, they can still make a profit and sold for a price, even if it’s half price, they will still earn us back the money we put into their production. Asos is an online market as well as it’s own store, featuring brands from other stores, some big and some small. It has made a large enough profit to sell their own ASOS Clothing and promote themselves as a brand. I can pitch my design to them to make a deal to sell them on their site.

Colour Choice

The T-Shirt doesn’t have a ‘nerdy’ sketched game reference, or relates to that culture as much as the hipster trend which means that the buyer wouldn’t need to be necessarily awkward or geeky. The T-Shirt design has potential to grow as an individual design amongst people who aren’t aware of Coffee Run but are after a funny, cool looking T-Shirt. The colour I have chosen is to do with the modern diesel summer collection. They use navy blue/very dark blue (almost black). The colour navy is used in a lot of designer wear, which is essentially the route I would like to go with this design. ‘Surveys in the U.S. and Europe show that blue is the colour most commonly associated with harmony, faithfulness, and confidence.’

BLACKNAVY Vs

Colour Design

The interesting idea for the T-Shirt design is that because the T-Shirt itself is a bright white and the text is navy blue, essentially from the primary set, I believe that after the T-Shirt is washed a couple of times by the owner, the navy blue will fade to a Tertiary violet instead of a the grey shade it would have if it was initially black.

The colour blue is present on all of the colour wheels, it’s primary and shares a likeness to posh buyers, the average suave character would go out of their way to purchase something Maroon, Navy and most of the Cream coloured clothes.

I have decided that the white text shouldn’t need anything printed. The T-Shirt itself is white already so it’s unnecessary to print white onto white.

Design Colours & Measurements

The large Text Template should ALWAYS be placed on the front. The template should always be three inches specifically down from the neckline. The edges of the print must meet with the sleeves connection. The rule is applied to every size because the template changes one inch lower for every size i.e. Large would be two inches larger, Medium will be one inch larger and Small would be it’s original size.

The back design is ALWAYS on the back. It also changes its measurement by one inch and is kept ALWAYS one inch close to the back neck line.

Large Medium Small

Note-2-Self Colour for keeps

For the NAVYALWAYS use code #1a1c2b

For the whiteALWAYS keep it as a cut through. printing white on a white T-shirt is not only unnecessary but wastes print and isn’t costs extra.

As a photo design, For the WHITE

ALWAYS use code #fffffff

For the Font - use

IMPACT.However, I have saved a high resolution template so there won’t be need to re-create the design.

First & Final Design

You can see the improvement in the colour. The New Navy is much sharper than the previous design. the originals colour appears lighter, more faded.

The T-Shirt for the current design is a crew neck which gives space for a back design, an inch from the neck space whereas the original fitted shirt had a low cut top. This meant that there couldn’t be much space for the text to move upwards on the front and the back logo would have been too low from the neck.

I made sure to add the Coffee Run text to inform the buyer and tag the T-Shirt as part of the Coffee Run Marketing Campaign.

I WORE THIS SHIRT BEFORE IT WAS COOL

NUMBER:03 My Banner Design Process

Clients Top 2 choices

Client Feedback No: 01 (SkyScraper)

Rationale - This banner keeps its clarity, its made to catch peoples attention with its mysterious dark city silhouettes whilst also maintaining an interesting Samurai Jack Post-apocalypse art style. I felt that the design didn’t have enough images that clearly represent the game, so I implemented the Iconic Coffee Run hot airballoon.

Polish -The Blimp sort of completes the image, as well as the text because they are clearly elements of the game. I also like that you have used red, but where is the blue? You can’t use one of the colours that represent the game, this isn’t Star Wars, it’s not a popular game so not everyone will understand its the dusky sky from the game.

Consistency - I understand the necessity of including the Blimp but I don’t quite understand why the buildings in the background look like a dark tower.

Clarity - The Font is from the game as well as the blimp. They stand out the most because they are the same colour. The way rest of the image looks a little dark and sinister for the game, compared with the rest that I didn’t pick, this image is good but I only chose it because I had to make two choices.

Client Feedback No: 02 (SkyScraper)

Rationale - This introduces the game in a bright colourful way that fits the exact style of the game. The gameplay has designs that were so iconic, I made sure to implement them into the design. So even though some of my colours differ from the original gameplay art, some of the most recognizable artwork is interpreted in this banner.

Polish -I would say that the girder in the top of the banner is a cleverly placed asset from the gameplay.

Consistency - The images of the window are repeated and spread evenly throughout the building. The way that the blue is stronger works too.

Clarity - I really like the style of the Banner. I suppose that it could have more things about Coffee Run though? I don’t see much things relating to Coffee Run other than the Font and the Girder.

My choice from the feedback gathered

I have chosen this banner because I created it purely with photoshop shapes and images. I didn’t use many things as reference either, I just had the memory of The Grand Budapest Hotel. My most favorite style of drawing is sketches, before the final piece, it sort of shows the skeleton of the character, a journey back to its initial plan. It’s harder to pinpoint my favorite things in this banner and what I dislike, so I have used the feedback gathered from my Client to make some improvements to the banner.

To Improve this banner, I must -

● Introduce another colour, this only features Blue tones. ● Try to bring more elements from the actual gameplay, not too many though. ● Although this is similar to the Grand Budapest, it isn’t clear enough because of the

colour. ● Perhaps add a blur to the buildings in the background to make them look even

further away. ● Try and make the windows look a little less plain, or make aa few stand out by giving

them unique characteristics.

The Secret Code?

I’ve recently been interested in codes, it’s highly to do with the amount of mystery TV-shows that I watch. The code I created isn’t complicated at all, the numbers represent a letter in the Alphabet. I wouldn’t describe it as a ‘secret’ code because the game is free to download and play anyway. The reason for this code was because I worked quite hard on on creating the lower half of the banner and knew that people wouldn’t take notice when they are on a website. So for those people that do see the bottom, the creative thinkers might realize that those numbers aren’t random.

6-F18-R 5-E 5-E

FREE

Where will it go?

ArmorGames.com is a free Flash games website that has hundreds of thousands of users that enjoy the 2D flash entertainment. The site is well known for hosting other games developers content and advertising their present and future work. They also host a top games of the year ^.

To advertise Coffee Run on ArmorGames would cost the minimum of £100.00, this is mostly expensive because it’s a private website designed and created by Daniel McNeely, who began the site freelancing. The game site already presents a lot of good 2D flash games. If we need to compete, we may need to spend an extra hundred to increase the amount of Banners which could mean that I may need to design some extras.

The Grand BudapestI wanted to use the Grad budapest because the colour work was very impressive. When I work on any graphic design work, I always try to interpret some of my favorite artist, in this scenario, I have use the cinematographer from The Grand Budapest Hotel Robert Yeoman.

To the left, you can see a clear resemblance of TGBH book cover. I firstly had my design ideas after watching the film. My process began by starting a new photoshop project and using only the shapes available with the Georgia font for the numbers below.

I used some of the colours and made them darker. I do see that pink is the strongest colour, and since our game has blue as main colour, I used the my games palette more. I also thought that the artwork for this film was so unique, I wanted to create something that had the same style to reach the same creative minds. .

Re-Design Sketch process

1.

Design With Improvements

I have added a new colour to the sky, I felt that an orange was appropriate.

The windows also seemed rather plain so I filled the panes with a cream.

The Blimp is new, it is another iconic drawing asset to the Coffee Run Game.

I also filled the door with a purple as well as the sign to keep people interested by the colour variations.

I was unsure whether to add any more items used in the game because it looks rather full.

I’m actually not too sure that this still resembles the Grand budapest or coffee run, it looks like something in between.

New: Client feedback

“I enjoy the style, its very visually appealing. My only worry is that it doesn’t carry the same effect as The Grand Budapest Hotel’s posters. They are very subtle and you banner is too comicbook-like”.

Here are a few suggestions in improving your current design - ● “I think it would be safer to use two colours, perhaps your blue and red, that way you can follow

the concept of TGBH’s images, only containing two colours”.● “The building is fine, maybe add some more detail in the windows? or replace them entirely”. ● “You also need to add something in the middle, the top and bottom are too heavy with attention”.

Improvements 02 (Two colours version Excluding white)

FINAL DESIGN

I took my advice seriously and decided to make my whole design with using the colours red and blue. Overall I am quite pleased with how it turned out. The photograph appears more like The Grand Budapest Hotel now that I included some extra detail to my windows and background.

I may be creating this into a Gif, I had the idea during my edit in photoshop, I thought that I could maybe have the Girder fall and crash land whilst the blimp moved from the right side to the left and back.

Old Design Vs NEW

The first design was very pleasing, I remember when I designed it, I was shocked that I had created it using only shapes from Photoshop.

I didn’t think that anything more could be done until I received my feedback. Looking back now, I can understand why I was happy with the design but going it’s very good to get feedback because it’s unhealthy to create some work entirely without feedback because ideally, it is designed for the publics eyes, so it’ll be naive to think that somebody can’t spot something wrong with something you have spent hours on and think is perfect. “The art of collaboration is the most powerful form of art”.

The new design features some interesting 3D parallax by having the shadows of the windows and banners fall onto the skyscraper.

I made sure to trace a window from The Grand Budapest Hotel using my shapes in photoshop to make mine a little simpler.

I used just two colours, technically I have many but they are all variations derived from blue or red. This was challenging but I found it helped create the effect I desired for my client.

To Move The Banner or Re-Create

The Project is too complicated to be re-created and is easier if I put the file online. The only way to re-create the banner is to trace it or have the physical Photoshop file. I have prepared the banner as a photoshop file to make it easier for anyone to modify it. All of the dimensions and placements are locked to re-assure deliberate modifications and prevent any accidental moves, saving time. Although you won’t be re-creating the banner, if by any case the editor would like to mix with brightness or add filters but accidentally loses the original, the easiest thing to do is create a small square filled with the colour #95b4c6.The next thing to do is begin altering the brightness of the banner and try to match the colour of the box to the skyscraper banner.

Blue and Red

I chose these colours chosen resemble the main colour pallet for the gameplay. I have decided on these colours because they have worked well for many of my other product designs, including the logo and poster design.

The colour red in the regular household resembles Heat, hot tap water, hot oven or even hot toaster (the light stays lit on our toaster signifying its still hot). In the game it represents the danger in the dusk sky, seen as our red isn’t as vibrant and slightly brighter.

The Colour blue is the opposite to red, it represents cold taps or most things that involve water. The truth is, to be scientifically accurate, the blue in Coffee Run should be black and everything that appears should be saturated because realistically, the night isn’t blue. Films have re-applied the effect of colour to make the audience see the character, we have adapted to thinking blue or violet represent the night sky, where in fact it is a lie.

The colours together are present in the british flag, as the game was developed and produced in Britain, it could be seen as a representation except that its just coincidence, blue and red are also present in many other flags. They work god together because they are opposites, and once they are brightened and tweaked, they can appear as the dated representations of gender, blue for boys and pink for girls.

My Three Final Products