Application Design Portfolio by Aidan Needham (Piemonster98)

WEBSITE DESIGN

Website design could be tied in with other briefs but ultimately consitsts of creating a working or flat design for a website.

LOGOS & BRANDING

APP & UI DESIGN

App and user interface design involves digitally creating the look and feel of a piece of software. The creator needs to think about the way the design looks but also how practical it is.

TRANSFORMATION

Logos and branding involves taking an existing company and transforming the design to something different and hopefully better. The process involves creating a new logo and redesigning a companies look then showing it through something like packaging, website or posters.

ILLUSTRATION ICONOGRAPHY Icons are visual images and symbols normally used in replacement of words. They are generally created using digital media and can come in various styles, such as flat design icons.

Illustration is very similar to simply drawing an image. It could be digitally illustrating a childrens book or creating limited edition packaging for a company where they want something illustrated.

LAYOUT & PRINT This can iclude creating posters, portfolios or something like an infographic. An example of a brief could be that a new restaurant has opened and they want a new menu designing.

ENTERTAINMENT These apps are designed to entertain. Examples of these types of apps are: Face Juggler, Talking Ted, Baldify and Pimp My Screen.

UTILITIES

LIFESTYLE

We use these apps to enhance our lifestyles and to make everyday living â&#x20AC;&#x2DC;easierâ&#x20AC;&#x2122;. Examples are: Fitness apps, Travel Apps, Food & Drink apps and Music.

These are handy tools that you carry with you that help you perform simple tasks. Examples of utility apps are calculators, note-pads, communication apps and even Weather apps.

APP DESIGN PRODUCTIVITY

GAMES Game apps have been a favourite among app developers for years due to obvious reasons. Examples are: Angry Birds, Cut The Buttons and Sudoku.

Productivity apps are developed to help us be more productive. Examples of these apps are: Finance apps, Calendars, Translator and Grocery list makers.

SOCIAL MEDIA

NEWS

Nearly all of us use Social Networking apps and other software like Microsoft Outlook, etc. are moving towards the social networking platform. Examples of Social Networking apps are: Facebook, Twitter, Snapchat and Instagram.

The most important feature of a news app are the sharing functions. These apps spread virally through providing strong content to a mass audience. These types include: ZNet, News Stand and Educational apps.

- JAMIEâ&#x20AC;&#x2122;S RECIPES 4

- KITCHEN STORIES 5

- YUMMLY RECIPES & RECIPE BOX 6

- STRAVA 7

- NIKE+ RUNNING 8

- RUNKEEPER 9

STATEMENT OF INTENT The idea around this project is mobile application design. My plan is to transform an existing app into one with a new design and possibly some new features. My aim is to redesign something like a cooking, or travel app, however I don't want to redesign anything related to games or social media. The main focus around my app will be flat design icons. For example if I was to design a cooking app, then each dish would have an icon to accompany it. In addition to this I will create a new logo and design the entire structure of the application. Eventually I would like to transform my designs into a working app however I currently lack the technological knowledge to do so. The methods I will use will be primarily digital design, using illustrator but I may initially sketch out my design ideas on paper, then vectorize them digitally. I will mainly use the Behanced website and Pinterest to look for flat design artists and of course be looking at real life applications to look for the best one. I will download theses from the iOS app store. This project fits into the theme as I will be redesigning an existing app which directly links with the theme of transformation. The outcome of this project will hopefully be a large page with every page of the app I've designed and maybe some mockups of the app in use in the real world. I hope my work will look more visually pleasing to the person viewing it which will make them want to download it. Hopefully it will be more practical to use and overall just be a better app than the existing one.

Rebel Minds are a small team of designers and engineers who create digital products for companies. One of their latest creations is a beautiful calendar app called ‘Rolo’. It is simple yet still managers to be very functional. The app is designed for people who don't like calendars as it completely changes the experience from a normal calendar app. The aim of the app is to be more intuitive. We think of time in circles, a 365-day orbit around the sun or a round face on a clock. Rolo takes this idea and has designed a calendar around it. The app features bright colours in the day but dynamically changes the background when you browse through your night time schedule. I really like the look of the app but more importantly how it works. The app features a flat design which is what I’m aiming for in my app. Although simple the app is a little too playful. The bright cartoonish design might not be taken seriously by someone who relies on their calendar on a day to day basis and the functionality can sometimes become fiddly and hard to use.

