Weather App Design – Game Salad Final

app design, U62_U63

Here’s the final export of my interactive Game Salad weather app.

preview_01_header

Advertisements

App Design Evaluation

Adobe Illustrator CC, app design, Computer, design, Digital Art, Evaluation, mobile, U62_U63, User Interface Design

Designing an app was really interesting to me, as I had never worked in Illustrator before. Being able to learn how to create shapes and vector graphic art was really eye-opening and a whole different mindset to what I was previously used to. We were given a choice of three themes for our app: fitness, student cooking or weather. I chose to create a weather app based around cartoony characters to help children read the weather forecast and also understand the nature and science behind it too!

At first, I wasn’t sure of whether to base my app around cooking or the weather. I knew that the icon and aesthetics of weather apps was something that appealed to me more from a designer’s stand point, but at the same time I thought that creating funky food icons would also be really fun. So I brainstormed ideas and sketched out rough designs for both themes and eventually settled on creating a colourful weather app targeted towards children, teenagers and young adults. I wanted to do something character based because I knew that was a strength of mine when it came to creating and designing. Having colourful, personified characters is also very popular and appealing trend towards the younger demographic, as it makes subjects and themes more relatable and human. (literally!) Personification made things easier to understand whilst also being fun and imaginative.

After finalising my idea, I moved onto researching mobile apps and looking at their icons as well as analysing their navigation and how certain design choices were made to fit with whatever function the app focused on. For example, with photo editing apps obviously the main part of it is the photo itself, so that takes up the majority of the app display. With my weather app, the main focus is obviously the weather so the main information such as the day’s temperature is the largest feature on the screen. The mascots were the other main feature, so the two components share the homepage as main text and main image. I also looked at other aspects of app navigation and incorporated basic, yet effective principles from good UI designs. I learnt that the simpler the navigation, the better – and using the touchscreen to your advantage made your app feel more natural and smooth to use. I also observed some really poorly designed apps and made notes on what shouldn’t be done when designing an app. For icons, I looked at the use of symbols and basic vector graphics to give a clean, professional and simple look to your app icon and that squashing text onto a 120 x 120 dpi canvas was a bad idea. (Resizing text to such a tiny scale would make it impossible to read as well as make it look awfully clustered and blurred.) The various elements of app design that I researched really helped me gain a better understanding to my own app’s design.

After researching, I began drawing and designing and redesigning my app details until I reached the final design. I first drafted out a navigation map of my app and story-boarded the pages, fleshing out the layout and movement of the whole app. I did my best to keep it simple and straight forward as possible so that any children or young person would find it easy to use. This mindset continued onward into my character designs too. When I made my initial sketches for my characters I knew that they were a little too complex to recreate in a program like Illustrator that heavily relied on manipulating with basic primary shapes and lines. So I kept on redesigning the mascots until I got a result that was fun, but easier to recreate digitally later on. I researched designers called Brosmind in order to help me come up with a simple art style.

Once I had planned and designed all of my app elements in my sketchbook, I scanned them in and used those drawings as a base to work on in Adobe Illustrator. It took me several weeks to eventually come round and complete making all of the icons and characters and it was a huge learning curve. I went in knowing only the bare bones of the program, but persevered with it until I finally came out knowing it pretty much inside out. It took me a while to understand it’s unique creator mindest, as working with vector shapes and lines wasn’t something I was familiar with at all. But after mastering the pen tool and pathfinder function, creating my mascots became progressively easier.

After exporting the final mock ups of my app pages, I was introduced to the program Game Salad. I used this program to create a very basic interactive display of my app, importing all of the individual components into the program before then creating scenes and adding basic events and actions using the interface’s drag-and-drop-system. I couldn’t make things too advanced as I was limited with what the program would allow me to do without digging into expressions and specific coding. But I programmed enough to have the basic page navigation working and even have some elements rotating on scene!

Overall, I am very pleased with the outcome of this project and have learnt an awful lot about Adobe Illustrator and app design. The digital colours and simple Illustrator designs really helped flesh out the look of a simple, yet fun and interesting children’s weather app. In addition to the Game Salad programming demonstrating an example of how the final app would actually function, I think the overall project turned out really well in the end and I am very happy with the results I achieved.

Copyright statements and law

