Final Reflection

The fact that my design is off a pun in my eyes it ticks all the imaginative and inspirational boxes. Though my controversial opinions might not make sense from ‘what makes a good design’ perspective. Nonetheless this design aspect (growing an idea out of wordplay) that inspire other people to think about coming up with ideas with their own products. My product’s theme (my coat) is the most imaginative aspect that makes it standout compared to other business cards.

Great ideas wouldn’t mean a lot if the execution of the final design wasn’t up to scratch. With that in mind I made sure to follow as many concepts of design as possible. The elements are asymmetrically balanced: whether it’s placing the arm on the left and the pocket on the right making sure that the icons are aligned correctly, I made sure to achieve a balanced design. For the colour scheme I went for yellow, red and blue (triad colours). I gone for a pastel and soft colour palette to give a cheery impression of my work, for that reason I choose to use vector graphics (known for their tranquil and flat colours) whilst sticking to colour theories. I repeated the same design for the buttons as a way to group them in one category (links) and made sure they were large enough to be easily accessible.

My final design was much reflective of my original plan though personally I would come with more ideas first time round (so that if this one didn’t turn out so well I’d have back up). Next time it would be better if I submitted several ideas as I was lucky enough that this idea worked out in the end.

How does it stand up to other pro designer’s works (namely their business cards)? Well it certainly wouldn’t look out-of-place in a pile or designer’s business cards though there’s still much to work on in my eyes. As it is an interactive card there’s a lack of dynamic interactions which will hopefully be resolved once I run this app though Adobe Edge. In terms of design my work lacks the simplicity of graduates but it stands up look wise (though I’m sure some elements are off-aligned by a few millimeters). To truly be able to boast about it I would need to add in little details such as animations whilst making sure that my design remains uncluttered (a pitfall that I know too well).

All in all I’m pleased about my app as it’s appealing and refreshing to look at whilst representing my persona at the same time. I think that’s the most important part about a business card, it has to say something about yourself with visuals, not words. Well moving on to animating the thing…

Production pictures

Some production screenshots to prove that my work is 100% legit:

Making the graphics in illustrator.

Making the graphics in illustrator.

Slicing in photoshop and linking in dreamweaver. The adobe difference (now if they only change some of their recent policies).

Slicing in photoshop and linking in dreamweaver. The adobe difference (now if they only change some of their recent policies).

What makes a good idea?

What is a good idea?

  • It has to stand out from the crowd (some doesn’t understand the fine line between inspiration and cloning).
  • Well researched and detailed in every form.
  • Something that piques people’s curiosity or even raise their eyebrows.
  • Well compared with other people’s ideas.

Idea generations

  • Take a theme and run with it- whenever you are asked to design something it’s good to have a theme in your mind, it allows your work to have direction and personality. If you were making an app don’t just think big buttons; give it a theme such as instruments: make your buttons and navigation actually keyboard keys etc. Little themes really splice up your design. For picking a theme I suggest using a wacky name generator or play a word association game.
  •  Brainstorming. The old tried and tested method of idea generation can be more than just a rubbish drawing of spiders and words. Get someone to help you when brainstorming to make the progress more entertaining. A pun game is a good start. Look at the stimuli and start making up puns: making a logo for a keychain company? A chain reaction can be easily triggered with a single word. That’s the power of the english language, puns. Use sticky notes and stick them on a board for this game.
  • Roleplay. No I do not mean the kind you see on many web chat rooms, by roleplay I mean standing in a potential client’s shoes. Do some research into an audience (documentaries, user surveys, even looking at the media aimed at them helps) or ask people who you know about it. Remember clients are humans if you do not show empathy or walk in their skin you’ll never make something that they like. If you are making an app for a child, roleplay as the child and try out some kid based apps.
  • Visualise everything. Get someone if not yourself to draw out everyone’s ideas; a picture is a much more effective stimulus than words scribbled on a page.
  • Relax. Sometimes when you lost something is better to go about your usual business rather than panickedly look for it; chances are it’ll pop up later. This is the same for ideas if you just relax the idea may just come to you (why do you think so many people have lightbulb moments in the bath?)

Attributes and Assets

List of attributes:

  • Large navigation buttons
  • Creative and simple graphics (non-obtrusive)
  • I’ll be using vector graphics and pastel colours so it should look clean.
  • Primary navigation reduces fuss.
  • Asymmetrically balanced layout.
  • My navigation will feature visual cues to enhance the user experience.
  • It fit into small screens (so I have to consider using liquid layouts).
  • There’s not a distracting amount text on the main page.
  • Contact information and social networks are implemented.
  • The theme (coat) is consistent.