REBEL MINDS DEVELOPERS.

“We make sexy digital products for clients.” 11

Ryan McLeod is an app developer who recently created the mobile puzzle game, â&#x20AC;&#x153;Blackboxâ&#x20AC;?. I chose to research this app because of the concept and the way it conveys the genius concept through stunning design. The app is basically designed so you have to touch the screen as little as possible but still work your way through puzzling challenges. The challenges are given by visual cues which are very well designed and animated. The game is both dark because of its black background but gets lighter as you complete more challenges. The logo is simple and assuming you have played the game is easily recognizable. A problem with the logo is that it would struggle to work in black and white but as this is a game and not a brand, it shouldn't have to be presented in black and white.

RYAN MCLEOD. 12

SORTED FOOD

The Sorted Food youtube channel entered youtube in May of 2010, created by Jamie Spafford, Ben Ebbrell, Barry James Taylor and Mike Huttlestone. The idea around the channel is simple food recipes anyone can do with things you'll likely find in your cupboard. As of February 2016 Sorted Food have over 1.4 million subscribers to their channel on youtube and gained over 170,000,000 views on their channel. As well as this Sorted Food have launched an official mobile application on the App Store (iOS) alongside their channel which is what I will be basing my work on. Sorted food won multiple awards including “Best Online Program - Entertainment” at the 2011 Banff World Media Festival and “New Media Award” at the 2014 Guild of Food Writers awards. The channel design follows a bright yellow theme with a lot of photos to show things rather than digital illustrations. The application isn't the most practical design but contains a lot of information. The text in the sorted food logo is very well designed and will be difficult to improve upon but the app logo is simply an ‘S’ and I think will benefit from a change. The text in the logo consists of a bold and capitalized “Sorted”, followed by a lower case “food”. Putting these two next to each other emphasises the sorted section of their logo which I really like. The font features a lot of serifs which makes the logo look a little old and could be made to look more modern to suit the rest of the theme of Sorted.

JAMIE’S RECIPES Jamie’s Recipes is one of the biggest food apps on the app store. It is bright and well designed piece of software that features many recipes and cooking tutorials. The app’s follows a strict yellow, black and white colour scheme and the main source of imagery is photo’s and videos of food. I really like the design of this app but I feel like the design could be de-cluttered a lot. Although the app offers a lot of useful information, it can be very hard to navigate to that information, the Sorted food app is very similar to Jamie’s Recipes in this respect. I hope my design will make it simple to navigate around and allow the user to find exactly what they are looking for. Another aspect I like about this app is the use of bold text to emphasize the key information. I like this idea and I will try to implement in my design.

RIVAL APPS 16

IPHONE HEAT MAP A study conducted by mobile expert Steve Hoober has found the easiest and hardest places to reach on 4 generations of iPhones. I chose to look into this as it will help me organize where different buttons go on my application. Obviously most people are right handed so the easiest place to reach is in the left part of the screen. The highest priority buttons will go on the left hand side of the screen as they will be more easily pressed there. IPHONE 6 PLUS IPHONE 6 IPHONE 5S IPHONE 4S

- NATURAL

- STRETCH

- VERY HARD TO REACH 17

LOGO RESEARCH These designs all feature some kind of visual pun in them, I really like the idea behind them and would like to try this type of design out with the Sorted brand. The designs all work well with no colour but more importantly, are easy to remember because the text and the image are both part of the same design. Although these sort of designs are difficult to create, I believe they are the most powerful type of logo; they are clever, original and easily recognizable.

INITIAL ICON/LOGO DESIGN For my initial logo designs I simply started to draw any things related to food. After I drew the image I then developed it further to a stage where I could see the design working as a logo. I plan to scan the page and recreate my favorite designs in a digital format. Some of these designs may also work as icons for different parts of my app.

BURGER ICON To create this design I started out in illustrator roughly sketching the outline of half a burger. After I completed this I duplicated the design I made, flipped it and added the two halves to make a complete design. I like to create my designs this way as it allows me to get a perfectly symmetrical image. After this I remove the outline, fill the image with relevant colours and edit any parts that look odd being symmetrical; such as the cheese. After this I decided to do experiment with screen printing this design. To do this I had to make the design completely black which created an issue because the burger became a large black blob which had no graphical value. To solve this issue I separated different parts of the burger which looked good because I ended up creating an image which had a lot of negative space.