advertising, app design, design, Digital Art, Research, U62_U63

Copyright laws are different in every country, but the copyright law that started in the UK came from the concept of common law; the Statute of Anne 1709. It became statutory with the passing of the Copyright Act 1911. The current act is the Copyright, Designs and Patents Act 1988.

Copyright covers the rights of artists, designers, authors, photographers, musicians, film-makers and performers. When a creator creates a piece of work, it will automatically have a form of copyright to it because it is their work. Depending on what medium you are producing with, the way you choose to handle your work may vary. For example, a painter would sell their painting but keep the rights to reproduce it but an illustrator would sell or license the copyright to their work and keep the original.

Copyright in the UK is automatic and usually lasts the creator’s lifespan and generally continues on for 70 years after their death. Some exceptions include forms of media broadcasts and recordings that are only able to be protected for 50 years after their first year of publication, and presswork arrangements that are only protected for 25 years after their first year of publication. Unregistered design right or unregistered copyright properties in the UK only lasts 15 years after the first prototype or sketch, and only 10 years from when the item is first marketed.

You are your own copyright unless you are an employee for a company or brand. In that case, it is usually the employer who owns the copyright to your work related creations. If you are self employed, it is worth being extra careful when taking on client commissions and contracts in order to avoid accidentally giving the customer more rights than you are prepared to give. It is also worth archiving your work as well as saving drafts, sketches, photographs, plans, source materials or models – anything to prove that you created the original piece of work and help defend yourself against any allegations of copyright from other creators, businesses and even art thieves.

If you want protection for something that involves making new material such as recipes, formulas and novel inventions then you can apply to register for a patent. If your invention is still under development or needs finalising but you still wish to discuss it and display it, then patents can come in handy to help protect your work whilst it’s being worked on. Until this idea or invention has been filed through the first stages of it’s patenting process known as the ‘initial application’ for at least one year, you should not share or exhibit your work openly to any third parties. A granted patent can last up to 20 years.

Branding and product names can initially be protected by the ™ (trademark) symbol. This symbol indicates that you are using this name for business and marketing purposes. If you want full protection, you must register your trademark name at the Intellectual Property Office (IPO).

‘Weather Mascots’ App Design

app design, U62_U63, User Interface Design

I created a weather app design in Illustrator that’s marketed towards children. The app is designed to be very simple and user friendly, using characters to portray the different kinds of weather. The app not only gives live updates on the weather forecast both locally and globally, but also has various educational widgets and events to help children learn more about the science behind nature’s weather!

PREVIEW_ALL-01

The final designs of my app, featuring the main three pages.

preview_01-01

This is the main page of the app. It shows today’s weather and also features the character to represent that weather. If you click on them, you’ll be given a daily fact about the weather. It changes everyday.

preview_02-01

This page is a weekly view of the weather, although you can keep scrolling down to see later dates. It gives more detailed information on the wind and precipitation levels, which can come in handy!

preview_03_phone-01

This is the global page, where the user can use the interactive globe to find major cities around the world and what weather it is over there!

 

I created a lot of development work for my app including a navigation map, icon and interface design as well as mock ups and experiments.

Interactive Media App Authoring

app design, Research, U62_U63, User Interface Design

Authoring in the context of digital and interactive media is a term used to describe the creation process of designing, creating and composing a usable interface for devices. Whether it be web pages, mobile apps, games or presentations – any form of media format that is capable of interactive elements such as sound, buttons, videos, animation and the like.

Authoring mobile apps is similar to that of web app development, rooting itself in more traditional software development. Whilst web app design is built around web pages, mobile app design is often written to cater for the mobile phone format and takes advantage of it’s features (such as the touchscreen function on smart phones). For example, a racing game app might be written to take advantage of an iPhone’s accelerometer (the tilt and orientation of the screen).

Applications can integrate a wide variety of interactive components to enhance it’s user experience. The user interface is commonly abundant with scripting for events, buttons, effects, hotspots (rollovers), timelines and slideshows etc. Of course when designing and developing apps, there are limitations in terms of memory, download time, file formatting and plug-in enhancements. As complex as you can make an app, it’s crucial to build it around the target media’s limitations in order for it to function at it’s best without exceeding the capabilities of the device.