List of assets:

  • Background (create in Illustrator
  • Buttons (created in Illustrator)
  • Colour scheme (Kuler) or I might just stick to red and yellow.
  • Links to my work.
  • Contact details
  • A printable PDF version of my CV.

As this is a CV to show off my own skills and works I’ll be avoiding any form of unoriginal assets and thus copyright shenanigans.
There’s no better to showoff whilst avoiding legal plotholes than with your own creations, if you ask me.

Production schedule (I’m just going to sneak this inside this post):
Planning – Tues 25th June
Completed, tested, evaluated CV app – Fri 5th July
Final deadline for everthing – Friday 26th July

Inspiration (yes more)

Kick my Habits

Kick My Habits Interactive Tool from Leeds Building Society

Kick My Habits by Leeds Building Society

Why it succeeds:

  • Clean vector graphics.
  • Dynamic animations add to the charm and immersion.
  • Consistent colour schemes (mixture of purples for main theme, you can tell that this is targeted at teens).

Currency App

  • Minimilstic and clear graphics.
  • Easy to read fonts
  • Navigational features stand out and are easy to use thanks to large UI and simple visual cues (arrows etc).



Screen Shot 2013-06-24 at 09.36.59

  • Flat UI mixed with 3D layer perspective gives their portfolio a unique yet striking look (and it’s consistent).
  • Navigational buttons that get to the point (make an enquiring? Easy, just click the enquire button, no need to search around the site).
  • The layout of text and images provide a visually appealing and asymmetrically balanced design.


For this project I’m creating an interactive CV for the purpose of demonstration my skills and work to future employers as well as providing contact informations. As this is an app for myself I will be the client along with my prospective employers so naturally I would have to practise the art of standing in an employer’s shoes. Which means that it will need to look professional, refined and preferably snazzy.

When making a technical product I need to consider many standards such as screen layout, writing style (short sentences, bullet points) font (sans-serif is my best friend), image sizes and compressions. Especially since this is for a mobile devices I have to make sure the content is easy to use whilst maintaining style on a small screen (I’ll need to test it out on different devices). Image compression is to be considered as the larger the image the longer the loading times. Of course it’ll have to be grammatically correct.

As someone who will be trying to sell themselves as a digital designer it would be essential that the CV itself follows graphic design principles. Gold ratios, rule of thirds, balance, unity (buttons/UI have to stick to a theme), rhythm, colour theories (RGB for devices), the whole lot should be ingrained in my mind when I’m designing the CV. I’ll be using apps such as Kuler to pick out a suitable colour scheme for my CV.

We are not finished yet. Navigation and interactions are what makes a digital CV differentiate from its print cousins. For a mobile device the navigation/UI has to be easy to decipher, relatively big and non-cluttered. I’ll be using primary navigation (no secondary or tertiary  to ensure that users can access content without all the fuss. Interactivity should only be added for what’s necessary so no excessive functions cramped in one page; people hate it when there are too many elements on one page as their destination (i.e. that link to your blog) will be obscured. So for this CV I’ll stick to links and subtle animations (coming next unit!)


  • Fonts considered: Myriad pro, Verdana, Something unique?
  • Patel colours since the target audience is adults and also because it’s more gentle on the eye and suitable for those that are colour blind or dyslexic.
  • Creative background- I’ve decided to do something creative for once.
  • Contact details that are easy to see and utilise (their will be either text based or linked images, most likely the former).
  • Visual cues to indicate that something is interactive or has been interacted (image change, colour change all of that stuff).
  • Consistent theme, so keeping my buttons/links the same shape is important.

Brainstorms, initial ideas and moodboard.

Before you admire my lovely planning notes I must first give you the purpose of my CV. It will be my weapon of choice during job interviews, a convenient business card , the hub to all my work and the shiny watch I’ll wear proudly. That last one was a metaphor. This will be the first impression my possible employers will obtain so it’s of utter importance that I get it right. Let’s go:

design sketch

Initial idea sketch- I thought it would be interesting to have a coat theme where the navigations are quite literally buttons. Puns really do help with creativity.

Me and moodboards I just can't stop making them.

Me and moodboards I just can’t stop making them.