vaginas

SCREEN PRINTING Screen printing is the process used by designers all over the world to transfer designs onto a material. Screen printing is most commonly used on t-shirts as its one of the most cheap and easy ways to print a design onto something. The process involves making a stencil in a mesh. Some areas are made impermeable to ink and other areas let the ink pass through. The material is placed underneath the design and a squeegee is used to move the ink across the stencil. The ink is loaded firstly by pulling the ink over the stencil while applying minimum pressure, after this a reverse stroke is applied with pressure to cause the ink to make contact with the paper. For my first attempts at screen printing I only used one colour as you will be able to see on the next page but as I became more comfortable with the process I started to to marble the colours which created a really nice pattern. Although not all the designs turned out to be a perfect print, I like the imperfections that I got from the screen printing process as this is something I couldn't achieve on a piece of digital software.

SCREEN PRINTING DIAGRAM

FRAME PAINT/INK

DESIGN

MESH

SQUEEGEE

MATERIAL

One of the effects I used when screen printing is marbling colours which gives the effect like the one to the right. I chose to talk about this design because of the smudged effect I got on the right side of the design. Although it appears to be a defect in the design, I actually like the effect it has on the design and with some tweaking it could work as a logo for my app.

This design was made with just one colour unlike the other. When I made the design I deliberately left the cheese as negative space which worked really well when screen printing. The design is bold and would definitely stand out as the only image on something like a t-shirt. I think it could work as the logo but is a little boring and a isn't the most original design. This design will probably work as an icon to work within the app.

Later on in the project I will need a phone to showcase the app. I traced around an actual image of an iPhone 6 to get an outline and then created these three designs from the outline. The most realistic is the middle one but the other two may suit my designs better as they follow my rule of keeping designs to a bare minimum.

VECTOR IPHONE DESIGNS 28

DESIGN PROCESS

To create this design, I first got an image of a iPhone 6 from the internet. After this I imported it to a Illustrator document, lowered the opacity and locked it in place. I then started to trace around the design. The easiest way to do this, is to do one half, then copy and flip that half and stitch the two together. This process only works if the design is symmetrical however. After this I started to add the more detailed parts like the volume rockers, front speaker, etc. This is the hardest part of the process as these are the smallest components of the device but a high zoom level makes the process much easier. When the outline was complete I simply changed the colour of the stroke outline and filled in the screen with a block colour. I decided to not add any reflections to the screen as I wanted to maintain the simple design theme I have talked about throughout this project. 29

COLOUR PSYCHOLOGY

Colour Psychology relates to the mental and emotional effects different colours have on people. Although elements of colour psychology have been proven, it is still going to effect different cultures around the world in varied ways. For example, the colour red is often associated with excitement, and being bold and youthful. Whereas the colour green is associated with peacefulness, being healthy, calm and often is seen as a sign of growth and life, this makes it a really good companion to be the theme of my app as the application is based around food and green is often seen as healthy organic produce.

EXCITMENT

FRIENDLY

OPTIMISM

PEACEFUL

TRUST

CREATIVE

BALANCE 31

S 32

LOGO DESIGN This logo is simply an adapted version of the current logo. I felt the that the current logo didn't explain enough what the app was and what it did, so I tried developing it a little further so anyone looking at it can see that this is a food application. To do this all I did was add two items as you can see above. I changed the â&#x20AC;&#x2DC;Sâ&#x20AC;&#x2122; a little as I didn't like that the widths varied a little as it curved. I tried to keep it simple but still be informative with this design which I feel I achieved. Another thing I decided to change is the colour. A main rival to the Sorted Food app is Jamieâ&#x20AC;&#x2122;s Recipes and both feature a bright yellow colour scheme. For that reason I decided to play around with some new colour choices for the app. I feel that green works well as this relates to healthy and natural food. When developing the logo on the previous pages, I altered many things to find the best looking design. The key changes were rounding the edges of the yellow square which I much preferred and decided to keep. Another change was adding a spoon instead of a fork at one point but this was extremely difficult to get right and in the end I decided that the fork worked a lot better. The last big change was adding a white border to my design. I did like the border and I could happily keep it in the design but I ultimately wanted to keep the design a minimal as possible so I made the decision to remove it in the final design.