There are many app development software that allow designers and programmers to create their apps with. In this case, I am using a variety of different programs to build my mobile app on. I have created the assets in Photoshop and Illustrator and am planning on assembling the interactive parts in Game Salad. Other app developers are part of a company and work on various app development projects for clients. Groups like Nodes have worked for many big companies such as Samsung, O2 and BMW.

App Design Inspiration – Brosmind

advertising, app design, design, Digital Art, mobile, Research, U62_U63, U_5

Brosmind is a freelance illustration studio based in Barcelona and is comprised of two Spanish brothers – Juan and Alejandro Mingarro. Their work has been commissioned by many commercial clients for all sorts of things; from posters and flyers, to food packaging designs, to snowboard designs and icons. They’ve also worked on music branding, video and animation as well as other forms of media. Although their skill set stretches to so many various areas of illustration and graphic design, Brosmind’s design and style remains impressively consistent throughout.

Brosmind’s designs consist of colourful, fun and rounded characters and objects that twist and interact with each other to present an idea or conform to the overall shape of the image. Their combination of interesting composition and quirky ideas mixed with a stylish and playful art style really grabbed my attention. It’s simplistic, yet still manages to grasp so much detail but not overwhelmingly so. Brosmind’s use of space and shape is also very imaginative; they really know how to mold and shape their illustrations by playing with the dimensions of things. They often break reality and realistic proportions in favour of style, which adds even more to their funky and zesty aesthetic.

Adobe Illustrator Basics

Adobe Illustrator CC, app design, Book Sleeve, design, Digital Art, Editing, Photoshop, U62_U63

I began learning how to use the various Pathfinder functions in Illustrator CC and how I can create, merge, cut and edit basic shapes to create more complex ones.

Illustrator_Pathfinder_IRASUTORAITAA_HAJIMEMASHITEEE-01

The Shape Mode functions include Unite, Minus Front, Intersect and Exclude. These functions allow multiple shapes to be either cut away or merged together to become another compound shape.

Pathfinder

The Pathfinder tools are Divide, Trim, Merge, Crop, Outline and Minus Back. These tools help separate shapes from each other, dividing them across their outlines to create cut-off pieces that can be edited to become their own shape.

 

iPhone Designs – Adobe Illustrator

app design, design, Digital Art, mobile, U62_U63

I created iPhone 6 case designs inspired by Richard Perez’s type art.

Examples of App Icons and Designs

app design, Research, U62_U63, U_5

Our next project involves designing and developing an app. Here are some examples of already existing app icons.

1

Aviary

Having installed and used a dozen or so photography apps, one of the most comprehensible and best designed ones would be Aviary. It certainly isn’t an Android equivalent of Photoshop, but the options and functions that come with this sleek app are more than enough to cover your basic mobile photo editing needs. Coupled with a minimalistic image-based icon design of a camera with a stylish balance of black and  white against streaks of colour, and a very user-friendly interface, this app’s design is great.

Aviary

When using Aviary, the photo you choose to edit takes up the majority of the screen with only one scrollable tool bar along the bottom. You can navigate in and out of the different functions with your phone’s back button, meaning that the app doesn’t need to open any extra extension toolbars or drop-boxes that might obstruct the photo you’re editing. This minimalises the interface’s complexity immensely whilst also giving maximum space for you to see your photo. You can also zoom in just with you thumb and index finger like on any other good app which really helps if you want to edit details on such a small screen. Other hand swiping functions such as ‘Undo’ (swipe right) have also been integrated into the interface which is great because it shows that this app really understands its user’s capability and interaction with mobile phones. This also helps avoid adding any extra buttons on the screen that could make things clustered. Once you’re done you can simply press the ‘Done’ button at the top right hand corner and it will save the photo onto your phone whilst also giving you the option to share your image via social media.

Aviary_gif

15

DecoPic

I only really used this app because of its abundance of effects, but the interface itself was rather clunky and difficult to use. The design itself was charming and cute, but a lot of the graphics have been poorly scaled and shrunken horribly in bad resolution. That and also the overlapping and translucent graphics that flood the screen in an attempt to appear ‘decorative’ but in actuality just make the buttons more difficult to see.