S 34

EXPERIMENTAL LOGO For this design I decided to get a little more creative, I used actual pictures to create a logo. As you can see below I used a omelette cooking in a pan to create the ‘R’ in the word sorted. Although this design is quite special... It simply wouldn't be a practical method for creating my logo. First of all I don’t own any of these images which means I would have to take my own photos to use which would expend a lot of my time for only a very small part of my whole project. The second reason is that the project is heavily icon based, using photos in the logo would be very hypocritical of me. The final reason is that the logo has to fit in a tiny box on your phone. This logo would not work when shrunk down to a small area so unfortunately this creation is unlikely to make its way into the final design.

PLATE LOGO DESIGN

Because my application is based around food, I thought it was necessary to experiment with some logos based around a knife and fork. Initially I started out with just a knife and fork. I then moved the position of them so they were both perpendicular to each other rather than parallel. After this I removed the colour but left a black stroke. At this stage I preferred the block colour but I had the idea to intertwine the two utensils in a more original way. I managed to achieve this so I placed the utensils in a plate and positioned my Sorted text under the design.

SORTED

I donâ&#x20AC;&#x2122;t think this design is good enough for the final logo but I still feel the knife and fork design has potential to be used in my final app as an icon.

SORTED

TICK LOGO DESIGN The word sorted makes me think of a something you've done, completed and now its out of the way. For this reason I thought I should try creating a logo with a tick in it. These are all the developments I made. I used three types of ticks, my favorite is the top one as it just looks like the most natural tick. After I’d experimented with different tick designs I went onto using just a large ‘S’ but I don't think this worked very well as it just isn't recognizable enough, (and will most likely be mistaken for company ‘Sure’). My third development was using a using a negative space technique. Although this did look quite good I still think the first row is the best.

SORTED SORTED SORTED

S S S

SORTED SORTED SORTED 38

S SIGN IN WITH FACEBOOK SIGN IN WITH FACEBOOK

FORGOT PASSWORD?

S WELCOME Email address Password Create Account!

Forgot Password?

These designs show some initial design ideas for the first page of my app. I started off by taking the information from the official app and simply doing a rough design in illustrator of what mine could look like. After the first design I made the logo removed some weight from the logo, added a welcome message and made everything a little less fat. In the third development I removed the welcome message and replaced it with the Sorted text. I then made the text a light shader of grey and tried out the other colours (on the next page).

PRACTICE DESIGNS 39

Although I do like some of these colours, I am choosing to stick with the traditional Sorted yellow. The main reason for this is that Sorted has built up its whole image around the colour yellow and I still want my design to be recognized as Sorted, not a completely different application. These are not final designs and will definitely change when constructed in my final piece but this gives a rough idea of what my app could look like. In my final piece I think I will add rounded edges to my text boxes and remove the white box around the â&#x20AC;&#x153;forgot passwordâ&#x20AC;? button. As well as this I plan to add the signal, time and battery icons up top however this was pointless doing in the practice stage as it will look exactly the same in the final design. Usually I would use two different fonts for a design, however the font I have used - Futura - seems to work as it looks relatively different when capitalized compared to lower case. I chose this font as it is simple, works well bold, and provides a bit of a less serious font in normal text as oppose to a font like Helvetica Neue.

SORTED

Email address

Password

Create Account

Forgot Password?

SORTED

Email address

Password

Create Account

Forgot Password?

APP FLOW-CHART ENTER

CREATE A PROFILE

APP HOMEPAGE

RECIPE CATEGORIES

APP HOMEPAGE

MY COOKBOOK EXPLORE

INDIVIDUAL RECIPES

UPLOAD RECIPE

RECIPE INSTRUCTIONS

This is basically just a map of some of the main pages I intend to do during my final design, its not a definite map and I made add or remove some pages depending on what works and doesn't at the time however it provides me with a rough guide so I don't get completely lost.

EXAMPLE SCREENS

3 4G

12:34

S SORTED

100%

3 4G

12:34

100%

3 4G

12:34