The icon is very cute and appealing with all the pink, but my only critique would be that it’s very difficult to see the text. Generally, app icons shouldn’t really have text in them because of how difficult it is to read. One or two letters at most would usually be fine, but more than that and the icon becomes clustered and awkward to read because of how small it is. Images are much better at representing something in a small and concise manner than text when it comes to graphics. They are also easier and quicker to recognise too.

1

It doesn’t help how the app handles adverts rather poorly too, having them pop-up as you start up the app and also scroll along the bottom and top of the screen in rather uncomfortably large banners. The editing mode itself is alright, but the fact that the stickers open up in a massive dropbox that takes up half of the screen space probably isn’t the nicest way to display them. Sure, you can view a lot of stickers at once that way, but it just feels chunky and slightly overwhelming at times. It also covers a lot of the photo you’re editing, making it tricky to see what you’re putting your sticker on. You could have easily just had them running along the bottom as a scroller with a back button (or a swipe) to navigate back to the main editing menu or something. Having said that, it isn’ t the most horrendous interface; it’s just a lot of button pushing and graphics. And, although buttons are commonly very useful things to have, having too many can become over-powering and unnecessary. With the fact that this is a phone app with a touch-screen interface in mind, there could be many other ways to incorporate navigation into this design that could make the overall experience a lot easier and clean-cut.

 1340848453-3011919027_m

puri-5

20111020-230414

5

SnapChat

And here is where I get to sit you down with a cup of tea and tell you how much I detest SnapChat. Oh, this app…where should I even start? My first impression of this app, judging solely on the icon was, “What kind of mascot monstrosity is this?! Yellow and white with a tacky black border?! Who thought this was going to be an good eye-catching design? I don’t even know what that’s supposed to look like!” It wasn’t the best silhouette of a ghost, which for some reason is completely unrelated to a social camera app. And it’s attempt to seem abstract just didn’t work for me.

But that wasn’t even the worst of it. Not only did the SnapChat mascot refuse to appeal to me in the slightest, but once I downloaded the app and was greeted with a sudden minute video tutorial that came out of the nowhere with no control over how to pause or play it, I was welcomed with the most confusing app navigation systems I’d ever seen.

Upon opening the app, the camera mode immediately turned on. This was great because it allowed the user to access their camera and start snap-chatting straight away without having to deal with things like a menu screen. However, due to the lack of clarity as to where to access the different sections and functions of the app, I spent a good half-an-hour or so trying to navigate through everything and even then there were still tons of little settings that I had missed out on. The app itself isn’t bad once you know where everything is – it’s just hugely frustrating to me that the developers didn’t show any clear direction or instruction as to where to get everywhere. They only dropped a couple of pointers here and there but even then, the whole UI was just so different and relied so heavily on the user’s intellect to know where to swipe in every direction possible and to hold down on as many icons as possible to do things. It was really frustrating to handle.

10

WeChat

WeChat is the equivalent to WhatsApp and the icons for both apps are widely recognised to many as a messaging app due to it’s clear and basic symbol – speech bubbles. The colour green gives a sense of friendliness and social company. The app itself is the standard copy of most messaging apps out there with a section for chat logs, contacts and even a newsfeed where you can post statuses and photos. No text or type was used in the icon, avoiding delays in having to read tiny text and making the app more easier to recognise.

4

Bubble Play

Bubble Play is a game created by NAVER LINE made for most Android and iOS mobiles. The icon, like most game apps, feature the main playable characters against a fitting background. A lot of other game apps would have the setting involved in the background too. Although in this case, I really approve of the designer’s choice to keep the background a simple solid orange, complementing the simplistic and cartoony nature of the art style. I think it works really nicely, as orange is associated with energy and fun. The fizzy drink brand Fanta also uses orange! It’s a very zesty colour.

Colour psychology and emotions is considered to be the most important factor into why consumers buy what they buy. A study titled Impact of Color in Marketing found that up to 90% of snap judgments made on products were based on colour alone (depending on the product)

color-emotion

A chart of colours in sections to show what kind of influences they can have on product design.

I understand that a lot of apps are not the standard rounded square shape – some apps such as Quiz Up and Twitter rely on other shapes like circles and even just the mascots themselves against a transparent background. This is a different approach to the commonly used rounded-square layout, but the transparent background adds a nice novelty without over-powering the overall branding of the icon too much. It can also make it stand out quite nicely amongst the sea of rounded-square icons on a phone.

9

7